Статьи с тегом «JavaScript»

FrontendJavaScript

Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.
FrontendCSSHTMLJavaScripta11y

Переходите на сторону light-dark()

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

Улучшение производительности с делегированием событий

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

Различные (и современные) способы переключения контента

Давайте уделим немного времени рассмотрению Dialog API, Popover API и остальных. Рассмотрим, когда лучше использовать каждый из них в зависимости от требований. Модальные или немодальные? JavaScript или чистый HTML/CSS? Не уверены? Не волнуйтесь, мы разберёмся во всём этом.
JavaScript

Обзор наследования в JavaScript

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

Недостатки JavaScript

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

Стрелочная функция vs. обычная функция в JavaScript

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

Как деструктуризация массивов может замедлить JavaScript код

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

Руководство по деструктуризации в JavaScript

Если вы проводите много времени, пробираясь через современный JavaScript, то, скорее всего, встречали столько многоточий (...), что даже самый задумчивый герой ролевых игр 90-х был бы посрамлён. Я не буду винить вас за то, что вы находите их немного запутанными. Конечно, я не виню вас за то, что находите что-то в JavaScript запутанным, но я всегда считал эти многоточия уникально не интуитивными с первого взгляда. Не помогает и то, что часто сталкиваетесь с этими маленькими чудаками в контексте деструктурирующего присваивания, которое само по себе является странным синтаксисом.
ReactJavaScripta11y

Используйте useId() вместо вручную созданных ID

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

Удаление дубликатов из массивов и строк в JavaScript

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

Сокращения JavaScript экономящие время

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

Проблемы экспорта по умолчанию в модулях JavaScript

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

Руководство по использованию Vite в React

Когда начинаете новый проект React, выбор правильных инструментов может сильно повлиять на рабочий процесс. Хотя такие инструменты, как Webpack, широко используются уже много лет, новые варианты, такие как Vite, предлагают более быстрые и эффективные альтернативы.
ReactJavaScript

useEffect в React

React стала одной из популярных библиотек для создания UI, а с появлением хуков в React 16.8 в распоряжении разработчиков появилось ещё больше мощных инструментов. Один из таких хуков — useEffect, позволяющий выполнять побочные эффекты в компонентах функций. Рассмотрим хук useEffect, его использование и лучшие практики.
JavaScriptTypeScript

Всё о циклах в JavaScript

В каждом языке программирования есть циклы. Циклы выполняют операцию (т. е. часть работы) несколько раз, обычно по одному разу для каждого элемента массива или списка, или просто повторяют операцию до тех пор, пока не будет выполнено определённое условие.
ReactJavaScript

Что нового в React 19: Новые возможности

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

React 19: Изменение в современной веб-разработке

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

Тесты поддержки браузерами современных веб-функций на JavaScript

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

AbortController в JavaScript

В веб-разработке управление асинхронными задачами имеет решающее значение для создания отзывчивых и эффективных приложений. Асинхронные операции, такие как получение данных с сервера или выполнение трудоёмких вычислений, часто требуют возможности отменить или прервать их до завершения. Здесь на помощь приходит AbortController, о котором и пойдёт речь.
JavaScriptFrontend

Проблема с new URL(), и как URL.parse() её решает

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.
FrontendJavaScript

Методы жизненного цикла веб-компонента

Вчера мы изучили различные способы инстанцирования веб-компонента. В статье был упомянут метод жизненного цикла connectedCallback(). Сегодня поговорим об остальных методах жизненного цикла веб-компонентов.
FrontendCSSJavaScript

Работа с CSS переменными

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

Пользовательские события CustomEvent

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

Функции высшего порядка в JavaScript

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

Объектно-ориентированное программирование в JavaScript

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

Понимание BOM в JavaScript: Быстрое объяснение с примерами

JavaScript — универсальный язык программирования, позволяющий разработчикам создавать динамичные и интерактивные веб-приложения. Хотя основная функциональность языка заключается в манипулировании веб-контентом с помощью объектной модели документа (DOM), JavaScript также предоставляет объектную модель браузера (BOM) для взаимодействия со средой браузера.
JavaScriptTypeScript

JSDoc: Надёжная альтернатива TypeScript

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

Как использовать файловую систему в Node.js

Веб-приложениям не всегда нужна запись в файловую систему, но Node.js предоставляет для этого обширный интерфейс прикладного программирования (API). Это может понадобиться, если вы ведёте логи отладки, передаёте файлы на сервер или с сервера, или создаёте инструменты командной строки.
JavaScript

Изучение новых методов массивов из ECMAScript 2023

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

Что такое цепочка прототипов в JavaScript

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

Очистите свой JavaScript: Избавьтесь от регулярных выражений

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

Очистите свой JavaScript: Трансформация условных операторов

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

Переменные среды/окружения в Node.js: Как правильно их установить

Вы когда-нибудь сталкивались с проблемой управления различными конфигурациями в Node.js приложениях? Хотелось бы иметь централизованный и организованный способ работы с такими секретами, как ключи API и учётные данные баз данных? Не ищите дальше! На помощь приходят переменные среды. В этой статье мы погрузимся в мир переменных среды в Node.js, рассмотрим их преимущества, примеры использования и лучшие практики эффективного управления ими.
JavaScript

О чем нам говорит удаление свойств объектов в JavaScript

Удаление свойств объекта в JavaScript — не самая интересная задача, но существует множество способов её решения, каждый из которых раскрывает фундаментальный аспект работы JavaScript. В этой статье Juan Diego Rodríguez рассматривает каждый из способов.
JavaScript

Проверка существования свойства объекта в JavaScript

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

Нюансы base64-кодирования строк в JavaScript

Кодирование и декодирование base64 — это распространённая форма преобразования двоичного содержимого для представления его в виде безопасного для веб-приложений текста. Она широко используется для URL данных, таких как встроенные изображения.
JavaScript

Шпаргалка по кодировке символов для JavaScript разработчиков

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

Введение в htmx

Современные веб-пользователи ожидают от одностраничных приложений (SPA) плавных и динамичных эффектов. Однако для создания SPA часто используются сложные фреймворки, такие, как React и Angular, которые могут быть сложны для изучения и работы с ними. Появилась htmx — библиотека, позволяющая по-новому взглянуть на создание динамических веб-приложений, используя такие возможности, как Ajax и CSS-переходы, непосредственно в HTML.
JavaScript

Руководство по оптимизации JavaScript файлов

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

Как реализовать пагинацию с помощью HTML, CSS и JavaScript

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

Ленивая загрузка в JavaScript

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

Свойства API-интерфейса IntersectionObserver

Вчера мы рассмотрели, как определить, когда элемент входит или выходит из области просмотра. Сегодня мы познакомимся с некоторыми подробностями, которые можно получить об этих элементах из объекта IntersectionObserverEntry.
JavaScript

Наследование в объектно-ориентированном программировании JavaScript

Наследование в объектно-ориентированном программировании (ООП) JavaScript — фундаментальная концепция, которая развивалась с течением времени, и в этой статье мы покажем, как она работает и как её использовать.
JavaScript

Знакомство с примитивными объектами в JavaScript (первая часть)

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

Использование нескольких селекторов в методах селекторов JavaScript

Один из моих любимых трюков ванильного JS заключается в том, что можно передать несколько селекторов в такие методы селектора JavaScript, как Element.querySelector(), Element.querySelectorAll(), Element.closest() и Element.matches().
JavaScript

JavaScript: Delay, Sleep, Pause, & Wait

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

JavaScript: Управление потоком

В этой статье мы подробно рассмотрим, как работать с асинхронным кодом в JavaScript. Мы начнём с обратных вызовов, перейдём к промисам и закончим более современными async/await. В каждом разделе будет предложен пример кода, изложены основные моменты, о которых следует знать.
JavaScript

JavaScript: Функциона­льное Выражение vs. Объявление Функции

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

JavaScript: Руководство по async/await, с примерами

Ключевые слова async и await представляют современный синтаксис JavaScript, помогающий обрабатывать асинхронный операции. В этом руководстве мы подробно рассмотрим, как использовать async/await для управления потоком данных.
JavaScript

JavaScript: Спасение из ада обратных вызовов

Ад обратного вызова реален. Разработчики часто рассматривают обратные вызовы как чистое зло, вплоть до того, что избегают их. Гибкость JavaScript совсем не помогает в этом. Но не обязательно избегать обратных вызовов. Хорошая новость в том, что есть простые шаги спасения от ада обратных вызовов.
JavaScript

JavaScript: Что такое функции обратного вызова/Callback

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

JavaScript: Более безопасное чтение и запись URL

Создание и манипулирование URL-адресами в виде строк может казаться безопасным, пока не сложатся общие ошибки. Но у современного JavaScript есть решение для этого, Конструктор URL, делает чтение, запись и изменение URL-адресов более безопасным и чистым.
JavaScriptFrontend

JavaScript: Руководство по localStorage

Cookie были единственным способом хранения временной и локальной информации, но теперь у нас есть localStorage. Он широко обсуждается и используется во множестве приложений JavaScript. В этой статье мы рассмотрим всё, что нужно знать о localStorage в JavaScript.
JavaScriptNodeJS

JavaScript: различие между require и import

Ключевое слово import используется для импорта привязок, которые экспортируются другим модулем, а функция require() используется для загрузки модуля в приложении Node.js. Эти два механизма похожи, но у них есть важные отличия о которых вам следует знать. Мы обсудим их в этой статье.
JavaScript

JavaScript: Понимание асинхронных вызовов

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

Сравнение Node.js с JavaScript в браузере

Способность понимать Node по-прежнему остаётся важным навыком, если вы фронтэнд разработчик. Deno появился как ещё один способ запуска JavaScript вне браузера, но огромная экосистема инструментов и программного обеспечения Node, означают, что в ближайшее время он никуда не денется.
JavaScriptFrontend

Зачем нужны веб-фреймворки и как обойтись без них

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

Возможности ES2022: блоки статической инициализации класса

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

JavaScript: Четыре хитрых концепции в одной строке

На днях коллега подошёл ко мне со строкой кода, которую нашёл на StackOverflow, и спросил, как это работает. И я подумал, что это отличный пример четырёх концепций от среднего до продвинутого уровня JavaScript, поэтому решил записать и обосновать своё объяснение.
JavaScript

Введение в деструктуризацию массивов в ES6

Деструктуризация в JavaScript — упрощенный метод извлечения нескольких свойств из массива путем извлечения структуры и разложения её на составные части с помощью присваивания, используя синтаксис, похожий на литералы массива.
JavaScript

Объяснение JSON простым языком

Долгое время XML был предпочтительным форматом данных для обмена между двумя точками. Затем, в начале 2000 года, был представлена JSON как альтернативный формат данных для обмена информацией. В этой статье вы узнаете всё о JSON. Вы поймёте, что это такое, как им пользоваться, и мы проясним несколько заблуждений.