15+ esiotsa tööriistad, millest peaksite teadma: minu lemmikotsingud aastaks 2020

15+ esiotsa tööriistad, millest peaksite teadma: minu lemmikotsingud aastaks 2020

15+ esiotsa tööriistad, millest peaksite teadma: minu lemmikotsingud aastaks 2020
СОДЕРЖАНИЕ
02 июня 2020

Veel üks aasta on möödunud ja kui olete nagu paljud selle valdkonna veebiarendajad, olete tõenäoliselt avastanud hulgaliselt uusi esiotstarbelisi tööriistu, mida olete kaalunud oma töövoogu kaasata. Olen samas paadis, eriti kuna olen tihedalt seotud regulaarse uurimisega, mis seal on uut tööriistade maastik.


Selles postituses, Ümardan (koos mõne ekraanipildi ja demosüsteemiga) mõned kõige huvitavamad esiotstarbelised tööriistad, mis minu arvates on teile kasulik 2020. aastal. Need ei ole tingimata kõige populaarsemad tööriistad ega kuumimad tööriistad, kuid arvan, et igaüks neist on oma kasutuses ainulaadne ja väärib pisut rohkem tähelepanu. Need on sisuliselt minu omad aasta lemmiklehed esiotstarbelistest tööriistadest.

Parimad esiotstarbelised tööriistad

Kiirklahv

Esiosa tööriistad: kiirklahv

Klahvivajutuste tuvastamine JavaScripti abil ei ole liiga keeruline ülesanne, kuid see GitHubi meeskonna väike utiliit muudab selle ülilihtsaks.

Selle abil saate käivitada elemendi toimingu klaviatuuri otsetee abil.

Otseteede tüübid hõlmavad klahvi, klahvikombinatsiooni või isegi klahvijada. Ühe toimingu jaoks võib teil olla ka mitu otseteed.

JavaScript on koos impordiga vaid üks deklaratsioon:

impordi {install} kataloogist ./hotkey.js;

jaoks (dokument.querySelectorAll (‘[kiirklahv]’)) konst el) {
installi (el)
}

Kui see kood on paigas, tehakse põhitöö HTML-is. Siin on link linkidest, mille lõin sisu kuvamiseks sõltuvalt kasutatavast otseteest:

  • Näide
  • Näide
  • Näide
  • Näide
  • Näide

Pange tähele andmete kiirklahvi atribuute, mis on lisatud igale lingile. Need võimaldavad suunatud toimingute kiirklahve (sel juhul käivitab CSS-i kaudu: sihtvalija). Mitu kiirklahvi eraldatakse komaga; klahvikombinatsioonid on eraldatud plussmärgiga; ja võtmejada eraldatakse tühikuga.

Siin on reaalajas demo:

Proovige kõiki otseteid ja pange tähele, et JavaScripti paneelis on kood minimaalne. Pärast mooduli importimist on selle seadistamine väga lihtne. Ja siin on külgpunkt, kui teil on mitme kiirklahvidega rakendus, mida soovite kuvada modaalaknas (nagu seda tehakse Twitteris, GitHubis jne), võiksite vaadata QuestionMark.js, ja minu vana projekt.

Muidugi, kiirklahvidega soovite arvestada juurdepääsetavusega seotud probleemidega, nii et vaadake selle kohta teavet reposse README.

Freezeframe.js

Esiosa tööriistad: Freezeframe.js

Lühikeste videote manustamine veebilehtedele on toimuva tegevuse näitamiseks tavaline. Mõnikord sobib ka animeeritud GIF. Kuid GIF-id kipuvad segama, kuna nad esitavad oma sisu automaatselt.

See väike utiliit võimaldab teil oma HTML-i manustatud animeeritud GIF-idele lisada videolaadseid funktsioone.

Kui olete oma lehele Freezeframe.js allika lisanud, vajate ainult ühte JavaScripti deklaratsiooni:

uus Freezeframe (‘. freezeframe’, {
päästik: “hõljutage”,
ülekate: vale
});

Kui jätate teise argumendi välja (nt uus Freezeframe (‘. Freezeframe’)), siis vaikimisi pole taasesitusnuppu ja animatsioon käivitub kursoril. Selle ainus viga on see, et kuna see on animeeritud GIF, siis te seda tehniliselt ei saa "paus" seda saate ainult "peatus" see (mis tähendab, et see algab uuesti algusest). Kuid tavaliselt GIF-ide puhul pole see suur asi.

Siin on demo kolme erineva näitega:

Ainuüksi selle tööriista kasutamine ei pruugi jõudlust kokku hoida, kuna tundub, et GIF laaditakse kulisside taha. Kuid ma eeldan, et seda saab kasutada koos laiskade laadimisteekidega, kui GIF on lehe laadimisel ekraanilt väljas.

ARC tööriistakomplekt

Esiosa tööriistad: ARC tööriistakomplekt

Teie esiotsa töötavad tööriistad peaksid sisaldama palju hõlbustusvõimalusi.

See on Chrome’i laiendus, mis lisab teie arendaja tööriistadele vahekaardi, mis aitab teil leida WCAG 2.1 taseme A ja AA juhistega seotud juurdepääsetavuse vigu ja hoiatusi..

Kaks põhjust, miks see tööriist nii suurepärane on:

  • See integreerub teie olemasoleva testimise / silumise töövooga arendaja tööriistades
  • Selle on teinud The Paciello Group, kes on arendajate kogukonnas tuntud ligipääsetavuse kohta

ARC tööriistakomplekti funktsioonid

Kui laiend on installitud, valige lihtsalt arendaja tööriistades vahekaart ja valige "Käivita testid". Esialgne väljund sarnaneb eelmises ekraanipildis kuvatuga. Sealt saate põhjalikumalt uurida konkreetse funktsiooniga seotud võimalike juurdepääsetavuse probleemide vaatamiseks, nagu on näidatud järgmises ekraanipildis:

ARC tööriistakomplekti funktsioonid Puurimine

Pange tähele "Lingid" vasakpoolsel suvandil on linnuke. Seda otsustasin sel juhul uurida. See lisab lehele ka ülekatte, mis näitab, kus kõik valitud objektid asuvad, nagu näete reaalajas lehel olevate arendaja tööriistade kohal.

Stseen.js

Esiosa tööriistad: Scene.js

Tundub, et igal aastal on kasutajaliidese tööriistamaastikul uut sorti animatsioonikogu.

Minu selle aasta valik on Scene.js.

See pole üks, mille saate lihtsalt kiirendada ja mõne minutiga töötada, nagu teised siiani esitasid.

API-ga harjumiseks on olemas kõverkõver, mis näeb välja umbes selline:

lase stseen = uus stseen ({
".otsingukasti": {
"0%" : "laius: 50 pikslit",
"70%": "laius: 300 pikslit",
},
".rida": {
"30%" : "laius: 0%",
"100%": "laius: 100%",
}
}, {
kestus: 1,
kergendamine: stseen.EASE_IN_OUT,
valija: tõsi,
}). exportCSS ();

stseen.setTime (0);
lase lülitada = vale;

document.querySelector (".Esita") .addEventListener ("klõps", funktsioon () {
lülita =! lülita;
scene.setDirection (ümberlülitamine ? "normaalne" : "tagurpidi");
stseen.mäng ();
});

See on kood ühele näited avalehel. See on lihtne väike animeeritud otsingukast. Nende CodePeni demo on siin:

See ei ole jällegi lihtne vahend kiireks õppimiseks, kuid kui soovite proovida uut animatsioonikogu, mis tundub üsna arusaadav API, võib see olla hea valik.

Kommentaar

Esiosa tööriistad: Kommentaar

Praegune privaatsust teadvustav veebimaastik võiks kasutada rohkem selliseid tööriistu. Olen juba mõnda aega kaalunud oma WordPressi veebisaidi paremate kommenteerimissüsteemide võimalusi ja Commento näeb hea välja.

Mulle meeldib Disquse taolise funktsionaalsus (üles- ja allahääled, populaarsemad kommentaarid jne), kuid see on olemas liiga palju paistetama.

Mulle meeldib ka see, et WordPressi kommentaarid on vaikimisi ise hostitud, kuid neil puuduvad need Disquse lisafunktsioonid. Arvan, et Commento on samm õiges suunas nende probleemide lahendamiseks.

Kui kavatsete olemasolevalt kommenteerimisplatvormilt üle minna Commentole, siis see on nii üsna palju tööd sellest, mida ma lugesin, nii et see on suur varjukülg.

Kuigi Commento lubab teil importida Disqusest, ei saa te seda siiski importida "hääled" Disquse vanade kommentaaride või kommentaaride postitanud kasutajate avataride kohta.

Samuti ei saa vanu WordPressi kommentaare Commentosse importida, kui te esmalt ei eksporti Disqusse ja seejärel impordite Disqusest Commentosse (seda saab teha Disquse imporditööriista abil, kui registreerute Commentosse).

Viimane puudus on see, et Commento pole tasuta, kui te ise seda ei hostita. Kuid kui arvestada Disquse ülespuhumise ja privaatsusega seotud probleemidega, on väike kuutasu väärt.

Git ajalugu

Esiosa tööriistad: Git ajalugu

Kuigi see ei kuulu ainult esiotstarbeliste tööriistade kategooriasse, on see minu töö lihtsuse ja uudsuse tõttu üks minu lemmikuid selles loendis.

Giti ajalugu võimaldab teil vaadata avalikus Git-repos olevate failide ajalugu (GitHub, GitLab või Bitbucket).

Oletagem näiteks, et soovite vaadata muudatuste ajalugu lähtefail jaoks Normaliseeri.css. Fail asub aadressil:

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

Selle ajaloo vaatamiseks asendage github.com URL-is aadressiga github.githistory.xyz:

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

Uue URL-i väljund laadib ilusa ja interaktiivse võimaluse faili aja jooksul tehtud muudatuste vaatamiseks. Mõni lahe animatsioon käivitatakse iga kord, kui valite ajaloopunkti, mis võimaldab teil näha, millised muudatused toimusid ja milline kasutaja neid pani..

CSS-funktsioon lülitub sisse

Esiosa tööriistad: lülitab sisse CSS-i funktsiooni

Kui töötate endiselt keskkonnas, kus peate brauseri pärand testimist tegema, võib see olla kena väike Chrome’i laiendus, mida oma testimise tööriistakasti lisada.

CSS-funktsioonide sisselülitamine, sarnaselt ülalmainitud ARC-tööriistakomplektiga, lisab teie brauseri arendaja tööriistadele uue vahekaardi.

Sellel vahekaardil näete nimekirja moodsatest CSS-funktsioonidest.

Lülitamiseks kasutatavad CSS-i funktsioonid

Saate neid ümber lülitada, et näha kohe oma lehe väljanägemist, kui kasutaja külastab seda lehte brauseris, mis seda konkreetset funktsiooni ei toeta. See on suurepärane viis saada kiire ülevaade sellest, kuidas teie paigutused vanemates keskkondades halvenevad.

Erinevate funktsioonide valimisel värskendatakse lehte muudatuste kuvamiseks automaatselt. Näiteks Flexboxiga loodud sait saab kasu mõnest vanemast CSS-ist, mis hoiab paigutuse mõistlikuna, täiustades samas uuemates brauserites järk-järgult.

Loo rakendus

Esiosa tööriistad: looge rakendus

Pole kahtlust, et teie esiotstarbeliste tööriistade töövoog sisaldab palju võimalusi ehitamiseks. See veebisait on õppesaidi ja projekti genereerimise tööriista kombinatsioon arendajatele, kes kasutavad (või soovivad õppida kasutama) veebipaketti või Parcelit, populaarseid varapakkujaid.

Puurige vasakul kategooriatesse, et valida oma ehitamiseks vajalikud suvandid, seejärel kuvage peaaknas vajalikud failid ja konfiguratsioonivõimalused.

Rakenduse konfiguratsiooni suvandite loomine

Leht on täielikult interaktiivne, nii et nende sisu kuvamiseks võite klõpsata ükskõik millisel virtuaalsel failil või hõljutage kursorit valitud suvandil, et vaadata kirjeldust koos selle valikuga seotud ehituse esiletõstetud osadega.

Väga kasulik nii õppimiseks kui ka uute projektide loomiseks!

CSSJanus

Esiosa tööriistad: CSS Janus

Rahvusvahelistumise valdkonnas on see veebipõhine tööriist, mis võimaldab teil teisendada stiililehti vasakult paremale paremalt vasakule ja vastupidi.

See võimaldab hõlpsalt luua paremalt vasakule (rtl) keelte, näiteks araabia ja heebrea keelte stiilitabelid.

Siin on CSS-i näide:

.näide {
ujuk: vasak;
teksti joondamine: vasak;
polster: 1x 2xx 3xx 4xx;
veeris-vasak: 1em;
taustpositsioon: 5% 100 pikslit;
kursor: suurust ei muudeta;
ääreraadius: 1 px 2 px;
}

Ülaltoodu teisendatakse järgmisteks:

.näide {
ujuk: paremal;
teksti joondamine: paremal;
polster: 1px 4xx 3xx 2xx;
paremäär: 1em;
taustpositsioon: 95% 100 pikslit;
kursor: nw-suurust muuta;
ääreraadius: 2 px 1 px;
}

Pange tähele, et erinevused hõlmavad mitte ainult ridu, nagu hõljumine: vasak ja tekst-joondus: vasak, vaid teistele meeldivad horisontaalsed polsterdusdeklaratsioonid ja taust-positsiooni väärtused.

Ja kui soovite, et tööriist ignoreeriks stiiliplokki või üksikut deklaratsiooni, võite kasutada @noflip-direktiivi:

/ * @noflip * / .ignored {
ujuk: vasak;
}

.eiramata {
ujuk: vasak;
/ * @noflip * / taust: #fff (poster-ltr.png);
}

Värvivaras

Esiosa tööriistad: värvivarg

Color Thief on tõesti kena ja üsna hõlpsasti kasutatav, kuid on oma kasutusjuhtudel väga spetsiifiline.

Põhimõtteliselt saate selle utiliidi abil JavaScripti abil haarata soovitud pildi põhjal värvipaleti, mis koosneb 2 kuni 20 värvist..

See pole midagi, mida kasutate igal veebisaidil või rakenduses, kuid see on kena idee ja on ilmselt juba mõnda aega olemas olnud ja seda on viimase aasta jooksul värskendatud.

Kasutades lihtsat API-t, saate haarata pildi ühe reaga:

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

Sealt edasi on ainult tagastatud massiivi manipuleerimine. Allpool näete CodePeni sisseehitatud demo, mis haarab kuvatud pildilt kasutaja sisestatud arvu värve. Kood, mida ma massiivis kasutan, on:

myPalette.forEach (
element => colors.innerHTML + = ""
);

Ehitan palet, kasutades elemente ja tekstisisest stiile. Värvid tagastatakse RGB väärtustena.

CodePeni demos kasutab ma ümbersuunamise probleemide lahendamiseks, millega sattusin CodePenis, kuid tavaliselt ei vaja te neid ridu (kommenteerinud) harjumuspärases keskkonnas.

RegexGuide

Esiosa tööriistad: RegexGuide

Näib, nagu leian igal aastal laheda interaktiivse rakenduse, mida lisada oma esiotstarbeliste tööriistade kollektsiooni, mis aitab luua tavalisi väljendeid, nii et siin on selle aasta sissekanne. Ja kui sa oled nagu mina, võtad sa kogu vajaliku abi nende ehitamiseks.

See on alguses pisut veider, et peas ringi käia, sest see läbib sammud ükshaaval, nagu võlur.

Kui olete lõpetanud ja kõik tingimused on paigas, saate proovida määratletud tingimustele vastamiseks erinevaid väärtusi ja leht näitab interaktiivselt, mis töötab.

Sellised tööriistad on alati mõned minu lemmikud, kuna need ei tööta mitte ainult selleks, et luua koodi, mis muidu oleks tüütu, vaid aitavad ka süntaksit õppida.

Esiosa tööriistad: austatud mainib

Need on minu arvates mõned huvitavamad esiotstarbelised tööriistad, mille kohta ma leidsin, et minu arvates ei ole viimase aasta jooksul piisavalt tähelepanu pööratud. Olen kindel, et teil on oma sellised leiud, nii et lisage need allpool toodud kommentaaridesse. Vahepeal on siin lõplik nimekiri asjadest, mis ei moodustanud päris põhiloendit, kuid minu arust olid mainimist väärt:

  • wehatecaptchas – captcha-alternatiiv, ilma pildi või tähe / numbri dešifreerimiseta, isegi mitte ruuduga "kinnita, et ma pole robot"
  • simpleParallax – lihtne viis parallaksiafektide saavutamiseks JavaScripti abil.
  • Lite YouTube’i manustamine – Ilmselt 224X kiirem kui traditsiooniline manustamiskood.
  • Brauseri vaikestiilid – Sisestage ükskõik milline HTML-element ja see tööriist ütleb teile iga brauseri selle elemendi vaikimisi määratud CSS-i.
  • Kes saavad kasutada – Sisestage kahevärviline kombinatsioon ja see tööriist ütleb teile, millised vaegnägijad saavad seda kombinatsiooni teksti / tausta jaoks kasutada.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Kujundus ja esitlus Karol K poolt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector