CSS: центрирование для Flexbox

Вспомним про быстрый и простой способ центрирования контента по вертикали и горизонтали с помощью Flexbox,

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Если применить класс flex-center к контейнеру, все дочерние элементы отцентруются.

#frontend #css #flexbox

CSS: атрибуты данных

Атрибуты данных полезны не только в JavaScript. С их помощью можно менять и стили HTML-элементов. Создадим элементы <div>...</div>, которые будут содержать атрибуты data-raing с разными значениями:

<div data-rating="1">Rating</div>
<div data-rating="5">Rating</div>

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

[data-rating] {
  color: indigo;
}

Текст элементов с атрибутом data-rating окраситься в фиолетовый цвет.
Но можно более тонко подойти к возможностям пользовательских атрибутов для CSS, и применить стили к их значениям:

[data-rating='1'] {
  color: red;
}
[data-rating='5'] {
  color: indigo;
}

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

[data-rating]::after {
  content: attr(data-rating);
}

#frontend #css

Tailwind: центрирование элемента

Давайте разберем, как можно разместить HTML-элемент в центре родительского блока по горизонтали и по вертикали с помощью Tailwind CSS.
Для реализации такой задачи в Tailwind существует два метода:

1. центрирование с использованием Flexbox модели,
2. центрирование с использванием Grid модели.

Размещение элемента по центру с Grid CSS

<div class="grid h-screen place-items-center">
    <p>Centered using Tailwind Grid</p>
</div>

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

1. grid: применяет к div свойство display: grid,
2. place-items-center: отвечает за свойство place-item: center и центрирует вложенные элементы по горизонтали и по вертикали,
3. h-screen: позволяет элементу занять всю высоту области просмотра (viewport).

Размещение элемента по центру с Flexbox CSS

<div class="flex items-center justify-center h-screen">
  <p>Centered using Tailwind Flex</p>
</div>

Разберем используемые классы:

1. flex: добавляет CSS-свойство display: flex
2. justify-center: центрирует вложенные элементы по горизонтали
3. items-center: центрирует вложенные элементы по вертикали
4. h-screen: позволяет элементу занять всю высоту области просмотра (viewport).

#frontend #css #tailwind

CSS: counter

Что такое CSS-счетчики? Их можно рассматривать, как переменные CSS, значения которых увеличиваются по определенным правилам.

Чтобы инициализировать счетчик нужно пройти процедуру его сброса counter-reset с указанием произвольного названия счетчика (пользовательского идентификатора) в качестве параметра. Сброс счетчика может быть CSS-свойством любого HTML-элемента.

Давайте создадим счетчик paragraph и посчитаем все элементы p страницы

body {
  counter-reset: paragraph;
}

p::before {
  counter-increment: paragraph;
  content: 'Параграф ' counter(paragraph) ': ';
}

Читать далее

CSS: вложенность

Читать

В CSS вложенность позвояяет размещать одни правила в других. Это особенно полезно для управления стилями, зависящими от контекста. Например, есть класс container и нужно стилизовать его дочерние элементы item. Теперь можно создать CSS-правила для item непосредственно внутри container.

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

Это означает, что для компиляции вложенных правил не нужен препроцессор. Например, для элемента ввода данных HTML-формы:

<form>
    <label for="name">Name:
        <input type="text" id="name">
    </label>
</form>

можно создать вложенные стили:

input {
    border: red 2px solid;
}

label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {
        border: purple 2px solid;
    }
}

#frontend #css

JavaScript: онлайн или офлайн

Читать

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

#frontend #js

CSS: псевдокласс :scope

Селектор :scope появился в 2023 году и служит для определения области действия стилей в CSS. Если :scope относится к корневому уровню разметки страницы (обычно это блок html), он полностью заменяет :root. Например:

:scope {
  background-color: orange;
}

Использование :scope внутри блока @scope позволит применить стили четко и целенаправленно, опираясь на логику наименований классов. Например, для HTML-кода:

<div class="light">
  <p><a href="#">light</a></p>
</div>
<div class="dark">
  <p><a href="#">dark</a></p>
</div>

можно применить следующие стили:

@scope (.light) {
  :scope {
    background-color: black;
  }

  a {
    font-size : 2rem;
  }
}

@scope (.dark) {
  :scope {
    background-color: yellow;
    color: purple;
  }

  a {
   font-size : 4rem;
  }

#frontend #css

CSS: @container

Правило @container позволяtт динамически управлять стилями дочернего HTML-элемента в зависимости от размера родительского контейнера, содержащего этот элемент. Запросы для контейнеров работают также как и медиа-запросы. Чтобы воспользоваться всеми преимуществами at-rule правила @container, в первую очередь, необходимо определить контекст контейнера родительского элемента, с помощью свойства container-type:

1. container-type: size;: это значение свойства позволяет выполнять запросы как по ширине, так и по высоте;
2. container-type: inline-size;: это значение свойства, позволяет выполнять запросы только по ширине.

<div class="post">
    <div class="card">
        <h2>Наименование</h2>
        <p>Описание товара</p>
    </div>
</div>

.post {
    container-type: size;
}

.card h2 {
    font-size: 1em;
    color: blue;
}

@container (min-width: 700px) {
    .card h2 {
        font-size: 5em;
        color: purple;
    }
}

#frontend #css

HTML: submit за пределами формы

Далеко не всегда кнопка отправки формы должна находиться в пределах родительского блока form. Спецификация HTML позволяет размещать ее в любом месте на странице сайта. Для того чтобы кнопка submit корректно работала за пределами формы нужно для элемент button type="submit" указать атрибут form со значением равным id формы:

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>

Кнопка не является частью формы, но по-прежнему работает.

#frontend #html

CSS: псевдокласс :has

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

p:has(a) {
    font-size: 40px;
}

будет работать только для p, имеющих вложенную ссылку a:

<p>Тут находится <a href="/">ссылка</a></p>

#frontend #css

CSS: color-mix и color-contrast

В CSS появились новые возможности управления значением <color>: color-mix() и color-contrast()

Пока еще экспериментальная функциональная нотация color-contrast() берет указанное значение цвета и сравнивает его с остальным списком, выбирая наиболее контрастное значение:

color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

Функциональная нотация color-mix() принимает два цветовых значения и возвращает результат их смешивания в заданном цветовом пространстве и количестве.

color-mix(in lab, plum 60%, #f00 50%)

#frontend #css

JavaScript: удаление гласных

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

const input = 'Регулярное выражение';
const removeVowels = input.replace(/[аоуэыияеёю]/gi, '');
console.log(removeVowels);

Это работает. И да, это весь код, который нужен, но давайте рассмотрим подробности:

1. используем функцию replace для замены определенного совпадения.
2. это аргументы функции, для которых мы будем использовать регулярное выражение и значение для замены.

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

const removeVowels = input.replace('a', '');

console.log(removeVowels);

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

1. регулярное выражение заключается в обратные слеши.
2. сопоставление шаблонов задается с помощью квадратных скобок, между которыми указываются сопоставляемые буквы.
3. в конце выражения пишем gi, что означает global ignore (global указывает на применение выражения к каждому случаю найденного совпадения, а не только к первому, ignore позволяет осуществлять поиск без учета регистра)

#frontend #interview #js

JavaScript: производительность

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

#frontend #js

CSS: анимация SVG

Итак, с помощью CSS и SVG можно создать суперкрутой эффект рисования картинки по контуру...

#frontend #css #svg #animation

CSS: управление контуром SVG

С помощью CSS можно не только создавать эффект рисования контура изображения, но и динамически изменять саму картинку. Например: направление кривой контура...

#frontend #css #svg #animation

Tailwind: @apply

Немногие знают, что с помощью директивы @apply классы-утилиты можно объединять в пользовательские классы. И эта возможность кардинально меняет правила игры в Tailwind, когда дело касается чистоты HTML-кода и повторного использования стилей:

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

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

<button class="btn-primary">Нажми меня!</button>

Применяйте @apply для повторно используемых компонентов. Это позволит сделать HTML-разметку страницы более понятной и хорошо читаемой.

#frontend #css #tailwind

Laravel 11. Первый проект: 01. Установка

В первом уроке мы создадим новый проект для изучения Laravel. Официальной документация по установке Laravel содержит большой и исчерпывающий объем информации. Следует знать, что для установки Laravel существует несколько способов. Официальная документация Laravel преимущественно посвящена использованию инструмента командной строки Laravel Sail в сочетании с Docker. Но мы не будем использовать Sail в данном курсе. Так как для его использования требуется понимание принципов работы с Docker. А для новичков это может стать очередной преградой на пути освоения Laravel...

#backend #php #laravel #lesson

Tailwind: пользовательские условия

Хорошо реализованная возможность кастомизации является одной из лучших особенностей Tailwind CSS. Вся магия происходит в файле tailwind.config.js. Давайте рассмотрим как создавать пользовательские условия для применения стилей на примере условия, при котором стили можно будет применять только в случае, когда родительский элемент имеет определенный класс:

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active', 'group-focus'],
    }
  }
}

Это решение позволяет использовать такие классы, как group-focus:bg-blue-500.

#frontend #css #tailwind

CSS: центрируем по вертикали

Рассмотрим несколько способов вертикального центрирования элемента с помощью CSS

1. Абсолютное позиционирование

<p class="center-by-absolute-margin">Centering</p>

.center-by-absolute-margin {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

2. Псевдокласс ::before

<p class="center-by-pseudo-class">Centering</p>

.center-by-pseudo-class::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

3. line-height

<p class="center-by-line-height">Centering</p>

.center-by-line-height {
  height: 200px;
  line-height: 200;
}

4. table

<p class="center-by-table">Centering</p>

.center-by-table {
  display: table-cell;
  vertical-align: middle;
}

5. Flex

<div class="center-by-flex">
  <p>Centering</p>
</div>

.center-by-flex {
  display: flex;
  align-items: center;
}

6. Grid

<div class="center-by-grid">
  <p>Centering</p>
</div>

.center-by-grid {
  display: grid;
  align-items: center;
}

7. Относительно родителя

<div class="center-by-absolute-parent">
  <p class="center-by-absolute-child">Centering</p>
</div>

.center-by-absolute-parent {
  position: relative;
}

.center-by-absolute-child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

8. calc

<p class="center-by-calc">Centering</p>

.center-by-calc {
  height: 70px;
  position: relative;
  top: calc(50% - 35px);
}

9. align-content

<div class="container-center-by-align-content">
  <div class="child-center-by-align-content"></div>
</div>

.container-center-by-align-content {
  display: flex;
  align-content: center;
}

.child-center-by-align-content {
  width: 100px;
  height: 100px; 
}

#frontend #css

CSS: центрируем по горизонтали

Рассмотрим несколько способов центрирования элемента по горизонтали с помощью CSS

Блок с фиксированной шириной

<p class="center-by-fixed-width">Centering</p>

.center-by-fixed-width {
  width: 70px;
  margin: 0 auto;
}

Текст

<p class="center-by-text-align">Centering</p>

.center-by-text-align {
  text-align: center;
}

Блок без фиксированной ширины

<div class="center-by-unfixed-width">
  <span>Centering</span>
</div>

.center-by-unfixed-width {
  text-align: center;
}

table

<p class="center-by-table">Centering</p>

.center-by-table {
  display: table;
  margin: 0 auto;
}

flex

<div class="center-by-flex">
  <p>Centering</p>
</div>

.center-by-flex {
  display: flex;
  justify-content: center;
}

grid

<div class="center-by-grid">
  <p>Centering</p>
</div>

.center-by-grid {
  display: grid;
  justify-content: center;
}

Относительно родителя

<div class="center-by-absolute-parent">
  <p class="center-by-absolute-child">Centering</p>
</div>

.center-by-absolute-parent {
  position: relative;
}

.center-by-absolute-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

calc

<p class="center-by-calc">Centering</p>

.center-by-calc {
  width: 70px;
  margin-left: calc(50% - 35px);
}

align-content

<div class="container-center-by-align-content">
 <div class="child-center-by-align-content"></div>
</div>

.container-center-by-align-content {
  display: flex;
  align-content: center;
}

.child-center-by-align-content {
 width: 100px;
 height: 100px; 
}

#frontend #css

JavaScript: почему parseInt(0.0000005) возвращает 5

Функция parseInt() довольно удобна для преобразования строк в целые числа, но иногда она дает неожиданные результаты:

parseInt(0.0000005) //  5

Попробуем разобраться: сначала parseInt() преобразует аргумент в строку. Поэтому число 0.0000005 JavaScript автоматически преобразует в строку 5e-7. Следующим шагом parseInt() читает полученную строку слева направо и останавливается на первом нечисловом символе. В 5e-7 он останавливается на цифре 5 и возвращает ее. Он не обрабатывает часть строки, начинающуюся с символа e и игнорирует десятичные знаки.

Таким образом, parseInt() обрабатывает числа как строки, считывая информацию до первого нецифрового символа, поэтому и результатом является целое число 5, находящееся до первого нецифрового символа.