JS

Вы рекомендовали использовать ключи -DE, в статье просто -D, в документации:

npm install webpack-dev-server --save-dev

Объясните, что делают различные флаги при установке пакетов -D -de -save-dev? Чем они отличаются? Что по факту делает этот флаг? Что будет если его не поставить при установке пакета?

Для обновления пакетов мы используем ключи -DE (их следует писать прописными). Это сокращённая запись.

D— псевдоним для -save-dev. Когда мы используем D, то подразумеваем, что пакет должен быть установлен в devDependencies (зависимости для разработки).

E— псевдоним для -save-exact. С помощью этого параметра фиксируем версию. Если им не воспользоваться, то рядом с версией пакета в package.json появится «крышечка», символ ^.

Вот и получается, что указание -DE равносильно применению --save-dev и --save-exact. Разницы нет никакой. Просто запись короче и проще запомнить, но это вкусовщина. Каждый делает, как нравится.

Дженерики (generic) помогают писать универсальный, переиспользуемый код, а также в некоторых случаях позволяют отказаться от any. Главная задача дженериков — помочь разработчику писать код, который одинаково будет работать со значениями разных типов.

Посмотрим на примере из реального мира.

Представьте завод по изготовлению автомобилей. Старый завод, который проектировался для сборки автомобиля определённой модели. На нём могут собирать только такую модель автомобиля, а если потребуется выпустить машину с немного другим кузовом, то придётся строить новый завод. Это неоптимальное решение. Если разные машины собираются одинаково, то лучше научиться собирать разные машины на одном заводе.

Добрый вечер. Объясните, пожалуйста, подробнее про type predicates в TS. В каких случаях их можно использовать. Например, когда к одному обработчику можно применить union type и в нем задать, например TouchEvent | MouseEvent. Для чего использовать in в type predicates? Спасибо.

Отвечает Игорь Антонов, автор курсов по JavaScript в Академии.

В JavaScript и TypeScript есть конструкции для проверки типа. Достаточно вспомнить ООП и оператор instanceof. Начнём немного издалека и посмотрим на такой код:

class Dog {}

class Cat {}

const keks = new Cat();
const buddy = new Dog();

function isCat(something) {
  if (something instanceof Cat) {
    return true;
  }
  return false;
}

Функция умеет отличать котов от собак, в ней объявлено два класса и функция isCat. Если аргументом передать keks, функция вернёт true. Для аргумента buddy результатом станет false. Проверка внутри функции реализована с помощью оператора instanceof.

Теперь вернёмся к TypeScript и взглянем на такой код:

type Dog = { 
  isBig: boolean;  name: string; 
}  

type Cat = {  
  lives: number;  name: string; 
}  

type Animal = Dog | Cat;  

function getAnimal(): Animal {
  return { isBig: true, name: "spike" };
}

Мы описали два типа (Dog и Cat), воспользовались типом объединения и вывели Animal. Ещё мы определи функцию getAnimal. Она позволяет получить объект для описания животного. Судя по форме объекта — это Dog.

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

Что дает автоматизация. Автоматизация экономит время разработчика, помогает найти и исправить ошибки. При этом создаются коды, которые экономят время браузера и ускоряют загрузку сайта.

Какие задачи могут быть автоматизированы. Например, минификация файлов (html, css, js), сжатие изображений, получение изображения определенных форматов (webp), сборка файла sprite.svg, сборка пакета приложения.

С помощью каких инструментов осуществляется автоматизация. Сообществом программистов созданы целые библиотеки программ для автоматизации. Также есть системы для лёгкого доступа к этим библиотекам и использования их в разработке новых программ и приложений. Одной из таких систем является система Node.js.

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

Иногда разработчики используют их в своей работе не задумываясь — просто могут не знать об этом. Например, когда вы создаёте механизм для получения разных вариантов карточек товаров, то невольно используете паттерн «Фабрика».

Паттерны упрощают разработку. Предположим, вы создаёте проект с нуля. Если вы используете для него самописную архитектуру, то потратите на работу больше времени. А если, например, используете архитектуру MVC, то сократите время на разработку и снизите вероятность появления ошибок в программе, к тому же новые сотрудники смогут быстрее присоединиться к работе и вникнуть в детали.

Для многих задач есть свой паттерн — нужно лишь выбрать подходящий шаблон проектирования и правильно его использовать.

Главные новинки — top-level await, объявления полей класса, .at () и hasOwn.

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

const response = await fetch('https://example.com');
const text = await response.text();

Два важнейших преимущества top-level await:

• Гарантия того, что модули не получат доступ к асинхронному импорту, пока они не будут полностью инициализированы;
• Прозрачная обработка асинхронности: импортёрам не нужно знать, является ли импортируемый модуль асинхронным или нет.

Также это позволит загружать модули условно:

if(download) {
  await require('/special-code-for-2023-year.js')
}

Или позволит просто указать ссылку до другого ресурса, если с первым произошла ошибка:

let lodash;
try {
  lodash = await import('https://primary.example.com/lodash');
} catch {
  lodash = await import('https://secondary.example.com/lodash');
}

Также можно использовать тот ресурс, который загрузился быстрее:

const resource = await Promise.any([
  fetch('http://example.com/first.txt')
    .then(response => response.text()),
  fetch('http://example.com/second.txt')
    .then(response => response.text()),
]);

Из-за Promise.any(), переменная resource инициализируется через ту загрузку, которая завершится первой.

Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет.

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

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

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

@supports (display: grid) {
  div {
    display: grid;
  }
}

Если браузер поддерживает свойство display:grid, он будет использовать стили из этой директивы, а иначе просто проигнорирует весь блок кода.

Если хотите проверить целый селектор, используйте функцию @supports selector(), которую удивительно хорошо поддерживают браузеры.

@supports selector(:nth-child(1 of .class)) {
  /* Сделать что-то */
}

Если хотите узнать больше, Крис Койер написал неплохую заметку о @supports selector().

В текущем проекте я оказался в ситуации, где нужно было проверить поддержку относительно нового селектора : where (). Ситуация непростая: и :where(), и @supports selector() появились в браузерах примерно в одно и то же время, так что если вы хотите таким способом проверить, поддерживается ли селектор старыми браузерами вроде Safari 13, то ничего не получится. А мне нужно было нормальное решение для старых браузеров, так что я стал искать альтернативы и в итоге решил использовать JavaScript.

Я нашёл это решение в посте Леа Веру. В 2011 она писала о том, как проверить поддержку CSS-селекторов через создание нового элемента style с нужным селектором. После этого мы проверяем, появилось ли правило в таблице стилей. Это хороший ход даже для браузеров старше IE8.

Но Леа упомянула и более простой способ: использование document.querySelector() в выражении с try... catch (). И учитывая, что Selectors API уже работает довольно хорошо, я остановился на этом варианте. Смотрите сами:

try {
  document.querySelector(selector)
} catch (error) {
  console.error(error)
}

Браузер попробует выполнить метод document.querySelector() с тем селектором, который мы хотим проверить. Если селектор не поддерживается, программа выдаст исключение и выполнит код в блоке catch. В примере выше ошибка выведется в консоль.

Обернем это в переиспользуемую функцию, которая вернет true, если селектор поддерживается, или false, если нет.

const isSelectorSupported = (selector) => {
  try {
    document.querySelector(selector)
    return true
  } catch (error) {
    return false
  }
}

Теперь вы можете проверить поддержку любого селектора и, например, добавить класс прямо к элементу <html>, если браузер в порядке.

if (isSelectorSupported(":where(body)")) {
  document.documentElement.classList.add("supports-where")
}

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

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

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