Александр Архипов

Parcel & Pug – особенности работы с изображениями

2023-05-30T03:18:54.726Z

Привет. Когда в обучении фронту я дошел до картиночек и вставки их на страницу я был слегка удивлён. Когда дошел до их адаптивности уже был не слегка.

Казалось бы, тег <img> ему атрибутом src='котик.png' да и всё, ан нет. Естественно, нужен как минимум alt, а то валидацию не пройдет и дядя SEO-шник даст пизды, потом еще обязательно width / height, а то контент-манагер еще вставит 10мегапикселов фото и всё поедет как твоя кукуха.

И это только статика, через CSS "адаптивно" ты можешь только тянуть картинку передавая привет всем шакалам, койотам и всем остальным безумно можно быть первым. Можно все пофиксить object-fit, но тогда либо у тебя махонькая картинка на десктопе, либо FullHD на телефоне, что само по себе слегка похоже на выбор стула из... нутыпоэл.

Ах, да! Еще же эти ваши ретина-дисплеи и, конечно же, новые модные-молодёжные ~~реп-дискета-дискотека~~ лёгкие форматы WebP и AVIF.

Итого у нас получается, что одна картинка - это не одна картинка, а в очень минимум варианте две-три, а по хорошему... хм... Восемнадцать! И все их надо верно разметить в <picture>.

Готовить всё это ручками, конечно, дело не боярское.

Автоматизируй

Естественно, мыжпрограммисты. На это есть всякие бандлеры, например - Gulp, Webpack или сегодняшний пациент - Parcel. Их вообще дофига, но самые популярные для фронта, насколько я понимаю, эти трое.

На самом деле все они, так или иначе, работают через один и тот же инструмент – плагин или модуль Node.js (я еще не до конца просёк терминологию) под названием Sharp. Работает просто - даёшь ему картинку, говоришь чего с ней сделать, отдаёт тебе картинку.

Parcel сам по себе мощная штука, хотя и специфическая, но об этом в другой раз. Самое главное - он умеет из коробки работать с Sharp, а как следствие с картинками и более того, позволяет без всяких конфигов прямо в HTML и CSS указать что с картинкой делать.

Пример из документации:

<picture>
  <source srcset="image.jpeg?as=avif&width=800" type="image/avif" />
  <source srcset="image.jpeg?as=webp&width=800" type="image/webp" />
  <source srcset="image.jpeg?width=800" type="image/jpeg" />
  <img src="image.jpeg?width=200" alt="test image" />
</picture>

Задача для Sharp формируется с помощью query-параметра после знака ? в пути к картинке. Если параметра, читай задачи, два - их соединяем символом &. В нашем случае у первого <source> мы "попросили" Parcel сконвертировать image.jpeg в формат AVIF - as=avif, и изменить размер на 800px по ширине - width=800. По умолчанию, высота ресайзится пропорционально.

Кроме конвертации as= и размеров width=/height=, можно еще задать уровень качества, то бишь степень сжатия через quality=, но я никогда не трогал её, так как дефолтные 75 меня устраивают.

То есть, по сути нам нужна только одна jpeg/png картинка-исходник, самая большая - всё остальное можно сделать через Parcel и прям в разметке указать чего куда подставить. Примерный пример - картинка-исходник 960px в ширину для ретина 2х, остальное делаем через параметры:

<picture>
  <!-- desktop: avif, webp, png с ретиной -->
  <source 
    type="image/avif" media="(min-width: 1280px)" 
    srcset="pic.png?as=avif&width=480, pic.png?as=avif 2x" />
  <source 
    type="image/webp" media="(min-width: 1280px)" 
    srcset="pic.png?as=webp&width=480, pic.png?as=webp 2x" />
  <source 
    type="image/png" media="(min-width: 1280px)" 
    srcset="pic.png?width=480, pic.png 2x" />
    
  <!-- tablet, ресайз условный -->
  <source 
    type="image/avif" media="(min-width: 768px)" 
    srcset="pic.png?as=avif&width=320, pic.png?as=avif&width=640 2x" />
  <source 
    type="image/webp" media="(min-width: 768px)" 
    srcset="pic.png?as=webp&width=320, pic.png?as=webp&width=640 2x" />
  <source 
    type="image/png" media="(min-width: 768px)" 
    srcset="pic.png?width=320, pic.png?width=640 2x" />
    
  <!-- mobile -->
  <source 
    type="image/avif" 
    srcset="pic.png?as=avif&width=260, pic.png?as=avif&width=520 2x" />
  <source 
    type="image/webp"
    srcset="pic.png?as=webp&width=260, pic.png?as=webp&width=520 2x" />
  <img
    alt="picture" width="260" height="180"
    src="pic.png?width=260" srcset="pic.png?width=520 2x" />
</picture>

В CSS, кстати, тоже работает, но функцию image-set() пока хреновенько поддерживают браузеры.

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

Штош. Миллион картинок нам теперь не нужны, но верстать всё еще надо весь десяток тегов для каждой контентной картинки. А что если это карточки в каталоге или галерея? Прокачивай десятипалый набор или...

Шаблонизируй

Наверное, надо было наоборот, но на примере простого HTML проще понять как происходит конвертация в Parcel/Sharp.

Я использую Pug.js так как просто захотел выучить новенькое и он попался первым. О самом Pug'е я в прошлой статье писал, для текущей задачи можно много чего придумать - я решил воспользоваться mixin'ом.

Мы создаём шаблон какого-то куска разметки и передавая в него параметры расставляем их в теле шаблона:

mixin item(name, path, desc) 
  li 
    h3 name
    img(src=path, alt=name) 
    p desc

+item('Mr. Puggy', './mr-puggy.png', 'Distinguished gentleman')

Сами вызовы миксинов, читай создание элемента по шаблону, можно воткнуть, например, в местный цикл, а данные передавать из объекта:

each item in gallery-items
  +item(item.name, item.path, item.desc)

Объект, кстати, можно подключить внешний, правда, немного через жопу, то есть через конфиг-файл Pug'а. У конфига .pugrc есть зарезервированный объект locals в который можно пихать свои данные, а в .pug файлах обращаться к самому вложенному объекту, так как locals работает для всей страницы.

// пример .pugrc (или pug.config.js)
{
  "locals": {
    "gallery-items": [
      {
        "name": "Mr. Puggy",
        "path": "./mr-puggy.png",
        "desc": "Distinguished gentleman"
      },
      {
        "name": "Don Fluffy",
        "path": "./don-fluffy.png",
        "desc": "Mafioso"
      }
    ]
  }
}

Ах, да! Особенности!

Остались нюансы. С первым я столкнулся в прошлый раз - Pug'овская интерполяция, которая #{foo}, действительно не работает в атрибутах, о чем сказано в документации. Там же в документации, написаны варианты выхода из ситуации – конкатенация прям в атрибуте или использовать ES-ную интерполяцию с бэктиками - `${foo}`.

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

mixin item(name, path, desc)
  //- контент шаблона
  ...
  picture
    source( 
      srcset=`${path}?as=avif&width=480, ${path}?as=avif 2x`, 
      media='(min-width: 1280px)', 
      type='image/avif'
      )
    ...
    // остальные sources аналогично

Второй нюанс это экранирование специальных символов в атрибутах. В Pug символы типа <, > и нужный нам амперсанд & по умолчанию экранируются и преобразуются в мнемоники типа >, < и так далее.

Чтобы символы не экранировались достаточно просто поставить ! перед равно при написании атрибута:

source(
  srcset!=`${path}?as=avif&width=480, ${path}?as=avif 2x`, 
  ...
)

Да, даже подсветка говорит нам, мол это же "НЕравно", но такой вот синтаксис.

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

Массив portfolio я вынес в locals, получается там такая база данных на минималках. В конкретном примере 12 картинок, так как нет необходимости делать под таблет - по дизайну они просто смещаются сверху вбок от текста.

Всё, спасибо за внимание!

Pug.js – мое знакомство с мопсовым препроцессором

2023-05-18T19:08:25.937Z

Привет. Недавно решил собрать себе архив из своих работ по вёб-дезигну, которые делал последние несколько лет, до фронт-энда. Оказалось их немало, большая часть из них, к сожалению, утрачены, но даже так получился список из двадцати с чем-то работ. А раз уж я теперь фронт-энд разработчик, то запилю это всё дело в виде странички.

Так как это, своего рода, пет-проект, параллельно захотелось освоить что-то новенькое и как-то сам по себе выбрался препроцессор для вёрстки Pug. Если честно, я из-за названия и выбрал. 😃

У Pug'а интересный python'оподбоный синтаксис, основанный на индентах, то бишь вложенность элементов определяется не закрывающими тегами, а отступом:

ul.list
  li.list__item Item A
    ul.list__sublist
      li.list__subitem#unique-id Subitem A1
      li.list__subitem Subitem A2
  li.list__item Item B
  li.list__item Item C

На выходе получится:

<ul class="list">
  <li class="list__item">Item A
    <ul class="list__sublist">
      <li class="list__subitem" id="unique-id">Subitem A1</li>
      <li class="list__subitem">Subitem A2</li>
    </ul>
  </li>
  <li class="list__item">li Item B</li>
  <li class="list__item">li Item C</li>
</ul>

Класс можно задать через точку, ID через диез, прям как селектор в CSS, правда на ID-шник через диез ругается линтер:

Лучше его задавать как обычные атрибуты, которые задаются в скобках через запятую, как своеобразные аргументы функции:

img(src='./pic.png', alt='super pic', width='100', height='50')

Но одним относительно упрощенным синтаксисом, конечно, Pug не ограничивается. Так как это препроцессор, в нём возможны все "программистские" штучки - условия, циклы, интерполяция и функции. Можно еще прямо в .pug файле писать JavaScript, ограничено, но можно.

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

Mixins

Это такая функция-конструктор, мы задаём ей параметры в аргументах, внутри задаём шаблон и эти параметры расставляем где надо, затем вызываем:

mixin item(foo, baz, bar)
  li
    h3 foo
    img(src=baz, alt=foo)
    p bar
    
+item('Mr. Puggy', './mr-puggy.png', 'Distinguished gentleman')

Я использовал его для карточек в списке своих работ:

У меня тут наворочено с датой и с ссылкой на изображение. Дату я задаю в специальном, валидном для атрибута datetime и JS формате, но для отображения на странице преобразую в строки с годом и месяцем на английском, а потом подставляю интерполяцией в контент.

С ссылкой на изображения посложнее так как одно изображение, с целью оптимизации загрузки, существует аж в шести вариантах – jpg и jpg@2x для ретины, webp и webp@2x, и еще avif и avif@2x. Я сделал через конкатенацию строк, так как через интерполяцию в srcset, вроде как, не получится, по крайней мере линтер на меня ругался и упаковщик послал меня на 404.

Includes

По своей сути это аналог require() из PHP - позволяет импортировать кусок внешнего кода в файл. И также позволяет использовать компонентный подход непосредственно в вёрстке.

Например, у себя я использовал это в хэдере - это блок состоящий из двух блоков - лого и менюшка, которые я подключаю к нему через include:

При этом, все блоки лежат в своих директориях со своими стилями и скриптами:

Конкретно тут скриптов нет :D

Возможно, это немножечко перебор, но я решил попробовать и никто меня не остановит. Му-ха-хах!

Template Inheritance

Google переводит как "наследование шаблонов" - к файлу можно подключить структуру внешнего файла. То есть не вставить как кусок разметки через include, а прям импортировать всё и имея ввиду этот импорт уже работать.

Такой шаблон должен иметь в себе блоки block - участки шаблона контент которых можно изменять уже в файле куда подключаем шаблон.

html
  head
    title Mr. Puggy Personal Page
    block style
      link(rel='stylesheet', href='./style.css')
  body
    ...

Импортируем шаблон в рабочий файл через команду extends:

extends template.pug

А с блоками можно работать тремя способами – можно перезаписать контент блока просто вызвав его:

block style
  link(rel='stylesheet', href='./super-style.css')

При этом запись из шаблона удалится, то есть стили style.css не загрузятся. Еще можно добавить записи к шаблону с помощью append - в конец и prepend - в начало блока:

prepend style
  link(rel='stylesheet', href='./normalize.css')
append style
  link(rel='stylesheet', href='./super-style.css')

Что на выходе, в HTML, даст нам все три тега в нужном нам порядке:

<head>
  <title>Mr. Puggy Personal Page</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="super-style.css">
</head>

Самый простой пример, который я и использовал - я создал шаблон _layout.pug для типичной страницы, где есть обязательные теги типа doctype, html, head ну и body. Писать их сто раз на каждой странице дело не боярское, поэтому мы и выводим в шаблон повторяющиеся элементы, а те места которые будут потенциально изменяться оборачиваем в конструкцию block.

Например, в head явно есть мета-информация которая нужна везде:

head
  meta(charset='utf-8') 
  meta(content='width=device-width, initial-scale=1', name='viewport') 
  meta(content='IE=Edge', http-equiv='X-UA-Compatible')

А теги типа title, какие-то дополнительные стили и скрипты, аля пиксели соц. сетей или метрик, не говоря уже о всяких SEO-тегах - нам нужно подставлять индивидуально для страницы.

Грубо говоря, я сделал нечто подобное:

Импортирую этот _layout.pug на страницу, а в head подставляю всё что нужно через append. Таким образом, у меня и мета и фавиконки и общие стили уже есть, остаётся добавить несколько строк.

В body схема похожая, правда я до конца в ней не уверен:

Нужно еще по хорошему поменять .modal на dialog

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

А, собственно все, спасибо за внимание. Как допилю всё - закину сюда ссылочку или может еще чего напишу. Там я еще со сборщиком Parcel'ем развлекаюсь, есть о чем по бухтеть.

Бесконечный слайдер на чистом JavaScript — на примере макета Gllacy от HTML Academy

2022-11-03T14:44:33.623Z

Решил я, значит, доделать все проекты из первого уровня HTML Academy и начал с самого, на мой взгляд, сложного — Глейси. Но я был бы не я, если бы не усложнил себе задачу. Я решил, помимо прочего (попапы, тултипы, модалки), реализовать работу слайдера, а он там, мягко говоря, непростой.

Небольшая повесть о том как я с базовыми знаниями JS решил сделать бесконечный, зацикленный слайдер, с разными позициями элементов, меняющий стиль всего сайта в зависимости от выбранного элемента.

Дисклеймер: JS я делал как умею, а на данный момент я никак не умею. :D Различные продвинутые методы программирования, типа ООП, АОП и т. д., с применением классов, объектных методов и сложных абстракций — это мне еще предстоит изучить. Пока — просто эксперимент.

TL;DR – Полный код на GitHub

Вёрстка слайдера

Итак, слайдер это, по сути, весь первый блок. У каждого мороженного свой заголовок, описание и кнопка — это элементы слева. Ещё на макете видно два следующих, неактивных слайда, то бишь превью, у которых тоже есть свой текстовый блок. При этом, превью текстовых, естественно, не видно.

Если заранее не подумать о последующей реализации, то в плане вёрстки, тут можно по разному подойти, например, сверстать всё одним списком, текст у превью скрывать display: none, а при слайде показывать. Это первое, что пришло мне в голову.

И я так даже попробовал, но почти сразу начались огромные проблемы с позиционированием самой картинки, фона-кружочка — пришлось делать обёртку для картинки, отдельно обёртку для текста, проблемы с позиционированием триггеров (они же не должны «слайдиться»).

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

Если не фиксировать размер текущего слайда, то flex будет всё сплющивать.

Я же решил сделать красиво и всё это дело анимировать, чтобы это нормально смотрелось, а не «прыгало» мгновениями. Ну и что бы это вообще работало.

Моя вторая идея — разделить блок на два структурно независимых блока — текстовый (слева) и с картинками (справа), задать overflow: hidden контейнерам и поместить внутрь по слайдеру.

Grid one love

Это слегка увеличило вёрстку, но сильно упростило её логику — слайдеры занимают просто 100% контейнера и живут в своём мирке, прекрасно убирая переполнение за overflow, а размеры областей заданы в grid.

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

Еще это потенциально усложнило JS — листать теперь надо два слайда, при том, что в одном у нас есть превью на 2 слайда вперёд, а в другом нет.

Реализация слайдера на JavaScript

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

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

Вариант отключить disabled кнопку «влево» при текущем первом слайде решал только пол беды. В итоге идея реализации зацикленного слайдера напросилась сама — не будем ничего дизеблить, кликать можно в любую сторону.

Концепт цикличного слайдера

Итак, как же сделать зацикленный слайдер? Пока без вопроса реализации самого смещения, только концепт «зацикленности». Первое, что пришло в голову мне — это каким-то образом перемещать слайды к краю массива. Смастерить, такой, как бы портал, которые перемещал бы итемы в зависимости от направления к концу или к началу списка.

Сразу две проблемы с которыми я столкнулся:

Так как смещение не мгновенное, то одновременно на экране в моменте видно сразу два одинаковых итема — первый, ещё не исчезнувший current и второй появляющийся с конца.
Метод .querySelectorAll() собирает их не в обычный объект (или словарь (?) объектов, тут пока для меня мутная терминология), а в так называемый NodeList, который можно только читать read-only и нельзя изменять. Об этом я узнал уже в процессе и об этом чуть далее.

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

Параллельно я нашел другой подход, который как раз мне понравился — через работу с самим NodeList, клонирование итемов через .cloneNode() и подстановка их в конец с помощью .appendChild().

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

Примерный алгоритм работы слайдера по краям:

Текущий current слайд находится на краю массива, не важно в начале или в конце.
Нажатие на кнопку в сторону «за» конец массива — на 1-м <- влево или на 4-м (1-м клоне) вправо ->, вызывает функцию замены позиции с 1-го на позицию клона или наоборот.
После замены срабатывает основная функция слайдера с анимацией смещения.

Ну что, погнали.

Собираем элементы

Для начала нам, естественно, нужно собрать элементы с которыми будем работать. Тут должно быть всё просто — используем .querySelector() и .querySelectorAll() для списков и работаем дальше.

const promoSection = document.querySelector(".promo");
const picSliderList = promoSection.querySelector(".slider__list");
let picSlides = picSliderList.querySelectorAll(".slider__item");
...

Но не тут-то было.

В ходе работы над задачей я, возможно преждевременно, но познакомился с понятиями Node и NodeList и тем, что они бывают двух типов — живые (live) и статичные (static). Это заставило на пол пути почти полностью переписать некоторые функции.

Как я уже писал выше, метод .querySelectorAll() собирает элементы не в массив или обычный объект, а в специальный объект NodeList, который имеет свойство read-only, то есть неизменяемый или «статичный».

console.log(picSlides) // выведет список из 3-х объектов
picSliderList.appendChild("клон/объект"); // добавляем 4-й объект
console.log(picSlides) // всё равно выдаст список из 3-х объектов

Для нас это не очень хорошо — мы планируем изменять количество элементов в контейнере и работать далее уже с изменённым списком. Нам нужен «живой» NodeList или его подобие, который будет реагировать на изменения в DOM.

В этом нам может помочь свойство объекта Node — .childNodes, которое возвращает все дочерние Node, то бишь NodeList и он при этом «живой», то есть реагирует на изменения.

const picSliderList = promoSection.querySelector(".slider__list");
let picSlides = picSliderList.childNodes;

Мы, правда, быстро споткнёмся о нюанс — .childNodes собирает еще и какую-то шелуху, которые не являются элементами, но являются Node’ами.

Насколько я понял — это пробелы от переноса строки, с ними можно «хорошо» познакомиться, если начать работать с inline-block кнопками, например. Или нет и это что-то другое, я тут не эксперт, не слушайте меня. В любом случае — нам оно не надо, нам надо только элементы.

Тут нас спасает другое свойство, про которое, кстати, упоминалось в JavaScript тренажёрах, но я вот не помню, было ли там про живые/статичные коллекции. Это свойство .children, которое возвращает HTMLCollection — живую коллекцию всех дочерних элементов указанного контейнера.

Насколько я понял — это немного другой вид данных отличный от NodeList, более «массивоподобный» (array-like object написано в MDN), который для наших целей идеально подходит. В итоге вот что получается:

let picSlides = picSliderList.children;

console.log(picSlides) // 3 объекта
picSliderList.appendChild("клон/объект");
console.log(picSlides) // 4 объекта

Хорошо! Не забываем собрать еще кнопки и пагинацию (кнопки-точки в углу) и переходим к функциональной части.

Клонируем слайды

Не смотря на то, что у текстового слайдера нет превью-итемов, они все за overflow, ему всё равно надо сделать клона крайнего итема. Иначе при слайде вбок, будет моментальная замена, например, с 3-го на 1-й (или наоборот), а затем слайд-анимация ко 2-му, из-за чего всё ломается.

Итак, сама функция клонирования:

const addFirstToEnd = (itemsList) => {
  let cloneItem = itemsList[0].cloneNode(true); //клон 1-го итема
  cloneItem.classList.remove("current"); //убираем сласс current
  itemsList[0].parentNode.appendChild(cloneItem); //подставляем
}

Параметр true/false у .cloneNode определяет копировать ли элемент вместе с внутренностями или только пустой элемент. А свойство .parentNode обращается к родительскому node указанного элемента.

Тут очередная проблема, которую я не сразу заметил — для текстового слайдера нам хватит и одного клона, а вот для картинок получается, что нет. Одновременно в поле видимости слайдера с картинками у нас 3 слайда, просто 2 как превью.

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

Возникает еще одна дилемма — требуется разное количество клонов. Можно забить и сделать одинаковое — текстовых тоже будет 6, просто 2 последних будут совсем мёртвым грузом. Но я решил доработать функцию, что б она могла делать разное количество клонов:

const addClonesToEnd = (clonesNumber, itemsList) => {
  for (i = 0; i < clonesNumber; i++) {
    let cloneItem = itemsList[i].cloneNode(true);
    cloneItem.classList.remove("current");
    itemsList[i].parentNode.appendChild(cloneItem);
  }
}
addClonesToEnd(3, picSlides); // +2 превью
addClonesToEnd(1, textSlides);

Замена позиции

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

Для проверки будем двигать не слайды, а вспомогательный класс .current, обозначающий выбранный слайд. Благо менять классы у элементов мы уже умеем с помощью методов .classList.add/remove. Сейчас вопрос не «Как», а «Куда двигать?».

Я решил подойди с точки зрения привязки элементов к их индексу в коллекции. Несмотря на то, что у нас разная длина коллекций — 4 у текстового и 6 у картиночного, два последних клона в картиночном нас не интересуют, поэтому позиции во всех случаях у обоих слайдеров будут совпадать.

Получается, что у нас есть начальный, который совпадает с текущим, конечный индексы итемов и нам нужен еще следующий индекс, который будет рассчитываться нажатием кнопки влево/вправо:

let lastSlideIndex = textSlides.length - 1; // 0 - 1 - 2 - [3]
let currentSlideIndex = 0;
let nextSlideIndex = 1;

Переходим к самому нажатию на кнопки. Функция нажатия должна высчитывать индекс следующего итема nextSlideIndex, двигать слайд в направлении от текущего к следующему и после этого следующий становиться текущим.

При этом кнопки у нас две — одна двигает вправо, то бишь увеличивает индекс, вторая же влево, то бишь индекс уменьшает. Языком JS:

buttonNext.addEventListener("click", () => {
  nextSlideIndex = currentSlideIndex + 1; // -1 для buttonPrev
  
  picSlides[currentSlideIndex].classList.remove("current");
  textSlides[currentSlideIndex].classList.remove("current");
  picSlides[nextSlideIndex].classList.add("current");
  textSlides[nextSlideIndex].classList.add("current");
  
  currentSlideIndex = nextSlideIndex; // заменяем значение текущего
}

Визуально ничего не двигается (меняются размеры картинок только), зато двигается класс:

Быстро упираемся в проблему, когда нажимаем на кнопку влево и получаем nextSlideIndex = -1, такого индекса нет, как и индекса 4, который мы поймаем после нажатия вправо на последнем слайде.

В этот момент наступает время замены слайдов! Я решил зайти через простую проверку условия — если nextSlideIndex вне диапазона коллекции, то меняем слайды местами. А так как у нас первый и последний слайд-клон одинаковые, замена должна происходить без видимых последствий.

Для краткости и чтобы много раз не переписывать эти четыре строки с classList.remove/add я вывел их в отдельную функцию switchClasses():

buttonNext.addEventListener("click", () => {
  nextSlideIndex = currentSlideIndex + 1; // = условно [4]
  
  if (nextSlideIndex > lastSlideIndex) { // для buttonPrev (next < 0)
    nextSlideIndex = 0;
    switchClasses();
    currentSlideIndex = nextSlideIndex; // заменяем значение текущего
    nextSlideIndex = currentSlideIndex + 1; // заново считаем next
  }
  
  switchClasses();
  
  currentSlideIndex = nextSlideIndex; // финально заменяем значение
}

Внезапно для меня всё сработало! Выглядит, возможно, немного неказисто, зато работает — пока не трогаем. Переходим к переходам!

Плавно переходим

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

Самый, эм… распространённый вариант из моих поисков на чистом JavaScript (без jQuery) — это использование свойства .style к элементу. Этим способом мы прописываем элементу inline-стили в атрибут.

picSlider.style.transition = "transform 500ms ease-out";
picSlider.style.transform = "translateX(-100px)"; // подвинет влево

Код выше применит в HTML к указанному элементу атрибут style:

И это, в целом, то что нам нужно — подставим изменение стилей в функцию нажатия кнопки, в translateX() подставим нужную величину сдвига для слайдера, а картинкам можно в CSS прописать transition на размеры и непрозрачность и они сами будут плавно переходить от .current и обратно.

Величину сдвига можно рассчитывать от индекса и размера итема, подставив через интерполяцию в значение свойства. Таким образом, у каждой позиции будет свой сдвиг. Условный пример:

picSlider.style.transform: `translateX(-${nextSlideIndex * offset}px)`

То есть, условно, [0]-й слайдер — сдвиг на 0 * 150 = 0px, [1]-й — сдвиг на 150px и так далее. На данном этапе я подсмотрел размер итемов в DevTools во вкладке Computed или можно самому посчитать width + padding + border + margin, но об этом подробнее чуть позже.

Получается, по итогу, что нам надо-то добавить несколько строк:

buttonNext.addEventListener("click", () => {
  nextSlideIndex = currentSlideIndex + 1;
  
  if (nextSlideIndex > lastSlideIndex) { /* замена, тоси-боси */ }
  
  picSlider.style.transition = "transform 500ms ease-out";
  textSlider.style.transition = "transform 500ms ease-out";
  picSlider.style.transform = `translateX(-${nextSlideIndex * 141}px)`;
  textSlider.style.transform = `translateX(-${nextSlideIndex * 540}px)`;
  switchClasses();
  
  currentSlideIndex = nextSlideIndex;
}

Вуаля! Всё работает! Нет, правда! Слайды плавно двигаются, листаются. В конце коллекции происходит замена, как мы и хотели, и… идёт обратно?..

В принципе, можно оставить и так. Работает же? Работает. Даже, можно сказать, красиво — анимации итемов, плавно в обе стороны, все ок. Но я всё же решил доделать до изначально задуманного концепта.

Асинхронность JS, переходы и анимация

Первое что мне пришло в голову — надо обнулить transition при замене в if, добавить туда transform к нулю и тогда, по идее, будет сначала производиться мгновенная замена с конца на начало, а пото-о-ом уже плавный переход на итоговый слайд! Но нет.

Во-первых, transition у самих картинок, то бишь изменение размеров и непрозрачности, мы так просто не уберём, нужно обращаться к конкретному элементу — к картинке и еще span'у-кружочку на фоне.

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

Что и случилось, в общем-то, с нашей заменой слайдов — JS выполнил всё, грубо говоря, одновременно. Он посчитал индексы, финальным оказался индекс [1] — к нему он и применяет translateX(), из-за чего слайдер не «зациклился», а переместился в обратном направлении.

Тут я полез разбираться и залез в очень глубокие дебри, в которые, на мой взгляд, пока рановато. Либо учить всё прям до момента понимания, на что я не был готов на данный момент (сидеть месяц над слайдером такое себе), либо искать какое-то другое решение, пусть и на 3-х костылях.

Я честно пытался разобраться для более изящного решения, начал вникать в асинхронность JS, в работу «стека вызовов», в контекст вызова и колбэки, в итоге в промисы и async/await. Но у меня не получилось, как бы я не пытался, я где-то сутки-двое сидел. На этом этапе просто не хватило знаний и опыта. Но я решил сделать по-своему! :D

Итак, не победив асинхронность я решил встать на её сторону — пусть выполняется одновременно, тогда будем мучить сами переходы.

Я нашел несколько примеров подобных слайдеров, большинство из которых были, сука, на jQuery, но именно это мне и помогло. Я решил прям взять и скопировать один из вариантов (правда с 2-мя клонами) в CodePen и проинспектировать в DevTools как они себя ведут.

Внезапно для себя я кое-что обнаружил! Вот как ведёт себя переход слайдера у меня, внимание на translateX():

А вот как ведёт себя переход в примере на jQuery, который я нашел на stackoverflow:

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

Анимация против inline-переходов

Оказалось, что используемый в примере на jQuery метод (?) :animate() это не то же самое, что навешать .style.tranform на элемент. Это именно функция. Значит и в нативном JS должно быть что-то подобное и оно действительно есть!

И тут два пути. Более сложный вариант через создание функции анимации, буквально с нуля, используя requestAnimationFrame(), которая принимает колбэк функцию с расчётом Кривой Безье для timing-функции (которые ease/-in/-out), функцией отрисовки и условием продолжительности. Или…

Или использовать более простой метод .animate() DOM элемента, который принимает массив с кейфреймами, работающие аналогично как в CSS, и параметры анимации, которые тоже совпадают с хорошо знакомыми свойствами CSS animation-duration, animation-timing и т. д.

Я выбрал второй вариант и мне не стыдно. Выглядит все вот так:

picSlider.animate([
  {transform: `translateX(-${currentSlideIndex * 141}px)`}, // от или 0%
  {transform: `translateX(-${nextSlideIndex * 141}px)`} // до или 100%
  ], {
  duration: 500,
  easing: "ease-out",
  fill: "forwards"
});

Вся эта запись эквивалентна созданию @keyframes в CSS и применению её к элементу по классу, но в JS мы можем запрограммировать её вызов ну и подставить интерполяцией значения, что удобно.

Но самое главное — эта анимация работает, как бы, «покадрово», так же как анимация из примера — применяя в короткие промежутки времени разные значения из указанного интервала. Я чёрт знает как это на нормальном языке объяснить, надеюсь вы поняли. :D

А следствие всего этого то, что таким образом анимация обрабатывается последовательно! Теперь если мы запихнём .animate() c нулевым duration в условие для замены, то он сначала заменит, а потом проиграет следующий .animate() с плавным переходом!

buttonNext.addEventListener("click", () => {
  nextSlideIndex = currentSlideIndex + 1;
  
  if (nextSlideIndex > lastSlideIndex) {
    nextSlideIndex = 0;
  
    switchClasses();
  
    picSlider.animate([
      {transform: `translateX(-${currentSlideIndex * 141}px)`},
      {transform: `translateX(-${nextSlideIndex * 141}px)`}
      ], { duration: 0 }
    );
    /* ... textSlider аналогично */

    currentSlideIndex = nextSlideIndex;
    nextSlideIndex = currentSlideIndex + 1;
  }
  
  switchClasses();

  picSlider.animate([
    {transform: `translateX(-${currentSlideIndex * 141}px)`},
    {transform: `translateX(-${nextSlideIndex * 141}px)`}
    ], { duration: 500, easing: "ease-out", fill: "forwards"}
  );  
  /* ... textSlider аналогично */
  
  currentSlideIndex = nextSlideIndex;
}

Смещение работает с правильной заменой, без асинхронной подставы! Но, чёрт возьми, у нас появился еще один неприятный нюанс. Смещение работает идеально, но анимация самих итемов при смене класса .current работает всё равно в асинхронном формате.

Тут я совсем уже отчаялся, вернулся опять к теме async/await, потом попытался сделать через два клона — спереди и сзади коллекции, сделать замену через transitionend, но всё не получалось или приводило в итоге к тому же.

На следующее утро решил вернуться к .animate() и пойти просто в лоб — будем анимировать всё что двигается! А что не двигается — двигать и анимировать. Соберём все анимируемые элементы и пропишем им анимацию отдельно.

Собираем всё для анимации

Для начала надо собрать в кучу всю информацию — какие элементы изменяются и какие параметры задействованы. Тут многое зависит от вёрстки и в общем от самой идеи анимации.

У меня каждый итем это <li>, внутри в текстовом, внезапно — текст и кнопка, а внутри картиночного — картинка <img> и <span>, имеющий роль кружочка.

Я сначала сверстал его через ::before, как и полагается декорации, но с псевдоэлементами туго работает JS, так как псевдоэлемент на то и псевдо- и является элементом стилей, а не вёрстки.

<!-- без div-обёрток -->
<ul class="slider-text__list"> <!-- слайды текста -->
  <li class="slider-text__item current"> ... </li>
  <li class="slider-text__item"> ... </li>
  ...
</ul>
...
<ul class="slider__list"> <!-- слайды картинок -->
  <li class="slider__item current">
    <img src="pic1.png"> <!-- картинка -->
    <span></span> <!-- кружок на фоне -->
  </li>
  <li class="slider__item"> ... </li>
  ...
</ul>

Анимация у меня задумана следующая:

Текстовый .slider-text__item итем меняет размер scale() и непрозрачность opacity, имитируя поведение картиночного итема.
Картиночный .slider__item меняет непрозрачность opacity, а так же по макету у них разные поля padding (для «вылета» кнопок на .current).
Картинка <img> в итеме меняет размеры width и height.
Фоновый кружок <span> меняет размеры width и height.

Сразу, наверное, поясню — я пробовал сделать через scale() на картиночном итеме .slider__item, получалось хреново — размер уменьшается только визуально, при этом занятое место под элемент не уменьшается, нам же надо именно перерасчет ширины итема.

При этом еще нужно заметить, что при активации у нас анимируется сразу несколько итемов — текущие с .current уменьшаются, а следующие увеличиваются. То бишь одновременно, помимо еще самого смещения слайдера, происходит 4 анимации с итемами.

Окей, то есть нам надо сделать .animate() для всех элементов еще и в два направления — от маленького к большому и обратно. Получается, нам нужно каждый раз еще получать текущий и следующий элемент, точнее пачку элементов, чтобы применять анимации именно к ним. Кошмар.

Но ладно. Сначала попробуем, а потом будем решать. Итого нам надо собрать:

/* элементы текущих слайдов */
let textItem = textSlides[currentSlideIndex]; // текстовый
let picItem = picSlides[currentSlideIndex]; // картиночный
let picItemImg = picItem.children[0]; // сама картинка <img>
let picItemSpan = picItem.children[1]; // <span> кружочек

/* элементы следующих слайдов */
let nextTextItem = textSlides[nextSlideIndex];
let nextPicItem = picSlides[nextSlideIndex];
let nextPicItemImg = nextPicItem.children[0];
let nextPicItemSpan = nextPicItem.children[1];

Дальше, так как индексы постоянно меняются, нам нужно при каждом нажатии кнопки эти переменные переназначать, чтобы анимация корректно применялась к текущим позициям. Запихивать эти же строки по 2 раза в каждую кнопку как-то расточительно, поэтому я решил вывести это в отдельную функцию:

const getItemsByIndex = () => {
  textItem = textSlides[currentSlideIndex];
  picItem = picSlides[currentSlideIndex];
  picItemImg = picItem.children[0];
  picItemSpan = picItem.children[1];
  
  nextTextItem = textSlides[nextSlideIndex];
  nextPicItem = picSlides[nextSlideIndex];
  nextPicItemImg = nextPicItem.children[0];
  nextPicItemSpan = nextPicItem.children[1];
};

buttonNext.addEventListener("click", () => {
  nextSlideIndex = currentSlideIndex + 1;
  
  if (nextSlideIndex > lastSlideIndex) {
    nextSlideIndex = 0;
    
    getItemsByIndex(); // получаем элементы по текущим индексам
    switchClasses();
  
    picSlider.animate(/* 0ms анимация слайдера */);
    textSlider.animate(/* 0ms анимация слайдера */);
    /* ... анимируем замену всего остального */

    currentSlideIndex = nextSlideIndex;
    nextSlideIndex = currentSlideIndex + 1;
  }
  
  getItemsByIndex();
  switchClasses();

  picSlider.animate(/* анимация слайдера */);
  textSlider.animate(/* анимация слайдера */);
  /* ... анимируем плавно всё остальное */

  currentSlideIndex = nextSlideIndex;
}

Получается уже нечто монструозное, даже с комментариями. Итак, что дальше? Каждому элементу теперь нужно применить .animate() со своими параметрами. Параметры можно взять опять во вкладке Computed, давайте попробуем, пойдем по порядку:

textItem.animate([
  {transform: scale(1), opacity: 1},
  {transform: scale(0.5), opacity: 0.5}
  ], {duration: 500, easing: "ease-out", fill: "forwards"}
);
picItem.animate(
  {padding: 0 20px, opacity: 1},
  {padding: 0 5px, opacity: 0.5}
  ], {duration: 500, easing: "ease-out", fill: "forwards"}
)
picItemImg.animate(
  {width: 306px, height: 507px}, ...

Да ну нахрен! Это только три элемента из восьми и только для плавного 500ms перехода без замены. А это еще надо воткнуть в функцию на кнопку! Ужас!

Меняем план — выводим все анимации в отдельную функцию и стараемся максимально оптимизировать процесс.

Получаем Сomputed значения свойств

Мне изначально немного свербило в голове, что приходится что-то калькулировать из DevTools и подставлять это в код. То есть, по сути, я брал значения из JavaScript в браузере и вставлял к себе в JavaScript. Может быть JavаматьегоScript сам умеет находить нужные ему циферки?

И оказывается умеет! Есть несколько способов получить свойства элемента, но мне первым попался, да и больше понравился, вариант использования функции getComputedStyle(), которая принимает элемент и возвращает огромный объект CSSStyleDeclaration со всеми свойствами элемента, коих аж 342.

У этой функции свои нюансы, например, она реагирует на свойство box-sizing и по итогу в width выдаёт значение суммы width и padding если стоит значение border-box. Еще я в процессе работы заметил проблему с height — сюда в сумму уходит каким-то хреном line-height из-за чего нормально посчитать высоту итема с текстом будет трудно, но благо нам она и не нужна оказалась.

Что это значит для нас? У нас есть элементы в разных состояниях, с разными свойствами — мы можем просто собрать с них все стили и применять их как состояния в анимации. На примере текстового итема:

/* собираем стили состояний */
const currentTextItemStyles = getComputedStyle(textItem); //"большой"
const defaultTextItemStyles = getComputedStyle(nextTextItem); //"маленький"

/* делаем массивы кейфреймов */
const textItemIncrease = [defaultTextItemProps, currentTextItemProps];
const textItemDecrease = [currentTextItemProps, defaultTextItemProps];

/* анимируем используя кейфреймы */
textItem.animate(textItemDecrease, {duration: 500, ...}) // уменьшаем
nextTextItem.animate(textItemIncrease, {duration: 500, ...}) // увеличиваем

Отлично! Уже значительно сократили писанину. Но меня на этом моменте смутило, что мы используем в анимации четыре раза два огромных массива по 300+ свойств. А это только один элемент. Нам же по сути нужны 2-3 свойства в каждой. Я решил попробовать избавиться от лишнего.

Отсеиваем лишние свойства

Сам объект CSSStyleDeclaration хранит в себе, в том числе, свойства в виде пар «свойство — значение». Я подумал было бы круто их как-то достать, именно те, что мне нужны. Как достать значения я прекрасно знал — по индексу или по ключу. А можно ли как-то вытянуть именно пару ключ-значение?

Можно, конечно! Используя хитрую функцию .reduce(), которая, как бы, разбирает объект или массив по составляющим, используя колбэк функцию, где прописывается по каким условиям делать разбор.

В поисках я нашёл еще более хитрую конструкцию с применением функции .reduce(), на которую натурально минут 40 сидел и просто пялился, тупо чтобы понять что она вообще делает. А делает она как раз то, что мне надо — возвращает массив пар ключ-значение по заданным ключам.

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

Короче, я её трансформировал для себя в более понятном (надеюсь) виде. Занимает может и не одну строчку, зато переведено с квантово-индусского:

const getElementProps = (element, keys) => {
  elementStyles = getComputedStyle(element);
  return keys.reduce(
    (props, key) => {
      if (key in elementStyles) {
        props[key] = elementStyles[key];
        return props;
      }
    }, {/* initialValue */} // пустой объект для сбора пар
  )};

Итак, разбираемся что происходит:

Функция getElementProps() принимает элемент и массив с ключами искомых свойств вида ["width", "height", ... ].
Элементу находим все стили через getComputedStyle() и записываем в локальную переменную elementStyles.
В возврат return (можно и отдельно) записываем .reduce() функцию, которая пройдется по нашему массиву искомых ключей.
Функция .reduce() принимает два аргумента — анонимную (не названную) колбэк функцию и initialValue — пустой объект, куда будут записываться возвраты return колбэк функции, то бишь пары ключ-значение.
Колбэк принимает два аргумента — аккумулятор props, куда записывается каждый результат return колбэка и обрабатываемый в одной итерации элемент key. По сути, это всё такой хитрый эквивалент for (key of keys).
Внутри колбэк функции в условии проверяется наличие ключа key, например «width», в объекте через оператор in и в случае нахождения записывает значение по ключу в аккумулятор.

В итоге у нас получается вожделенный объект нужных нам свойств! На примере картиночного слайдера — нам нужны размеры width и height для картинки <img> и кружочка <span>, потом opacity для итема и еще margin-right для расчёта смещения. Получается:

const picItemProps = ["width", "height", "opacity", "marginRight"];

const currentPicItemProps = getElementProps(picItem, picItemProps);
const currentPicItemImgProps = getElementProps(picItemImg, picItemProps);
const currentPicItemSpanProps = getElementProps(picItemSpan, picItemProps);
/* аналогично для default состояния */

Пример что в итоге в currentPicItemProps

А для смещения нам нужно только численное значения ширины width и отступа margin, без px, так как мы потом будем подставлять его через интерполяцию в строку. Получаем его из наших пропсов с помощью функции parseInt():

const picSlideOffset = 
  parseInt(defaultPicItemProps.width) // не помещается :D
  + parseInt(defaultPicItemProps.marginRight); // = 101 + 40 = 141

Аналогично делаем для всех четырёх элементов и двух состояний, собирая таким образом такую, условную базу кейфреймов для анимации.

Еще для краткости и удобства можем собрать в одном месте наши параметры анимации, которых у нас всего два, но использоваться они будут очень часто:

const instant = {duration: 0, fill: "forwards"}; // для замены
const ease500 = {duration: 500, easing: "ease-out", fill: "forwards"};

Финальная подстановка

Итак, у нас есть все действительные значения, записанные в кейфреймы, осталось дописать функции анимации. Продолжим на примере картиночного слайдера, так как он по сложнее.

Для начала сразу решим вопрос со смещением слайдера. Я не смог придумать как изящно запихнуть кейфреймы с интерполяцией, поэтому сделал функцию, которая просто сама уже подставит нужный оффсет и вернёт весь кейфрейм:

const moveContainer = (offset) => {
  return [
    {transform: `translateX(-${currentSlideIndex * offset}px)`},
    {transform: `translateX(-${nextSlideIndex * offset}px)`}
  ]};

И далее в .animate() как аргумент подставляем эту функцию с нужным оффсетом. Остальные .animate() функции принимают уже константы из нашей базы и работают с ними.

Я также для сокращения писанины решил вывести в отдельную функцию все анимации из кнопки и чтобы функция была универсальной — будем передавать в неё параметры анимации в зависимости от ситуации. Таким образом функция подойдет и в замене и в плавном переходе:

const itemsAnimation = (timing) => {
  textSlider.animate(moveContainer(textSlideOffset), timing);
  picSlider.animate(moveContainer(picSlideOffset), timing);
  
  textItem.animate(textItemDecrease, timing);
  picItem.animate(picItemOpacityOff, timing);
  picItemImg.animate(picItemImgDecrease, timing);
  picItemSpan.animate(picItemSpanDecrease, timing);
  
  nextTextItem.animate(textItemIncrease, timing);
  nextPicItem.animate(picItemOpacityOn, timing);
  nextPicItemImg.animate(picItemImgIncrease, timing);
  nextPicItemSpan.animate(picItemSpanIncrease, timing);
}

А в кнопке у нас остаётся только:

buttonNext.addEventListener("click", () => {
  nextSlideIndex = currentSlideIndex + 1;
  
  if (nextSlideIndex > lastSlideIndex) {
    nextSlideIndex = 0;
    
    getItemsByIndex();
    itemsAnimation(instant);
    switchClasses();
  
    currentSlideIndex = nextSlideIndex;
    nextSlideIndex = currentSlideIndex + 1;
  }
  
  getItemsByIndex();
  itemsAnimation(ease500);
  switchClasses();

  currentSlideIndex = nextSlideIndex;
}

А вот, в общем-то, и всё. Слайдер готов в том виде, в котором я изначально хотел. Я у себя в коде еще немного намудрил с выведением отдельно функций в кнопке swapSlides() и moveSlider() — которые еще чуть укорачивают запись.

Остальные задачи

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

Пагинация

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

Это значит, что у нас первая точка должна обозначать и 1-й и 4-й слайд и, желательно, не перемещаться между ними при нажатии. При этом нужно не сломать всё остальное, то есть трогать расчёт индексов нельзя.

Для начала навесим на кнопки функции на клик. Кнопок у нас три, но они однотипные — номер кнопки ведёт к номеру слайда. Тут прям напрашивается цикл и его мы и применим.

for (let i = 0; i < buttonsDots.length; i++) {
  buttonsDots[i].addEventListener("click", () => {
    nextSlideIndex = i; // номер кнопки от i = 0 равно индексу слайда
    
    getItemsByIndex();
    itemsAnimation(ease500);
    switchClasses();
    
    currentSlideIndex = nextSlideIndex;
});

Еще надо сразу учесть проблему в случае позиции слайдера на клоне (4-м слайде) и нажатии, например на 3-й слайд. С кодом выше анимация будет влево, что немного неожиданно для цикличного слайдера — мы же на 1-м слайде, а листается «назад».

То есть, нам и здесь надо подставить условие с заменой, правда немного с другой проверкой:

if (currentSlideIndex === lastSlideIndex) { // если точно последний
  nextSlideIndex = 0; // меняем на первый
  
  getItemsByIndex();
  itemsAnimation(instant);
  switchClasses();
  
  nextSlideIndex = i;
} // потом уже слайдим

Далее решим со стилями точек, напомню, выглядят они вот так:

Текущая .current — непрозрачная, а остальные полупрозрачные. Всё привязано к тому же вспомогательному классу, поэтому для «листания» точек немного расширим функцию switchClasses(). При этом надо учесть, опять же, что слайдов на один больше чем точек:

const switchClasses = () => {
  /* ... Меняем классы итемам ... */
  
  if (currentSlideIndex === lastSlideIndex) {
    buttonsDots[0].classList.remove("current");
  } else {
    buttonsDots[currentSlideIndex].classList.remove("current");
  }  
  
  if (nextSlideIndex === lastSlideIndex) {
    buttonsDots[0].classList.add("current");
  } else {
    buttonsDots[nextSlideIndex].classList.add("current");
  }
}

Если у нас текущий/следующий слайд это последний, то бишь клон 1-го, то активной делаем 1-ю точку, в остальных случаях по номеру индекса.

В этом случае правда будет небольшой баг — при current позиции слайдера на клоне и нажатии на закрашенную, но всё еще активную первую точку (так как i в цикле будет 0, что отлично от current) будет срабатывать кривая анимация.

В этом случае можно не мудрить и просто дизеблить кнопку по классу. Отключить нажатия по ней можно с помощью свойства pointer-events: none.

.slider-dots__control.current {  pointer-events: none; }

Смена стилей сайта

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

У меня в стилях заранее заготовлены стили для трёх состояний тега <body>:

Без дополнительных классов стиль сайта розовый.
С классом .page-body--blue оформление (фон, кнопочки, акценты) меняются на голубенький.
С классом .page-body--yellow на жёлтый.

Нам осталось только воткнуть смену этих классов на <body>, но с определёнными условиями. Нам нужно что бы оформление менялось одно за другим, то бишь надо как-то условно ограничить в зависимости от индексов.

Долго тут мусолить нечего — берём индексы слайдов и проверку на остатки, чтобы учесть теоретическое переполнение, получаем:

if (nextSlideIndex === 0 || nextSlideIndex % lastSlideIndex === 0) {
  document.body.classList.remove("page-body--blue", "page-body--yellow")
} else if (nextSlideIndex === 1 || nextSlideIndex % lastSlideIndex === 1) {
  document.body.classList.add("page-body--blue");
  document.body.classList.remove("page-body--yellow")
} else if (nextSlideIndex === 2 || nextSlideIndex % lastSlideIndex === 2) {
  document.body.classList.add("page-body--yellow")
  document.body.classList.remove("page-body--blue");
}

Пихаем полученную красоту в ту же функцию switchClasses() и получаем итоговый готовый слайдер. Теперь точно всё!

Ссылки и финал

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

Во время работы я много чего находил, все ссылки со Stackoverflow и MDN я кидать не буду, но ключевые штуки которые мне помогли оставлю:

Вопрос на Stackoverflow где написан концепт бесконечного слайдера на jQuery за счет клонирования первого и последнего итема.
Вариант слайдера с заменой на transitionend, косвенно помог — натолкнул на идею с индексами и помог разобраться с интерполяцией.
Хитрая фича с .reduce() сломавшая мне мозг, но которая помогла мне решить вопрос с фильтрацией свойств.

И еще десятки статей с MDN, спецификаций и других ресурсов.

Telegram — Twitter — Instagram — VK

Курс «HTML и CSS. Профессиональная вёрстка сайтов» – асинхронный формат

2022-10-10T21:06:31.076Z

Всем привет. Я таки прошел все тренажёры HTML Academy, хоть и о последних блоках про JavaScript писать не стал — подписка кончилась, буквально, в последний день прохождения заданий, а оплачивать её только ради конспекта здесь не хотелось.

К тому же, тренажёры — это только начальный этап и темы в блоках посвященные JavaScript, будут еще не раз встречаться далее в обучении. Часть из них уже встретились в конце самого первого курса — «HTML и CSS. Профессиональная вёрстка сайтов».

Я проходил этот курс в рамках профессии «Фронтенд-разработчик» в асинхронном или, если по простому, в самостоятельном формате. Сама «Профессия» — это, грубо говоря, пакет курсов, а самостоятельный формат — более дешёвый и гибкий по времени. Для меня такие условия звучали идеально, но на самом деле отличия от обычных курсов не только в этом.

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

О чём курс?

Решил, что важно немного пояснить, а то заголовок-то у курса кричащий, но не конкретизирующий. Курс, сюрприз — про вёрстку, но не про всю. Первый курс, который в Академии еще называется «Уровень 1», посвящён только статичной вёрстке, без адаптивности под разные устройства.

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

Я бы не сказал, что это плохо — это просто нюанс.

Программа обучения

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

Доступные проекты

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

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

Курс поделён на 10 разделов, а каждый раздел поделён еще на, назовём это, стадии:

Подготовка к вебинару, которая часто разделена еще на:

Тренажёры (да, они здесь как часть обучения).
Статьи из «Учебника» или какие-то внешние статьи по теме раздела.

Лайв или вебинар (точнее запись), на котором разбираются интерактивные «Демки» и авторы курса комментируют подходы к задаче. Это именно не лекции, а разбор задачи и «узких мест» в реализации.
Сами «Демки» — это как тренажёры, но там всё уже решено и каждый шаг идёт с пояснениями.
Домашнее задание — это страницы c описанием чего делать в рамках раздела со своим проектом. Так как формат самостоятельный и наставника нет, есть ещё разбор примера, но только на один лёгкий проект (Nёrds).
Дополнительные материалы — в них частенько много полезной инфы, но есть и прям филлеры, особенно в одном разделе (позже напишу).

Пример структуры внутри раздела

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

Отличие асинхронного формата

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

Во-первых, у нас нет наставников. Их место занимает Discord-сервер для оплативших профессию, где участники могут задавать вопросы и дежурные наставники отвечают на них. Иногда.

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

Очень часто отвечают более опытные ученики, что радует:

Наставника, кстати, всего два не просто на курс, а сразу на всю «Профессию», а это, на минуточку, 5 курсов. Народу, конечно, на момент сентября вроде как немного (я не вижу всех кто офлайн), вопросы задаются с переменной частотой, иногда несколько суток ни одного. Поэтому, сажать на дежурство десяток наставников, наверное, нецелесообразно.

Второе отличие — количество проектов. В полном курсе их, не считая «Барбершопа», пять штук. В порядке возрастания сложности:

Nёrds
Sedona
Техномарт
Device
Gllacy

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

Третье отличие — нет обязательного взаимодействия с GitHub. Это, на самом деле, вредное отличие, так как уже в «Уровне 2» начинается прям полное погружение в Git и уж лучше сразу хотя бы базово с ним разобраться, хотя бы на уровне как сделать эти ваши пуши, коммиты, пул-реквесты и т. д.

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

Пятое отличие — не дадут сертификат и ачивку в личном кабинете. :(

Успешно прошел, а шарик не дали, в классе заперли.

Еще одно такое, мини-отличие, которое заметил в последнем разделе по JS — не разбираются слайдеры, только модальные окна. Увидел в разборе домашнего задания, что у ученика полного курса слайдеры есть. Ну и ладно.

Чему научился?

Очень многое в курсе построено на тренажёрах, а так как я их уже прошел, то и значительную часть я уже знал. Плюс тот самый «Великий Кексби» подготовил меня к подобному формату самостоятельной работы.

Однако, в учебнике все-таки были некоторые особо важные темы. Самые массивные из них — методики. Их несколько в разных разделах, например, методика построения семантически верной разметки, методика БЭМ, методика построения сеток и микросеток, методика работы с отступами и другие.

Это такие огромные, подробные мануалы с пошаговым разбором действий, типовых ошибок, «бестпрактиз», хинтов и так далее — пожалуй, одни из наиболее полезных штук в курсе.

Например, в ходе первых разделов, наконец стало точно понятно в чем отличие <section> и <article>. Почему обязательно нужны <h2> для <section> даже если их нет на макете. Где разумно <section>, а где лучше <div>.

Выглядит аж красиво. Или я схожу с ума?

Про БЭМ это вообще отдельный разговор, мир не станет прежним — я всё думал, что за __ везде в классах на сайтах, а оно вон чего. Хотя БЭМ в курсе и не требуют, но я сразу начал практиковаться.

Научился подключать favicon и webmanifest — ничего сложного, но с нюансами. Сама favicon оказывается работает даже если её тупо шваркнуть в корневую папку, но лучше всё-таки явно прописать.

Много узнал и изучил про normalize.css и его прародителей.

Научился грамотно подключать шрифты в CSS через @font-face. В дополнительных материалах есть записи с каких-то выступлений Вадима Макеева, он там очень много интересных штук про это рассказывает.

Отдельным открытием были кастомные свойства. Это по сути как переменные, но в чистом CSS. Я сначала даже не поверил. Серьезно? А нафига тогда препроцессоры? Видимо, для миксинов.

Тут только цвета, но вообще можно почти любые значения

Сетки прошли практически без сюрпризов, уж их-то я еще на тренажёрах изучил наперёд. Уверен, что еще споткнусь на нюансах на 2-м уровне, но пока мне хватило опыта — были одни из самых комфортных разделов.

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

grid-template-columns: 1fr 2fr;
//не равно
grid-template-columns: repeat(3, 1fr);

Вы, возможно, смотрите и такие «Ты чо дурак?». Нюанс приобретает смысл, когда у вас структура колонок 1 к 2 или 1 к 3, в общем дробная, там где так и хочется использовать в лоб fr.

Типа как тут – хочется сделать 1fr 3fr

Однако, надо еще не забывать про gap и что он, по сути, тоже учувствует в расчёте ширины. А от того как вы зададите grid-template-columns будет отличаться количество ячеек, а как следствие гэпов и в конечном итоге размер доли под которую выделен контент.

Много разных нюансов по поводу интерактивных объектов и их плохой наследуемости свойств. В Техномарте есть форма из одного поля поиска в хэдере, вот с ней прям засел я на пару часиков.

Остальные декорации заняли много времени, но в основном в тренажёрах уже разбирались. Немного, правда, провозился на чекбоксах и радио — хотел сделать их не через SVG-иконки, а методами CSS, но споткнулся о галочку в чекбоксе — у нее была обводка закрывающая часть контура.

Узнал про переполнение и как его предвидеть. Немного даже перестарался, по-моему — учел даже переполнение в одну строку без пробелов в местах, где текст явно не абзац осмысленного текста, а короткое описание (типа <label>).

Базово разобрался с минификаторами CSS и JS, правда, насколько понял из Лайва, что есть технология, которая всё это дело автоматизирует и мы её разберём на 2-м уровне.

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

В разделе про JS мы искали элементы через .querySelector(), игрались с классами через .classList и немного разобрались с работой localStorage. Запрограммировали открытие и закрытие модалок и еще настроили автофокус при открытии и автозаполнение полей по ключу из localStorage.

Про проекты

Я сначала пытался затрайхардить и делать параллельно все три доступных проекта. И, в общем-то, до 4го раздела так и было — вся разметка и часть стилизации у меня готово и для Техномарта и для Nёrds с Седоной.

В определённый момент я даже начал искать по интернету остальные два проекта и даже нашёл. Труда особого не составило — они не то чтобы прям в общем доступе, но и не за семью печатями. GitHub и Google вам в помощь.

И в какой-то момент моя душонка такая — «А давай сделаем их все!». Где-то как раз в этот момент мне надо было улетать в другой город на несколько дней по делам и… слава богам, я рад что мне это помешало.

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

Работая над Техномартом я несколько раз тупо переписывал огромные куски как и вёрстки так и стилей, так как повествование в курсе идёт иногда в виде «Оставим пока так — потом поправим/доделаем». А теперь умножьте это на 5, а то и на 10, так как Девайс и Глейси судя по макетам сильно сложнее Техномарта и тем более Nёrds или Седоны.

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

И уже если потом появилось желание закрепить или тупо закрыть свои гештальты (как у меня) можно приступать к остальным проектам. Опять же если вы в асинхронном формате, а в обычном, насколько я понимаю, особо не по растекаешься на проекты, т. к. там времечко жмёт.

Сколько времени заняло

Моя любимая часть. Я не так давно занялся этим вот подсчётом личной эффективности, график, таймеры и т. д. Напишу как получилось. Для всего этого дела использовал приложение Toggl Track — оно бесплатное, крайне рекомендую.

Всё обучение заняло у меня 29 дней — чуть более 4-х недель. Это, правда, с учетом, что мне на 5 дней пришлось улететь в другой город по делам.

Я не трайхардил до посинения, как делал это на тренажёрах весной, в среднем старался держаться около 20 часов в неделю. Так, в общем-то, и получилось, если учесть пятидневный перерыв.

В сумме первый курс «HTML и CSS. Профессиональная вёрстка сайтов» занял у меня 68 часов чистых обучения:

В таймер включены мои повторные прохождения тренажёров — тут, понятное дело, не очень объективно, так как я их пролетал зная чего делать. Так что можно смело еще плюсовать ~8 часов, наверное.

С другой стороны, я нарочно НЕ учитывал просмотры Лайвов, которые в среднем 1.5-2 часа каждый, хотя я и смотрел их на х2. Они просто, по сути, идут по Демкам, которые я сам пролистывал многократно в ходе работы над заданием и вот это я уже учитывал в таймер.

Сейчас я уже приступил к следующему курсу «HTML и CSS. Адаптивная вёрстка и автоматизация» или «Уровень 2» и это немного не то, что я ожидал. В хорошем ключе. Я еще удивлялся — почему адаптивность отрезали от вёрстки, ведь это в современном мире мастхэв. Оказалось не всё так просто и с адаптивом на 2-м уровне идёт еще пачка технологий и адаптив как таковой не ограничивается шириной экрана или «резиновостью».

За сим всё, спасибо за внимание! Продолжу в том же духе и встретимся уже после следующего курса.

Telegram — Twitter — Instagram — VK

Прикладные навыки или глубокая теория?

2022-08-18T16:05:07.420Z

У меня всегда был на эту тему диссонанс. С одной стороны — я люблю докапываться до фундаментальной основы всего, что мне интересно. Это проявляется и в быту, и в хобби, и в работе.

Из бытового — когда я впервые делал ремонт, не так давно, кстати, я решил не клеить обои, а просто покрасить стены. В процессе изучения вопроса узнал, что перед покраской обязательно нужна некая «Грунтовка», а через пару часов уже изучаю адгезию, когезию, вспоминаю термодинамику, 2-й курс универа и господина Ван-дер-Ваальса.

С физикой у меня вообще полюбовные отношения, не смотря на то, что в универе я не особо отличился каким-то успехом в учёбе. Например, мне безумно нравится смотреть научпоп вообще на любые математические, физические и химические темы. Обнаружить себя в 4 утра с 30+ открытыми вкладками Википедии и лекций — для меня норма. В особо интенсивных случаях достается тетрадь и ручка, скачивается дедушка Mathcad или Labview.

Отдельный, можно сказать, вид «научпопного искусства» это визуализации квантово-механических процессов и, пользуясь случаем, порекомендую несколько крышесносных видео на эту тему:

Общая теория относительности и её визуализация;
Квантовая теория поля;
Теория струн;
Прыжок в чёрную дыру теория и безумно крутой POV 360;
Там много всего — перевод на русский, оригинал на английском.

В работе и учебе, в профессиональном плане, тоже частенько проявляется эта моя сторона. Из относительно недавнего — Кривые Безье. Я полез разбираться в математическое построение разных кривых с разным количеством опорных точек. Классические, если можно так сказать, Кривые Безье в графике — кубические в двумерном пространстве. Зачем вам эта информация? А мне она была зачем? Но я потратил на это часов 7-8 точно.

С другой стороны — практической пользы от такого дотошного вникания во всё чаще всего нет или она околонулевая. Можно потратить сутки на что-то интересное, но крайне бесполезное.

Вопрос которым я озадачил себя — «Так уж ли важно наличие этой пользы»?

Когда я начал изучать фронтэнд и программирование, я начал периодически слушать умных и опытных дядек-синьоров. Один из таких, кстати, господин Сергей Немчинский — классный дядька, его канал понравился.

Так вот, этими дядьками очень часто (скорее, даже — всегда) подаётся идея, что главное освоить востребованный навык или, как сейчас модно, «хардскилл», а остальное прилипнет по мере практики. И с таким тяжело спорить, так как программирование во многом прикладное искусство — практика здесь буквально основа мастерства.

То есть, если коротко — учишь основы, учишь фреймворк, ищешь трейни/джун оффер. Остальное отбрасывай, не трать время. Глубокая теория не нужна, потому что бизнес диктует дедлайны, а ПиЭм выставляет эстимейты в графике.

И тут как бы тоже хрен поспоришь.

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

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

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

Моя «польза» — приятное ощущения от познания и понимания какой угодно и никакому бизнесу ненужной глубокой теории. Пусть даже в 4 утра.

Препроцессор Less — Тренажёр HTML Academy

2022-07-04T14:35:15.599Z

Разобравшись с вёрсткой переходим к инструментам её ускорения. Мы уже знаем базовые вещи PHP, который формально препроцессор HTML, теперь же займемся CSS и одним из его препроцессоров Less.

Я, кстати, уже писал немножечко про один другой препроцессор CSS — в статье про мобильное приложение для самообучение Webref, там нас познакомили с Sass и его упрощённым вариантом SCSS. Спойлер — отличия от Less всё-таки есть, особенно в синтаксисе, хотя по сути мало что меняется.

О препроцессорах

Препроцессор позволяет подойти к языку разметки или стилей как к языку программирования — с переменными, условиями, циклами и так далее. Это касается и PHP для HTML, который мы разбирали уже достаточно давно, и это же касается Less или других вариантов для CSS.

Почему эти языки называются препроцессорными, я уже как-то давно писал в самом начале про PHP, но если вкратце — это языки которые обрабатывает сервер и трансформирует его в понятный для браузера HTML и CSS.

В случае с Less мы по сути «программируем» стили, уменьшаем количество повторов и, тем самым, упрощаем себе работу. Меньше повторов, меньше времени на написание, больше логики и наглядности. Хотя по началу может показаться с точностью да наоборот.

Возможности Less

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

Переменные

Первое, что можно сделать в Less — это объявить переменную:

@main-color: red;
@cintainer-width: 150px;

Один раз объявив переменную, мы можем использовать её в любом месте кода, при этом, поменяв значение переменной — оно поменяется везде. Таким образом, сильно упрощается работа с большим объемом одинаковых параметров.

.card-container {
  background-color: @main-color;
  width: @container-width; 
}

.description {
  color: @main-color;
}

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

С переменными Less работают стандартные правила области видимости — переменные объявленные вне правил являются глобальными и могут применятся везде, при этом они могут переопределяться на локальные значение:

.card-container {
  @container-width: 100px;
  
  background-color: @main-color; /* будет red -глобальное значение */
  width: @container-width; /* будет 100px - локальное значение */
}

.description {
  @main-color: blue;
  
  color: @main-color; /* будет blue - локальное значение */
}

Математические операции

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

Например, самый простой вариант — в Less работают математические операции:

@cintainer-width: 150px;
@big-container-width: @container-width + 100; /* 250px */

@par-font-size: 16px;
@header-font-soze: @par-font-size * 1.5; /* 16 * 1.5 = 24 */

@cell-wudth: 50%;
@mini-cell-width: @cell-width / 2; /* 50% / 2 = 25% */

Два основных нюанса при написании математических операций в Less:

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

С числовыми значениями вполне всё очевидно, а вот с цветом не совсем — с ним тоже возможны математические операции, но операторы в любом случае будут работать с показателями RGB и влиять на все три цветовых показателя.

При этом неважно как мы зададим цвет — ключевым словом, HEX или как-то еще — операция будет с показателями RGB:

@rgb-color: rgb(110, 27, 255);
@keyword-color: red; /* эвкивалент rgb(255, 0, 0) */
@hex-color: #aa3399; /* эквивалент rgb(170, 51, 153) */

@new-rgb-color: @rgb-color + 20; /* = rgb(130, 47, 255) – 255 максимум */
@new-keyword-color: @keyword-color + 20; /* = rgb(255, 20, 20) */
@new-hex-color: @hex-color + 20; /* = rgb(190, 71, 173) */

Цветовые функции

Помимо математических операций в Less существуют и функции. Я уверен их достаточно много, но в тренажёре нас сначала знакомят в основном с цветовыми функциями, влияющими на тон, яркость и насыщенность.

Первая на очереди функция поворота цветового тона spin(), которая очень похожа на CSS-фильтр hue-rotate() и делает по сути тоже самое, но меняет именно значение конкретного цвета в свойстве, а не модифицирует уже отрисованный элемент.

Функция принимает два аргумента — цвет или переменную с цветом и числовое значение угла поворота, причём без указания единицы измерений deg:

@not-red: spin(red, 60); /* повернет на 60deg по часовой на диаграме */
@true-red: spin(@not-red, -60); /* повернёт обратно, против часовой */

.green-box {
  background-color: spin(@true-red, 120); /* 120deg от red - зелёный */
}

Следующие две функции отвечают за уменьшение и увеличение яркости цвета — darken() и lighten() соответственно. Функции тоже принимают два аргумента, первый — это цвет или переменная с цветом, а вторая значение увеличения яркости в процентах %:

@light-blue: lighten(blue, 50%);
@dark-blue: darken(blue, 50%);

Во втором аргументе указывается именно процент воздействия на цвет, а не положение на шкале яркости. То есть при 100% значении darken() получится чёрный цвет, а при 100% значении lighten() получится белый, при этом при значении 0% — цвет не изменится.

И последние две функции из тренажёров отвечающие за уменьшение и увеличение насыщенности цвета — desaturate() и saturate() соответственно. Синтаксис у них такой же как и у яркости:

@more-blue: saturate(blue, 30%);
@greyly-blue: desaturate(blue, 50%);
@grey: desaturate(blue, 100%); /* 100% desaturate = оттенки серого */

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

@dark-greyly-yellow: darken(desaturate(yellow, 50%), 30%);

Где всё это применимо? В тренажёре нам приводят в пример всплывающие подсказки и их стилизацию — мы задаём лишь один базовый цвет — фиолетовый, а всё остальное будь то цвет текста, фона и рамок даже разных сообщений мы выводим из базового используя вышеописанные функции.

Таким образом меняя всего один параметр — базовый цвет, мы можем поменять палитру всех элементов. Используя эти инструменты по сути можно создавать целые «темы» интерфейса и менять их одним переключателем!

Вложенные правила

Следующие возможности препроцессора связаны с CSS-правилами. Самое простое для понимания — в Less CSS-правила можно вкладывать друг в друга:

.card {
  color: @text-color;
  background-color: @bg-color;
  
  a {
    color: @link-color;
    text-decoration: none;
  }
}

Что в CSS преобразуется как:

.card {
  color: red; /* цвета условные */
  background-color: black;
}
.card a {
  color: blue;
  text-decoration: none;
}

Такая древовидная вложенность в Less избавляет код от дублей и делает его более структурным, читаемым и наглядным.

При работе с такой вложенной структурой в Less есть еще один механизм позволяющий обращаться непосредственно к родительскому селектору или к его подстроке:

.button {
  &-submit {
    color: @btn-text-color;
    background-color: @btn-bg-color;
    
    &:hover {
      background-color: lighten(@btn-bg-color, 30%);
    }
  }
  &-cancel {
    background-color: desaturate(@btn-bg-color, 50%);
  }
}

Будет преобразовано в CSS как:

.button-submit {
  color: white; /* цвета снова условные */
  background-color: red;
}

.button-submit:hover {
  background-color: lightred;
}

.button-cancel {
  background-color: #fa8072;
}

Символ амперсанда & приравнивается к строке указанной в родительском селекторе и таким образом можно обращаться сразу к группе селекторов в своем пространстве имён.

Также как и в примере, это используется при работе с псевдоклассами — иначе без подстановки & перед :hover конечный селектор в CSS выглядел бы как .button-submit :hover — именно с пробелом.

Примеси Less

Следующая важная особенность Less — примеси, возможность «примешивать» содержимое одного правила в другой. Если в Less записать:

.big { width: 500px; }

.white { color: white; }

.block {
  .big;
  .white;
}

то в CSS преобразуется как:

.big { width: 500px; }
.white { color: white; }
.block {
  width: 500px;
  color: white;
}

Это самый примитивный вариант, однако, примеси это целый новый уровень абстракции, позволяющий создавать по сути чуть ли не функции.

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

На мой взгляд, примесь действительно похожа на функцию в обёртке CSS синтаксиса — выглядит она как обычный селектор со скобками:

.white() { color: white; } /* объявление примеси */
.text { .white(); }      /* применение примеси */

При этом в CSS примесь никак не выводится:

.text { color: white; }

Скобочки у примеси не просто так — на самом деле, в них можно передавать параметры, которые далее используются в примеси для её построения. Параметрам можно задать значение по умолчанию, в случае если при вызове примеси их не указали:

.colors (@color) { /* параметр без значения по умолчанию */
  color: darken(@color, 30%);
  background-color: lighten(desaturate(@color, 20%) 20%);
}

.offset(@padding: 10px; @margin: 20px;) { /* со значениями по умолчанию */
  padding: @padding;
  margin: @margin;
}

.block {

  &-1 {
    .colors(blue);
    .offset(5px; 10px); /* значения сопоставляются по порядку */
  }
  
  &-2 {
    .colors(green);
    .offset();
  }
}

Результат в CSS:

.block-1 {
  color: darkblue;
  background-color: lightskyblue;
  padding: 5px; /* значения при вызове примеси */
  margin: 10px;
}

.block-2 {
  color: darkgreen;
  background-color: lightseagreen;
  padding: 10px; /* значения по умолчанию */
  margin: 20px;
}

Таким образом мы можем один раз задать какой-то набор свойств в виде примеси и в дальнейшем вызывать его в любом месте передавая только параметры. Особенно хорошо можно прочувствовать полезность примесей если поработать со свойствами типа border-top-left-radius и написать их хотя бы несколько раз в чистом CSS.

Шаблон примеси

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

Чтобы создать шаблон примеси, достаточно указать его имя в первом аргументе, перед параметрами примеси:

.set-color(@color) { /* примесь */
  background-color: @color;
}
.set-font-size(lighten; @color) { /* шаблон примеси */
  background-color: lighten(@color, 50%);
}

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

@base-font-size: 16px;

.set-font-size(@size) {
  font-size: @size;
  line-height: @size * 1.5;
}

.set-font-size(small, @size) {
  font-size: @size / 2;
  line-height: @size / 2;
}

.set-font-size(big, @size) {
  font-size: @size * 2;
  line-height: @size * 2 * 1.2;
}

.promo-header {
  .set-font-size(big, @base-font-size);
}
.promo-description {
  .set-font-size(@base-font-size);
}
.promo-note {
  .set-font-size(small, @base-font-size)
}

Результат в CSS:

.promo-header {
  font-size: 32px; /* 16 * 2 = 32 */
  line-height: 38px; /* 16 * 2 * 1.2 = 32 * 1.2 = 38.4 */
}
.promo-description {
  font-size: 16px; 
  line-height: 24px; /* 16 * 1.5 = 24 */
}
.promo-note {
  font-size: 8px; /* 16 / 2 = 8 */
  line-height: 8px;
}

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

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

Он обозначается зарезервированным именем _@ и на примере шаблонов для текста выше, мы можем, скажем, задать везде одинаковый font-weight:

.set-font-size(_@, @size) {
  font-weight: bold;
}

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

Примесь с условием

Вот мы и дошли до «программируемой» части Less — условные конструкции с примесями! Логика, правда, немного отличается от привычной конструкции в языках программирования — мы не задаём условия «if/else», в которых пишем что будет происходить в их случае.

Я немного порылся в англоязычной документации Less и там эта конструкция называется «Mixin Guards», то бишь «Охрана примеси». Суть, в общем-то, практически не меняется — мы ставим условие выполнения самой примеси с помощью ключевого слова when:

.set-font-size(@size) when (@size < 12px) {
  font-weigth: regular;
}

Примесь выше сработает только если передаваемое значение, в нашем случае это размер шрифта, окажется меньше 12px.

В условие в скобках можно помещать как параметры самой примеси, так и внешние факторы, например, соответствие каких-то внешних переменных, причем их соответствие проверяется в момент вызова примеси:

.set-font-color(@color) {
  color: @color;
}

.set-font-color(@color) when (@bg-color = black) {
  color: lighten(@color, 50%);
}

.first-text {
  .set-font-color(red); /* сработает безусловная примесь */
}

@bg-color: black; /* теперь условие корректно */

.second-text {
  .set-font-color(red); /* сработает условная примесь */
}

В итоге в CSS получится:

.first-text {
  color: red; /* безусловная примесь */
}

.second-text {
  color: lightred; /* примесь с условием */
}

Помимо этого, в условии или в «охране», можно использовать функции для проверки типа передаваемых в примесь данных. Грубо говоря, строго типизировать нашу примесь:

.mixin(@param) when (isnumber(@param)) { … }

Функций проверки не так уж и много:

isnumber() — из примера выше, проверяет значение — любое числовое значение — просто число, пиксели, проценты и так далее, главное исчисляемое значение.
iscolor() — проверка значение — цвет, любой вариант записи — ключевое слово, HEX, RGB и так далее;
isstring() — проверка значение — строка, то есть значения свойств обёрнутые в кавычки "..." — различные названия шрифтов, например;
iskeyword() — проверка значение — ключевое слово, имеются ввиду ключевые слова в значениях свойств, кроме цветовых — right, center, middle и так далее;
isurl() — проверка значение — функция url(), то есть проверка на значение-ссылку.

Есть еще несколько дополнительных, проверяющих конкретные единицы измерения — ispixel(), ispercentage() и isem(). Там еще есть парочку, но про них нет смысла пока писать.

Вставки

В Less примеси — это целые правила, которые можно примешать к другим правилам. Но есть и возможность подставлять какие-то отдельные куски правил, свойств, значений, да в общем-то чего угодно. Называется это «вставка» или интерполяция переменных.

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

Дальше чтобы значение этой переменной подставить в нужном месте используется фигурные скобки вокруг имени — @{var}:

@state: success;
@property: color;
@icon: "question";

.btn-@{state} { /* как часть селектора */
  background-color: green;
}
.btn-error {
  background-@{property}: red; /* как часть свойства */
}
.btn-help {
  background-image: url("/img/icons/@{icon}.png"); /* как часть url */
}

Результат в CSS:

.btn-success {
  background-color: green;
}
.btn-error {
  background-color: red;
}
.btn-help {
  background-image: url("/img/icons/question.png");
}

Еще одна особенность Less, про которую упомянули в этом уроке, но которая на мой скромный взгляд очень важна — это своеобразное экранирование или такой режим строки, содержимое которой при вызове не изменяется, то есть игнорируется весь Less синтаксис кроме интерполяций.

Задаётся такая строка с помощью кавычек и знака тильды ~"...", это позволяет записывать в строку, а как следствие в переменную или в значение целые выражения и даже свойства с подставляемым значением:

@base-size: 10;
@base-color: red;
@default-border: ~"@{base-size}px solid"; /* интерполяция */
/* почему-то подкрашено в другой цвет, но это тоже переменная */

.border-colored(@color) {
  border: @default-border @color;
  }

.element {
  .border-colored(@base-color);
  }

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

.element {
  border: 10px solid red;
}

Без интерполяции значения в экранированную строку переменная с числом не «склеивается» корректно с единицами измерений. То есть 10 и px не объединяются в одну сущность. Хотя, судя по англоязычной документации — это постепенно исправляется и много в каких случаях экранирование уже не нужно.

Циклы

Напоследок разберёмся — можно ли в Less делать циклы? Ответ — можно, но встроенных решений в Less для этого нет. В тренажёре описывается хитрый способ создания цикла с помощью примеси с условием и интерполяцией.

Я не зря писал, что примеси похожи на функции и их как и функцию можно рекурсивно зациклить используя аргумент как счётчик:

.mixin(@n) {
  .mixin(@n + 1); /* приращение */
}
.mixin(1);

Чтобы цикл был не бесконечный можно использовать примесь с условием, в котором указать момент завершения цикла, например достижение счётчиком определенного значения:

.mixin(@n) when (@n =< 3) { /* при @n > 3 примесь не выполняется */
   .mixin(@n + 1);
}
.mixin(1);

Вполне себе цикл, который можно использовать, например, для создания селекторов с одинаковым префиксом, но разными суффиксами, используя интерполяцию значения счётчика:

.mixin(@n) when (@n =< 3)
   .block-@{n} {
     ...
   }
   
   .mixin(@n + 1);
}
.mixin(1);

Что в CSS преобразуется как:

.block-3 {...}
.block-2 {...}
.block-1 {...}

Испытания

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

Первое испытание на цветовые функции — у нас уже есть некоторые области с цветами, а отталкиваясь от них нужно заполнить остальные:

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

Третье испытание модифицируется шаблонами примесей:

Четвёртое испытание полностью на понимание работы условных примесей — нужно расставить существующим примесям условия, чтобы они срабатывали только для определённых элементов:

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

Последнее испытание комбинирует всё пройденное — все примеси созданы, но не применены к элементам, нужно все корректно склеить:

Не самый простой был блок, но очень интересный! У меня, правда, по ходу прохождения возникло много вопросов — например, пресеты цветов можно явно использовать в динамическом изменении цветовой схемы. Как оно будет работать — нужно всё-таки инициировать обновление страницы, чтобы сработал препроцессор и пересобрал все? Или можно как-то с помощью JS это все настроить в динамике в моменте?

Еще я понял, что тут ну прям о-очень небольшая часть от Less, гуляя по документации обнаружил много интересных штук. Так что к Less я еще вернусь, но у же в рамках чего-то другого.

А вам большое спасибо за внимание! Желаю вам пережить эту жару с максимальным комфортом!

Ссылки на мои социальные сети, там анонсы постов, некоторые мои короткие записи, мыслишки и всякое на отвлечённые темы:

Telegram — Twitter — Instagram — VK

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#css

#css3

#less

#frontend

#front_end

#обучение

#it

Плавные переходы, Кривые Безье и CSS-анимация — Тренажёр HTML Academy

2022-06-29T08:26:20.552Z

Наконец, я добрался до анимации в CSS! Для начала вспомним про трансформации, разберёмся как сделать их плавными и затем перейдем уже к анимации по ключевым кадрам!

Кстати, я не прогадал, когда решил пройти сначала Тонкости — в части про переходы мы будем по полной эксплуатировать тему с :checked и ~ селектором. Вообще, появилась у меня мыслишка запилить что-нибудь с использованием этого инструмента. Просто for fun и ради, своего рода, тренировки.

Плавные переходы

Мы немного затрагивали плавные переходы, когда разбирали какие бывают трансформации, но по умолчанию, все они происходят мгновенно. Точнее трансформацией transform мы лишь задавали разные свойства состояния — у элемента их может быть несколько, например, базовое и :hover.

Переход же между этими состояниями мгновенен и за плавность или, как написали в тренажёре, «нежность» перехода из одного состояния элемента в другой отвечает семейство свойств transitions.

Свойства перехода

Первое и самое важное свойство, без которого вообще не работает плавность переходов — свойство длительности перехода transition-duration. Оно принимает числовое значение в секундах s или миллисекундах ms:

transition-duration: 0.3s; 
transition-duration: 300ms;

По умолчанию, свойства семейства transitions принимают во внимание все свойства, которые можно плавно изменить или анимировать — это размерные, цветовые и позиционные свойства. Чтобы контролировать какой конкретно параметр нужно изменять, используется свойство transition-property.

По умолчанию имеет значение all, то бишь все, в иных случаях принимает буквально названия CSS-свойств на которые будет распространяться плавный переход и его параметры. Можно задавать сразу несколько параметров через запятую — в этом плане работает схема из background, значения сопоставляются по их позиции:

transition-property: width, height;
transition-duration: 1s, 5s; /* ширина меняется за 1s, высота за 5s */

Следующее полезное свойство — задержка перехода transition-delay. Как и длительность принимает значение секунд s и миллисекунд ms. Критично необходимое свойство при создании плавной анимации интерфейсов, хотя для новичков может показаться иначе.

Функция перехода

Последнее свойство супер полезное, но и достаточно сложное для понимания — это свойство функции перехода transition-timing-function. Все переходы помимо длительности имеют, можно сказать, «скорость» перехода — она может быть постоянной или «линейной», а может быть более сложной, например, замедляться в начале или в конце.

Отношение времени к изменению состояния можно, условно, записать в функцию, а построив график этой функции можно наглядно посмотреть как будет вести себя элемент. Именно эту функцию принимает за значение свойство transition-timing-function.

Но не стоит пугаться математики! Во-первых, математика проще чем думает большинство, но об этом как-нибудь в другой раз. Во-вторых, для нашего свойства есть заготовки функций в виде ключевых слов:

ease — значение по умолчанию для всех переходов, немного замедляется в начале, резкий переход в середине и плавное замедление к концу;
linear — линейный, равномерный переход, без ускорений и замедлений;
ease-in — слегка замедляется на старте;
ease-out — слегка замедляется в конце;
ease-in-out — похож на ease, но имеет более резкий переход в середине.

На самом деле все эти функции являются упрощёнными образами функций кубических Кривых Безье. Свойство transition-timing-function может принимать значение в виде самой функции cubic-bezier(x1, y1, x2, y2), где аргументами являются координаты опорных точек.

Что за опорные точки? Те кто хотя бы раз в жизни работал с векторной графикой в каком-нибудь Adobe Illustrator уже знают про кривые Безье, хотя могут об этом и не догадываться. Зато опорные точки они точно видели.

Это из Иллюстратора

Итак, разбираемся. Обычный отрезок состоит из двух точек — начало и конец отрезка. У этих точек могут быть свои координаты, но для упрощения сделаем начало в нуле 0, а конец в единице по обеим осям 1, 1.

Получается прямая линия, как на графике с линейной linear функцией (см. выше), но нас больше интересуют кривые. Как нам их деформировать? Нужно добавить больше точек! Точнее две — по одной для начала и для конца.

Соединив эти опорные точки с началом и концом мы получим ломанную кривую, очень отдалённо похожую на то, что нам надо:

Плавной её делает уже «магия» математики, вдаваться в её подробности не будем, но всю эту магию несёт в себе сама функция cubic-bezier(). В любимой Википедии отлично показывается как строится плавная кривая из ломанной, если кому-то интересно.

Наша функция cubic-bezier() в аргументы принимает координаты опорной точки начала — x1 по горизонтали, y1 по вертикали, и аналогично опорной точки конца — x2 и y2.

Координаты могут совпадать, как друг с другом, так и с крайними точками. Например, линейная linear, формально, тоже имеет опорные точки, просто их координаты совпадают с началом и концом:

cubic-bezier(0, 0, 1, 1)

У ease-in и ease-out совпадают координаты одной из опорных точек:

cubic-bezier(0.42, 0, 1, 1) /* ease-in */
cubic-bezier(0, 0, 0.58, 1) /* ease-out */

Естественно, на эту тему есть уже много сервисов, одно из них рекомендует Академия — https://cubic-bezier.com/ — в нём можно поиграться с опорными точками и построить ту функцию, которая вам нужна. Другой вопрос, что в 90% случаях хватает ease и её производных, но для оставшихся 10% пригодиться!

На последок — у свойства transition-timing-function есть еще одно значение! Это тоже функция — steps(), она преобразует переход в пошаговый. Она принимает два аргумента, первый — количество шагов, а второй — одно из двух ключевых слов start или end.

При заданном start первый шаг выполняется одновременно с началом перехода, а в случае c end последний шаг будет выполнен вместе с завершением перехода. Грубо говоря, указывается под что подстроится функция.

Мини-мастерская переходов

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

Первым делом мы сделали самое очевидное — кнопочки. Смена происходит через добавление класса с помощью JS. Добавили еще эффект расширения тени, который, на мой взгляд, сделан хреновенько:

Следом сделали красивые чекбоксы. Здесь и далее уже используется :checked и селектор ~ для стилизации псевдоэлементов выбранных пунктов. Сама идея с галочкой из поля прикольная, но явно требует доработать момент возвращения галочки в состояние пустого квадрата, а то стороны начинают появляться раньше чем надо:

Далее, конечно же, потренировались на радиокнопках, тут всё ещё проще — два псевдоэлемента, один перекрывает другой при выделении, анимирована scale() трансформация:

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

Следующим мы сделали так называемый «бургер» ~~и точка~~ меню, обычно такие делают в мобильных приложениях или в мобильных версиях сайта. Честно скажу, я до этого делал их тупо через смену картинок, не приходило в голову делать через элементы и псевдоэлементы. А подобные анимации, я думал, делаются исключительно через JS, но нет!

И на последок поигрались с полями формы. Поле формы тоже одно из самых «труднодоступных» для стилизации элементов. Здесь мы используем <label> как placeholder и псевдоэлементы как подчеркивания:

CSS Анимация

Мы можем управлять стилями некоторых состояний одного элемента, например, выбранным :checked, наведённым :hover, ну и базовым. Выше мы разобрали как сделать плавный переход между этими заготовленными состояниями, то есть между двумя стилями, с помощью семейства свойств transition.

И хотя сами по себе переходы очень крутой инструмент и решает, наверное, большую часть задач анимации в интерфейсах, всё же мы можем пойти дальше — с помощью CSS создавать сложные анимации с большим количеством состояний одного элемента и переходов между ними. За это отвечает семейство свойств animation.

Сама анимация в CSS состоит из двух частей — функция самой анимации или, как её назвали в тренажёре, набор ключевых кадров @keyframes и самих свойств семейства animation, которые применяются к элементам.

Ключевые кадры

Сначала разберёмся с ключевыми кадрами @keyframes — если сильно упростить описание этой конструкции, то с её помощью мы задаём состояния элемента — ключевые кадры, и стили этих состояний в нужный момент анимации:

@keyframes stretching { /* название функции-анимации */
  0% { /* состояние в начале */
    width: 100px;
  }
  100% { /* состояние в конце */
    width: 200px;
  }
}

Конструкция похожа, на мой взгляд, на объявление какой-либо функции из любого C-подобного языка, что недалеко от правды. Мы объявляем, что функция stretching — это анимация, которая изменит элемент от состояния ключевого кадра 0%, до состояния ключевого кадра 100%.

Имя анимации можно задавать любое, главное помнить, что оно чувствительно к регистру. Ключевые кадры обозначаются либо процентами, либо есть два ключевых слова — from, что по сути равно 0% и to, что равно 100%.

@keyframes square-move {
  from   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  to {top: 0px; left: 0px; background: red;}
}

Кадры можно группировать, если какое-то состояние одинаково для двух моментов анимации. Это используется в разных целях, например, анимацию square-move можно немного сократить:

@keyframes square-move {
  from, to   {top: 0px; left: 0px; background: red; } /* или 0%, 100% */
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
}

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

@keyframes square-move-stop {
  from, to   {top: 0px; left: 0px; background: red;}
  40%, 60%  {top: 0px; left: 100px; background: blue;}
  /* между 40% и 60% нет ключевых кадров - их состояние одинаково */
}

Итак, создали мы крутой набор ключевых кадров, что с ним дальше делать?

Свойства анимации

Переходим к свойствам семейства animation! Они во многом очень похожи на свойства transition с небольшими дополнениями.

Первое свойство, собственно, применяет набор ключевых кадров к элементу — это свойство animation-name. Оно принимает имя заготовленного набора ключевых кадров или, иными словами, вызывает функцию анимации.

Второе свойство, без которого анимация работать не будет, это свойство длительности анимации animation-duration. Как и его брат-близнец из переходов transition-duration, принимает числовое значение в секундах s или миллисекундах ms.

Без этих двух свойств анимация элементарно не применится, они обязательны. Одному элементу можно задать сразу множество наборов ключевых кадров, они указываются в animation-name через запятую, а все остальные параметры в свойствах, например тот же animation-duration, сопоставляются по порядку:

.element {
  animation-name: move, stretch; 
  animation-duration: 2s, 6s; /* 2s длится move, 6s stretch */
}

Еще два свойства-родственника из переходов transition — это свойство задержки анимации animation-delay и свойство задающее функцию перехода, но уже для всей анимации animation-timing-function.

Про задержку, я думаю, и так понятно, с ней, кстати, тоже работают правила множественных значений. Функция перехода тоже работает похожим образом — такие же значения, типа ease, linear и т. д., и тоже можно применять функции cubic-bezier() и steps().

Немного, возможно, не очевидный нюанс — функция перехода заданная в animation-timing-function применяется ко всем переходам между ключевыми кадрами, а не к прогрессу анимации в целом. То есть каждая анимация между ключевыми кадрами будет по умолчанию ease.

Переходим к уникальным для анимации свойствам. Первое такое — свойство количества итераций или проигрывания анимации animation-iteration-count. Принимает либо число итераций, либо ключевое слово infinite, обозначающее бесконечное проигрывание анимации.

Свойство задержки animation-delay, кстати, применяется только один раз до начала всей анимации, то есть при повторении никакой задержки не будет. Нужно это иметь ввиду, если задержка критична для каждой итерации.

Следующее свойство отвечает за направление анимации animation-direction. По умолчанию оно «прямое», то есть анимация выполняется от 0% до 100% и свойство имеет значение normal. Другие же значения:

reverse — «разворачивает» анимацию, она начинает выполняться в обратную сторону — со 100% до 0%, при этом функция перехода НЕ разворачивается.
alternate — разворачивает каждую чётную итерацию, таким образом помогает зациклить анимацию без «разрывов» в состояниях элемента.
alternate-reverse — разворачивает каждую нечётную итерацию.

По умолчанию, после завершения анимации элемент возвращается в своё исходное состояние. Этим, естественно, можно управлять и с помощью комбинаций вышеописанных свойств, но конкретно за это отвечает свойство animation-fill-mode, которое явно указывает на состояние элемента после выполнения анимации, пусть даже с одной итерацией.

Имеет всего четыре значения, включая значение по умолчанию:

none — по умолчанию, после завершения анимации элемент вернётся в исходное состояние, которое может отличаться от ключевого кадра 0% или from — это важно, это не равнозначные состояния.
frowards — после завершения анимации элемент останется в состоянии последнего момента анимации — это особенно важно при каком-либо значении свойства animation-duration, т. к. последним состоянием может быть и 0%, если задан reverse или alternate.
backwards — наоборот, после завершения анимации элемент примет состояние начального кадра анимации, который, опять же, может быть не 0% или from, в зависимости от направления анимации. Это значение имеет еще один эффект — элемент даже до начала анимации принимает состояние указанное в кадре 0%, даже если у анимации есть задержка.
both — комбинирует два значения, до начала анимации элемент принимает состояние первого ключевого кадра, а после завершения анимации элемент останется в состоянии последнего момента анимации.

Последнее свойство — это управление паузой или состоянием проигрывания анимации animation-play-state. Имеет всего два значение — running по умолчанию и paused, то бишь — поставить анимацию на паузу. Понятное дело, это свойство-триггер, как например, display: none;.

На этом с анимацией всё! Более того, на этом мы, формально, заканчиваем изучение HTML/CSS в тренажёрах! Далее у нас Less, который, конечно, препроцессор CSS, но всё-таки уже не совсем про стили, а скорее про оптимизацию работы с CSS. Потом SVG и после добьем JavaScript.

Поздравляю себя! :D

На самом деле я в какой-то момент закопался так, что уже не думал когда закончу, а оно пришло неожиданно. Я уверен, я еще помучаюсь на JavaScript, но в остальном конец уже более-менее ощутим. По крайней мере с вёрсткой.

Спасибо вам за ваше внимание! Продуктивной вам работы!

Telegram — Twitter — Instagram — Facebook — VK

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#html

#css

#html5

#css3

#frontend

#front_end

#обучение

#it

Сборник тонкостей CSS — оформление текста и CSS-таблицы — Тренажёр HTML Academy

2022-06-25T00:44:49.927Z

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

Оформление текста

На самом деле, мало чего интересного осталось. Первым на рассмотрение свойство отвечающее за падающую тень текста text-shadow. Мы уже разбирали и тень блока box-shadow, и фильтр падающей тени drop-shadow(), и вот, наконец, дошли до тени текста.

Больше всего работа text-shadow похожа на фильтр drop-shadow() — тень повторяет контуры текста и не поддерживает растяжение. Синтаксис записи тоже абсолютно идентичен — первые два значения отвечают за смещение по горизонтали и по вертикали соответственно, третий отвечает за размытие и наконец указывается цвет тени.

text-shadow: 5px -5px 0px #333333;

Далее в части вспоминаем про подключение шрифтов через @font-face, которое мы разбирали в начале «среднего уровня» тренажёров. Правда, здесь нам показали, что за «шрифт» можно выдать набор SVG фигур, как бы, упакованных в шрифтовой формат. Я такое даже пару раз видел во время работы и насколько знаю, многие конструкторы примерно так и загружают свои «библиотеки иконок».

Следующее свойство letter-spacing отвечающее за расстояние между символами. Принимает числовое значение — положительные увеличивают расстояние между символами, отрицательные уменьшают. По умолчанию равно нулю — базовое расстояние между символами.

По умолчанию, перенос строки происходит только по словам, но с помощью свойства overflow-wrap или его альтернативной записью, как написано в тренажёре, word-wrap — можно задать перенос по символам используя значение break-word — «ломать слово». По умолчанию же значение normal.

Очень специфичное свойство text-overflow, отвечающее за то, как будет выглядеть текст в конце непереносимой строки, например, очень длинное слово не поместилось, а overflow-wrap: normal;. По умолчанию имеет значение clip — текст просто обрезается, но можно задать значение ellipsis и придать более красивый вид — слово обрежется раньше, но в конце строки появится многоточие.

Далее, на мой взгляд, немного архаичное свойство text-indent, отвечающее за смещение начала первой строки абзаца. Та самая «красная строка» задаётся через это свойство. Мы его уже использовали, правда в других целях — задавали значение -1000px, чтобы скрыть текст над спрайтами.

Пару уроков отведено псевдоэлементам ::first-letter и ::first-line, которые мы уже немного разбирали в части про селекторы. Лишним не будет, кончено, но на мой взгляд они тоже малоприменимы.

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

Свойство column-count принимает числовое значение этих столбцов и текстовый блок автоматически разделяется на них. Честно признаюсь, я какое-то время делал это все отдельным текстовыми блоками во флекс-контейнере!

Другой вариант задать не число колонок, а минимальную ширину колонки с помощью свойства column-width — браузер автоматически разделит текст на максимально доступное количество колонок указанной ширины.

Последнее свойство из семейства — column-gap, отвечающее за расстояние между колонками. По умолчанию имеет значение 1em, но можно задать любое в пикселях, пунктах и других абсолютных единицах.

Испытания

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

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

Третье испытание тоже лёгкое — сделать из текста логотип, используя свойство overflow-wrap и парочку других из пройдённой части.

CSS-таблицы

Честно говоря, меня немного разочаровала истина — я думал, таблицы на CSS будут как-то принципиально отличаться от таблиц в HTML, но по сути нет. Хрен знает чего я вообще ждал, сам не понимаю, но я себе каким-то образом завысил ожидания.

Таблицы на CSS это когда не табличным элементам мы задаём табличное поведение через свойство display. Формально, практически любую структуру можно завернуть в таблицу.

У меня сразу же появились вопросы:

А в чем смысл? Почему не сверстать заранее таблицу в HTML если она нужна? Количество символов будет примерно таким же.
Что по поводу семантики? Дерево div’ов с табличными свойствами лучше чем табличные теги? Как к этому относятся поисковики?
Зачем вообще был придуман этот велосипед?

Частично я сам себе отвечу — чтобы перенести все построения в CSS и управлять из одного места свойствами типа colspan и подобными. Но вот вопрос про семантику открытый.

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

display: table; — аналогичен тегу <table>, обозначающий таблицу;
display: table-row; — аналогичен тегу <tr>, строка таблицы;
display: table-cell; — аналогичен тегу <td>, ячейка таблицы;
display: table-caption; — аналогичен тегу <caption>, заголовок таблицы;
display: table-header-group; — аналогичен <thead>, группа строк шапки;
display: table-footer-group; — аналогичен <tfoot>, группа строк нижней части таблицы;
display: table-row-group; — аналогичен <tbody>, просто группа строк;

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

В HTML для этого есть одиночный тег <col>, который указывается в самом начале сразу после тега <table> и каждый такой тег отвечает за столбец. Им можно задать атрибут width, который и будет влиять на всю таблицу, точнее на все ячейки в этом столбце.

<table>
  <col width="20%"> <!-- Первый столбец – ячейки 1.1 и 1.2 -->
  <col width="80%"> <!-- Второй столбец – ячейки 2.1 и 2.2 -->
  <tr>
    <td>1.1</td> <td>2.1</td>
  </tr>
  <tr>
    <td>1.2</td> <td>2.2</td>
  </tr>
</table>

Столбцы можно группировать с помощью тега <colgroup>, которой тоже можно задать атрибут width, а все <col> внутри этого тега получат равные доли ширины.

Так вот, в CSS таблицах есть аналоги и этим тегам:

display: table-column; — аналогичен <col>;
display: table-column-group; — аналогичен <colgroup>;

Все табличные свойства при этом начинают работать, включая специфичные для таблиц типа border-collapse и border-spacing. То есть дальнейшая стилизация идет как с обычной таблице.

Кстати один урок в части посвящен тому, что таблицу можно сделать блочно-строчной с помощью значение inline-table. Понятия не имею где это можно применить, но даже такое можно сделать.

Еще отдельно отмечу то как оформлена часть, она мне напомнила часть про двумерные трансформации — явный реверанс в сторону РПГ или ДНД, тут мы тоже собираем инвентарь. Кажется мелочью, а даже такую пресную информацию делает увлекательной! Мое уважение составителю!

Испытания

На них придётся чутка посидеть, они не то чтобы сложные, но в голове кирпичики сложить придётся, чтобы понять чего и куда. В первом заблокирован HTML и только с помощью CSS надо превратить список в таблицу:

Второе испытание на табличные свойства и работу с рамками и отступами в таблице, плюс вспоминаем псевдоклассы:

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

Вам огромное спасибо за ваше внимание! Увлекательного вам обучения!

Telegram — Twitter — Instagram — Facebook — VK

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#html

#css

#html5

#css3

#frontend

#front_end

#обучение

#it

Сборник тонкостей CSS — селекторы, фоны и рамки — Тренажёр HTML Academy

2022-06-24T19:41:38.501Z

Перескочим на «продвинутый» уровень тренажёров. Под «тонкостями» в тренажёрах имеются ввиду несколько дополнительных частей к уже пройденным — более сложные селекторы, специфичные свойства рамок, фонов и текста. А еще изучим построение таблиц на CSS.

Перескакиваю я потому, что в среднем остался только JavaScript и еще блок про SVG. Я подумал, раз после определённого момента порядок блоков уже условный, то лучше доучить остатки CSS из продвинутого уровня, а потом уже браться за JS и остальное и потом плавно перейдём уже на курсы.

Селекторы

Мы уже забегали в эту часть когда проходили Мастерские и делали слайдер на чистом CSS. Точнее, на неё там активно ссылались. Итак, в этой части мы доучим селекторы по атрибутам и специфичные, интересные псевдоклассы.

Продвинутый селектор по атрибуту

Итак, про селекторы по атрибуту мы уже знаем из прошлых частей, выглядит он как тег с указанием атрибута и его значением:

input[type="text"] {...} /* все input с type="text" */

У этого вида селекторов есть дополнительные механизмы поиска элементов — перед знаком равно = добавляется модификатор для поиска «подстроки», то есть части строки в значении. Модификаторов несколько и насколько я понял, все они взяты из регулярных выражений и работают аналогичным образом.

Начало строки [attr^="value"] — символ ^ указывает на поиск всех элементов с атрибутом attr со значением начинающегося на value. Под это подойдет, например value-1, valueone, value__top и т. д.
Конец строки [attr$="value"] — символ $ указывает на поиск всех элементов с атрибутом attr со значением заканчивающимся на value. Подойдёт, например, header-value, notvalue, file.value и т. д.
Содержит в строке [attr*="value"] — символ * указывает на поиск всех элементов с атрибутом attr со значением содержащим value в любом месте строки атрибута. Подойдет textvalue1, shop value rub, text__extd value, в общем любые совпадения.
Содержит слово в строке [attr~="value"] — символ ~ работает подобно *, но теперь ищет именно слово отдельно, то есть разделённое с обеих сторон либо пробелом, либо переносом строки. Подойдет shop value rub, но уже не подойдет textvalue1.
Содержит префикс [attr|="value"] — под префиксом имеется ввиду значение вида value- — именно с дефисом в конце, то есть частный, но распространённый случай начала строки. Также этот селектор посчитает за корректный для себя значение value — то есть одно целое слово.

Эти селекторы мне бы очень пригодились в свое время для настройки Google Tag Manager’а, когда надо было прицепиться к каким-нибудь хитро сделанным полям в каком-нибудь конструкторе.

Больше псевдоклассов

Часть из представленных здесь псевдоклассов мы уже тоже встречали, большинство из них работают с булевыми атрибутами типа checked и им подобными для полей форм.

Псевдоклассы :disabled и :enabled — обращаются к элементам, чаще всего полям, с одноимённым атрибутом disabled или без него соответственно.
Псевдоклассы :required и :optional — обращаются к элементам, которым проставлен и, соответственно, не проставлен атрибут required — поле обязательно к заполнению.
Псевдоклассы :read-only и :read-write — аналогично, обращается к элементам, которым проставлен атрибут readonly и которым он не проставлен. Нам в тренажёре напоминают, что disabled визуально и функционально похож, но суть и селектор у него другой.
Псевдокласс :checked — обращается к элементам типа radio или checkbox, которые в данный момент выбраны.

И отдельно можно выделить псевдоклассы которые работают, можно сказать, с корректностью информации вводимой в поля. Как мы уже знаем, у некоторых типов полей, например, у email или url, есть автоматическая валидация введённых данных, а большинству остальных — область допустимых значений можно задать отдельно через атрибут pattern="".

Псевдокласс :valid — обращается ко всем элементам, у которых введённое значение попадает под требования.
Псевдокласс :invalid — напротив, обращается ко всем элементам, у которых введённое значение некорректно и не попадает под требования.

Для типов полей, где задан диапазон допустимых значений min и max — это например, number и, возможно, range, есть специальные псевдоклассы проверяющие именно попадание в диапазон.

Псевдокласс :in-range — обращается ко всем элементам, значение которых попадает в диапазон
Псевдокласс :out-of-range — выбирает все элементы, значение которых за пределами диапазона.

Именно в конце этой части нам показывают чудеса с checked и селектором ~, правда здесь мы просто скрываем блоки. Надо будет что-нибудь интересное с этим сделать.

Испытание

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

Задача не сложная, может возникнуть затык с декоративными чекбоксами и радиокнопками — это псевдоэлементы, а сами переключатели скрыты.

Рамки и фоны

Касаемо фонов — большую часть из указанного здесь мы уже видели и даже использовали. А вот с рамками, оказывается, можно делать очень интересные штуки!

Фоны

Сначала разберёмся окончательно с фонами. Первым на очереди у нас свойство отвечающее за размер фонового изображения background-size. Да, мы уже его использовали пару раз, он даже был задействован в Кексби, будь он неладен.

Это свойство принимает два типа значений — численные в px или %, которые явно обозначают ширину и высоту фонового изображения, и ключевые слова:

auto — значение по умолчанию для ширины и высоты.
contain — изображение полностью умещается в блок по большей стороне, сохраняя свои пропорции, таким образом фоновое изображение может закрывать не всё пространство блока, если их размеры и пропорции не совпадают.
cover — изображение полностью закрывает пространство блока, сохраняя при этом свои пропорции, части изображения не поместившиеся в блок — обрезаются.

Следующее свойство background-origin отвечает за то в каких границах будет отображаться фоновое изображение:

content-box — отображается только в области содержимого, то есть не отображается даже на внутренних отступах.
padding-box — значение по умолчанию, отображается во внутренней области бокса, исключая рамки и внешние отступы.
border-box — в отображение включаются рамки, даже если они непрозрачны, то есть изображение будет залезать под них.

margin-box, видимо, не завезли.

Его сосед по парте — свойство background-clip, которое отвечает за обрезку всего фона — и изображения, и цвета. Имеет абсолютно такие же значения и работает по тому же принципу, но отвечает за то в какой области будет видно, а не то на какую область растянуто. По умолчанию стоит значение border-box, то есть без обрезания фона совсем.

В этой части нам еще раз показывают принцип работы множественных фонов — в каждом специфичном фоновом свойстве порядок значений через запятую сопоставляется с порядком указанным в background-image.

Мы уже рассматривали эту особенность когда строили множественные градиенты и проставляли им background-position. Кстати, о нём. У свойства позиции фонового изображения есть возможность указать не просто числовые координаты от левого верхнего угла, а уточнить сторону от которой надо вести отсчет, например:

background-position: right 30px bottom 60px; /* справа 30px, снизу 60px */
background-position: left 50px bottom 10px; /* слева 50px, снизу 10px */

И последним свойством рассмотрим знакомый нам background-repeat, отвечающий за повторение фонового изображения. Во-первых, он может принимать сразу два значение — первое отвечает за повтор по горизонтали, а второй по вертикали. Во-вторых, имеет в своем запасе два очень крутых значения, которые будто из флексбоксов и гридов (или наоборот?):

Значение round — изображение будет повторятся, но не будет обрезаться у краёв элемента. Картинка будет растягиваться, чтобы заполнить некратные размеру изображения зазоры. Это поведение ну прям о-очень похоже на работу функций repeat() и minmax() с auto-fit в гридах.
Значение space — изображение тоже не обрезается, но и не растягивается. Зазоры компенсируются расстоянием между изображениями, которые равномерно распределяются по пространству блока. Их поведение тоже очень похоже на уже знакомый нам space-between в выравнивании флекс-итемов во флекс-контейнере.

Рамки

Для начала отметим, что помимо border существует еще и внешняя рамка или «обводка» outline. У нее аналогичная запись, но ей нельзя задать какую-либо сторону отдельно, то бишь только всему элементу.

Еще одна особенность обводки outline — она не учувствует в расчёте размера бокса и строится после border и, соответственно, может залезать на соседние элементы.

У обводки есть уникальное свойство outline-offset, которое отвечает за отступ от элемента или рамки. Причем, принимает как положительные значения — отступ во вне, так и отрицательные — обводка сожмётся внутрь.

Пару слов про скругление углов border-radius — мы уже знаем, что можно задавать скругление каждому углу отдельно. Оказывается, для этого даже есть специальные отдельные свойства — border-top-left-radius, border-top-right-radius, короче, border-угол-radius.

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

/* горизонтальный радиус 30px, вертикальный 15px */
border-top-right-radius: 30px 15px;

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

/* горизонтальный радиус всех углов 10px, вертикальный 5px */
border-radius: 10px / 5px;

/* разные горизонтальные и вертикальные радиусы у каждого угла */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;

Далее мы переходим к обширной теме — фоновое изображение рамки и семейство свойств отвечающих за это — border-image.

За источник изображения отвечает свойство border-image-source и его синтаксис аналогичен свойству background-image, но для рамок.

border-image-source: url("image.jpg");

Однако, свойство для рамок работает немного иначе — по умолчанию изображение не растягивается как подложка под рамкой, как ожидается, а будет раскидано по углам рамки.

Дело всё в том, что рамка по свой сути имеет аж 9 областей — 4 угла, 4 стороны и центр. По умолчанию, браузер не умеет подстраивать изображение под задачи рамки, поэтому просто пихает его по углам.

За нарезку фонового изображения на области для рамки отвечает свойство border-image-slice — оно принимает от одного до четырёх числовых значений и работает по сути как функция rect() которую мы уже разбирали в Мастерских.

Кстати, свойство принимает какие-то условные единицы, то есть в самом свойстве, почему-то не надо ставить px — выдаст ошибку. Одно значение задаёт отступы от своих краёв для всех линий, а отдельно заданные идут в стандартном порядке — верх, право, низ, лево:

border-image-slice: 60; /* нарезка как на картинке выше */
border-image-slice: 10 20 30 40; /* каждая линия отдельно */

Таким образом, мы нарезаем изображение на те самые 9 частей и уже с ними работает браузер. По умолчанию, центральная область скрывается, но это можно изменить подставив в конце значений нарезки ключевое слово fill — тогда центральная часть перекроет фон, но не перекроет контент блока.

Изображение на сторонах, по умолчанию, растягиваются под всю длинны рамки, что далеко не для всех ситуаций подойдет. Но этим поведением можно управлять с помощью свойства border-image-repeat — он отвечает за способ заполнения фона по сторонам рамки. Именно по сторонам!

Свойство работает похожим на background-repeat образом, но по умолчанию имеет свой свойство stretch — которое, как раз, растягивает изображение по сторонам. Остальные значения, такие же:

repeat — повторяет части в размере отрезка, заполняя сторону полностью, при этом обрезает изображение в конце, если оно не поместилось.
round — работает абсолютно также как и у фона блока, крайне полезный и универсальный вариант.
space — тоже самое, работает аналогично значению из фона блока, но в тренажёре пишут мол, не везде поддерживается и часто заменяется на значение repeat.

Следующее свойство border-image-width — оно отвечает за размер уже нарезанных областей. Синтаксис похож на margin — одно значение для всех сторон, два для горизонтальных и вертикальных, четыре для всех сторон отдельно.

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

Расчёт идет от внешней границы рамки. Если размер фонового изображения области рамки задать больше чем размер рамки, то изображение начнёт залезать на фон блока, даже если не задан fill.

И последним рассмотрим свойство border-image-outset — оно отвечает за смещение фонового изображения рамки от элемента. Работает примерно как outline-offset, но принимает только положительные значения.

Фигуры из рамок

У рамок есть одно интересное свойство — каждая сторона строится по сути в виде трапеции, а при нулевом размере блока превращается в треугольник.

Таким образом, у нас в арсенале фигур еще две — квадраты и прямоугольники строить легче всего, круги и эллипсы можно строить через border-radius, а теперь и треугольники с трапециями.

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

Испытания

Два испытания и оба на рамки, с фонами мы, видимо, наигрались в Catademy или как её там. Первое испытание на круглую рамку:

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

Тонкости получаются какие-то не тонкие, я надеялся будет одна коротенькая статья. Ну да ладно! В следующий раз быстренько разберёмся с тонкостями в оформлении текста и посмотрим на CSS-таблицы.

Спасибо большое за внимание! Я стараюсь ускорять темп, так как тренажёры затянулись уже что-то.

По поводу ссылок на предыдущие статьи — я решил пока перестать городить их тут, это тот еще геморрой и занимают они место, не очень красиво. Я скорее всего как-нибудь сделаю такой «пост-sitemap» и буду просто ссылаться на него, а пока пусть будет просто чистенько.

А вот соц.сеточки я оставлю! Я, кстати, завёл еще страницу на Facebook и заодно буду оставлять свой Instagram. Максимальное присутствие!

Telegram — Twitter — Instagram — Facebook — VK

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#html

#css

#html5

#css3

#frontend

#front_end

#обучение

#it

Испытание «Великий Кексби» — Тренажёр HTML Academy

2022-06-19T22:22:58.821Z

Мы изучили достаточно для того, чтобы приступить к самому большому испытанию в тренажёрах Академии. «Великий Кексби» — это целых 13 частей практики, разделённых на два блока. Или не совсем. В этой статье разберём всё испытание.

Введение

Немного поясню почему «не совсем». Не смотря на то, что частей 13, а заданий итого аж 166, но по сути Испытаниями являются только две части в конце каждого блока.

Остальные части это обычные уроки с подводкой к самостоятельной работе. Разница в том, что тут мы почти всё пишем ручками с нуля и общая идея – вёрстки проекта, а не отдельно взятой задачи.

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

Этап 1 — Вёрстка

Первый этап на 90% состоит из разметки в HTML. Только последние несколько уроков касаются CSS в таблицах, но это не существенно.

И тут сразу хочу поругать эту часть тренажёра за неактуальность или, может быть, ленивость. Помнится, что нам чуть ли не сразу рассказали про «диватоз» и семантическую вёрстку. И вот мы дошли до большого испытания где мы… верстаем все на <div>'ах. Прям вообще всё, включая шапку и подвал.

Наверное, это такое «упрощение», но мы же уже прошли всё это, мы уже знаем как семантически корректно верстать. Почему тут всё нарочно наоборот? Обескураживает. Окей, я понимаю, этот Кексби может быть сделан еще когда гридов даже не было, но, на мой взгляд, такое себе оправдание.

Первый пять частей мы верстаем по указке, а вот шестая часть «Промежуточное испытание» уже самостоятельная работа. Нам дают архив с материалами, картинку и вперёд!

Свёрстанный результат нужно обратно заархивировать и отправить на проверку. Надо сказать, что тут сделано все очень круто, я впечатлён.

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

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

Кстати, я пользовался Visual Studio Code и, наверное, продолжу работать на нём. Пока всё удобно и интуитивно понятно:

Итак, готовую работу отправляем на проверку и в течение минуты получаем результат:

У меня получилось всё с первого раза, кроме блока с формой, там проглядел один перенос строки <br>. Повторно отправил уже полностью верно.

Этап 2 — Стилизация

Технически реализовано почти также как и первый этап — первые части блока вводные, показывают как и какими методами будем стилизовать.

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

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

Сетка

Методы стилизации выбраны, мягко говоря, интересные. Базовая стилизация — всё ок, а вот сетки мы строим на float. Да, флоаты, да, с clearfix и всем вытекающим из этого геморроем в позиционировании, например, трёх колонок.

Да он нам и нахрен не нужОн, этот грид ваш!

Когда я проходил часть про сетки на float я уже тогда понял, что эта технология как минимум не удобная и как оказалось, устаревшая. Почему она в самом большом испытании на все тренажёры? Ну какие нафиг флоуты в 2022?

Да, я понимаю, Кексби как и Кекстаграм, видимо, делались давно, судя по всему, 2014–2016 года или около того. Хотя, даже тогда флексы уже хорошо поддерживались. Оправдывает ли это академию?

Да, я понимаю, что до сих пор огромное количество сайтов свёрстано на флоатах, тот же VK, например, и есть гуру синдрома утёнка, кто и сейчас верстает на них.

Но зачем новичку, который потенциально ни разу не верстал даже на удобных современных сетках, давать самостоятельную работу на супер устаревшем методе? При том, что мы уже прошли все эти методы!

Ах, да, кстати, микросетки — все возможные кнопки и иконки мы тоже делаем на inline-block, тоже с вытекающими, в плане пробелов, нулевого размера шрифта и прочих костылей. Да, это иногда применимо, но тут это везде.

Ладно, может это делается намеренно, ради «тренировки», я не знаю. Допускаю, что у меня бомбит от своего невежества и на самом деле флоат — это мастхэв (сомневаюсь).

Макет

Едем дальше. На этом этапе нам дают уже не картинку JPG, а полноценный макет в PSD формате со слоями и элементами, что очень круто. Можно сказать, бесплатный практический макет с возможностью его проверить!

Но макет полное говно.

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

«Верстальщику не нужны слои», кто-то скажет. А я скажу — попробуйте выделить авто-селектом шейп толщиной 1px чтобы понять «задан ли ему такой тусклый цвет?» или «цвет с прозрачностью?» или «прозрачность задана самой фигуре?».

Почему это меня беспокоит? Да потому, что все три варианта есть на макете. Часть рамок border в сплошном цвете, а часть в полупрозрачном. А учитывая, что прозрачность opacity можно задать еще и слою отдельно — работа с таким макетом превращается в то еще удовольствие. Сиди выясняй — это #404040 или это чёрный полупрозрачный?

Здесь обводка черная, а у слоя прозрачность 30%.

А здесь это цвет такой прост))00))0

Но это всё фигня — дизайнеры разные бывают, тут ок, хотя я бы попросил всё-таки как-то привести в порядок это всё. Ладно.

А вот числовые ошибки уже как-то нихрена не «ладно». У всех заголовков, включая подзаголовки и разные акцентные надписи — в макете указано неверное значение высоты строки line-height.

Высота строки у заголовка секции в макете указана 61px

Везде указано либо 61px, либо там 41px/31px — уже лень искать. Но везде вот этот странный 1 пиксель сверху. Я сначала не придал значения, но при проверке у меня везде, во всех блоках, как бы я там не танцевал туда-сюда по 5px — в эталон проверки не попадало.

Поменял все на 60px и надо же! Сработало! Почему я уверен, что это ошибка макета, а не я где-то упустил эти пиксели? После прохождения всех блоков — получаешь эталонный 100%-й вариант. И что бы вы думали?

И там такого дофига. Размеры таблиц практически наугад задаёшь, высоту полей формы в итоге легче задать фиксировано через height, положение бутылок во втором блоке тоже наугад.

Это один текстовый блок на две ячейки таблицы. Поди отсюда ноги и растут.

Ах да, еще — высота первого блока в макете тоже неправильная, а это влияет на фоновое изображение. Высота в макете 550px, тогда как высота блока которая должна быть оказывается 490px. Потому что.

«Зачем так придираться?» — спросите вы. Никто же не будет требовать «pixel perfect» от учебного проекта? Тем более такого костыльного?

Проверка задания

Хрен там — скажу я вам! Проверка идёт так же по блокам страницы, но теперь проверяется еще сетка и оформление. Работает также — сравнивается по скрину наложением. Более того проверяется еще и вложенность.

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

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

Если что – браузерные стили обнулены, дело не в них.

И такого там тоже дофига. Большую часть времени ты не занимаешься вёрсткой, ты занимаешься танцами с бубном на одном пальце левой ноги, чтобы понять какой куда там пиксель не попал и почему.

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

Итог

Самое обидное, что идея просто потрясающая! И сама реализация тоже крутая, но дьявол, сука, в мелочах. Ну почему всё в дивах? Зачем мы учили семантическую вёрстку до этого?

Ну что мешало сделать задачу на флексах, пусть без всяких flex-grow и других модификаторов? Да если даже с ними, у нас фиксированный макет, с фиксированной шириной!

Ну почему такой убогий макет? Почему в нём ошибки? Они намерено там есть? Типа как в некоторых школах специально дают не полную задачу, что бы тренировать ученика задавать уточняющие вопросы? Так это не про тренажёры! У кого тут спрашивать-то?

После прохождения Кексби, да еще и в комбо со спорным Кекстаграмом до этого, у меня появились сомнения стоит ли вообще в Академии продолжать учиться. Может и на курсах всё также? В любом случае, профессия «Фронтендера» меня там уже ждёт, поэтому никуда я уже не денусь.

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

Вам спасибо большое за внимание и прошу прощения за негатив! Надеюсь, вам хотя бы было весело почитать про мои страдания.

Ссылки на другие статьи по HTML Academy:

Знакомство с Веб-разработкой
Знакомство с HTML и CSS
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
…

Остальные статьи можно посмотреть у меня на главной странице блога.

Также мои соц. сетки, которые я продолжаю вести:

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#html

#css

#html5

#css3

#frontend

#front_end

#обучение

#it