​Введение в доступность в вебе

Доступность это не просто медицинский термин, применимый к небольшому проценту людей. Все, что мы создаем, бесполезно, если оно недоступно.

Чтобы юзерам было удобно пользоваться вашим сайтом, не забывайте о доступности во всех сферах разработки. Вот вам полный гид (в переводе на русский):

👌 Пишем HTML, не забывая о доступности
https://prglb.ru/1lqgc

👌 Пишем JavaScript, не забывая о доступности
https://prglb.ru/41bs2

👌Пишем CSS, не забывая о доступности
https://prglb.ru/3s58i

Краткий спойлер

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

А в статьях еще очень много полезных советов, реальных кейсов и ссылок.

#accessibility #html #css #javascript

Настройка AMP-страниц на сайте

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

AMP гораздо строже обычного HTML, поэтому многие теги в нем нельзя использовать, а для некоторых существуют amp-заменители (например, amp-img вместо img).

В то же время в AMP есть много готовых компонентов из коробки.

📗 Читать документацию: https://prglb.ru/1uns2

#performance

Angular в 2020

Angular — самый серьезный представитель большой JavaScript-тройки. Что ждет его в 2020, какие улучшения и нововведения?

🤓 Узнать: https://prglb.ru/5peav

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

🤔 Проверить: https://prglb.ru/rue4

#angular #frameworks

​Коллекция CSS-лоадеров

Несколько эффектных лоадеров на чистом CSS. Пусть ожидание будет приятным ⏳

Забирайте: https://prglb.ru/4mb2r

#snippets #interface #css

​Шаблоны проектирования в JavaScript простыми словами

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

Паттерны проектирования - это проработанные решения популярных проблем программирования. Возможно, один из них как раз подойдет для вашего проекта.

В нашем лонгриде разобрано больше 20 самых популярных паттернов. Все примеры очень жизненные и реализованы на JavaScript.

📖 Читать статью: https://prglb.ru/1a51u

#bestpractices #javascript

Мигрируем с JavaScript на TypeScript быстро и безболезненно

Хотите воспользоваться преимуществами строго типизированного языка, но боитесь сложной конфигурации? Мы покажем, как легко и быстро ввести TypeScript в ваш проект.

Честное слово, не придется даже конфиг вебпака переписывать. Это очень просто и удобно!

Узнать: https://prglb.ru/36g4m

#typescript #tools

​Что умеют браузеры в 2020?

Современные браузеры - это весьма крутые приложения, которые могут делать много полезных и интересных штук, например, проводить платежи или заставлять ваше мобильное устройство вибрировать.

🤩 Подборка браузерных возможностей: https://prglb.ru/5v77l

В этом репозитории собраны совсем свежие или малоизвестные API браузеров. Пользуйтесь!

#browser #api

​CSS: искусство, наука, кошмар

Большой обзор CSS от паддингов до флексов и медиа-запросов.

👍 Отличный материал для структурирования начальных знаний и изучения/повторения основных концепций.

➡️ Читать: https://prglb.ru/jjy7

#css #beginners

Visual Studio Code. Настройка и применение

VS Code — один из самых популярных редакторов кода среди фронтендеров. При правильной настройке он может сэкономить вам уйму времени и взять на себя всю нудную рутинную работу.

Вашему вниманию большое и подробное руководство, которое охватывает все важные аспекты VS Code: от палитры команд до ультимативной настройки git.

Первая часть
Вторая часть

Даже если вы опытный пользователь VS Code, возможно, статья откроет для вас пару неизвестных опций.

#tools #editor

Как вы удаляете неиспользуемый 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