Всем привет!

Когда делишься знаниями, то лучше усваиваешь их сам.

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

#aboutwebdev_обо_мне

Калькулятор размера дочернего элемента

На днях читал статью про единицы измерения в CSS. Чтобы лучше усвоить материал, появилась идея написать калькулятор для вычисления размера элемента.
Единицы измерения, которые будут использоваться в калькуляторе: px, rem, em, vh, vw и % (для свойств width и height).

В процессе…

#aboutwebdev_css

Размеры viewport

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

Viewport — видимая без прокрутки область веб-страницы.

Узнать необходимые размеры viewport`а можно с помощью методов document.documentElement.clientWidth и document.documentElement.clientHeight.

Данные методы возвращают размеры ширины и высоты элемента без учета полосы прокрутки и границ.
Если нужно учесть размеры полос прокрутки и границы, то используем window.innerWidth и window.innerHeight.

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

#aboutwebdev_веб #aboutwebdev_js

Блог

Статьи с несколькими скринами неудобно читать в виде поста в телеграме. Поэтому решил выкладывать статьи в своём блоге.

В ближайшее время буду его настраивать.

#aboutwebdev_блог

Блог

Ближайшее время настройки блога наступило.

Конфиги рабочего окружения выложу на гитхаб.

Подписывайтесь на мой гитхаб: https://github.com/sqlzzy

#aboutwebdev_блог

Вклад в Доку

Недавно опубликовали мои дополнения в виде пару предложений и разных примеров в статью про css-свойство "perspective" в Доке.
Рад, что смог внести вклад в развитие платформы.

Дока: https://doka.guide/
Статья про свойство "perspective": https://doka.guide/css/perspective/

#aboutwebdev_опенсорс

Дефолтные конфиги для проекта на 11ty

Создал репозиторий с дефолтными конфигами для проекта на 11ty и файловой структурой для них.

Характеристики: HTML (Nunjucks) + CSS (SCSS) + VanillaJS
Dev-режим: 11ty
Prod-режим: 11ty + gulp

Ссылка на репозиторий: https://github.com/sqlzzy/default-config-11ty-gulp

#aboutwebdev_конфиги

Медиа-запрос в SASS

Когда создавал небольшую дизайн-систему своего блога понадобилось добавить миксины медиа-запросов SASS.
Решил написать пост с описанием создания структуры миксина медиа-запроса в SASS и его вызова.

$mobile — переменная ширины экрана;
@mixin mobile-s — задаем название («mobile-s») миксина медиа-запроса;
@media (max-width : $mobile) — задаем при какой ширине экрана будут применяться стили. В данном случае, стили будут применятся при ширине экрана до 360px;
@content — блок контента. При компиляции на его место будут вставлены свойства, переданные в миксине;
@include mobile-s — вызов миксина медиа-запроса «mobile-s» в файле стилей страницы.

#aboutwebdev_css #aboutwebdev_sass_scss

Поддержка синтаксиса диапазона медиазапросов

Синтаксис диапазона медиазапросов с использованием обычных математических операторами сравнения: >, <, >= или <=, теперь поддерживается всеми популярными браузерами.

Пример: @media (360px <= width <= 720px) эквивалентен @media (min-width: 360px) and (max-width: 720px).

Ссылка: https://caniuse.com/css-media-range-syntax

#aboutwebdev_css

Подключение npm-пакета без установки

Для своего небольшого проекта не хотел устанавливать npm-пакеты. Подключил их через import в js-файле с указанием ссылки на cdn пакета.

Пример:
import axios from "https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"

Ссылка на сайт: https://www.jsdelivr.com

#aboutwebdev_js #aboutwebdev_рекомендация