​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

Google Fonts Knowledge

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

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

#fonts

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

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

​Эффект переворачивания страниц без JavaScript

https://proglib.io/w/ecbdc9c7

#snippets #animation

Что нужно уметь специалисту по анализу данных?

Область Data Science энергично развивается. Наука о данных – это не только нейросети, но и классические алгоритмы машинного обучения, да и вообще всё, что связано с вопросами анализа, обработки и представления информации в цифровой форме.

👨‍💻Data Scientist работает на пересечении нескольких областей: математики, программирования и бизнес-задач.

26 января в 19.00 МСК Артур Сапрыкин, один из дата сайентистов, разрабатывавших в Мегафон программы, анализирующие речь в форме текстов и аудио, расскажет, чем занимается Data Scientist, и какие основные навыки требуются от специалиста по анализу данных.

На бесплатном вебинаре вы:

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

Регистрация на сайте.

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 #обработкасобытий #ключи #ссылки

​Как использовать Fetch вместе с async/await

Статья рассказывает, как запрашивать данные, обрабатывать ошибки и даже отменять fetch-запросы с помощью async/await-синтаксиса: https://proglib.io/w/93070ac7

#async

​Миграция 17 000 файлов JS на TypeScript. Как это было

Опыт компании Etsy: https://proglib.io/w/ad791d56

#typescript

App shell UX с помощью сервис-воркеров и потоков

Переход между страницами без перезагрузки в стиле SPA, но без SPA. Реальный кейс портала dev.to: https://proglib.io/w/5e044635

​HTML5 and CSS3 All-in-One For Dummies (2014)
Автор: Andy Harris
Количество страниц: 1104

HTML5 и CSS3 являются важными инструментами для создания динамических веб-сайтов. Это доступное, универсальное руководство охватывает все, что вам нужно знать о каждой из этих технологий и их последних версиях, чтобы вы могли использовать их вместе. Книга также представляет способы использования HTML5 и CSS3 с JavaScript, MySQL и Ajax для создания веб-сайтов.

Книга:
✔️Охватывает использование JavaScript, PHP, MySQL и Ajax в контексте программирования динамических веб-страниц с использованием CSS3 и HTML5;
✔️Включает в себя отдельные мини-книги, в которых рассматриваются HTML, CSS, дизайн и верстка, Ajax;
✔️Описывает изменения в стандартах;
✔️Имеет веб-сайт, который содержит вспомогательные материалы, включая код и несколько ценных программ, которые полезны для веб-разработки.

Достоинства:
➕Детальные объяснения;
➕Позволяет быстро вникнуть в тему;
➕Содержит много ссылок на полезные ресурсы.

Недостатки:
➖Не замечено.

Скачать книгу

​7 способов использовать внедрение зависимостей в функциональном JS без фреймворка

https://proglib.io/w/2688b15f

#javascript #bestpractices #patterns

☕️ Объясняем алгоритм быстрой сортировки с помощью JavaScript

Раскладываем по полочкам, как работает алгоритм быстрой сортировки с помощью JavaScript с пошаговой иллюстрацией каждого шага.

https://proglib.io/w/5101d8ef

🧩 5 интересных головоломок и задач, чтобы отвлечься от рутины и немного пошевелить извилинами (выпуск 14)

В нашей еженедельной подборке мы подготовили 5 новых интересных алгоритмических, логических и математических задачек для отдыха и прокачки мозгов.

https://proglib.io/w/a8cbe993

Пишем фронтенд-компоненты на ванильном JS

В качестве эксперимента создадим простой компонент исключительно с помощью браузерного JavaScript.

https://proglib.io/w/a842fca8