Используйте простейшие рабочие решения

Занимаясь проектированием систем ПО, идите самым простым путём из возможных.

Причём эту рекомендацию можно применять на удивление широко. Я искренне верю, что так можно делать всегда. Эта техника подходит для исправления багов, обслуживания имеющихся систем и проектирования новых.

Многие инженеры, продумывая дизайн системы, представляют себе некий её «идеал»: что-то стройное, практически бесконечно масштабируемое, удобно распространяемое и так далее. Я же считаю, что это абсолютно ошибочный подход к проектированию ПО. Напротив, нужно вложить всё это время в глубокий анализ имеющейся системы, а затем реализовать простейшее рабочее решение.

👉

@frontend_mind

POV: Увлёкся работой

👉

@frontend_mind

Как реализуется ООП в JavaScript?

JavaScript поддерживает объектно-ориентированное программирование, и многие из его функций и методов основаны на этом принципе. ООП в JavaScript основан на прототипах, а не на классах. Каждый объект имеет прототип, который является ссылкой на другой объект. Когда вы обращаетесь к свойству или методу объекта, JS ищет его в самом объекте, а затем в его прототипе, и так далее, пока не найдет нужный элемент или не достигнет конца цепочки прототипов.

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

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

👉

@frontend_mind

Mastering Reactive JavaScript

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

👉

@frontend_mind

Loneliest character

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

Примеры:
"a b c" --> ["b"]
"a bcs d k" --> ["d"]
" a b sc p t k" --> ["p"]
"a b c de" --> ["b", "c"]
" a b c de " --> ["b"]
"abc" --> ["a", "b", "c"]

👉

@frontend_mind

‍Как можно создать уникальный ID?

В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований:

Генерация UUID
UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx.
Генерация с помощью crypto.randomUUID() (современный способ)
const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid
import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

Хеш-функции (SHA, MD5)
Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции.
SHA-256 через crypto.subtle
async function generateHash(input) {
const encoder = new TextEncoder();
const data = encoder.encode(input);
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

Генерация случайного идентификатора
Если нужна просто случайная строка, можно использовать Math.random().
Базовая генерация ID
const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()
function generateRandomId(length = 16) {
const array = new Uint8Array(length);
crypto.getRandomValues(array);
return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

Инкрементальные ID
Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик
let counter = 0;
function generateIncrementalId() {
return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

Хеширование строки (например, объекта)
Можно создать ID, основываясь на JSON-объекте.
function hashObject(obj) {
return JSON.stringify(obj)
.split("")
.reduce((hash, char) => {
return ((hash

@frontend_mind

Разбираемся с SVG Path!

SVG — мощный, но сложный инструмент для создания кривых и фигур. Статья объясняет основы: как работает атрибут d, команды M (перемещение) и L (линия), и как они связываются в цепочку инструкций, словно рисование пером. Погрузитесь в интерактивное руководство и начните творить!

👉

@frontend_mind

Хватит писать «чистый» код. Пора писать понятный код

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

👉

@frontend_mind

‍Что делает babel?

Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами.

Поддержка старых браузеров
Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде.

Поддержка современных стандартов (ES6, ES7, ES8...)
Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает.

Компиляция JSX
Babel преобразует JSX (используется в React) в обычный JavaScript.

Оптимизация и эксперименты
Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич.

Как это работает?
Babel делает три шага:

Парсинг – разбор кода в абстрактное синтаксическое дерево (AST).
Трансформация – изменение AST (например, замена const на var).
Генерация – создание нового кода из изменённого AST.

Пример работы Babel
Современный JavaScript (ES6+)
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice"));

После транспиляции Babel (ES5)
"use strict";

function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice"));

👉

@frontend_mind

Data Structures & Algorithms with JavaScript

Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.

👉

@frontend_mind

Find numbers with 3 divisors

Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).

Пример:
solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8

👉

@frontend_mind