FrontEndDev

Интерактивная игра для изучения CSS anchor positioning 40 уроков для изучения основ и продвинутых техник при работе с anchor positioning. https://anchoreum.com/#ru

CSS Multi-Column Layout Возможности CSS для создания макетов с колонками, как в газетах или журналах. Основные свойства, преимущества, ограничения и практические примеры применения Multi-Column Layout. https://css-tricks.com/revisiting-css-multi-column-layout/

SVG в React и зачем вам BFF: подъехали доклады с «Я💛Фронтенд» На прошлых выходных прошла конференция Яндекса для фронтенд-сообщества. Посмотреть все выступления можно в записи трансляции. О чём говорили: — «Антология полезностей в TypeScript»: рассказали, как повысить типобезопасность вашего кода — «Нативные поповеры с Popover API»: как работать с вебом без JS и что там с поддержкой Popover API —«Логируем МНОГО!»: посмотрели на разные инструменты дебага и логирования Перед ивентом Сергей Бережной и другие участники записали подкаст о том, как переписать отдельные части кода так, чтобы он был «красивым», производительным, коротким или, наоборот, витиеватым.

F.I.R.S.T принципы в тестировании Улучшаем качество и эффективность тестов с применением принципов F.I.R.S.T. — вводная статья с примерами. https://jsdev.space/first-principles-testing/

Задержки в Event Loop Как возникают задержки в Event Loop и как они влияют на производительность NodeJs приложений. А также способы их мониторинга и устранения. https://trigger.dev/blog/event-loop-lag

Interop 2025 Еще один год новшеств и улучшений веб платформы. На что будет основной упор в 2025? https://web.dev/blog/interop-2025

WebSocket и Socket.IO: в чем разница? Основные различия между WebSocket и библиотекой Socket.IO: функциональность, удобство использования и идеальные сценарии применения. Из преимуществ Socket.IO: поддержка автоматического переподключения и возможность работы с несколькими протоколами. https://jsdev.space/websocket-socketio/

🍳 — Чем ты занимаешься? 💻 — Айтишник. 🍳 — А в свободное время? 💻 — Делаю лучший скрэмбл в мире. В 5-ти новых сериях «Люди Битрикс» разработчики рассказали, как находят баланс между кодом и любимыми хобби. Кто-то варит идеальный кофе, кто-то тренируется в бассейне, а кто-то знает, какой связать милую игрушку 😍 ⚡Заходите смотреть!

Работа с Context API в React Обзорная статья о том, как Context API помогает управлять состоянием приложения и шарить данные между компонентами без необходимости передавать их через props. Примеры использования Context API https://blog.logrocket.com/react-context-tutorial/

Условные типы в TypeScript Как использовать условные типы для упрощения кода и повышения его гибкости + примеры использования условных типов в различных сценариях программирования https://2ality.com/2025/02/conditional-types-typescript.html

TTFB и его значимость для производительности Cтратегии для улучшения TTFB и общей скорости загрузки страниц с учетом различных факторов. https://smashingmagazine.com/2025/02/time-to-first-byte-beyond-server-response-time/

🚀Приглашаем на бесплатный урок «React и графические библиотеки: визуализация данных» от онлайн-курса React.js Developer 20 февраля 19:00 (мск). Что будет на вебинаре? - Обзор популярных графических библиотек для React. - Установка и настройка необходимых зависимостей в проект React. - Примеры визуализации данных. Кому вебинар будет полезен? - React разработчикам, работающим с аналитикой и данными. - Разработчикам, желающим улучшить UI своих приложений. - Командам, внедряющим инструменты для анализа и представления данных. Что узнают участники вебинара? ✅Как визуализировать данные в React. ✅Как интегрировать визуализации в существующие приложения. ✅Как создавать интуитивно понятные и привлекательные визуализации для пользователей. ⏰ Успейте зарегистрироваться на бесплатный вебинар 20 февраля 19:00 (мск). Запись ограничена: https://otus.pw/0MOJ/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Пишем более чистый и понятный код с eslint-plugin-de-morgan Плагин предлагает правила для преобразования логических выражений, чтобы избежать избыточных операторов и улучшить читаемость https://github.com/azat-io/eslint-plugin-de-morgan

Flexbox Labs Удобный генератор лейаутов с grid и flexbox элементами. Можно выбрать готовый вариант или тыкать и смотреть как применяются свойства для контейнера и вложенных элементов. https://flexboxlabs.netlify.app/ Github: https://github.com/prazzon/flexbox-labs

Оптимизируем Critical Rendering Path О том, что такое Critical Rendering Path и о методах ускорения загрузки и отображения контента: минимизация CSS, JavaScript и оптимизация порядка загрузки ресурсов. https://www.debugbear.com/blog/optimizing-the-critical-rendering-path

Архитектура фронтенда на основе вертикальных слайсов Как вертикальные слайсы могут помочь в масштабировании проекта и управлении сложностью приложения. Еще один взгляд на архитектуру фронтенд приложений. https://amorgunov.com/posts/2023-05-28-vertical-sliced-architecture-in-frontend/

Друзья! 15 февраля состоится крупнейшая конференция Яндекса для frontend-сообщества — «Я 💛 Фронтенд». Что вас ждёт: 💛 Интересные доклады — ведущие эксперты индустрии поделятся своим опытом и лайфхаками. 💛 Code in the Dark — вместе с Семёном Левенсоном из Яндекс Маркета поучаствуете в соревновании по вёрстке и узнаете, как интеллектуальный помощник разработчика Yandex Code Assistant меняет правила игры. 💛 CodeRun — вместе с Никитой Дубко и Сашей Шинкевич из Контеста Яндекса познакомитесь с тренажёром для прокачки навыков разработчика. Это интересный формат решения задач, где нужно управлять котиком Кодеруном. Он ловит спецсимволы в свой рюкзак, и на их основе вы пишите код. Еще будут дискуссии с экспертами Яндекса, выступления опытных спикеров, соревнования по вёрстке и решение задач с Yandex Code Assistant. И это ещё не всё! Следите за обновлениями на сайте до 14 февраля — в онлайне вас ждёт много движа! Программа мероприятия и регистрация тут Не пропустите! 🚀

Релиз Vitest 3.0 Новые функции и улучшения: высокая скорость выполнения тестов и улучшенная поддержка TypeScript https://vitest.dev/blog/vitest-3

Используем TypeScript и TensorFlow для обучения модели Пошаговые инструкции по процессу настройки окружения, подготовке данных и созданию модели на основе библиотеки TensorFlow https://wanago.io/2025/02/03/machine-learning-typescript-tensorflow-training-first-model/

Ключ к стабильному деплою: npm ci Короткая статья о том, почему важно использовать команду npm ci для обеспечения стабильного деплоя и как npm ci помогает избежать проблем в продакшн, обеспечивая точное совпадение зависимостей и оптимизацию установки пакетов. https://dev.to/impranavkale/avoiding-production-disasters-with-npm-ci-the-key-to-stable-deployments-47ib