Источник: Nuances of Programming
Как веб-разработчику, мне всегда приятно узнавать фишки, которые упрощают жизнь, особенно если их можно сразу же использовать на практике. Однако список таких приёмов бесконечен, а многие из них не подходят для частого применения.
Поэтому я собрал полезные советы по HTML, CSS и JavaScript, которые могут пригодиться каждому веб-разработчику. Возможно, вы найдёте в этом списке несколько новых для себя приёмов.
Внешние ссылки
Стилизовать внешние ссылки можно разными способами. Например, добавить новый стилевой класс для каждой из них. Однако это довольно громоздкий метод, а с помощью CSS можно сделать всё гораздо проще.
Посмотрим на следующий селектор.
a [href*=”//”] :not( [href*=”yourwebsite.com”] ) {
/* Напишите здесь стиль*/ }
Этот CSS-селектор принимает все теги a с атрибутом href , содержащим двойную косую черту (для фильтрации относительных URL-адресов), а также те, в которых отсутствует URL-адрес сайта.
Как правило, в селекторы добавляют псевдоэлемент before или after , в котором обычно хранится иконка. Как в примере ниже:
Здесь для всех внешних ссылок используется псевдоэлемент before , который добавляет иконку перед ссылками.
Легкий подсчет
Возможно, вы уже много раз использовали console.log . Для многих веб-разработчиков это лучшее решение при отладке. Но знаете ли вы, что существуют гораздо больше полезных вариантов?
Один из них — функция count . Она записывает, сколько раз было произведено определённых вызовов к count . Эта функция позволяет отследить количество событий без самостоятельной установки счётчика.
Функция count содержит один аргумент, в примере выше — это метка Name. Для счётчика этот аргумент выступает как идентификатор. И если он не передаётся в функцию, то вместо него идёт метка default .
В этом примере массив names содержит 5 имён. Функция count вызывается каждый цикл, поэтому счётчик выведет 5.
Угол поворота
Угол поворота очень часто используется в CSS для вращения какого-либо элемента или создания анимации. В основном для этого мы применяем функцию трансформации transform: rotate(180deg) , используя градусы. Однако угол можно также задавать и в других единицах, в таких как радианы (rad), грады (grad) или в поворотах (turn).
Повороты (turn) — наиболее интересный вариант. Вместо transform: rotate(180deg) можно написать transform: rotate(0.5turn) . А если вы хотите повернуть элемент дважды, то transform: rotate(2turn) вместо transform: rotate(720deg) .
Подписи и субтитры
Подписи и субтитры ко всем аудио- и видеозаписям сделают сайт более удобным и доступным для посетителей.
Добавить их можно с помощью тэга track , написав его внутри тэга audio или video .
Вот как это выглядит.
Атрибут label указывает на заголовок текста дорожки. Атрибут kind определяет тип текстовой дорожки и может содержать одно из следующих значений: captions (подписи) , chapter (глава) , descriptions (описание) , metadata (метаданные ) или subtitles (субтитры) . Атрибут srclang указывает на язык текста дорожки, он необходим, если атрибут kind принимает значение subtitles .
Динамические свойства
Иногда в объект нужно добавить динамическое свойство. К счастью, в JavaScript есть такая возможность и даже несколько способов реализации.
Первый выглядит так:
Важно помнить, что при работе в ES6 динамические свойства можно также совмещать с интерполяцией.
В следующем примере добавляем дополнительное свойство к объекту person , используя интерполяцию:
Последний способ присоединить динамическое свойство к объекту — это написать его таким же образом, как и добавление пары ключ-значение в массив.
Главное преимущество этого метода заключается в том, что, помимо добавления динамического свойства при объявлении объекта, он также позволяет выполнять другие процессы. Зачастую этот метод комбинируют с условными выражениями if .
Стилизация обязательного и необязательного элемента ввода (input)
В языке CSS имеются псевдоклассы :optional (необязательный) и :required (обязательный) для тегов input , select и textarea . Псевдокласс :optional указывает на элемент без атрибута required . А псевдокласс :required на тот, что содержит атрибуты required .
Вот так это выглядит:
Список, разделённый запятой
Вот ещё один хороший приём, с помощью которого можно разделить список запятой, используя лишь маркированный список HTML и пару строк CSS:
Чтобы всё заработало нужно задать тегу li свойство display со значением inline-block .
<ul > <li >First item</li > <li >Second item</li > <li >Third item</li > </ul >
Получаем вот такой результат:
Массив уникальных значений
Последний в этом списке приём удаляет повторяющиеся элементы в массиве. Зачастую делается это с помощью функции filter . Но это не единственный способ решения проблемы.
Например, можно объединить конструктор Set и оператор Spread .
Читайте также:
Перевод статьи Daan : 8 Tricks for Web Developers You Can Put Into Practice Immediately
