WebDev+ | Веб-разработка

Шпаргалка по проектированию веб систем System Design 101

Подробное руководство по архитектуре веб‑сервисов, которое обязательно стоит сохранить. Это перевод статьи от ByteByteGo опубликованный на Хабре.

Преобразуй свой TypeScript-код в визуальные диаграммы

Этот опенсорсный инструмент позволяет вставить любой TS-файл и мгновенно превратить его в аккуратную визуальную диаграмму всех ваших интерфейсов, типов, классов и связей

Отлично подходит для обучения, понимания новой кодовой базы и объяснения вашей архитектуры кому-то без необходимости что-либо рисовать вручную 👍

GitHub: tsdiagram

Шпаргалка по CSS для начинающих фронтендеров

В одном месте собрали все самые важные темы, которые приходится гуглить во время верстки:

• Flexbox и основные термины
• CSS Grid (grid-row, grid-column)
• min-content и max-content
• Единицы измерения em и rem
• Viewport-единицы
• Работа с осями и адаптивностью

Сохраняем в закладки.

Шпаргалка по Nuxt.js от Vue Mastery: на заметку фронтенд-разработчику

Этот файл подходит для быстрого ознакомления с основными функциями Nuxt.js и может быть полезен разработчикам, которые только начинают работать с фреймворком, а также тем, кто хочет быстро вспомнить ключевые особенности и команды.

CSS Flex развивается: у flex-wrap появилось новое значение.

С balance можно избежать ситуации, когда отдельные элементы остаются висеть в строке, и распределять элементы по рядам более равномерно.

Особенно полезно для сеток карточек, галерей и адаптивных макетов.

Этот скилл превращает ваш проект в архитектурную диаграмму, которую не стыдно показать другим.

Интерактивный HTML с тёмной и светлой темами, анимациями и чётким экспортом в PNG/SVG.

Он также умеет визуализировать рабочие процессы, состояния и последовательности действий:

→ https://github.com/tt-a1i/archify

Библиотеки JS, без которых я уже не могу жить:

🛡 zod → валидация
📅 Temporal → даты
📊 tanstack-table → таблицы
🔐 better-auth → авторизация
🎞 motion → анимации
🔤 fontsource → шрифты
📈 chart.js → графики
🐻 zustand → глобальное состояние
🖱 pragmatic-drag-and-drop → перетаскивание
🧭 nuqs → состояние в URL

Жёсткое заявление:

«ИИ не смог бы написать компилятор TypeScript. Он не может. Мы пробовали».

— Андерс Хейлсберг

Совет по Laravel — фильтрация по связи без whereHas().

Нужно получить только те посты, у которых автор активен?

Для этого можно использовать whereRelation() и отфильтровать родительские модели одной понятной строкой.

Такой код обычно получается короче и читается проще, чем вариант через whereHas().

Можно пойти ещё глубже.

Для вложенных связей Laravel поддерживает точечную запись в запросах на проверку существования связанных моделей.

Например , как на 2 скрине.

CEO увольняет разработчиков, чтобы заменить их ИИ.

Разработчики уходят… и выкладывают в открытый доступ CEO.

Проект называется OpenExecutive и состоит из 8 агентов Claude.

✓ Стратегия, финансы, юристы, HR, операционная работа, маркетинг и другие направления
✓ Использует FastAPI + Next.js

→ https://github.com/SenteLabsAI/OpenExecutive

Проект с открытым исходным кодом превращает любую LLM в 3D-персонажа, который разговаривает, двигается и реагирует прямо в браузере. Без игрового движка и без локальной настройки рендеринга.

У персонажей есть система памяти, которая отслеживает эмоциональное состояние и историю отношений. Поэтому ответы меняются в зависимости от того, что происходило в разговоре раньше, а не только от последнего сообщения.

Всё можно настраивать под себя: менять 3D-модель, промпт личности, LLM или провайдера синтеза речи.

Попробовать можно бесплатно и без настройки. В размещённой версии для старта дают бесплатный доступ к API. Для самостоятельного развёртывания понадобятся собственные API-ключи, зато вы получаете полный контроль и можете изменять проект как угодно.

Проект создан командой Digital Life Project, представленного на CVPR 2024 и SIGGRAPH Asia 2025.

Полностью бесплатно. Открытый исходный код.

HTML только что отобрал у JavaScript ещё одну работу.

command и commandfor входят в Baseline с декабря 2025 года.

Раньше, чтобы открыть диалоговое окно, нужно было писать addEventListener и вызывать showModal().

Теперь это можно сделать прямо в HTML.

Событие unload умирает 😵

Chrome отключает его по умолчанию. Edge идёт по тому же пути.

Начиная с Chrome 154, который выйдет в конце сентября 2026 года, обработчики unload перестанут срабатывать, если сайт явно не включит их обратно.

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