👍 Пасхалки для вашего пет-проекта

Нашли забавную JavaScript-библиотеку easter-egg-collection, которая добавляет на сайт десятки скрытых анимаций и эффектов.

Достаточно подключить библиотеку и ввести секретное слово вроде:

unicorn 🦄
mario 🎮
pikachu ⚡
nyancat 🌈
sonic 💨

После этого на странице появится соответствующая анимация или персонаж.

🔗 GitHub

📍 Навигация: [Вакансии]

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

#stack

💡 Совет для начинающих фронтендеров

Нужно проверить, как блок будет выглядеть в другом месте страницы? Не спешите открывать редактор и менять HTML.

🔤 В Chrome, Firefox, Edge и Safari можно просто перетащить элемент в дереве DOM прямо в DevTools.

Это удобно для быстрой проверки:

— как изменится вёрстка
— влияет ли родительский контейнер на элемент
— не ломаются ли стили после перестановки
— где именно находится проблема в разметке

❗️ Частая ошибка джунов — менять код, пересобирать проект и обновлять страницу ради каждого эксперимента. DevTools позволяют проверить идею за несколько секунд.

📍 Навигация: [Вакансии]

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

#readme #devtools

🚀 Node-RED 5.0 вышел с большим обновлением редактора

Обновили сайдбары, добавили встроенную тёмную тему, улучшили доступность, панорамирование, зум и отображение выбранных нод.

Из полезного:

🟢 можно разделять сайдбары и держать несколько панелей открытыми
🟢 Debug-панель теперь можно ставить на паузу
🟢 Function node умеет вызывать Link nodes через node.linkcall()
🟢 появились GitHub-style alerts в Markdown
🟢 добавили больше TLS-настроек и усилили authentication
🟢 минимальная версия Node.js теперь 22.9.0, рекомендуется Node.js 24

📎 Ссылка на блог

📍 Навигация: [Вакансии]

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

#release_digest

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

#pixel_pause

🤯 А что если все заголовки внутри компонента будут h1

В Firefox Nightly появился экспериментальный атрибут headingoffset, который автоматически повышает уровень вложенных заголовков.

Пример:

<section headingoffset="1">
  <h1>Новости</h1>
</section>

Для браузера такой заголовок станет h2. Если вложить ещё один контейнер с headingoffset="1", следующий h1 уже будет восприниматься как h3.

🔜 Зачем это нужно:

🟢 для переиспользуемых компонентов
🟢 для Web Components
🟢 для CMS, где редакторы не должны думать о структуре документа
🟢 для автоматического построения корректной иерархии заголовков

Сейчас функция доступна только в Firefox Nightly за флагом dom.headingoffset.enabled, но идея интересная: компонент сам остаётся независимым от контекста страницы, а уровень заголовка определяется местом использования.

🔗 Источник

📍 Навигация: [Вакансии]

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

#readme #html #a11y

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

#code_challenge

💡 CodePen теперь может выступать полноценным хостингом для ваших проектов

Любой Pen из нового редактора можно превратить в отдельный сайт буквально одной кнопкой.

Что есть:

🟠 мгновенный деплой из CodePen
🟠 собственный домен или поддомен
🟠 SSL-сертификаты
🟠 CDN и кэширование
🟠 автоматический хостинг без настройки серверов

🔜 Поддерживаются:

— случайный поддомен вида project.codepen.app
— собственный домен через DNS
— субдомены через CNAME
— apex-домены через A-записи

Полезно для:

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

🔗 Ссылка на документацию

📍 Навигация: [Вакансии]

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

#stack

💡 CSS научился стилизовать gap

Раньше для разделителей между элементами Grid и Flex приходилось использовать бордеры, псевдоэлементы, фоновые градиенты и другие обходные пути.

Теперь появляются row-rule и column-rule — свойства, которые позволяют рисовать линии прямо внутри gap.

.grid {
  display: grid;
  gap: 20px;

  column-rule: 2px solid #ff4d4f;
  row-rule: 2px solid #ff4d4f;
}

🟢 Что ещё умеет новая спецификация:

— разные стили для каждой линии через repeat()
— управление пересечениями через rule-break
— настройка отступов у линий через rule-inset
— анимации цвета, толщины и поведения разделителей
— работа как с Grid, так и с Flex

⚠️ Пока поддержка ограничена: Chromium и Safari Technology Preview.

📍 Навигация: [Вакансии]

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

#readme #css

💡 Разбор задачи

console.log("1");

Promise.resolve().then(() => {
  console.log("2");
});

setTimeout(() => {
  console.log("3");
}, 0);

console.log(«4»);

👇 Правильный ответ: 1 4 2 3

Сначала JavaScript выполняет весь синхронный код:

console.log("1");
console.log("4");

Потом Event Loop обрабатывает microtasks — туда попадает Promise.then(). И только после этого выполняются обычные tasks, например setTimeout(..., 0).

👍 — знал/а
🔥 — стало понятнее

💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут

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

#career_merge

✨ Больше полезного — в сторис

Хотим вынести туда короткий формат: быстрые находки, мини-опросы, ссылки и идеи, которые не тянут на отдельный пост.

Сторис открываются через бусты — кнопка ниже.

➡️ Забустить канал

Спасибо, вы лучшие ❤️

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

💡 Когда использовать satisfies в TypeScript

Большинство разработчиков знает про as const. Но во многих случаях полезнее использовать satisfies.

Он позволяет одновременно:

✅ проверить соответствие объекта типу
✅ сохранить точный вывод типов (inference)
✅ поймать лишние свойства

Особенно полезно для:

— конфигов
— роутов
— словарей переводов
— feature flags
— объектов настроек

В отличие от обычной типизации, satisfies проверяет структуру объекта, но не теряет информацию о конкретных значениях.

📍 Навигация: [Вакансии]

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

#readme

👩‍💻 Vite+ — один CLI вместо половины фронтенд-стека

Vite+ — инструмент, который объединяет несколько популярных решений в один CLI.

Что входит:

🔵 Vite — dev-сервер и сборка
🔵 Vitest — тестирование
🔵 Oxlint — линтинг
🔵 Oxfmt — форматирование
🔵 Rolldown — бандлер
🔵 Node.js version management
🔵 единая команда для проверок проекта

Вместо набора:

npm run dev
npm run lint
npm run format
npm run test

можно использовать команды через vp.

🔗 Читать подробнее

📍 Навигация: [Вакансии]

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

#stack #vite

Согласны? 👍

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

#pixel_pause

😳 Необычный трюк с Proxy и Symbol

Обычно Symbol создают вручную:

const a = Symbol("a");
const b = Symbol("b");
const c = Symbol(«c»);

🟠 Но есть более необычный способ — генерировать их автоматически через Proxy:

const createSymbols = new Proxy({}, {
  get(_, prop) {
    return Symbol(prop);
  },
});

const { a, b, c } = createSymbols;

🟠 В результате вы получите:

Symbol("a")
Symbol("b")
Symbol(«c»)

Под капотом всё работает через перехват доступа к свойствам объекта.

Практической необходимости в таком подходе немного, но это интересный пример того, как можно использовать Proxy для создания динамических API и DSL-подобных конструкций 🔗

🔗 Пример и бенчмарк

📍 Навигация: [Вакансии]

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

#readme