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

Мне этот Chrome DevTools теперь абсолютно понятен Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирования, тестирования и анализа веб-приложений. С его помощью можно глубоко изучать DOM, стили, JavaScript, сетевые запросы, оптимизировать производительность и управлять данными пользователя. Хорошая статья. Читайте тут ✌️

А ты знал про заголовок Clear-Site-Data? 👀 Один HTTP-заголовок, который позволяет очистить cookies, хранилище или кэш для твоего сайта. Идеально подходит для реализации logout-флоу Подробнее: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data

Добавь это в основной CSS-файл; приложение от этого точно не сломается, обещаю! Твои юзеры скажут тебе спасибо!

MDN запустила собственный MCP-сервер Теперь AI-агенты для программирования могут напрямую обращаться к актуальной документации MDN и данным о совместимости браузеров. Благодаря этому они генерируют более точные и актуальные ответы по веб-разработке. → официальный MCP-сервер от MDN → доступ к самой свежей веб-документации → работает с Claude Code, Cursor, VS Code и другими инструментами Отличное решение для веб-разработчиков и вайб-кодеров, которые активно используют ИИ при написании кода и хотят, чтобы модели опирались на актуальную документацию, современные практики, рекомендации и свежие данные о совместимости браузеров. :) http://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server

Этот универсальный SEO-скилл для Claude Code включает 25 специализированных скиллов и 18 ИИ-агентов, которые охватывают: → техническое SEO → E-E-A-T → Schema-разметку → GEO — оптимизацию под ИИ-поиск → обратные ссылки → локальное SEO → оптимизацию изображений → и многое другое... Если вы используете Claude Code для разработки или поддержки сайтов, это точно стоит попробовать ✌️

Кубернетес для норм пацанов Автор взял и развернул себе Kubernetes на виртуалке, но сделал это не абы как, а по красоте — с нормальной сеткой, OSPF, Calico и даже BGP Всё пошагово: сначала сеть поднял, потом мастер и воркеры прикрутил, и в итоге три ноды бодро стали в строй. Получилась инструкция «для своих» — без лишних слов, но с кучей полезных деталей.

Предложение Await Dictionary для ECMAScript перешло на Stage 3 в TC39 Сейчас Promise.all возвращает результаты в виде массива, где значения определяются их позициями. Новый метод Promise.allKeyed позволит получать именованные результаты в объекте – это сделает код более читаемым и упростит работу с несколькими промисами

Хотите, чтобы сайт ощущался мгновенно отзывчивым? <script type="speculationrules"> позволяет пререндерить следующую страницу ещё ДО того, как пользователь кликнет по ссылке. Например, когда пользователь наводит курсор на ссылку. Это веб-стандарт. Просто HTML. Без библиотек. Минус: поддержка сейчас около 70% – Safari и Firefox пока не поддерживают. Плюс: если браузер не поддерживает эту возможность, тег просто игнорируется. И всё

Онлайн книга «Total TypeScript Essentials» Если ты хочешь уверенно разбираться в TypeScript эта книга именно для тебя. Matt Pocock простым языком объясняет даже сложные темы: от установки до крутых типовых фишек. С этой книгой ты научишься писать безопасный код, понимать что делает TypeScript под капотом и использовать его возможности по максимуму. 📚 https://www.totaltypescript.com/books/total-typescript-essentials

«SVG Tutorial – How to Code Images with 12 Examples» как писать изображения прямо в HTML Полезное руководство познакомит вас с миром SVG: вы узнаете, как писать изображения прямо в HTML, рисовать простые фигуры, группировать и переиспользовать элементы, добавлять текст и анимацию Практичные примеры шаг за шагом делают материал доступным даже новичкам.

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

Преобразуй свой TypeScript-код в визуальные диаграммы Этот опенсорсный инструмент позволяет вставить любой TS-файл и мгновенно превратить его в аккуратную визуальную диаграмму всех ваших интерфейсов, типов, классов и связей Отлично подходит для обучения, понимания новой кодовой базы и объяснения вашей архитектуры кому-то без необходимости что-либо рисовать вручную 👍 GitHub: tsdiagram

Шпаргалка по CSS для начинающих фронтендеров В одном месте собрали все самые важные темы, которые приходится гуглить во время верстки: • Flexbox и основные термины • CSS Grid (grid-row, grid-column) • min-content и max-content • Единицы измерения em и rem • Viewport-единицы • Работа с осями и адаптивностью Сохраняем в закладки.

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