Веб-разработка
Разработка, инфраструктура, SEO, ИИ и IT для бизнеса — коротко и по делу.
105 статей
- Веб-разработка4 мин
Как добавить карту на сайт: Google Maps, Яндекс Карты, Leaflet
Если нужна одна точка «как нас найти», хватит iframe-виджета; для нескольких меток и своей логики берите JS API или Leaflet, а саму карту загружайте лениво, только когда пользователь до неё долистал.
Практика - Веб-разработка3 мин
ARIA-атрибуты: когда и как их использовать
ARIA сообщает вспомогательным технологиям роль, имя и состояние элемента, но не добавляет поведения; используйте её только там, где нет подходящего нативного HTML-элемента.
Практика - Веб-разработка3 мин
Astro или Next.js для контентных сайтов, блогов и лендингов
Если сайт в основном состоит из текста и страниц, Astro даёт минимум JavaScript и быструю загрузку из коробки; если внутри много интерактива, личных кабинетов и логики, удобнее Next.js.
Основы - Веб-разработка3 мин
Chrome DevTools: руководство для веб-разработчика
Chrome DevTools — встроенный в браузер набор инструментов: Elements для вёрстки, Console для ошибок, Network для запросов, Performance для скорости, Application для хранилищ и Lighthouse для аудита.
Практика - Веб-разработка3 мин
Как работает event loop в браузере: задачи, микрозадачи, рендеринг
Браузер берёт одну задачу, выполняет её до конца, затем опустошает всю очередь микрозадач и только потом может отрисовать кадр; пока работает ваш код, страница не перерисовывается и не реагирует на клики.
Продвинутое - Веб-разработка3 мин
Как превратить сайт в PWA: манифест и service worker
Чтобы сайт стал PWA, нужны три вещи: HTTPS, файл манифеста с названием и иконками и service worker, который кэширует ресурсы и отдаёт офлайн-страницу без сети.
Практика - Веб-разработка4 мин
Как создать REST API на Node.js и Express
Создайте проект с Express, разделите код на маршруты, контроллеры и слой работы с базой, проверяйте входные данные схемой, обрабатывайте ошибки в одном middleware и тестируйте эндпоинты HTTP-клиентом.
Практика - Веб-разработка3 мин
Bun, Deno или Node.js: сравнение JavaScript-рантаймов
Для большинства продакшен-проектов Node.js остаётся самым безопасным выбором; Bun интересен скоростью и встроенным тулингом, Deno — моделью безопасности и TypeScript из коробки.
Основы - Веб-разработка3 мин
Code splitting и ленивая загрузка в JavaScript-приложениях
Code splitting делит бандл на части, которые грузятся только когда нужны: маршруты — отдельно, тяжёлые компоненты — через dynamic import, а prefetch заранее подгружает вероятные следующие шаги.
Практика - Веб-разработка3 мин
Cookies, localStorage или sessionStorage: где хранить данные
Cookies уходят на сервер с каждым запросом и подходят для сессий с флагами HttpOnly и Secure; localStorage хранит несекретные настройки долго, sessionStorage — до закрытия вкладки.
Практика - Веб-разработка3 мин
CORS: почему возникает ошибка и как её исправить
Ошибку CORS выдаёт браузер, а не сервер — она исправляется на сервере, который должен явно разрешить ваш origin нужными заголовками, а не отключением защиты.
Практика - Веб-разработка3 мин
Critical Rendering Path: как браузер отрисовывает страницу
Critical Rendering Path — это цепочка шагов от получения HTML до первых пикселей на экране; чем меньше блокирующих CSS и JS в начале этой цепочки, тем быстрее пользователь видит страницу.
Продвинутое - Веб-разработка4 мин
Кроссбраузерность: как проверить и исправить сайт
Кроссбраузерность — это согласованный список целевых браузеров, инструменты, которые добавляют префиксы и полифилы именно под этот список, и проверка ключевых сценариев в реальном Safari, на Android и во встроенных браузерах вроде Telegram.
Практика - Веб-разработка3 мин
CSR, SSR, SSG и ISR: стратегии рендеринга простыми словами
Разница в том, где и когда собирается HTML: в браузере (CSR), на сервере при каждом запросе (SSR), один раз при сборке (SSG) или при сборке с периодическим обновлением (ISR). Для контента подходят SSG и ISR, для персональных страниц — SSR, для закрытых панелей — CSR.
Основы - Веб-разработка3 мин
CSS-переменные (custom properties): практическое руководство
CSS-переменная объявляется как --имя: значение и читается через var(--имя); она наследуется по дереву, может меняться в медиазапросах и из JavaScript прямо в браузере, чем и отличается от переменных Sass.
Основы - Веб-разработка3 мин
CSS Flexbox: полное руководство с примерами вёрстки
Flexbox раскладывает элементы вдоль одной оси: контейнер с display: flex управляет направлением, выравниванием и отступами, а элементы — тем, как они растягиваются и сжимаются.
Практика - Веб-разработка3 мин
CSS Grid: руководство от основ до реальных макетов
CSS Grid раскладывает элементы сразу по строкам и колонкам: вы описываете треки сетки на контейнере, а элементы встают в ячейки или именованные области — это удобнее всего для макетов страниц.
Практика - Веб-разработка4 мин
CSS position: static, relative, absolute, fixed и sticky
static — обычный поток, relative сдвигает элемент и сохраняет место, absolute и fixed вынимают его из потока и считают координаты от позиционированного предка или окна, а sticky прилипает при прокрутке внутри своего родителя.
Основы - Веб-разработка4 мин
Единицы измерения в CSS: px, em, rem, %, vw и vh
px — фиксированный размер, rem считается от корневого шрифта, em — от шрифта родителя, % — от родительского блока, vw и vh — от окна; для шрифтов и отступов удобнее rem, для экрана на мобильных — dvh или svh.
Основы - Веб-разработка3 мин
Анимации на сайте: CSS или JavaScript, GSAP и Motion
Простые состояния (hover, появление, раскрытие) делайте на CSS, сложные последовательности и анимации по прокрутке — на GSAP или Motion; анимируйте только transform и opacity и отключайте движение при prefers-reduced-motion.
Практика - Веб-разработка3 мин
Как правильно сделать тёмную тему на сайте
Опишите цвета через CSS-переменные, по умолчанию берите системную тему из prefers-color-scheme, выбор пользователя храните в localStorage и применяйте его маленьким скриптом в head до отрисовки страницы.
Практика - Веб-разработка3 мин
E2E-тестирование веб-приложений: Playwright или Cypress
E2E-тесты проверяют ключевые пользовательские сценарии целиком, через настоящий браузер. Playwright сильнее в кроссбраузерности, параллельности и нескольких вкладках, Cypress — в удобной интерактивной отладке; для нового проекта чаще выбирают Playwright.
Практика - Веб-разработка3 мин
ES Modules vs CommonJS: import и require в JavaScript
CommonJS (require) — старая синхронная модульная система Node.js, ES Modules (import) — официальный стандарт языка; Node.js выбирает систему по расширению файла и полю type в package.json.
Основы - Веб-разработка3 мин
Express, NestJS или Fastify: какой фреймворк Node.js выбрать
Express — простой и гибкий выбор для небольших сервисов, Fastify — быстрый и со встроенной валидацией схем, NestJS — строгая модульная архитектура для больших команд и долгих проектов.
Практика - Веб-разработка4 мин
Feature-Sliced Design: архитектура фронтенда для больших проектов
Feature-Sliced Design делит фронтенд на слои по уровню ответственности, слои — на слайсы по бизнес-доменам, а слайсы — на технические сегменты; модуль может импортировать только из нижележащих слоёв и только через публичный API слайса.
Продвинутое - Веб-разработка3 мин
Flexbox или CSS Grid: что и когда использовать
Flexbox раскладывает элементы в одном направлении — строку или колонку, а Grid управляет строками и колонками одновременно. Для компонентов чаще подходит Flexbox, для каркаса страницы и сеток — Grid, и они отлично работают вместе.
Основы - Веб-разработка3 мин
Фронтенд и бэкенд: в чём разница
Фронтенд — это всё, что пользователь видит и нажимает в браузере или приложении; бэкенд — серверная логика, данные и интеграции. Связываются они через API.
Основы - Веб-разработка4 мин
Что такое headless CMS: сравнение Strapi, Sanity и Payload
Headless CMS хранит и редактирует контент, но не отвечает за его отображение — сайт, приложение или бот получают данные через API; это даёт свободу во фронтенде ценой более сложной разработки.
Основы - Веб-разработка3 мин
Как выбрать CMS для сайта
CMS выбирают не по популярности, а по контенту и людям: для типового сайта с блогом подойдёт WordPress, для сложного фронтенда и нескольких каналов — headless CMS, для уникальной бизнес-логики — собственная админка.
Практика - Веб-разработка3 мин
Как выбрать фронтенд-фреймворк для веб-проекта
Начните с типа проекта и навыков команды: для контентных сайтов — Astro, для продуктов с SEO — React или Vue с SSR, для крупных корпоративных систем — Angular.
Практика - Веб-разработка3 мин
Как работает сайт: клиент, сервер, HTTP и браузер
Сайт — это диалог: браузер (клиент) через DNS находит сервер, отправляет ему HTTP-запрос, а сервер возвращает HTML, CSS, JavaScript и данные, из которых браузер собирает страницу.
Основы - Веб-разработка3 мин
Кэширование в браузере: Cache-Control, ETag и сброс кэша
Статику с хэшем в имени файла кэшируйте надолго с immutable, а HTML отдавайте с no-cache и ETag — тогда пользователи получают обновления сразу, а повторные загрузки почти мгновенны.
Практика - Веб-разработка3 мин
HTTP-методы и коды ответов, которые нужно знать разработчику
Метод говорит, что сделать с ресурсом, а код ответа — чем это закончилось; GET, PUT и DELETE идемпотентны, POST — нет, а ошибки клиента (4xx) нужно чётко отличать от ошибок сервера (5xx).
Основы - Веб-разработка3 мин
Оптимизация изображений для сайта: WebP, AVIF, srcset и lazy loading
Отдавайте WebP или AVIF, подбирайте размер под экран через srcset и sizes, ленитесь только ниже первого экрана, всегда указывайте width и height — и автоматизируйте это сборкой или image CDN.
Практика - Веб-разработка3 мин
Бесконечная прокрутка, пагинация или «Показать ещё»: что выбрать
Для каталогов и поиска, где важно найти и вернуться, выбирайте пагинацию или «Показать ещё» с адресами страниц; бесконечная прокрутка подходит лентам, которые просматривают без цели.
Практика - Веб-разработка3 мин
Fetch API в JavaScript: запросы, ошибки, таймауты и отмена
fetch отклоняет промис только при сетевой ошибке, поэтому статус ответа нужно проверять через response.ok вручную, а таймауты и отмену делать через AbortController или AbortSignal.timeout.
Практика - Веб-разработка3 мин
Лендинг, корпоративный сайт или веб-приложение: что вам нужно
Лендинг продаёт одно предложение одному сегменту, корпоративный сайт рассказывает о компании и её услугах, а веб-приложение выполняет работу для пользователя. Формат определяется целью, а не бюджетом.
Основы - Веб-разработка4 мин
Как читать отчёт Lighthouse и исправлять найденные проблемы
Lighthouse — лабораторный тест, который оценивает производительность, доступность, лучшие практики и SEO; смотрите на метрики и проваленные аудиты, а не на одну цифру, запускайте тест в чистых условиях несколько раз и начинайте с картинок, JavaScript и блокирующих ресурсов.
Практика - Веб-разработка3 мин
Микрофронтенды: когда имеет смысл делить фронтенд
Микрофронтенды делят один интерфейс на части, которые разные команды разрабатывают и выкатывают независимо; они решают организационную проблему и почти всегда избыточны для одной небольшой команды.
Продвинутое - Веб-разработка3 мин
Монорепозиторий для веба: Turborepo, Nx и pnpm workspaces
Монорепозиторий хранит сайт, админку, API и общие пакеты в одном репозитории; pnpm workspaces связывают пакеты, а Turborepo или Nx ускоряют сборку за счет кэша и запуска только затронутых задач.
Продвинутое - Веб-разработка3 мин
Как сделать мультиязычный сайт: i18n на практике
Мультиязычный сайт держится на четырёх решениях: отдельный URL для каждого языка, переводы в файлах по ключам, мягкое определение языка без принудительных редиректов и форматирование чисел, дат и множественного числа через Intl.
Практика - Веб-разработка4 мин
App Router в Next.js: лейауты, маршрутизация и Server Actions
В App Router каждая папка в app/ — это сегмент URL, а специальные файлы page, layout, loading и error задают страницу, обёртку и состояния; данные меняются через Server Actions без отдельного API.
Практика - Веб-разработка4 мин
Авторизация в Next.js: Auth.js, Clerk или своё решение
Clerk быстрее всего в запуске, но хранит данные пользователей у стороннего сервиса и дорожает с ростом; Auth.js бесплатен и хранит пользователей в вашей базе; своё решение даёт полный контроль. В любом случае проверяйте сессию в каждом серверном компоненте и server action, а не только в middleware.
Практика - Веб-разработка4 мин
Загрузка данных и кэширование в Next.js: подробный разбор
В Next.js вы сами решаете, что кэшировать и как долго: данные можно обновлять по таймеру или по тегу после изменения, а динамические части стримить через Suspense. Устаревшие данные почти всегда объясняются тем, что страница или запрос неожиданно оказались закэшированы.
Продвинутое - Веб-разработка4 мин
SEO в Next.js: метаданные, sitemap, robots.txt и OG-картинки
В App Router SEO задаётся экспортом metadata или generateMetadata, специальными файлами sitemap.ts, robots.ts и opengraph-image.tsx и скриптом JSON-LD; в многоязычных маршрутах каждой странице нужны canonical и альтернативы hreflang.
Практика - Веб-разработка3 мин
Next.js или чистый React на Vite: что нужно вашему проекту
Если страницы должны находиться в поиске и быстро открываться с первого визита — берите Next.js; если это приложение за логином без SEO — React на Vite проще и дешевле в поддержке.
Основы - Веб-разработка3 мин
Node.js или PHP для бэкенда сайта: честное сравнение
Оба стека подходят для большинства сайтов. Node.js сильнее в real-time и при едином JavaScript-стеке, PHP с Laravel — в классических сайтах, админках и на дешёвом хостинге; решающими обычно становятся команда и проект.
Основы - Веб-разработка3 мин
npm, Yarn или pnpm: какой менеджер пакетов выбрать
npm — надежный выбор по умолчанию, pnpm экономит диск и строже следит за зависимостями, что особенно ценно в монорепозиториях, а Yarn удобен командам, которым нужны его особые режимы; главное — один менеджер и один lockfile на проект.
Практика - Веб-разработка4 мин
Nuxt или Next.js: сравнение метафреймворков
Nuxt и Next.js почти равны по возможностям, поэтому выбор определяет не фреймворк, а библиотека: команда на Vue берёт Nuxt, команда на React — Next.js.
Основы - Веб-разработка3 мин
Как документировать API с помощью OpenAPI и Swagger
Опишите API в одном файле OpenAPI (YAML или JSON), отдавайте его в Swagger UI или Redoc для документации и генерируйте из него клиенты, а синхронность с кодом проверяйте автоматически в CI.
Практика - Веб-разработка4 мин
Оптимистичные обновления интерфейса в React: паттерны и откат
Оптимистичный UI сразу показывает ожидаемый результат и синхронизируется с сервером в фоне; ему нужны снимок для отката, защита от гонок и дублей, и его нельзя применять там, где ложный «успех» стоит денег.
Продвинутое - Веб-разработка4 мин
package.json простыми словами: зависимости, скрипты и semver
package.json — паспорт JavaScript-проекта: он описывает имя, скрипты и зависимости с диапазонами версий, а lock-файл фиксирует точные версии, чтобы у всех собиралось одно и то же.
Основы - Веб-разработка3 мин
Формы в React: React Hook Form и валидация через Zod
React Hook Form управляет полями и отправкой без лишних перерисовок, а Zod-схема описывает правила валидации один раз — и ту же схему можно использовать на сервере для проверки данных.
Практика - Веб-разработка3 мин
Хуки React: useState, useEffect, useRef и другие на примерах
Хуки — это функции, которые дают компоненту состояние (useState), побочные эффекты (useEffect) и ссылки (useRef); вызывайте их только на верхнем уровне и честно указывайте зависимости.
Практика - Веб-разработка3 мин
Оптимизация производительности React: memo, useMemo и ререндеры
Сначала измерьте в React Profiler, что именно тормозит; затем уберите причину лишних ререндеров структурой компонентов и только потом точечно добавляйте memo, useMemo и виртуализацию.
Продвинутое - Веб-разработка3 мин
Как организовать структуру React-проекта: папки и соглашения
Для небольших проектов достаточно группировки по типам файлов, а растущее приложение лучше делить по фичам: всё, что относится к одной функции, лежит в одной папке, а общий код — в shared.
Практика - Веб-разработка3 мин
React Server Components: как они работают и зачем нужны
Server Components выполняются только на сервере и не попадают в JavaScript-бандл браузера; интерактивные части выносятся в Client Components с "use client", а между ними передаются только сериализуемые данные.
Продвинутое - Веб-разработка3 мин
Управление состоянием в React: Context, Redux или Zustand
Сначала отделите серверные данные (их отдайте TanStack Query) от клиентского состояния; для редких глобальных значений хватит Context, для частых — Zustand, для большой команды со строгими правилами — Redux Toolkit.
Практика - Веб-разработка4 мин
UI-библиотеки для React: MUI, Ant Design и shadcn/ui
Ant Design — самый быстрый путь к админке с большим объёмом данных, MUI — сбалансированный вариант с сильной системой тем, а shadcn/ui подходит для проектов со своим дизайном, потому что код компонентов принадлежит вам.
Практика - Веб-разработка3 мин
React или Angular: библиотека или полноценный фреймворк
React — гибкая библиотека, где стек собирается под задачу. Angular — фреймворк со всем необходимым и строгой структурой, удобный для больших команд и долгих проектов.
Основы - Веб-разработка3 мин
React или Vue: сравнение для вашего следующего проекта
Оба инструмента подходят для серьезных продуктов. React выигрывает размером экосистемы и рынком разработчиков, Vue — простотой старта и встроенными решениями.
Основы - Веб-разработка4 мин
Как проанализировать и уменьшить размер JavaScript-бандла
Сначала посмотрите на бандл через analyzer и найдите самые крупные модули, затем по очереди включите tree shaking, замените тяжёлые зависимости, сузьте полифиллы и перенесите лишнюю работу на сервер, каждый раз фиксируя размер до и после.
Продвинутое - Веб-разработка3 мин
Адаптивная вёрстка: медиазапросы, брейкпоинты и mobile first
Адаптивная вёрстка начинается с тега viewport и базовых стилей для мобильных, к которым медиазапросы добавляют правила для больших экранов. Брейкпоинты ставятся там, где ломается контент, шрифты масштабируются через clamp(), а компоненты — через container queries.
Практика - Веб-разработка3 мин
Проектирование REST API: именование, версии, ошибки
Хороший REST API предсказуем: существительные во множественном числе в URL, единые правила пагинации и фильтров, явная версия, один формат ошибок для всех эндпоинтов и ключи идемпотентности для операций, которые нельзя повторять.
Практика - Веб-разработка3 мин
REST или GraphQL: какой подход к API выбрать
REST проще, лучше кэшируется и подходит для большинства публичных и CRUD-API; GraphQL выигрывает, когда много разных клиентов и сложные экраны с вложенными данными, но требует больше дисциплины на сервере.
Основы - Веб-разработка3 мин
Sass, CSS Modules или CSS-in-JS: как стилизовать приложение
Sass — препроцессор для удобного написания CSS, CSS Modules изолируют классы на уровне файла, а CSS-in-JS описывает стили в JavaScript. Для большинства React-приложений с SSR надёжный выбор — CSS Modules (при желании вместе с Sass) или CSS-in-JS без runtime.
Практика - Веб-разработка3 мин
Семантическая вёрстка: какие теги использовать и зачем
Семантическая вёрстка — это выбор тегов по смыслу контента (header, nav, main, article, button), а не по внешнему виду; так страницу понимают скринридеры, поисковики и разработчики.
Основы - Веб-разработка3 мин
Сессии или JWT: как реализовать авторизацию в веб-приложении
Для обычного веб-приложения надёжный выбор по умолчанию — серверные сессии в httpOnly cookie; JWT с refresh-токенами оправдан для мобильных клиентов, нескольких сервисов и внешних API.
Практика - Веб-разработка3 мин
SPA или MPA: одностраничное или многостраничное приложение
MPA загружает новую HTML-страницу на каждый переход и проще для SEO и контентных сайтов; SPA загружается один раз и меняет экран на клиенте, что удобнее для сложных приложений. Сегодня чаще всего выбирают гибрид.
Основы - Веб-разработка3 мин
Tailwind CSS или Bootstrap: какой CSS-фреймворк выбрать
Bootstrap даёт готовые компоненты и быстрый старт, но сайты на нём похожи друг на друга без серьёзной доработки. Tailwind CSS даёт утилиты для сборки собственного дизайна и обычно выигрывает, когда есть уникальный макет и дизайн-система.
Практика - Веб-разработка4 мин
TanStack Query vs SWR: работа с серверными данными в React
Обе библиотеки кешируют серверные данные и обновляют их автоматически; SWR легче и проще для приложений, которые в основном читают данные, а TanStack Query даёт больше контроля над мутациями, инвалидацией и отладкой в крупных проектах.
Практика - Веб-разработка3 мин
TypeScript в React: типизация пропсов, состояния, событий и хуков
Описывайте пропсы через type, доверяйте выводу типов в хуках, берите типы событий из React и проверяйте ответы API на границе — этого хватает для большинства задач.
Практика - Веб-разработка3 мин
Vite или Webpack: сравнение сборщиков фронтенда
Для нового проекта обычно проще и быстрее взять Vite; Webpack остается разумным выбором для крупных legacy-проектов со сложной кастомной конфигурацией, где миграция не окупит затрат.
Практика - Веб-разработка3 мин
Чек-лист доступности сайта для разработчика
Проверьте, что всё работает с клавиатуры и фокус виден, у изображений и полей есть текстовые названия, контраст достаточный, разметка семантическая, анимация уважает reduced motion, а затем прогоните axe и screen reader.
Практика - Веб-разработка3 мин
Web Components: кастомные элементы и Shadow DOM
Web Components — набор стандартов браузера для создания собственных HTML-тегов с изолированными стилями; они хороши для дизайн-систем и виджетов, которые должны работать в любом фреймворке.
Продвинутое - Веб-разработка3 мин
Веб-шрифты: как подключать быстро и без скачков вёрстки
Отдавайте шрифты в WOFF2 со своего домена, разбивайте их на подмножества по unicode-range, предзагружайте только главный файл, задайте font-display и подгоните метрики запасного шрифта — тогда текст появится сразу, а вёрстка не прыгнет.
Практика - Веб-разработка3 мин
Формы на сайте: валидация, ошибки и удобство в коде
Хорошая форма проверяет данные дважды — на клиенте для удобства и на сервере для надёжности, по одной общей схеме, и показывает понятные ошибки рядом с полем.
Практика - Веб-разработка3 мин
Чек-лист оптимизации скорости сайта для разработчика
Сначала измерьте (Lighthouse, field-данные Core Web Vitals), затем по порядку проверьте ответ сервера, сеть, изображения, JS, CSS, шрифты и сторонние скрипты — и перемеряйте после каждого изменения.
Практика - Веб-разработка3 мин
Как настроить отправку писем с формы обратной связи на сайте
Надёжная форма сначала сохраняет заявку (в базу, CRM или Telegram), а уже потом отправляет письмо через транзакционный сервис с домена, настроенного по SPF, DKIM и DMARC; спам отсекают honeypot и лимит запросов.
Практика - Веб-разработка4 мин
WebSockets, SSE или polling: что выбрать для real-time
Для двустороннего обмена (чаты, совместное редактирование, игры) берите WebSockets; для потока событий только от сервера (уведомления, дашборды, стриминг ответа AI) — SSE; polling оставьте как простой запасной вариант.
Продвинутое - Веб-разработка3 мин
Что такое вебхуки и чем они отличаются от API
Вебхук — это обратный вызов: внешний сервис сам присылает HTTP-запрос на ваш адрес, когда что-то произошло, вместо того чтобы вы постоянно спрашивали его через API.
Основы - Веб-разработка3 мин
Что происходит, когда вы вводите адрес сайта и жмёте Enter
Браузер находит IP через DNS, устанавливает защищённое соединение (TCP + TLS), отправляет HTTP-запрос, получает HTML, догружает CSS, JS и картинки, а затем строит и рисует страницу.
Основы - Веб-разработка3 мин
Что такое CSS: селекторы, каскад и специфичность
CSS — язык оформления: селектор выбирает элементы, правило задаёт стили, а при конфликте побеждает объявление с более высокой специфичностью или, при равенстве, последнее в коде.
Основы - Веб-разработка3 мин
Что такое DOM и как JavaScript меняет страницу
DOM — это живое дерево объектов, которое браузер строит из HTML; JavaScript находит в нём узлы, меняет их и реагирует на события, а браузер сразу перерисовывает страницу.
Основы - Веб-разработка3 мин
Что такое GraphQL и как он работает
GraphQL — язык запросов к API, где клиент сам описывает, какие поля ему нужны, и получает ровно их одним запросом через единый эндпоинт, а сервер описывает доступные данные строго типизированной схемой.
Основы - Веб-разработка3 мин
Что такое HTML и как устроена веб-страница
HTML — язык разметки, который описывает структуру страницы с помощью тегов: заголовки, абзацы, ссылки, картинки, формы. Браузер читает HTML и превращает его в то, что вы видите на экране.
Основы - Веб-разработка3 мин
Что такое htmx и когда JS-фреймворк не нужен
htmx — небольшая библиотека, которая позволяет обновлять части страницы HTML-фрагментами с сервера через атрибуты; для форм, поиска, таблиц и админок она часто заменяет React или Vue, но не подходит для насыщенных клиентских интерфейсов.
Основы - Веб-разработка3 мин
Что такое гидратация и как исправить ошибки гидратации
Гидратация — это момент, когда React в браузере «оживляет» готовый серверный HTML, подключая к нему обработчики событий. Ошибка гидратации возникает, если первый рендер в браузере отличается от серверного, и лечится тем, что всё нестабильное (даты, случайные значения, window) переносится в эффект или клиентский компонент.
Продвинутое - Веб-разработка3 мин
Что такое Jamstack и когда он подходит для сайта
Jamstack — подход, при котором страницы собираются заранее и раздаются с CDN, а всё динамическое делают JavaScript и API; он отлично подходит для контентных сайтов и хуже — для проектов, где данные меняются каждую секунду.
Основы - Веб-разработка3 мин
Что такое JavaScript и что он делает на сайте
JavaScript — язык программирования, который делает страницу живой: реагирует на действия пользователя, проверяет формы и подгружает данные без перезагрузки, тогда как HTML задаёт содержимое, а CSS — внешний вид.
Основы - Веб-разработка3 мин
Что такое JSON и как веб-приложения обмениваются данными
JSON — текстовый формат для передачи структурированных данных: объекты, массивы, строки, числа, true/false и null; через него фронтенд и бэкенд обмениваются данными по HTTP с заголовком Content-Type: application/json.
Основы - Веб-разработка3 мин
Что такое Laravel и для каких веб-проектов он подходит
Laravel — популярный PHP-фреймворк, в котором из коробки есть роутинг, ORM, шаблоны, очереди и авторизация; он отлично подходит для админок, CRM, API и бэкендов интернет-магазинов.
Основы - Веб-разработка3 мин
Что такое Next.js и что он добавляет к React
Next.js — это фреймворк поверх React, который добавляет готовую маршрутизацию, серверный рендеринг, backend-эндпоинты и оптимизацию, чтобы сайт быстро грузился и хорошо индексировался.
Основы - Веб-разработка3 мин
Что такое Node.js и для чего он используется
Node.js — это среда выполнения, которая запускает JavaScript на сервере. Она хороша для API, real-time приложений и инструментов разработки, но плохо подходит для тяжёлых вычислений в одном потоке.
Основы - Веб-разработка3 мин
Что такое PWA (прогрессивное веб-приложение) и что оно умеет
PWA — это сайт, который можно установить на телефон или компьютер как приложение, открывать без адресной строки и частично использовать офлайн; он дешевле двух нативных приложений, но не дает полного доступа к возможностям устройства.
Основы - Веб-разработка3 мин
Что такое React и почему он так популярен
React — JavaScript-библиотека для создания интерфейсов из компонентов: вы описываете, как экран выглядит при данном состоянии, а React сам обновляет нужные части страницы.
Основы - Веб-разработка3 мин
Что такое REST API: простое объяснение с примерами
REST API — это договорённость, по которой программы обмениваются данными через HTTP: каждый объект — ресурс со своим адресом, а действие с ним задаётся методом GET, POST, PUT, PATCH или DELETE.
Основы - Веб-разработка3 мин
Что такое Svelte и SvelteKit и чем они отличаются от React
Svelte — фреймворк-компилятор: он превращает компоненты в компактный JavaScript без виртуального DOM, а SvelteKit добавляет к нему роутинг, SSR и серверную логику; React выигрывает экосистемой и рынком разработчиков.
Основы - Веб-разработка4 мин
tRPC: типобезопасный API между фронтендом и бэкендом без REST
tRPC позволяет TypeScript-клиенту вызывать серверные функции напрямую, выводя типы входа и выхода из кода сервера без схем и кодогенерации; он хорош, когда одна команда владеет обеими сторонами в TypeScript-монорепозитории, и не подходит для публичных и многоязычных API.
Продвинутое - Веб-разработка3 мин
Что такое Vue.js: обзор для начинающих
Vue.js — это JavaScript-фреймворк для создания интерфейсов, в котором компонент описывается в одном файле, а страница сама обновляется при изменении данных. Для новых проектов обычно берут Composition API, Pinia для общего состояния и Vue Router для страниц.
Основы - Веб-разработка4 мин
Что такое доступность сайтов (accessibility) и стандарт WCAG
Доступность — это свойство сайта, которым могут пользоваться все, включая людей с нарушениями зрения, слуха и моторики; WCAG — международный стандарт с конкретными критериями, и ориентиром обычно служит уровень AA.
Основы - Веб-разработка3 мин
Что такое WebAssembly и когда его использовать в браузере
WebAssembly — компактный бинарный формат, который браузер выполняет почти с нативной скоростью рядом с JavaScript; он нужен для тяжелых вычислений и переноса готового кода, а не для обычных интерфейсов.
Продвинутое - Веб-разработка3 мин
Что такое WordPress и какие сайты на нём можно сделать
WordPress — бесплатная система управления контентом на PHP и MySQL, на которой удобно делать блоги, корпоративные сайты, лендинги и небольшие магазины, но для сложной бизнес-логики и высоких нагрузок он подходит хуже.
Основы - Веб-разработка3 мин
Как ускорить сайт на WordPress: практическое руководство
Сначала замерьте скорость, затем уберите лишние плагины, включите страничный кеш, сожмите изображения, обновите PHP, облегчите тему и подключите объектный кеш — и проверяйте эффект после каждого шага.
Практика - Веб-разработка3 мин
WordPress или сайт с нуля: что подходит вашему проекту
WordPress выгоден, когда нужен типовой контентный сайт быстро и без сложной логики; разработка с нуля оправдана, когда сайт — это продукт с уникальными сценариями, интеграциями и требованиями к скорости.
Основы
Есть идея или задача? Расскажите нам
Ответим в течение рабочего дня и предложим решение. Консультация бесплатная.