Из чего сделан 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

​Безболезненный линтинг CSS с помощью stylelint

Полная настройка линтинга стилей на вашем проекте:

🤔 Разбираемся, зачем это вообще нужно
👌 Разрабатываем кодстайл
🛠 Автоматизируем все, что можно
☺️ Наслаждаемся

Тоже хочу наслаждаться: https://prglb.ru/198yt

#css #tools

Elevator Saga

Никогда не задумывались по какому алгоритму работает лифт в вашем подъезде? В игре Elevator Saga вы сами можете написать такой алгоритм.

0️⃣ Изучите API лифта
1️⃣ Напишите программу на JavaScript
2️⃣ Возите людей по этажам
3️⃣ Выполняйте челленджи
4️⃣ Чувствуйте себя крутым инженером

Играть: https://prglb.ru/2q5eo

#games #javascript

Стилизуем кнопки правильно

Кнопки есть практически в любом приложении. В их роли могут выступать самые разные элементы — собственно кнопки, ссылки и даже простые спаны. В любом случае важно правильно их оформить. В этом руководстве мы займемся созданием CSS-компонента кнопки.

Вы узнаете:

👉 Как правильно сбросить стили элемента button
👉 Как написать класс, который одинаково хорошо будет смотреться и на кнопке, и на ссылке
👉 Как грамотно стилизовать различные состояния кнопки

Читать: https://prglb.ru/50xlc

#css #interface

Дом света (Lighthouse)

Доклад Сергея Попова (HTML Academy) на Я❤️Frontend

Доступность, валидность, базовые принципы оптимизации — это чеклист, без которого нельзя запускать ни один сайт. Раньше приходилось собирать информацию по крупицам, использовать сложные решения для тестирования. А сейчас всё это собрано в одном инструменте Lighthouse, который встроен непосредственно в браузер! Как после этого вообще можно совершать ошибки? Мы либо не умеем использовать инструмент, либо не хотим его использовать. Этот доклад для первых.

Смотреть: https://prglb.ru/41iac

#performance #seo #tools #video

SVG Filter Effects

Серия статей, посвященных использованию SVG-фильтров: от общего описания до конкретных примеров.

👉 SVG Filters 101
Что представляют из себя SVG-фильтры и как ими пользоваться.

👉 Outline Text with feMorphology
Морфинг объектов с примитивом feMorphology.

👉 Poster Image Effect with feComponentTransfer
👉 Duotone Images with feComponentTransfer
Контроль над цветовыми каналами с примитивом feComponentTransfer.

👉 Conforming Text to Surface Texture with feDisplacementMap
Смещение контента с примитивом feDisplacementMap.

👉 Creating Texture with feTurbulence
Генерация шума Перлина (облака, дым, мрамор) с примитивом feTurbulence.

👉 Moving Forward
Полезные ресурсы и примеры использования SVG-фильтров

#svg

Разрушаем миф: React и доступность

Есть мнение, что React не позволяет создавать по-настоящему доступные веб-страницы.

☹️ не меняется title документа при переходе на другой роут
☹️ дополнительные обертки нарушают семантическую структуру
☹️ затруднено управление с клавиатуры

На самом деле это не так. Проблема заключается только в недостаточном знании особенностей React и его инфраструктуры.

В статье - несколько несложных и достаточно очевидных советов по сохранению доступности React-проектов.

Читать: https://www.deque.com/blog/debunking-the-myth-accessibility-and-react/

#frameworks #react #accessibility

Введение в тестирование фронтенда

Общее введение в тестирование. Разбирается, что вообще можно тестировать и какие инструменты для этого существуют.

👉 линтинг js и css: ESLint, Stylelint
👉 доступность: pa11y
👉 визуальное регрессионное тестирование: BackstopJS
👉 сквозное тестирование (end-to-end): Cypress

Для каждого инструмента есть небольшой пример настройки.

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

#testing