JavaScript для нетерпеливых программистов (ES2022 edition)

Свежая книга Акселя Раушмайера: https://proglib.io/w/ea59655b

(Превью доступно онлайн бесплатно)

#books #javascript

Frontend case studies

Большой пополняемый список статей о реальной организации фронтенда в разных компаниях (и российских, и зарубежных): https://proglib.io/w/92462ae3

#digest

8 проектов на Vue, которые должен сделать каждый новичок

8 идей несложных проектов (с видео), с которыми вы быстрее изучите возможности фреймворка и научитесь использовать разные инструменты: https://proglib.io/w/78ce6cae

#vue #projects

Ленивая загрузка компонента в Angular без роутинга

Ленивая загрузка компонентов - это очень полезная функция. В Angular - это простая процедура, реализованная через роутинг. Но, что если вы не хотите использовать роутер или нужно загрузить компонент программно?

https://proglib.io/w/475d7d90

#performance #lazy #angular

​Актуальные форматы изображений в вебе

PNG, WebP или AVIF? Как выбрать формат и правильно подготовить изображение для использования: https://proglib.io/w/d2adfc35

#performance

«Библиотека программиста» находится в поиске переводчика технических статей и автора оригинальных статей.

Обязанности:
– Письменный перевод с английского на русский язык технических статей (Medium, Dev.to и т. д.)
– Написание оригинальных статей.

Объем:
– от 3 до 10 тыс. знаков с пробелами.

Тематика:
– Мобильная разработка, информационная безопасность, Data Science, бэкенд веб-приложений, фронтенд-разработка, системное программирование, базы данных.

Языки:
– Python, SQL, JavaScript, C#, Java.

Пишите на [email protected]

​Извлечение данных: три способа в React

Простой Fetch API, RTK Query из Redux Toolkit и React Query. Сравниваем и ищем лучший: https://proglib.io/w/9bad0bc7

#react

​Анимации в библиотеке компонентов

Виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection: https://proglib.io/w/af55b5d2

#animation #angular #interface

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

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

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

Зарегистрироваться бесплатно.

​Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Как происходит перенос контента в браузере и как мы можем на него повлиять: https://proglib.io/w/fb2facf2

#css

​React Single Page Application и React-Router для начинающих

Создаем первое одностраничное приложение на React: https://proglib.io/w/6c99f5a4

#react #spa

​Какая одна вещь может сделать ваш сайт лучше?

Энди Бэлл считает, что это Последовательная, плавномасштабируемая типографика и система отступов

#css #interface

🥨 Попап вместо селекта

✨Новые HTML-элементы✨ наконец-то решат старую проблему: https://proglib.io/w/cef84c87

#interface #video

Изучение адаптивного дизайна

Курс из 15 глав, из которого вы узнаете все о responsive-дизайне в вебе (англ.): https://proglib.io/w/460794c0

#design #courses

​Анимированные загрузчики страниц на CSS

https://proglib.io/w/f31f9165

#css #interface

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

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

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

🚀Всем участникам будет доступна запись вебинара и презентация спикера. Главное, чтобы вы были зарегистрированы на сайте.

​Продвинутые CSS селекторы

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

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

#css

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

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

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

https://youtu.be/H2Lk3SQWhnc

Недооцененные хуки 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 позволяет вывести что-нибудь полезное в панель отладки, основываясь на текущих значениях состояний.

#ссылки #хуки