​Кастомные свойства в CSS

Давайте предположим, что у нас есть веб-страница, на которой много элементов с текстом одного и того же цвета. Дизайнер создал фирменный стиль, руководство утвердило, мы начали верстать. Наш CSS мог бы выглядеть примерно так
.header-primary {
font-size: 2em;
color: #18191C;
margin-bottom: .5em;
}

.header-secondary {
font-size: 1.6em;
color: #18191C;
}

Конкретный оттенок чёрного #18191C используется по всей странице в совершенно разных элементах: заголовках, тексте, кнопках, полях ввода. Кажется, что это не должно создавать никаких проблем, но на самом деле есть ряд неудобств, которых хотелось бы избежать.

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

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

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

Кастомное свойство — это произвольное свойство с определённым значением. Оно отличается от стандартного CSS-свойства способом записи. Чтобы применить кастомное свойство, нужно передать его в CSS-функцию var().

Стандартное свойство:
.list-item {
margin-left: 10px;
}

.list-item .link {
margin-left: 10px;
}

Кастомное свойство:
.list {
--element-gap: 10px;
}

.list-item {
margin-left: var(--element-gap);
}

.list-item .link {
margin-left: var(--element-gap);
}

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

👉 @frontendInterview

👉 @frontendInterview

Колонка с контентом по центру экрана

Колонка с контентом определённой ширины по центру экрана — частый паттерн в веб-дизайне. В этом рецепте разбирается, как и какими способами можно это сделать. Также рассматривается ситуация, когда некоторые секции должны быть растянуты на весь экран.

👉 @frontendInterview

О лени в обучении

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

👉 @frontendInterview

👉 @frontendInterview

Frontend meetup

1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.

2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.

3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.

Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf

➖➖➖

🗓 22 мая, начало в 19:00 мск, Среда

🌐 ОНЛАЙН

✅ Регистрация на мероприятие

Реклама, ООО "Эвроне.ру", ИНН 3663057399

Любой разраб, когда готовится написать одну строчку кода

👉 @frontendInterview

​.style

Свойство style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через HTML-атрибут style.
С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style.

Чтобы получить значения инлайновых стилей с помощью свойства style, мы можем записать:
const element = document.getElementById('someElement')
const inlineStyles = element.style

В этом случае в значение inlineStyles запишется объект CSSStyleDeclaration, который будет содержать в себе все инлайновые стили элемента element.

Чтобы задать стили для элемента, мы можем использовать несколько способов. Например, через cssText, чтобы указать несколько свойств разом (этим же эффектом обладает установка стиля через setAttribute()). Альтернативно, через отдельные свойства в style.[propertyName].

Следующие две записи работают одинаково и устанавливают несколько стилей в одном выражении:
element.style.cssText = 'color: blue; border: 1px solid black'
element.setAttribute('style', 'color:red; border: 1px solid blue;')

Следующая — устанавливает значение определённого свойства, оставляя другие значения стиля нетронутыми:

 element.style.color = 'blue'

👉 @frontendInterview

jаvascript. Рецепты для разработчиков, 3-е издание

Зачем изобретать велосипед, сталкиваясь с очередной проблемой в jаvascript? Здесь вы найдете множество рецептов кода для типовых задач программирования, а также познакомитесь c методами создания приложений, работающих в любом браузере. Адаптируемые примеры кода можно вставить практически в любой проект, а заодно поглубже изучить JS.

👉 @frontendInterview

The Pony Express

Вам дан массив дистанций. Создайте функцию riders, которая вернет количество riders, которые потребуются, чтобы преодолеть всё расстояние. Один rider может проехать максимум 100 миль.

Примеры:
riders([18, 15]) =>1
riders([43, 23, 40, 13]) => 2
riders([33, 8, 16, 47, 30, 30, 46]) => 3
riders([6, 24, 6, 8, 28, 8, 23, 47, 17, 29, 37, 18, 40, 49]) => 4

👉 @frontendInterview

:empty

Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков, текста или псевдоэлементов внутри.
<div>
<h6>Без :empty</h6>
<p>Если человеку...</p>
<footer class="reactions"><span>🤔</span></footer>
</div>

<div>
<h6>С :empty</h6>
<p>Если заменить...</p>
<footer class="reactions with-empty"><span>😁</span></footer>
</div>

.reactions {
border: 1px solid blue;
border-radius: 16px;
padding: 5px;
background-color: #123E66;
}

.with-empty:empty {
display: none;
}

В примере выше реакции на сообщения будут вставлены в блок с классом reactions. Ему заданы внутренние отступы, фоновый цвет и рамка. Если реакций нет, то блок останется пустым и будет скрыт.

Без использования псевдокласса :empty у нас на экране останется пустой элемент с внутренними отступами, фоном и рамкой.

👉 @frontendInterview

👉 @frontendInterview

Выпадающее меню

Как сверстать многоуровневое выпадающее меню, да ещё доступно?

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

В этом рецепте приводится готовая стилизованная разметка многоуровневого меню.

👉 @frontendInterview

Как информативно оформить профиль на GitHub?

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

В этой статье автор рассказывает, как красиво и информативно оформить свой github.

👉 @frontendInterview

Фиксит баги на проде

👉 @frontendInterview