🧠 Выбор первого ML-проекта: чеклист против выгорания

Классика плохих решений в ML — выбрать слишком сложный проект: неделя ковыряния в коде, десятки крашей и никакого результата. Хотите дойти до финиша — начните с простого проекта, который реально можно довести до конца.

Мини-чеклист первого проекта:

1. Понятные данные — без «я нашёл датасет в даркнете, но он на суахили».

2. Измеримая метрика — «точность 92%», а не «ну вроде работает».

3. Объяснимый результат — чтобы не-техлид понял, почему модель ругается на спам.

Наш курс «ML для старта в Data Science» — старт от простого к сложному: теория → практика → проверка → проект в портфолио.

👉 Начать свой путь в Data Science

Оплатите курс по ML до 17 августа — курс по Python в подарок.

📅 Бесплатный вебинар с Марией Жаровой — 21 августа: как выбирать проекты, которые доводят до оффера, а не до психотерапевта.

💾 Сохрани, чтобы не потерять, когда будешь готов(а) начать

🚀 🧑🏻‍💻 Пора пушнуть свою IT-карьеру: стартовала регистрация на самый крупный онлайн-хакатон для спецов со всей России и мира!

40 млн призового фонда уже ждут:
⚡️1 место — 1 млн рублей
⚡️2 место — 600 тысяч рублей
⚡️3 место — 400 тысяч рублей

💼 Разрабатывайте решения для топовых компаний и столичных сервисов

Среди задач:
👉🏻 Система автопилота городского робота уборщика
👉🏻 ИИ-модель для автоматизации приёма и выдачи инструментов
👉🏻 Сервис для выявления компьютерных томографий органов грудной клетки без патологий
👉🏻 Система рекомендаций по оптимизации производительности Data Lakehouse
и еще много других

Среди постановщиков задач Правительство Москвы и ведущие компании: Газпромбанк.Тех, VK Tech, Kaspersky, АФЛТ-Системс (Группа «Аэрофлот»), Союзмультфильм, Avito, Итэлма.

📅Регистрация открыта до 18 сентября!

👥Принять участие могут IT-специалисты из России и зарубежа от 18 лет.

Регистрация и подробности — по ссылке ➡️ https://i.moscow/lct?utm_source=sp&utm_medium=social&utm_campaign=frontendproglib/?erid=2VtzqwRkizm

📲 А за актуальными новостями по хакатону — ждём на нашем канале

📌 useCallback: мемоизация функций в React

useCallback(fn, deps) сохраняет одну и ту же ссылку на функцию между рендерами, пока не изменились зависимости.

Почему важно:

В React функции создаются заново при каждом рендере. Если их передавать в React.memo-компоненты или использовать в useEffect зависимостями — это вызовет лишние рендеры/эффекты.

const handleClick = useCallback(() => {

  doSomething();

}, []);

💡 Антипример:

Без useCallback дочерний React.memo-компонент будет рендериться каждый раз, потому что функция — новый объект.

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

#буст

🚀 Главная ошибка новичка в ML — строить звездолёт вместо велосипеда

Многие сразу хотят свою Midjourney, но в итоге получают только выгорание.

Успех начинается с «велосипеда»: научитесь предсказывать цены или классифицировать отзывы. Освойте базу, а уже потом стройте «звездолёты».

Наш курс «ML для старта в Data Science» — это и есть тот самый правильный старт от простого к сложному.

👉 Начните правильно

Берёте курс «ML для старта» до конца недели — Python в подарок.

❗А 21 августа пройдет бесплатный вебинар с Марией Жаровой: узнаете, какие проекты качают скилл, а какие качают ваши нервы.

А какой самый сложный проект вы брались делать в самом начале? 🫢

📱 JavaScript получает апдейт

Стандарт ECMAScript 2025 официально утвержден. Обновление не революционное, но добавляет много приятных фич:

➖ Iterator Helpers — map, filter, reduce прямо для итераторов.

➖ Set методы — пересечение, объединение, разность, симметрическая разность.

➖ Import Attributes — безопасный импорт JSON, CSS и др.

➖ Regex апгрейд — переиспользуемые группы, экранирование, inline-флаги.

➖ Promise.try — единый вызов sync/async функций.

➖ Float16 — для WebGPU, ML и графики.

📌 Удобнее коллекции, регулярки и модули → чище код, меньше костылей.

🔗 Источник

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

#свежак

📌 Инструмент недели: Storybook

Storybook — это среда для изолированной разработки и документирования UI-компонентов. Позволяет тестировать элементы интерфейса без запуска всего приложения, быстро проверять разные состояния кнопок, форм и модальных окон.

Что умеет:

➖ Запускать компоненты отдельно от основного проекта

➖ Тестировать различные состояния и вариации интерфейсов

➖ Создавать интерактивную документацию для команды

➖ Работать с React, Vue, Angular, Svelte и другими фреймворками

➖ Интегрироваться с тестовыми и CI/CD инструментами

Как начать:

1. Установка (автоматически определит фреймворк проекта):

npx storybook@latest init

2. Запуск локально:

npm run storybook

3. Открывайте компоненты, меняйте параметры и сразу смотрите результат в браузере

💡 Упрощает ревью и тестирование UI-компонентов.

🔗 Ссылка на GitHub

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

#буст

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

Frontend‑разработчик — от 100 000 ₽, гибрид (Санкт-Петербург)

Senior Frontend-разработчик (React) — от 270 000 до 320 000 ₽, удаленно (Санкт-Петербург)

Frontend developer Junior/Junior+ — удаленно (Москва)

Senior React Developer — от 220 000 до 300 000 ₽, удаленно (Москва)

Frontend Developer — от 4 500 до 5 500 €, удаленно (Кипр, помощь с переездом)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

❤️ Производительность при рендеринге больших списков

В вашем приложении есть список из 1000+ элементов, который подгружается на страницу сразу. Пользователь жалуется на низкую производительность и долгую загрузку страницы.

❓ Как бы вы улучшили производительность?

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

#междусобойчик

📌 ТОП-5 инструментов для аудита UI во фронтенде

Не всегда баги в логике — часто проблемы в визуале: съехавшие элементы, неверные отступы, несогласованные цвета, низкая читаемость. Эти инструменты помогут протестировать именно UI.

➡️ Polypane

Браузер для фронтендеров, который позволяет одновременно тестировать адаптивность, доступность и дизайн на разных экранах.

➡️ Storybook

Среда для разработки и изолированного тестирования UI-компонентов, что помогает находить визуальные баги ещё до интеграции.

➡️ Percy

Инструмент для визуального регрессионного тестирования, автоматически фиксирует и сравнивает изменения интерфейса между версиями.

➡️ Contrast

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

➡️ VisBug

Расширение для Chrome, позволяющее прямо в браузере изменять CSS, проверять позиционирование и оперативно тестировать UI.

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

#свежак

🛠 Фишка библиотеки: why-did-you-render

why-did-you-render — это дебаг-библиотека для React, которая показывает, что именно вызвало лишний ререндер компонента.

В консоли видно, какие пропсы или состояние изменились — даже если данные по сути остались теми же. Это помогает быстро вычислить узкие места 👍

Что умеет:

— Сравнивает старые и новые пропсы/стейт

— Подсвечивает !==-сравнения, где изменения фиктивны

— Работает с функциями и классами, включая memo, useMemo, useCallback

Пример использования:

import React from 'react';

import whyDidYouRender from '@welldone-software/why-did-you-render';



whyDidYouRender(React, {

  trackAllPureComponents: true

});

🔗 GitHub проекта

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

#буст

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

Выберите курс, который поможет сделать следующий шаг ⬇️

🚀 Для тех, кто начинает путь в IT:

— Основы IT для непрограммистов
— Программирование на Python (обновлённый)
— Frontend-разработчик с нуля: HTML, CSS, JavaScript

🧠 Для будущих и настоящих Data Scientist'ов:

— ML для старта в Data Science (начинается в сентябре)
— Базовые модели ML и приложения
— Математика для Data Science
— AI-агенты для DS-специалистов (скоро второй поток)

🛠️ Для опытных разработчиков, готовых к росту:

— Алгоритмы и структуры данных
— Архитектуры и шаблоны проектирования

Независимо от вашей цели, у нас есть курс, который поможет её достичь. Переходите в Proglib Academy, выбирайте свой путь и инвестируйте в навыки, которые всегда будут в цене!

🫠 Как я отловил «утечку» стилей через CSS-in-JS в крупном SPA

Наш подписчик работал над крупным корпоративным SPA на React с использованием Emotion для стилизации компонентов. В какой-то момент приложение стало заметно «тормозить» после нескольких переключений между разделами:

«Заглянув в DevTools, увидел, что заполняется дублирующимися