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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🧠 Готовишься к собесам, а ноутбук еле тянет IDE?

Самое время прокачать скиллы и апгрейднуть железо!

Proglib Academy разыгрывает MacBook Pro 14 (M3 Pro, 36 GB, 1 TB SSD) 💻

Купи любой наш курс до 15 ноября → пройди 2 недели обучения → напиши куратору #розыгрыш. Всё, ты в игре!

📚 Среди курсов:

▫️ Алгоритмы и структуры данных — топ для подготовки к собесам в Яндекс и FAANG.

▫️ Архитектуры и шаблоны проектирования — чтобы думать как senior.

▫️ Python, математика для DS, основы IT и другие направления.

👉 Принять участие
🥰4🥱41
😱 Потерянный this в обработчике

Когда метод объекта передаётся как колбэк, он теряет контекст (см. фото). После клика в консоли будет undefined.

Почему так:

this зависит от способа вызова функции, а не от места, где она объявлена.

При передаче метода как ссылки (btn.handleClick) контекст теряется — this больше не указывает на объект.


Как исправить:

1. Явно привязать контекст


button.addEventListener('click', btn.handleClick.bind(btn));


2. Использовать стрелочную функцию


button.addEventListener('click', () => btn.handleClick());


💡 Стрелочные функции не имеют собственного this, они берут его из внешнего контекста — поэтому работают как ожидается.

#hotfix #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰31👍1
💡 Scope Chain: как JS ищет переменные вверх по цепочке

Иногда переменная с нужным именем вроде бы существует — но скрипт выбрасывает ReferenceError.

ℹ️ Почему так происходит и как именно JavaScript ищет значения в разных областях видимости — рассказываем в карточках.

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

#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4
🔗 Что почитать

Rust вместо React: как я написал Telegram WebApp SDK

Эксперимент разработчика, который переписал фронт для Telegram-ботов на Rust и разобрался, где язык реально выигрывает у JS.

Frontend Security: The Most Ignored Skill Every Developer Needs in 2025

Medium-разбор, почему XSS, CSP и supply-chain атаки всё ещё ломают SPA, и как встроить безопасность в CI/CD.

Почему Google Переводчик «ломает» React (и другие веб-приложения)

Автор показывает реальные кейсы, обходные пути и поднимает важный вопрос: имеет ли фреймворк право на полный контроль над DOM?

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

#read_watch #react #js #ts
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🏓 Table tenniCSS

Мини-анимация, созданная только с помощью HTML и SCSS, без единой строки JS.

Отличный пример того, насколько мощными могут быть CSS-анимации.

🔗 Попробуйте запустить демо на CodePen

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5🥰3
🎁 Конкурс от Proglib Academy!

Кстати, если кто-то ещё не в курсе — у нас тут раздают MacBook Pro 14.
Да-да, не шутка, настоящий, железный, с M3 Pro

Но! Чтобы успеть пройти 2 недели обучения к 15 ноября, курс нужно взять до конца октября — и сейчас на всё скидка 40%.

Чтобы поучаствовать, нужно:

1️⃣ Покупаешь любой курс до конца октября;
2️⃣ Проходишь 2 недели обучения к 15 ноября;
3️⃣ Написать куратору в чат #розыгрыш.

До 15 ноября, потом всё — поезд (и макбук) уйдёт.

👉 Участвовать в розыгрыше
🥰3
💛 Hooks как слой бизнес-логики

В React кастомные хуки (useAuth, useCart, useFetch) — это не просто удобство, а полноценный слой бизнес-логики.

ℹ️ Они инкапсулируют сложные процессы (аутентификация, запросы, кеширование) и позволяют компонентам оставаться декларативными и чистыми.

📖 По документации React:

“Custom Hooks let you extract component logic into reusable functions.”
“By convention, a custom Hook’s name starts with ‘use’.”


Что это даёт:

— изолированная логика вне UI;
— переиспользуемые мини-сервисы;
— лаконичные компоненты.

Пример:


function useAuth() {
const [user, setUser] = useState(null);

const login = async (creds) => { /* запрос к API */ };
const logout = () => setUser(null);

return { user, login, logout };
}


🔥 Еще больше полезного на курсе «Архитектуры и шаблоны проектирования» (−40%)

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

#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰3🔥2
У каждого фронтендера в проекте есть свой «скелет в шкафу». Это тот самый компонент . Он начинался как безобидный ProductCard.tsx, а теперь в нём 1500 строк, он сам ходит в API, знает структуру ответа бэкенда до пятого уровня вложенности, дёргает localStorage, форматирует цены и отправляет аналитику.

Знакомая боль? Этот компонент — «серый кардинал» приложения. Он знает слишком много и делает всё сразу.

Стоит бэкенду поменять название поля product.price на product.cost — всё падает. Решили сменить fetch на axios? Компонент снова ломается. Это хрупкая архитектура, которая рассыпается от любого чиха.

Вся эта проблема идеально описывается классическими принципами Cohesion и Coupling. Вот только в классическом переводе начинается ад: «высокая связность» (Cohesion) и «низкая связанность» (Coupling).

Серьёзно, попробуйте в пятницу вечером на код-ревью быстро объяснить коллеге, какая из «связанностей» у него не та. Это же задачка для логопеда, а не для инженеров .

Тема Сенюков из Кинопоиска в своём недавнем посте предложил гениально простой выход из этого лингвистического тупика. Он предлагает использовать термины:

Cohesion → Связность
Coupling → Сцепленность

Сразу всё встаёт на свои места.

1. Высокая Связность (Cohesion). Это когда модуль делает одну понятную вещь. Он сфокусирован. (Наш 1500-строчный монстр, который делает всё, имеет низкую связность).

2. Низкая Сцепленность (Coupling). Это когда модуль почти ничего не знает о внешнем мире. Он не прибит гвоздями к fetch, localStorage или конкретной структуре API. Он получает всё необходимое снаружи (через props или context). (Наш монстр, наоборот, намертво сцеплен со всем).

Идея в том, чтобы вместо «серых кардиналов» собирать код как конструктор LEGO . Когда каждый компонент получает зависимости снаружи, его легко тестировать, мокать и переиспользовать.
4🔥3🥰2
Ваша история в IT начинается в Авито 🚀

Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью:

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

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

Условия:
➡️ зарплата и корпоративный ноутбук,
➡️ формат — офис, удалёнка или гибрид,
➡️ от 25 часов в неделю,
➡️ продолжительность — 9 месяцев,
➡️ компенсация питания, консультации с психологами и юристами,
➡️ после стажировки — возможность остаться в команде, если покажите крутой результат.

📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.
Please open Telegram to view this post
VIEW IN TELEGRAM
2
7 ways to hide element using CSS.png
2 MB
🎨 7 способов скрыть элемент с помощью CSS

Не все display: none одинаково полезны — иногда элемент нужно спрятать визуально, но оставить доступным для screen reader’ов.

🔤 Шпаргалка показывает, чем отличаются display, visibility, opacity, transform, clip-path и другие способы — и когда какой применять.

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰2👍1