💡 Переместите скрипты вниз страницы

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

Если ваши JS скрипты служат для добавления функциональности — например, обработки кликов кнопки, то вам стоит перенести скрипты вниз, поставив их перед закрывающимся тегом body.

<p>And now you know my favorite kinds of corn. </p>  
<script type="text/javascript" src="path/to/file.js"></script>  
<script type="text/javascript" src="path/to/anotherFile.js"></script>  
</body>  
</html>

#советы #coding #js

📑 Перебирающие методы массивов изнутри

Методы массивов forEach, map, filter, some, every и reduce являются неотъемлимой частью функционального программирования на JavaScript. В этой статье подробно рассмотрим применение каждого из них, а также их реализацию в виде функций.

#статьи #js

💡 Не используйте Eval и не передавайте строку в «SetInterval» или «SetTimeOut»

Функция «eval» дает нам доступ к компилятору JavaScript. Т.е. мы можем выполнить команду записанную в строковой переменной, которую передадим в качестве параметра в eval.
Это не только замедлит вашу программу, но еще и предполагает возниковение огромной дыры безопасности вашего приложения. Это плохо. По возможности избегайте этого.

Далее рассмотрим следующий код:

setInterval(  
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000  
);  

Он не только неэффективен, но еще и работает так же как и «eval». Результаты будут такие-же. Вместо этого передавайте функцию в качестве аргумента.

setInterval(someFunction, 3000);

#советы #coding #js

💡 Самый быстрый способ получить строку в JavaScript

For это не всегда лучший способ для того чтобы обойти массив или объект. Будьте изобретательны и вы найдете наиболее быстрое решение для текущей задачи.

var arr = ['item 1', 'item 2', 'item 3', ...];  
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';  

«Я не собираюсь давать вам скучные бенчмарки, но поверьте мне (или проверьте сами) это действительно самый быстрый способ.

Использование нативных методов (таких как join()), независимо от того что происходит за слоем абстракции гораздо быстрее чем любая ненативная альтернатива.» — James Padolsey, james.padolsey.com

#советы #coding #js

💡 Воспользуйтесь прогрессивным улучшением (progressive enchantment)

Всегда принимайте во внимание выключенный JavaScript. Очень соблазнительно думать «Большая часть моих пользователей не отключает JS, так что зачем мне беспокоиться». Тем не менее это большая ошибка.
А не пробовали ли вы на момент взглянуть на ваш красивый слайдер с отключённым JavaScript? (Скачайте the Web Developer Toolbar чтобы быстро проверить это.) Он может сломать полностью весь ваш сайт. Проектируйте дизайн сайта предполагая что JS может быть отключен. И уже после этого начинайте улучшать макет используя JavaScript.

#советы #js

🛠 Snowpack — инструмент для связывания зависимостей JavaScript. В отличие от Webpack и других сборщиков, которые перекомпилируют ваши ресурсы после каждого изменения файла, Snowpack выполняет только первоначальную настройку. После того, как все будет скомпилировано, любые новые изменения в вашем коде будут сразу же доступны без этапа сборки.

#инструменты #js

🛠 barba js — библиотека JavaScript для создания плавных переходов между страницами сайта. Она берёт статический веб-сайт и с помощью небольшой настройки превращает его в одностраничное приложение. Это помогает уменьшить задержку между загрузкой страниц, сводит к минимуму HTTP-запросы и улучшает взаимодействие с пользователем.

Daily Coding #инструменты #js

🛠 Wallaby — это инструмент для повышения продуктивности разработки. Он запускает JavaScript и TypeScript-тесты пока вы пишете код и выводит результаты в IDE рядом с кодом. Это расширение очень полезное, поскольку позволяет видеть вывод и дебажить в режиме реального времени.

Daily Coding #инструменты #js #TypeScript

🛠 Data-Driven Documents — библиотека JavaScript для управления документами на основе данных. D3 помогает оживить данные с помощью HTML, SVG и CSS. Акцент D3 на веб-стандартах предоставляет вам все возможности современных браузеров, не привязывая себя к проприетарной структуре, сочетая мощные компоненты визуализации и управляемый данными подход к манипуляциям с DOM.

Daily Coding #инструменты #js

🛠 Label-studio — самый гибкий инструмент аннотирования данных. Быстро устанавливается. Создавайте собственные пользовательские интерфейсы или используйте готовые шаблоны маркировки.

Daily Coding #инструменты #python #js