50 neuveriteľných nástrojov na vývoj webu, ktoré potrebujete vedieť

Nástroje na vývoj webu
(Obrázok: © Future)
SKOČ DO:

Vitajte v našom sprievodcovi po doteraz potrebných nástrojoch na vývoj webových aplikácií. Ak pravidelne píšete front-endový kód pre webové aplikácie, pravdepodobne máte svoju úvodnú sadu nástrojov. Základný štít, ktorý slúži ako kostra, knižnica používateľského rozhrania, ktorá vám pomáha robiť veci dynamickými a interaktívnymi, proces zostavovania, ktorý môže obsahovať jeden alebo viac nástrojov na vyskladanie súborov a adresárov, ktoré budete potrebovať.

Môžete mať dokonca aj sadu nástrojov CSS a JavaScript, ktoré môžete neustále vracať. Alebo možno je vaším náradím niekoľko prázdnych súborov, editor kódu a nič viac (čo je úplne v poriadku, najmä ak ste na scéne nováčikom).

Nech už vaša sada nástrojov vyzerá akokoľvek, vždy je užitočné pozrieť sa na to, čo je vonku a čo je nové v oblasti front-end nástrojov. Za týmto účelom predstavíme 50 najzaujímavejších a najpraktickejších nástrojov na vývoj webu, o ktorých by ste mali vedieť. Väčšina z nich je pomerne nových, niektoré boli vydané v minulom roku, zatiaľ čo niektoré z nich sú tu o niečo dlhšie a ťažisko sa začali presadzovať až za posledných 12 mesiacov.



V každom prípade určite nájdete v tomto zozname niečo, čo môžete čoskoro použiť v projekte. Zoznam sme usporiadali do sekcií, aby sme vám uľahčili navigáciu. Pomocou odkazov môžete prejsť priamo na sekciu, ktorá vás zaujíma, alebo len prechádzať celým zoznamom. Aj keď, ak začínate od nuly, najskôr budete potrebovať tento súhrn tvorcovia webových stránok .

Chcete ešte viac? Tu je ďalší zoznam úžasných nástroje na návrh webu , všetko, čo potrebujete vedieť webové komponenty a nezabudnite sa pozrieť na náš zoznam užívateľské testovanie aj softvérové ​​nástroje.

Pomocné programy JavaScript

01. autoComplete.js

Nástroje pre vývojárov na webe: autocomplete.js

(Obrázok: © Tarek Raafat)

Malá knižnica na pridanie funkcie automatického dokončovania do poľa formulára. Ponúka voľné a prísne režimy vyhľadávania, prispôsobiteľný minimálny počet znakov pred ponúknutím návrhov, voliteľné funkcie spätného volania a ďalšie.

02. indigo-player

Nástroje pre vývojárov na webe: Indigo Player

(Obrázok: © Matvp91)

Modulárny, ľahko prispôsobiteľný videoprehrávač JavaScript s podporou reklamy pripravený na použitie, takže môžete pre vložené videá povoliť sponzorov pred videom, v strede videa alebo po ňom.

03. Jednoduchá klávesnica

Nástroje pre vývojárov na webe: Jednoduchá klávesnica

(Obrázok: © Fransisco Hodge)

Elegantný a pohotový komponent virtuálnej klávesnice, ktorý ponúka ukážky pripravených na použitie ako pre mobilné, tak aj pre desktopové klávesnice. Demonštrované klávesnice sú nádherné, ale môžete si ich tiež ľahko upraviť tak, aby vyhovovali vašej značke.

04. fslightbox.js

Vanilkový doplnok lightbox JavaScript, ktorý dokáže zobrazovať obrázky, videá HTML5 a YouTube vložené do atraktívneho a použiteľného prekrytia. Ponúka verzie React a Vue a možnosť upgradovať z bezplatnej verzie, ak sa chcete dostať k ďalším funkciám.

05. Rallax.js

Parallax by sa nemal používať príliš často, ale dobrá voľba je jednoduché riešenie bez závislosti, ako je toto. Má dobrý výkon a ľahko použiteľné API na spustenie efektov, zastavenie, zrýchlenie a schopnosť reťazenia .kedy() metódy radenia akcií.

06. FrenchKiss.js

Superrýchla internacionalizačná knižnica s rozsiahlym API. Jedným z príkladov prispôsobenia, ktoré ponúka, je schopnosť pracovať s jazykom, ktorý má viac pravidiel pluralizácie.

07. Pohyblivé

Nástroje pre vývojárov na webe: pohyblivé

aký typ tlačiarne produkuje najkvalitnejší text
(Obrázkový kredit: Denná kefa)

Urobte ľubovoľný prvok na stránke ťahateľným, upraviteľným, zmenšiteľným, otočným alebo dokonca zvlniteľným (ako napríklad nástroj perspektívy v grafickom editore). Môžete tiež povoliť funkčnosť zoskupovania a pripájania.

08. Klávesová skratka

Spustí akciu na zadanom prvku pomocou klávesovej skratky, kombinácie klávesov alebo postupnosti klávesov stlačených používateľom. Dokumentácia obsahuje návrhy na zabezpečenie dobrej dostupnosti.

09. Freezeframe.js

Pridajte na stránku funkciu prehrávania / pozastavenia do animovaných súborov GIF. Spustenie / pozastavenie spustíte podržaním kurzora myši, kliknutím, dotykom na udalosť alebo externým prvkom, ktorý slúži ako tlačidlo prehrávania / pozastavenia.

10. pagemap

Nástroje pre vývojárov na webe: Mapa stránok

(Obrázkový kredit: lrsjng / pagemap)

Pridajte na dlhé webové stránky rolovateľnú „mini mapu“, podobnú tomu, ktorú nájdete v editore kódu Sublime Text. Je sporné, či je to použiteľnejšie ako posúvač, ale pre natívny vzhľad by ste to mohli implementovať, keď je posúvač zakázaný.

11. lax.js

Doplnok Vanilla JavaScript na pridanie responzívneho a vhodného pre mobilné zariadenia. Pridajte na stránku funkciu prehrávania / pozastavenia do animovaných súborov GIF. Počas rolovania používateľom sa spúšťajú animácie, prechody a efekty paralaxy na stránky. Začnite s predvoľbami alebo si vytvorte vlastné efekty.

Nástroje CSS a HTML

12. Projekt Wallace

Nástroje pre vývoj webových aplikácií: Project Wallace

(Obrázok: © Wallace)

Toto je nástroj na analýzu CSS s informačným panelom, ktorý vám umožní sledovať zložitosť vášho kódu vrátane počtu riadkov kódu, množstva selektorov, množstva deklarácií, špecifickosti, použitia! Important, úzkych miest výkonu a ďalších. Tvorba zložitých webových stránok? Budete potrebovať robustný web hosting služba.

13. DebuCSSer

Nenápadný nástroj na ladenie CSS, ktorý funguje ako možnosť na manuálne pridanie obrysu k jednému alebo viacerým prvkom. Zahrňte skript a potom podržte kláves CTRL, aby ste ohraničili prvok, alebo CTRL-SHIFT, aby ste ohraničili všetky.

14. Animované hamburgery CSS

Nástroje pre vývojárov na webe: Animované hamburgery CSS

(Obrázkový kredit: 8. marca)

Malá knižnica animovaných mobilných hamburgerových menu, ktorá by mala uspokojiť vaše potreby, ak požadujete v každom projekte mierne odlišný štýl ponuky.

15. DropCSS

Rýchly modul JavaScriptu, ktorý porovnáva kód HTML stránky s CSS, potom ich vráti s odstráneným nepoužívaným kódom, čím šetrí cenné byty za čas načítania stránky. Viac informácií o nepoužívaných CSS nájdete v sprievodnom boxe.

16. CSSFX

Nástroje pre vývoj webových aplikácií: CSSFX

(Obrázkový kredit: CSSFX)

Ešte ďalšia užitočná a jedinečná sada animácií a efektov CSS typu plug-and-play. Tento obsahuje širokú škálu efektov - niektoré vyžadujú viac ako jeden prvok HTML, ale je ľahké ich pridať do projektu.

17. Generátor mriežky CSS

Pre každého, kto sa prvý raz dostane do štandardu CSS Grid, bude mať vizuálny pomocník obrovskú podporu. Tento generátor je skvelý spôsob, ako sa naučiť funkcie a vytvárať praktický mriežkový kód pre všetky vaše rozloženia.

18. Darkmode.js

Zdá sa, že v poslednej dobe vládne temný režim. Tento projekt vám umožňuje pridať prepínanie tmavého režimu na stránky pomocou vlastnosti mixu a miešania režimu CSS na zvládnutie tmavých / svetlých režimov.

Testovacie a dátové nástroje

19. Sada nástrojov ARC

Nástroje pre vývoj webových aplikácií: ARC

(Obrázok: © Paciello Group)

Rozšírenie Chrome od spoločnosti Paciello Group, ktoré sa integruje do nástroja DevTools a poskytuje rozsiahle testovanie prístupnosti ako súčasť vášho vývojového a testovacieho pracovného toku.

20. Dashboard Clarity

Platforma na testovanie používateľov od spoločnosti Microsoft. Pridajte na svoju stránku skript a potom prehrajte relácie používateľov, aby ste videli, ako používatelia interagujú s vašou stránkou alebo aplikáciou.

21. GraphQL Editor

Toto je užitočný online editor, ktorý vám umožní urýchliť vytváranie schém GraphQL. GraphQL je populárna nová technológia, ktorá slúži ako efektívnejšia alternatíva k použitiu REST.

22. jsonbox.io

Bezplatné úložisko JSON, ktoré 22 ponúka používateľom možnosť ukladať, čítať a upravovať údaje JSON cez HTTP API pomocou rôznych príkazov, ako sú GET, POST, PUT a DELETE.

23. Štatistiky prístupnosti

Rozšírenie pre Chrome, doplnok 23 Edge alebo natívna aplikácia pre Windows na spustenie testovania prístupnosti. Môžete urobiť rýchly test na najčastejšie problémy alebo zobraziť vizuálne prekrytia na stránke, aby ste preskúmali farebný kontrast, orientačné body ARIA a ďalšie.

24. Zmerajte

Nástroje pre vývojárov na webe: Merajte

(Obrázkový kredit: Opatrenie)

Toto je súčasťou nového centra pre vývojárov spoločnosti Google, ktoré poskytuje komplexný online nástroj na testovanie obsahu z hľadiska zásadných obáv, ako je výkon, dostupnosť, najlepšie postupy a SEO.

25. Graf.xkcd

Nástroje pre vývojárov na webe: Chart.xkcd

(Obrázkový kredit: Chart.xkcd)

Svojrázna knižnica grafov v jazyku JavaScript, ktorá generuje grafy útržkovite alebo ručne kresleným spôsobom v štýle populárneho webového komiksu xkcd. Môže to byť skvelá voľba ako súčasť neformálneho dizajnu aplikácie.

26. useAnimations

Zbierka jednoduchých prispôsobiteľných animovaných ikon, ktoré môžete zapojiť do projektov na mobilných alebo webových stránkach a ktorá ponúka verziu React a možnosť upravovať vopred pripravené animácie v programoch Lottie alebo Adobe After Effects.

27. Strikefree Music

Rastúca knižnica zvukových klipov, ktoré môžete používať napríklad vo videách a podcastoch, bez obáv z penalizácie za porušenie autorských práv. Môžete voliteľne vytvoriť svoje vlastné rytmy alebo náhodne vybrať ten, ktorý už bol vytvorený.

28. ZapChart

Elegantný online nástroj na vytváranie zdieľateľných údajov vo formáte grafov. Stačí pripojiť čísla pre osi x a y a táto aplikácia vygeneruje stĺpcový graf, ktorý je možné stiahnuť ako PNG alebo zdieľať pomocou adresy URL.

29. Optimole

Nástroje pre vývoj webových aplikácií: Optimole

(Obrázkový kredit: VertStudio)

Služba optimalizácie obrazu a CDN pre WordPress. Zahŕňa funkcie na poskytovanie obrázkov vhodných pre zariadenie so stratovou alebo bezstratovou kompresiou, voliteľným lenivým načítaním a mnohými ďalšími.

grafickí dizajnéri, aby sledovali instagram

30. Mixkit

Zbierka videí a ilustrácií v rozlíšení HD, ktoré je možné filtrovať podľa kategórií a použiť ich kdekoľvek v komerčných a nekomerčných projektoch bez uvedenia zdroja.

Knižnice a rámce

31. Varný štítok pre statické stránky

Nástroje webového vývojára: Statický stavový štítok

(Obrázok: © Eric Alli)

Neobjektívna a na funkcie bohatá sada nástrojov na vytváranie statických stránok. Ponúka automatizované zostavenia, miestny server pre vývojárov, optimalizácie na úrovni výroby (napríklad minifikácia kódu a spracovanie obrazu) a podporu mnohých moderných front-end technológií (Sass, ES6 atď.).

32. Web Base

Nástroje pre vývoj webových aplikácií: Base Web

(Obrázok: © Base Web)

Rámec používateľského rozhrania založený na reakcii s rozsiahlou sadou komponentov, ktoré sa pohybujú od komplexných funkcií, ako sú komponenty platobných kariet (tj. Vstupná maska ​​pre rôzne typy kreditných kariet), až po funkcie nižšej úrovne, ako napríklad FlexGrid a Layer, ktoré vám umožňujú vytvárať vaše rozloženia.

33. Zhmotniť sa

Nástroje webového vývojára: Zhmotniť sa

(Obrázkový kredit: Zhmotniť)

Pohotový front-end framework s množstvom CSS a JavaScript komponentov. Zahŕňa komponenty pre funkcie formulára, rozloženia, špecifické pre mobilné zariadenia a ďalšie - všetko založené na materiálovom dizajne spoločnosti Google.

34. Scene.js

Nástroje pre vývoj webových aplikácií: Scene.js

(Obrázok: © daybrush)

Rozsiahle API na ovládanie vecí, ako je načasovanie animácie, prechody a efekty. Chcete mať niekde uložené aktíva? Vyskúšajte tieto cloud-ové úložisko možnosti.

35. Kvasar

Nástroje pre vývojárov na webe: Quasar

(Obrázok: © Quasar)

Knižnica používateľského rozhrania založená na Vue s komponentmi, ktoré vám pomôžu vytvárať jednostránkové aplikácie, progresívne webové aplikácie, hybridné mobilné aplikácie a desktopové aplikácie bez zbytočného nafukovania.

36. Reaguj na jednoduchom obr

Nástroje pre vývojárov na webe: Reagujte na jednoduché IMG

(Obrazový kredit: Bill Luo)

Lenivé načítanie obrázkového riešenia pre projekty React, ktoré využíva rozhranie IntersectionObserver API a nový štandard Priority Hints pre elegantné riešenie načítania obrázkov.

37. Reagujte animáciou

Nástroje pre vývojárov na webe: React Animation

(Obrázkový kredit: Nearform)

Ľahko použiteľná knižnica animácií pre React, ktorá vám umožní ľahko pridať jedinečné vopred pripravené animované efekty k prvkom stránky na základe zmien obsahu a načítania alebo vám umožní vytvoriť si vlastné.

38. React Redux Loading Bar

Progresívny animovaný panel indikátora načítania pre projekty React so schopnosťou pridať viac pruhov načítania na jednu stránku, ktoré označujú načítanie rôznych položiek nezávisle na sebe.

39. zväčšovacie okuliare reagujúce na obraz

Nástroje pre vývoj webových aplikácií: RIFM

(Obrázok: © GitHub)

Sada responzívnych komponentov React na zväčšenie a zväčšenie obrázkov vo vysokom rozlíšení na mobilných alebo stolných počítačoch, podobne ako funkcia zväčšenia dostupná na webových stránkach s nakupovaním, ako je Amazon, ktorá umožňuje ťahať a zároveň približovať a skúmať konkrétne časti obrázka.

40. RIFM

Reagujte na komponent, ktorý prevedie akýkoľvek vstup z formulára HTML na formátovaný vstup. Napríklad, ak používateľ napíše niečo malými písmenami, môžete vynútiť písanie malých a veľkých písmen (alebo takmer ľubovoľného preferovaného formátu).

Pracovný postup a ďalšie

41. Diaľkový vývoj

Rozširujúci balíček pre Visual Studio Code, ktorý vám umožňuje vzdialene používať celú sadu funkcií VSCode pomocou SSHing do ľubovoľného priečinka v kontajneri, vzdialenom počítači alebo Windows Subsystem for Linux (skrátene WSL).

42. Báječné

Takto môžete upraviť vlastnosti CSS na bočnom paneli vo VSCode. Bude zobrazovať CSS z rôznych zdrojov vrátane knižníc CSS-in-JS, súborov .scss, blokov v HTML a štýlov viazaných na komponenty knižnice (Angular, Svelte, Vue).

43. packtracker.io

Nástroj, ktorý sleduje a analyzuje váš balík webpacku pri každom potvrdení. Pomáha predchádzať nadmerným prostriedkom, nadmernému používaniu balíkov NPM a nadbytočnému obsahu, aby sa zaistil lepší celkový výkon aplikácií.

44. flutter

Nástroje pre vývoj webových aplikácií: flutter

(Obrázok: © Flutter)

Sada nástrojov na vývoj používateľského rozhrania spoločnosti Google na vytváranie natívne kompilovaných aplikácií pre web, počítač a mobil. Produkuje aplikáciu pre všetky platformy z jedinej kódovej základne a ponúka flexibilne používateľské rozhranie na zavedenie.

45. Packem

Nástroje pre vývojárov na webe: Packem

(Obrázok: © Packem)

Zväzok modulov JavaScriptu, ktorý je údajne dvakrát rýchlejší ako jeho hlavný konkurent Parcel. V čase písania tohto článku ešte stále v alfa verzii, ale sľubný nástroj, ktorý by mohol byť vašim balíkom programov v nasledujúcich mesiacoch.

46. ​​Pika

Multifunkčná sada nástrojov, ktorá obsahuje štatistiky NPM, vyhľadávanie balíkov, CDN a Pika Web. Druhá možnosť vám umožňuje pridať závislosti do projektu priamo v prehliadači bez webpacku, Browserify atď.

47. Komentár

Nástroje pre vývojárov na webe: Komentár

(Obrázkový kredit: Komentár)

Ľahký komentárový systém zameraný na ochranu súkromia bez reklám, ktorý môžete vložiť na svoje webové stránky, použiteľný prostredníctvom ich cloudovej služby alebo hosťovaný sám. Zahŕňa detekciu spamu Akismet, lepkavé komentáre, hlasovanie, podporu Markdown a ďalšie.

48. Len

Nástroje pre vývojárov na webe: Iba

(Obrázkový kredit: Iba)

Knižnica úloh na zostavenie pomocou ľahko použiteľného rozhrania API na zostavenie zreťazených, paralelných alebo vnorených úloh počas procesu zostavovania.

49. História Gitu

Ľahko prechádzajte históriu všetkých súborov na GitHub, GitLab alebo Bitbucket. Stačí zvoliť URL súboru, potom nahradiť github.com za github.githistory.xyz a zobrazí sa animovaná vizuálna história súboru.

50. Vznešené zlúčenie

Nástroje pre vývojárov webu: Sublime Merge

(Obrázkový kredit: Vznešený)

Rýchly klient Git vhodný pre vyhľadávanie (Mac, Windows, Linux) od tvorcov programu Sublime Text. Ponúka zvýraznenie syntaxe, integrovaný nástroj na zlučovanie, rozdiely vedľa seba a ďalšie.

13,3 palcové pevné puzdro macbook pro

Tento obsah sa pôvodne objavil v časopise net.

Čítaj viac: