​Оптимизация производительности фронтенда

Хороший лонгрид на выходные:

Часть 1. Critical Render Path
Часть 2. Event loop, layout, paint, composite

#performance

Пользовательские события в JavaScript: полное руководство

Все, что вы должны знать о создании и использовании кастомных событий:
https://proglib.io/w/8df9f982

#javascript

​Управление памятью в JavaScript

Статья рассказывает об управлении памятью и принципах работы сборщика мусора, а также о том, как избежать наиболее распространенных видов утечек памяти: https://proglib.io/w/0ec1c5e3

#performance

🎮 Игры на JavaScript

✔️ Тетрис на JavaScript: разбираем возможности языка через геймификацию
✔️ Пятнашки на JavaScript и Canvas

#games

☕️ Доступный автокомплит с нуля на JavaScript

Руководство по созданию компонента автодополнения с учетом всех требований доступности.

https://proglib.io/w/bef1e2f6

#javascript #interface #accessibility

5 крутых функций JavaScript, о которых не знает большинство разработчиков

С помощью JavaScript можно делать одно и то же разными способами. С выпуском каждой новой спецификации ECMAScript, добавляя новые методы и операторы, чтобы сделать код короче и где-то более читабельным.

https://proglib.io/w/0a5b288d

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

В наши дни вокруг фронтенд-фреймворков много шумихи, но нужны ли они на самом деле? https://proglib.io/w/a842fca8

#tools #frameworks

Вокруг поиска первой работы в IT много вопросов и проблем: большой конкурс на позицию junior, провалы на собеседованиях, глобальная незаинтересованность рынка в джунах, особенно если им больше 30. Мы, издание «Библиотека программиста», решили провести опрос среди всех, кто когда-либо искал первую работу в IT-сфере, чтобы понять кто, каким образом и с какой эффективностью (не) справляется с этой задачей. Опрос займет около 3 минут, результаты опубликуем на сайте proglib.io ориентировочно 19 сентября.

https://forms.gle/kuFeTtoHhKQW2Ekc8

​Переход от сплошного текста к вырезанному при скролле

Интересный эффект изменения стиля текста от сплошного цвета до вырезанного на HTML и CSS: https://proglib.io/w/4bd9d3d6

#css #design

Нет, утилитарные классы - это не то же самое, что инлайн-стили

https://proglib.io/w/d7a9e569

#css #tools

Паттерны для работы с API

В статье описаны три шаблона работы с API, которые сделают ваше приложение более устойчивым.

https://proglib.io/w/933f584f

#bestpractices

Вы не знаете как должны работать модальные окна

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?

https://proglib.io/w/21f5e2cc

#interface #accessibility

Хочешь освоить востребованную профессию Front-End разработчика и работать в топовых IT-компаниях Москвы? Расходы во время обучение берет на себя JM, а оплата только после твоего трудоустройства программистом.

🙋‍♂️👉 Подать заявку: https://clck.ru/XMkwJ

• Ты освоишь востребованные технологии, а опытные наставники будут контролировать усвоение материала.
• Ты получишь опыт в бизнес-проекте необходимый для трудоустройства.
• A HR-специалисты помогут составить резюме и подготовят тебя к прохождению трудных собеседований.
• Поддержка от мощного сообщество единомышленников.

Каждый выпускник получает от трех предложений о работе. Поэтому работодателя выберешь самостоятельно после успешных собеседований.

​Learn Vue JS 2 + Google Maps API for Beginners (2020)
Автор: Raja Tamil
Количество страниц: 147

Google Maps API - надежный инструмент, который часто выбирают при создании приложений, работающих с местоположением пользователя. В книге автор учит создавать программы с использованием Vue.js, приводя в пример некоторые приложения. Книга основана на популярном курсе с Udemy.

Достоинства:
➕Хорошо подходит для новичков;
➕Множество примеров кода.

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

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

Введение в библиотеку Solid

Solid - реактивная JavaScript-библиотека для создания UI без использования виртуального DOM.

https://proglib.io/w/2589b76e

Пятая онлайн-конференция Design is Frontend пройдет 14 сентября

В программе 4 доклада о реактивных фреймворках в e‑commerce:
— выбор React, Vue или Angular;
— компонентный подход к разработке e‑commerce на базе фреймворков;
— проектирование библиотеки компонентов;
— мастер-класс по резиновому дизайну и вёрстке в Figma.

Спикеры — фронтенд-тимлиды и ведущие UX-дизайнеры СберМаркета, AFFINAGE, Ostrovok.ru и Voximplant.

Регистрация → https://dif.affinage.ru

Переходя с HEX и RGB на HSL

Шестнадцатеричный формат цвета и RGB(A) широко используются верстальщиками, но они не являются интуитивно понятными или удобными для чтения, не говоря уже о настройке. Когда требуется подобрать контрастный цвет или подобрать множественное сочетание, приходится прибегать к графическим интерфейсам, что не очень удобно и точно. Но в CSS существует еще одна возможность определить цвет – HSL.

https://proglib.io/w/74275a4a

#css

Функции 3D-трансформации в CSS

Добавьте еще одно измерение к веб-страницам с помощью новых функций 3D-преобразования в CSS. Разбираемся с масштабированием, вращением, перспективой, а также проблемами z-index и подводными камнями браузеров.

https://proglib.io/w/0956bd24

#css

​Изменение цвета шрифта с помощью CSS в зависимости от фона

https://proglib.io/w/4ce36ffe

#css #interface

Создаем текстовый редактор на React.js

Реализация одного из самых сложных веб-компонентов на React: https://proglib.io/w/ee269d61

#interface #react #tools

Микрофронтенды: взаимодействие между приложениями на Single-Spa и RxJS

👉 Часть 1. Связь микрофронтендов с Single-Spa
👉 Часть 2. Взаимодействие приложений

#microfrontends #tools