Powrót do Dev Notes

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

css

więcej narzędzi przydatnych w CSS znajdziesz w tym wpisie: generatory css

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

web developer toolbar (f) Chris Pederick

  • disable JS
  • information, display id, class details
  • information/ view JS
  • view source, view generated source

testowanie

testowanie responsywności

tekst

statystyki używalności urządzeń

resetowane hasła usera w bazie danych poprzez generator md5

Obrazki

JSON

Aplikacje webowe do pisania i testowania kodu:

DataBase

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

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