JavaScript редактор SVG диаграмм

DgrmJS — это библиотека JavaScript для создания блок-схем SVG. Основная цель библиотеки — настроить рабочие процессы в системах BPM (Business Process Management). Подробней об этой библиотеке узнаешь из статьи.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

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

Обратите внимание на то, что с помощью объекта RegExp вы можете создавать динамические регулярные выражения. В основном регулярные выражения составляются с использованием коротких форм (то есть строк, заключенных в прямые слеши) и в них нельзя использовать переменные. Но RegExp()позволяет обойти ограничение.

function findWord(word, string) {
  var instancesOfWord = string.match(new RegExp('\b' + word + '\b', 'ig'))
  alert(instancesOfWord)
}
findWord('car', 'Carl went to buy a car but had forgotten his credit card.')

Здесь мы создаем динамический шаблон на основе значения аргумента word. Функция возвращает количество совпадений полного слова word (то есть не являющегося частью других слов) в строке. В нашем примере car встречается один раз, а слова Carl и card игнорируются.

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

#полезно

Использование GPT-3 для объяснения работы кода

Языковая модель ИИ GPT-3 способна генерировать объяснение того, как работает код. Она поразительно эффективна в этом: ее обучающий набор включает огромное количество исходного кода. Делимся статьей, где автор демонстрирует работу GPT-3.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Вы можете обманывать область видимости

Мы можем заставить нашу функцию считать, что она выполняется в другой области видимости, которая отличается от ее нормального состояния. Для этого используется встроенный метод call() для вызова функции:

var animal = 'dog';
function getAnimal(adjective) { alert(adjective+' '+this.animal); };
var myObj = {animal: 'camel'};
getAnimal.call(myObj, 'lovely'); //Выдаст сообщение 'lovely camel'

Здесь функция выполняется не в window, а в myObj, что определяется первым аргументом при вызове метода call. По существу метод call() имитирует ситуацию, что наша функция является методом myObj. Обратите внимание, что все переданные аргументы после первого в метод call() передаются в нашу функцию - здесь lovely становится значением аргумента adjective.

#методы

10 типичных ошибок в коде на JavaScript

Делимся статьей, где автор рассказывает про типичные ошибки в коде. К ним относятся: использование “=” вместо “==”; неверное форматирование вывода; неточная работа с дробными числами; ненумерованные индексы в массиве.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Firefox читает и возвращает значение цвета в формате RGB, а не hex

Непонятно, почему Mozilla так делает. Определенно, из JavaScript удобнее работать с форматом hex, а не RGB. Например:

<!--
#somePara { color: #f90; }
-->
 
Текст

<script>
var ie = navigator.appVersion.indexOf('MSIE') != -1;
var p = document.getElementById('somePara');
alert(ie ? p.currentStyle.color : getComputedStyle(p, null).color);
</script>

Большинство браузеров выведут ff9900, а Firefox - rgb(255, 153, 0). Нужно использовать функцию JavaScript для конвертации RGB в hex.

Обратите внимание, что в данном случае мы говорим о вычисляемом цвете, а не о том, как он определяется для элемента. Также IE имеет отличный метод для вычисления стилей.

Метод jQuery css() возвращает значение, определяемое в стиле для элемента. Поэтому, для действительного значения нужно использовать getComputedStyle и currentStyle.

#полезно

Лайфхаки для улучшения кода

Делимся статьей, где автор демонстрирует полезные лайфхаки для улучшения кода. К ним относятся опциональны цепочки, оператор нулевого слияния, динамический импорт и другие.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

9. 0.1 + 0.2 !== 0.3

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

Для того чтобы преодолеть данный казус есть два метода (выбор за вами):

• Конвертирование значений в целые, вычисления, а затем обратная конвертация к десятичным дробям.
• Построение логики так, чтобы работать с диапазоном чисел, а не точным значением.

Например, вместо такого кода:

var num1 = 0.1, num2 = 0.2, shouldEqual = 0.3;
alert(num1 + num2 == shouldEqual); //Выдаст сообщение 'false'

Можно построить выражение так:

alert(num1 + num2 > shouldEqual - 0.001 && num1 + num2 < shouldEqual + 0.001); //Выдаст сообщение 'true'

В данном примере результат сложения 0.1 + 0.2 оценивается как попадание в диапазон чисел около 0.3 с точностью 0.001.

#полезно

Быстрая сортировка

QuickSort — это алгоритм «разделяй и властвуй». Он выбирает элемент в качестве опорного элемента и разбивает заданный массив вокруг выбранного опорного элемента. Существует много разных версий quickSort, которые по-разному выбирают точку опоры. Данная статья поможет разобраться с алгоритмом.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Undefined может быть Defined

Звучит, конечно, странно, но undefined не является зарезервированным словом в JavaScript, хотя и имеет специальное значение для выявления неопределенных переменных:

var someVar;
alert(someVar == undefined); //Выдаст сообщение 'true'

На первый взгляд все отлично. Но:

undefined = "Я имею значение!";
var someVar;
alert(someVar == undefined); //Выдаст сообщение 'false'!

#полезно

Делаем эффектную фотогалерею на сайте

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

flat

Это метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными с вышестоящим массивом до заданной глубины.

const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];

Это очень полезная фича, особенно если вы хотите выровнять вложенный массив с вышестоящим. Но если уровень вложенности вашего массива больше единицы, одноразовый вызов flat не сможет полностью выровнять массивы. Тогда для flat можно задать параметр глубины, который укажет на то, какой уровень вложенности вы хотите охватить, чтобы выровнять массивы.

const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]];
crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8];

Чем глубже вы погружаетесь в массив, тем больше вычислительного времени потребуется для его выравнивания. Обратите внимание, что IE и Edge не поддерживают эту функцию.

#методы

Map против Set

Set — это множество данных коллекции, которое должно состоять из уникальных значений. Map — это коллекция ключ/значение. Map и Set имеют схожие методы; к ним относятся .has(), .get(), .delete() и .size(). Данная статья рассказывает, когда нужно использовать Map и Set.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

flatMap

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

const arr = ["it's Sunny in", "", "California"];
arr.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Разница между flat и flatMap заключается в том, что во flatMap вы можете поместить пользовательскую функцию для управления каждым значением. Кроме того, в отличие от flat, flatMap выравнивает только массивы с уровнем вложенности 1. Возвращаемое значение должно быть типом массива. Это может быть очень полезно, если вы должны что-то сделать, прежде чем выровнять массив.

#методы

Сканер предварительной загрузки

Один упускаемый из виду аспект оптимизации скорости страницы включает в себя знание внутреннего устройства браузера. Браузеры делают определенные оптимизации для повышения производительности способами, которые разработчики не могут сделать. В данной статье автор рассказывает про сканер предварительной загрузки и пропуск невидимого контента.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Числовые разделители

Когда вы присваиваете переменной большое числовое значение, вас не смущает вопрос насколько оно большое и правильно ли вы его написали? Эта фича позволит вам поставить знак «подчеркивание» между цифрами, чтобы вам было проще подсчитать их количество в числе.

1_000_000_000 // Ah, so a billion
101_475_938.38 // And this is hundreds of millions
let fee = 123_00; // $123 (12300 cents, apparently)
let fee = 12_300; // $12,300 (woah, that fee!)
let amount = 12345_00; // 12,345 (1234500 cents, apparently)
let amount = 123_4500; // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500
let budget = 1_000_000_000_000;
// What is the value of budget? It's 1 trillion!
//
// Let's confirm:
console.log(budget === 10 ** 12); // true

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

#полезно

CORS

Совместное использование ресурсов различными источниками (CORS) — это механизм безопасности на основе HTTP, который контролируется и применяется клиентом (веб-браузером). Это позволяет службе (API) указывать любой источник, кроме своего собственного, из которого клиент может запрашивать ресурсы. Делимся статьей, где автор знакомит с CORS.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Top-level await

Мотивация для внедрения этой функции заключалась в том, что когда вы импортируете модуль (import) с асинхронной (async) функцией, выходные данные этой асинхронной функции не определены (undefined).

// awaiting.mjs
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);

Представим себе два файла. Выходные данные (output) могут быть неопределенными (undefined), если они вызываются прежде чем выполнены Promises tasks.

// usage.mjs
import { output } from "./awaiting.mjs";
export function outputPlusValue(value) { return output + value }
console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);

usage.mjs не выполнит ни одного из утверждений в нем, пока await'ы в awaiting.mjs не дождутся разрешения своих Promises.

#функции

Свои правила для ESLint

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Нулевое слияние для JavaScript

Все мы часто писали такой код:

const obj = {
name: 'James'
};
const name = obj.name || 'Jane'; // James

Если obj.name является ложным, возвращается «Jane», а 'undefined' возвращаться не будет. Но проблема в том, что пустая строка ('') также будет считаться ложью в этом случае. Так что мы должны переписать код снова, как показано ниже.

const name = (obj.name && obj.name !== '') ? obj.name : 'Jane';

Каждый раз писать такой код – это головная боль. Эта фича позволяет нам проверять только null и undefined.

#полезно