7 восхитительных трюков для веб-разработки

К настоящему времени все основные языки веб-разработки можно считать зрелыми.

Разрабатывая более двух десятилетий, HTML, CSS и JavaScript являются всемирно признанными стандартами Интернета. Но это просто факт, ведущий нас к основной теме этого поста.

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

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

Boolean convertion

Безопасность типов и JavaScript могут показаться двумя совершенно разными понятиями. Отслеживание всех динамических типов в JS может быть довольно сложной задачей.

Тем не менее, это может привести к повышению производительности, так как написанный код легче обрабатывается JIT-компилятором.

Использование типов, отличных от логических, например, условные выражения - типичный пример таких ошибок. Но для этого есть хитрость!

Помните логический оператор logical NOT (!)?

Это простой, быстрый и элегантный способ преобразования заданного значения в противоположное логическое значение.

Но что, если мы хотим, чтобы наш логический тип представлял именно то значение, которым он был бы (когда он представлен как логический тип)?

Ну ... у нас уже есть противоположное логическое значение, верно?

Итак, давайте снова сведем на нет наше значение и получим полноценное логическое значение ... или просто используем функцию Boolean() с самого начала.

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

Divide & round

В JS довольно много операторов. Некоторые из них широко используются, а другие нет. Вторая группа часто включает в себя так называемые bitwise operators..

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

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

Но у данных операторов тоже есть свои преимущества! Они, безусловно, позволяют программисту писать тот же код с более коротким синтаксисом, но только в особых случаях.

Помимо этого, тот факт, что они работают с битами, делает их, естественно, более производительным решением.

Чтобы дать вам представление о том, что я имею в виду, вот пример деления числа на 2 и округления (полирования) результата по сравнению с той же операцией с базовым оператором правого сдвига.

const value = 543;
const halfValue = value/2; // 271.5
Math.round(halfValue); // 272
Math.floor(halfValue); // 271
value >> 1; // 271

JSON formatting

Концепция JSON, скорее всего, известна всем разработчикам JS. Это то, что вводится в самом начале пути JS. Таким образом, то же самое относится к методам JSON.parse() и JSON.stringify().

Как вы наверняка знаете, они позволяют вам конвертировать ваши JSON-совместимые значения в strings туда-сюда.

Но один из трюков, который, как я уверен, вы наверняка не знали, заключается в том, что с помощью JSON.stringify() вы можете отформатировать выходную строку.

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

replacer - функция или массив строк или чисел, которые впоследствии используются для внесения в белый список свойств переданного значения, чтобы позднее включить их в строку результата.
spaces - число или строка со значением и длиной, ограниченными 10 соответственно. Это дает вам возможность установить строку или количество пробелов, которые вы хотите использовать для разделения свойств вашего объекта внутри выходной строки. Если оно равно 0, пустой строке или нулю (по умолчанию), выходные данные остаются нетронутыми.

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

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

CSS centering

Центрирующие элементы(англ. Centering elements) с CSS не трюк как таковой. На самом деле, это очень распространенная практика. Но реальность такова, что некоторые разработчики (включая меня) часто забывают такие простые вещи. И, что еще хуже, нет лучшего и единственного пути решения этой проблемы.

Это из-за несовместимости между различными браузерами (особенно IE).

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

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

Помимо описанного выше метода (он не имеет хорошей поддержки в разных версиях IE).Я настоятельно рекомендую вам посетить веб-сайт, где вам будет предоставлено правильное решение для данного случая.

CSS variables

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

Но одна особенность, которой препроцессоры CSS были хорошо известны и недавно попали в ванильный CSS - это переменные!

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

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

CSS support checks

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

Представляем правило @supports CSS - лучшее решение для проверки функций.

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

Весь его синтаксис имеет форму операторов if-else, в которых вы можете проверить, поддерживается ли данная пара свойство-значение.

Styled styles

Теперь, для трюка с номером 1, я должен дать правильную ссылку на автора источника - @calebporzio.

В основном все сводится к тому, что вы можете стилизовать элемент стиля, отобразить его содержимое, сделать его редактируемым! у вас получится несколько живой редактор CSS!

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

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

Итак, что вы думаете об этом коротком, но довольно интересном списке?

Заметили ошибку или есть вопросы?Рассказывай нам о них,связаться с нами ты сможешь с помощью нашего чата или же с помощью бота обратной связь

Не забывайте ставить 👍 если вам понравилась и подписаться на канал