15+, az elsődleges eszközökről, amelyekről tudnia kell: Kedvenceim 2020-ra

Még egy év telt el, és ha olyanok, mint az iparág számos webfejlesztője, valószínűleg egy csomó új eszközt fedez fel Önnek, amelyeket a munkafolyamatba beépítettek. Ugyanazon a csónakban vagyok, különösen azért, mert mélyen részt veszek abban, hogy rendszeresen kutatjam az újdonságokat az eszközök tájképe.


Ebben a posztban, Összekerekítenék (néhány képernyőképeket és bemutatókat) a legérdekesebb front-end eszközökkel, amelyekről azt találtam, hogy azt gondolom, hogy hasznosak lesznek 2020-ban. Ezek nem feltétlenül a legnépszerűbb vagy a legforróbb eszközök, de szerintem ezek mindegyike egyedi, és egy kicsit több figyelmet érdemel. Ezek alapvetően az enyém az év kedvenc leletei a front-end eszközökben.

A legjobb front-end eszközök

gyorsgomb

Kezelőeszközök: Gyorsbillentyűk

A billentyűleütések észlelése JavaScript-rel nem túl bonyolult feladat, de a GitHub csapata ez a kis segédprogram rendkívül egyszerűvé teszi.

Ezzel elindíthat egy műveletet egy elemnél egy billentyűparancs segítségével.

A gyorsbillentyűk típusai tartalmazzák a kulcsot, a billentyűkombinációt, vagy akár a billentyűsorozatot. Egyszerre több parancsikon is lehet.

A JavaScript csak egy nyilatkozat és importálás:

importál {install} a ‘./hotkey.js’ fájlból;

for (a document.querySelectorAll (‘[adat-gyorsbillentyű]’)) const el of document.querySelectorAll)) {
telepíteni (el)
}

Amint ez a kód a helyén van, a fő munka a HTML-ben történik. Itt található a linkek listája, amelyeket valamilyen tartalom megjelenítéséhez hoztam létre a használt parancsikon függvényében:

  • Példa
  • Példa
  • Példa
  • Példa
  • Példa

Figyelem: az egyes hivatkozásokhoz hozzáadott adat-gyorsbillentyűk attribútumai. Ezek lehetővé teszik a célzott tevékenységek gyorsbillentyűit (ebben az esetben a: célválasztó indítását CSS-en keresztül). Több gyorsbillentyűt vessző választ el egymástól; a billentyűkombinációkat plusz szimbólum választja el; és a kulcsszekvenciákat szóközzel elválasztják.

Itt egy élő bemutató:

Próbálja ki az egyes parancsikonokat, és vegye figyelembe, hogy a JavaScript panelen a kód minimális. A modul importálása után nagyon egyszerűen beállítható. És mellékpontként, ha van egy olyan alkalmazás, amely több gyorsbillentyűvel rendelkezik, és amelyet modális ablakban szeretne megjeleníteni (a Twitterben, a GitHubban stb.), Érdemes megnézni QuestionMark.js, és egy régi projektem.

A gyorsbillentyűkkel természetesen figyelembe kell venni az akadálymentességgel kapcsolatos problémákat, ezért érdemes megnézni a repó README-jét, hogy erről tudjon információt..

Freezeframe.js

Kezelőeszközök: Freezeframe.js

A rövid videók weboldalakba ágyazása általában a bekövetkező akció bemutatása. Időnként animált GIF is megfelelő. A GIF-ek azonban általában zavaróak, mert automatikusan lejátsszák a tartalmukat.

Ez a kis segédprogram lehetővé teszi video-szerű funkciók hozzáadását a HTML-beágyazott animált GIF-ekhez.

Miután beillesztette az oldalába a Freezeframe.js forrást, csak egyetlen JavaScript-nyilatkozatra van szüksége:

új Freezeframe (‘. freezeframe’, {
ravasz: ‘lebeg’,
overlay: hamis
});

Ha elhagyja a második argumentumot (például az új Freezeframe (‘. Freezeframe’)), akkor az alapértelmezés szerint nincs lejátszás gomb és az animáció lebeg. Ennek egyetlen hibája az, hogy mivel ez animált GIF, technikailag nem tudja "szünet" csak te "állj meg" (ami azt jelenti, hogy újra indul az elejétől). De általában a GIF-eknél ez nem nagy ügy.

Itt egy bemutató három különféle példával:

Ennek az eszköznek a használata önmagában azonban nem csökkentheti a teljesítményt, mivel úgy tűnik, hogy a teljes GIF a színfalak mögött töltődik be. Feltételezem, hogy ezt fel lehet használni egy lusta betöltési könyvtárral együtt, ha a GIF képernyőn kívül van, amikor az oldal betöltődik.

ARC Toolkit

Kezelőeszközök: ARC eszközkészlet

Az elsődleges eszközökhöz rengeteg akadálymentességi lehetőséget kell tartalmaznia.

Ez egy olyan Chrome kiterjesztés, amely hozzáad egy fület a fejlesztői eszközökhöz, hogy segítsen megtalálni a WCAG 2.1 A és AA irányelvekhez kapcsolódó akadálymentességet és figyelmeztetéseket..

Két ok, amiért ez az eszköz olyan nagyszerű:

  • Integrálódik a meglévő tesztelési / hibakeresési munkafolyamatokkal a fejlesztői eszközökben
  • Készítette a The Paciello Group, akik a fejlesztői közösségben jól ismertek akadálymentességükről szóló ismereteikkel

ARC eszközkészlet

A bővítmény telepítése után válassza ki a fület a fejlesztői eszközökben, és válassza a lehetőséget "Futtassa a teszteket". A kezdeti kimenet hasonló lesz az előző képernyőképen láthatóhoz. Innentől részletesebben megtekintheti az adott funkcióval kapcsolatos esetleges akadálymentességi problémákat, amint azt a következő képernyőképe mutatja:

Az ARC eszközkészlet jellemzői

Figyelje meg a "linkek" A bal oldali opció melletti pipa található. Ezt választottam ebben az esetben. Ez egy oldalfedést is felvesz az oldalra, amely megmutatja, hogy hol vannak az összes kiválasztott objektum, amint azt az élő oldalon a fejlesztőeszközök felett is láthatjuk.

Scene.js

Kezelőeszközök: Scene.js

Úgy tűnik, hogy minden évben egyfajta új animációs könyvtár létezik a kezelőfelszerelés területén.

Az idei évre a Scene.js választottam.

Ez nem olyan, amelyet csak felvehet és pár perc alatt dolgozhat együtt, mint a többi eddig bemutatott.

Van egy tanulási görbe az API-hoz való megszokáshoz, amely körülbelül így néz ki:

hagyjuk jelenet = új jelenet ({
".searchbox": {
"0%" : "szélesség: 50 képpont",
"70%": "szélesség: 300 képpont",
},
".vonal": {
"30%" : "szélesség: 0%",
"100%": "szélesség: 100%",
}
}, {
időtartam: 1,
megkönnyebbülés: Jelenet.EASE_IN_OUT,
választó: igaz,
}). ExportCSS ();

scene.setTime (0);
had váltás = false;

document.querySelector (".Beküldés") .AddEventListener ("kettyenés", function () {
váltás =! váltás;
scene.setDirection (kapcsoló ? "Normál" : "fordított");
scene.play ();
});

Ez az egyik kódja példák a honlapon. Ez egy egyszerű, kis animált keresőmező. Itt van a CodePen bemutatója:

Ez megint nem lesz könnyű eszköz a gyors megtanulásra, de ha érdekel egy új animációs könyvtár kipróbálása, amely úgy tűnik, hogy egy elég egyszerű API, ez jó lehetőség lehet.

Commento

Kezelőeszközök: Megjegyzés

A jelenlegi adatvédelmi szempontból tudatos online környezet több ilyen eszközt is használhat. Egy ideje mérlegeltem a WordPress webhelyem javított kommentáló rendszereinek lehetőségeit, és a Commento jól néz ki.

Szeretem valami hasonló, mint a Disqus funkcionalitását (pozitív / lefelé irányuló szavazatok, legfontosabb megjegyzések stb.), De megvan túl sok felfúvódás.

Azt is szeretem, hogy a WordPress megjegyzései alapértelmezés szerint saját házigazdák, de hiányzik a Disqus ezen extra szolgáltatásai. Úgy gondolom, hogy a Commento a helyes irányba tett lépés ezen problémák megoldása érdekében.

Ha megfontolja a meglévő kommentáló platformról a Commento-ra való váltást, az az elég sok munka amiről olvastam, tehát ez nagy hátrány.

Ugyanakkor, bár a Commento lehetővé teszi a Disqusból történő importálást, a "szavazat" a Disqus régi megjegyzéseiről vagy a hozzászólásokat küldő felhasználók avatárjairól.

A régi WordPress megjegyzéseket a Commentóba nem is importálhatjuk, kivéve, ha először exportálunk a Disqusba, majd importálunk a Disqusból a Commentóba (ezt meg lehet tenni egy Disqus importáló eszköz használatával, amikor regisztrálsz a Commentóra)..

Az utolsó hátrány az a tény, hogy a Commento nem ingyenes, hacsak ön nem házigazda. De ha figyelembe vesszük a Disqus duzzadási és adatvédelmi kérdéseit, akkor érdemes a kis havi díj.

Git története

Kezelőeszközök: Git előzmények

Noha ez nemcsak a front-end eszközök kategóriájába tartozik, ez az egyik kedvencem ebben a listában, egyszerűségének és újszerűségének köszönhetően.

A Git előzményei lehetővé teszik a nyilvános Git repo-fájlok (GitHub, GitLab vagy Bitbucket) bármelyik előzményének megtekintését..

Tegyük fel például, hogy meg szeretné tekinteni a forrás fájl mert Normalize.css. A fájl a következő címen található:

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

Előzményeinek megtekintéséhez cserélje le a github.com URL-t a github.githistory.xyz címre:

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

Az új URL kimenete egy ügyes, interaktív módot tölt be a fájl idővel történő változásainak megtekintésére. Néhány remek animáció elindul minden alkalommal, amikor egy előzménypontot választ, lehetővé téve, hogy megnézze, mely változások történtek, és melyik felhasználó kötelezte el őket.

A CSS szolgáltatás átvált

Kezelőeszközök: CSS Feature váltás

Ha továbbra is olyan környezetben dolgozik, ahol meg kell próbálnia néhány régebbi böngészőt, ez valószínűleg egy jó kis Chrome-bővítmény, amelyet hozzáadhat a tesztelési eszközkészlethez..

A CSS Feature Toggles, hasonlóan a fent említett ARC Toolkit-hez, új lapot ad a böngésző fejlesztőeszközeinek..

A lapon láthatja a modern CSS-szolgáltatások listáját.

A váltáshoz elérhető CSS szolgáltatások

Ezekkel válthat, hogy azonnal láthassa, hogyan néz ki az oldala, amikor a felhasználó egy olyan böngészőben látogatja meg az oldalt, amely nem támogatja az adott funkciót. Ez nagyszerű módja annak, hogy gyorsan áttekintést kapjon arról, hogy az elrendezések miként romlanak az idősebb környezetben.

A különféle szolgáltatások kiválasztásakor az oldal automatikusan frissül a változások megjelenítéséhez. Például egy, a Flexbox-lal épített webhelynek hasznát fogja venni egy régebbi CSS, hogy az elrendezés ésszerű maradjon, miközben fokozatosan javítja az újabb böngészőket.

App létrehozása

Kezelőeszközök: Hozzon létre alkalmazást

Kétségtelen, hogy a front-end eszközök munkafolyamata rengeteg lehetőséget kínál az építkezéshez. Ez a weboldal egy tanulási oldal és egy projektgenerációs eszköz kombinációja a fejlesztők számára, akik a népszerű eszközcsomagolókat, webpaket vagy Parcel használják (vagy szeretnék megtanulni használni)..

Válassza ki a bal oldalon lévő kategóriákat az építéshez szükséges beállítások kiválasztásához, majd nézze meg a szükséges fájlokat és a konfigurációs beállításokat a főablakban..

Hozzon létre alkalmazáskonfigurációs beállításokat

Az oldal teljes mértékben interaktív, így a virtuális fájlok bármelyikére kattintva megtekinthetik azok tartalmát, vagy az egérmutatót egy kiválasztott opció fölé helyezve megjelenítheti a leírást és az összeállítás kiemelt részeit, amelyek relevánsak.

Nagyon hasznos mind tanuláshoz, mind új projektek létrehozásához!

CSSJanus

Kezelőeszközök: CSS Janus

A nemzetközivé válás területén ez egy online eszköz, amely lehetővé teszi a stíluslapok balról jobbra jobbról balra konvertálását és fordítva.

Ez lehetővé teszi a stíluslapok létrehozását a jobbról balra (rtl) nyelvekhez, például arab és héber.

Íme egy CSS példa:

.példa {
balra lebeg;
szöveg igazítás: balra;
párnázat: 1x 2x 3x 4x;
margó-bal: 1em;
háttér-helyzet: 5% 100 képpont;
kurzor: nincs átméretezés;
határ sugár: 1 képpont 2 képpont;
}

A fentiek átalakulnak a következőkké:

.példa {
úszó: jobb;
szöveg igazítás: jobbra;
párnázat: 1x 4x 3x 2x;
jobb margó: 1em;
háttér-helyzet: 95% 100×1;
kurzor: nw-átméretezés;
határ-sugár: 2px 1px;
}

Vegye figyelembe, hogy a különbségek nemcsak a sorokat tartalmazzák, mint például úszó: bal és szöveges igazítás: bal, hanem mások is, mint a vízszintes párnázási nyilatkozatok és a háttér-pozíció értékek.

És ha azt akarja, hogy az eszköz figyelmen kívül hagyja a stílusblokkot vagy egyetlen deklarációt, akkor használja a @noflip irányelvet:

/ * @noflip * / .ignored {
balra lebeg;
}

.nem figyelmen kívül hagyva {
balra lebeg;
/ * @noflip * / háttér: #fff (poster-ltr.png);
}

Színes tolvaj

Kezelőeszközök: Színes tolvaj

A Color Thief valóban ügyes és meglehetősen egyszerűen használható, de nagyon specifikus a felhasználási esetekben.

Alapvetően ennek a segédprogramnak a segítségével a JavaScriptet felhasználhatja, hogy egy adott kép alapján 2-20 szín színpaletta megragadjon..

Ez nem valami, amelyet minden webhelyen vagy alkalmazásban használ, de ez egy jó ötlet, és látszólag egy ideje fennállt, és az elmúlt évben frissítették.

Az egyszerű API használatával egyetlen sorral megragadhat egy palettát a képről:

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

Innentől csak a visszatérő tömb manipulálása. Az alábbiakban láthatod a CodePenbe beépített bemutatóját, amely megragad egy felhasználó által megadott számú színt az ábrázolt képről. A tömbben használt kód:

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

Elemeket és inline stílusokat építve alakítom a palettát. A színek RGB-értékekként kerülnek visszaadásra.

A CodePen bemutatóban megoldást használom annak érdekében, hogy megkerülje a kereszt-eredetű problémákat, amelyekbe a CodePen-en kerültem, de általában nem lesz szüksége ezekre a sorokra (kommentálva) egy szokásos környezetben..

RegexGuide

Kezelőeszközök: RegexGuide

Úgy tűnik, hogy minden évben találok egy remek interaktív alkalmazást, amelyet hozzáadunk a front-end eszközök gyűjteményéhez, amely elősegíti a reguláris kifejezések felépítését, tehát itt van ez az év bejegyzés. És ha olyan vagy, mint én, minden segítséget megtesz, amire szüksége lehet ezek felépítéséhez.

Ez egy kicsit furcsa, ha kezdetben körbeviszi a fejét, mert egyenként halad keresztül, mint egy varázsló.

Ha kész vagy, és minden feltétele van a helyén, akkor megpróbálhat különböző értékeket, hogy megfeleljen a meghatározott feltételeknek, és az oldal interaktív módon jelzi, hogy mi működik.

Az ilyen eszközök mindig a kedvenceim közé tartoznak, mivel nemcsak arra szolgálnak, hogy olyan kódot hozzanak létre, amely egyébként unalmas lenne, hanem segítenek a szintaxis megtanulásában is..

Kezelőeszközök: tiszteletreméltó említések

Tehát ezek véleményem szerint néhány érdekesebb front-end eszköz, amelyről azt találtam, hogy szerintem az elmúlt évben nem kapott elegendő figyelmet. Biztos vagyok benne, hogy vannak saját ilyen leleteid, ezért nyugodtan dobja be őket az alábbi megjegyzésekbe. Közben itt van egy végső lista azokról a dolgokról, amelyek nem egészen a fő listákká váltak, de azt gondoltam, hogy érdemes megemlíteni:

  • wehatecaptchas – Egy captcha alternatíva kép vagy betű / szám megfejtésének nélkül, még a jelölőnégyzethez sem "erősítsd meg, hogy nem vagyok robot"
  • simpleParallax – Egyszerű módja a parallaxis hatásoknak a JavaScript használatával.
  • Lite YouTube Embed – Úgy tűnik, 224X-rel gyorsabb, mint a hagyományos beágyazási kód.
  • Böngésző alapértelmezett stílusai – Írjon be minden HTML elemet, és ez az eszköz megmondja az egyes böngészőknek az elem alapértelmezett CSS-jét.
  • Ki tudja használni – Írja be a kétszínű kombinációt, és ez az eszköz megmondja, hogy a látássérült felhasználók milyen típusú szöveges / háttérképeket használhatják.

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés és előadás: K Karol.

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