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, находящееся до первого нецифрового символа.

Tailwind: интерактивность

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

Вот некоторые часто используемые псевдоклассы в Tailwind:

1. hover: для состояния наведения,
2. focus: для состояния фокуса,
3. active: для активного состояния,
4. group-hover: для стилизации с учетом состояния hover родительского элемента.

Например:

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-800">
  Click me
</button>

Tailwind также поддерживает псевдоэлементы before: и after:.

Например:

<div class="relative before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-black before:opacity-50">
  This div has a semi-transparent overlay
</div>

#frontend #css #tailwind

JavaScript: трюк с NaN

Почему NaN не равен NaN?

NaN (Not-a-Number) — это особое значение в JavaScript, и оно никогда не равно самому себе.

console.log(NaN === NaN); // false

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

Для проверки истинности NaN можно использовать Number.isNaN():

console.log(Number.isNaN(NaN)); // true

#frontend #js

Tailwind: футер у нижнего края страницы

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

<body class="flex flex-col min-h-screen">
 <!-- navigation component -->
 <Navigation />

 <!-- main content -->
 <main class="flex-grow">
  <!-- site content -->
 </main>

 <!-- footer component -->
 <Footer />
</body>

Эта структура использует модель flexbox для утилит Tailwind CSS, создавая гибкую разметку на всю высоту (в том числе минимальную высоту) экрана. Содержимое блока main увеличивается, заполняя доступное пространство, и сдвигает футер в нижнюю часть области просмотра, когда содержимого недостаточно для заполнения страницы.

К тегу bodyприменяется class="flex flex-col min-h-screen" для создания гибкой компоновки блока.

1. flex: создает гибкую блочную flexbox модель,
2. flex-col: направляет поток элементов по вертикали,
3. min-h-screen: гарантирует, что минимальная высота элемента body будет составлять не менее 100% высоты области просмотра. Если содержимое элемента не заполняет высоту области просмотра, это правило гарантирует, что body растянется по вертикали, чтобы заполнить всю область просмотра, не давая нижнему колонтитулу всплывать.

Примененный к элементу main class="flex-grow" позволяет области основного содержимого увеличиваться и заполнять все доступное пространство. Если в области просмотра доступно больше места, чем занимает содержимое, flex-grow расширит область основного содержимого, используя свободное пространство и сдвигая футер в нижнюю часть области просмотра.

PHP: архив

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

Давайте разберемся, как программно создавать ZIP-файлы с помощью PHP...

#backend #php

Tailwind: многоуровневый нумерованный список

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

Итак, допустим у нас есть следующая разметка HTML:

<ol>
 <li>Первый уровень
  <ol>
   <li>Второй уровень
    <ol>
     <li>Третий уровень. Первый элемент</li>
     <li>Третий уровень. Второй элемент</li>
    </ol>
   </li>
  </ol>
 </li>
</ol>

Нужно получить многоуровневую нумерацию вложенных элементов, соответствующую шаблону 1., 1.1., 1.1.1.

Для создания пользовательского класса list-nested добавим в файл main.css Tailwind проекта следующие строки:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* многоуровневый нумерованный список */
@layer {
    ol.list-nested {
        counter-reset: item;
    }

    ol.list-nested li::before {
        counter-increment: item;
        content: counters(item, ".") ". ";
    }
}

Директива @layer помогает контролировать порядок объявления пользовательских классов, автоматически перемещая новые стили в соответствующую директиву @tailwind, и включает необходимые функции.

#frontend #css #tailwind

CSS: align-content

Помните все эти мемы о центрировании div? В 2024 году они устарели. Новое свойство align-content работает напрямую в любой блочной разметке, не требуется flexbox или grid. Удивительно, что потребовалось 25 лет, чтобы реализовать эту ​​фундаментальную функцию... Но лучше поздно, чем никогда.

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

#frontend #css