HTML: capture

Атрибут capture HTML-элемента input позволяет захватить видеопоток со смартфона или планшета.

Значение environment включает доступ к видеопотоку с основной камеры смартфона:

<input type="file" capture="environment" accept="video/*"

Значение environment включает доступ к видеопотоку с фронтальной камеры смартфона:

<input type="file" capture="user" accept="image/*">

Кроме того, можно получить доступ и к аудиопотоку:

<input type="file" capture="environment" accept="audio/*">

#frontend #html

Homebrew: установка

Пакетный менеджер Homebrew для mac OS необходим для установки терминальных программ и утилит и является одним из важнейших инструментов, необходимых для настройки локальной среды разработки при программирования на Mac...

#dev #tutorial #homebrew #macos

HTML: градиентный текст

Чтобы создать градиентный текст можно использовать CSS-свойство background-clip.

h2 {
    background: linear-gradient(45deg, gold, lightblue);
    background-clip: text;
    text-fill-color: transparent;
}

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

<svg width="100%" height="100%">
  <defs>
    <linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="orange">
      <stop offset="100%" stop-color="purple">
    </linearGradient>
  </defs>

  <text x="50%" y="50%" font-family="Verdana" font-size="35" text-anchor="middle" fill="url(#Gradient)">
    Gradient Text
  </text>
</svg>

#frontend #html #css

HTML: прокрутка страницы

Автоматическую прокрутку страницы можно сделать более плавной и привлекательной с помощью псевдокласса :focus-within.

html:focus-within {
    scroll-behavior: smooth;
}

#frontend #html #css

Laravel: Valet

Laravel Valet является средой разработки для поклонников яблочной продукции и минимализма. Valet использует сервер Nginx, который включается на устройстве с mac OS в фоновом режиме при запуске машины. С помощью DnsMasq Valet перенаправляет запросы на локальный домен *.test, предоставляя доступ к сайтам, установленным на рабочем компьютере...

#dev #macos #php #laravel

JavaScript: ограничения

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

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// пример использования:
window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 500));

#frontend #js

CSS: выравнивание элементов

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

Но эту проблему можно решить с помощью небольшой хитрости, которую можно назвать clearfix-hack:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

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

#frontend #css

CSS: пользовательский скроллбар

С помощью псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-track , ::-webkit-scrollbar-thumb можно переделать скроллбар в соответствии с требованиями к дизайну сайта:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Настраиваемая полоса прокрутки работает в браузерах на основе WebKit (например, Chrome и Safari). Можно настроить её цвет и размеры так, чтобы они идеально соответствовали общему стилю страниц.

Помните: несмтроя на то что этот CSS-трюк отлично подходит для WebKit, другие браузеры могут не поддерживать используемые псевдоэлементы. Чтобы достичь единообразия пользовательских интерфейсов, необходимо проверять такой код во всех браузерах.

#frontend #css

Tailwind: тень для png

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

Чтобы создать эффект тени, необходимо использовать изображение в формате png с прозрачным фоном.
Все, что остаётся сделать - применить к картинке класс drop-shadow:

<img src="https://i.imgur.com/q3SXJQf.png" class="filter drop-shadow">

Такой трюк не сработает в Tailwind CSS 2ой версии

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

<img src="https://i.imgur.com/q3SXJQf.png" class="filter shadow">

#frontend #tailwind #css

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