Перевод статьи «7 adorable web development tricks».
В наше время все основные языки, применяемые в веб-разработке, могут считаться уже зрелыми, устоявшимися. После 20+ лет развития HTML, CSS и JavaScript стали стандартами веба по всему миру. Впрочем, это лишь факт, который подводит нас к теме поста.
Сегодня я хочу продемонстрировать вам 7 интересных, но не слишком известных приемов, имеющихся в этих трех языках. Можете мне не верить, однако есть вещи, которые не знают не только новички, но и более опытные разработчики. Возможно, потому что не все приемы одинаково полезны и применимы… В любом случае, давайте перейдем к нашей теме и немного развлечемся!
7. Инверсия логических выражений
Типобезопасность и JavaScript могут показаться двумя очень далекими друг от друга концепциями. Отслеживание всех динамических типов в JS может быть довольно сложной задачей. Но в результате мы получаем лучшую производительность, так как написанный код легче обрабатывается JIT-компилятором. Разработчики часто допускают ошибку, используя в условных выражениях типы, отличные от логических, а ведь для последних есть отличный прием!
Помните логический оператор «нет» (!)? Это простой, быстрый и эффективный способ преобразования значения логического выражения в противоположное. Но что если нам нужно отобразить именно то значение, которое там было бы без этого преобразования? Скажем, у нас уже есть «перевернутое» значение в логическом выражении. Если мы опять применим к нему оператор (!), мы получим первоначальное значение. Ну, или можно изначально использовать функцию Boolean().
[javascript]const falsyValue = 0;
const truthyValue = 1;
!!falsyValue; // false
!!truthyValue; // true
[/javascript]
6. Разделяй и округляй
В JS довольно много операций. Некоторые из них используются более интенсивно, чем другие. Во вторую группу часто попадают битовые операции. Они производят преобразования с отдельными битами (двоичными числами), а не с числами какой-либо системы счисления. Многие JS-программисты знают об их существовании, но не слишком стремятся их использовать. Главным образом потому, что эти операции кажутся, мягко говоря, сложноватыми. Они не слишком дружественны к начинающим разработчикам и потребуется некоторое время, чтобы в них вникнуть.
Но битовые операции имеют свои преимущества! Они определенно позволяют программисту писать более короткий код (хотя и только в отдельных случаях). Помимо этого, битовые операции являются более высокопроизводительным решением, поскольку работают с битами. Чтобы пояснить эту мысль, я приведу пример. В нем мы делим числа на 2 и округляем результат, а также делаем то же самое при помощи оператора сдвига вправо.
[javascript]const value = 543;
const halfValue = value/2; // 271.5
Math.round(halfValue); // 272
Math.floor(halfValue); // 271
value >> 1; // 271[/javascript]
5. JSON-форматирование
Концепция JSON скорее всего известна всем JS-разработчикам. Это изучается чуть ли не в самом начале пути в JS. То же самое касается методов JSON.parse() и JSON.stringify(). Как вы наверняка знаете, они позволяют конвертировать ваши JSON-совместимые значения в строки и обратно. Но, могу поспорить, есть здесь кое-что, чего вы не знаете. Речь идет о том факте, что с помощью JSON.stringify() вы можете форматировать вашу строку вывода.
Этот метод, помимо значения, которое должно стать строчным, принимает 2 аргумента:
- replacer – может представлять собой функцию или массив строк или чисел. Если является функцией, преобразует значения и свойства по ходу их преобразования в строку; если является массивом, определяет набор свойств, включаемых в объект в окончательной строке. Если этот аргумент отсутствует или обозначен как null, в создаваемую JSON-строку попадут все имеющиеся свойства объекта без изменений.
- spaces – Используется для указания количества пробелов в отступах, которыми вы хотите отделять свойства вашего объекта внутри JSON-строки. Может представлять собой число или строку. Максимальное количество пробелов – 10. Если передать в этом аргументе большее число, то пробелов все равно будет 10. При передаче строки используются первые 10 символов. Если данный аргумент установлен в 0, null или не указан, отступы не будут добавляться.
Вот как раз второй аргумент – spaces – и предоставляет вам простой и красивый способ улучшения вида ваших преобразованных в строку значений. Конечно, это не решит всех проблем, но следует помнить о том, что этот способ всегда к вашим услугам.
[javascript]const obj = {a:{b:1,c:2},d:{e:3,f:4}};
JSON.stringify(obj);
// "{"a":{"b":1,"c":2},"d":{"e":3,"f":4}}"
JSON.stringify(obj, null, 2);
/*
"{
"a": {
"b": 1,
"c": 2
},
"d": {
"e": 3,
"f": 4
}
}"
*/
[/javascript]
4. Центрирование в CSS
Центрирование элементов в CSS это, конечно, не штука. На самом деле это очень распространенная практика. Однако, некоторые разработчики (и я в их числе) часто забывают такие простые вещи. Вдобавок ко всему, здесь нет лучшего или единственно правильного способа решения (из-за несовместимости в некоторых браузерах, особенно в IE).
Одно из самых распространенных и широко применяемых решений это использование модели Flexbox. Ниже приведен пример центрирования и выравнивания дочернего элемента внутри родительского.
[css]<div style="display:flex;justify-content:center;align-items:center;">
<div></div>
</div>
[/css]
Кроме этого способа (не слишком хорошо поддерживающегося в разных версиях IE), я настоятельно рекомендую обратить внимание на сайт How to Center in CSS, где вы сможете найти более подходящее решение для отдельных случаев.
3. Переменные в CSS
В эру препроцессоров CSS, веб-фреймворков и CSS-in-JS решений использование просто CSS рассматривается уже как какое-то отклонение. Это не плохо – пока указанные решения лучше справляются с работой. Но есть одна фича, которой славятся препроцессоры CSS и которая недавно была добавлена в vanilla CSS, – переменные!
[css]
:root {
–main-bg-color: brown;
}
.className {
background-color: var(–main-bg-color);
display: block;
color: white;
}
[/css]
Поддержка браузеров для этого функционала кажется довольно хорошей. В любом случае, приятно сознавать, что некоторые из самых желанных фич проникают в сам язык. Конечно, это не то многообразие, что предлагают препроцессоры или библиотека CSS-in-JS. Но все равно стоит знать о том, что такая фича есть и в самом CSS.
2. Проверка поддержки CSS
Поддержка разных вещей сильно варьируется в браузерах, это касается и JS, и CSS. Но проверки поддержки в JS не слишком сложны, чего не скажешь о CSS… По крайней мере, так было. Представляю вам CSS-правило @supports – лучшее решение для проверок поддержки.
[css]
@supports (display: grid) {
div {
display: grid;
}
}
@supports not (display: grid) {
div {
display: block;
}
}
[/css]
Весь его синтаксис имеет форму блока if-else, в котором вы можете проверять, поддерживается ли данная пара свойства-значения. Впрочем, этот отличный функционал (@supports) проверки поддержки работает только тогда, когда поддерживается сам.
1. Стильные стили
Что касается первого номера моего списка, лучше всего его покажет автор – @calebporzio.
В общем, все сводится к тому факту, что вы можете прописать стиль в элементе, отобразить его содержимое, сделать его редактируемым и – вуаля! – вы получаете нечто вроде редактора CSS в режиме реального времени! Как говорит автор видео, на практике это может и не пригодиться, но все равно это потрясающе! Также, к сожалению, это не работает с тегом <script>.
[css]
<style style="display: block" contenteditable>
html {
background: blue;
}
</style>
[/css]
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
Очень порадовало использование css в реальном времени на странице ))
поддерживаю) сам был немного в шоке)