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

#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

👀 Умеете строить предсказуемую архитектуру с ИИ? Станьте спикером Proglib academy

Мы в Proglib.academy запускаем курс по Spec-Driven Development (SDD) — учим разработчиков управлять ИИ-агентами (Cursor, Copilot, Claude) через спецификации, контекст и тесты, чтобы не перепроверять за нейросетью каждую строку.

Для этого курса мы ищем классных спикеров-практиков.

➡️ Что требуется от вас?

● BigTech бэкграунд: опыт работы разработчиком, тимлидом или архитектором в крупных технологических компаниях.
● Опыт управляемой разработки с ИИ: вы на практике знаете, как встроить AI-инструменты в личный или командный workflow (от постановки задачи до ревью AI-кода).
● Системный подход: умение превращать хаотичную генерацию кода в предсказуемый инженерный процесс (работа с архитектурой, чек-листами, легаси и покрытием тестами).

➡️ Что мы предлагаем?

● Достойную оплату за подготовку материалов и проведение занятий.
● Мощное продвижение личного бренда через медиаресурсы Proglib (наша аудитория — 1 млн+ айтишников).
● Возможность публиковать свои экспертные материалы и статьи на наших площадках.
● Доступ к сильному и закрытому профессиональному сообществу.

Также мы ищем консультанта программы.

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

➡️ Как с нами связаться:

Telegram: @alinaa_kh
E-mail: alina@proglib.io

💡 В VS Code можно за пару кликов открыть доступ к локальному приложению через интернет

Запускаете проект → вкладка Ports → Forward a Port → получаете ссылку на свой localhost

Доступ можно сделать публичным или ограничить авторизацией через GitHub ↩️

Полезно для демонстрации фич, тестирования вебхуков и быстрой совместной отладки без ngrok и настройки сети.

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

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

#stack

💡 Автоскролл чата без JavaScript

Закрепить скролл внизу можно не только через scrollTo() или MutationObserver.

Достаточно использовать CSS-свойство overflow-anchor:

#scroller * {
  overflow-anchor: none;
}

#anchor {
  overflow-anchor: auto;
  height: 1px;
}

И добавить в конец списка сообщений небольшой элемент:

<div id="anchor"></div>

Браузер использует механизм scroll anchoring, чтобы уменьшать сдвиги страницы. Если сделать якорем последний элемент списка, при появлении новых сообщений скролл будет автоматически оставаться внизу — без дополнительного JavaScript.

⚠️ Это работает только пока пользователь находится внизу чата. Если он прокрутил историю вверх, автопрокрутка не сработает.

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

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

#readme #css