О качественном Code Review

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

-> Читать полную статью

#codereview

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

Функции высшего порядка — это те, что могут принимать функции в качестве аргументов или возвращать их. Этот подход делает код более компактным и расширяемым, что, несомненно, способствует гибкости и эффективности кода.

Например, функции map, filter и reduce в JavaScript являются функциями высшего порядка. Их использование значительно повышает читаемость и модульность кода, делая его более поддерживаемым и понятным.

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

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

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

#javascript

В этой статье мы рассмотрим несколько ключевых вопросов, с которыми часто сталкиваются кандидаты на позицию frontend-разработчика.

Мы рассмотрим:
- Разницу между var, let и const
- Добавлением методов в прототип
- Базово про Event Loop
- Что такое каррирование с примером
- Что такое this и как он работает
- Бонусом вопрос для React разработчиков про возможность передать async функцию в useEffect

-> Читать полную статью

#interview #javascript

Семантика в HTML

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

Что такое семантика в HTML?
Семантика в HTML – это использование элементов и тегов для правильного описания структуры информации на веб-странице. Это помогает браузерам, поисковым системам и адаптивным устройствам понимать, как связан контент страницы.

Основные семантические элементы HTML:
<header>: Заголовок страницы или раздела
<footer>: Нижняя часть страницы, часто содержит контактную информацию или ссылки на социальные сети
<nav>: Навигационные ссылки
<main>: Основное содержимое страницы
<article>: Независимый контент, такой как пост в блоге или новость
<section>: Группировка связанных контентных элементов
<aside>: Боковая панель, часто содержит дополнительную информацию
<p>: Параграф текста
<h1> - <h6>: Заголовки различного уровня
<strong>: Выделение важного текста семантически важным образом
<em>: Курсивное выделение текста для придания эмоциональной или ударной ноты
<blockquote>: Цитаты
<q>: Короткие цитаты

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

Лучшие практики:
- Используйте семантику по назначению
- Избегайте излишнего вложенного уровня
- Тестируйте доступность вашего контента

Семантика в HTML – это ключевой элемент в создании доступных, оптимизированных и легко поддерживаемых веб-страниц. Помните о ее значимости при разработке каждого проекта!

#html

Чистые функции в JavaScript: Путь к предсказуемому коду

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

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

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

Преимущества использования чистых функций:
Тестируемость: Чистые функции легче тестировать, поскольку результат их работы зависит только от входных данных.
Предсказуемость кода: Благодаря отсутствию побочных эффектов код становится более предсказуемым и легче поддерживаемым.
Более простое масштабирование: Использование чистых функций упрощает масштабирование кодовой базы и снижает вероятность ошибок при изменениях.


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

#javascript

Вы знали про метод at() в JavaScript?

Когда дело доходит до работы с массивами в JavaScript, один из методов, который может оказаться весьма удобным, - это at()

Что это за метод?
at() - это метод, который получает элементы массива по их индексам. Он позволяет не только обращаться к элементам массива по положительным индексам, но и извлекать элементы с конца массива, используя отрицательные индексы.

Что если элемент не найден?
Если метод at() обратится к индексу за пределами массива или с отрицательным значением, которое выходит за его длину, он вернет undefined. Это удобно, так как избавляет от возможных ошибок и обрабатывает ситуации, когда элемент не существует по указанному индексу.

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

Когда следующий раз будете работать с массивами, обратите внимание на метод at()

#javascript

Часто ли вы прибегаете к использованию useMemo? В этой статье мы рассмотрим, когда и как правильно применять хук useMemo.

-> Читать статью

#react

Вспомним про Lodash

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

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

Кросс-браузерная совместимость и производительность: Одним из главных преимуществ Lodash является его способность обеспечивать стабильную работу кода на различных браузерах и платформах. Библиотека оптимизирована для повышения производительности и эффективной обработки данных, что позволяет избежать различных проблем совместимости и улучшить пользовательский опыт.

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

Безопасность и надежность: Lodash предоставляет методы для обработки данных, минимизируя риски ошибок и предотвращая проблемы с типами данных.

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

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

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

-> Читать статью

#react

Игры для изучения CSS: Интерактивные инструменты для освоения Flexbox, Grid и CSS-селекторов

- Flexbox Defense - это игра, в которой вы используете свойства Flexbox для защиты башни от врагов. Это не только полезно, но и интересно.

- Flexbox Froggy - в этой интерактивной игре игроки решают задачи, перемещая элементы так, чтобы они соответствовали определенным ячейкам. Отличный способ погрузиться в мир Flexbox с помощью визуального представления и интерактивной практики.

- Grid Garden - аналогичная "Flexbox Froggy" игра, но ориентированная на освоение принципов работы с сеткой Grid в CSS. Отличный способ узнать о возможностях Grid и посмотреть его на практике.

- CSS Diner - интерактивная игра, в которой вы "пообедаете" селекторами CSS, выбирая правильные элементы на странице. Это отличный способ улучшить понимание различных CSS-селекторов и их применения.

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

#css

В современной веб-разработке хранение данных в браузере играет огромную роль. На клиенте мы храним: токены авторизации, данные связанные с действиями пользователя и многое другое. Давайте вспомним/рассмотрим основные варианты для хранения данных в браузере.

-> Читать статью

Интересный опыт из моей практики: однажды я случайно очищал сессию каждого пользователя, заходившего на определенную страницу. Это произошло из-за перепутанных методов clear и removeItem 😅

#javascript

От блоков до гридов.

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

-> Читать полностью

#css

Каждый React-проект требует управления состоянием, но выбор стейт-менеджера может быть сложным. Один из вариантов, который привлекает внимание, это Recoil. В статье мы рассмотрим, как Recoil предлагает управлять данными в наших приложениях.
А какие стейт менеджеры вы используете на своих проектах?

-> Читать статью

#react

Type Guards в TypeScript

Type Guard - это конструкция в TypeScript, которая позволяет уточнять типы данных в процессе выполнения кода. Они позволяют нам проверять типы данных во время выполнения программы, что обеспечивает безопасность и гарантирует корректное взаимодействие с данными в динамических ситуациях.

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

interface Bird {
  fly: () => void;
}

interface Fish {
  swim: () => void;
}

function isBird(animal: Bird | Fish): animal is Bird {
  return (animal as Bird).fly !== undefined;
}

function move(animal: Bird | Fish) {
  if (isBird(animal)) {
    animal.fly();
  } else {
    animal.swim();
  }
}

Виды проверок:
1. typeof - проверка типа значения, как в JavaScript (typeof variable === 'string').
2. instanceof - проверка, является ли объект экземпляром класса.
3. in - проверка, существует ли свойство в объекте ('property' in object).

Преимущества использования Type Guards:
- Гарантируют корректные операции с данными во время выполнения.
- Позволяют работать с динамическими данными, сохраняя статическую типизацию.

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

#typescript

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

-> Читать статью

#codereview

А ты использовал :has() в CSS?

:has() - это псевдокласс, который позволяет выбирать элементы на основе их дочерних и соседних элементов. Он открывает возможности гибкого и точного выбора элементов с помощью CSS.

Примеры Использования:
С помощью :has() можно выбирать элементы, содержащие определенные дочерние элементы. Например:

button:has(> svg) { 
   /* Добавляем стили для кнопок, содержащих элементы svg */
}

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

.div:has(img:not([alt])) {
   /* Добавляем стили для div, содержащих изображения без атрибута alt */
}

:has() - это мощный инструмент, который открывает новые возможности для выбора элементов. Использование его в CSS позволяет создавать более гибкие, интерактивные и адаптивные приложения.

#css

При разработке приложений на React мы часто прибегаем к условному рендерингу. В этом посте мы рассмотрим одну из распространенных проблем при использовании оператора &&

Частая ошибка:
Один из распространенных способов условного рендеринга в React - использование оператра &&, например, array.length && <div/>. Этот подход позволяет отображать компонент только при выполнении определенного условия, в данном случае, при наличии элементов в массиве.

Проблема с нежелательным выводом:
Однако, если array.length равен 0, выражение array.length && <div/> вернет 0. Это приведет к нежелательному выводу в JSX, что может сбить с толку.

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

array.length > 0 ? <div/> : null

или явно привести к Boolean

Boolean(array.length) && <div/>

Итого:
Для более точного и предсказуемого управления условным рендерингом в React рекомендуется применять явные и четкие условия, избегая неявных преобразований и тем самым улучшая читаемость кода.

Мы уже рассматривали подходы к условному рендерингу в этом посте(тык)

#react #codestyle

Значения, которые React игнорирует в JSX

Знали ли вы, что в React есть значения, которые просто игнорируются при рендеринге JSX?

false, null, undefined и true могут быть использованы в JSX, но они не будут отображаться. Важно отметить, что некоторые "ложные" значения, например, число 0, всё же будут отображены React. Это обсуждалось в предыдущем посте(тык), где рекомендуется явно приводить их к типу boolean, чтобы избежать этой ситуации.

Если вы хотите, чтобы значения типа false, true, null или undefined были видны в выводе, перед их использованием их следует преобразовать в строки.

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

#react

Компоненты высшего порядка в React

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

Вероятно, вы уже сталкивались с React.memo(). Этот HOC представляет собой эффективный инструмент для предотвращения лишних перерисовок функциональных компонентов при неизменных пропсах.

Давайте напишем простой HOC, который обернет компонент и добавит отслеживание кликов по нему. Часто хорошей практикой является называть HOC с префиксом "with", что делает его назначение более понятным для других разработчиков.
Вот пример реализации:

// HOC добавляющий логику для отслеживания кликов
const withClickTracker = (WrappedComponent) => {
  const ClickTracker = (props) => {
    const handleClick = () => {
      console.log('Кликнули по компоненту:', WrappedComponent.name);
    };

    return (
      <div onClick={handleClick}>
        <WrappedComponent {...props} />
      </div>
    );
  };

  return ClickTracker;
};

// Компонент, который будет обернут HOC
const Button = ({ children }) => {
  return <button>{children}</button>;
};

// Обернем компонент Button с использованием HOC
const ButtonWithClickTracker = withClickTracker(Button);

// Используем новый компонент
const App = () => {
  return <ButtonWithClickTracker>Нажми меня</ButtonWithClickTracker>;
};

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

Итого:
Компоненты высшего порядка - это мощный инструмент для улучшения структуры вашего кода в React. Они позволяют создавать более гибкие, переиспользуемые и легко поддерживаемые компоненты. Понимание и умение использовать HOC может значительно улучшить разработку ваших приложений на React.

#react

Регулярные выражения

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

В JavaScript регулярные выражения представлены объектом RegExp. Они используются для поиска определенных паттернов в строках. Синтаксис регулярных выражений включает в себя различные символы и метасимволы, такие как ^, $, ., *, +, ?, [ ], { }, | и другие.

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

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

Итого:
Регулярные выражения - это мощный инструмент для работы с текстом. Они предоставляют возможность проводить сложные операции с текстом, такие как поиск, извлечение, замена и проверка на соответствие шаблонам.

#javascript

Мы часто используем метод filter при работе с массивами в JavaScript, но что если создать собственную версию этого метода?

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

Array.prototype.customFilter = function(callback) {
  let filteredArray = [];
  for (let i = 0; i < this.length; i++) {
    // В callback передаются три параметра: текущий элемент массива, его индекс и оригинальный массив
    if (callback(this[i], i, this)) {
      filteredArray.push(this[i]);
    }
  }
  return filteredArray;
};

Этот пример добавляет новый метод customFilter к прототипу массива. Он принимает функцию обратного вызова callback, которая определяет условие фильтрации элементов.

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

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.customFilter(item => item % 2 === 0);
console.log(evenNumbers); // Выведет: [2, 4]

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

Итого:
В этом посте мы рассмтрели процесс создания собственной версии метода filter для массивов. Это позволяет глубже понять внутреннее устройство метода и освоить приемы добавления кастомных методов к прототипам.

#javascript