Externí nástroje pro vývojáře

Nástroje XML.cz běží přímo v prohlížeči. Tento přehled odkazuje na služby a aplikace jiných provozovatelů pro design, CSS, obrázky, výkon, API, Git a další práci na webu. Nástroje, které XML.cz už má, tu neopakujeme.

Design, barvy, písma a ikony

Figmanávrh rozhraní, prototypy a předávání designu vývojářům
Penpotopen source alternativa Figmy, jde provozovat i na vlastním serveru
Excalidrawkreslená tabule pro rychlé skici a schémata
Coolorsgenerátor barevných palet
Adobe Colorpalety podle harmonických pravidel a výběr barev z fotky
Realtime Colorsvyzkoušení palety a písma rovnou na ukázkovém webu
Happy Hueshotové barevné kombinace ukázané v kontextu stránky
Google Fontskatalog bezplatných webových písem
Fontsourceopen source písma jako npm balíčky pro hosting u sebe
Typescaletypografická stupnice velikostí písma s výstupem v CSS
Utopiaplynulá typografie a mezery přes clamp() bez breakpointů
Lucidejednotná sada liniových SVG ikon
HeroiconsSVG ikony od autorů Tailwind CSS
Tabler Iconstisíce volných SVG ikon s nastavitelnou tloušťkou čáry
Phosphor Iconsikony v šesti řezech od tenkého po vyplněný
Iconifyvyhledávání napříč stovkami sad ikon na jednom místě
unDrawvolné SVG ilustrace s vlastní barvou
Haikeigenerátor SVG pozadí, vln a tvarů
Unsplashvolně použitelné fotografie
Pexelsvolně použitelné fotografie a videa

CSS, layout a animace

Can I Usepodpora webových technologií napříč prohlížeči
Web Platform Statusstav funkcí podle Baseline, tedy od kdy fungují ve všech hlavních prohlížečích
cubic-bezier.comladění křivky cubic-bezier() pro přechody a animace
Easings.netpřehled easingových funkcí s ukázkami a CSS
Animistaknihovna hotových CSS animací ke zkopírování
Fancy Border Radiusorganické tvary pomocí osmi hodnot border-radius
CSS Grid Generatornaklikání mřížky a vygenerování CSS Gridu
Modern CSS Solutionsřešení častých úloh moderním CSS místo starých triků
SmolCSSkrátké znovupoužitelné vzory layoutu v CSS
Autoprefixer CSS onlinedoplnění prefixů -webkit- a dalších podle cílových prohlížečů

Obrázky a média

Squooshkomprese a převod obrázků (WebP, AVIF) přímo v prohlížeči
TinyPNGkomprese PNG, JPEG a WebP
RealFaviconGeneratorfavicony a ikony aplikací pro všechny platformy
Photopeaonline editor fotek, otevře i soubory PSD
ezgifúpravy GIF, WebP a krátkých videí, převod videa na GIF
Responsive Image Breakpoints Generatorvelikosti obrázku pro srcset podle skutečné úspory dat
remove.bgautomatické odstranění pozadí z fotky
HandBrakedesktopový převodník videa do formátů pro web

Výkon, SEO a přístupnost

PageSpeed InsightsLighthouse a data Core Web Vitals od skutečných návštěvníků
WebPageTestpodrobný vodopád načítání z různých míst a zařízení
GTmetrixměření rychlosti stránky s historií výsledků
Bundlephobiakolik npm balíček přidá do velikosti bundle
WAVEkontrola přístupnosti stránky s vyznačením chyb
axe DevToolsrozšíření prohlížeče pro audit přístupnosti
Rich Results Testkteré strukturované výsledky Google ze stránky vyčte
Schema Markup Validatorvalidace strukturovaných dat schema.org (JSON-LD, Microdata, RDFa)
OpenGraph.xyznáhled odkazu na sociálních sítích podle meta značek Open Graph
W3C Markup Validation Serviceoficiální validátor HTML od W3C
W3C CSS Validation Serviceoficiální validátor CSS od W3C

Bezpečnost, HTTPS a DNS

HTTP Observatorytest bezpečnostních hlaviček webu od Mozilly
Security Headersrychlé hodnocení CSP, HSTS a dalších hlaviček
SSL Labs Server Testrozbor nastavení TLS a certifikátu serveru
Let's Encryptbezplatné TLS certifikáty s automatickou obnovou
DNS Checkeršíření DNS záznamů po světě
whatsmydns.netjak DNS záznam vidí servery v různých zemích
MxToolboxdiagnostika pošty: MX, SPF, DKIM, DMARC a blacklisty

API a HTTP

Postmantestování a dokumentace API
Hoppscotchopen source klient pro REST, GraphQL a WebSocket v prohlížeči
Insomniadesktopový klient pro REST, GraphQL a gRPC
BrunoAPI klient, který ukládá požadavky jako textové soubory, takže patří do gitu
Swagger Editorpsaní a náhled specifikace OpenAPI
httpbintestovací endpointy, které vrátí, co jste poslali
Webhook.sitedočasná adresa pro zachycení a prohlédnutí webhooků
Mockoonlokální mock server pro API bez psaní kódu
JSONPlaceholderveřejné falešné REST API pro prototypy a výuku
ngrokzpřístupnění lokálního serveru přes veřejnou adresu

Online editory a playgroundy

CodePenukázky HTML, CSS a JavaScriptu s okamžitým náhledem
JSFiddlerychlé sdílení a ladění frontendových ukázek
StackBlitzNode.js projekty a frameworky běžící přímo v prohlížeči
CodeSandboxcloudové vývojové prostředí pro celé projekty
TypeScript Playgroundpřeklad TypeScriptu, typy a nastavení kompilátoru
Compiler Explorerjaký strojový kód vytvoří kompilátor C, C++, Rustu a dalších
Rust Playgroundoficiální online prostředí pro Rust
Go Playgroundoficiální online prostředí pro Go
3v4l.orgspuštění PHP kódu ve stovkách verzí PHP najednou
Python Tutorkrokování kódu s vizualizací proměnných a paměti
AST Explorersyntaktický strom kódu pro psaní pluginů a codemodů
jq playzkoušení filtrů jq nad JSON daty
DB FiddleSQL dotazy nad MySQL, PostgreSQL a SQLite bez instalace

Diagramy a dokumentace

draw.iodiagramy, vývojové diagramy a schémata sítí
Mermaid Live Editordiagramy z textového zápisu, které umí vykreslit GitHub i GitLab
PlantUMLUML diagramy z textového popisu
dbdiagram.ioER diagram databáze z krátkého textového zápisu
DrawSQLkreslení databázových schémat v týmu
Carbonobrázek ukázky kódu do prezentace nebo článku
ray.soobrázky ukázek kódu s barevnými motivy
DevDocsdokumentace desítek jazyků a knihoven s vyhledáváním i offline
tldr pagesstručné příklady použití příkazů místo dlouhých manuálů
explainshellvysvětlení jednotlivých částí příkazu v shellu

Git a správa projektu

Learn Git Branchinginteraktivní výuka větvení, rebase a cherry-pick
Oh Shit, Git!?!jak se vrátit z typických omylů v gitu
gitignore.iovygenerování .gitignore pro jazyk, editor a systém
Shields.ioodznaky stavu buildu, verze a licence do README
npm semver calculatorkteré verze balíčku odpovídají rozsahu jako ^1.2.0
Choose a Licensevýběr open source licence a srovnání podmínek
Conventional Commitskonvence commit zpráv pro změnové záznamy a verzování
Play with Dockerdočasné prostředí s Dockerem v prohlížeči

Výuka a reference

MDN Web Docsreferenční dokumentace k webovým technologiím
web.devnávody Googlu k výkonu, přístupnosti a moderním API
javascript.infopodrobná učebnice moderního JavaScriptu
Flexbox Froggyhra na procvičení flexboxu
Grid Gardenhra na procvičení CSS Gridu
roadmap.shstudijní plány pro frontend, backend, DevOps a další role
Refactoring.Gurunávrhové vzory a refaktoring s příklady v mnoha jazycích