Mobiln├ę Spr├ívy, Gadgety, Blogy's Secenziami

10 n├ístrojov pre za─Ź├şnaj├║cich webov├Żch v├Żvoj├írov

Ak ste za─Źiato─Źn├şk v├Żvoj├ír a h─żad├íte softv├ęr, ktor├Ż v├ím umo┼żn├ş precvi─Źi┼ą si a upevni┼ą svoje zru─Źnosti, tu je 10 n├ístrojov, ktor├ę by ste mali vedie┼ą, ke─Ć za─Ź├şnate s v├Żvojom webu.

1. Visual Studio Code: na ├║pravu k├│du

Visual Studio Code je ─żahko nau─Źite─żn├Ż, bezplatn├Ż a otvoren├Ż editor zdrojov├ęho k├│du vyvinut├Ż spolo─Źnos┼ąou Microsoft. Podporuje nieko─żko stoviek programovac├şch jazykov a pon├║ka integrovan├ę v├Żvojov├ę prostredie s n├ístrojmi na spracovanie technick├Żch projektov, od ├║prav a┼ż po ladenie. Jeho hlavn├ę v├Żhody: integr├ícia s GitHub a funkcia inteligentn├ęho dop─║┼łania k├│du IntelliSense.

Presk├║majte k├│d Visual Studio

vizu├ílne-┼ít├║dio-k├│dov├ę-rozhranie

2. InVision: pre dizajn a prototypovanie

InVision je n├ístroj na n├ívrh rozhrania zameran├Ż na pr├ícu na prototypoch a vytv├íranie interakt├şvnych modelov sp├┤sobom spolupr├íce. V porovnan├ş s referen─Źn├Żmi n├ístrojmi ako Figma alebo Sketch je jeho hlavnou v├Żhodou intuit├şvne rozhranie, ktor├ę u─żah─Źuje vytv├íranie interakt├şvnych modelov. Tento softv├ęr v├ím umo┼ż┼łuje pracova┼ą prvok po prvku, od hlavi─Źky a┼ż po prechody cez tla─Źidl├í interakcie. ─Äal┼í├ş pozit├şvny bod: jeho bezplatn├Ż pl├ín a┼ż pre 10 pou┼ż├şvate─żov a 3 maxim├ílne projekty, zauj├şmav├ę pre za─Źiato─Źn├şkov.

Objavte InVision

invision-interface

3. CodePen: na n├íjdenie k├║skov k├│du, ktor├ę sp─║┼łaj├║ ┼ípecifick├║ potrebu

CodePen je online platforma, kde m├┤┼żete vyu┼ż├şva┼ą pr├ícu mili├│nov ─Ćal┼í├şch v├Żvoj├írov po celom svete. Tento n├ístroj m├í editor, ktor├Ż v├ím umo┼ż┼łuje p├şsa┼ą riadky k├│du a sledova┼ą priebeh v├í┼ího projektu. Okrem toho v├ím CodePen umo┼ż┼łuje pr├şstup k ├║ryvkom k├│du, ktor├ę sp─║┼łaj├║ ve─żmi ┼ípecifick├ę potreby (panel ponuky, CTA at─Ć.). M├┤┼żete tie┼ż zdie─ża┼ą ├║ryvky k├│du a po┼żiada┼ą o pomoc ostatn├Żch v├Żvoj├írov, ktor├ş pou┼ż├şvaj├║ CodePen. Alternat├şva, rovnako ├║─Źinn├í, ku CodePen: JSFiddle.

Presk├║majte CodePen

codepen-search

4. GitHub: na ukladanie, verziu a zdie─żanie k├│du

GitHub je rie┼íenie na ukladanie a spr├ívu k├│du. Konkr├ętne t├íto platforma pre spolupr├ícu umo┼ż┼łuje ulo┼żi┼ą k├│d zameran├Ż na hos┼ąovanie zdrojov├ęho k├│du projektu. Tento zdrojov├Ż k├│d potom m├┤┼żu z├şska┼ą ─Ćal┼í├ş v├Żvoj├íri, ktor├ş ho m├┤┼żu upravi┼ą. Kompletn├í hist├│ria zmien vykonan├Żch v projekte v├ím umo┼ż┼łuje sledova┼ą pridan├ę k├│dy a ich autorov.

Cie─ż: podpori┼ą spolupr├ícu okolo k├│dexu a v├Żmen. V├Żhodou GitHubu je aj jeho ve─żk├í komunita po celom svete. Jeho bezplatn├í ponuka poskytuje neobmedzen├Ż po─Źet verejn├Żch alebo s├║kromn├Żch projektov a spolupracovn├şkov.

Presk├║majte GitHub

github-rozhranie

5. Doodle Ipsum: na jednoduch├ę generovanie ilustr├íci├ş pre rozlo┼żenie webovej str├ínky

Doodle Ipsum je bezplatn├Ż a ve─żmi ─żahko pou┼żite─żn├Ż n├ístroj, ktor├Ż v├ím umo┼ż┼łuje vytv├íra┼ą a prisp├┤sobova┼ą ilustr├ície s cie─żom vylep┼íi┼ą rozlo┼żenie webovej str├ínky. Cie─ż: vybra┼ą ilustr├ície z r├┤znych ┼ít├Żlov, definova┼ą svoje rozmery, aplikova┼ą efekty a okam┼żite z├şska┼ą HTML k├│d na integr├íciu do v├í┼ího projektu.

Objavte Doodle Ipsum

rozhranie doodle-ipsum

6. Chrome DevTools: na pr├şstup k s├║prave n├ístrojov na v├Żvoj webu

Chrome DevTools je sada n├ístrojov pon├║kan├Żch prehliada─Źom Google Chrome, ktor├í v├ím umo┼ż┼łuje pochopi┼ą vn├║torn├ę fungovanie webovej lokality a jej aplik├íci├ş. Ak chcete pou┼żi┼ą tento n├ístroj, v┼íetko, ─Źo mus├şte urobi┼ą, je prejs┼ą na webov├║ str├ínku, ktor├║ chcete pozorova┼ą, klikn├║┼ą na tri bodky v pravom hornom rohu obrazovky, v prehliada─Źi Google Chrome vybra┼ą ─Äal┼íie n├ístroje a potom N├ístroje pre v├Żvoj├írov. K dispoz├şcii je nieko─żko kariet, ako napr├şklad Prvky na zobrazenie zdrojov├ęho k├│du str├ínky, V├Żkon, ktor├Ż poskytuje inform├ície o na─Ź├ştavan├ş str├ínky, alebo Maj├ík, ktor├Ż umo┼ż┼łuje generova┼ą spr├ívy o v├Żkonnosti a dodr┼żiavan├ş osved─Źen├Żch postupov priamo v prehliada─Źi Google Chrome .

Presk├║majte Chrome DevTools

chrome-devtools-rozhranie

7. Bootstrap: pracova┼ą na dizajne webov├Żch str├ínok a aplik├íci├ş

Bootstrap je popul├írny front-end framework pre v├Żvoj├írov. Tento n├ístroj v├ís teda sprev├ídza pri rozlo┼żen├ş v├í┼ího HTML k├│du. Poskytuje v├ím v├Żhodu kolekcie n├ístrojov potrebn├Żch na vytv├íranie dizajnu webov├Żch str├ínok alebo aplik├íci├ş: roz┼í├şrenia JavaScript, komponenty pripraven├ę na pou┼żitie, premenn├ę Sass, ┼íabl├│ny dizajnu zalo┼żen├ę na HTML a CSS at─Ć. Zabezpe─Źuje tie┼ż odozvu v├í┼ího webu na v┼íetky typy podpory. Tento r├ímec je bezplatn├Ż.

Objavte Bootstrap

bootstrap

8. PageSpeed ÔÇőÔÇőÔÇőÔÇőInsights: na testovanie webovej str├ínky

PageSpeed ÔÇőÔÇőÔÇőÔÇőInsights je bezplatn├Ż n├ístroj pon├║kan├Ż spolo─Źnos┼ąou Google, ktor├Ż v├ím umo┼żn├ş analyzova┼ą v├Żkonnos┼ą webovej str├ínky a technick├ę body, ktor├ę je potrebn├ę opravi┼ą, aby ste optimalizovali r├Żchlos┼ą zobrazenia webovej str├ínky. Jeho hlavnou v├Żhodou je pon├║knu┼ą spr├ívu o pou┼ż├şvate─żskej sk├║senosti ao mnoh├Żch technick├Żch bodoch, ktor├ę je potrebn├ę zlep┼íi┼ą. Pou┼ż├şva sa ve─żmi jednoducho a vy┼żaduje len zadanie adresy URL str├ínky, ktor├║ chcete analyzova┼ą.

Presk├║majte n├ístroj PageSpeed ÔÇőÔÇőInsights

pagespeed-insights

9. DevToys: pr├şstup k sade n├ístrojov

DevToys je skuto─Źn├Ż ┼ívaj─Źiarsky arm├ídny n├┤┼ż pre v├Żvoj├írov. Tento bezplatn├Ż softv├ęr s otvoren├Żm zdrojov├Żm k├│dom funguje offline Windows. S├║stre─Ćuje r├┤zne n├ístroje, ktor├ę umo┼ż┼łuj├║ vykon├íva┼ą r├┤zne ├║lohy, ako je k├│dovanie a dek├│dovanie, konverzie, form├ítovanie, porovn├ívanie, testy at─Ć.

Objavte DevToys

devtoys

10. Stack Overflow: pre podporu a otázky

Ak Stack Overflow nie je striktne povedan├ę n├ístrojom, je nevyhnutn├Ż pre ka┼żd├ęho profesion├íla v oblasti v├Żvoja webu, e┼íte viac pre za─Źiato─Źn├şkov. V skuto─Źnosti predstavuje referen─Źn├Ż zdroj pre tis├şce v├Żvoj├írov a odpoved├í na v┼íetky typy ot├ízok o programovan├ş. V─Ćaka informa─Źnej z├íkladni ob├Żvanej v├Żvoj├írmi z cel├ęho sveta je mo┼żn├ę priamo na platforme vyh─żad├íva┼ą odpovede na technick├ę ot├ízky. Upozornenie: Je nevyhnutn├ę, aby ste svoje po┼żiadavky formulovali v angli─Źtine.

Objavte StackOverflow

prete─Źenie z├ísobn├şka

Table of Contents