Что фронтендер должен знать про UX и зачем прокачиваться в этом направлении
https://proglib.io/w/357ea1f9
#ux
https://proglib.io/w/357ea1f9
#ux
Хекслет
Что фронтендер должен знать про UX и зачем прокачиваться в этом направлении
Как именно фронтендер влияет на пользовательский опыт? На что нужно обращать внимание во время работы над проектом и что нужно изучать, чтобы лучше понимать UX? Чтобы разобраться в этих вопросах, пригласили опытных экспертов в области фронтенд-разработки…
Простой алгоритм использования SOLID на практике
Зачем нужны SOLID принципы? Что нужно сделать с множеством сущностей, чтобы код удовлетворял DIP?
Рассказывает Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, Директор компании по разработке программного обеспечения «Hello World! Technologies».
https://youtu.be/H2Lk3SQWhnc
Зачем нужны SOLID принципы? Что нужно сделать с множеством сущностей, чтобы код удовлетворял DIP?
Рассказывает Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, Директор компании по разработке программного обеспечения «Hello World! Technologies».
https://youtu.be/H2Lk3SQWhnc
YouTube
Простой алгоритм использования SOLID на практике
Зачем нужны SOLID принципы? Что нужно сделать с множеством сущностей, чтобы код удовлетворял DIP?
Рассказывает Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, Директор компании по разработке…
Рассказывает Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, Директор компании по разработке…
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 позволяет вывести что-нибудь полезное в панель отладки, основываясь на текущих значениях состояний.
#ссылки #хуки
Статья (англ.): 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 позволяет вывести что-нибудь полезное в панель отладки, основываясь на текущих значениях состояний.
#ссылки #хуки
LogRocket Blog
Underrated React Hooks you’re missing out on - LogRocket Blog
We cover three underrated React Hooks for writing functional components over class components, exploring their use case and syntax.
Что такое и зачем нужны шаблонизаторы HTML
Есть много способов сэкономить время и упростить жизнь разработчика, например, шаблонизаторы для HTML. Разбираемся, что это и как они работают: https://proglib.io/w/3659c4cc
В статье есть тест, чтобы проверить ваши знания по шаблонизаторам 😏
#html #tools
Есть много способов сэкономить время и упростить жизнь разработчика, например, шаблонизаторы для HTML. Разбираемся, что это и как они работают: https://proglib.io/w/3659c4cc
В статье есть тест, чтобы проверить ваши знания по шаблонизаторам 😏
#html #tools
Митап LoGeek Night JavaScript: code review 27 января
На митапе вы узнаете и увидите, как неработающий JavaScript код может работать, и наоборот, как работающий JavaScript код может вести себя не корректно.
Андрей Касаткин, ведущий разработчик и Lead Designer в Luxoft, расскажет, как подобное возможно, а также потенциальные пути решения подобных ситуаций.
У вас будет возможность задать вопросы спикерам и принять участие в розыгрыше сертификата на обучение на онлайн-курсах от Luxoft Training!
Подробности и регистрация по ссылке.
Чтобы быть в курсе новостей, анонсов митапов, полезных материалов читайте телеграм-канал Luxoft.
На митапе вы узнаете и увидите, как неработающий JavaScript код может работать, и наоборот, как работающий JavaScript код может вести себя не корректно.
Андрей Касаткин, ведущий разработчик и Lead Designer в Luxoft, расскажет, как подобное возможно, а также потенциальные пути решения подобных ситуаций.
У вас будет возможность задать вопросы спикерам и принять участие в розыгрыше сертификата на обучение на онлайн-курсах от Luxoft Training!
Подробности и регистрация по ссылке.
Чтобы быть в курсе новостей, анонсов митапов, полезных материалов читайте телеграм-канал Luxoft.
5 частых ошибок при использовании Promise
Разбираемся, как на самом деле работают обещания в JavaScript, и учимся избегать распространенных ошибок.
https://proglib.io/w/85deda79
#javascript
Разбираемся, как на самом деле работают обещания в JavaScript, и учимся избегать распространенных ошибок.
https://proglib.io/w/85deda79
#javascript
Как реализовать редактор форматированного текста в вашем React-приложении
Удобный WYSISYG-редактор с библиотекой Draft.js под капотом: https://proglib.io/w/9e1e6942
#library #react
Удобный WYSISYG-редактор с библиотекой Draft.js под капотом: https://proglib.io/w/9e1e6942
#library #react
5 способов уменьшения размера пакетов JavaScript
5 способов уменьшить размер пакетов JavaScript, чтобы избавиться от проблем с производительностью: https://proglib.io/w/bac7390f
#performance #tools
5 способов уменьшить размер пакетов JavaScript, чтобы избавиться от проблем с производительностью: https://proglib.io/w/bac7390f
#performance #tools
⚠️ Как не нужно учить TypeScript: 5 распространенных ошибок
Изучить TypeScript не так просто, как кажется, и новички легко сбиваются с правильного пути. Рассматриваем пять самых популярных ошибок начинающих разработчиков.
https://proglib.io/w/50288ee5
#typescript
Изучить TypeScript не так просто, как кажется, и новички легко сбиваются с правильного пути. Рассматриваем пять самых популярных ошибок начинающих разработчиков.
https://proglib.io/w/50288ee5
#typescript
Библиотека программиста
⚠️ Как не нужно учить TypeScript: 5 распространенных ошибок
Изучить TypeScript не так просто, как кажется, и новички легко сбиваются с правильного пути. Рассматриваем пять самых популярных ошибок начинающих разработчиков.
Что такое Vite: руководство по современному супербыстрому инструменту
Vite - это новое поколение инструментов для разработки фронтенда. Он очень быстрый и не зависит от фреймворка. Разбираемся, может ли он заменить CRA и webpack: https://proglib.io/w/5114eb57
#tools
Vite - это новое поколение инструментов для разработки фронтенда. Он очень быстрый и не зависит от фреймворка. Разбираемся, может ли он заменить CRA и webpack: https://proglib.io/w/5114eb57
#tools
Самые залайканные codepens в 2021
Подборка проектов с самым большим количеством сердечек за 2021 год: https://proglib.io/w/a30e146f
#snippets
Подборка проектов с самым большим количеством сердечек за 2021 год: https://proglib.io/w/a30e146f
#snippets
Организация тем в CSS: лучшие практики
Три уровня абстракции при добавлении CSS-тем в ваш проект: https://proglib.io/w/3e059edf
#css
Три уровня абстракции при добавлении CSS-тем в ваш проект: https://proglib.io/w/3e059edf
#css
Google Fonts Knowledge
Большая библиотека материалов о шрифтах и типографике от Google и экспертов со всего мира.
https://proglib.io/w/8c224191
#fonts
Большая библиотека материалов о шрифтах и типографике от Google и экспертов со всего мира.
https://proglib.io/w/8c224191
#fonts
Google Fonts
Fonts Knowledge - Google Fonts
Making the web more beautiful, fast, and open through great typography
Привет! «Библиотека программиста» проводит анонимный опрос по теме: «Как вы управляете своими финансами?» Опрос займет не более 3 минут вашего времени.
Пройти его можно по ссылке
Пройти его можно по ссылке
Что нужно уметь специалисту по анализу данных?
Область Data Science энергично развивается. Наука о данных – это не только нейросети, но и классические алгоритмы машинного обучения, да и вообще всё, что связано с вопросами анализа, обработки и представления информации в цифровой форме.
👨💻Data Scientist работает на пересечении нескольких областей: математики, программирования и бизнес-задач.
26 января в 19.00 МСК Артур Сапрыкин, один из дата сайентистов, разрабатывавших в Мегафон программы, анализирующие речь в форме текстов и аудио, расскажет, чем занимается Data Scientist, и какие основные навыки требуются от специалиста по анализу данных.
На бесплатном вебинаре вы:
– Получите представление о профессии и поймете, как двигаться дальше.
– Узнаете про рабочий день специалиста по анализу данных, и с какими задачами он сталкивается ежедневно.
Регистрация на сайте.
Область Data Science энергично развивается. Наука о данных – это не только нейросети, но и классические алгоритмы машинного обучения, да и вообще всё, что связано с вопросами анализа, обработки и представления информации в цифровой форме.
👨💻Data Scientist работает на пересечении нескольких областей: математики, программирования и бизнес-задач.
26 января в 19.00 МСК Артур Сапрыкин, один из дата сайентистов, разрабатывавших в Мегафон программы, анализирующие речь в форме текстов и аудио, расскажет, чем занимается Data Scientist, и какие основные навыки требуются от специалиста по анализу данных.
На бесплатном вебинаре вы:
– Получите представление о профессии и поймете, как двигаться дальше.
– Узнаете про рабочий день специалиста по анализу данных, и с какими задачами он сталкивается ежедневно.
Регистрация на сайте.
Forwarded from React Junior
10 вопросов по React начального уровня с интервью
Статья (англ.): https://javascript.plainenglish.io/10-entry-level-react-interview-questions-5a8ea74e2130
Проверим себя.
1. Что такое Virtual DOM и как он работает?
👉 Ответ
Виртуальный DOM - это виртуальное представление реального DOM, которое проще обновлять. Снэпшоты старого и обновленного состояние сравниваются и находится самый быстрый способ внести изменения в настоящий DOM.
2. Назовите самые важные методы жизненного цикла (классовых компонентов) и зачем их использовать. А также альтернативные хуки (React Hooks)
👉 Ответ
При монтировании компонента работают:
- constructor ,
- static getDerivedStateFromProps ( useEffect с массивом зависимостей),
- render ,
- componentDidMount (useEffect)
При перерендере:
- static getDerivedStateFromProps (useEffect с массивом зависимостей)
- shouldComponentUpdate ( useMemo )
- render
- getSnapshotBeforeUpdate (кастомные хуки для сохранения предыдущего состояния)
- componentDidUpdate (useEffect)
При размонтировании:
- componentWillUnmount (useEffect с возвращением функции для сброса эффекта)
3. Зачем мы используем стрелочные функции в React?
👉 Ответ
Чтобы не создавать новый контекст выполнения (this), а выполнять все действия в контексте компонента. Если не использовать стрелочные функции, придется привязывать все методы к экземпляру компонента (в конструкторе).
4. Что такое ключи (keys) и зачем они нужны?
👉 Ответ
Ключи нужны для оптимизации рендера массивов значений. Они позволяют привязать каждый элемент к соответствующему значению в массиве и не обновлять его без необходимости.
5. В чем преимущества React перед настоящими "фреймворками" типа Angular?
Вопрос очень спорный, но пусть будет.
👉 Ответ
React легкий, использует JSX (проще освоиться) и виртуальный DOM (быстрее работает). Поток данных идет в одном направлении сверху вниз (проще отлаживать). Супер развитая экосистема, куча инструментов для любых задач.
Остальные вопросы уже по JavaScript, можно посмотреть в статье, чтобы освежить знания.
#компоненты #жизненныйциклкомпонента #хуки #виртуальныйdom #обработкасобытий #ключи #ссылки
Статья (англ.): https://javascript.plainenglish.io/10-entry-level-react-interview-questions-5a8ea74e2130
Проверим себя.
1. Что такое Virtual DOM и как он работает?
👉 Ответ
👉 Ответ
-
-
-
-
При перерендере:
- static getDerivedStateFromProps (useEffect с массивом зависимостей)
-
- render
-
-
При размонтировании:
-
👉 Ответ
👉 Ответ
Вопрос очень спорный, но пусть будет.
👉 Ответ
#компоненты #жизненныйциклкомпонента #хуки #виртуальныйdom #обработкасобытий #ключи #ссылки
Medium
10 Entry Level React Interview Questions
Interviews are the direct ways to land a job in more ways than you think. More ways than one you may ask? Yes! Interviews are not only for…
Как использовать Fetch вместе с async/await
Статья рассказывает, как запрашивать данные, обрабатывать ошибки и даже отменять fetch-запросы с помощью async/await-синтаксиса: https://proglib.io/w/93070ac7
#async
Статья рассказывает, как запрашивать данные, обрабатывать ошибки и даже отменять fetch-запросы с помощью async/await-синтаксиса: https://proglib.io/w/93070ac7
#async