D3.js за 100 секунд

Data-Driven Documents или D3 — это библиотека JavaScript для рисования SVG с данными. Это волшебство лежит в основе многих графиков, диаграмм и других визуализаций данных, которые вы видите сегодня в Интернете.

📺 YouTube

WebDEV #видео #js

🛠 JavaScript Quiz — проверьте свои знания, отвечая на вопросы по JavaScript. Подробные объяснения гарантированы.

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

💡 Проверка палиндрома в одну строку

Это не то чтобы какой-то особый трюк, но его полезно знать, когда начинаете работать со строками.

function checkPalindrome(str) {
    return str == str.split('').reverse().join('');
}

checkPalindrome('naman');

// Output: true

WebDEV #советы #coding #js

🔥 Лучшее на канале за неделю

1. D3.js за 100 секунд.

2. JavaScript Quiz — проверьте свои знания, отвечая на вопросы по JavaScript.

3. Деструктуризация массива.

WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Превращаем атрибуты объекта в массив атрибутов

Используем Object.entries(), Object.keys() и Object.values().

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);

// Output 
// (3) [Array(2), Array(2), Array(2)]
// 0: (2) ["a", 1]
// 1: (2) ["b", 2]
// 2: (2) ["c", 3]
// length: 3

Object.keys(obj);
// (3) ["a", "b", "c"]

Object.values(obj);
// (3) [1, 2, 3]

WebDEV #советы #coding #js

📖 Go Web Programming
🖋 Sau Sheong Chang, 2016

Go Web Programming научит вас создавать масштабируемые, высокопроизводительные веб-приложения на Go с использованием современных принципов проектирования. Вы узнаете, как реализовать шаблон проектирования внедрения зависимостей для написания тестовых пар, использовать параллелизм в веб-приложениях, а также создавать и использовать JSON и XML в веб-сервисах.

💾 Скачать книгу

WebDEV #book #Go #web

🛠 Parsel — парсер CSS-селекторов в два килобайта.

WebDEV #инструменты #css

💡 Избегайте множественных ИЛИ (||) условий

Оператор логического сложения (||) возвращает true, если хотя бы одно из условий истинно. Это очень полезная штука, но когда условий много, код выглядит неаккуратно:

if (fruit === 'apple' || fruit === 'orange' || fruit === 'banana' || fruit ==='grapes') {
    // код
}

Вместо использования дизъюнкции мы можем собрать все проверяемые значения в массив и воспользоваться встроенным методом Array.prototype.includes.

if (['apple', 'orange', 'banana', 'grapes'].includes(fruit)) {
   // код
}

Он вернет true, если аргумент совпадает хотя бы с одним элементом массива – именно то, что нам нужно. Это решение более наглядно и намного проще масштабируется при увеличении количества условий.

WebDEV #советы #coding #js

🔥 Лучшее на канале за неделю

1. Go Web Programming.

2. Parsel — парсер CSS-селекторов в два килобайта.

3. Превращаем атрибуты объекта в массив атрибутов.

WebDEV #test #css

Выберите правильный вариант 👇🏼

💡 Облегчаем доступ к глубоким свойствам объекта

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

if(obj && obj.address && obj.address.postalCode) {
    console.log(obj.address.postalCode)
}

Укоротим эту кучу кода с помощью оператора опциональной последовательности ?. (optional chaining).

console.log(obj?.address?.postalCode);

Он делает то же самое, но гораздо элегантнее.

WebDEV #советы #coding #js

Next.js 12 is a Beast

Обзор на Next.js версии 12. Он наполнен потрясающими функциями, такими как компилятор rust, параллельный режим, серверные компоненты и многое другое. Полный курс.

📺 YouTube

WebDEV #видео #js

🛠 MoreToggles — библиотека на чистом CSS со множеством приятных глазу переключателей.

WebDEV #инструменты #css

💡 Убираем проверки на null, undefined и пустую строку

JavaScript имеет мощную систему преобразования типов, фактически он может преобразовать любой тип в любой другой. Если речь идет о логических проверках, то все значения можно разделить на falsy (лживые), которые преобразуются в false, и truthy (правдивые), которые преобразуются в true.

if (first !== null || first !== undefined || first !== '') {
    let second = first;
}

Благодаря этому механизму нет нужды проверять на null, undefined и пустую строку отдельно – каждое из этих значений falsy, то есть преобразуется в false.

const second = first || '';

Вместо этого можно просто воспользоваться оператором логического сложения ||. Он вернет левое значение, если оно истинно, или правое в ином случае. Другими словами, правая часть выражения является значением по умолчанию.

WebDEV #советы #coding #js

💡 Подборка советов по коду в JS

▫️ Оператор опциональной последовательности

▫️ Оператор нулевого слияния

▫️ Spread syntax

▫️ Деструктуризация массива

▫️ Проверка палиндрома в одну строку

▫️ Превращаем атрибуты объекта в массив атрибутов

▫️ Избегайте множественных ИЛИ (||) условий

▫️ Облегчаем доступ к глубоким свойствам объекта

WebDEV #подборка #советы #coding #js

🔥 Лучшее на канале за неделю

1. Next.js 12 is a Beast.

2. MoreToggles — библиотека на чистом CSS со множеством приятных глазу переключателей.

3. Облегчаем доступ к глубоким свойствам объекта.

💡 Упрощаем конструкцию switch

Оператор switch очень напоминает данный пример, с большим количеством условий.

switch (number) {
  case 1:
     return 'one';
  case 2:
     return 'two';
  default:
     return;
}

Однако здесь недостаточно проверки на равенство, нужно еще вернуть определенное значение. Поэтому вместо массива мы можем использовать объект (map).

const data = {
  1: 'one',
  2: 'two'
};
data[num]

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

WebDEV #советы #coding #js