Медиа-выражения в CSS - это не только max-width

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

Подробнее: https://prglb.ru/1s70x

#css

Пользовательские правила eslint

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

🖍 как настроить eslint, чтобы добавление правил было таким же простым, как и написание другого кода в проекте
🖍 как создать пользовательское правило линтинга

Подробнее: https://slonoed.net/ru/custom-eslint-rule/

#tools

Классы на прототипах: как работает ООП в JavaScript

Изначально ООП модель JavaScript была основана на прототипной структуре, но для удобства в нем появились классы. Посмотрим, как это работает на деле.

Читать: https://proglib.io/p/klassy-na-prototipah-kak-rabotaet-oop-v-javascript-2020-02-20

#javascript #core #beginners

​Обойдемся без JS

You might not need JavaScript - подборка самых распространенных компонентов интерфейса, реализованных только на HTML+CSS.

Табы, слайдеры, модальные окна и еще много всего.

Чекнуть: http://youmightnotneedjs.com/

#interface #css #html

Делегирование событий в JavaScript

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

Читать: https://prglb.ru/415p2

#javascript #core #beginners

Frontend разработчик (React)

Требования:
— отличное знание HTML и CSS, а также особенностей их отображения в различных браузерах
— знание стека React + MobX
— хорошее знание современного JavaScript, TypeScript
— знание CSS/JS-препроцессоров и систем сборки (Stylus, Babel, Webpack);
— умение работать с системой контроля версий Git

от 100 000 до 160 000 ₽, офис в Москве

Подробнее о вакансии

React в действии

Книга Т. М. Томаса познакомит вас с библиотекой React и ее экосистемой. Отличное систематизированное введение в тему.

#books #frameworks #react

Эффективное использование ARIA в HTML5

ARIA - Accessible Rich Internet Applications (доступные насыщенные интернет-приложения).

Использование этого стандарта позволяет сделать сайт более доступным для людей с ограниченными способностями, например, с нарушениями слуха или зрения.

Читать: https://prglb.ru/ekyb
Спецификация тут: https://www.w3.org/TR/wai-aria-1.1/

#accessibility

Микросервисный подход в веб-разработке: micro frontends

Жизнеспособен ли микросервисный подход во фронтенд-разработке? Каковы его плюсы и минусы? Не пора ли срочно переводить все ваши проекты на новую архитектуру?

Не торопитесь - хоть микрофронтенд предлагает серьезные преимущества, у него очень много недостатков.

Разобраться: https://prglb.ru/5xpap

#bestpractices

Рваные края в диагональных градиентах

👎 При создании диагональных линейных градиентов в CSS с резким переходом на месте стыка цветов образуется рваная линия.
background: linear-gradient(176deg, white, white 75%, black 75%, black 100%);

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

👉 Способ 1 - десятые доли процента:
background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);

👉 Способ 2 - функция calc:
background: linear-gradient(176deg, white, white 75%, black calc(75% + 1px), black 100%);

Источник: https://prglb.ru/3wj0g

#css #snippets #code

CSS-переменные в инлайн-стилях

Зачем вам может потребоваться хранить переменные прямо в атрибуте style? Оказывается, таких кейсов немало!

🖍 еще более гибкая грид-сетка
🖍 стили кнопок
🖍 размер юзерпика

Этот подход может здорово упростить написание CSS.

Подробнее: https://prglb.ru/5w37w

#css

Цикл событий: как выполняется асинхронный JavaScript-код в Node.js

Разбираемся, как работает цикл событий Node.js, зачем там коллбэки и в каком порядке они выполняются.

Подробнее: https://proglib.io/p/cikl-sobytiy-kak-vypolnyaetsya-asinhronnyy-javascript-kod-v-node-js-2020-02-26

#javascript #node #core

5 ошибок начинающего фронтендера

Как не сбиться с пути?

https://prglb.ru/2inuq

#beginners

8 классных тем для Visual Studio Code

Выбрать: https://prglb.ru/rphd

#tools #editor

Полное руководство по классам в JavaScript

От конструктора до статических методов. И про прототипы под капотом не забудем 😌

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

#javascript #core

Я ❤ Фронтенд 2020

8 крутых докладов о состоянии современного фронтенда.

📖 Почитать программу: https://prglb.ru/22uki

📺 Посмотреть доклады: https://prglb.ru/112e1

#video

10 способов спрятать элемент на CSS

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

Выбрать подходящую: https://prglb.ru/3ok1d

#css

Как написать хороший HTML & CSS код с помощью Webflow

Webflow — это, по сути, визуальный конструктор для создания HTML и CSS кода. Звучит не очень серьезно, но этот инструмент может существенно облегчить работу верстальщика или дизайнера.

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

#tools #html #css

Цитирование в HTML

В чем разница между тегами blockquote, q, cite - и какой из них следует использовать для оформления цитат?

Спойлер

✏️ для больших фрагментов - blockquote 👌
✏️ для небольших, находящихся прямо в строке, - q (но не для сарказма 🤔)
✏️ а cite - вообще предназначен не для цитат 😲

Разобраться: https://prglb.ru/1jc9i

P.S. Не вмешивайте сюда тег dialog.

#html #accessibility

ТОП-15 книг по JavaScript: от новичка до профессионала

В этом посте мы собрали переведённые на русский язык книги по JavaScript – всё, что нужно для старта, роста и оттачивания скиллов. Расставили в порядке возрастания сложности, указали преимущества и недостатки.

Изучить: https://prglb.ru/4dhaj

#javascript #books #beginners #advanced