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

Совет: используйте разные favicon для окружений dev, preview и prod. Так вы сможете с первого взгляда отличать вкладки браузера друг от друга и не окажетесь в ситуации, когда случайно открыли prod и пытаетесь понять, почему ваши изменения в коде «не применились». Чтобы сделать это в Next.js, поместите favicon.ico, favicon.preview.ico и favicon.development.ico в папку public/, а затем переписывайте только запросы к /favicon.ico, если VERCEL_ENV не равен production. Никаких дополнительных маршрутов; в production ничего делать не нужно (no-op). @WebDev_Plus

Распространённые стратегии балансировки нагрузки: - Round Robin (Круговой): Запросы отправляются серверам последовательно в повторяющемся цикле. - IP Hash (Хеш IP): Использует IP-адрес клиента для постоянной маршрутизации запросов к одному и тому же серверу. - Least Connections (Наименьшее число соединений): Новый трафик направляется на сервер с наименьшим количеством активных сессий. - Least Response Time (Наименьшее время отклика): Выбирается сервер, который в данный момент отвечает быстрее всего. - Least Bandwidth (Наименьшая пропускная способность): Маршрутизирует трафик на сервер с наименьшей сетевой нагрузкой. Основная цель проста: обеспечить скорость, доступность и устойчивость приложений. @WebDev_Plus

Open-source библиотека motion-эффектов — Kinetics теперь содержит 99 анимаций. - CSS + React версия - Промпт-версия для вашего AI-кодинг-агента http://kinetics.colorion.co @WebDev_Plus

⚡️ Валидация строковых паттернов с помощью template literal types в TypeScript #TypeScript @WebDev_Plus

Обязательно используйте правильные семантические элементы в вашей HTML-разметке 🚀 @WebDev_Plus

Совет: не каждая ошибка требует сообщения. Иногда достаточно намёка. @WebDev_Plus

Совет для инженеров по проектированию интерфейсов: Не блокируйте ввод при достижении лимита символов. Блокируйте отправку. Дайте пользователям закончить свою мысль. @WebDev_Plus

Совет по Design Engineering: Одно CSS-свойство отвечает за большинство уродливых анимаций раскрытия. Это height: auto. Замените его на: grid-template-rows: 0fr → 1fr; @WebDev_Plus

Что из мира БД я бы изучил, чтобы глубоко понять масштабирование: Сохраните. - B+ Trees - LSM Trees - Write-Ahead Logging - Two-Phase Commit - Three-Phase Commit - Read Replicas - Leader-Follower Replication - Partitioning (Шардирование) - Query Caching - Secondary Indexes - Vector Indexes (FAISS, HNSW) - Distributed Joins - Materialized Views - Event Sourcing - Change Data Capture (CDC) @WebDev_Plus

Узнайте, как команды VS Code и TypeScript совместно внедряли TypeScript 7 в VS Code. Результат: более быстрая сборка, более быстрая итерация и улучшенный повседневный опыт разработки. Подробнее: https://code.visualstudio.com/blogs/2026/06/26/iterating-faster-with-ts-7 @WebDev_Plus

Скоро: PHP-порт популярной JavaScript-библиотеки Chrono Разработчик анонсировал PHP-порт одной из самых популярных JavaScript-библиотек — Chrono. Проект не использует LLM для парсинга: вся обработка выполняется исключительно средствами PHP. Релиз ожидается уже скоро. @WebDev_Plus

📌 Шпаргалка по API-заголовкам Заголовки API несут метаданные, обеспечивающие безопасную и эффективную коммуникацию. - Authorization — отправка токенов доступа безопасно - Content-Type — определение формата тела запроса - Accept — указание ожидаемого формата ответа - User-Agent — идентификация клиентского приложения - Cache-Control — управление кешированием - Origin — поддержка валидации CORS - Cookie — отправка информации о сессии - Accept-Language — установка языковых предпочтений Понимание заголовков API помогает создавать более быстрые, безопасные и надёжные приложения. @WebDev_Plus

Недавно в Symfony приняли патч по безопасности, который закрывает классическую дыру — инъекцию заголовков через email. Проблема выглядела просто: если в адрес электронной почты добавить символы перевода строки (CRLF), можно «разорвать» SMTP-заголовки и вставить дополнительные поля вроде Bcc или даже сырые команды. Решение внесли в Mime-компонент: теперь он отбрасывает любые управляющие символы в адресе, не только переносы строк, а весь диапазон 0x00–0x1F и 0x7F. Вывод простой: email-адрес — это данные, а не строка для интерпретации. Проверка должна быть строгой, без попыток «починить» ввод на лету. @WebDev_Plus

Когда-нибудь разбирался, что такое OKLCH-цвета и как они работают, или просто хотел использовать их в проекте? Можно использовать /oklch-skill — он конвертирует цвета, генерирует палитры, проверяет контраст, помогает с миграцией и другими задачами. Установка:

npx skills add jakubkrehel/oklch-skill

@WebDev_Plus

День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

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

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFGwbviu ИП Галактионов Тихон Витальевич, ИНН 771618975809

Brutal SEO Extension for Web Programmers Новый инструмент для веб-разработчиков — расширение, которое проверяет страницу и показывает проблемы прямо по месту. Что умеет: → находит ошибки на странице → детектит битые ссылки → подсказывает, что стоит улучшить для SEO Подходит для быстрого аудита без лишних панелей и отчётов. Демо: http://metaexplorer.co @WebDev_Plus

Почти 15 000 запросов/сек на скомпилированном PHP. Сегодня Elephc делает первый шаг в мир веб-серверов. ⭐️ Скачайте v0.25.2, попробуйте и не забудьте поставить звезду на GitHub, если хотите поддержать разработку. https://github.com/illegalstudio/elephc На базе Tokio и Hyper, Elephc v0.25.2 теперь может компилировать PHP-приложения в высокопроизводительные веб-серверы. Это ранняя веха, но будущее выглядит захватывающе! #php #rust #opensource #webdev #performance @WebDev_Plus

Встроенные хелперы тестов, хоть и удобны, добавляют когнитивную нагрузку: логика подготовки вынесена за пределы теста, и приходится прокручивать к началу/концу файла, чтобы понять, что именно настраивается для прохождения теста. Первый тест выглядит читаемым, но всё важное скрыто: что на самом деле создаёт makeIncompleteProfile()? Какие поля пусты? Что настраивает makeImportService()? Чему должен соответствовать замокированный lookup? Если классы или модели должны быть в определённом состоянии для группы тестов, читателю гораздо легче понять, как создаётся объект, через фабрики и фейки, а не через уникальные вынесенные функции, разбросанные по каждому тесту. Это, конечно, приводит к дублированию логики подготовки в каждом тесте (виден компромисс), но читать каждый тест по отдельности значительно проще, потому что весь его контекст изолирован — не нужно выходить за пределы теста в несколько мест, чтобы полностью понять, как всё настроено. Хочу также обратить внимание на границы скриншотов (они намеренные). Они показывают, сколько контекста можно реально охватить за раз при чтении одного теста. Когда подготовка спрятана за хелперами, тест может выглядеть чище, но читателю приходится выходить за пределы видимой области, чтобы понять состояние, которое проверяется, а затем возвращаться обратно в тест, иногда по нескольку раз. Это разрушает ясность, которая была бы, если бы нужно было просто скроллить по вертикали, как при чтении книги. @WebDev_Plus

Хороший UX + меньший показатель отказов. Беспроигрышный вариант. 📈 @WebDev_Plus

Представляем effect-typed-id. Это напоминание, что ID — это UI. https://github.com/just-be-dev/effect-typed-id @WebDev_Plus