narzędzia developera
Społeczność programistów front-endu bardzo dojrzała w ciągu ostatniej dekady i opracowała wiele pomocnych narzędzi, które ułatwiają i przyspieszają tworzenie front-endu.
- informacje o błędach przeglądarek – www.quirksmode.org
- debuger JS Mozilli – mozilla.org/projects/venkman/
- Microsoft Script Debuger – msdn.microsoft.com/library/en-us/sdbug/Html/sdbug_1.asp
- caniuse.com
- html5please.com
- postman – ułatwia czytanie plików json
Matematyczne
- tworzenie brył foremnych na podstawie koła od Ana Tudor
HTML
css
- specificity.keegan.st – kalkulator specyficzności selektorów
- FilterBlend – narzędzie do eksportowania css background-blend-mode oraz filter
- dokumentacja CSS
- specyfikacja CSS
- artykuł wyjaśniający działanie i użycie Flexbox
więcej narzędzi przydatnych w CSS znajdziesz w tym wpisie: generatory css
php
- var_dump beautifier od vardumpformatter
design systems
Narzędzia do kompilacji
Zwane też Build tools, pozwalają łatwo importować moduły js od innych programistów, zminimalizować kod, jak również uruchomić serwer WWW na komputerze lokalnym i obserwować zmiany w plikach. A gdy pliki zostaną zmienione, przeglądarka automatycznie odświeży stronę.
- Node to środowisko JavaScript o otwartym kodzie źródłowym – co oznacza, że możemy wykonywać JavaScript na naszej maszynie, a nie tylko w przeglądarce.
kodowanie
- unminified do css, js, html
- html beautifier
- sandbox w technologiach min.: Vue, Angular, React, JS
- vue
- scaffold – tworzy szkielet w pliku .vue
- vue
- Lynx viewer – narzędzie do pobierania samego tekstu strony
web developer toolbar (f) Chris Pederick
- disable JS
- information, display id, class details
- information/ view JS
- view source, view generated source
testowanie
- puppeteer testy funkcjionalne na przeglądarce
- na różnych przeglądarkach – lambdatest.com
testowanie responsywności
tekst
statystyki używalności urządzeń
resetowane hasła usera w bazie danych poprzez generator md5
- porównywanie kodu online – diffchecker.com/diff
- tworzenie wyrażeń regularnych – regex101.com
- Internet archive – WaybackMachine – archive.org/web/
- generator haseł
- sprawdzenie do kogo należy domena: whois.domaintools.com
Dokumentacja
- phpDocumentor – narzędzie do generowania dokumentacji na podstawie kodu
Obrazki
- konwersja na format .webp – Image online converter
- konwersja z formatu webp iloveimg.com
- optymalizacja jpg, png, gif – tinypng
- ekstrakcja tekstu z obrazka
JSON
- dummy.restapiexample.com
- jsonplaceholder
- validacja kodu JSON – jsonlint.com
Aplikacje webowe do pisania i testowania kodu:
DataBase
- Firebase – baza danych od google
Edytory kodu, IDE
- Visual Studio Code + fajne pluginy:
- Quokka.js – walidacja kodu js podczas pisania
- Indenticator – zaznacza pionowe linie zagnieżdżeń
- Live Server by Ritwick Dey
- Monokai++ by Davide Casella
- Vetur by Pine Wu
- vscode-vue
- Sublime Text + pluginy
- vue syntax highlight
- Atom
- PhpStorm
- WebStorm + pluginy
- Brackets+ pluginy
- brackets-vue
- Eclipse
- Coda
- DW – Adobe Dreamweaver
transpiler
- reads code written in one language and produces the equivalent code in another
- browsers only currently have widespread support of older JS
- transpilers convert advenced TypeScript and CoffeScript code back into the original JS
transpiler for ES6 – Babel – babeljs.io
webpack
https://webpack.js.org/
- it bundles modules into one .js file
- comes with a dev-server
Przeglądarki
- Chrome
- Chrome Canary
- Firefox
- Opera
- Safari
- Edge
- Vivaldi
- Brave
- Tor
inne
- GitBook – platforma w technologii Node.js. Pozwala przy znajomości języka Markdown i podstawowych poleceń Gita pisać książki i udostępniać je na serwerach GitBooka
- zestaw narzędzi od dailyweb.pl
Hope this helps and happy coding :)