8 практичных хитростей веб-разработчика — применить немедленно!
HTML, CSS и JS хинты, которые полезно знать — перевод 8 Tricks for Web Developers You Can Put Into Practice Immediately
Веб-разработчику всегда приятно лишний раз облегчить себе жизнь. Особенно, если это можно сделать моментально и на практике. Только вот список приемов по облегчению жизни разработчика — почти бесконечен, да и не все из них безопасно часто применять.
Поэтому я, Daan, объединил те некоторые из HTML, CSS и JavaScript приемов, о которых, на мой взгляд, будет полезно узнать каждому веб-разработчику. Надеюсь, что хоть с парочкой из трюков я вас познакомлю первым!
1. Внешние ссылки.
Можно стилизовать ссылки разными методами; один из способов это сделать — приписать ко внешним ссылкам специализированный класс.
Но это громоздко и ненужно, поскольку для простых задач можно и не создавать лишний класс.
Рассмотрим CSS-селектор:
a[href*="//"]:not([href*="yourwebsite.com"]) {
/* Apply style here */
}Селектор принимает все те a теги, атрибут href которых содержит две косые черты (для фильтрации относительных URL-адресов) и не содержит URL-адреса вашего веб-сайта. То есть, фильтр проходят только внешние ссылки.
Просто, неправда ли?!
2. Легкий подсчет
Наверное, console.log вы уже много раз использовали. Но знали ли вы о других, более полезных для отладки функциях?
Одна из этих функций - count. Она возвращает число раз, которые была вызвана. Это позволит не создавая счетчик отслеживать, сколько раз до этого происходило определенное событие:
Функция count имеет один аргумент - Name, в приведенном выше примере. Этот аргумент работает как идентификатор счетчика. Если аргумент Name не передан, то будет использовано значение «по умолчанию».
В приведенном выше примере массив names содержит пять имен. Функция count вызывается каждый цикл, поэтому счетчик вернет 5.
3. Углы
Значение угла часто используется в CSS для поворота определенного элемента или создания анимации. В большинстве используется что-то вроде transform: rotate(180deg). Но есть несколько других полезных единиц: rad, grad и turn.
Самая интересная из них — это turn. Вместо записи transform: rotate(180deg) можно написать transform: rotate(0.5turn). Или, например, если необходимо повернуть элемент два раза, то transform: rotate(2turn) эквивалентно transform: rotate(720deg)
4. Подписи и субтитры
Добавление подписей или субтитров ко всему аудио и видео на веб-сайте очень поможет посетителям. Это, вероятно, не требует дополнительных объяснений.
Можно добавить заголовок или субтитры с помощью тега track. Он работает как для audio, так и для video тегов.
Вот как это выглядит:
<video controls src="/video.mp4"><track label="English" kind="subtitles" srclang="en" src="captions/video-en.vtt" default><track label="Deutsch" kind="subtitles" srclang="de" src="captions/video-de.vtt"><track label="Español" kind="subtitles" srclang="es" src="captions/video-es.vtt"></video>
Атрибут label определяет заголовок текстовой дорожки. Атрибут kind указывает тип текстовой дорожки и может иметь одно из следующих значений: заголовки, главы, описания, метаданные или субтитры. Атрибут srclang определяет язык текста дорожки и является обязательным, если атрибут kind это субтитры.
5. Динамические свойства
Иногда бывает необходимо добавить к объекту динамические свойства. К счастью, в JavaScript это возможно. На самом деле, есть несколько способов сделать это.
Вот так выглядит первый способ:
const dynamic = 'name'const person = {
age: 33,
[dynamic]: 'John'
}
Приятно знать, что в ES6 можно комбинировать динамические свойства с интерполяцией.
Давайте рассмотрим следующий пример, в котором мы добавили дополнительное свойство к объекту person с помощью интерполяции:
const dynamic = 'name'const person = {
age: 33,
[dynamic]: 'John',
[\`interpolated-\${dynamic}\`]: true
}
Последний способ добавить динамическое свойство к объекту — определить его так же, как при добавлении пары ключ-значение в массив:
const dynamic = 'name'let person = {
age: 33,
}person[dynamic] = 'John'
Большое преимущество этого метода — он позволяет добавлять динамические свойства не только при объявлении объекта; такой способ часто комбинируется с оператором if:
let person = {
age: 33,
}if (someCondition) {
person[someProperty] = someValue
}
6. Стилизация необязательных и обязательных элементов ввода.
CSS поставляется с псевдоклассами :optional и :required для тегов input, select и textarea.
Псевдокласс :optional представляет элемент, для которого не установлен обязательный атрибут, а псевдокласс :required - элемент, для которого обязательный атрибут установлен:
input:optional {
border: 1px solid black;
}input:required {
border: 1px dashed red;
}
Вот как это выглядит:
7. Список, разделенный запятыми.
Вот небольшой хитрый трюк, который позволяет вам создать список, разделенный запятыми, используя только неупорядоченный список HTML и пару строк CSS.
ul > li:not(:last-child):after {
content: “, “;
}Для того, чтобы это сработало, вам необходимо установить для свойства display тега li значение inline-block.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Вот как выглядит результат:
8. Уникальные значения массива
Последний трюк в этом списке позволяет удалить повторяющиеся значения из массива. Один из распространенных способов сделать это — использовать функцию filter. Как обычно, есть несколько способов решить эту проблему.
Мой любимый способ удаления повторяющихся значений из массива - это совмещение конструктора Set со spread-оператором - просто и чисто!
const numbers = [1, 2, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7, 7]
const unique_numbers = [...new Set(numbers)]console.log(unique_numbers); // [1, 2, 3, 4, 5, 6, 7]
Слушайте наш подкаст в iTunes и SoundCloud, читайте нас на Medium, контрибьютьте на GitHub, общайтесь в группе Telegram, следите в Twitter и канале Telegram, рекомендуйте в VK и Facebook.
