Web skills. Frontend. Уроки по веб-разработке

🌳 Каждый Ethernet-коммутатор в мире до сих пор использует алгоритм, который Рада Перлман придумала в 1985 году. Её разработка — Spanning Tree Protocol (STP) — решила одну из самых опасных проблем сетей: петли. Если соединить коммутаторы в несколько путей, пакеты могут начать бесконечно ходить по кругу, создавая шторм и ломая всю сеть. Перлман придумала способ превратить любую сложную топологию в дерево без циклов: «Сначала выбирается корень. Затем каждый узел оставляет самый дешёвый путь к нему. Остальные связи блокируются». Но самое необычное — её научная статья 1985 года начиналась не с обычной аннотации, а со стихотворения. «I think that I shall never see a graph more lovely than a tree…» Это был не просто красивый текст. Стих буквально описывал работу алгоритма: выбор корневого узла, поиск кратчайших путей и построение бесциклового дерева. Рада Перлман позже получила прозвище «мать интернета» за вклад в сетевые технологии. Иногда самые важные алгоритмы в истории начинаются не с формул, а со стихов.

Extend UI — опенсорсная библиотека React-компонентов для приложений, которые активно работают с документами. В ней есть готовые компоненты для просмотра PDF, DOCX, XLSX и CSV, загрузки и навигации по файлам, работы с цитатами, электронными подписями, разделения документов и других сценариев. Компоненты распространяются по лицензии MIT, поддерживают кастомизацию и могут подключаться к проекту через registry в стиле shadcn. https://github.com/extend-hq/ui

https://cssreference.io/

Совет по CSS: Единица измерения turn Иногда проще задать вращение с помощью единицы turn вместо deg, особенно когда нужно указать значение больше 360 градусов (1 turn = 360 deg)

Альтернатива Firebase и Supabase Называется PocketBase. Бесплатный и с открытым исходным кодом. ✓ Аутентификация и загрузка файлов ✓ Реалтайм-база данных ✓ Встроенная админ-панель Есть SDK для JavaScript. Хостите где угодно! → http://pocketbase.io

Наткнулся на полезный инструмент: визуальный редактор разметки на гридах и флексах Выбираешь шаблон, подгоняешь под себя, сразу правишь и HTML, и CSS. Всё интерактивно: с превью и подсказками по свойствам Забираем в закладки 👍

Неопределенный чекбокс Когда у нас есть главный чекбокс в таблице или древовидной структуре чекбоксов, нужно отображать его в состоянии неопределенности, если выбраны только некоторые записи Просто сделайте это, установив свойство indeterminate чекбокса в true: checkboxEle.indeterminate = true; Мы можем изменить стиль неопределенного чекбокса с помощью псевдокласса :indeterminate

Этот календарный компонент выглядит очень стильно Гибкая и функционально насыщенная библиотека календаря от "Juncai Li", которая работает с React, Vue, Angular и Svelte. → несколько режимов отображения (день, неделя, месяц, год) → поддержка drag-and-drop → архитектура на основе плагинов → высокая степень кастомизации Отлично подходит для разработки приложений с расписанием или бронированием без необходимости писать всё с нуля GitHub: calendar

Сайт для прокачки алгоритмов — визуальный тренажёр с пошаговым выполнением кода 70+ алгоритмов на JavaScript, Java и C++, всё интерактивно и с наглядной визуализацией https://algorithm-visualizer.org/

Перестань вручную делать skeleton-лоадеры Boneyard — это новый фреймворк, который автоматически генерирует skeleton-экраны прямо из существующих UI-компонентов, так что тебе не нужно проектировать их самому. → без ручного дизайна → соответствует реальному лейауту → работает с React, Svelte, React Native → мгновенно генерирует лоадеры По сути, он автоматически превращает твой реальный UI в состояния загрузки ✌️ GitHub: https://github.com/0xGF/boneyard

Управляй портами localhost как ПРО Port-Whisperer — это удобный CLI-инструмент, который показывает, что запущено на твоих портах, и помогает управлять лишними процессами. → вывести список всех активных портов → посмотреть, какое приложение использует каждый порт → завершать процессы на неиспользуемых портах → мониторить порты в реальном времени Больше никакого гадания, что там крутится в фоне 🙂

В Google Chrome 148 позиционирование sticky теперь работает независимо по осям Это значит, что можно делать sticky-элементы, которые отслеживают разные скролл-контейнеры по разным осям. Подробнее в статье: https://www.bram.us/2026/03/30/css-sticky-per-axis/

Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Cвойство работает только в комбинации вспомогательных свойств: .text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; overflow: hidden; } Поддержка свойства составляет 97.21%

Не забывай вовремя отменять fetch-запросы Если этого не делать, вызовы будут висеть в состоянии pending бесконечно (или пока их не завершит что-то извне), и твой UI, скорее всего, зависнет. Для более простого решения используйте AbortSignal.timeout

Cloudflare анонсировала духовного наследника WordPress! Новая CMS, построенная на Astro и TypeScript. ✓ Безопасна по умолчанию. Плагины изолированы в sandbox ✓ Есть CLI, MCP и изначально рассчитана на работу с AI-агентами ✓ Простое развертывание в Cloudflare или Node.js $ npm create emdash https://blog.cloudflare.com/emdash-wordpress

Совет по HTML 💡 Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩