15+ front-end nástrojů, o kterých byste měli vědět: Moje oblíbené nálezy pro rok 2020

Uplynul další rok a pokud jste jako mnoho vývojářů v oboru, pravděpodobně jste objevili celou řadu nových front-end nástrojů, které jste zvažovali začlenit do svého pracovního postupu. Jsem na stejné lodi, zejména proto, že jsem hluboce zapojen do pravidelného výzkumu toho, co je nového nástroje krajiny.


V tomto příspěvku, Budu zaokrouhlit nahoru (s některými screenshoty a ukázkami) na některé z nejzajímavějších front-end nástrojů, které jsem zjistil, že si myslím, že pro vás budou užitečné v roce 2020. Nejedná se vždy o nejoblíbenější nástroje nebo o ty nejžhavější nástroje, ale myslím si, že každý z nich je ve svém použití jedinečný a zaslouží si trochu více pozornosti. To jsou v podstatě moje oblíbené nálezy roku v nástrojích front-end.

Nejlepší front-end nástroje

Hotkey

Front-End Tools: Hotkey

Zjišťování úhozů pomocí JavaScriptu není příliš složitý úkol, ale tento malý nástroj od týmu v GitHubu je velmi jednoduchý.

S ním můžete spustit akci na prvku pomocí klávesové zkratky.

Mezi typy klávesových zkratek patří klávesa, kombinace kláves nebo dokonce sekvence kláves. Můžete také mít více zkratek pro jednu akci.

JavaScript je pouze jedno prohlášení spolu s importem:

importovat {install} z ‘./hotkey.js’;

for (const el of document.querySelectorAll (‘[data-hotkey]’))) {
nainstalovat (el)
}

Jakmile je tento kód na místě, hlavní práce se provádí v HTML. Zde je seznam odkazů, které jsem vytvořil pro zobrazení určitého obsahu v závislosti na použité zkratce:

  • Příklad
  • Příklad
  • Příklad
  • Příklad
  • Příklad

Všimněte si atributů datových klávesových zkratek přidaných do každého z odkazů. To umožňují aktivaci klávesových zkratek pro cílené akce (v tomto případě spouštěním selektoru: CSS). Více klávesových zkratek je odděleno čárkou; kombinace kláves jsou odděleny znaménkem plus; a klíčové sekvence jsou odděleny mezerou.

Zde je live demo:

Vyzkoušejte všechny zkratky a všimněte si, že kód v panelu JavaScript je minimální. Po importu modulu je nastavení velmi jednoduché. A jako vedlejší bod zde, pokud máte aplikaci s více klávesovými zkratkami, které chcete zobrazit v modálním okně (jako je tomu u Twitteru, GitHubu atd.), Můžete se podívat na QuestionMark.js, a můj starý projekt.

Samozřejmě, s klávesovými zkratkami si budete chtít vzít v úvahu problémy s přístupem, takže si nezapomeňte prohlédnout README repo informace o tom,.

Freezeframe.js

Front-End Tools: Freezeframe.js

Vkládání krátkých videí na webové stránky je běžné, když se zobrazuje probíhající akce. Někdy je vhodný i animovaný GIF. GIF však bývají rušivé, protože automaticky přehrávají svůj obsah.

Tento malý obslužný program umožňuje přidat do animovaných GIF vložených do vašeho HTML funkčnost podobnou videu.

Jakmile na svou stránku uvedete zdroj Freezeframe.js, budete potřebovat pouze jedno prohlášení jazyka JavaScript:

nový Freezeframe (‘. frozeneframe’, {
trigger: ‘hover’,
overlay: false
});

Pokud vynecháte druhý argument (např. Nový Freezeframe (‘. Frozeneframe’)), bude výchozí nastavení bez tlačítka přehrávání a animace se spustí na vznášení. Jedinou vadou v tom je, že je to animovaný GIF, který technicky nemůžete "pauza" to můžete jen "stop" to (což znamená, že začíná znovu od začátku). Ale obvykle u GIF to není moc.

Zde je ukázka se třemi různými příklady:

Používání tohoto nástroje však nemusí vést k úsporám výkonu, protože se zdá, že se plné zátěže GIF za scénami. Ale předpokládám, že by to mohlo být použito spolu s knihovnou líného načítání, pokud je GIF při načítání stránky mimo obrazovku.

ARC Toolkit

Front-end Tools: ARC Toolkit

Vaše nástroje front-end by měly obsahovat spoustu možností přístupu.

Jedná se o rozšíření Chrome, které přidává kartu do vývojářských nástrojů, která vám pomůže najít chyby v přístupu a varování související s pokyny WCAG 2.1 úrovně A a AA.

Dva důvody, proč je tento nástroj tak skvělý:

  • Integruje se do vašeho stávajícího testovacího / ladicího pracovního postupu uvnitř vývojářských nástrojů
  • Je vytvořen skupinou The Paciello Group, která je v komunitě vývojářů dobře známa díky jejich přehledům o dostupnosti

Funkce sady nástrojů ARC

Po instalaci rozšíření stačí vybrat kartu ve vývojářských nástrojích a vybrat "Spusťte testy". Počáteční výstup bude podobný tomu, který vidíte na předchozím snímku obrazovky. Odtud můžete procházet dolů a zobrazit případné problémy s přístupem související s konkrétní funkcí, jak ukazuje následující obrázek:

ARC Toolkit Features Drill-down

Všimněte si "Odkazy" možnost vlevo má zaškrtnutí vedle ní. To jsem se v tomto případě rozhodl prozkoumat. To také přidá překryv na stránku ukazující, kde jsou všechny vybrané objekty, jak můžete vidět nad vývojářskými nástroji na aktivní stránce.

Scene.js

Front-End Tools: Scene.js

Každý rok se zdá, že existuje nová animační knihovna nejrůznějších druhů v oblasti nástrojů front-end.

Můj výběr pro letošní rok je Scene.js.

Tohle není ten, s čím by ses mohl jen tak zvednout a pracovat s ním během několika minut, jako ti ostatní.

K dispozici je křivka učení, která si na rozhraní API zvykne, která vypadá takto:

let scene = new Scene ({
".vyhledávací pole": {
"0%" : "šířka: 50px",
"70%": "šířka: 300px",
},
".řádek": {
"30%" : "šířka: 0%",
"100%": "šířka: 100%",
}
}, {
doba trvání: 1,
uvolnění: Scéna.EASE_IN_OUT,
selektor: true,
}) exportCSS ();

scene.setTime (0);
nechat toggle = false;

document.querySelector (".Předložit") .addEventListener ("klikněte", function () {
toggle =! toggle;
scene.setDirection (přepnout ? "normální" : "zvrátit");
scene.play ();
});

To je kód pro jeden z příklady na domovské stránce. Je to jednoduché malé animované vyhledávací pole. Zde je jejich ukázka CodePen:

Znovu to nebude snadný nástroj, který se rychle naučíte, ale pokud máte zájem vyzkoušet novou knihovnu animací s tím, co se zdá být docela přímočarým API, může to být dobrá volba.

Commento

Nástroje front-end: Commento

Současné online prostředí, které si uvědomuje soukromí, by mohlo použít více nástrojů, jako je tento. Už chvilku zvažuji možnosti pro vylepšené systémy komentování na svém webu WordPress a Commento vypadá solidně.

Líbí se mi funkce něčeho, jako je Disqus (upvotes / downvotes, top comments atd.), Ale má příliš nadýmané.

Také se mi líbí, že komentáře ve WordPressu jsou ve výchozím nastavení hostované, ale postrádají tyto další funkce Disqus. Myslím, že Commento je krok správným směrem k vyřešení těchto problémů.

Pokud uvažujete o přechodu z existující platformy pro komentování na Commento, je to tak dost práce z toho, co jsem četl, je to velká nevýhoda.

Ačkoli vám komentář umožňuje importovat z Disqus, nebudete moci importovat "hlasy" na staré komentáře od Disqus nebo avatary od uživatelů, kteří zveřejnili komentáře.

Neexistuje také způsob, jak importovat staré komentáře WordPress do Commento, pokud nejprve exportujete do Disqus, pak importujete z Disqus do Commento (což lze provést pomocí nástroje importu Disqus, když se zaregistrujete pro Commento).

Poslední nevýhodou je skutečnost, že Commento není zdarma, pokud jej sami nepřijmete. Když však vezmete v úvahu problémy spojené s nadýmáním a ochranou soukromí Disqus, vyplatí se malý měsíční poplatek.

Git History

Front-end Tools: Git History

Ačkoli to není pouze v kategorii front-end nástrojů, je to jedna z mých oblíbených na tomto seznamu, protože je jednoduchá a novinka ve způsobu, jakým funguje.

Historie Git umožňuje zobrazit historii libovolného souboru ve veřejném repozitáři Git (GitHub, GitLab nebo Bitbucket).

Řekněme například, že chcete zobrazit historii změn zdrojový soubor pro Normalize.css. Soubor je umístěn na:

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

Chcete-li zobrazit jeho historii, nahraďte github.com v adrese URL řetězcem github.githistory.xyz:

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

Výstup na nové adrese URL načte úhledný a interaktivní způsob, jak zobrazit změny souboru v průběhu času. Některé skvělé animace se spouštějí pokaždé, když vyberete bod historie, což vám umožní zjistit, které změny se odehrály a který uživatel je provedl.

Přepíná funkce CSS

Front-End Tools: CSS Feature Toggles

Pokud stále pracujete v prostředí, ve kterém musíte provést nějaké starší testování prohlížeče, může to být pěkné malé rozšíření prohlížeče Chrome, které se přidá do vaší sady nástrojů pro testování.

CSS Feature Toggles, podobně jako výše zmíněná sada nástrojů ARC, přidá novou kartu do vývojářských nástrojů prohlížeče..

Na kartě uvidíte seznam moderních funkcí CSS.

Funkce CSS dostupné pro přepínání

Můžete je přepnout, abyste okamžitě viděli, jak vaše stránka vypadá, když uživatel navštíví stránku v prohlížeči, který danou funkci nepodporuje. To je skvělý způsob, jak získat rychlý přehled o tom, jak se vaše rozložení ve starších prostředích zhoršuje.

Při výběru různých funkcí se stránka automaticky aktualizuje a zobrazí změny. Například web vytvořený pomocí Flexboxu bude mít prospěch z některých starších CSS, aby rozvržení zůstalo zdravé a zároveň se v novějších prohlížečích postupně zlepšovalo..

Vytvořit aplikaci

Front-End Tools: Create App

Váš pracovní postup nástrojů front-end bezpochyby obsahuje spoustu možností pro sestavení. Tento web je kombinací studijního webu a nástroje pro generování projektů pro vývojáře, kteří používají (nebo se chtějí naučit používat) webpack nebo Parcel, oblíbené balíčky aktiv.

V rozbalovacím seznamu vlevo vyberte možnosti, které chcete pro sestavení vytvořit, a v hlavním okně se zobrazte potřebné soubory a možnosti konfigurace..

Vytvořit možnosti konfigurace aplikace

Stránka je plně interaktivní, takže můžete kliknout na libovolný z virtuálních souborů a zobrazit jejich obsah, nebo můžete umístit kurzor myši na vybranou možnost a zobrazit popis spolu se zvýrazněnými částmi sestavení, které jsou pro tuto možnost relevantní..

Velmi užitečné jak pro učení, tak pro vytváření nových projektů!

CSSJanus

Front-End Tools: CSS Janus

V oblasti internacionalizace je to online nástroj, který vám umožňuje převádět stylové styly zleva doprava zprava doleva a naopak.

To vám umožní snadno vytvářet šablony stylů pro jazyky zprava doleva (rtl), jako jsou arabština a hebrejština.

Zde je příklad CSS:

.příklad {
plavat vlevo;
zarovnání textu: vlevo;
čalounění: 1px 2px 3px 4px;
levý okraj: 1em;
pozice na pozadí: 5% 100px;
kurzor: ne-resize;
poloměr ohraničení: 1px 2px;
}

Výše uvedené se převede na následující:

.příklad {
float: right;
zarovnání textu: vpravo;
čalounění: 1px 4px 3px 2px;
margin-right: 1em;
pozadí na pozadí: 95% 100px;
kurzor: nw-resize;
poloměr ohraničení: 2px 1px;
}

Všimněte si, že rozdíly zahrnují nejen řádky, jako je float: left a text-zarovnání: left, ale ostatní, jako jsou vodorovné výplně a hodnoty na pozadí..

A pokud chcete, aby nástroj ignoroval blok stylů nebo jediné prohlášení, můžete použít direktivu @noflip:

/ * @noflip * / .ignored {
plavat vlevo;
}

.neignorováno {
plavat vlevo;
/ * @noflip * / background: #fff (poster-ltr.png);
}

Color Thief

Front-End Tools: Color Thief

Color Thief je velmi elegantní a poměrně jednoduchý na používání, ale je velmi specifický v případech použití.

V zásadě pomocí tohoto nástroje můžete pomocí JavaScriptu uchopit paletu barev kdekoli od 2 do 20 barev na základě daného obrázku.

Toto není něco, co budete používat na všech webových stránkách nebo v aplikacích, ale je to pěkný nápad a zjevně už nějakou dobu existuje a byl aktualizován za poslední rok.

Pomocí jednoduchého API můžete uchopit paletu z obrázku jedním řádkem:

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

Odtud jde jen o manipulaci s maticí, která se vrátila. Níže vidíte ukázku, kterou jsem zabudoval v CodePen a která uchopí uživatelem zobrazený počet barev z zobrazeného obrázku. Kód, který používám v poli, je:

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

Paletu stavím pomocí prvků a inline stylů. Barvy jsou vráceny jako hodnoty RGB.

V demonstraci CodePen používám řešení k překonání problémů s křížovým původem, na které jsem narazil na CodePen, ale obvykle tyto řádky (komentované) nebudete potřebovat v obvyklém prostředí.

RegexGuide

Front-End Tools: RegexGuide

Vypadá to, že každý rok najdu skvělou interaktivní aplikaci, kterou mohu přidat do své kolekce front-end nástrojů, které pomáhají vytvářet regulární výrazy, takže zde je letošní příspěvek. A pokud jste jako já, využijete veškerou pomoc, kterou můžete získat při jejich budování.

Tohle je trochu divné, když si hlavu zpočátku obejdete, protože to prochází jednotlivými kroky jako čaroděj.

Až budete hotovi a budou splněny všechny podmínky, můžete vyzkoušet různé hodnoty, aby byly splněny stanovené podmínky, a na stránce bude interaktivně uvedeno, co funguje.

Tyto druhy nástrojů jsou vždy některé z mých oblíbených, protože fungují nejen jako způsob vytváření kódu, který by byl jinak zdlouhavý, ale také vám pomohou naučit se syntaxi.

Front-end nástroje: čestné zmínky

Takže jsou to podle mého názoru některé z nejzajímavějších front-end nástrojů, které jsem zjistil, že si myslím, že za poslední rok se jim nedostalo dostatečné pozornosti. Jsem si jistý, že máte své vlastní nálezy, takže je neváhejte zařadit do komentářů níže. Mezitím je zde konečný seznam věcí, které hlavní seznam zcela nezískaly, ale myslel jsem, že stojí za zmínku:

  • wehatecaptchas – Alternativa captcha bez dešifrování obrázků nebo písmen / čísel, ani zaškrtávací políčko "potvrdit, že nejsem robot"
  • simpleParallax – Snadný způsob, jak dělat paralaxy účinky s JavaScriptem.
  • Vložení Lite YouTube – Zjevně 224x rychlejší než tradiční kód pro vložení.
  • Výchozí styly prohlížeče – Zadejte libovolný prvek HTML a tento nástroj vám sdělí výchozí CSS prohlížeče pro daný prvek.
  • Kdo může použít – Zadejte dvoubarevnou kombinaci a tento nástroj vám řekne, které druhy zrakově postižených uživatelů mohou použít tuto kombinaci pro text / pozadí.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení a prezentace Karol K.

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