Tailwind: темный режим

Читать

Давайте рассмотрим, как реализовать в Tailwind CSS темный режим (dark mode). Темный режим на протяжении уже многих лет сохраняет свою актуальность и популярность, так как действительно обеспечивает комфортные условия работы пользователей с контентом в условиях слабого освещения, уменьшая дискомфорт и снижая нагрузку на глаза.

Для создания и поддержки темного режима в Tailwind предусмотрены встроенные утилиты...

#frontend #css #tailwind

CSS: управлением фоном элемента

Читать

Свойство z-index позиционирует элементы по оси Z, то есть определяет, в какой последовательности происходит наложение элементов. Так, иногда для дочернего элемента можно установить значение свойства z-index меньше чем для родительского, в результате дочерний элемент скроется за родительским элементом. Избежать такого эффекта позволяет создание нового контекста наложения (stacking context) для родительского элемента. Сделать это можно, например, добавив родителю CSS-свойство isolation: isolate.

Технику создания нового контекста наложения можно использовать для создания эффекта наведения, при котором меняется фон кнопки:

button.join-now {
    cursor: pointer;
    border: none;
    outline: none;
    padding: 10px 15px;
    position: relative;
    background-color: #5dbea3;
    isolation: isolate; /* без этого свойство дочерний элемент скроется за родительским */
}

button.join-now::before {
    content: "";
    position: absolute;
    background-color: #33b249;
    top: 0;
    left: 100%;
    right: 0;
    bottom: 0;
    transition: left 500ms ease-out;
    z-index: -1;
}

button.join-now:hover::before {
    left: 0;
}

Так при наведении будет изменяться фон элемента button, не мешая тексту на переднем плане.

#frontend #css

Xcode: обзор

Читать

Сразу замечу, что в большинстве случаев для эффективной работы не нужно устанавливать весь пакет Xcode. Для создания программного обеспечения на Mac достаточно иметь в своем распоряжении Xcode Command Line Tools.

А теперь по порядку...

#dev #xcode #macos

CSS: кнопка в форме таблетки

Читать

Сделать кнопку в форме таблетки или пилюли (кнопку со скругленными краями) можно, установив элементу button очень большое значение для свойства border-radius, которое, несомненно, должно быть больше высоты кнопки:

button.btn {
    border-radius: 80px; /* значение должно значительно превышать высоту кнопки */
    padding: 20px 30px;
    background-color: #fdd835;
    border: none;
    color: black;
    font-size: 20px;
}

Не стоит забывать, что высота кнопки может увеличиваться при изменении дизайна. Поэтому, в большинсте случаев, для разработчика будет удобно устанавливать border-radius с очень большим значением, чтобы ваш CSS-эффект продолжал работать независимо от того, насколько увеличится высота кнопки.

#frontend #css

CSS: текст с многоточием

Читать

Как обрезать текст выходящий за пределы контейнера с добавлением многоточия ...? Такой метод давно используется для достижения визуальной эстетики и повышения лояльности пользователей при просмотре текста, не умещающегося в пределах выделенного для него блока:

p.intro {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

1. для элемента с текстом указывается явная ширина width,
2. чтобы предотвратить автоматический перенос текста на следующую строку нужно указать свойство white-space: nowrap;,
3. текст, выходящий за пределы блока нужно обрезать overflow: hidden;,
4. конец обрезанной строки дополняется многоточием text-overflow: ellipsis;.

#frontend #css

Homebrew: установка Xcode CLT

Читать

Самый простой способ получить на рабочем месте Xcode Command Line Tools — это установить Homebrew, популярный менеджер пакетов для macOS. С Homebrew можно установить практически любой инструмент разработчика с открытым исходным кодом. Поскольку, с высокой степенью вероятности, Homebrew очень сильно пригодится в локальной среде разработки, будет разумным шагом установить Homebrew, а вместе с ним и Xcode Command Line Tools...

#dev #tutorial #macos

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