webroad.online
enEnglishroRomânăruРусский
  1. 1Веб
  2. 2HTML
  3. 3CSS
  4. 4JavaScript
  5. 5TypeScript
  6. 6Git
  7. 7Инструменты
  8. 8React
  9. 9Стейт-менеджмент
  10. 10Next.js
  11. 11Формы
  12. 12Данные и бэкенд
  13. 13SEO
  14. 14Tailwind CSS
  15. 15Анимации
  16. 16Тестирование
  17. 17Архитектура
ГлоссарийБиблиотека

Библиотека

Официальные источники и надёжные руководства по темам. Если возник вопрос — начните отсюда, а не с первого результата в Google.

Веб

MDN — Learn web development ↗РуководствоПолная учебная программа MDN с нуля.developer.mozilla.orgMDN — HTTP ↗СправочникМетоды, статусы, заголовки, кэш, cookie, CORS.developer.mozilla.orgweb.dev — Learn Performance ↗РуководствоКак загружается страница и как сделать её быстрой.web.devOWASP Top 10 ↗СправочникСамые частые риски веб-безопасности.owasp.org

HTML

MDN — HTML reference ↗СправочникПолный справочник по элементам и атрибутам.developer.mozilla.orgHTML Living Standard ↗СправочникОфициальная спецификация WHATWG — первоисточник.html.spec.whatwg.orgweb.dev — Learn HTML ↗РуководствоСтруктурированный курс от команды Chrome.web.devWCAG 2.2 Quick Reference ↗СправочникКритерии доступности с фильтрами.www.w3.orgWAI-ARIA Authoring Practices ↗РуководствоДоступные паттерны для модальных окон, вкладок, меню.www.w3.org

CSS

MDN — CSS reference ↗СправочникВсе свойства и селекторы.developer.mozilla.orgweb.dev — Learn CSS ↗РуководствоПолный курс: box model, каскад, flex, grid.web.devFlexbox Froggy ↗ИнструментИгра для изучения flexbox.flexboxfroggy.comGrid Garden ↗ИнструментИгра для изучения CSS Grid.cssgridgarden.com

JavaScript

MDN — JavaScript Guide ↗РуководствоОфициальное руководство MDN — от основ до продвинутого уровня.developer.mozilla.orgMDN — JavaScript Reference ↗СправочникКаждый метод, оператор и глобальный объект.developer.mozilla.orgjavascript.info ↗РуководствоЛучший полный учебник с упражнениями.javascript.infoECMAScript Specification ↗СправочникСпецификация языка (TC39).tc39.esTC39 Proposals ↗СправочникКакие новые возможности появятся в языке.github.comMDN — Web APIs ↗Руководствоfetch, DOM, Storage, Intl и все API браузера.developer.mozilla.orgCan I use ↗ИнструментПоддержка любой возможности в браузерах.caniuse.com

TypeScript

TypeScript Handbook ↗ДокументацияОфициальная документация TypeScript.www.typescriptlang.orgTypeScript Playground ↗ИнструментПишите TS в браузере и смотрите типы и итоговый JS.www.typescriptlang.orgReact TypeScript Cheatsheet ↗РуководствоРецепты типизации props, событий, хуков.react-typescript-cheatsheet.netlify.app

Git

Pro Git ↗РуководствоОфициальная книга по Git, бесплатно.git-scm.comGitHub Docs ↗ДокументацияPull request'ы, Actions, защита веток.docs.github.comConventional Commits ↗СправочникСтандарт сообщений коммитов.www.conventionalcommits.orgLearn Git Branching ↗ИнструментИнтерактивная визуализация branch, merge, rebase.learngitbranching.js.org

Инструменты

npm Docs ↗Документацияpackage.json, версии, команды.docs.npmjs.comnpm semver calculator ↗ИнструментКакие версии принимает диапазон.semver.npmjs.comVite ↗ДокументацияСборщик и dev-сервер для SPA.vite.devESLint ↗ДокументацияЛинтер: правила и настройка.eslint.orgPrettier ↗ДокументацияФорматировщик кода.prettier.ioChrome DevTools ↗РуководствоВсе панели, с туториалами.developer.chrome.com

React

react.dev — Learn ↗РуководствоОфициальная документация React с интерактивными упражнениями.react.devreact.dev — API Reference ↗СправочникВсе хуки и компоненты React 19.react.devYou Might Not Need an Effect ↗РуководствоГлавная статья о useEffect.react.devReact Compiler ↗ДокументацияАвтоматическая мемоизация — без ручных useMemo/useCallback.react.dev

Стейт-менеджмент

Redux Toolkit ↗ДокументацияОфициальный и актуальный способ писать на Redux.redux-toolkit.js.orgRTK Query ↗ДокументацияЗагрузка и кэширование серверного состояния в Redux.redux-toolkit.js.orgZustand ↗ДокументацияМинималистичный глобальный store без провайдера.zustand.docs.pmnd.rsTanStack Query ↗ДокументацияСерверное состояние на клиенте без Redux.tanstack.comSWR ↗ДокументацияПростая альтернатива для загрузки данных с кэшем.swr.vercel.appJotai ↗ДокументацияГлобальное состояние из маленьких атомов.jotai.org

Next.js

Next.js Docs ↗ДокументацияОфициальная документация App Router.nextjs.orgNext.js Learn ↗РуководствоОфициальный бесплатный курс с полным проектом.nextjs.orgNext.js — Caching ↗РуководствоCache Components, 'use cache', PPR.nextjs.orgNext.js — Data Security ↗РуководствоКак защитить Server Actions и данные.nextjs.orgNext.js — Upgrading to 16 ↗РуководствоЧто изменилось: proxy.ts, асинхронные params, кэш.nextjs.orgVercel Docs ↗ДокументацияДеплой, переменные окружения, домены, аналитика.vercel.comNext.js — Authentication ↗РуководствоСессии, Data Access Layer, авторизация.nextjs.orgAuth.js ↗ДокументацияАутентификация с открытым кодом: OAuth, сессии.authjs.devBetter Auth ↗ДокументацияПолная типизированная аутентификация с открытым кодом.www.better-auth.com

Формы

React Hook Form ↗ДокументацияПроизводительные формы с useForm.react-hook-form.comZod ↗ДокументацияВалидация схемами с выводом типов.zod.devConform ↗ДокументацияФормы для Server Actions с прогрессивным улучшением.conform.guideTanStack Form ↗ДокументацияПолностью типизированные формы для любого фреймворка.tanstack.comValibot ↗ДокументацияМодульная и компактная альтернатива Zod.valibot.devNext.js — Forms ↗РуководствоФормы с Server Actions и useActionState.nextjs.org

Данные и бэкенд

PostgreSQL Docs ↗СправочникОфициальная документация Postgres.www.postgresql.orgDrizzle ORM ↗ДокументацияТипизированная ORM, близкая к SQL.orm.drizzle.teamPrisma ↗ДокументацияORM с простым API и богатыми инструментами.www.prisma.ioNeon Docs ↗ДокументацияServerless Postgres — база данных этого проекта.neon.comOWASP — SQL Injection Prevention ↗РуководствоКак предотвратить SQL-инъекции.cheatsheetseries.owasp.org

SEO

Google Search Central ↗РуководствоОфициальная документация Google по SEO.developers.google.comSEO Starter Guide ↗РуководствоБазовое руководство Google.developers.google.comGoogle Search Console ↗ИнструментИндексация, запросы, CTR, ошибки.search.google.comGoogle Analytics ↗ИнструментПоведение посетителей и конверсии.marketingplatform.google.comGoogle Keyword Planner ↗ИнструментОбъём поиска и идеи ключевых слов.ads.google.comGoogle Trends ↗ИнструментИнтерес к теме во времени.trends.google.comRich Results Test ↗ИнструментПроверяет структурированные данные.search.google.comschema.org ↗СправочникСловарь для структурированных данных.schema.org

Tailwind CSS

Tailwind CSS Docs ↗ДокументацияОфициальная документация v4.tailwindcss.comTailwind — Theme variables ↗Руководство@theme, пространства имён и дизайн-токены.tailwindcss.comTailwind — Dark mode ↗Руководствоprefers-color-scheme или ручной переключатель.tailwindcss.comtailwind-merge ↗ИнструментРазрешает конфликты классов.github.comcva ↗ИнструментДекларативные варианты компонентов.cva.styleRadix Primitives ↗ИнструментДоступные headless-компоненты, стилизуемые Tailwind.www.radix-ui.comTailwind — Adding custom styles ↗Руководство@utility, @theme, произвольные значения.tailwindcss.comshadcn/ui ↗ИнструментКомпоненты Radix + Tailwind, копируемые в ваш проект.ui.shadcn.comclsx ↗ИнструментУсловные классы, 239 байт.github.com

Анимации

Motion ↗ДокументацияДекларативные анимации в React.motion.devGSAP ↗ДокументацияТаймлайны, ScrollTrigger, SplitText.gsap.comGSAP + React ↗РуководствоuseGSAP, очистка, contextSafe.gsap.comMDN — Scroll-driven animations ↗СправочникАнимации, привязанные к прокрутке, только на CSS.developer.mozilla.orgMDN — View Transition API ↗СправочникПереходы между состояниями и страницами.developer.mozilla.orgeasings.net ↗ИнструментКривые плавности наглядно.easings.net

Тестирование

Vitest ↗ДокументацияБыстрый тест-раннер, совместимый с Jest.vitest.devTesting Library ↗ДокументацияТестируйте компоненты как пользователь.testing-library.comPlaywright ↗ДокументацияEnd-to-end тесты в реальных браузерах.playwright.devNext.js — Testing ↗РуководствоКак настроить Vitest и Playwright с Next.nextjs.org

Архитектура

Feature-Sliced Design ↗ДокументацияОфициальная документация FSD.feature-sliced.designFSD с Next.js ↗РуководствоКак совмещать слои FSD с App Router.feature-sliced.designSteiger ↗ИнструментЛинтер, следящий за правилами FSD.github.comBulletproof React ↗РуководствоFeature-based архитектура с полными примерами.github.comAtomic Design ↗РуководствоОригинальная книга о дизайн-системах.atomicdesign.bradfrost.comTurborepo ↗ДокументацияМонорепозитории для нескольких приложений.turborepo.com

Была ли страница полезной?

Один клик — без регистрации.