👀 Умеете строить предсказуемую архитектуру с ИИ? Станьте спикером 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

💡 Главное правило для нового кастомизируемого <select>

Если используете кастомный <select> с иконками, цветными плашками или изображениями, не убирайте текст из <option>.

Текст нужен сразу по трём причинам:

1️⃣ выбранный вариант проще понять пользователю;

2️⃣ его смогут озвучить скринридеры и другие вспомогательные технологии;

3️⃣ в браузерах без поддержки нового <select> список останется полностью рабочим.

Иконки и другие визуальные элементы должны дополнять текст, а не заменять его.

🔗 Источник

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

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

#readme #html #css #accessibility

🤔 Вопрос с собеседования

Попадёт ли ответ 404 в catch при использовании fetch()?

👇 Правильный ответ (нажми, чтобы прочитать):

Нет.

fetch() не считает HTTP-статусы 404, 500 и другие ошибками. Promise успешно выполнится, а в ответе придёт объект Response.

fetch("/api/users")
.then(response => {
console.log(response.status); // 404
console.log(response.ok); // false
})
.catch(() => {
console.log("Ошибка сети");
});

Чтобы обработать такие ответы как ошибки, нужно проверить response.ok:

const response = await fetch("/api/users");

if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}

🔜 Идеальный короткий ответ:

fetch() попадает в catch только при сетевых ошибках или если запрос не удалось выполнить. Ответы 404 и 500 нужно обрабатывать через response.ok или response.status.

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

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

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

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

#career_merge

Как вы чаще всего открываете DevTools?

👍 — F12
❤️ — Горячими клавишами (Ctrl+Shift+I / ⌘⌥I)
🔥 — ПКМ → Inspect

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

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

#code_battle

🔗 5 значений cursor, которые реально используются

cursor: grab;
cursor: grabbing;
cursor: zoom-in;
cursor: not-allowed;
cursor: progress;

Эти значения помогают сделать интерфейс понятнее без дополнительного текста.

⚠️ Если используете url(), всегда указывайте запасной вариант:

cursor: url(cursor.png), pointer;

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

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

#readme

🖥️ Как превратить портфолио в демо современных веб-технологий

Этот сайт полностью стилизован под старый CRT-монитор. Автор использовал Three.js, чтобы воспроизвести мерцание, геометрические искажения, цветовые аберрации и другие эффекты ЭЛТ-дисплея.

🔵 Внутри — полноценный интерфейс в стиле Windows 95 с браузером, резюме и мини-играми.

Хороший пример того, как WebGL может использоваться не только для 3D-сцен, но и для создания необычного пользовательского опыта.

🔗 Ссылка на сайт

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

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

#read_watch

Их всех на одном заводе делают? 😒

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

#pixel_pause

🧮 CSS-свойство, которое делает отображение чисел заметно лучше

Если в интерфейсе есть часы, таймер, счётчик или финансовые данные, числа могут «прыгать» при изменении. Причина — большинство шрифтов используют пропорциональную ширину символов.

Исправить это можно одной строкой:

font-variant-numeric: tabular-nums;

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

Полезно для:

⏱️ часов и таймеров;
📈 дашбордов и аналитики;
💰 финансовых таблиц;
🏆 счётчиков и табло.

Свойство поддерживается всеми современными браузерами и не требует подключения дополнительных библиотек 💡

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

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

#readme #css