🌐 Упрощенный синтаксис написания CSS range поддерживается во всех современных браузерах с марта 2023 года.

Вместо

@media screen and (max-width: 359px) { }
@media screen and (min-width: 360px) { }
@media screen and (min-width: 1100px) and (max-width: 1320px) { }

используем:

@media screen and (width < 360px) { }
@media screen and (width >= 360px) { }
@media screen and (1100px <= width <= 1320px) { }

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

В комментариях под постом наш подписчик спросил:

А кто сейчас вообще пишет на Redux? Если только легаси какой-нибудь приходится править...

💬 А вы используете Redux в современных проектах? Может когда-нибудь портировали легаси на Redux? Поделитесь опытом в комментах 👇

🐸 Библиотека фронтендера #междусобойчик

✏️☑️ Пиши на JavaScript правильно: лучшие практики разработки в 2025 году

JavaScript постоянно развивается: с каждым годом в нем появляются новые возможности, а устаревшие подходы уступают место более эффективным решениям. В этой статье мы рассмотрим ключевые современные практики, которые помогут вам писать чистый, надежный и производительный JavaScript-код.

➡️ Читать статью
➡️ Зеркало

🤔 Ох уж эти тимлиды...

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

🎧 465-й выпуск подкаста «Веб-стандарты»

Кого слушаем: Андрей Мелихов, Никита Дубко, Вадим Макеев, Алексей Симоненко.

⏱️ Таймкоды:

00:01:46 Firefox 136
00:28:48 Chrome 134
00:45:29 Chrome DevTools
00:58:12 HTTP 3 и QUIC в Node.js
01:13:04 Стилизация форм
01:31:55 Ненужные стили для h1
01:37:06 Ответы на вопросы

▶️ Сайт подкаста

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

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

👩‍💻 10 лучших библиотек для разработки React-приложений в 2025 году

Представляем подборку библиотек, необходимых для создания современных приложений на React. Независимо от того, работаете ли вы над панелями управления, таймлайнами, функциями перетаскивания или управлением API, они сэкономят ваше время и усилия.

➡️ Читать статью
➡️ Зеркало

🔝 Как расти во фронтенде

Чтобы стать джуном, достаточно знать основы HTML и CSS, синтаксис и конструкции JavaScript, понимать устройство DOM, освоить один из популярных фреймворков и базовые команды Git, а также разобраться с инструментами отладки кода в браузере.

💬 А как происходит дальнейший рост? Поделитесь в комментариях своим опытом👇

🐸 Библиотека фронтендера #междусобойчик

🔥 Дайджест новостей за неделю: свежие анонсы и ключевые обновления во фронтенд-разработке с упором на JavaScript

❣️ Компилятор TypeScript станет в 10 раз быстрее. Команда TypeScript в Microsoft планирует портировать текущую кодовую базу на Go и к середине 2025 года представить нативную реализацию tsc с возможностью проверки типов в командной строке, а к концу года — полноценное решение для сборки проектов.

❣️ Refractor 5.0: надежное виртуальное выделение синтаксиса с помощью Prism — использует мощный синтаксический анализатор Prism для вывода объектов вместо строки HTML, чтобы вы могли манипулировать и отображать их по своему усмотрению (например, в VDOM или в терминале). Lowlight, от того же автора, предлагает ту же функциональность, но основан на highlight.js.

❣️ Node.js v20.19.0 (LTS) — примечательный выпуск для ветки поддержки Node, т. к. было сделано исключение из политики поддержки для обратной совместимости require(esm). Теперь она включена по умолчанию.

❣️ Последняя версия Chrome (и предварительные версии Firefox и Safari) поддерживает два новых HTML-атрибута, command и commandfor, для добавления декларативных действий к HTML-кнопкам без непосредственного использования JavaScript.

❣️ Nuxt 3.16 — популярный метафреймворк Vue. Теперь с новым инструментом create-nuxt для запуска проектов.

❣️ Bun 1.2.5 — теперь с гораздо лучшей совместимостью с Node-API, генерацией и проверкой CSRF, а также многочисленными улучшениями и исправлениями.

❣️ Melange 5 — компилятор OCaml в JavaScript.

❣️ Gleam 1.9 — типобезопасный язык функционального программирования, ориентированный как на виртуальную машину Erlang, так и на рантайм JavaScript.

❣️ <css-doodle> 0.42 — веб-компонент для рисования узоров с помощью CSS.

❣️ Faker 9.6 — создавайте вымышленные данные в любых количествах.

❣️ Choices 11.1 — настраиваемый плагин для выбора/ввода текста.

❣️ Spacetime 7.8 — облегченная библиотека часовых поясов.

❣️ Ink 5.2 — используйте React для создания CLI-приложений.

❣️ Astro 5.5, Transformers.js 3.4, Capacitor 7.1, Nuxt UI 3.

🐸 Библиотека фронтендера #свежак

🚀 Оптимизация ленивой загрузки видео с автозапуском

Убираем лишнюю автозагрузку видео и включаем только тогда, когда пользователь его видит. Это ускоряет производительность и уменьшает потребление трафика без ухудшения UX.

🔗 Источник

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

👩‍💻 Selectel выпустил бесплатный базовый курс по JavaScript

В Академии Selectel появился бесплатный курс для желающих освоить JS: «Основы JavaScript: от переменных до функций». Все обучающие материалы доступны бесплатно, регистрироваться и оставлять свои данные не нужно. На изучение курса уйдет около полутора часов.

➡️ С чего начать изучение:

🟡 Как использовать типы данных в JavaScript? Переменные, ввод и вывод информации

🟡 Функции в JavaScript: учимся писать структурированные программы

🟡 Как создавать HTML-элементы в JavaScript

🐸 Библиотека фронтендера #свежак

💡Шпаргалка для изучения разницы между Object.seal и Object.freeze в JavaScript

🔗 Источник

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

😧 58% IT-специалистов страдают: психология успеха и борьба с синдромом самозванца

Синдром самозванца — не просто модный термин, а реальная проблема, с которой сталкиваются даже опытные разработчики. Почему так происходит и как с этим бороться? Разбираемся в причинах «стандартной болезни айтишников»

➡️ Читайте в статье

Спойлер: дело не в навыках, а в психологии успеха

🐸Библиотека шарписта

💬 Как оставлять комментарии в чате нашего канала

В нашем чате работает бот Shieldy — он защищает от спама, запрашивая у новых участников решение простой капчи.

⚠️ Проблема, с которой сталкиваются многие: вы нажимаете под постом «Прокомментировать», пишете что-то, а потом получаете бан и не можете писать комментарии.

❓Почему так: Shieldy отправляет капчу в сам чат, а не в комментарии под конкретный пост. Из-за этого капчу можно не увидеть, не отправить ответ на нее, и бот автоматически заблокирует вас.

✅ Как присоединиться к чату, чтобы бот вас не забанил

— Зайдите в описание канала с телефона и нажмите кнопку Discuss / Чат
— Нажмите Join / Присоединиться
— Сразу обратите внимание на сообщение от бота Shieldy
— Решите простой пример и отправьте ответ в чат

После этого бот отправит приветственное сообщение и вы сможете оставлять комментарии. Эту проверку нужно пройти только один раз при вступлении в чат.

❗️ Если вас все-таки забанили

— Это временная блокировка на несколько минут
— Подождите и попробуйте зайти позже, бот снова отправит вам капчу

Админы канала никак не могут ускорить процесс, бот автоматически снимает с вас блокировку через пару минут. Мы понимаем, что эта система неидеальна, и ищем более удобное решение.

👾 Спасибо, что активно участвуете в обсуждении наших постов!

🧑‍💻 Пошаговый гайд для фронтенд-разработчика

Ниже описали первичные этапы разработки API, а полностью гайд читайте здесь 👈

✳️ Создание проекта:

npx create-next-app@latest --api

Флаг --api автоматически добавит файл route.ts в директорию app/ с примером создания API-эндпоинта.

✳️ Различия между Pages Router и App Router:

— Pages Router (pages/api/*) — старый метод, использует Node.js API.
— App Router (по умолчанию) — новый метод, использующий стандарты Web API (Request/Response).

Почему новый лучше? Он работает на веб-API, а не на специфичных для Node.js инструментах; упрощает изучение, снижает зависимость от Express-подобных решений

✳️ Основные кейсы использования API в Next.js:

— Публичный API для разных клиентов (веб, мобильные приложения).
— Прокси к бэкенду — скрытие внутренних сервисов за единым API.
— Прием вебхуков (например, Stripe, GitHub, Twilio).
— Аутентификация — работа с токенами, сессиями.

Если вам нужно просто получать данные в Next.js, можно использовать Server Components вместо создания API.

✳️ Создание API в App Router. В app/ создайте директорию api/users/ и внутри route.ts:

app
└── api
    └── users
        └── route.ts

☝️ Теперь можно экспортировать обработчики для разных HTTP-методов.

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

💬 А ваш? Пишите в комменты 👇

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

📝 Промпт для создания анимированных карточек погоды

Сколько раньше требовалось времени, чтобы сверстать анимированные карточки с примера выше? Зависит от многих факторов, но сейчас это можно сделать за минуту.

Простой промпт для Claude Sonnet 3.7:

Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.

⚡️ Как вам? Делитесь в комментариях👇

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

🔤💫 Текст, который «вау»

Ваш текст может быть намного круче, чем просто слова на экране! В статье собрали 28 CSS-анимаций, которые превратят обычные буквы в главную фишку вашего сайта.

🔗 Читать статью
🔗 Зеркало

🧑‍💻 Что, по вашему мнению, должен изучать фронтендер в 2025 году?

🔘Какие технологии вы считаете основными для фронтендеров в 2025 году?
🔘Какие новые инструменты или фреймворки стоит освоить?
🔘Какие языки и библиотеки должны быть в арсенале каждого фронтендера?

💭 Поделитесь мнением и опытом👇

🐸 Библиотека фронтендера #междусобойчик

👩‍💻 Подборка полезных расширений VS Code для фронтенд-разработчика

🟡Auto Rename Tag
🟡Auto Close Tag
🟡Autoprefixer
🟡Code Spell Checker
🟡CSS Peek
🟡DotENV или ENV
🟡Console Ninja
🟡Nested Comments
🟡Highlight Counter
🟡Error Lens
🟡ESLint
🟡File Utils
🟡GitLens
🟡HTML Boilerplate
🟡HTML CSS Support
🟡Import Cost
🟡Live Server
🟡Markdown Preview Enhanced
🟡Path Intellisense
🟡Prettier
🟡Project Manager
🟡REST Client
🟡Trailing Spaces
🟡Turbo Console Log
🟡Version Lens
🟡Angular Language Service
🟡ES7/React/Redux/React Native snippets
🟡Docker

💬А какие ваши любимые расширения? Делитесь в комментариях👇

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