Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🐸 Библиотека фронтендера #pixel_pause

😳 Stylelint научился проверять типы CSS-переменных Вышла beta плагина CSS Property Type Validator для Stylelint. Он проверяет, соответствует ли значение CSS Custom Property типу, который задан через @property. 🔜 Например, переменная зарегистрирована как цвет:

@property --brand-color {
  syntax: "<color>";
  inherits: false;
  initial-value: rebeccapurple;
}

🔜 А потом её случайно используют там, где ожидается изображение:

.card {
  background-image: var(--brand-color);
}

Плагин может поймать такую ошибку ещё на этапе линтинга — в редакторе, CI или pre-commit. Полезно для проектов с дизайн-токенами и большим количеством CSS-переменных ✅ 🔗 Источник 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack #css

🤔 Вопрос с собеседования Что произойдёт, если на продакшен попадёт невалидный HTML? 👇 Правильный ответ (нажми, чтобы прочитать): Браузер не покажет ошибку и не сломает страницу сразу. Вместо этого HTML-парсер попытается исправить разметку самостоятельно. Из-за этого могут появиться неожиданные проблемы: — изменится структура DOM — CSS-селекторы начнут работать иначе — JavaScript не найдёт нужные элементы — нарушится доступность страницы — появятся различия между браузерами 🟢 Например: <p> Текст <div>Блок</div> </p> По спецификации <div> нельзя вкладывать в <p>, поэтому браузер автоматически закроет абзац: <p>Текст</p> <div>Блок</div> В результате фактический DOM будет отличаться от того, что ожидал разработчик. 🔜 Идеальный короткий ответ: Невалидный HTML обычно не ломает страницу полностью, но браузер может изменить DOM-структуру при парсинге. Из-за этого возникают баги в CSS, JavaScript и доступности. 👍 — знал/а 🔥 — стало понятнее 💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут 🐸 Библиотека фронтендера #career_merge

👩‍💻 Что нового в Safari 27 На WWDC26 показали WebKit для Safari 27: 58 новых возможностей и 525 исправлений. Из важного:

— кастомизируемый <select> без JS-костылей и потери accessibility  
— scroll anchoring: страницы меньше прыгают при lazy-load и динамическом контенте  
— anchor positioning теперь учитывает transform  
— :heading, revert-rule и stretch в CSS  
— sizes="auto" для lazy-loaded изображений  
— полноценные исправления top-level await в ES-модулях  
— WebAssembly JSPI для работы Wasm с JavaScript Promise  
— улучшения Web Inspector: контраст в Color Picker, редиректы в Network, Grid/Subgrid badges  
— <model> для 3D-контента в Safari на iOS, iPadOS и macOS

🔗 Ссылка на блог 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #release_digest #safari

💡 clamp() — адаптивность без медиазапросов clamp() позволяет задать минимальное, предпочтительное и максимальное значение в одной строке:

font-size: clamp(1rem, 2vw, 2rem);

Удобно для: — адаптивной типографики — отступов и размеров блоков — fluid design без лишних @media 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #css

🐸 Библиотека фронтендера #code_challenge

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

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

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

🌐 Что проверить перед релизом сайта Йост де Валк опубликовал открытую спецификацию современного веб-сайта. 🔵 Внутри 128 пунктов по направлениям:

— HTML и семантика — SEO и structured data — Accessibility (WCAG) — Security и CSP — Core Web Vitals — Internationalization — Privacy — Agent Readiness (JSON-LD, RSS, llms.txt, MCP)

Каждый пункт привязан к официальным стандартам W3C, WHATWG, IETF, WCAG и MDN. 🔗 Ссылка 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #blueprint #webdev

🔥 Инженерная методичка по ИИ от Романа Барлоса (Team Lead в Yandex Cloud) Продолжаем делиться экспертизой команды курса «Разработка ИИ-агентов». Роман собрал мастхев-инструменты и ключевые работы для тех, кто хочет выйти за рамки вайбкодинга. 🛠 Полезные инструменты:

• Understand Anything — граф знаний по коду и зависимостям. • DeepTutor — open-source платформа для персонализированного обучения. • Superpowers — набор практик для системной разработки с ИИ. • Awesome Agent Skills — коллекция навыков для ИИ-агентов.

📚  Ключевые работы по LLM:

• Attention Is All You Need (2017) — архитектура Transformer. • GPT-1 (2018) — начало эпохи GPT. • GPT-2 (2019) — решение новых задач без дообучения. • GPT-3 (2020) — обучение на примерах из запроса. • InstructGPT (2022) — RLHF и современные чат-боты.

На курсе Роман выступает консультантом программы: помогает формировать содержание уроков с опорой на актуальные инженерные практики». Занять свое место на потоке: 👉 Курс «Разработка ИИ-агентов»

❓ Зачем нужен :where() в CSS :where() группирует селекторы:

.card :where(h1, h2, h3) {
  margin-block: 0;
}

➡️ Главная польза — нулевая специфичность. Такие правила проще переопределять:

.card h2 {
  margin-block-start: 24px;
}

🔵 Подходит для: — CSS reset — дизайн-систем — базовых стилей компонентов — тем, которые должны легко кастомизироваться :where() задаёт дефолтные правила, но не мешает точечным правкам ниже по CSS. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #css

⌨️ fzf — быстрый fuzzy search прямо в терминале fzf помогает быстро искать и выбирать файлы, команды, директории, процессы и другие данные прямо из CLI. 🔜 Полезно для:

— поиска файлов в проекте — навигации по истории команд — выбора веток Git — интерактивного поиска через ripgrep — быстрых terminal workflows

Инструмент работает как отдельная CLI-утилита и хорошо интегрируется с Bash, Zsh, Fish, Vim и Neovim. 🔗 GitHub 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack #cli

🐸 Библиотека фронтендера #pixel_pause

🎯 Небольшой разбор про Drag & Drop в вебе Механизм перетаскивания давно встроен в HTML5, но о его возможностях знают не все. Большинство сразу тянутся к библиотекам, хотя браузеры уже умеют работать с drag & drop нативно — через несколько простых событий и draggable="true". 🆖 В карточках: как работает стандартный API, какие события использует, где применяется и почему на мобильных приходится подключать альтернативные подходы. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

🔗 CSS или JavaScript: где анимации быстрее В карточках разберём, почему transform обычно работает плавно, margin-left может тормозить, чем Motion отличается от GSAP и когда JS-анимации всё-таки нужны. 🔗 Ссылка на статью 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #under_hood

❕ Из-за этого бандл иногда становится больше ❌ Не злоупотребляйте barrel imports в React ✅ Импортируйте компоненты напрямую Barrel imports — это реэкспорты через index.js или index.ts. Они могут мешать tree shaking и подтягивать лишний код, даже если вам нужен только один компонент. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #hotfix

😎 Знакомьтесь с экспертом Proglib.academy: Senior Software Engineer и Team Lead в Yandex Cloud Роман Барлос Роман — консультант нашего курса «Разработка ИИ-агентов». Он работает на стыке cloud-native архитектуры и AI, активно внедряя современные ИИ-подходы в реальные процессы разработки. За что его ценит IT-комьюнити? 🟣 Team Lead и AI-евангелист в команде UX Yandex Cloud

14-лет в разработке. Занимается AI-адопшеном в команде Yandex Cloud, проводит мастер-классы и продвигает лучшие практики для повышения эффективности разработчиков.

🟣 Техлид Sourcecraft Code Assistant

С сильным практическим бэкграундом принимал участие как технический лид в создании мощного AI-расширения для VS Code.

🟣 Создатель полезного Open Source

Разрабатывает утилиты, которые позволяют быстро начать эксперименты с инференсом и агентами в локальном окружении: например, набор скриптов vllm-setup для быстрого запуска окружения и mini-proxy — минималистичный прокси для OpenAI API провайдеров.

🟣 Автор интерактивных ML-визуализаций

Объясняет сложные концепции наглядно. Создал серию залипательных обучающих материалов, где можно вживую пощупать работу сетей Хопфилда, машин Больцмана и VC-размерности.

Роман регулярно делится инженерными наработками, инсайтами и экспертизой в своем авторском Telegram-канале На курсе Роман выступает консультантом программы: он помогает формировать содержание уроков с опорой на актуальные инженерные практики и жесткие требования индустрии. Узнать больше о программе и разработке автономных систем: 👉 Курс «Разработка ИИ-агентов» Так, продолжаем знакомить вас с командой? 👍 — Да, ждем новых лиц 🔥 — Жду полезные материалы от Романа

🐸 Библиотека фронтендера #pixel_pause