📑 Как правильно пользоваться консолью JavaScript

Умеешь только в простейшие консольные команды типа console.log? Мы сделаем тебя великим мастером консоли!

Давайте начистоту – как вы дебажите код? Ну не отрицайте, конечно же, логируете сообщения в консоль браузера – все мы так делаем. console.log отлично работает, он быстрый, удобный – но не оптимальный. Раз уж мы идем по легкому пути, давайте делать это с шиком!

🔍 Читать статью

#article #js #tips

🛠 Solid — это легковесный и быстрый аналог React, не использующий виртуальную DOM и компилируемый в прямые DOM-инструкции.

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

💡Как в JavaScript получить размеры экрана, окна и веб-страницы

Размер экрана — это ширина и высота экрана: монитор или мобильный экран.
window.screen — объект, который содержит информацию о размере экрана. Вот как получить доступ к ширине и высоте экрана:

const screenWidth  = window.screen.width;
const screenHeight = window.screen.height;

Доступный размер экрана состоит из ширины и высоты экрана без панелей инструментов ОС.

const availScreenWidth  = window.screen.availWidth;
const availScreenHeight = window.screen.availHeight;

Чтобы получить доступ к внешнему размеру окна, вы можете использовать свойство outerWidth и outerHeight, которые доступны непосредственно для объекта window:

const windowOuterWidth  = window.outerWidth;
const windowOuterHeight = window.outerHeight;

Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.

const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;

#советы #js

🛠 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