Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22.4K subscribers
2.47K photos
155 videos
38 files
4.86K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
📌 Инструмент недели: Storybook

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

Что умеет:

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

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

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

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

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

Как начать:

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


npx storybook@latest init


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


npm run storybook


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

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

🔗 Ссылка на GitHub

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥75😁2👍1🥰1
📱 JavaScript получает апдейт

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

Iterator Helpersmap, filter, reduce прямо для итераторов.

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

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

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

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

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

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

🔗 Источник

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16😁43🥰2🤔2
😶 Редкие баги из продакшена

Бывает, что локально и на тестовом стенде всё идеально, а вот в продакшене — баг, который воспроизводится у одного процента пользователей. И, конечно, ни логов, ни воспроизводимости.

Вопрос от подписчика:

«Недавно словили кейс: приложение периодически зависало у пользователей в Южной Америке. Логи — пустые, трейсей нет, на стендах всё стабильно. Подозрения на сеть и какой-то специфичный браузер. Но проверить напрямую — никак. Как вы в таких случаях находите причину и воспроизводите баги?»


Какие техники, инструменты или хитрости помогают вам вылавливать такие баги? Пишите в комментах 👇

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
7🥰5🔥2👏1🤔1
🚀 Главная ошибка новичка в ML — строить звездолёт вместо велосипеда

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

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

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

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

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

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

А какой самый сложный проект вы брались делать в самом начале? 🫢
6😁4👍2🔥2😍1
📌 useCallback: мемоизация функций в React

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

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

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


const handleClick = useCallback(() => {
doSomething();
}, []);


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

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

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍5🎉4🥰32
🚀 🧑🏻‍💻 Пора пушнуть свою 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

📲 А за актуальными новостями по хакатону — ждём на нашем канале
🔥5🎉43😍3🥰1
🧠 Выбор первого ML-проекта: чеклист против выгорания

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

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

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

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

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

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

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

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

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

💾 Сохрани, чтобы не потерять, когда будешь готов(а) начать
5😁5😍5👍2🔥2
🔥 IT-зарплаты 2025: почему рост оказался фантомным

На рынке — новые тренды: компании экономят, вакансии становятся «гибридными», а зарплаты вроде растут, но ощущение, что денег больше, так и не появилось.

Что в статье:

➡️ Почему рост зарплат — иллюзия

➡️ Как изменились требования к IT-специалистам

➡️ Тренд на гибридные вакансии и экономию компаний

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

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
😍8👍6🥰4👏2🌚1
💬 Фриланс vs найм: что лучше

Выбирать между фрилансом и офисной работой — как решать, что важнее: свобода или безопасность. Оба пути учат, развивают и приносят деньги… но по-разному.

➡️ Фриланс:

— Гибкий график, проекты на вкус
— Быстро прокачиваешь навыки
— Доход выше при умелом подходе
— Каждый день новые вызовы

📎 Нет соцпакета, нестабильный доход, всё на вас

➡️ Корпоратив:

— Стабильная зарплата и соцпакет
— Менторство и карьерный рост
— Процессы уже налажены
— Работа в команде

📎 Менее гибко, проекты выбираете компания, бюрократия

Фриланс и офис не конкурируют, а показывают разные пути развития. Главное — понять, что важнее именно вам.

А вы что выбрали бы: свободу фриланса или стабильность в найме

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉6👍43🔥3👏2
😎 Вы просили — мы сделали. Самый долгожданный анонс этого лета!

Мы открываем набор на второй поток курса «AI-агенты для DS-специалистов»!

На курсе мы учим главному навыку 2025 года: не просто «болтать» с LLM, а строить из них рабочие системы с помощью Ollama, RAG, LangChain и crew.ai.

📆 Старт потока — 15 сентября.

💸 Цена 49 000 ₽ действует только в эти выходные — до 17 августа. С понедельника будет дороже.

👉 Занять место
8🥰4🥱4🎉3👍1
🥰 Ресурсы для подготовки к собеседованию

В 2025-м конкуренция за фронтенд-вакансии выросла, но подготовиться можно без платных курсов — достаточно выбрать правильные источники.

➡️ Front End Interview Handbook

Обновлённый гайд с вопросами по HTML, CSS, JavaScript, алгоритмам и системному дизайну.

➡️ JavaScript.info

Полный справочник по JavaScript с примерами и упражнениями.

➡️ Tech Interview Handbook

Алгоритмы, системный дизайн, резюме и советы по прохождению интервью.

➡️ freeCodeCamp

Бесплатные курсы с проектами и сертификатами: от HTML/CSS до фронтенд-библиотек.

➡️ CoderPad — Frontend Questions

Примеры практических задач для интервью (junior → mid).

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍1