HTML: poster

Читать

Атрибут poster используется для того, чтобы демонстрировать пользователю заставку, пока загружается видео или пока пользователь не запустит воспроизведение.

<video src="videofile.ogg" autoplay poster="posterimage.jpg">

Если атрибут poster отсутствует или его значение не указано, ничего не отображается до тех пор, пока не будет доступен первый кадр загружаемого видеоматериала. После того как первый кадр видеоконтента загрузится, он будет отображаться, как рамка постера.

#frontend #html

HTML: noscript

Читать

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

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
Таким образом noscript обеспечивает резервный механизм для компонентов, которые не работают без JavaScript.

#frontend #html

Homebrew: обзор

Читать

Homebrew — это пакетный менеджер для MacOS, который позволяет устанавливать программы и утилиты командной строки.

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

#dev #tutorial

HTML: theme-color

Читать

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

Это не магия: такого эфффекта можно добиться с помощью атрибута name="theme-color" HTML-элемента meta из раздела head. Именно этот атрибут предлагает браузеру использовать укзанный цвет вместо предустановленного.

<meta name="theme-color" content="#4285f4">

Так всего одна строка может помочь пользователям значительно повысить лояльность к Вашему ресурсу. Дело в том, что такое решение добавляет сайту профессиональной эстетики. Создаётся ощущение, что разработчики потратили на дизайн и верстку больше времени и других ресурсов.

#frontend #html

Homebrew: терминология

Читать

Работая с Homebrew можно либо полюбить, либо возненавидить "пивную" терминологию этого пакетного менеджера. В любом случае погрузиться в пивную экосистему придётся...

#dev #tutorial #homebrew

HTML: output

Читать

С помощью элемента output можно выводить результат выполнения скрипта:

<form oninput="r.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
  <input type="number" id="a" value="100">
  +<input type="number" id="b" value="50">
  +<input type="number" id="c" value="50">
  =<output name="r" for="a b c"></output>
</form>

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

#frontend #html

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