15 ir daugiau priekinių įrankių, kuriuos turėtumėte žinoti: mano mėgstamiausi radiniai 2020 metams

Praėjo dar vieni metai ir, jei esate panašūs į daugelį šios srities žiniatinklio kūrėjų, tikriausiai atradote daugybę naujų priekinių įrankių, kuriuos, jūsų manymu, pritaikėte savo darbo eigoje. Aš esu toje pačioje valtyje, ypač todėl, kad giliai įsitraukiau į tai, kad reguliariai tyrinėju, kas naujo įrankių peizažas.


Šiame įraše, Apibendrinsiu keletą (su tam tikrais ekrano vaizdais ir demonstracinėmis versijomis) kai kuriuos įdomiausius įrankius, kuriuos radau, manau, kad jums bus naudinga 2020 m.. Tai nebūtinai yra patys populiariausi ar šilčiausi įrankiai, tačiau aš manau, kad kiekvienas iš jų yra unikalus ir vertas šiek tiek daugiau dėmesio. Iš esmės tai yra mano mėgstamiausi metų radiniai naudojant naudojimąsi įrankiais.

Geriausi „Front-End“ įrankiai

Greitasis klavišas

Priekiniai įrankiai: spartusis klavišas

Klavišų aptikimas naudojant „JavaScript“ nėra per daug sudėtinga užduotis, tačiau šis nedidelis „GitHub“ komandos naudingumas padaro tai labai paprasta..

Su juo galite suaktyvinti veiksmą elementui, naudodamiesi sparčiu klavišu.

Spartieji klavišai apima klavišą, klavišų kombinaciją ar net klavišų seką. Taip pat galite turėti keletą nuorodų, skirtų vienam veiksmui.

„JavaScript“ yra tik viena deklaracija kartu su importu:

importuoti {įdiegti} iš ‘./hotkey.js’;

for („document.querySelectorAll“ („[greitojo klavišo]“) konst. el.)) {
įdiegti (el)
}

Kai šis kodas yra, pagrindinis darbas atliekamas HTML. Čia pateiktas nuorodų, kurias sukūriau, kad turinys būtų rodomas atsižvelgiant į naudojamą nuorodą, sąrašas:

  • Pavyzdys
  • Pavyzdys
  • Pavyzdys
  • Pavyzdys
  • Pavyzdys

Atkreipkite dėmesį į duomenų greitojo klavišo atributus, pridėtus prie kiekvienos nuorodos. Būtent tai įgalina tikslinių veiksmų klavišus (šiuo atveju, naudojant CSS, suaktyvinamas: taikinio selektorius). Keli klavišai yra atskiriami kableliu; klavišų kombinacijos yra atskirtos pliuso simboliu; o klavišų sekos yra atskirtos tarpu.

Čia yra tiesioginė demonstracinė versija:

Išbandykite kiekvieną nuorodą ir pastebėkite, kad „JavaScript“ skydelyje kodas yra minimalus. Labai paprasta nustatyti, kai modulis yra importuotas. Kaip šalutinis punktas, jei turite programą su keliais sparčiaisiais klavišais, kuriuos norite rodyti modulio lange (kaip tai daroma „Twitter“, „GitHub“ ir kt.), Galbūt norėsite apsilankyti „QuestionMark.js“, ir senas mano projektas.

Žinoma, naudodamiesi sparčiaisiais klavišais norėsite atkreipti dėmesį į prieinamumo problemas, todėl būtinai peržiūrėkite repos README, kad gautumėte informacijos apie tai.

„Freezeframe.js“

Priekiniai įrankiai: „Freezeframe.js“

Trumpas vaizdo įrašų įdėjimas į interneto puslapius yra įprastas norint parodyti vykstantį veiksmą. Kartais taip pat tinka animacinis GIF. Tačiau GIF paprastai blaško dėmesį, nes automatiškai atkuria savo turinį.

Šis nedidelis įrankis leidžia pridėti vaizdo įrašą primenančių funkcijų prie animuotų GIF, įterptų į jūsų HTML.

Kai į savo puslapį įtrauksite „Freezeframe.js“ šaltinį, jums reikės tik vienos „JavaScript“ deklaracijos:

naujas „Freezeframe“ („. freezeframe“, {
aktyviklis: ‘užveskite’,
perdanga: klaidinga
});

Jei nepateiksite antrojo argumento (pvz., Naujojo „Freezeframe“ („. Freezeframe“)), pagal nutylėjimą jis nebus paleistas ir animacija suaktyvės užvedus pelės žymeklį. Vienintelis trūkumas yra tas, kad techniškai to padaryti negali, nes tai yra animacinis GIF "Pauzė" tai jūs galite tik jūs "sustabdyti" tai (tai reiškia, kad jis prasideda iš naujo). Tačiau paprastai naudojant GIF tai nėra didelis dalykas.

Pateikiame demonstracinę versiją su trimis skirtingais pavyzdžiais:

Tačiau naudojant tik šį įrankį, rezultato sutaupyti nepavyks, nes atrodo, kad visas GIF užkulisiuose. Bet aš manau, kad tai gali būti naudojama kartu su tinginio įkėlimo biblioteka, jei GIF neveikia, kai puslapis įkeliamas.

ARC įrankių rinkinys

Priekiniai įrankiai: ARC įrankių rinkinys

Į pagrindinius įrankius turėtų būti įtraukta daug pritaikymo neįgaliesiems galimybių.

Tai yra „Chrome“ plėtinys, pridedantis skirtuką prie jūsų kūrėjo įrankių, kuris padės rasti pritaikymo neįgaliesiems klaidas ir įspėjimus, susijusius su WCAG 2.1 A ir AA gairėmis..

Dvi priežastys, kodėl šis įrankis yra toks puikus:

  • Jis integruojamas su jūsų turima testavimo / derinimo darbo eiga kūrėjo įrankiuose
  • Jį sukūrė „The Paciello Group“, kurie kūrėjų bendruomenėje yra gerai žinomi dėl savo prieinamumo įžvalgų

ARC priemonių rinkinys

Įdiegę plėtinį, tiesiog pasirinkite skirtuką kūrėjo įrankiuose ir pasirinkite "Vykdykite testus". Pradinis išėjimas bus panašus į tai, ką matote ankstesnėje ekrano kopijoje. Iš ten galite išsiaiškinti visas galimas prieigos problemas, susijusias su konkrečia funkcija, kaip parodyta kitame ekrano kopijoje:

ARC įrankių komplekto ypatybės

Atkreipkite dėmesį "Nuorodos" kairėje esančioje parinktyje šalia yra varnelė. Tai aš pasirinkau nagrinėti šiuo atveju. Tai taip pat prideda puslapio perdengimą, parodantį, kur yra visi pažymėti objektai, kaip galite pamatyti viršuje kūrėjo įrankiuose tiesioginiame puslapyje.

Scena.js

Priekiniai įrankiai: Scene.js

Atrodo, kad kiekvienais metais priekinių įrankių kraštovaizdyje atsiranda nauja animacijos biblioteka.

Mano pasirinkimas šiais metais yra Scene.js.

Tai nėra tas, kurį galite tiesiog pasiimti ir sugaišti per kelias minutes, kaip ir kiti iki šiol.

Yra pripratimo prie API kreivė, kuri atrodo maždaug taip:

tegul scena = nauja scena ({
".paieškos laukelyje": {
"0%" : "plotis: 50px",
"70 proc.": "plotis: 300 taškų",
},
".linija": {
"30 proc." : "plotis: 0%",
"100%": "plotis: 100%",
}
}, {
trukmė: 1,
palengvinimas: scena.EASE_IN_OUT,
selektorius: tiesa,
}). exportCSS ();

scena.setTime (0);
leisti perjungti = klaidinga;

document.querySelector (".Pateikti") .addEventListener ("paspauskite", funkcija() {
perjungti = perjungti;
scena.setDirection (perjungti ? "normalus" : "atvirkštinė");
scena.play ();
});

Tai yra vieno iš šių kodų kodas pavyzdžiai pagrindiniame puslapyje. Tai paprastas mažas animacinis paieškos laukelis. Štai jų „CodePen“ demonstracinė versija:

Tai vėlgi nebus lengvas įrankis greitai išmokti, bet jei jus domina išbandyti naują animacijos biblioteką, kuri, atrodo, yra gana paprasta API, tai gali būti geras pasirinkimas.

Komentaras

Priekiniai įrankiai: komentaras

Dabartinėje internetinėje aplinkoje, kurioje atsižvelgiama į privatumą, gali būti naudojama daugiau panašių įrankių. Jau kurį laiką svarsčiau galimybes patobulinti komentavimo sistemas savo „WordPress“ svetainėje, o „Commento“ atrodo solidžiai.

Man patinka kažko, pavyzdžiui, „Disqus“, funkcionalumas (balsavimo balsai aukštyn / žemi balsai, geriausi komentarai ir tt), bet jis turi per daug išsipūtęs.

Taip pat man patinka, kad „WordPress“ komentarai pagal nutylėjimą yra priglobti savarankiškai, tačiau jiems trūksta tų papildomų „Disqus“ funkcijų. Manau, kad „Commento“ yra žingsnis teisinga linkme, siekiant išspręsti šias problemas.

Jei ketinate pereiti nuo esamos komentavimo platformos prie „Commento“, taip yra gana daug darbo iš to, ką skaičiau, tai yra didelis neigiamas dalykas.

Be to, nors „Commento“ leidžia importuoti iš „Disqus“, jūs negalėsite importuoti "balsų" apie senus „Disqus“ komentarus arba komentarus paskelbusių vartotojų avataros.

Taip pat nėra galimybės importuoti senų „WordPress“ komentarų į „Commento“, nebent pirmiausia eksportuojate į „Disqus“, tada importuojate iš „Disqus“ į „Commento“ (tai galima padaryti naudojant „Disqus“ importavimo įrankį, kai jūs prisiregistruojate į „Commento“)..

Paskutinis trūkumas yra tas, kad „Commento“ nėra nemokamas, nebent jūs pats jį priimate. Tačiau kai jūs atsižvelgsite į „Disqus“ išsipūtimo ir privatumo problemas, vertas mažas mėnesinis mokestis.

Git istorija

Priekiniai įrankiai: „Git“ istorija

Nors tai nėra vien tik priekinių įrankių kategorija, jis yra vienas iš mano mėgstamiausių šiame sąraše dėl savo paprastumo ir naujoviškumo.

„Git“ istorija leidžia peržiūrėti bet kurio viešojo „Git“ atpirkimo failo („GitHub“, „GitLab“ arba „Bitbucket“) failų istoriją..

Pvz., Tarkime, kad norite peržiūrėti. Pakeitimų istoriją šaltinio failas dėl Normalizuoti.css. Failas yra:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Norėdami peržiūrėti jos istoriją, pakeiskite github.com URL URL adresu github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

Naujojo URL išvestis įkelia tvarkingą, interaktyvų būdą peržiūrėti failo pokyčius bėgant laikui. Kai kurios animacijos suveikia kiekvieną kartą, kai pasirenkate istorijos tašką, kad galėtumėte pamatyti, kurie pakeitimai įvyko ir kuris vartotojas juos paskyrė..

Perjungia CSS funkciją

Priekiniai įrankiai: perjungia CSS funkciją

Jei vis dar dirbate aplinkoje, kurioje turite atlikti senus naršyklių bandymus, tai gali būti gražus mažas „Chrome“ plėtinys, kurį galite pridėti prie savo bandymo įrankių dėžutės..

„CSS Feature Toggles“, panašūs į aukščiau paminėtą „ARC Toolkit“, prideda naują skirtuką jūsų naršyklės kūrėjo įrankiuose..

Skirtuke pastebėsite šiuolaikinių CSS funkcijų sąrašą.

Galima perjungti CSS funkcijas

Galite juos perjungti, kad iškart pamatytumėte, kaip atrodo jūsų puslapis, kai vartotojas lankosi puslapyje naršyklėje, kuri nepalaiko tos konkrečios funkcijos. Tai puikus būdas greitai apžvelgti, kaip blogėja jūsų maketai senesnėje aplinkoje.

Pasirinkus skirtingas funkcijas, puslapis bus atnaujinamas automatiškai, kad būtų rodomi pakeitimai. Pavyzdžiui, svetainei, sukurtai naudojant „Flexbox“, bus naudinga kai kuri senesnė CSS, kad išdėstymas būtų sveikas, o palaipsniui tobulinamas naujesnėse naršyklėse..

Kurti programą

Priekiniai įrankiai: sukurkite programą

Be jokios abejonės, jūsų darbo įrankių sraute yra daugybė variantų, kaip kurti. Ši svetainė yra mokymosi svetainės ir projekto generavimo įrankio, skirto kūrėjams, naudojantiems (arba norintiems išmokti naudoti) internetinę pakuotę ar „Parcel“, populiarius turto kaupiklius, derinys..

Suskirstykite į kategorijas kairėje, norėdami pasirinkti norimas statyti parinktis, tada pagrindiniame lange pamatysite reikiamus failus ir konfigūracijos parinktis..

Sukurkite programos konfigūravimo parinktis

Puslapis yra visiškai interaktyvus, todėl galite spustelėti bet kurį virtualų failą, norėdami pamatyti jų turinį, arba galite užveskite pelės žymeklį ant pasirinktos parinkties, kad pamatytumėte aprašą kartu su paryškintomis statinio dalimis, susijusiomis su šia parinktimi..

Labai naudinga tiek mokantis, tiek kuriant naujus projektus!

CSSJanus

Priekiniai įrankiai: CSS Janus

Internacionalizacijos srityje tai yra internetinis įrankis, leidžiantis konvertuoti stilių lenteles iš kairės į dešinę į dešinę į kairę ir atvirkščiai..

Tai leidžia lengvai kurti kalbų iš dešinės į kairę (rtl), pvz., Arabų ir hebrajų, stilių lenteles.

Štai CSS pavyzdys:

.pavyzdys {
plūdė: kairė;
tekstas lygiuoti: kairėn;
paminkštinimas: 1px 2px 3px 4px;
paraštė-kairė: 1em;
fono padėtis: 5% 100 pikselių;
žymeklis: nekeisti dydžio;
kraštinės spindulys: 1 px 2 px;
}

Aukščiau pateiktos dalys bus konvertuotos į šias:

.pavyzdys {
plūdė: dešinė;
tekstas lygiuoti: dešinėje;
paminkštinimas: 1px 4px 3px 2px;
paraštės dešinė: 1em;
fono padėtis: 95% 100 pikselių;
žymeklis: nw-pakeisti dydį;
kraštinės spindulys: 2 px 1 px;
}

Atkreipkite dėmesį, kad skirtumai apima ne tik tokias eilutes, kaip plūduriuojančios: kairė ir lygiuojama pagal tekstą: kairė, bet kitiems patinka horizontalios užpildymo deklaracijos ir foninės padėties vertės..

Ir naudinga, jei norite, kad įrankis nepaisytų stiliaus bloko ar vienos deklaracijos, galite naudoti @noflip direktyvą:

/ * @noflip * / .ignored {
plūdė: kairė;
}

.neignoruojamas {
plūdė: kairė;
/ * @noflip * / background: #fff (plakatas-ltr.png);
}

Spalvų vagis

Priekiniai įrankiai: spalvų vagis

„Color Thief“ yra tikrai tvarkingas ir gana paprastas naudoti, tačiau yra labai specifinis naudojimo atvejais.

Iš esmės, naudodamiesi šia programėle, galite naudoti „JavaScript“, kad patrauktumėte spalvų paletę nuo 2 iki 20 spalvų, atsižvelgiant į duotą paveikslėlį..

Tai nėra kažkas, ką naudosite kiekvienoje svetainėje ar programoje, tačiau tai puiki idėja, kuri, matyt, buvo jau kurį laiką ir buvo atnaujinta per pastaruosius metus.

Naudodami paprastą API, galite paimti paveikslėlio paletę viena eilute:

tegul myPalette = colorThief.getPalette (img, 10);

Iš ten tereikia manipuliuoti grąžintu masyvu. Žemiau galite pamatyti „CodePen“ pastatytą demonstracinę versiją, kuri patraukia vartotojo įvestą spalvų skaičių iš rodomo paveikslėlio. Kodas, kurį naudoju masyve:

„myPalette.forEach“ (
elementas => spalvos.innerHTML + = ""
);

Kuriu paletę naudodamas elementus ir įdėtinius stilius. Spalvos grąžinamos kaip RGB vertės.

„CodePen“ demonstracinėje versijoje aš naudojuosi apeiti kryžminės kilmės problemas, su kuriomis susidūriau naudodamas „CodePen“, tačiau paprastai jums šios eilutės nereikės (komentuoti) įprastoje aplinkoje..

„RegexGuide“

Priekiniai įrankiai: „RegexGuide“

Panašu, kad kiekvienais metais randu puikią interaktyvią programą, kad galėčiau įtraukti į savo priekinių įrankių kolekciją, kuri padeda kurti įprastas išraiškas, taigi štai šių metų įrašas. Ir jei esate panašus į mane, imkitės visos pagalbos, kurią galite gauti kurdami juos.

Šitai yra šiek tiek keista, kad iš pradžių galvojate apie galvą, nes ji eina žingsniais po vieną, tarsi burtininkas.

Kai būsite baigę ir turėsite visas sąlygas, galėsite išbandyti skirtingas vertes, kad atitiktumėte nurodytas sąlygas, ir puslapis interaktyviai parodys, kas veikia.

Tokie įrankiai visada yra vieni iš mano mėgstamiausių, nes jie veikia ne tik kaip būdas sukurti kodą, kuris priešingu atveju būtų nuobodus, bet ir padeda išmokti sintaksės..

Priekiniai įrankiai: garbingi paminėjimai

Taigi, mano manymu, tai yra keletas įdomesnių priekinių įrankių, kurie, manau, per pastaruosius metus nesulaukė pakankamai dėmesio. Esu tikras, kad turite savo tokius radinius, todėl nedvejodami įrašykite juos toliau pateiktuose komentaruose. Tuo tarpu, čia yra galutinis sąrašas dalykų, kurie ne visai sudarė pagrindinį sąrašą, bet aš maniau, kad juos verta paminėti:

  • wehatecaptchas – „captcha“ alternatyva, kurioje nėra iššifruojamas atvaizdas ar raidė / skaičius, net ne žymimasis langelis "patvirtinu, kad nesu robotas"
  • paprastasParallax – Paprastas būdas padaryti paralakso efektus naudojant „JavaScript“.
  • „Lite YouTube“ įterpimas – Matyt 224X greičiau nei tradicinis įdėjimo kodas.
  • Numatytieji naršyklės stiliai – Įveskite bet kurį HTML elementą ir šis įrankis jums nurodys kiekvienos naršyklės numatytąją to elemento CSS.
  • Kas gali naudoti – Įveskite dviejų spalvų derinį ir šis įrankis jums nurodys, kokie regos negalią turintys vartotojai gali naudoti tą derinį tekstui / fonui.

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

Karolio K išdėstymas ir pristatymas.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map