Катерина | Про Frontend

Сортировка: что делать, если sort даёт неожиданные результаты? 😬

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


🧩 Пример 1: Строки

Представим массив:

const animals = ['Медведь', 'Ёжик', 'Белка'];  

Применим sort и посмотрим результат:

console.log(animals.sort());  // [ 'Ёжик', 'Белка', 'Медведь' ]

На первый взгляд, результат кажется странным. Почему 'Ёжик' оказался в начале? ❔

Всё дело в том, что метод sort использует порядок Unicode, а в Unicode буква 'Ё' идёт до всех заглавных букв. Это не соответствует правилам русского языка, где 'Ё' идёт следом за 'Е'.

🧩 Пример 2: Сортировка чисел

Теперь возьмём массив чисел, записанных как строки:

const numbers = ['12', '11', '2'];  

Применим sort:

console.log(numbers.sort());  // ['11', '12', '2']  

Почему '2' оказалось в конце? Потому что sort сравнивает элементы как строки, а не как числа. Символ '2' в алфавитном порядке идёт после '1', поэтому результат выглядит некорректным для чисел.

Окей, исправим это с помощью кастомной функции сравнения:

console.log(numbers.sort((a, b) => a - b));  // ['2', '11', '12'] 

Теперь всё работает как ожидалось, но только для чисел.

А если нужна локализация?

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

Здесь на помощь приходит localeCompare. Основной материал отобразила на изображениях.

🧩 Применим его:

console.log(animals.sort((a, b) => a.localeCompare(b)));  // ['Белка', 'Ёжик', 'Медведь']  

Как итог, если вы работаете с простыми строками и числами, sort может быть достаточным. Но как только появляются нюансы локализации или строки с числами, лучше использовать localeCompare. 👍

Полезный материал:
👀 localeCompare
👀 Полноценный набор параметров для options

Новое видео уже на канале! 🎉

В этом видео я подробно рассказываю о свойствах, которые связаны с scrollbar, и с которыми я активно работаю.

Разбираю:
⏺️ scrollbar-gutter — как добавить отступы для лучшей читаемости,
⏺️ scroll-padding — настройка пространства вокруг контента,
⏺️ scroll-snap-type и scroll-snap-align — фиксируем элементы на нужных позициях,
⏺️ scroll-behavior — плавность прокрутки,
⏺️ и стилизация с ::-webkit-scrollbar.

Приятного просмотра! 😍

📹 Youtube
📹 Rutube - возникли сложности при загрузке, обновлю ссылку чуть позже
📹 VK video

Ну что ж, первый день конференции позади, а я — в полном восторге! Честно говоря, сколько бы не говорили, что раньше было лучше, мне сравнивать не с чем — это моё первое событие такого масштаба, и оно превзошло все мои ожидания. 😍

Я быстро вникаю не только в саму тему, но и поражаюсь тому, как профессионально выступают спикеры на сцене. Видно, что ребята готовились и продумывали всё до мелочей, а некоторые доклады остались в голове более чем надолго:
✔️ погружение в "Функциональное программирование" от Марата Зимнурова,
✔️ вдумчивое обсуждение "Мои данные — это мои данные, или Local-first decentralized web" от Павла Вострикова, и
✔️взгляд на "3 главных недостатка FSD после 3 лет использования" от Евгения Паромова.

Каждый из этих докладов запал мне в душу и чуть позже я очень постараюсь поделиться подробностями с вами!

А пока — мои ключевые выводы:
⏺️ Посещение конференций — это потрясающая возможность пополнить запасы энтузиазма и вдохновиться новыми идеями для проектов;
⏺️ Я сейчас влюблена в концепцию чистого кода и нашла для себя несколько интересных архитектурных приёмов, которые обязательно хочу внедрить в свою работу;
⏺️ И, пожалуй, самое классное — это атмосфера единства. В этот раз я как никогда сосредоточена на учёбе, но возможность переключиться и отвлечься на спонсорских площадках в перерывах между докладами даёт необходимое время на отдых и перезагрузку.

Впереди ещё много интересного, и я с нетерпением жду, что принесёт второй день! 😊

Завтра меня ждёт особенный день — мой первый очный визит на Frontend конференцию HolyJS, которая пройдёт в Питере, пусть пока и в роли слушателя! 🤭
На прошлой неделе я слушала первый этап — онлайн-формат, и это был довольно интересный опыт. Каждый доклад добавлял новых идей и механик для более глубокого изучения и внедрения их в реальные проекты.

Пока смотрела онлайн-доклады - успела понять несколько важных вещей:

✔️ Одного доклада недостаточно. Даже когда кажется, что всё понятно, прослушанный доклад — это только отправная точка. Настоящее понимание приходит, когда берёшь идеи и воплощаешь их в коде. Благодаря списку выбранных мной тем, я уже точно знаю, что попробую внедрить.

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

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

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

❔ Есть среди нас ещё кто-то, кто завтра будет на конференции?

Новое видео уже на канале! 🎉

В этом видео я рассматриваю три ключевых метода "ленивой" загрузки данных, которые помогут ускорить загрузку вашего сайта и улучшить пользовательский опыт:
⏺️ Как использовать нативный lazy loading для улучшения производительности.
⏺️ Преимущества и настройка Intersection Observer API.
⏺️ Как реализовать прогрессивные изображения и ускорить загрузку.

Приятного просмотра! 😍

📹 Youtube
📹 Rutube
📹 VK video

#youtube

Фон в виде шахматной доски ♟

На днях увидела реализацию шахматного узора на фоне, где для каждой клетки создавались отдельные <div>, окрашенные в разные цвета. Это была та еще задачка: вручную выстраивать сетку и перекрашивать квадраты через CSS. 😁 Однако, если знать возможности CSS, то можно обойтись без этого "леса дивов" и реализовать шахматный фон, используя всего лишь одно свойство background-image!

Что для этого надо?

.chessboard-background {
  background-color: #fff; /* Основной цвет */
  background-image: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 50px 50px;
  background-position: 0 0, 0 25px, 25px -25px, -25px 0;
}

А если разобраться?
✔️ Основной цвет: background-color: #fff; — это фоновый цвет, который задает цвет "светлых" клеток доски;
✔️ Создание клеток с помощью градиентов: В свойстве background-image указаны четыре слоя с linear-gradient:
⏺️ Первый слой создает черные клетки, начиная с верхнего левого угла и смещаясь на 45 градусов;
⏺️ Второй слой добавляет клетки, которые смещены в противоположном направлении (-45 градусов), добавляя вторую половину шахматного узора;
⏺️ Третий и четвертый слои формируют прозрачные участки для белых клеток, завершая узор;
✔️ Размер клеток: background-size: 50px 50px; — управляет размером каждой клетки. Здесь указано значение 50x50 пикселей для каждой клетки;
✔️ Смещение слоев: background-position с разными значениями обеспечивает корректное расположение градиентов, создавая шахматный узор.

Вот и всё! 🥳

Ещё необычные варианты для реализации фона:
☑️ Фон в клеточку: перейти
☑️ Фон в точку: изучить

Динамические имена свойств 🥸

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

➡️ Когда полезно?

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

function logEvent(event) {
  const timestamp = new Date().toISOString();
  return {
    [timestamp]: event,
  };
}

console.log(logEvent("User logged in")); // { '2024-11-11T09:19:04.939Z': 'User logged in' }

➡️ Что стоит учитывать?
✨ Одно из потенциальных затруднений с динамическими ключами – это возможность отсутствия свойства. Например, при доступе к object[dynamicKey] JavaScript не гарантирует, что этот ключ действительно есть в объекте, и вернёт undefined, если его нет;
✨ Когда ключи создаются на основе переменных, код становится менее предсказуемым для тех, кто читает его после. Поэтому, чтобы код оставался понятным, не стоит злоупотреблять динамическими свойствами и стоит документировать структуру данных.

Как итог, динамические свойства могут сэкономить вам кучу времени и упростить код, но только если использовать их с умом. 👍

P. S. Реализации для понимания упрощены :)

#javascript #теория