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

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

Заодно повторяем важнейшие семантические теги 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

Алгоритмы и структуры данных на JavaScript

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

Отличный справочник на любой случай.

Изучать: https://prglb.ru/3f6jn

#algorithms

Порог входа в профессию для JavaScript-разработчика минимален. При этом фронтенд-разработчик является одной из самых востребованных позиций и интерес к ней только растет.

В SkillFactory стартует целая специализация «Фронтенд-разработчик», где вы изучите HTML, CSS и JS с основ и до реальных рабочих задач.
Каждый новый инструмент вы закрепите проектом на практике. Всего реализуете 12 проектов для портфолио.
Здесь же вы уже сможете применять свои знания HTML, CSS в реальных проектах, освоите JS и фреймворки, научитесь работать с бэкендом. В рамках курса вы соберете по частям полноценный сквозной проект.

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

Узнайте больше о возможностях: https://clc.to/r5LIVA

​7 новых и интересных функций TypeScript

Обзор нововведений версий 3.5, 3.6 и 3.7, на которые вы обязательно должны обратить внимание:

👉 Optional Chaining
👉 Nullish Coalescing
👉 Алиасы рекурсивных типов
👉 Assert Signatures
👉 Улучшенный фидбек для ошибочного применения промисов
👉 Идентификаторы Unicode
👉 Инкрементальная компиляция

Читать: https://prglb.ru/4z8hr

#typescript

Snowpack

Инструмент для супербыстрой сборки веб-приложений:

👍 Практически не требует конфигурации
👍 Моментально обновляет проект в браузере
👍 Поддерживает Babel и Typescript из коробки

☹️ Работает только с JS, не поддерживает импорт CSS или изображений

Попробовать: https://www.snowpack.dev/

#tools

​​Нет времени объяснять! Пишем таймер обратного отсчёта на чистом CSS

Многие вещи в принципе невозможно сделать на CSS. Ещё больше вещей делать на CSS нерационально. Мы занимаемся этим только из болезненного любопытства и стремления познать все скрытые возможности инструмента.

https://proglib.io/sh/5ERUnBSxoW

​Object.assign() против spread-оператора

Разбираемся, если ли разница между применением метода Object.assing и деструктуризацией объекта с помощью spread-оператора.

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

Object.defineProperty(Object.prototype, 'myProp', {
  set: () => console.log('Setter called');
});

const obj = { myProp: 42 };

Object.assign({}, obj); 

const newObj = { ..obj }; 

Подробнее: https://prglb.ru/77ie

#javascript #core