📌 Зачем дата-сайентисту матанализ?

Основная компетенция специалиста по Data Science – способность анализировать и интерпретировать данные, а математика является фундаментом для начала работы.

В карточках мы разбираем основные разделы математики, с которых стоит начать изучение специалисту по анализу данных.

Хотите подготовиться к офферу или подтянуть знания? Оставляйте заявку на наш курс по математике для Data Science 💙

P.S. Только до 31 мая на курс (и вообще на все программы Академии) действует СКИДКА 40%

А как у вас дела с высшей математикой?
❤️ — Помню всё
🔥 — Знаю основы
🌚 — Ничего не знаю

🏃‍♀️ Proglib Academy

Читать полностью…

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🤩

🕓 28 мая, четверг, 19:00 (мск) — приходите на митап в Санкт-Петербурге или подключайтесь онлайн.

Спикеры из ЮMoney поделятся, как работают над задачами и улучшают процессы в команде.

Вот о чём будут рассказывать:
🟣 Как спят вкладки в браузере. На живом примере разберём, как браузер усыпляет вкладки, почему из-за этого ломается real-time и какие приёмы дебага и resync помогают находить и чинить их в продакшене.
🟣 Как построить Spec-Driven платформу для генерации писем. Используя OpenAPI как единый источник правды, покажем, как описывать контракты электронных писем через спецификацию и автоматически генерировать консистентный HTML.
🟣 Подключение модуля шумоподавления в рабочее место оператора. Рассмотрим инструменты React, WebSockets, WebRTC, а также архитектуру и логику работы модуля шумоподавления.
🟣 Круглый стол — AI во фронтенде: вызовы и реальность. Обсудим влияние нейросетей на фронтенд с трёх позиций: рынка, разработки и образования.

Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix 👈

Читать полностью…

🔥Git-команда для расследования истории функции

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

🔵Есть команда:

bash git log -L :functionName:path/to/file

Она покажет историю изменений только выбранной функции или метода.

🔵Например:

bash git log -L :calculateTotal:src/cart.ts

✅ Полезно, когда нужно понять:

— кто и когда менял логику
— после какого коммита появился баг
— почему функция стала такой сложной
— какие решения принимались раньше

Это особенно помогает в legacy-коде, где один файл мог жить годами и меняться десятки раз.

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

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

#readme #git

Читать полностью…

✍️ Современный Markdown-редактор для React

MDXEditor 4.0 — Markdown/MDX-редактор на базе Lexical, который можно встроить прямо в React-приложение.

✔️ Поддерживает:

— code blocks
— таблицы
— изображения
— ссылки
— markdown shortcuts
— MDX-компоненты

Подойдёт для:

➖ CMS
➖ документации
➖ admin panel
➖ internal tools
➖ editor-like UI

У проекта есть live demo, где можно посмотреть почти все возможности редактора в одном интерфейсе.

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

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

#stack

Читать полностью…

🦊 Новые CSS и Web API в Firefox 151

В новом релизе Firefox появилось несколько полезных фич для frontend и DevTools:

— @container style() queries
— поддержка Document Picture-in-Picture API
— Web Serial API для работы с устройствами через браузер
— shadowrootslotassignment для Shadow DOM
— field-sizing для auto-size форм
— улучшения fullscreen API и WebDriver BiDi

Из интересного:

🔴 теперь можно проверять CSS-свойства контейнера прямо в @container
🔴 Picture-in-Picture поддерживает произвольный HTML, а не только видео
🔴 браузер получил встроенную работу с serial-устройствами вроде ESP32 и Raspberry Pi Pico

🔗 Источник

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

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

#release_digest

Читать полностью…

🛠 React vs Web Components

Автор разобрал реальную миграцию маркетингового сайта: React → нативные Web Components + Astro.

Результат:

🔜 примерно −100 KB JavaScript
🔜 без потери функциональности
🔜 меньше runtime и hydration

В статье хорошо показано:

— почему React часто используют «по привычке»
— когда SPA-фреймворк становится лишним
— чем удобны Web Components в связке с Astro
— почему писать Custom Elements руками всё ещё больно
— как появился nanotags — тонкий слой над платформой

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

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

#code_battle

Читать полностью…

👩‍💻 React лучше всего учится не по туториалам, а через pet-проекты

Нашли большой репозиторий с идеями React-проектов разного уровня — от простых счётчиков и Todo до SaaS Dashboard, WebRTC и AI Chat UI.

Внутри проекты разделены по уровням:

🟢 Beginner
🟡 Intermediate
🔴 Advanced

Полезно, если:

— не знаете, что сделать для портфолио
— хотите практиковать React на реальных задачах
— ищете идеи для pet-проекта
— готовитесь к frontend-собеседованиям

🔗 Ссылка на GitHub

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

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

#stack #react

Читать полностью…

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

Что такое миксины в CSS-препроцессорах?

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

Миксины — это переиспользуемые наборы CSS-правил в препроцессорах вроде SCSS или LESS. Их можно подключать в разных местах и передавать параметры, чтобы не копировать одинаковые стили вручную.

🔜 Например, в SCSS:

@mixin flex-center($gap: 0) {
display: flex;
justify-content: center;
align-items: center;
gap: $gap;
}

.card {
@include flex-center(16px);
}

После компиляции правила из миксина попадут в итоговый CSS внутри .card.

⚠️ Важно:

Миксины — не то же самое, что @extend. @extend объединяет селекторы, а миксины вставляют набор правил в то место, где их вызвали.

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

Миксины — это переиспользуемые CSS-шаблоны в препроцессорах. Они помогают выносить повторяющиеся стили и подключать их в нужных местах, в том числе с параметрами.

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

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

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

#career_merge

Читать полностью…

Темным временам пришел конец 😑

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

#pixel_pause

Читать полностью…

⚠️ GitHub Actions cache poisoning — опасная проблема современного open source

Во многих репозиториях кэш в GitHub Actions общий для проверки PR и релизного процесса.

Из-за этого атакующий может:

— отправить вредоносный PR
— записать заражённый кэш
— дождаться сборки релиза
— выполнить код в CI с доступом к публикации пакетов

Через похожие цепочки уже атаковали TanStack, Cline и другие проекты из JS-экосистемы.

✅ В статье разбирается:

— чем опасен pull_request_target
— как общий кэш ломает границы доверия
— зачем закреплять actions по SHA
— почему AI-боты в CI становятся новой точкой атаки

Полезно всем, кто работает с GitHub Actions, npm, CI/CD и open source.

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

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

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

#under_hood

Читать полностью…

🖍 formatToParts() — недооценённый метод в Intl.NumberFormat

Обычный .format() возвращает готовую строку:

"$1,234.56"

А formatToParts() разбивает число на отдельные части:

new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
}).formatToParts(1234.56)

🔴 Результат:

[
  { type: "currency", value: "$" },
  { type: "integer", value: "1" },
  { type: "group", value: "," },
  { type: "integer", value: "234" },
  { type: "decimal", value: "." },
  { type: "fraction", value: "56" }
]

Это полезно, когда нужно:

— отдельно стилизовать валюту
— уменьшать дробную часть
— кастомно оформлять separators
— анимировать части числа отдельно

Production-ready API, который активно используют в fintech, analytics и dashboard-интерфейсах.

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

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

#readme #js

Читать полностью…

👩‍💻 VS Code shortcuts, которые ускоряют работу

🔵 Быстрый переход к файлу по названию.

Ctrl + P

🔵 Переход к функции, компоненту или переменной внутри файла.

Ctrl + Shift + O

🔵 Переход к конкретной строке.

Ctrl + G

🔵 Переместить строку вверх или вниз без copy-paste.

Alt + ↑ / ↓

🔵 Выделить все совпадения выбранного текста.

Ctrl + Shift + L

🔵 Переименовать переменную/функцию во всём scope безопаснее, чем через поиск.

F2

🔵 Открыть быстрые исправления: auto import, fix lint, convert, refactor.

Ctrl + .

Для macOS можно заменить Ctrl на Cmd, а Alt на Option.

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

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

#readme #vscode

Читать полностью…

🛡️ HTML Sanitizer API: безопасная вставка HTML без лишних костылей

innerHTML давно остаётся одной из самых опасных точек во frontend: если вставить пользовательский HTML без очистки, можно получить XSS.

🈂️ Новый HTML Sanitizer API переносит часть этой работы на браузер. Например, setHTML() вставляет HTML безопасно по умолчанию: удаляет <script>, inline-обработчики вроде onerror и другие XSS-опасные части.

В статье разбирают:

— почему innerHTML опасен
— чем setHTML() отличается от innerHTML
— какие есть safe/unsafe методы
— зачем нужен parseHTML()
— как применять API в React
— почему DOMPurify пока всё ещё нужен как fallback

🔜 Особенно интересен кейс с optimistic UI: можно безопаснее показать пользовательский комментарий сразу, пока backend ещё обрабатывает запрос.

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

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

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

#under_hood #js

Читать полностью…

🔗 Как сделать эффект «матового стекла» в CSS

Glassmorphism до сих пор активно используют в:

— dashboard-интерфейсах
— модалках
— sidebar
— карточках
— landing page

Основной эффект создаётся через backdrop-filter.

.card {
  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

❗️ Что важно:

— backdrop-filter размывает фон позади элемента, а не сам элемент

— без изображения или градиента на фоне эффект почти незаметен

— сильный blur может быть дорогим для рендера, особенно на мобильных

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

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

#readme #css

Читать полностью…

🌑 Новый API для изоляции JavaScript-кода

В TC39 продолжают работу над ShadowRealm — API для запуска JavaScript в изолированном окружении с собственным globalThis, built-in объектами и отдельным scope.

const shadow = new ShadowRealm(); 

shadow.evaluate(`   globalThis.secret = "shadow"; `); 

console.log(globalThis.secret); // undefined

Главное отличие от Web Worker:

🈁 ShadowRealm не создаёт новый поток. Код выполняется в том же thread, но в отдельном execution context.

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

— изолировать сторонние библиотеки
— уменьшать pollution глобального scope
— запускать sandbox/plugin-логику
— делать «чистые» окружения для тестов
— безопаснее работать с внешним кодом

Proposal сейчас находится на Stage 2.7.

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

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

#under_hood #js

Читать полностью…

👐 Почему ChatGPT не выглядит как сложный инструмент

Внутри ChatGPT много сценариев, но пользователь чаще всего видит только одно поле ввода и поток ответа.

🔜 В карточках разберём 6 UX-паттернов, которые помогают скрыть сложность: от streaming UX и progressive rendering до empty states и tool abstraction.

Полезно для любых продуктов, где много функций, но интерфейс не должен превращаться в панель управления самолётом ✅

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

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

#ux_review

Читать полностью…

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

Чем отличается Reflow от Repaint и как это влияет на производительность?

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

🔵 Repaint — это перерисовка элемента без пересчёта layout.

Например, при изменении:

— color
— background
— visibility

Браузер обновляет внешний вид элемента, но не пересчитывает его размеры и позицию.

🔴 Reflow или layout — это пересчёт геометрии страницы.

Он может происходить при изменении:

— width
— height
— margin
— font-size
— DOM-структуры

После layout браузеру часто приходится делать ещё и repaint.

⚠️ Почему это важно:

Reflow обычно дороже repaint, потому что браузер пересчитывает размеры и позиции элементов.

Частые layout-пересчёты могут вызывать:

— лаги
— просадки FPS
— дёрганые анимации
— медленную работу интерфейса

✅ Что обычно оптимизируют:

— избегают layout thrashing
— не читают и не меняют layout вперемешку
— анимируют transform и opacity
— группируют DOM-изменения

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

Repaint обновляет внешний вид элемента без пересчёта layout, а reflow/layout пересчитывает размеры и позиции элементов страницы. Layout обычно дороже и сильнее влияет на производительность.

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

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

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

#career_merge

Читать полностью…

База 🐶

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

#pixel_pause

Читать полностью…

❓ Что делает useState

useState — базовый hook для локального состояния компонента.

Используется для:

— modal
— forms
— tabs
— dropdown
— counters
— UI state

tsx const [open, setOpen] = useState(false)

⚠️ Частая ошибка — хранить derived state отдельно через useEffect.

tsx const [fullName, setFullName] = useState('')  useEffect(() => {   setFullName(`${first} ${last}`) }, [first, last])

Такой state дублирует данные и усложняет компонент.

🔜 Лучше вычислять значение напрямую:

tsx const fullName = `${first} ${last}` 

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

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

#readme

Читать полностью…

🔥 База по экономике токенов и кэшированию от AI Platform Lead из Bitrix24

Знакомьтесь, Сергей Нотевский. AI Platform Lead в Bitrix24.

Он один из ключевых экспертов нашего курса AgentOps. На своих лекциях он детально разбирает экономику AI-агентов, кэширование токенов, LLM-инфраструктуру и вывод генеративных систем в стабильный прод.

Мы попросили Сергея поделиться материалами для тех, кто хочет оптимизировать косты на LLM в проде. Сохраняйте методичку по prefix cache метрике, которая напрямую влияет на ваши деньги.

Как говорят создатели Manus:

“KV-cache hit rate is the single most important metric for a production-stage AI agent.”

🛠 Что внутри методички (комбо из 3 статей + код):

Экономика кэширования — особенности провайдеров и как правильно считать затраты.

Частые анти-паттерны — почему ваш кэш постоянно сбрасывается и вы платите больше.

Кэш в AI-агентах — специфика работы с памятью в автономных системах.

🍒 Вишенка на торте: готовый SKILL для агента, который делает ревью вашего проекта, находит анти-паттерны и предотвращает низкое попадание в кэш.

— Забрать комбо-материалы на GitHub

P.S. Если хотите послушать Сергея вживую — ловите его на конференциях Kode Waves (май), Conversations AI и Highload Spb (июнь).

🎁 Акция в честь старта продаж!

Прямо сейчас при покупке Инженерного трека вы получаете полный доступ к материалам курса «Разработка ИИ-агентов» в подарок.

👉 Забрать 2 курса по цене 1 и начать обучение

Читать полностью…

🔥 Топ-вакансий недели для фронтендеров

Middle Frontend разработчик — от 170 000 ₽, гибрид (Москва)

Frontend Developer Pixi — 3 000 —‍ 5 500 $, удаленно

Frontend разработчик — от 150 000 ₽, офис (Краснодар)

➡️ Больше офферов в канале: @jsdevjob

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

Читать полностью…

🧠 Бесплатный курс по алгоритмам на JavaScript

Базовый курс для тех, кто уже пишет на JS и хочет подтянуть алгоритмы перед собеседованиями.

Внутри:

— Big O  
— сортировки  
— графы  
— структуры данных  
— деревья

Курс старый и не обновляется, но фундаментальные темы всё ещё актуальны.

🔗 Доступен по ссылке

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

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

#stack

Читать полностью…

🛠 Быстрая проверка CSS прямо в DevTools

Необязательно менять код проекта, чтобы проверить CSS. Можно добавить inline-стиль прямо в DevTools и сразу увидеть результат.

🔜 Как найти:

— Chrome / Edge: Styles → element.style
— Firefox: Rules → element
— Safari: Styles → Style Attribute

Полезно, когда нужно быстро понять:

— сработает ли CSS-свойство
— перебьёт ли оно текущий каскад
— почему правило не применяется
— как элемент поведёт себя без правки исходников

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

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

#readme #devtools

Читать полностью…

Туц-туц-туц 🎵 Слышите?

Это звуки Техно-Квартирника, регулярной встречи от сообщества разработчиков интерфейсов (фронтенд) Альфа-Банка — A?.Frontend.

27 мая в 19:00 в режиме техно будем разбирать примеры и кейсы, как использовать ИИ-агенты в разработке интерфейсов:

➡️ «Чистая архитектура frontend-приложений и причём здесь ИИ-агенты?»
Илья Агапов, технический лидер разработки, Альфа-Банк
Данила Звягин, ведущий разработчик, Альфа-Банк
➡️ «Как я поднял ИИ-агента и снова стал высыпаться: OpenClaw, скиллы и корпоративная рутина»
Роман Троицкий, старший разработчик интерфейсов (frontend), Сбер
➡️ «Как ИИ ломают привычную модель веб-безопасности?»
Анастасия Егорова, разработчик интерфейсов (frontend), CozyFrontend
➡️ «AI как QA-инженер: механики тестирования с помощью агентов для frontend-инженеров»
Илья Шорин, разработчик интерфейсов (frontend), Авито Товары

После каждого доклада будут дискуссии самых горячих трендов, а вечер завершим вот чем:
🗣 Консультациями по ИИ-агентам
💿 Диджей-сетом
🤝 Нетворкингом

Регистрируйтесь по ссылке!


Реклама. АО «Альфа-Банк», ИНН 7728168971. Erid 2VtzqvYFDNp

Читать полностью…

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

#code_challenge

Читать полностью…

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

#pixel_pause

Читать полностью…

⭐️ А что если тестировать Vue-компоненты прямо в браузере — без Playwright, Vitest и Node?

Автор статьи показывает browser-native подход к frontend testing: Vue-компоненты монтируются прямо в DOM, а тесты работают с интерфейсом без отдельного JS-runtime.

Внутри:

— рендер компонентов в тестовом DOM
— waitFor() вместо случайных sleep()
— работа с form events вручную
— reset fixture-данных через API
— coverage через Chrome DevTools

Подход не решает все проблемы тестирования, но идея интересная.

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

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

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

#read_watch #testing

Читать полностью…

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

Почему чрезмерное следование DRY может навредить проекту?

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

Если слишком рано объединять похожий код в одну абстракцию, система становится сложнее:

— появляются огромные универсальные функции
— растёт связанность
— изменения в одном месте ломают другие сценарии

Иногда два похожих блока кода проще и безопаснее поддерживать отдельно, чем тащить преждевременную abstraction.

❌ Плохой DRY:

handleUser(type, data, options, flags)

✅ Нормальный подход:

createUser()
updateUser()
deleteUser()

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

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

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

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

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

#career_merge

Читать полностью…

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

#pixel_pause

Читать полностью…

🔥 Топ-вакансий недели для фронтендеров

Senior TypeScript — от 440 000 ₽, удаленно

Frontend-разработчик (TypeScript) — от 110 000 до 200 000 ₽, офис (Санкт-Петербург)

Junior Frontend Developer (React/Angular/Vue) — от 50 000 до 100 000 ₽, удаленно (Москва)

➡️ Больше офферов в канале: @jsdevjob

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

Читать полностью…