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

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

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

Наши каналы: https://yangx.top/proglibrary/9197

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
Простой рабочий алгоритм использования SOLID на практике

Зачем нужны SOLID принципы? Что нужно сделать с множеством сущностей, чтобы код удовлетворял DIP?

🚀Расскажет завтра Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, Директор компании по разработке программного обеспечения «Hello World! Technologies».

🚀Всем участникам будет доступна запись вебинара и презентация спикера. Главное, чтобы вы были зарегистрированы на сайте.
Создаем Telegram-бота с помощью Node.js за 3 минуты

https://proglib.io/w/82227c78
Продвинутые CSS селекторы

Руководство по селекторам с полезными примерами их использования:

👉 Часть 1
👉 Часть 2

#css
Простой алгоритм использования SOLID на практике

Зачем нужны SOLID принципы? Что нужно сделать с множеством сущностей, чтобы код удовлетворял DIP?

Рассказывает Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, Директор компании по разработке программного обеспечения «Hello World! Technologies».

https://youtu.be/H2Lk3SQWhnc
Forwarded from React Junior
Недооцененные хуки React, которые вы упускаете

Статья (англ.): https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

В статье разобраны три встроенных хука, про которые мы уже читали в документации:

👉 useImperativeHandle
👉 useLayoutEffect
👉 useDebugValue

Помимо описания есть примеры использования, что очень приятно.

Вкратце:

useImperativeHandle позволяет вместо обычного рефа вернуть родительскому компоненту настроенный объект с нужными методами. Его удобно использовать, например, для управления модальным окном. При этом состояние хранится внутри компонента модалки, но родитель получает удобный способ его изменять. Используется в сочетании с функцией forwardRef.

useLayoutEffect вызывается после применения обновлений, но ДО того, как браузер их отрисует (синхронно, в отличие от useEffect). То есть он блокирует отрисовку и может использоваться для внесения изменений непосредственно в DOM компонента, чтобы пользователь не увидел изменений. Автор статьи использует его для управления скроллом при изменении контента страницы при роутинге.

useDebugValue улучшает опыт разработчика при логировании кастомных хуков. По умолчанию, если в кастомном хуке используются встроенные хуки типа useState, в React DevTools они не подписаны - просто какой-то State. Нужно помнить порядок использования, чтобы понять, какой стейт к чему относится. useDebugValue позволяет вывести что-нибудь полезное в панель отладки, основываясь на текущих значениях состояний.

#ссылки #хуки
Что такое и зачем нужны шаблонизаторы HTML

Есть много способов сэкономить время и упростить жизнь разработчика, например, шаблонизаторы для HTML. Разбираемся, что это и как они работают: https://proglib.io/w/3659c4cc

В статье есть тест, чтобы проверить ваши знания по шаблонизаторам 😏

#html #tools
Митап LoGeek Night JavaScript: code review 27 января

На митапе вы узнаете и увидите, как неработающий JavaScript код может работать, и наоборот, как работающий JavaScript код может вести себя не корректно.

Андрей Касаткин, ведущий разработчик и Lead Designer в Luxoft, расскажет, как подобное возможно, а также потенциальные пути решения подобных ситуаций.

У вас будет возможность задать вопросы спикерам и принять участие в розыгрыше сертификата на обучение на онлайн-курсах от Luxoft Training!
Подробности и регистрация по ссылке.

Чтобы быть в курсе новостей, анонсов митапов, полезных материалов читайте телеграм-канал Luxoft.
5 частых ошибок при использовании Promise

Разбираемся, как на самом деле работают обещания в JavaScript, и учимся избегать распространенных ошибок.

https://proglib.io/w/85deda79

#javascript
Как реализовать редактор форматированного текста в вашем React-приложении

Удобный WYSISYG-редактор с библиотекой Draft.js под капотом: https://proglib.io/w/9e1e6942

#library #react
5 способов уменьшения размера пакетов JavaScript

5 способов уменьшить размер пакетов JavaScript, чтобы избавиться от проблем с производительностью: https://proglib.io/w/bac7390f

#performance #tools
⚠️ Как не нужно учить TypeScript: 5 распространенных ошибок

Изучить TypeScript не так просто, как кажется, и новички легко сбиваются с правильного пути. Рассматриваем пять самых популярных ошибок начинающих разработчиков.

https://proglib.io/w/50288ee5

#typescript
Что такое Vite: руководство по современному супербыстрому инструменту

Vite - это новое поколение инструментов для разработки фронтенда. Он очень быстрый и не зависит от фреймворка. Разбираемся, может ли он заменить CRA и webpack: https://proglib.io/w/5114eb57

#tools
Самые залайканные codepens в 2021

Подборка проектов с самым большим количеством сердечек за 2021 год: https://proglib.io/w/a30e146f

#snippets
Организация тем в CSS: лучшие практики

Три уровня абстракции при добавлении CSS-тем в ваш проект: https://proglib.io/w/3e059edf

#css
Простое объяснение перегрузки функций в TypeScript

https://proglib.io/w/b4a4e56c

#typescript
Google Fonts Knowledge

Большая библиотека материалов о шрифтах и типографике от Google и экспертов со всего мира.

https://proglib.io/w/8c224191

#fonts
Привет! «Библиотека программиста» проводит анонимный опрос по теме: «Как вы управляете своими финансами?» Опрос займет не более 3 минут вашего времени.

Пройти его можно по ссылке