🛠 KeystoneJS — это мощный фреймворк CMS, основанный на Express и MongoDB. Альтернатива WordPress для Node.js. Он позволит вам с легкостью создавать динамические проекты с хорошо структурированными маршрутами, шаблонами и моделями.

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

🛠 MVP.css — CSS-фреймворк без классов, который упрощает стилизацию веб-страниц без написания CSS или дополнительной разметки. Просто включите предоставленную таблицу стилей, и большинство элементов HTML, а также макет страницы получат лучшие стили по умолчанию.

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

🛠 jExcel - VanillaJS библиотека без внешних зависимостей, которая упрощает создание электронных таблиц в стиле Excel. Интерактивные таблицы предлагают множество функций, параметров настройки и отличную поддержку браузера.

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

💡 Уменьшите количество глобальных переменных

«Сведением количества глобальных переменных к одному, вы значительно снижаете шансы нежелательного взаимодействия с другими приложениями, виджетами или библиотеками.»
— Douglas Crockford

Вместо

var name = 'Jeffrey';  
var lastName = 'Way';  
  
function doSomething() {...}  
  
console.log(name); // Jeffrey -- or window.name  

Лучше

var DudeNameSpace = {  
   name : 'Jeffrey',  
   lastName : 'Way',  
   doSomething : function() {...}  
}  
console.log(DudeNameSpace.name); // Jeffrey  

Мы уменьшили количество глобальных переменных до одного, странным образом названного, обьекта «DudeNameSpace».

#советы #coding #js

🛠 μPlot — быстрая библиотека с эффективным использованием памяти для создания великолепных 2D-диаграмм на основе Canvas. μPlot предлагает множество типов графиков, вариантов настройки и другие интересные функции.

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

📑 JavaScript: область видимости простыми словами

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

В этой статье постараемсяь простыми словами объяснить, что такое область видимости в JavaScript.

#статьи #js

🛠 Markmap — полезный инструмент JS, который помогает визуализировать большие документы Markdown путем создания интеллект-карт. Он берет все разделы файла .md и представляет их в удобном для просмотра виде и навигации.

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

🛠 Event Cards — CodePen компонента React для показа event cards или других элементов пользовательского интерфейса с миниатюрами. У него красивый современный дизайн и простая, но очень эффектная анимация.

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

📑 Объектно-ориентированный JavaScript: дескрипторы

Над каждым свойством любого объекта в JavaScript можно провести определённый набор манипуляций. Свойство можно записать, изменить, получить значение, а с помощью цикла for .. in или метода Object.keys перечислить все свойства объекта. Вполне стандартный набор операций для работы с объектами, к которому вы, скорее всего, уже привыкли. До релиза стандарта ES5 все эти “качества” объекта изменить было невозможно, но теперь для каждого свойства можно детально описать модель его поведения с помощью дескрипторов.

#статьи #js

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

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

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

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

Если ваши 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