Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков
🔮 10 полезных JavaScript-трюков
Деструктуризация с переименованием (алиасингом)
Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:
Зачем это нужно:
Улучшает читаемость кода.
Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.
Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.
Каррирование
Каррирование – техника преобразования функции с несколькими аргументами в серию функций, каждая из которых принимает только один аргумент. Это делает функции более гибкими и переиспользуемыми. Например, это обычная функция расчета скидки:
Та же функция, но с использованием каррирования:
Зачем это нужно:
Обеспечивает переиспользуемость функций.
Повышает читаемость и модульность кода.
Позволяет создавать новые функции на лету, используя уже существующие, например:
🤖🎓 Подтянуть свои знания по DS вы можете на нашем телеграм-канале «Библиотека DS для собеса»
debounce() и throttle()
Дебаунсинг и троттлинг – техники оптимизации, которые помогают контролировать частоту вызова функций. Они особенно полезны при работе с событиями, которые могут происходить очень часто, например, прокрутка страницы или ввод текста.
debounce() работает так:
Функция вызывается только после того, как прошло определенное время с момента последнего вызова.
Если функция вызывается снова до истечения этого времени, таймер сбрасывается.
В этом примере функция поиска будет вызвана только через 300 миллисекунд после того, как пользователь перестанет вводить текст. Это позволяет избежать лишних запросов к серверу при каждом нажатии клавиши:
throttle() работает так:
Функция вызывается не чаще, чем раз в заданный интервал времени.
Если попытка вызвать функцию происходит до истечения интервала, вызов игнорируется.
В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:
Мемоизация
Мемоизация – техника оптимизации, связанная с кэшированием промежуточных результатов сложных вычислений. Вместо того чтобы каждый раз заново решать сложную задачу, мы записываем ответ и в следующий раз просто смотрим в наш кэш:
Когда функция вызывается с определенными аргументами, мы сначала проверяем, вычисляли ли мы уже результат для этих аргументов.
Если да, мы возвращаем сохраненный результат.
Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.
Пример мемоизации при вычислении ряда Фибоначчи:
Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.
С мемоизацией каждое число Фибоначчи вычисляется только один раз. При повторном запросе того же числа результат берется из кэша, что значительно ускоряет работу.
Когда использовать мемоизацию:
Для функций с очень сложными вычислениями.
Когда функция часто вызывается с одними и теми же аргументами.
Когда функция возвращает один и тот же результат для одних и тех же входных данных.
Важно помнить, что мемоизация требует дополнительной памяти для хранения результатов, поэтому нужно учитывать этот компромисс между скоростью и объемом используемой памяти.
🐘🧩 Интересные задачи по PHP для практики можно найти на нашем телеграм-канале «Библиотека задач по PHP»
Proxy
Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:
Для чего еще можно использовать Proxy:
Валидация – проверка данных перед их установкой в объект.
Логирование – отслеживание использования и изменений свойств объекта.
Создание вычисляемых на лету свойств.
Безопасность – можно контролировать доступ к свойствам объекта.
Генераторы
Генераторы – особый тип функций в JavaScript:
Могут приостанавливать свое выполнение и возобновлять его позже.
Сохраняют свое состояние между вызовами.
Используют ключевое слово yield для возврата значений.
Пример итерации по свойствам объекта:
Преимущества генераторов:
Ленивые вычисления – вычисляют значения, когда они действительно нужны.
Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.
Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.
Создание кастомных итераторов для сложных структур данных.
Эффективное использование консоли
Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.
Ошибки и предупреждения:
Вывод табличных данных:
Группировка логов:
Измерение времени выполнения:
Условное логирование:
Трассировка стека:
🐍🎓 Подтянуть свои знания по Python вы можете на нашем телеграм-канале «Библиотека Python для собеса»
Структурированное клонирование
Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:
Структурированное клонирование стоит использовать, если:
Нужно создать полную, независимую копию сложного объекта.
Данные не должны изменяться (иммутабельность).
Необходимо избежать побочных эффектов при изменении данных.
Самовызывающиеся функции
Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:
Теговые шаблоны
Теговые шаблоны позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. Здесь, например, функция sanitize заменяет опасные символы на их безопасные HTML-сущности, предотвращая выполнение нежелательного кода:
Как можно использовать теговые шаблоны:
Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.
Форматировать числа, даты и т. д.
Безопасно формировать SQL-запросы, экранируя ввод.
Создавать теги для автоматического перевода строк с одного языка на другой.
🤖🧩 Интересные задачи по DS для практики можно найти на нашем телеграм-канале «Библиотека задач по DS»
📐 Единицы измерения высоты и ширины экрана в современном CSS
На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.
Large Viewport Units (lvh, lvw)
Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:
.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}
Small Viewport Units (svh, svw)
Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:
.header {
height: 10svh;
background-color: #642;
}
Dynamic Viewport Units (dvh, dvw)
Эти единицы измеряются с учетом динамических изменений видимой области при взаимодействии пользователя с интерфейсом (например, при прокрутке страницы или появлении виртуальной клавиатуры). Есть нюансы: использование этих единиц иногда приводит к неожиданным изменениям размеров контента и ухудшению производительности. Пример – элемент, который адаптируется к изменениям высоты видимой области:
.adjustable-element {
height: calc(100dvh - 10svh);
}
Привет!
Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:
Современные JavaScript-фреймворки и библиотеки
HTML5 и CSS3: новые возможности и трюки
Оптимизация производительности веб-приложений
Тестирование и отладка кода
Лучшие практики UX/UI
Новые веб-стандарты и браузерные технологии
Тренды в веб-дизайне и интерфейсах
Прогрессивные веб-приложения (PWA)
✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами
HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.
HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.
StyleShout предлагает широкий выбор шаблонов для различных целей, включая SaaS, мобильные приложения, блоги, лендинги, портфолио и агентства.
One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.
Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.
🐍🧩 Интересные задачи по Python для практики можно найти на нашем телеграм-канале «Библиотека задач по Python»
Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.
ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.
Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.
Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.
TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.
Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.
Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.
Just Good UI – собрание бесплатных и платных шаблонов Astro.
Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.
Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.
Landify – красивые и современные шаблоны Gatsby.
Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.
LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.
Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.
Templated – продуманные шаблоны на HTML/CSS и Bootstrap.
Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.
Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.
MonsterOne – современные шаблоны с несколькими страницами.
TemplatesJungle – шаблоны для бизнеса, агентств, сервисов, портфолио, электронной коммерции и других целей.
3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.
Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.
Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.
HTML Codex – широкий выбор шаблонов для бизнеса, курсов, продуктов, агентств, сервисов, портфолио, резюме и других целей.
W3Layouts отличается широким выбором шаблонов для бизнеса.
Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.
Untree – стильные шаблоны со сложными элементами.
Tailwind Toolbox – красивые шаблоны с продуманной структурой.
Pixelcave – современные шаблоны для сайтов и административных интерфейсов.
Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.
Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.
Red Pixel Themes – шаблоны с хорошим дизайном и многими полезными компонентами.
Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.
Treact – бесплатная библиотека React-шаблонов.
DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.
UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.
AdminMart – профессиональные шаблоны со множеством секций и компонентов.
WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.
Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.
KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.
🎮 Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека разработчика игр | Gamedev, Unity, Unreal Engine»
EaseTemplate – подборка современных Bootstrap-шаблонов.
BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.
CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.
Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.
JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.
Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.
Автор рассылки: Наталья Кайда
