CSS: лимит строк

Читать

Свойство -webkit-line-clamp позволяет ограничить содержимое блока указанным количеством строк:

p.intro {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* обрезаем, если количество строк больше 3 */
    overflow: hidden;
}

Для того, чтобы результат соответствовал ожиданиям, должны быть соблюдены следующие правила:

1. свойство display имеет значение -webkit-box или -webkit-inline-box,
2. значение свойства -webkit-box-orient соответствует vertical
3. overflow содержит значение hidden

#frontend #css

HTML: множественный ввод

Читать

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

<input type="email" placeholder="Email (список, через запятую)" multiple>

Если для атрибута type не задано значение email или file, возможность множественного ввода значений даже при указанном multiple игнорируется.

#frontend #html

Xcode: xcode-select

Читать

Рассмотрим, как установить Xcode CLT (Xcode Command Line Tools) напрямую, не прибегая к установке полного пакета XCode или Homebrew...

#dev #tutorial #xcode

HTML: http-equiv

Для обновления или перенаправления по истечении определенного периода времени можно использовать атрибут http-equiv HTML-элемента meta.

Так можно обновлять страницу каждые 30 секунд:

  <meta http-equiv="refresh" content="30">

А это перенаправление на указанную страницу через 5 секунд:

  <meta http-equiv="refresh" content="5;https://google.com">

#frontend #html

Tailwind: адаптивная сетка

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

Обращайте внимание на контрольные точки Tailwind:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-blue-100 p-4">Item 1</div>
  <div class="bg-blue-100 p-4">Item 2</div>
  <div class="bg-blue-100 p-4">Item 3</div>
  <div class="bg-blue-100 p-4">Item 4</div>
</div>

1. grid включает адаптивную сетку.
2. grid-cols-1 создает один столбец на маленьких экранах.
3. sm:grid-cols-2 создает два столбца экранах размером более 640 пикселей.
4. lg:grid-cols-4 создает четыре столбца на экранах размером больше 1024 пикселей.

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

<div class="grid grid-cols-3 gap-4">
  <div class="bg-green-100 p-4 col-span-2">Item 1 (Spans 2 columns)</div>
  <div class="bg-green-100 p-4">Item 2</div>
  <div class="bg-green-100 p-4 row-span-2">Item 3 (Spans 2 rows)</div>
  <div class="bg-green-100 p-4">Item 4</div>
  <div class="bg-green-100 p-4">Item 5</div>
</div>

1. col-span-2 располагает элемент в двух столбцах.
2. row-span-2 располагает элемент на двух строках.

Контролируйте поток:

<div class="grid grid-cols-3 grid-flow-row-dense gap-4">
  <div class="bg-red-100 p-4">Item 1</div>
  <div class="bg-red-100 p-4">Item 2</div>
  <div class="bg-red-100 p-4">Item 3</div>
  <div class="bg-red-100 p-4 col-span-2">Item 4 (Spans 2 columns)</div>
  <div class="bg-red-100 p-4">Item 5</div>
</div>

grid-flow-row-dense автоматически заполняет пустые ячейки сетки.

Выравнивайте элементы сетки:

<div class="grid grid-cols-2 gap-4 place-items-center">
  <div class="bg-yellow-100 p-4">Centered Item 1</div>
  <div class="bg-yellow-100 p-4">Centered Item 2</div>
</div>

place-items-center центрирует элементы сетки по вертикали и горизонтали

#frontend #css #tailwind

CSS: inset

Обычно абсолютное позиционирование элемента выглядит так:

.some-element {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Свойство inset значительно сокращает код:

.some-element {
    position: absolute;
    inset: 0;
}

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

.some-element {
    position: absolute;
    inset: 10px 0px -10px 0px;
}

#frontend #css

HTML: отключаем контекстное меню

Установив значение false для свойства обработчика событий oncontextmenu, обрабатывающего клик правой кнопкой мыши, можно изменить стандартное поведение браузера и отключить вызов контекстного меню

Так правый клик отключается для отдельного HTML-элемента:

<p oncontextmenu="return false">Hello</p>

А так контекстное меню отключается для всего содержимого страницы:

<body oncontextmenu="return false">....</body>

#frontend #html #js

CSS: user-select

Можно значительно упростить выбор текста с помощью CSS-свойства user-select.

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

Кроме того, с помощью user-select: none; можно отключить выделение текста.

#frontend #css

CSS: checkbox

Обычно создание пользовательских переключателей не обходится без изрядного количества JavaScript-кода. Но такую задачу можно решить, используя только HTML и CSS.

<label class="switch">
  <input type="checkbox" class="switch-input">
  <span class="switch-slider"></span>
</label>

/* контейнер для переключателя */
.switch { 
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* скрываем стоковый чекбокс */
.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* видимый бекграунд переключателя */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

/* переключатель */
.switch-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

/* псевдокласс для переключателя во включенном состоянии */
.switch-input:checked + .switch-slider {
  background-color: #2196F3;
}

/* перемещаем переключатель вправо во включенном состоянии */
.switch-input:checked + .switch-slider:before {
  transform: translateX(26px);
}

#frontend #html #css

Установка React с Tailwind CSS

Читать

Tailwind CSS является неплохим инструментом для работы над стилями компонентов React-приложений. В этом руководстве рассматривается пошаговая установка Tailwind CSS с процессором PostCSS для React...

#frontend #css #tailwind #js #react

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