Гид по технологиям

Лента публикаций

Оптимизация шрифтов в Next.js — @next/font
Frontend 5 min read

Оптимизация шрифтов в Next.js — @next/font

@next/font упрощает и ускоряет работу с кастомными шрифтами в Next.js: он автоматически само-хостит Google Fonts, оптимизирует загрузку локальных шрифтов и упрощает интеграцию с Tailwind CSS.

Код‑блоки в React с react-code-blocks
Frontend 5 min read

Код‑блоки в React с react-code-blocks

Библиотека react-code-blocks позволяет просто вставлять форматированные и подсвеченные код-блоки в React‑приложение. В статье показано, как установить библиотеку, использовать CodeBlock и CopyBlock, добавить темы и обеспечить доступность.

Meta-теги в Nuxt.js для SEO и соцсетей
Веб-разработка 4 min read

Meta-теги в Nuxt.js для SEO и соцсетей

В статье объясняется, как добавлять meta-теги в Nuxt.js глобально, на отдельных страницах и динамически для блога. Приведены примеры кода, чеклист и критерии приёмки для корректного SEO и превью в соцсетях.

Рецептная книга на HTML/CSS/JS — шаги и код
Веб-разработка 5 min read

Рецептная книга на HTML/CSS/JS — шаги и код

Это пошаговое руководство показывает, как создать простое клиентское приложение «Рецептная книга» на HTML, CSS и JavaScript. Вы узнаете, как добавить рецепты, отобразить их, удалить и искать по названию. В конце есть советы по улучшению, чек-листы и шаблоны кода для быстрого старта.

Галерея изображений на HTML/CSS/JS
Frontend 4 min read

Галерея изображений на HTML/CSS/JS

Создадим простую интерактивную галерею, где пользователи переключают крупное изображение кликом по миниатюрам. В статье приведён полный пример файлов (index.html, styles.css, script.js), советы по доступности, тесты и контрольный список для развёртывания.

Перенаправление в React Router: Navigate и useNavigate
React 4 min read

Перенаправление в React Router: Navigate и useNavigate

Рассмотрим два способа перенаправления в React Router v6 — декларативный компонент Navigate и императивный хук useNavigate. Поясню, как защитить маршрут (dashboard), вернуть пользователя на исходную страницу после логина и какие подходы подходят для продакшена.

React и MongoDB: хранение данных
Веб-разработка 6 min read

React и MongoDB: хранение данных

Этот материал показывает, как связать клиент на React с базой данных MongoDB через Express и Mongoose. Вы получите пошаговую инструкцию: от настройки MongoDB и Compass до формы в React, сервера на Express и сохранения данных в коллекции.

Поисковая строка на JavaScript — простой пример
Веб-разработка 6 min read

Поисковая строка на JavaScript — простой пример

Небольшой поисковый бар можно реализовать на чистом JavaScript: создайте input для ввода, динамически сгенерируйте список строк, и при каждом вводе показывайте только совпадающие элементы. Это быстро для небольших наборов данных; для больших данных или серверного поиска рассмотрите дебаунсинг и запросы на сервер.

Bootstrap в React: интеграция шаблона
Frontend 6 min read

Bootstrap в React: интеграция шаблона

Этот пошаговый гид показывает, как быстро подключить бесплатный шаблон Bootstrap (например, Agency) к приложению React: скачать шаблон, скопировать файлы в public, перенести секции в компоненты как JSX, подключить скрипты и создать маршруты через react-router-dom.

Счётчик слов на HTML/CSS/JS — простой пример
Веб-разработка 5 min read

Счётчик слов на HTML/CSS/JS — простой пример

В статье показывается, как сделать базовый счётчик слов для веб-страницы с помощью HTML, CSS и JavaScript. Мы создаём поле ввода, кнопку и отображение результата, добавляем корректную обработку пробелов и приводим тесты, варианты и рекомендации по улучшению.

Корзина в Next.js: Context API + useReducer
Frontend 5 min read

Корзина в Next.js: Context API + useReducer

В статье показано, как реализовать корзину для интернет-магазина на Next.js с помощью Context API и useReducer. Вы получите рабочую структуру: контекст, редьюсер, провайдер и пример использования на странице товара, а также рекомендации по расширению и проверке.

Кнопки шеринга в React — быстро и просто
Frontend 5 min read

Кнопки шеринга в React — быстро и просто

Добавьте кнопки шеринга в React‑приложение с помощью react-share или простых ссылок; воспользуйтесь UTM‑метками и тестами на мобильных. Выберите 2–4 платформы и добавьте события в аналитику.

Графики в React: CSS, React-Vis и Google Charts
Frontend 6 min read

Графики в React: CSS, React-Vis и Google Charts

Графики помогают визуализировать данные и повышают вовлечённость пользователей. Для простых визуализаций можно использовать CSS, для интерактивных и анимированных — библиотеки вроде React-Vis и React Google Charts.

Query-параметры в URL с React Router
Frontend 4 min read

Query-параметры в URL с React Router

Используйте хук useSearchParams из React Router, чтобы сохранять значения поиска в строке запроса URL. Это делает результаты поиска доступными по ссылке, упрощает совместное использование и восстанавливает состояние при перезагрузке.

Выбор даты в React.js — способы и примеры
Frontend 6 min read

Выбор даты в React.js — способы и примеры

Выбор даты в форме повышает удобство и снижает ошибки. Используйте нативный input для простых задач; react-datepicker и react-date-picker — для расширенного UX, учитывайте доступность и локали.

Как установить Python на Android через Termux
Android. 5 min read

Как установить Python на Android через Termux

Установить Python на Android можно через Termux: скачайте APK с F‑Droid, обновите пакеты и выполните pkg install python. Для простых экспериментов подойдёт PyDroid.

Как создать видеоплеер в React
Frontend 6 min read

Как создать видеоплеер в React

В этой статье показаны два подхода: собственный плеер на базе HTML5 + React-хуков и готовые библиотеки (ReactPlayer, react-video-js-player). Приведены рабочие примеры, рекомендации по доступности, производительности, тесты и чек‑лист для запуска в продакшен.

React Router — настройка и лучшие практики
Frontend 6 min read

React Router — настройка и лучшие практики

React Router — это библиотека для маршрутизации в одностраничных приложениях на React. В статье показаны установка, базовая настройка, вложенные маршруты, работа с Link, распространённые ошибки и рекомендации по архитектуре маршрутов.

Поисковая строка в React — создать и оптимизировать
Разработка 4 min read

Поисковая строка в React — создать и оптимизировать

Короткая и отзывчивая поисковая строка в React реализуется с помощью хука useState, методов массива filter/map и простых приёмов оптимизации (debounce, useMemo). Для больших наборов данных лучше использовать серверный поиск или специализированные библиотеки.

Контрольный список паролей в Next.js — реализация
Безопасность 5 min read

Контрольный список паролей в Next.js — реализация

Контрольный список паролей помогает улучшить безопасность и UX: он проверяет требования в реальном времени и показывает пользователю, что нужно исправить. В Next.js можно реализовать его вручную с хук-валидацией или подключить готовую библиотеку (react-password-checklist) — в статье приведены примеры, рекомендации по доступности, локализации и тестированию.

Динамические URL в Django — маршруты для Boma-watch
Django 6 min read

Динамические URL в Django — маршруты для Boma-watch

Django даёт удобный URLconf для создания динамических маршрутов, которые подставляют параметры (id, slug, uuid) в представления. В этом руководстве пошагово показано, как создать модель NeighbourHood, написать представления, добавить динамические URL и шаблоны, а также проверить работу.

Итерирование вложенных массивов в React
Frontend 3 min read

Итерирование вложенных массивов в React

Показано, как проходиться по вложенным массивам в React с помощью метода map. Примеры объясняют плоскую итерацию, итерацию внутри объектов с массивами и лучшие практики: ключи, проверка на null и альтернативы.

Доступный индикатор прогресса в React
Frontend 3 min read

Доступный индикатор прогресса в React

Показываем, как реализовать доступный индикатор прогресса в React с role="progressbar", aria‑атрибутами и адаптивными стилями. Включён чек‑лист тестирования и альтернативы.

Валидация форм в Next.js — методы и лучшие практики
Веб-разработка 5 min read

Валидация форм в Next.js — методы и лучшие практики

Валидация форм гарантирует корректность и полноту данных, вводимых пользователем. В Next.js её можно реализовать встроенными средствами HTML, клиентскими библиотеками (Formik, react-hook-form + Yup) и серверной проверкой. Выберите комбинацию: быстрая встроенная проверка для простых форм и библиотеку + серверную валидацию для надёжности и UX.

Подключение React к Firebase — быстрый гид
Frontend 5 min read

Подключение React к Firebase — быстрый гид

В этой инструкции показано, как установить Firebase в приложение React, зарегистрировать проект в консоли Firebase, инициализировать SDK, протестировать запись в Firestore и обеспечить базовую безопасность. Примеры кода, чек‑лист и советы по безопасности помогут быстро перейти от прототипа к рабочему приложению.

Storybook + Next.js: настройка CSS и изображений
Frontend 6 min read

Storybook + Next.js: настройка CSS и изображений

Storybook позволяет разрабатывать UI в изоляции, но требует настройки CSS/Sass и обработки изображений Next.js. В статье — шаги по инициализации, подключению глобальных стилей, поддержке Sass и применению unoptimized для next/image.

Динамические маршруты в Next.js — руководство
Frontend 5 min read

Динамические маршруты в Next.js — руководство

Динамические маршруты позволяют создавать URL с параметрами без отдельных компонентов для каждой страницы. В Next.js используйте getStaticPaths + getStaticProps для SSG или getServerSideProps для SSR.

Breadcrumbs в React.js: создание и лучшие практики
Frontend 5 min read

Breadcrumbs в React.js: создание и лучшие практики

Хлебные крошки помогают пользователю понять текущее место на сайте и быстро вернуться на уровни выше. В React их можно сделать вручную с помощью react-router-dom или автоматически — с библиотекой use-react-router-breadcrumbs. В статье приведены рабочие примеры, рекомендации по доступности, список ситуаций, где хлебные крошки не нужны, и готовые чек‑листы для ролей.

Боковая навигация в React — Material UI
Frontend 5 min read

Боковая навигация в React — Material UI

В этой инструкции показано, как создать сворачиваемую боковую навигацию в React с использованием react-router-dom и иконок Material UI. Приведены готовые компоненты, CSS-модуль и чек-листы для продакшена.

Firebase + Angular — CRUD с Firestore
Development 8 min read

Firebase + Angular — CRUD с Firestore

Это подробное руководство показывает, как создать Firestore в Firebase, подключить его к Angular и реализовать CRUD-операции с примерами, безопасностью и чек-листами.

Аутентификация Node + PostgreSQL с Passport.js
Аутентификация 6 min read

Аутентификация Node + PostgreSQL с Passport.js

Эта статья показывает, как настроить аутентификацию пользователей в приложении на Node.js с PostgreSQL и Passport.js. Приведены примеры таблицы users, helper-функций, стратегий passport-local и рекомендации по безопасности.

Storybook для React — руководство по компонентной разработке
Frontend 5 min read

Storybook для React — руководство по компонентной разработке

Storybook позволяет разрабатывать и документировать React‑компоненты в отдельном окружении. В этом руководстве вы создадите простую кнопку, добавите истории (stories) с аргументами (args) и научитесь запускать Storybook локально для быстрой визуальной проверки и тестирования состояний компонента.

Как установить Android 13 Beta на телефон
Mobile 5 min read

Как установить Android 13 Beta на телефон

Если вы готовы мириться с возможными ошибками, можно установить публичную бету Android 13 на совместимый Pixel или ряд устройств партнёров. Перед установкой сделайте полную резервную копию, проверьте совместимость и следуйте инструкциям по регистрации или ручной прошивке.

GitBook для документации API — руководство
Документация 6 min read

GitBook для документации API — руководство

GitBook — удобная облачная платформа для создания и хостинга документации API. Она ускоряет совместную работу, поддерживает шаблоны и интеграции с репозиториями и тестовыми инструментами, но не всегда заменяет специализированные порталы для публичных API с продвинутым порталом разработчика.

Smart Downloads в YouTube Music: как включить и управлять
Музыка 5 min read

Smart Downloads в YouTube Music: как включить и управлять

Smart Downloads в YouTube Music автоматически загружают и обновляют офлайн-библиотеку на основе вашей активности. Функция доступна только в мобильном приложении и только для подписчиков Premium; требуется подключение к интернету минимум раз в 30 дней.

Windows не может подключиться к принтеру — исправление
Руководство 8 min read

Windows не может подключиться к принтеру — исправление

Если Windows выдает «Не удается подключиться к принтеру», начните с перезагрузки принтера и ПК, проверьте кабели, перезапустите службу Print Spooler и обновите драйверы. Если не поможет — последовательно проверьте GPO, удалите старые драйверы через pnputil и проанализируйте журнал событий.

Пауза в Node.js: setTimeout, async/await, sleep-promise
Node.js 5 min read

Пауза в Node.js: setTimeout, async/await, sleep-promise

В Node.js нет встроенного sleep, но поставить паузу можно через setTimeout (неблокирующе), async/await с Promise (читаемо) или пакет sleep-promise (удобно). Избегайте busy-wait в продакшне.

Safari 15 IndexedDB: утечка и защита
Безопасность 6 min read

Safari 15 IndexedDB: утечка и защита

В Safari 15 обнаружена ошибка, при которой сайты могли видеть имена баз данных других доменов. Обновите устройства до iOS 15.3; пока не обновились — используйте другой браузер и минимизируйте публичные данные.

Как пользоваться встроенным словарём на Mac
macOS 5 min read

Как пользоваться встроенным словарём на Mac

На Mac можно быстро посмотреть слово через трёхпальцевое касание или Control‑клик и использовать приложение «Словарь» для просмотра нескольких источников и настройки их приоритета.

Spotify AI DJ: как использовать и что ожидать
Музыка 6 min read

Spotify AI DJ: как использовать и что ожидать

Spotify AI DJ использует ИИ для создания персонализированных плейлистов и озвученных комментариев. Проверьте доступность в своём регионе и обновите приложение; взаимодействуйте с треками, чтобы улучшить рекомендации.

Оптимизация списка дел: простые техники
Продуктивность 6 min read

Оптимизация списка дел: простые техники

Короткий и структурированный список дел снижает стресс и повышает эффективность. Ограничьте ежедневные задачи, группируйте их по темам, используйте тайм-блоки и простую систему приоритизации (MoSCoW или матрица Эйзенхауэра). Тестируйте подходы, ведите рефлексию и адаптируйте шаблоны под роль и тип работы.

Поиск вкладок в Chrome, Edge и Firefox
Браузеры 7 min read

Поиск вкладок в Chrome, Edge и Firefox

Современные браузеры Chrome, Edge и Firefox имеют встроенный поиск вкладок, который помогает быстро находить открытые страницы. Используйте горячие клавиши, группы и расширения, чтобы организовать рабочие сессии и уменьшить беспорядок.

Векторизация Procreate в Illustrator — пошагово
Графика 9 min read

Векторизация Procreate в Illustrator — пошагово

Procreate не создаёт векторов. Экспортируйте PNG с слоями, импортируйте в Illustrator, применяйте Image Trace → Expand → правьте линиями → Live Paint → сохраняйте в SVG/AI.

Ограничить общий доступ в Google Drive
Google Drive 4 min read

Ограничить общий доступ в Google Drive

Вы можете запретить скачивание, копирование и печать файлов в Google Drive через «Поделиться» → «Настройки». Эти меры снижают риск утечек, но не защищают от скриншотов и офлайн-копий.

Сброс Windows 11 без пароля администратора
Windows 8 min read

Сброс Windows 11 без пароля администратора

Если вы не можете войти в Windows 11 из‑за забытого пароля администратора, используйте WinRE с экрана входа или чистую установку с загрузочной флешки. WinRE проще и может сохранить файлы; чистая установка надёжнее, но удаляет всё.

Поиск в WhatsApp: сообщения, медиа и ссылки
Мобильные инструкции 4 min read

Поиск в WhatsApp: сообщения, медиа и ссылки

В статье показано, как искать текст, медиа и ссылки в отдельных чатах и по всем беседам WhatsApp, включены пошаговые инструкции, альтернативы и советы по безопасности.

Стандартное отклонение в Excel — как посчитать
Обучение 6 min read

Стандартное отклонение в Excel — как посчитать

Стандартное отклонение показывает разброс значений относительно среднего. В Excel используйте `STDEV.S` для выборки и `STDEV.P` для популяции — через «Вставить функцию» или напрямую в ячейке. Проверяйте выбросы и добавляйте визуализацию.

Как отлаживать Python — практическое руководство
Программирование 8 min read

Как отлаживать Python — практическое руководство

Отладка — это системное устранение ошибок и исследование поведения программы. Начните с чтения сообщения об ошибке и определения строки, используйте логирование, модуль pdb, IDE и модульные тесты. Применяйте пошаговую методику, автоматизируйте тесты и выбирайте инструмент в зависимости от масштаба проекта.

Как векторизовать изображение онлайн
Дизайн 8 min read

Как векторизовать изображение онлайн

В статье разъяснено, как и зачем переводить растровые (пиксельные) изображения в векторные файлы с помощью онлайн-инструментов: обзор 5 сервисов, практическая пошаговая инструкция, матрица выбора и контрольные чек‑листы для дизайнеров и маркетологов.

Как найти MAC‑адрес в Windows
Сеть 6 min read

Как найти MAC‑адрес в Windows

В Windows MAC‑адрес — уникальный идентификатор сетевого адаптера. Быстрее всего узнать его через Командную строку командой ipconfig /all или getmac, через PowerShell командой Get-NetAdapter, а ещё в свойствах сетевого подключения. Меняйте MAC только если понимаете последствия и умеете откатить изменения.