Привет 👋
Завтра наступает один из самых теплых и романтических дней в году - День Святого Валентина! В этот день принято дарить своим любимым не только внимание и заботу, но и небольшие знаки внимания. В этом году я предлагаю вам не ограничиваться бумажными открытками. Я подготовил для вас демо валентинки, сделанной с использованием HTML, CSS.
Посмотреть можно тут - JsFiddle(тык) 🫰

#javascript #html #css

Привет, фронтендеры! 👋

На этой неделе канал достиг первой тысячи подписчиков 🥳! Я не могу выразить всей своей радости от того, что каждый из вас нашёл что-то интересное для себя и подписался. Это по-настоящему мотивирует меня продолжать развивать этот канал.

Огромное спасибо за вашу активность! Ваши вопросы, комментарии и реакция делают этот канал живым. Я надеюсь, что будущие посты будут для вас интересными и полезными, а ваша активность будет и дальше мотивировать меня на создание новых постов)

Хочу напомнить, что под любым постом вы можете предложить тему для постов или предложить любые другие улучшения. Ваше мнение и ваши идеи крайне важны для меня, и я всегда открыт к вашим предложениям и идеям!😉

Спасибо вам за поддержку 🤗

С понедельником 💻! Сегодня разберем классику собеседований – реализацию последовательности Фибоначчи.

Что такое последовательность Фибоначчи?
Последовательность Фибоначчи – это ряд чисел, где каждое последующее число является суммой двух предыдущих. Начинается с 0 и 1. То есть, первые числа последовательности выглядят так: 0, 1, 1, 2, 3, 5, 8, 13, 21, и так далее.

Задача
Необходимо реализовать функцию fibonacci, которая принимает на вход число n и возвращает n-ое число последовательности Фибоначчи.

Алгоритм решения:
1. Проверяем, является ли n меньшим или равным 1. Если да, возвращаем n, так как первые два числа последовательности Фибоначчи — это 0 для n = 0 и 1 для n = 1.
2. Инициализируем переменные prev и cur значениями 0 и 1, соответственно, которые представляют первые два числа последовательности.
3. Задаем цикл for от 2 до n включительно для вычисления каждого следующего числа последовательности Фибоначчи.
4. В каждой итерации цикла вычисляем следующее число как сумму prev и cur.
5. Обновляем prev значением cur.
6. Присваиваем только что вычисленное следующее число переменной cur.
7. После завершения цикла возвращаем cur как n-ное число последовательности Фибоначчи.

Решение

function fibonacci(n) {
  if (n <= 1) return n;

  let prev = 0;
  let cur = 1;
    
  for (let i = 2; i <= n; i++) {
    const next = prev + cur;
    prev = cur;
    cur = next;
  }

  return cur;
}

На самом деле, у этой задачи есть разные варианты решения. Если у вас есть свой вариант решения, не стесняйтесь делиться им в комментариях!

#interview #javascript

Всем привет! 👋
Сегодня узнаем как при помощи CSS превратить обычный текст в элегантный макет с колонками, как в газете. Мы разберемся, как использовать свойства columns и column-rule, чтобы организовать содержимое страницы более привлекательно и читабельно.

Про свойства
Свойство columns в CSS позволяет легко разделить текст на несколько колонок, делая чтение на длинных страницах более комфортным. Это свойство является шорткатом для column-width (ширина колонки) и column-count (количество колонок), позволяя задавать их одной строкой.

.columns {
  columns: 2 200px; /* Ширина колонки 200px и количество колонок 2 */
  column-gap: 40px; /* Устанавливаем промежуток между колонками */
}

Свойство column-rule добавляет разделительную линию между колонками, что придает макету дополнительную изысканность и структуру. Оно работает подобно border, но применяется между колонками.

.columns {
  column-rule: 2px solid #333; /* Добавляет разделительную линию между колонками */
}

Посмотреть демо можно тут - JsFiddle(тык)

Заключение
Использование свойств columns и column-rule в CSS может значительно ускорить процесс создания адаптивных колонок.

#css

Привет 🤝! Сегодня мы разберем функцию compose. Возможно вам не стоит тащить ее в свой проект, так как чаще всего проще использовать готовое решение из библиотек, но будет полезно знать как она работает.

Что за функция compose?
compose - это функция высшего порядка, которая принимает на вход несколько функций и возвращает новую функцию. Эта новая функция, при вызове, запускает цепочку переданных функций так, что результат каждой функции передается как аргумент в следующую. Процесс начинается с крайней правой функции и продвигается к левой.
Это звучит сложно, но на деле все просто.

Пример реализации

function compose(...funcs) {
    return function(arg) {
        return funcs.reduceRight((acc, fn) => fn(acc), arg);
    };
}

// Пример использования
const multiplyBy2 = x => x * 2;
const add3 = x => x + 3;
const subtract4 = x => x - 4;

const doMagic = compose(multiplyBy2, add3, subtract4);

console.log(doMagic(5)); // Результат: 8

В этом примере мы создали три простые функции: multiplyBy2, add3, subtract4. Затем мы использовали compose, чтобы создать новую функцию doMagic, которая применяет эти функции в обратном порядке: сначала вычитает 4, затем добавляет 3, и, наконец, умножает результат на 2.

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

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

#javascript

Вемс тепирв😄! Начнем неделю с разбора не самой сложной, но одной из самых популярных задач. Мы будем работать с анаграммами.

Что такое анаграммы?
Анаграммы - это слова или фразы, полученные путем перестановки букв исходного слова или фразы. Например, "привет" и "тепирв" являются анаграммами.

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

Алгоритм решения:
1. Сначала обе строки приводятся к нижнему регистру и из них удаляются все символы пробелы. Это делается для того, чтобы избежать различий из-за регистра или пробелов.
2. Для каждой нормализованной строки создается объект, где ключи - это символы строки, а значения - количество их вхождений в строку. Функция buildCharCountMap использует метод reduce для преобразования массива символов строки в объект подсчета символов.
3. Если длины нормализованных строк различаются, то они точно не могут быть анаграммами, и функция возвращает false.
4. Для каждого символа из первой строки проверяется, совпадает ли количество его вхождений в обеих строках, используя созданные карты подсчета символов. Если для любого символа количество вхождений не совпадает, строки не являются анаграммами, и функция возвращает false.
5. Если все предыдущие проверки пройдены успешно, строки являются анаграммами, тогда функция возвращает true.

Решение

function isAnagram(str1, str2) {
  const normalize = str => str.replace(/\s+/g, "").toLowerCase();
  const buildCharCountMap = str => {
    return str.split('').reduce((acc, char) => {
      acc[char] = acc[char] + 1 || 1;
      return acc;
    }, {});
  };

  const normalizedStr1 = normalize(str1);
  const normalizedStr2 = normalize(str2);

  if (normalizedStr1.length !== normalizedStr2.length) {
    return false;
  }

  const str1CharCount = buildCharCountMap(normalizedStr1);
  const str2CharCount = buildCharCountMap(normalizedStr2);

  for (let char in str1CharCount) {
    if (str1CharCount[char] !== str2CharCount[char]) {
      return false;
    }
  }

  return true;
}

console.log(isAnagram("Привет", "тепирв")); // true
console.log(isAnagram("Привет", "Пока")); // false

Этот пример демонстрирует базовый подход к решению задачи об анаграммах. Мы нормализуем строки, удаляем не нужные символы, сравниваем их длины и подсчитываем количество каждого символа. Если все проверки прошли успешно, строки являются анаграммами.

А у вас есть идеи о том, как можно улучшить или изменить это решение? Или, может быть, у вас есть совершенно другой подход к решению? Делитесь своими мыслями и кодом в комментариях 💻

#javascript #interview

Привет, дорогие читатели!

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

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

Надеюсь на ваше понимание 🙏