Как вы удаляете неиспользуемый CSS-код?

Если вы используете большие CSS-библиотеки или фреймворки типа Bootstrap, размер "мертвого" CSS в вашем проекте может быть весьма велик. Существует множество инструментов для автоматического поиска и удаления таких неиспользуемых стилей — но можно ли им доверять?

🙈 Спойлер: не следует полностью полагаться на эти штуки.

Автор статьи рассматривает несколько подобных инструментов на примере своего сайта и дает полезные советы.

📗 Читать: https://prglb.ru/lzlg

#toos #css #performance

Современный CSS Reset

Маленький, но годный файл сброса стилей, который вы немедленно захотите включить в свой проект.

Забирайте

#css

Асинхронная функция vs Функция, возвращающая Promise

Одна из ключевых особенностей async функций — они всегда возвращают Promise. Вообще всегда. Автор статьи рассказывает, как это обстоятельство может сыграть вам на руку при отладке кода.

❓Но сначала попробуйте определить, что будет выведено в консоль:

function fn(obj) {
  const someProp = obj.someProp
  return Promise.resolve(someProp)
}

async function asyncFn(obj) {
  const someProp = obj.someProp
  return Promise.resolve(someProp)
}

asyncFn().catch(err => console.error('Catched'))
fn().catch(err => console.error('Catched')) 

‼️ Узнать ответ: https://prglb.ru/33pwj

#javascript #core

Как не нужно создавать React-компоненты?

Автор статьи обобщил свой опыт разработки на React и делится с читателями двумя советами:

👎 Не создавайте дочерние компоненты (Card и Card.Header)
👎 Не злоупотребляйте булевыми пропсами

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

👍🏻 Узнать, почему: https://prglb.ru/42ivr

#react #frameworks

​UIKit - модульный фреймворк для фронтенда

Легкий, проработанный и удобный инструмент для разработки:

😻 Настраиваемая сетка на флексах без лишних элементов
😻 Множество динамических компонентов из коробки
😻 Куча утилит для тонкой настройки
😻 Большие возможности для работы с графикой

Начать работать: https://3uikit.ru/

#tools #frameworks #css

13 npm-трюков для быстрой разработки

Менеджеры пакетов прочно вошли в наш повседневный рабочий процесс. Но знаете ли вы, что их потенциал не исчерпывается командами npm install и npm init?

Брэт Кэмерон собрал 13 приемов, которые могут увеличить вашу эффективность.

👍 шорткоды для самых частых операций
👍 полезные утилиты и npm-скрипты
👍 управление файлом package.json
👍 и даже кастомный npm init

Читайте и пользуйтесь: https://prglb.ru/4ghu7

#npm #tools

Lite YouTube Embed

Грузите YouTube-видео на ваших сайтах в 224 раза быстрее! Кастомный компонент lite-youtube — волшебная палочка производительности встраиваемого медиа.

Смотреть репозиторий: https://prglb.ru/dc1r

#performance #webcomponents

Из чего сделан JavaScript?

😲 Спойлер: Из примитивных значений, объектов, переменных, функций и ещё массы интересных штук.

Дэн Абрамов проводит небольшую экскурсию по языку и объясняет концепции, лежащие в его основе.

👉 Хороший способ обобщить свои знания и составить ментальную модель JavaScript: https://prglb.ru/36hnl

#javascript #core #beginners

Оптимизация производительности в Vue.js

Большое руководство (в четырех частях) по улучшению производительности в приложениях на Vue.js.

1️⃣ Ленивая загрузка и code splitting
Вы не обязаны грузить весь код приложения сразу, если юзеру он не нужен.
Разбираемся с динамическим импортом JS-модулей в webpack.

2️⃣ Производительность Vue.js Router
Делим код разных роутеров на отдельные бандлы и подгружаем их по мере необходимости.

3️⃣ Ленивая загрузка компонентов и Prefetching
Выкидываем из бандла компоненты модальных окон и прочие штуки, которые не нужны при первой загрузке страницы. А также правильно обрабатываем их динамическую подгрузку.

4️⃣ Оптимизация сторонних библиотек
Львиную долю бандла обычно занимают фреймворки и сторонние библиотеки утилит. Их тоже можно оптимизировать!

#performance #vue #webpack

CSS Grid: полный контроль над макетом

CSS Grid — это самая продвинутая на данный момент система управления разметкой страницы в CSS. Она позволяет контролировать сразу два измерения и создавать очень сложные макеты.

🤷‍♂️ Но для новичка может быть непросто разобраться в этом многообразии новых концепций и свойств. Поэтому вот вам еще одно большое руководство по гридам: https://prglb.ru/3ramo

Что тут есть?

👉 Подробный разбор элементов грид-сетки (контейнеров, линий, ячеек, областей)
👉 Введение в новые функции (minmax, repeat) и юниты размерности (fraction)
👉 Объяснение свойств позиционирования элемента в сетке
👉 Примеры готовых макетов
👉 Советы по отладке

#css #layout #grid

Шаблон Медиатор в JavaScript

🤓 Медиатор — поведенческий шаблон, который инкапсулирует взаимодействие между разными частями программы.

Чем больше у вас объектов, желающих общаться между собой, тем нужнее вам медиатор.

Узнать больше о преимуществах, недостатках и примерах использования паттерна в JavaScript: https://prglb.ru/2m6v2

#javascript #bestpractices

Хочешь начать карьеру Front-End разработчика через 7 месяцев? Но не веришь в силу сомнительных курсов?
Единственная программа подготовки разработчиков с оплатой после трудоустройства. Никаких рисков и скрытых условий. Гарантия трудоустройства в Москве.

Пройти тестовое задание 🙋‍♂️👉 https://clck.ru/M56C5

👇Что ждет студента:
1. Подготовка с личным ментором online по индивидуальной программе за 7 месяцев
2. Жесткий контроль знаний на каждом этапе
3. Обучение востребованному на рынке стеку технологий: HTML/CSS/JS, React + Redux
4. Отработка знаний в настоящем бизнес проекте, который дает опыт и строчку для резюме
5. Поддержка и общение со студентами-разработчиками в групповом чате slack (уже более 1300 участников)
6. Быстрое карьерное и финансовое развитие за счет программы поддержки на 2 года: митапы, мастер-классы, закрытые лекции со спикерами и offline интенсивы

Требования к кандидату:
— Обучение минимум 25 часов в неделю
— Проживание или готовность к переезду в Москву для трудоустройства

​Глитч-эффект для текста

Создаем прикольную анимацию помех за три минуты почти без JavaScript (при желании от него можно отказаться). Вся магия основана на CSS переменных.

Хочу так же: https://prglb.ru/1yd9v

#css #effects #animation

CSS-И-JS

Автор видео решил, что будет полезно переложить всю работу CSS на JavaScript. Теперь он пытается найти нужные элементы на странице с помощью DOM API и методов массивов.

Это довольно интересно и познавательно. Ему удалось имитировать даже некоторые псевдоэлементы.

Смотреть видео (5 штук): https://prglb.ru/m6nm
Изучать исходники: https://prglb.ru/5gg45

🎁 В качестве бонуса небольшая библиотека утилит для работы с DOM.

#css #javascript #video

Как правильно “делать” семантику

Разбираемся, что вообще такое эта ваша семантика и зачем она нужна в интернете.
‼️Спойлер: очень нужна.

Заодно повторяем важнейшие семантические теги HTML5.

🤔 Прежде чем приступать к чтению, попробуйте назвать хотя бы штук десять.

Проверить себя: https://prglb.ru/1hc2d

#accessibility #html

Настольный справочник по базовым принципам React

Вводное руководство для начинающих React-разработчиков:

🖍 JSX-синтаксис
🖍 Создание и использование компонентов
🖍 Обработка событий
🖍 Хуки с примерами использования

Читать: https://prglb.ru/2hmb1

#react #frameworks #beginners

​Запуск бессерверного JS-проекта с GitLab

Возможно, вы слышали о таких бессерверных FaaS-решениях, как AWS Lambda. Рассказываем, как это работает на примере запуска JavaScript-проекта с GitLab.

Подробная пошаговая инструкция: https://prglb.ru/4ka3n

#javascript #advanced #server

Chart.js - библиотека для создания графиков и диаграм

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

📈 Простой API
📊 Большие возможности кастомизации
📉 Отрисовывается все на canvas

Если срочно захотелось нарисовать график, держите: https://www.chartjs.org/

#tools #library

​Полное руководство по правильному использованию анимации в UX

В хорошем интерфейсе любое действие сопровождается микроанимациями. Это улучшает пользовательский опыт, делает перемещения плавными, акцентирует внимание на важных элементах страницы.

Из этого руководства вы узнаете:

👉 насколько быстрой и продолжительной должна быть анимация в разных ситуациях
👉 какую кривую движения следует выбрать
👉 как анимировать несколько взаимосвязанных элементов

Читать: https://prglb.ru/2u8ph

#interface #animation

6 полезных декораторов для Angular-приложений

Декоратор — замечательный паттерн, позволяющий легко добавлять разным объектам одинаковое дополнительное поведение.

В Angular мы можем писать собственные декораторы для компонентов. Посмотрим на 6 примеров, которые могут вам пригодиться:

👍 Автоматическая отписка от всех событий
👍 Мемоизация тяжелых и повторяющихся вычислений
👍 Троттлинг
👍 Debouncing
👍 Ограничение доступа к свойствам компонента
👍 Измерение времени выполнения функции

Забрать в свой проект: https://prglb.ru/3a74

#frameworks #angular

​Embla Carousel

Низкоуровневая заготовка для каруселей и слайдеров.

👌 Маленькая
👌 Без зависимостей
👌 Удобный API
👌 Легко расширяется

Используйте прямо из коробки или идеально настройте под себя!

Vanilla JavaScript
React

#tools #library #interface