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

HTML

• dokumentacja HTML
• specyfikacja HTML
• walidator kodu 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

design systems

• google Materialize
  • icons

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
• 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

• sizzy
• browserstack

tekst

• Lorem ipsum generator
• generowanie fontu z ikon

statystyki używalności urządzeń

• gs.statcounter.com
• gs.statcounter.com – screen-resolution-stats

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

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:

• jsbin.com
• codepen.io
• jsfiddle.net

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
  • vuejs-plugin
• 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