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

Можно сделать sticky-navbar, который меняется при скролле, на чистом CSS — без JS и библиотек анимаций.

header {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

@container scroll-state(stuck: top) {
  .nav-bar {
    max-width: 56rem;
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.92);
  }
}

Теперь браузер сам понимает, когда sticky-элемент «прилип» к верхней границе, и всё срабатывает через один container query. Пока доступно только в Chromium-браузерах — без Firefox и Safari, что, конечно, обидно. @WebDev_Plus

Подготовьте свой сайт к взаимодействию с ИИ-агентами с помощью Lighthouse → https://goo.gle/3ReK3JD Если вы хотите, чтобы ИИ-агенты действительно корректно работали с вашим сайтом, новый экспериментальный аудит в Lighthouse позволяет проверить: - Обнаруживаемость сайта для ИИ-агентов - Интеграцию с WebMCP Доступность для ИИ-систем #GoogleIO @WebDev_Plus

Наконец-то это происходит npm планирует по умолчанию блокировать postinstall-скрипты в одном из будущих релизов. В ближайшее время (через поэтапный rollout) пользователи, скорее всего, начнут сначала получать предупреждения. Ссылка на implementation PR для первой фазы: https://github.com/npm/cli/pull/9360 Ссылка на RFC с описанием всех связанных изменений и трёхфазного плана rollout’а: https://github.com/npm/rfcs/pull/868 Сейчас смержена только Phase 1 для npm v11.16, А вот настоящее блокирование по умолчанию планируется уже в npm v12 (Phase 2), и PR для этого ещё только готовится. @WebDev_Plus

Сегодня узнал, что zsh умеет вызывать функцию для несуществующих команд. Поэтому если добавить это в .zshrc, можно буквально писать prompt’ы прямо в терминал:

command_not_found_handler() {
  codex "$*"
  return $?
}

Теперь любая неизвестная команда будет автоматически отправляться в Codex. Это не очень хорошая идея. @WebDev_Plus

Как frontend-разработчику вырасти в ЗП? День сурка frontend-разработчика выглядит так Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость». И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.

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

#Laravel Tip А вы знали, что Laravel понимает ваши связи между моделями и позволяет писать код намного чище 👇 @WebDev_Plus

Кто-то выложил в open source библиотеку со всеми тех-логотипами, которые вам когда-либо могли понадобиться — в виде чистых, оптимизированных SVG. Называется developer-icons. Вот что в ней есть: → 200+ логотипов технологий (React, HTML, JS, Docker и другие) в виде полноценных компонентов → гибкая настройка размера, цвета и толщины stroke для каждой иконки → масштабирование под любое разрешение без потери качества → встроенные light/dark и wordmark-варианты → поддержка tree-shaking — в bundle попадут только импортированные иконки Больше не нужно копаться в Figma-экспортах или вставлять случайные SVG, найденные на Stack Overflow. npm i developer-icons — импортируете иконку, вставляете в JSX, и готово. Полностью open source. Лицензия MIT. 2.1k звёзд. @WebDev_Plus

Если хотите изучить Python, SQL или Machine Learning, у Kaggle есть бесплатные курсы с сертификатами. Самое приятное — они сразу переходят к сути и подходят для обучения с нуля. Материал объясняется без предположения, что у вас уже есть какой-то опыт. Отличный вариант для старта. Каждый курс занимает всего несколько часов. Благодаря этому можно быстро освоить новую тему без серьёзных временных затрат. Найти их можно на сайте Kaggle в разделе Learn. Ссылку не оставляю — вы и сами знаете, как работают алгоритмы этой соцсети. https://www.kaggle.com/ @WebDev_Plus

Они только что превратили Claude Code, Codex и Cursor в настоящего senior-разработчика. Причём бесплатно. Называется это Superpowers, и проект уже набрал 204 000 звёзд на GitHub. Проблема агентных инструментов на достаточно крупных проектах всегда одна и та же: - Они сразу лезут в код - Отлаживают всё вслепую - Игнорируют тесты - А по мере роста проекта начинают галлюцинировать Superpowers решает эту проблему, навязывая процесс работы senior-инженера: → Сначала брейншторминг, и только потом написание кода → Строгий TDD (Red → Green) без исключений — если теста нет, код удаляется → Параллельная работа через субагентов в изолированных Git worktree → Контекст остаётся под контролем даже во время многочасовой автономной работы Теперь процесс выглядит не как: Промпт → Код → Молиться а как: Brainstorm → Spec → Plan → TDD → Subagents → Review → Ship Ни строчки кода до появления проходящих тестов. Поддерживаются Claude Code, Codex, Cursor, Gemini CLI, OpenCode и Copilot CLI. Полностью Open Source. Лицензия MIT. Теперь вам не нужно писать промпты вслепую. Ваш агент работает как senior-разработчик. @WebDev_Plus

🚨 Обязательно к внедрению 🚨 - Отключите автообновление расширений в VS Code, Cursor и других форках (macOS: Cmd + Shift + P → Disable Auto Updating Extensions) - Используйте статический анализатор zizmor для GitHub Actions, чтобы выявлять потенциальные проблемы безопасности - Используйте actions-up для обновления GitHub Actions до актуальных версий с SHA-pinning - Добавьте Socket Free Firewall или safe-chain при установке npm-пакетов, чтобы снизить риски атак через цепочку поставок (supply chain attacks) @WebDev_Plus

Идеальная настройка лендинг-страницы @WebDev_Plus

Вау, это реально DOM 🤭 (Смотрите, я использую Chrome DevTools, чтобы инспектировать DOM) HTML превращается в <canvas> — это откроет новую эру веб-интерфейсов ИСТОЧНИК @WebDev_Plus

Изучите Clean Architecture, применённую к фронтенду ✓ Использует use case’ы, сервисы и репозитории ✓ Как организованы разные слои ✓ Без классов — всё на функциях ✓ Реализовано на TypeScript https://dev.to/bespoyasov/clean-architecture-on-frontend-4311 @WebDev_Plus

Бро… хватит вручную писать скелетон лоадеры 🦴 Этот опенсорс веб-компонентс автоматически генерирует скелетоны лоадера из твоего реального UI с множеством настроек. → не нужны отдельные skeleton-компоненты → генерирует лоадеры из реальной DOM-структуры → настраиваемый shimmer-эффект и стили → работает с React, Vue, Svelte и другими Твой реальный UI автоматически превращается в загрузочный skeleton :) github.com/Aejkatappaja/phantom-ui @WebDev_Plus

Рад, что наконец появился markdown-редактор для React, который реально ощущается как отполированный 🔥 MDXEditor — редактор в стиле Notion с поддержкой расширенного markdown, MDX, JSX, таблиц, блоков кода и многого другого. → современный опыт редактирования rich-text → высоко настраиваемая система плагинов → создан для React и MDX-workflow → плавный и удобный для разработчиков Идеально подходит для создания документации, блогов, CMS-платформ и инструментов для написания текста :)) github.com/mdx-editor/editor @WebDev_Plus

Жёсткая графическая библиотека для твоего веба 😘 Кастомизируемая, цепляющая и простая в использовании. ✓ компоненты “скопировал-вставил” ✓ React + Tailwind → rosencharts.com @WebDev_Plus

Знаете, что в языке JavaScript можно писать тесты прямо в исходниках Rstest поддерживает тесты прямо в коде — тесты пишутся рядом с реализацией. При сборке для продакшена тестовый код вырезается. Нулевые издержки на бандл. Подход в стиле Раста для удобства разработки, теперь в тулчейне JavaScript 🦀 https://rstest.rs/config/test/include-source #JavaScript #Rstest #Rspack @WebDev_Plus

Сопоставленные типы и обобщённая индексация в TypeScript Форма payload привязана к имени события. Обратился не к тому полю внутри обработчика — получил ошибку компиляции. #TypeScript @WebDev_Plus

🤔 Говорили, что CSS — это просто стилизация Тем временем CSS с :where() и :has() уже выглядит как SQL-запросы. @WebDev_Plus

Напоминание: использовать structuredClone вместо связки JSON.parse / JSON.stringify. Функция широко доступна с марта 2022 года. @WebDev_Plus