7 потрясающих приемов в веб-разработке

2
3192
views

Перевод статьи «7 adorable web development tricks».

Приемы веб-разработки

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

Сегодня я хочу продемонстрировать вам 7 интересных, но не слишком известных приемов, имеющихся в этих трех языках. Можете мне не верить, однако есть вещи, которые не знают не только новички, но и более опытные разработчики. Возможно, потому что не все приемы одинаково полезны и применимы… В любом случае, давайте перейдем к нашей теме и немного развлечемся!

7. Инверсия логических выражений

Типобезопасность и JavaScript могут показаться двумя очень далекими друг от друга концепциями. Отслеживание всех динамических типов в JS может быть довольно сложной задачей. Но в результате мы получаем лучшую производительность, так как написанный код легче обрабатывается JIT-компилятором. Разработчики часто допускают ошибку, используя в условных выражениях типы, отличные от логических, а ведь для последних есть отличный прием!

Помните логический оператор «нет» (!)? Это простой, быстрый и эффективный способ преобразования значения логического выражения в противоположное. Но что если нам нужно отобразить именно то значение, которое там было бы без этого преобразования? Скажем, у нас уже есть «перевернутое» значение в логическом выражении. Если мы опять применим к нему оператор (!), мы получим первоначальное значение. Ну, или можно изначально использовать функцию Boolean().

const falsyValue = 0;
const truthyValue = 1;
!!falsyValue; // false
!!truthyValue; // true

6. Разделяй и округляй

В JS довольно много операций. Некоторые из них используются более интенсивно, чем другие. Во вторую группу часто попадают битовые операции. Они производят преобразования с отдельными битами (двоичными числами), а не с числами какой-либо системы счисления. Многие JS-программисты знают об их существовании, но не слишком стремятся их использовать. Главным образом потому, что эти операции кажутся, мягко говоря, сложноватыми. Они не слишком дружественны к начинающим разработчикам и потребуется некоторое время, чтобы в них вникнуть.

Но битовые операции имеют свои преимущества! Они определенно позволяют программисту писать более короткий код (хотя и только в отдельных случаях). Помимо этого, битовые операции являются более высокопроизводительным решением, поскольку работают с битами. Чтобы пояснить эту мысль, я приведу пример. В нем мы делим числа на 2 и округляем результат, а также делаем то же самое при помощи оператора сдвига вправо.

const value = 543;
const halfValue = value/2; // 271.5

Math.round(halfValue); // 272
Math.floor(halfValue); // 271

value >> 1; // 271

5. JSON-форматирование

Концепция JSON скорее всего известна всем JS-разработчикам. Это изучается чуть ли не в самом начале пути в JS. То же самое касается методов JSON.parse() и JSON.stringify(). Как вы наверняка знаете, они позволяют конвертировать ваши JSON-совместимые значения в строки и обратно. Но, могу поспорить, есть здесь кое-что, чего вы не знаете. Речь идет о том факте, что с помощью JSON.stringify() вы можете форматировать вашу строку вывода.

Этот метод, помимо значения, которое должно стать строчным, принимает 2 аргумента:

  • replacer – может представлять собой функцию или массив строк или чисел. Если является функцией, преобразует значения и свойства по ходу их преобразования в строку; если является массивом, определяет набор свойств, включаемых в объект в окончательной строке. Если этот аргумент отсутствует или обозначен как null, в создаваемую JSON-строку попадут все имеющиеся свойства объекта без изменений.
  • spaces – Используется для указания количества пробелов в отступах, которыми вы хотите отделять свойства вашего объекта внутри JSON-строки. Может представлять собой число или строку. Максимальное количество пробелов – 10. Если передать в этом аргументе большее число, то пробелов все равно будет 10. При передаче строки используются первые 10 символов. Если данный аргумент установлен в 0, null или не указан, отступы не будут добавляться.

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

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
  }
}"
*/

4. Центрирование в CSS

Центрирование элементов в CSS это, конечно, не штука. На самом деле это очень распространенная практика. Однако, некоторые разработчики (и я в их числе) часто забывают такие простые вещи. Вдобавок ко всему, здесь нет лучшего или единственно правильного способа решения (из-за несовместимости в некоторых браузерах, особенно в IE).

Одно из самых распространенных и широко применяемых решений это использование модели Flexbox. Ниже приведен пример центрирования и выравнивания дочернего элемента внутри родительского.

<div style="display:flex;justify-content:center;align-items:center;">
  <div></div>
</div>

Кроме этого способа (не слишком хорошо поддерживающегося в разных версиях IE), я настоятельно рекомендую обратить внимание на сайт How to Center in CSS, где вы сможете найти более подходящее решение для отдельных случаев.

3. Переменные в CSS

В эру препроцессоров CSS, веб-фреймворков и CSS-in-JS решений использование просто CSS рассматривается уже как какое-то отклонение. Это не плохо – пока указанные решения лучше справляются с работой. Но есть одна фича, которой славятся препроцессоры CSS и которая недавно была добавлена в vanilla CSS, – переменные!

:root {
  --main-bg-color: brown;
}

.className {
  background-color: var(--main-bg-color);
  display: block;
  color: white;
}

Поддержка браузеров для этого функционала кажется довольно хорошей. В любом случае, приятно сознавать, что некоторые из самых желанных фич проникают в сам язык. Конечно, это не то многообразие, что предлагают препроцессоры или библиотека CSS-in-JS. Но все равно стоит знать о том, что такая фича есть и в самом CSS.

2. Проверка поддержки CSS

Поддержка разных вещей сильно варьируется в браузерах, это касается и JS, и CSS. Но проверки поддержки в JS не слишком сложны, чего не скажешь о CSS… По крайней мере, так было. Представляю вам CSS-правило @supports – лучшее решение для проверок поддержки.

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    display: block;
  }
}

Весь его синтаксис имеет форму блока if-else, в котором вы можете проверять, поддерживается ли данная пара свойства-значения. Впрочем, этот отличный функционал (@supports) проверки поддержки работает только тогда, когда поддерживается сам.

1. Стильные стили

Что касается первого номера моего списка, лучше всего его покажет автор – @calebporzio.

https://twitter.com/calebporzio/status/1121054728148926467

В общем, все сводится к тому факту, что вы можете прописать стиль в элементе, отобразить его содержимое, сделать его редактируемым и – вуаля! – вы получаете нечто вроде редактора CSS в режиме реального времени! Как говорит автор видео, на практике это может и не пригодиться, но все равно это потрясающе! Также, к сожалению, это не работает с тегом <script>.

<style style="display: block" contenteditable>
    html {
        background: blue;
    }
</style>

2 КОММЕНТАРИИ

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here