Инструмент недели — CSS Animation Generator.

Этот сайт позволяет легко и наглядно создавать анимации с помощью удобного интерфейса.

Настраиваете ключевые кадры, длительность, задержку и тип анимации, а генератор сразу выдаёт готовый CSS или JS код.

Попробовать можно тут: angrytools

#css

Читать полностью…

Как оставаться в тренде и не выгорать?

Фронтенд — это та сфера, где чуть ли не каждую неделю появляется что-то новое. Легко потеряться в бесконечном потоке фреймворков и библиотек. Вот несколько основных принципов, которые помогут прокачиваться и не выгореть:

1. База решает
Освой фундамент: HTML, CSS, JavaScript. Понимание основ позволит легко переключаться между фреймворками и библиотеками.

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

3. Практика через пет-проекты
Изучил новую технологию? Закрепи её на практике. Создай небольшое приложение или контрибуть в open-source. Это даст реальный опыт, а не просто "прочитанную статью".

4. Окружение решает
Ты уже сделал шаг в правильном направлении, подписавшись на мой канал 😉 А ещё можно вступить в наш чат(тык), чтобы общаться с единомышленниками, делиться опытом и задавать вопросы. Плюс, не забывай участвовать в митапах и конференциях — это отличный способ узнать о новинках и найти менторов.

5. Баланс между кодом и отдыхом
Регулярные перерывы и хобби вне программирования помогут избежать выгорания.

#career #Продуктивность #BestPractices

Читать полностью…

Предлагаю сегодня отдохнуть и немного похихикать.
Может у кого-то есть совпадения?)

Читать полностью…

А вы знали про CSS свойство caret-color?

Что делает caret-color?
Это свойство меняет цвет мигающего курсора в текстовых полях (<input>, <textarea>).

Курсор будет зеленого цвета:

input {
  caret-color: lime;
}

На что обратить внимание?
— caret-color: transparent; скрывает курсор совсем.
— Работает во всех современных браузерах, кроме IE.
— Сочетается с @keyframes.

Подробнее про поддержку - caniuse.

#CSS

Читать полностью…

Привет! Продолжаем 🧑‍💻

Ранее мы уже обсуждали(тык) метод call, который позволяет управлять контекстом исполнения функции. Теперь разберём метод apply. Они похожи, но есть одно ключевое отличие: apply передаёт аргументы не по отдельности, а в виде массива.

Синтаксис:

functionName.apply(thisArg, [arg1, arg2, ...]);

- thisArg — объект, который будет использоваться в качестве this.
- [arg1, arg2, ...] — массив аргументов, передаваемых в функцию.

Пример использования

function greet(city, country) {
  console.log(`Привет, ${this.name} из города ${city}, ${country}!`);
}

const person = { name: 'Анатолий' };

// Передаём массив аргументов
greet.apply(person, ['Москва', 'Россия']);  
// Привет, Анатолий из города Москва, Россия!

Метод apply устанавливает this в контексте объекта person, а аргументы передаются массивом.

Разница между call и apply
Оба метода позволяют задать this, но передача аргументов отличается:

greet.call(person, 'Москва', 'Россия');  // аргументы передаются отдельно
greet.apply(person, ['Москва', 'Россия']);  // аргументы передаются массивом

Итог
Метод apply — это способ передавать this и массив аргументов в функцию. В отличие от call, он подходит для ситуаций, когда данные уже собраны в массиве или заранее не известно количество аргументов.

Читать полностью…

Рабочая неделя подошла к концу 🥳 Надеюсь, вы успели закрыть все задачи и готовы к выходным 🍻

Всем хорошей пятницы и выходных! Берегите себя и не забывайте отдыхать 🫶

Читать полностью…

Кто-нибудь использовал псевдокласс :focus-within? Сегодня короткий пост о том, как он работает.

Что делает focus-within?
Этот селектор срабатывает, если элемент или любой его потомок находится в фокусе.

Пример
Простой пример, в котором форма плавно увеличивается при фокусе на любой дочерний фокусируемый элемент: CodePen

/* Стили применятся к форме, когда любой её дочерний элемент будет в фокусе */
.form:focus-within {
    border-color: dodgerblue;
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.5);
    background: #ffffff;
    transform: scale(1.05);
}

На что обратить внимание?
1. :focus-within работает со всеми фокусируемыми элементами.
2. Поддерживаются современные браузеры, кроме IE.

#CSS

Читать полностью…

На прошлой неделе мы разбирали(тык) метод call. Сегодня поговорим ещё об одном его применении — заимствовании методов.

Что такое заимствование методов?
Заимствование методов — это техника, при которой мы берём метод из одного объекта и используем его в другом, у которого этого метода нет. Такой приём пригодится, например, при работе с псевдомассивами (arguments, NodeList) или объектами, у которых отсутствуют нужные методы.

Заимствование методов массива
Бывает, что приходится работать с псевдомассивами, у которых нет методов массива.

Пример:

function logArguments() {
  Array.prototype.forEach.call(arguments, (arg) => console.log(arg));
}

logArguments(1, 2, 3); // 1, 2, 3

Что здесь происходит?
1. Array.prototype.forEach — это метод массива. Обычные массивы могут вызывать его напрямую.
2. arguments — это псевдомассив, у которого нет метода forEach.
3. Мы заимствуем forEach у массива, вызывая его через call.
4. call(arguments, callback) устанавливает this внутри forEach как arguments, и теперь каждый элемент передаётся в коллбэк, как если бы arguments был массивом.

Итог
Заимствование методов позволяет использовать функциональность встроенных объектов там, где её нет.

#JavaScript #interview

Читать полностью…

Все закончили работать? Надеюсь, что да 🥪

Как вам посты на этой неделе? Если понравились, то поддержите реакциями на этот пост и проставьте на прошлые, если вдруг не ставили.
Ваши реакции и комментарии — это лучшая мотивация продолжать ❤️

А ещё снова напоминаю, что у нас есть чат @TrueFrontenderChat 👉

Всем хороших выходных 🫶

Читать полностью…

Когда нам нужно сравнить строки с учетом локали, метод localeCompare может стать идеальным инструментом.

Что такое localeCompare?
Метод localeCompare сравнивает две строки с учетом локали, то есть с учетом специфики алфавита и правил сортировки в определенном языке или регионе.

Синтаксис:

str1.localeCompare(str2, locales, options)

- str1: первая строка, которую вы хотите сравнить.
- str2: вторая строка для сравнения.
- locales: (необязательный) строка или массив строк, представляющий локаль или локали, для которых будет выполнено сравнение.
- options: (необязательный) объект, который может включать такие параметры, как чувствительность к регистру и направление сортировки.

Как работает localeCompare?
Метод возвращает одно из следующих значений:
- 0, если строки равны.
- -1, если str1 меньше str2.
- 1, если str1 больше str2.

Пример использования:

const str1 = 'apple';
const str2 = 'banana';

console.log(str1.localeCompare(str2)); // -1 (apple < banana)

Параметры
В объекте options можно настроить дополнительные параметры:
- sensitivity: чувствительность к регистру и акцентам. Возможные значения:
- base: игнорирует различия в регистрах и акцентах.
- accent: игнорирует только различия в акцентах.
- case: игнорирует только различия в регистре.
- variant: чувствительно ко всем различиям.

Когда использовать localeCompare?
1. Когда вам нужно правильно отсортировать строки, учитывая языковые особенности (например, для сортировки списка имён в разных языках).
2. Если вам нужно сравнить строки с учётом специфики языка (например, "é" может быть приоритетнее "e" в французском языке).
3. В многоязычных приложениях localeCompare поможет правильно сортировать и сравнивать данные, поступающие от пользователя.

Пример сортировки фруктов по алфавиту:

const words = ['ЯблОко', 'АнАнАс', 'ёж', 'грушА'];

words.sort((a, b) => a.localeCompare(b, 'ru', { sensitivity: 'case' }));
console.log(words); // ['АнАнАс', 'грушА', 'ёж', 'ЯблОко']

- В этом примере мы сортируем список слов на русском языке.
- Мы используем локаль 'ru', чтобы корректно отсортировать слова с учетом русской сортировки.
- Параметр sensitivity: 'case' указывает, что регистр символов имеет значение при сравнении строк.

Итого
Метод идеален для сортировки и сравнения строк в многоязычных приложениях, поскольку учитывает правила сортировки и нюансы языка, такие как акценты или регистр.

#JavaScript #Intl

Читать полностью…

В JavaScript есть несколько методов, которые позволяют управлять контекстом исполнения функции. Один из них — это метод call. Что он делает и зачем он нужен?

call — это метод, который позволяет вам вызвать функцию с конкретным значением this и передать аргументы в неё. Простыми словами, он даёт возможность контролировать, в каком контексте будет выполняться функция.

Синтаксис:

functionName.call(thisArg, arg1, arg2, ...);

- thisArg — объект, который будет использован в качестве this в функции.
- arg1, arg2, ... — аргументы, которые передаются в вызываемую функцию.

Пример использования:

function greet() {
  console.log(`Привет, ${this.name}!`);
}

const person = {
  name: 'Иван'
};

// Вызовем функцию с использованием call, указав, что контекстом функции будет объект person
greet.call(person);  // Привет, Иван!

В этом примере метод call устанавливает this в контексте объекта person, что позволяет функции greet обращаться к свойствам этого объекта.

Передача аргументов через call:
Метод call может принимать не только контекст, но и дополнительные аргументы, которые будут переданы в вызываемую функцию. Например:

function sum(a, b) {
  console.log(a + b);
}

sum.call(null, 5, 3);  // 8

Здесь null в качестве первого аргумента указывает, что this не будет использоваться в функции sum, и просто передаются значения 5 и 3.

Итого
Метод call — это способ контролировать контекст исполнения функции. Это полезно в случаях, когда нужно явно указать, какой объект будет использоваться в качестве this.

Читать полностью…

Всем хорошего вечера и отличных выходных!

Новые посты будут на следующей неделе, а на выходных отдыхаем 🙃

Если у вас есть вопросы или пожелания, всегда можете написать в нашем чате(перейти) 🧑‍💻

Читать полностью…

Привет! А вы заметили, что вчера не было поста? Причину отсутствия я написал в нашем чате(тык).
Сегодня продолжаем посты! Представьте, что вам нужно создать сложную строку с переменными, многострочным текстом или даже HTML-разметкой. Раньше для этого приходилось использовать конкатенацию (+) и \n для переноса строк. К счастью, начиная с ES6, у нас есть шаблонные строки которые решают все эти проблемы.

Что такое шаблонные строки?
Шаблонные строки — это способ создания строк с использованием обратных кавычек (`). Они позволяют:
1. Вставлять переменные и выражения прямо внутри строки.
2. Разбивать строки на несколько строк без использования специальных символов.

Синтаксис:

текст ${выражение} текст

Примеры использования
1. Вставка переменных

const name = 'Кирилл';
const age = 42;

// Без шаблонных строк
console.log('Меня зовут ' + name + ' и мне ' + age + ' года.');

// С шаблонными строками
console.log(`Меня зовут ${name} и мне ${age} года.`);

Шаблонные строки упрощают вставку переменных

2. Многострочные строки

// Без шаблонных строк
console.log('Это первая строка.\n' +
            'Это вторая строка.\n' +
            'Это третья строка.');

// С шаблонными строками
console.log(`Это первая строка.
Это вторая строка.
Это третья строка.`);

Шаблонные строки поддерживают многострочный вывод без необходимости использовать \n

3. Выполнение выражений

const a = 10;
const b = 5;

console.log(`Сумма равна ${a + b}.`);
console.log(`Результат: ${a > b ? 'a больше b' : 'b больше a'}`);

Вы можете вставлять любые выражения внутри ${}

Преимущества шаблонных строк:
1. Код становится более понятным и компактным.
2. Легко вставлять переменные и выполнять выражения.
3. Удобство создания многострочных строк.
4. Шаблонные строки появились в ES6 и являются стандартом для современного JS.

Практический пример с HTML

 const user = {
  name: 'Кирилл',
  age: 42,
};

const html = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Возраст: ${user.age}</p>
  </div>
`;

document.body.innerHTML = html;

Результат: На странице появится карточка пользователя с его данными.


Небольшой интерактив
Вот исходные данные для нашего мини-задания:

const channelName = 'True Frontender'; // Название канала
const subscriberCount = 1087; // Количество подписчиков
const theme = 'Frontend'; // Тематика канала

Попробуйте создать шаблонную строку, которая выводит информацию о канале в таком формате:

Канал: True Frontender
Тематика: Frontend
Подписчики: 1087

#JavaScript #BestPractices #Practice

Читать полностью…

Привет! Отдохнули? А теперь можно и задачи порешать 👨‍💻

Сегодня у нас задача, которая проверит понимание работы блоков try, catch и finally. Я взял ее с собеседования на позицию мидла.

Рассмотрим следующую функцию:

function someFn() {
    try {
        if (Math.random() <= 0.5) {
            throw new Error("error");
        }
        return 1;
    } catch (e) {
        return 2;
    } finally {
        return 3;
    }
}

console.log(someFn());

Что выведет эта функция в консоль и почему?

Для того чтобы найти ответ, давайте разберем работу блоков try, catch и finally:

1. Блок try:
— В этом блоке выполняется код, который может вызвать ошибку.
— Если условие Math.random() <= 0.5 истинно, выбрасывается ошибка с помощью throw new Error("error").
— Если условие ложно, выполнение доходит до строки return 1.

2. Блок catch:
— Этот блок срабатывает, если в блоке try была выброшена ошибка.
— В нашем случае, если ошибка возникает, выполнение переходит в блок catch, где возвращается значение 2.

3. Блок finally:
— Блок finally всегда выполняется, независимо от того, произошла ли ошибка или нет.
— Если в блоке finally есть оператор return, он перезапишет любое значение, которое было возвращено ранее.


Что будет выведено?
Независимо от того, выполнился блок try или catch, значение, которое вернёт функция, всегда будет определяться блоком finally. Поскольку в блоке finally стоит return 3, именно это значение будет возвращено функцией.

Ответ:
console.log(someFn()); всегда выведет 3 .

#interview #JavaScript

Читать полностью…

Вью или Реакт? Вот в чем вопрос!

Настало время выяснить, какой фреймворк лучше: Vue или React? Запускаю опрос ниже, чтобы узнать ваше мнение)

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

Читать полностью…

Разберем одну из типичных задач с собеседования про мемоизацию.

Что такое мемоизация?
Мемоизация — это способ оптимизации, который позволяет хранить результаты вызова функции с определенными параметрами и повторно использовать их при одинаковых входных данных.

Задача:
Напишите функцию memoize, которая принимает одну функцию и возвращает новую функцию, мемоизирующую её вызовы.

Решение:

function memoize(fn) {
  const cache = {};  // Для хранения кэша

  return function(...args) {
    const key = JSON.stringify(args);  // Уникальный ключ для аргументов

    if (key in cache) {
      return cache[key];  // Возвращаем кэшированный результат
    }

    const result = fn(...args);  // Если нет в кэше — вычисляем результат
    cache[key] = result;  // Кэшируем результат

    return result;
  };
}

// Пример функции, для которой применяется мемоизация
const slowAdd = (a, b) => a + b;
const memoizedAdd = memoize(slowAdd);

console.log(memoizedAdd(1, 2));  // Будет вычислено и сохранено в кэш
console.log(memoizedAdd(1, 2));  // Результат взят из кэша, выполнено быстрее

Что происходит:
1. Мы создаем функцию memoize, которая принимает любую функцию.
2. Она возвращает новую функцию, которая при каждом вызове проверяет, был ли результат для этих аргументов уже вычислен.
3. Если результат уже в кэше, функция возвращает его сразу, что значительно ускоряет выполнение.
4. Если результата нет в кэше, функция вычисляет его через переданную функцию, сохраняет в кэш и возвращает.

#JavaScript #interview

Читать полностью…

Привет! Начнем эту неделю с TypeScript 🖼️

Когда-то давно мы уже разбирали утилити-тип Pick, а сегодня познакомимся с его антиподом — Omit.

Omit<T, K> позволяет исключить определённые свойства из типа.

Как он работает?
T — исходный тип.
K — ключи, которые нужно исключить. Они указываются в виде строки или объединения строк. Например:
— Для одного свойства: Omit<T, 'key'>.
— Для нескольких свойств: Omit<T, 'key1' | 'key2'>.

Пример:

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserContactInfo = Omit<User, 'id' | 'age'>;

Результат:

type UserContactInfo = {  
  name: string;
  email: string;
};

Получаем новый тип, который содержит только свойства name и age.

Кстати, про Pick можно почитать в этом посте(тык).

#typescript #interview

Читать полностью…

Сегодня у нас кастомный хук — useLatest. Он помогает избежать проблем с устаревшими данными в замыкании.

В чём проблема?
Когда передаём состояние в асинхронную функцию, оно остаётся таким, каким было на момент создания функции. В результате в setTimeout, setInterval или обработчиках событий получаем устаревшие значения.

const [count, setCount] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    console.log(count); // Всегда 0
  }, 1000);

  return () => clearInterval(interval);
}, []);

Решение через кастомный хук useLatest
1. Создадим кастомный хук:

function useLatest(value) {
  const ref = useRef(value);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref;
}

2. Теперь будем получать актуальное значение внутри useEffect:

const [count, setCount] = useState(0);
const countRef = useLatest(count);

useEffect(() => {
  const interval = setInterval(() => {
    console.log(countRef.current); // Всегда актуальное значение count
  }, 1000);

  return () => clearInterval(interval);
}, []);

Почему не просто useRef?
useLatest инкапсулирует всю логику в одном месте, что делает код чище и надёжнее.

#react #BestPractices

Читать полностью…

Джун? Проходишь собеседования? Вот одна из задач, которая может встретиться на собесе.

Задача:
Написать функцию, которая принимает бесконечное количество аргументов и возвращает массив, где каждое число умножено на 2.

Пример:

multiplyByTwo(1, 2, 3, 5, 10, 22);  
// [2, 4, 6, 10, 20, 44]

Решение через rest параметры

const multiplyByTwo = (...rest) => {
    return rest.map(item => item * 2);
};

Разбор:
1. ...rest собирает переданные аргументы в массив.
2. map() проходит по каждому элементу и умножает его на 2.


Решение с использованием call

function multiplyByTwo() {
  return Array.prototype.map.call(arguments, item => item * 2);
}

Разбор:
1. Внутри функции multiplyByTwo, arguments содержит все переданные аргументы.
2. Мы используем метод map через call с контекстом arguments, чтобы применить метод map к этому псевдомассиву.
3. Функция map проходит по каждому элементу и умножает его на 2.


Какое решение выбрать?
Здесь многое зависит от требований задачи и контекста. Однако в большинстве случаев предпочтительнее использовать первый вариант.

#JavaScript #interview

Читать полностью…

Сегодня особенный день, и хочется сказать пару слов о том, как девушки делают фронтенд (и не только) лучше 😘

— Как хороший UI, девушки делают мир вокруг эстетичнее.
— Никто так не умеет решать 10 задач одновременно, как они.
— В команде всегда есть та, кто вытянет проект на себе, даже если всё горит.
— Девушки привносят в индустрию креативность и нестандартные решения.
— Как бы ни менялись технологии и задачи, они всегда находят лучшее решение.

Коллеги, цените девушек и поздравьте их сегодня от души 🌹

Читать полностью…

Йопта, братва 😎 Завозим нормальный язык для нормальных пацанов. Хватит дрочиться с этим вашим JavaScript, вот вам ЙоптаScript — код, который понимает каждый уважающий себя разработчик.

Как эта дичь работает?
ЙоптаScript — это переводчик с понятного языка на этот ваш стандартный JS. Пишешь по-пацански — он делает красиво.

ясенХуй бабки внатуре 1000 нахуй  
вилкойвглаз (бабки поцик 500) жЫ  
  красноглазое.чмо("Красавчик, бабки есть, гуляем!") нахуй  
есть иливжопураз жЫ  
  красноглазое.чмо("Опять доширак... ну и похер.") нахуй  
есть

Чисто магия — он превращает это в обычный JS:

const бабки = 1000;  
if (бабки >= 500) {  
  console.log("Красавчик, бабки есть, гуляем!");  
} else {  
  console.log("Опять доширак... ну и похер.");  
}

Препарируем по косточкам
1. ясенХуй — объявляем переменную, как const.
2. вилкойвглаз — это if, проверяем расклад.
3. поцик — >=, типа, бабки либо есть, либо сосем лапу.
4. красноглазое.чмо() — console.log(), но по-пацански.
5. иливжопураз — else, если не фартануло.

Где глянуть?
GitHub
Онлайн-компилятор

Короче, если JavaScript тебя душит, бери ЙоптаScript и кодь по-пацански. Прогать можно не только с умом, но и с кайфом 🤙

#JavaScript #OpenSource

Читать полностью…

GitHub — это не просто репозитории, но и ваша визитная карточка. Круто оформленный профиль привлекает внимание и делает вас заметнее среди разработчиков.

📌 Как добавить README.md в профиль?
1. Создайте репозиторий с именем, совпадающим с вашим ником (например, github.com/your-username/your-username).
2. Добавьте в него README.md, и он появится в профиле.

📌 Генераторы профилей
— GitHub Profile Readme Generator
— ProfileMe.dev
— GPRM

Читать полностью…

Привет! Давно не было реакта. Давайте начнем эту неделю с него)

В React часто нужно привязывать id к элементам, например, для <label> и <input>. Хардкодить id или генерировать их вручную неудобно. В таких случаях поможет хук useId.

Как работает useId?
useId — это хук, который генерирует уникальный идентификатор, оставаясь предсказуемым при ререндере.

import { useId } from "react";

export function Form() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Имя:</label>
      <input id={id} type="text" />
    </div>
  );
}

Теперь id для <input> будет уникальным для каждого инстанса компонента, но при этом не будет меняться при ререндере, что важно для правильной работы формы.

Какие проблемы решает useId?
1. Предотвращает дублирование id, создавая уникальные идентификаторы для каждого экземпляра компонента.
2. Ререндеринг не меняет значение id.
3. Избавляет от необходимости хардкодить id, упрощая поддержку кода и предотвращая ошибки при масштабировании компонентов.

Когда использовать useId?
— Для <label> и <input>, чтобы корректно связать их
— Для ARIA-атрибутов (aria-labelledby, aria-describedby)
— Для генерации id в списках без конфликтов

Когда useId не подойдёт?
- Для глобальных id, которые должны быть одинаковыми в разных компонентах

Вывод
useId полезен в формах, сложных UI-компонентах, списках и ARIA-атрибутах. Он избавляет от необходимости хардкодить id и снижает вероятность дублирования.

#react #BestPractices

Читать полностью…

Каждый из нас хотя бы раз сталкивался с конструкторами в классах. Например, когда вы создаёте новый объект, используя new, конструктор автоматически инициализирует его свойства. Но знали ли вы, что до появления классов (ES6) в JavaScript существовали функции-конструкторы?

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

Что такое функция-конструктор?
Функция-конструктор — это обычная функция, которая используется для создания новых объектов. Она вызывается с помощью оператора new, и при этом:
1. Создаётся новый пустой объект.
2. Новый объект связывается с прототипом функции.
3. Выполняется код внутри функции, где this ссылается на созданный объект.
4. Возвращается созданный объект.

Пример:

function Car(model, year) {
  this.model = model;
  this.year = year;

  this.info = function() {
    console.log(`Модель: ${this.model}, Год: ${this.year}`);
  };
}

const myCar = new Car('Tesla', 2023);
myCar.info(); // Модель: Tesla, Год: 2023

Факт:
Если забыть написать new, this будет указывать на глобальный объект(window).

Пример ошибки:

function Car(model, year) {
  this.model = model;
  this.year = year;
}

const car = Car('Tesla', 2023); // Забыли new
console.log(car); // undefined
console.log(window.model); // 'Tesla' (в браузере)

Используйте строгий режим, который вызывает ошибку, если this используется без new.

Важно:
1. Вместо того чтобы определять методы внутри самой функции-конструктора, лучше добавлять их в прототип. Это экономит память, так как методы будут созданы один раз для всех экземпляров.

function Car(model, year) {
  this.model = model;
  this.year = year;
}

Car.prototype.info = function() {
  console.log(`Модель: ${this.model}, Год: ${this.year}`);
};

2. Не забывайте про соглашения из этого поста(тык)
3. Используйте классы, если возможно. Классы — это более современный и читаемый способ создания объектов. Они скрывают детали работы с прототипами и делают код более понятным.

Подведем итоги
Функции-конструкторы — это инструмент, который позволяет создавать объекты одного типа. Однако для их правильного использования важно соблюдать следующие соглашения:
— Используйте заглавные буквы для именования.
— Добавляйте методы в прототип, а не в саму функцию.
— Не забывайте про new при вызове функции.
— Предпочитайте классы для более современного подхода.

#BestPractices #JavaScript #interview

Читать полностью…

Нашел классную демку на чистом CSS. Сам никогда не умел такие штуки верстать и всегда впечатляюсь возможностями CSS. Возможно, у кого-то есть интересные примеры или свои работы? Делитесь в комментариях ☕️

Демо: CodePen 😮

Читать полностью…

Привет! Стартуем неделю с решения задач 🎹

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

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

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

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

Реализация:

const debounce = (func, timeout) => { // 1
    let timer;
    return (...args) => {
        clearTimeout(timer); // 2
        timer = setTimeout(() => { 
            func.apply(this, args); // 3
        }, timeout);
    };
}

Разбор кода:
1. В качестве параметров передаем функцию (func) и время задержки (timeout)

2. clearTimeout и setTimeout. Каждый раз, когда происходит новое событие, мы очищаем старый таймер с помощью clearTimeout(timer), чтобы отменить выполнение предыдущей функции. Затем мы устанавливаем новый таймер с помощью setTimeout, который вызовет функцию после задержки.

3. Используем apply(this, args) для того, чтобы вызвать переданную функцию с тем же контекстом (this), который был в момент вызова обернутой функции. Это важно, если func использует this, например, в методах классов.

Пример использования:

const handleSearch = (query) => {
    console.log(query);
};

const debouncedSearch = debounce(handleSearch, 500);

document.getElementById('search-input').addEventListener('input', (e) => {
    debouncedSearch(e.target.value); // Вызовем функцию только через 500 мс после последнего ввода
});

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

#JavaScript #algorithm #interview

Читать полностью…

Сегодня о концепции, которая уже сейчас вызывает много обсуждений – signals. Что это такое, почему это может изменить ваш подход к управлению состоянием.

Что такое Signals?
Signals – это реактивные примитивы, позволяющие:
1. Декларативно хранить состояние. Вместо традиционных хуков, таких как useState или useEffect, вы работаете с сигналами, которые автоматически отслеживают изменения.

2. Минимизировать лишние перерисовки. Обновляются только те компоненты, которые непосредственно зависят от изменившегося значения.

3. Упростить логику обновления интерфейса. Благодаря более явной зависимости между данными и представлением, ваш код становится чище и понятнее.

Такой подход уже применяется в фреймворках, как SolidJS или Preact, и его адаптация для React открывает новые возможности для повышения производительности и удобства разработки.

Как использовать Signals в реакте?
1. Установите пакет @preact/signals-react.
2. Настройте вашу сборку или используйте хук useSignals
3. Импортируйте функцию signal из пакета и создайте реактивное значение:

import React from 'react';
import { signal } from '@preact/signals-react';

const count = signal(0);

function Counter() {
  return (
    <div>
      <h3>Счетчик: {count.value}</h3>
      <button onClick={() => count.value++}>Увеличить</button>
    </div>
  );
}

export default Counter;

В этом примере:
1. Функция signal(0) создаёт реактивное значение count с начальным значением 0.
2. Компонент перерисовывается автоматически при изменении count.value, избавляя вас от необходимости использовать setState или другие хуки для управления обновлением UI.

Итог
Пакет @preact/signals-react предлагает новый способ управления состоянием, позволяя создавать более декларативный и эффективный код за счёт автоматического и точечного обновления компонентов.

Документация по установке тут https://github.com/preactjs/signals/tree/main/packages/react

#react #Perfomance #JavaScript

Читать полностью…

Сегодня о том, как правильно клонировать объекты в JS.

При обычном (поверхностном) клонировании создаётся новый объект, но ссылочные типы данных (массивы, вложенные объекты и т.д.) всё ещё будут ссылаться на исходные данные. Если изменить что-то в скопированном объекте, это может повлиять на оригинал.

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

Способы глубокого клонирования:

1. JSON.stringify + JSON.parse
Этот метод простой и часто используется, но имеет ограничения:

const original = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(original));

console.log(clone); // { a: 1, b: { c: 2 } }

Недостатки:
— Проблемы с циклическими ссылками.
— Нельзя клонировать специальные типы данных, такие как Date, Map, Set и т.д.

2. Рекурсивное клонирование
Можно написать свою функцию для глубокого клонирования:

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;

  const copy = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepClone(obj[key]);
    }
  }

  return copy;
}

const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);

console.log(clone); // { a: 1, b: { c: 2 } }

Недостатки:
— Требует больше кода.
— Может быть медленнее для больших объектов.
— Не поддерживает циклические ссылки

3. structuredClone
Это современный способ глубокого клонирования, доступный через метод structuredClone. Он встроен в JavaScript и поддерживает большинство типов данных, включая Date, Map, Set и даже циклические ссылки.

const original = { a: 1, b: { c: 2 }, d: new Date() };
const clone = structuredClone(original);

console.log(clone); // { a: 1, b: { c: 2 }, d: Date }

Недостатки:
— Не поддерживается во всех старых браузерах (например, IE и старые версии Safari).


Важно помнить 🫣
Глубокое клонирование может быть ресурсоёмким для очень больших объектов, поэтому будьте осторожны

#JavaScript #BestPractices #Perfomance

Читать полностью…

Всем хорошей пятницы и выходных!
Заканчивайте работать и учиться программированию. Проведите этот вечер со второй половинкой или с собой любимым ❤️

А еще напоминаю, что посты возобновятся в понедельник. На выходных у меня выходной 🏝

Читать полностью…

Как правильно указывать источник цитаты? Со стороны семантики будет правильно использваит cite. В этом посте постараемся разобраться как его использовать.

Что такое тег <cite>?
Тег <cite> предназначен для обозначения названия какого-либо произведения или источника. Это может быть:
— Книга
— Статья
— Ресурс в интернете
— Исследовательская работа

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

Пример использования:

<p> В своем посте автор ссылается на канал <cite>True Frontender</cite>, где подробно рассматриваются вопросы фронтенда. </p>

Нюансы и ошибки при использовании <cite>:
1. Тег <cite> следует применять для обозначения названий произведений или источников информации. Его не стоит использовать для выделения имен авторов или других текстовых фрагментов, не являющихся названиями.
2. <cite> помогает поисковым системам и вспомогательным технологиям (например, экранным ридерам) понять, что данный элемент содержит информацию об источнике.
3. В HTML существует также атрибут cite, который используется с тегами <blockquote> и <q> для указания URL источника цитируемого материала. Он никак не связан с тегом <cite>, предназначенным для оформления названий произведений.

Итого. Тег <cite> помогает:
- Обозначить названия произведений и источников информации.
- Улучшить доступность и структурированность страницы.
- Предоставить поисковым системам дополнительную информацию для более качественной индексации.

Читать полностью…