Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.9K subscribers
2.66K photos
180 videos
40 files
5.03K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🤓 Пока Python стал π-thon, ты можешь стать Data Scientist'ом

В Proglib.academy стартует экспресс-курс «Математика для Data Science»: 10 живых вебинаров, практика на Python и спикеры из ВШЭ, Яндекс Практикума и Wildberries, которые всё разложат по полочкам.

В программе:
🔹 матан, линал, теория вероятностей;
🔹 3 практических проекта + викторина с розыгрышем TG Premium;
🔹 поддержка преподавателей и чат с единомышленниками;

🎁 Оплати курс до 19 октября — получи курс по базовой математике в подарок.
🗓️ Старт — 6 ноября

👉 Записаться на курс
🥰3👍2
🔗 Разбор: временная мёртвая зона

Раннее мы выкладывали задачу 📎

Правильный ответ: переменная `a` находится во временной мёртвой зоне (TDZ)

🔛 Что происходит:

JS делит выполнение на две фазы:

1. Инициализация (создание окружения) — компилятор видит let a = 2 внутри функции и создаёт для неё локальную переменную a.

2. Выполнение — когда доходит до console.log(a), движок уже знает о локальной a, но она ещё не инициализирована.

⚠️ Поэтому обращение к ней до строки let a = 2 вызывает ReferenceError, даже если код в if не выполнится.

❗️ Это и есть Temporal Dead Zone (TDZ) — период между созданием переменной и её инициализацией, когда доступ к ней невозможен.

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

#code_challenge #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥65👍1
🌪 Как очистить объект от мусора

Иногда после API-запроса или сборки данных в объекте куча undefined — их не видно, но они мешают при сериализации, сравнении и логах.


const clean = obj => Object.fromEntries(
Object.entries(obj).filter(([_, v]) => v !== undefined)
);


🔤 Что делает:

— пробегается по всем парам [ключ, значение],
— выкидывает те, где значение undefined,
— возвращает новый “чистый” объект.

🔴 Пример:


clean({ name: 'Alex', age: undefined, city: 'Berlin' });
// => { name: 'Alex', city: 'Berlin' }


🔤 Полезно:

— перед отправкой данных на сервер,
— при сборке форм,
— при логировании чистых JSON.

🔤 Для более «умной» версии (чистит и вложенные объекты):


const clean = obj =>
Object.fromEntries(
Object.entries(obj)
.filter(([_, v]) => v !== undefined)
.map(([k, v]) => [k, v && typeof v === 'object' && !Array.isArray(v) ? clean(v) : v])
);


🔴 Эта версия:

— рекурсивно чистит вложенные объекты,
— не трогает массивы,
— остаётся компактной и читаемой.

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

#readme #js
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥2
🧐 Хочешь в Data Science, но не знаешь, с чего начать?

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

Всего пару минут — и ты поймёшь, куда двигаться дальше.


👉 Пройти тест
👍5🤔2
🧿 Паттерн недели — Container / Presentational

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

⚪️ Что это дает:

— код становится чище и стабильнее,
— проще тестировать (UI отдельно, логика отдельно),
— UI можно переиспользовать,
— границы между слоями становятся прозрачными.

⚪️ Когда применять:

— компонент разросся и делает всё,
— нужно использовать один UI с разными данными,
— хочешь сделать код «архитектурно зрелым».

🆖 Чек-лист:

Presenter без useEffect и fetch

Только пропсы и рендер

Контейнер решает, что показать, Presenter — как


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

#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥42🥰2
📎 React, Vue, Svelte — разные догмы, одни и те же боли

Кажется, вот он — новый порядок, чистый код, свежий старт. А потом снова файл на 600 строк и состояние, которое живёт своей жизнью. И вы ловите дежавю.

Что бы вы сделали:

🔥 — Выбрали новый фреймворк
❤️ — Переписали старый проект с нормальной архитектурой

🔤 Как это сделать — разбираем на курсе «Архитектуры и шаблоны проектирования» (−40%)

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

#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
12🔥3
html_cheat_sheet.png
596.5 KB
🚀 Шпаргалка по HTML

Всё от базовой структуры до таблиц, форм, списков и современных тегов разметки.

Отличный инструмент для быстрой проверки кода и обучения.

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

#readme #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52😁2
🔥 Библиотека на Tailwind для быстрого прототипирования

UI Skeleton — мощный UI-фреймворк, построенный поверх Tailwind CSS. Он оптимизирован под скорость, доступность и готовые темы, включая dark mode из коробки.

Чем еще хорош:

— Можно собрать интерфейс за минуты, без возни с конфигами и кастомизацией

— Все компоненты уже адаптивные, доступные (a11y) и подчиняются Tailwind-токенам

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

🎈 По сути — Tailwind + готовый UI-кит, где всё уже выверено по UX.

Ссылка на инструмент

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥1
🎲 Мы не только учим, но и играем!

На экспресс-курсе «Математика для Data Science» — викторина с призом TG-Premium 🎁
Проверь знания, прокачай математику и забери приз.

‼️ Оплатишь до 19 октября — получишь базовый курс в подарок.

👉 Записаться на курс
4
🧩 Как вернуть случайно удалённую ветку

Удалили локальную ветку — и поняли, что в ней были нужные коммиты? Не спешим паниковать — если она ещё жива в origin, всё можно вернуть одной командой:


git fetch origin refs/heads/feature-branch:refs/heads/feature-branch


🔤 Что произойдёт:

— Git скачает ветку с origin
— Восстановит её локально с тем же именем
— Вся история коммитов сохранится

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

#readme #git
Please open Telegram to view this post
VIEW IN TELEGRAM
6🌚3
Недавно мы анонсировали старт нового курса «Математика для Data Science».

В ближайшие дни выйдет серия постов о том, что ждёт вас на курсе, а пока познакомим вас с его экспертами.

Спикеры курса:

👤 Ксения Кондаурова
Преподаватель и автор курсов для бакалавриата Центрального Университета (Т-Банк), спикер и методист для Edutoria (Сбербанк). Ксения расскажет, как линейная алгебра применяется для построения предсказательных моделей, и научит проверять гипотезы для бизнеса с помощью статистики.

👤 Диана Миронидис
Преподаватель НИУ ВШЭ, автор и методист Яндекс Практикума. Самый экстравагантный преподаватель из всех, с кем вы учились, — убедитесь, что математика может быть нескучной. Диана погрузит в математический анализ, научит исследовать функции и находить параметры, при которых ошибка модели минимальна.

👤 Маргарита Бурова
Академический руководитель образовательных программ по аналитике и анализу данных, Wildberries & Russ. Проведёт квиз с розыгрышем годовой подписки TG Premium. Маргарита — эксперт в дата-сайенс, ИИ и математических методах анализа данных, фанат развития ИТ-образования.

Вместе с экспертами за 8 недель вы не просто получите знания, а познакомитесь с математикой заново.

🎁 Только при оплате до 19 октября курс «Базовая математика» в подарок!

👉 Записаться на курс
👍5
💘 Tinder — UX, построенный на дофамине

Свайп, вспышка, совпадение.

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

🆖 Разбираем, как frontend усиливает механику вознаграждения и удерживает внимание.

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

#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🥰3🥱1
This media is not supported in your browser
VIEW IN TELEGRAM
— Я на митапе IT Talk by Sber!
— Но ты же сам позвонил?
— Всё, не могу говорить, прокачиваю скиллы!

23 октября в Рязани пройдёт встреча IT-коллег — топовые эксперты поделятся инсайтами:

✔️ Как AI помогает в развитии продукта GitVerse.
✔️ Как разогнать ваш проект до скоростей Формулы-1.
✔️ Как собрать docker без docker (и можно ли вообще это сделать 😏).

Когда? 23 октября в 18:30.
Где? Panorama Event Place в ТЦ «Малина» по адресу: ул. Соборная, 15 А.

Зарегистрироваться!
🔥5
💳 Дайджест новостей

🈶 Vite+ — единый инструментальный стек

Теперь Vite не просто билд-инструмент, а целый CLI-комплекс: vite test, vite lint, vite format и др.

🈶 AI для WordPress: Vibe Coding от 10Web

10Web представил Vibe for WordPress — AI-фронтенд-билдер, который генерирует макеты и код из текстового описания.

🈶 TDDev — AI, создающий полноценные приложения

Система TDDev получает текстовые требования и генерирует фронтенд, бэкенд и тесты, исправляя ошибки до полного соответствия ТЗ.

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥1