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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
👾🎉 Открыта регистрация на главный tech-ивент года. Хедлайнер — группа CREAM SODA!

ЛЦТ.Фест — это место, где технологии встречаются с людьми, а люди встречаются с бизнесом и будущими работодателями.

Уже 25 октября кластер «Ломоносов» превратится в огромную площадку будущего:
⚡️ интерактивные зоны от VK, Газпромбанк.Тех, Х5, ОЭЗ «Алабуга» и Kaspersky
⚡️ фейл-конференция о неудачах, которые сделали бизнес сильнее
⚡️ дискуссия о том, как ИИ нас переиграл и переиграл ли
⚡️ IT-слем «Зумеры против миллениалов — кто задаёт тон индустрии»
⚡️ мастер-лекции от лидеров VK, Яндекса, Kaspersky, Авито, X5 и других

🪩 И, конечно, куда без вечерней части: концерт группы CREAM SODA и хор-караоке!

Фестиваль открыт для всех, кто интересуется технологиями, идеями и хочет встретить больше единомышленников
📅 Когда: 25 октября
📍 Где: кластер «Ломоносов»

Необходима регистрация.

Посмотреть программу и зарегистрироваться 👉🏻https://lct-fest2025.ru/
🥰3
😶 Когда каждый onClick — минус FPS

Кажется, что всё просто: список, onClick — готово. Но при сотнях элементов каждый ререндер создаёт новые функции в JSX.
React считает их изменёнными и перерисовывает даже те строки, что не менялись.

На демо — незаметно. На проде — больно.

🔤 Почему это работает:

Каждый ререндер создаёт новые колбэки → React считает пропы изменёнными → перерисовывает.

useCallback стабилизирует ссылку, и компонент больше не «дёргается» без причины.

🔤 На проде:

— Если список огромный — рендерьте только видимую часть (react-window, react-virtualized).

— Если элемент сложный — выносите его в memo-компонент с передачей колбэка через пропсы.

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

#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
5🥰2🔥1
😨 Как работает замыкание

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

🔤 Магия? Нет — просто JavaScript хранит не только значения, но и контексты.

Мы собрали 4 карточки, чтобы разобраться, как именно это устроено под капотом 💡

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

#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
51🔥1
🔥 Когда понимаешь SOLID — жизнь становится проще

В октябре действует скидка 40% на все курсы от Proglib Academy, включая интенсив «Архитектуры и шаблоны проектирования»

📘 На интенсиве ты:

— разберёшься, как проектировать приложения, которые не ломаются при каждом изменении;
— освоишь SOLID-принципы, IoC, адаптеры и фабрики;
— научишься строить масштабируемые архитектуры;
— создашь собственную игру «Звёздные войны».

👨‍💻 Примеры кода на C#, Java, Python, PHP, C++ и JavaScript. Главное — понимать принципы, а не язык.

Преподаватель — Евгений Тюменцев, директор компании HWdTech, разрабатывал многопоточные кроссплатформенные приложения для IBM Watson.

📆 Формат: онлайн, 1 месяц.
📚 9 лекций + 2 бонусных занятия + практика.

Интенсив подойдёт джунам, которые хотят апнуться до мидла, и мидлам, мечтающим о роли архитектора.

👉 Переходи к курсам со скидкой 40%
🥰4
😸 Разбор задачи

Ранее мы выкладывали задачу для джуна+.

Сегодня разберем, что происходит в этом коде и как работают присваивания и ссылки на объекты в JavaScript.

🔤 Разбор:

1. let a = { n: 1 }; — создаём объект { n: 1 } и присваиваем его переменной a.

2. let b = a; — b теперь ссылается на тот же объект, что и a.

3. a.x = a = { n: 2 };

• Присваиваем новому объекту { n: 2 } переменную a.

• После этого свойству x объекта { n: 2 } присваиваем сам объект { n: 2 }.

4. console.log(a.x); — выводит undefined, так как свойство x в новом объекте { n: 2 } не было установлено.

5. console.log(b.x); — выводит объект { n: 2 }, потому что b ссылается на старый объект { n: 1 }, который теперь имеет свойство x, указывающее на { n: 2 }.

Ответ:

a.x — undefined
b.x — { n: 2 }


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

#code_challenge
Please open Telegram to view this post
VIEW IN TELEGRAM
4😢3
🔍 Валидация форм без раздражения

Вместо :invalid, который срабатывает сразу, используйте :user-invalid.

Что это дает:

— Валидация срабатывает только после взаимодействия с полем

— Не показываем ошибки в пустой форме при загрузке

— Лучший UX без дополнительного JS

⚙️ Поддержка: Chrome 119+, Safari 16.5+, Firefox 88+

Сейчас на курсы Proglib действует −40%🥰

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
15🔥2🥰2
💻 На каком железе вы работаете

Интересно узнать реальную статистику — от бюджетников до топовых сборок.

🔤 Любое железо приветствуется — Air на 8 ГБ, Pro, ThinkPad, игровой ноут, Desktop.

✏️ Пишите в комментах:

— Модель, процессор, RAM, SSD, год.

— Всё работает или есть проблемы?

— Довольны или хотите апгрейд?

Соберём честную картину 📊💪

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱7🤔3🥰2
🦾 Инструмент для работы с шаблонами URL

API URLPattern — это простой и мощный инструмент для сопоставления и валидации URL.

🆖 В карточках ниже мы покажем, как эффективно использовать этот API в разработке.

🔗 Оригинал статьи

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

#stack #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍2🥰2
🎯 Feature-Sliced Design: организация кода по фичам

Feature-Sliced Design (FSD) — это методология для архитектуры фронтенд-приложений, ориентированная на упрощение понимания кода и его стабильность при постоянных изменениях бизнес-требований.

Структура из 7 слоёв:

1️⃣ app/ — инициализация приложения: роутинг, точки входа, глобальные стили, провайдеры

2️⃣ processes/ — устаревший слой, сейчас рекомендуется использовать features и app

3️⃣ pages/ — полные страницы приложения или крупные части страницы при вложенной маршрутизации

4️⃣ widgets/ — крупные самодостаточные блоки функциональности или UI, реализующие целый сценарий использования

5️⃣ features/ — продуктовые функции, которые приносят
бизнес-ценность пользователю

6️⃣ entities/ — бизнес-сущности, с которыми работает проект (например, user или product)

7️⃣ shared/ — переиспользуемая функциональность, не привязанная к специфике проекта или бизнеса


〰️ Модуль может импортировать другие слайсы только с нижележащих слоёв. Верхний слой не может использовать модули из других слоёв.

⚙️ FSD универсальна: её можно использовать в любых проектах с любым стеком, языком или фреймворком.

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

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

#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
3🥰3👏2🤔1