Online nástroje pro každého vývojáře

6. 10. 2021

Tvorba vývojových diagramů

Vývojové diagramy jsou nezbytným pomocníkem při návrhu architektury, schématu a nebo dalších logických uzlů. Některé nástroje jsou dostupné zdarma a jsou zároveň dobře použitelné.

Diagrams.net - https://www.diagrams.net

Intuitivní rozhraní s rychlým návrhem.
Podpora exportů na Google Disk, Github, OneDrive, Dropbox, Gitlab nebo Trello.

Lucidchart.com - https://www.lucidchart.com

Intuitivní rozhraní s rychlým návrhem.
Bezplatné použití omezeno pouze na některé funkce a vlastnosti.

Testování HTTP

Httpstatus.io - https://httpstatus.io/

Testování redirectů, dostupnosti adres a odpovědí.

SSL Server Test - https://www.ssllabs.com/ssltest/

Bezplatná kontrola platnosti a bezpečnosti certifikace na HTTP.

Optimalizační nástroje

Vývoj není pouze stavba na zelené louce bez další údržby. Důležitou součástí úspěšného produktu je jeho optimalizování a testování.

Google PageSpeed Insinghts - https://developers.google.com/speed/pagespeed/insights/?hl=cs

Bezplatná nástroj od společnosti Google pro získání metrik frontendu.

Pagespeed.cz - https://pagespeed.cz/

Český Google PageSpeed Insinghts který umí automatické testování s reportem do mailu!

Estimator - https://estimator.dev

Spíše zajímavost, nástroj pro porovnání výkonu klasické prezentace vs. moderně pojaté v JS.

Google Structured data - https://search.google.com/structured-data/testing-tool/u/0/#

Společnost Google nedávno vypustila nástroj pro testování strukturovaných dat na prezentací. Dnes jsou strukturovaná data téměř standardem, ale i tak mnoho prezentací tyto data neobsahuje!

Nástroje pro designéry a kódery

Placeholder - https://placeholder.com/

Potřebujete zástupný obsah pro šablonu, wireframe a nebo prototyp?

Lorem Picsum - https://picsum.photos/

Podobná služba Placeholderu akorát s rozdílem že zde máte dostupný multimediální obsah.

Contrast ratio - https://contrast-ratio.com/#%23cbdac5-on-%23fFfff

Při návrhu a tvorbě rozhraní je důležité dbát na správný kontrast barev a tím zajistit správnou čitelnost prvků a jejich kontrast i na starých monitorech.

PX to EM conversion - https://www.w3schools.com/tags/ref_pxtoemconversion.asp