JavaScript: Лучшие практики

Необязательное объединение в цепочку

Представьте себе глубоко вложенную структуру данных, подобную объекту person в предложенном примере. Допустим, Вы хотите получить доступ к имени и фамилии человека. Вы бы написали это на JavaScript следующим образом:

person = { name: { first: 'John', last: 'Doe', }, age: 42}

person.name.first // 'John'
person.name.last // 'Doe'

А теперь представьте, что бы произошло, если бы объект person не содержал вложенного объекта name.

person = { age: 42}

person.name.first // TypeError: Cannot read property 'first' of undefined
person.name.last // TypeError: Cannot read property 'last' of undefined

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

person && person.name && person.name.first // undefined

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

person?.name?.first // undefined

Полученный код гораздо лаконичнее и чище.

#js #лучшиепрактики

JavaScript: Лучшие практики

Нулевое слияние

До введения оператора нулевого слияния ?? разработчики JavaScript использовали оператор логического ИЛИ || для возврата к значению по умолчанию, если входные данные отсутствовали. Это сопровождалось существенной оговоркой, заключавшейся в том, что даже допустимые, но ложные значения приводили к возврату к значениям по умолчанию.

function print(val) { return val || 'Missing'
} print(undefined) // 'Missing'
print(null) // 'Missing'

print(0) // 'Missing'
print('') // 'Missing'
print(false) // 'Missing'
print(NaN) // 'Missing'

Но JavaScript предложил оператор ??, давший разработчикам лучшую альтернативу: он приводит к откату только в том случае, если предыдущее выражение равно null lили undefined.

function print(val) { return val ?? 'Missing'
} print(undefined) // 'Missing'
print(null) // 'Missing'

print(0) // 0
print('') // ''
print(false) // false
print(NaN) // NaN

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

#js #лучшиепрактики

JavaScript: Лучшие практики

Логическое присваивание

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

if (x === null || x == undefined) { x = y}

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

x ?? (x = y) // x = y if x is nullish, else no effect

Здесь мы используем функцию короткого замыкания оператора нулевого слияния для выполнения части x = y. Код довольно лаконичен, но его все равно достаточно трудно читать или понимать. Логическое нулевое слияние устраняет необходимость в таком обходном пути.

x ??= y // x = y if x is nullish, else no effect

Схожим образом JavaScript ввел логические операторы присваивания AND &&= и OR ||=. Эти операторы выполняют присваивание только при выполнении определенного условия и не имеют никакого эффекта в противном случае.

x ||= y // x = y if x is falsy, else no effect
x &&= y // x = y if x is truthy, else no effect

#js #лучшиепрактики

JavaScript: Лучшие практики

Именованные группы захвата

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

Группа захвата — это часть строки, которая соответствует части регулярного выражения в скобках.

let re = /(\d{4})-(\d{2})-(\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!') result[0] // '2020-03-14', the complete match
result[1] // '2020', the first capture group
result[2] // '03', the second capture group
result[3] // '14', the third capture group

Регулярные выражения поддерживали именованные группы захвата в течение долгого времени, что было

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

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!') result.groups.year // '2020', the group named 'year'
result.groups.month // '03', the group named 'month'
result.groups.day // '14', the group named 'day'

API прекрасно работает с деструктурированными присваиваниями.

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!')
let { year, month, day } = result.groups year // '2020'
month // '03'
day // '14'

#js #лучшиепрактики

Вы чувствовали себя глупцом, изучая программирование?

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

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

Никто не знает всего, мы учимся по ходу дела, и программирование — это вызов, в котором всегда можно стать лучше

#мнение

Нужные элементы HTML5

Модальные окна: <dialog>

Вы начинаете новый проект и встречаетесь с необходимостью добавить модальный диалог.

Ваше первое действие... JavaScript, React, Vue? Вы делали это бесчисленное количество раз.

Но в HTML5 есть элемент, специально разработанный для этой цели:

<dialog id="myDialog">
  <h2>This is a Native Dialog</h2>
  <p>No JavaScript frameworks required!</p>
  <button id="closeDialog">Close</button>
</dialog>

<button id="openDialog">Open Dialog</button>

Конечно, для обработки действий открытия и закрытия модального окна все-таки потребуется немного JavaScript:

const dialog = document.getElementById('myDialog');
document.getElementById('openDialog').addEventListener('click', () => {
  dialog.showModal(); // Открываем диалог в модальном окне
});
document.getElementById('closeDialog').addEventListener('click', () => {
  dialog.close(); // Закрываем диалог
});

И еще... <dialog> можно оформить по своему усмотрению:

dialog {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

dialog::backdrop {
  background-color: rgba(0,0,0,0.6);
}

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

#frontend #html

Нужные элементы HTML5

Аккордеон: <details> и <summary>

Аккордеоны используются везде - это часто задаваемые вопросы, сведения о продукте, панели настроек... Чаще всего разработчики ищут решенеи на JavaScript, но в HTML5 для этого есть собственные элементы:

<details>
  <summary>Развернуть</summary>
  <p>Этот контент разворачивается и скрывается без JavaScript!</p>
</details>

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

Вы можете оформить элементы в соответствии со своими потребностями:

details > summary {
  list-style: none;
}

details > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

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

<details>
  <summary>Programming Languages</summary>
  <details>
    <summary>Frontend</summary>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </details>
  <details>
    <summary>Backend</summary>
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Ruby</li>
    </ul>
  </details>
</details>

Главное ограничение - это анимация. Если потребуется плавное открытие и закрытие блоков, без JavaScript не обойтись. Но в большинстве случаев поведение элементов по умолчанию вполне подойдет.

#frontend #html

Нужные элементы HTML5

Автозаполнение: <datalist>

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

<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Это дает вам возможность ввода текста c предложением вариантов по мере его набора, дополненную как возможностью выбора из списка, так и вводом целиком собственного текста.

Интересным вариантом использования является создание палитры цветов с именованными цветами:

<input type="text" list="colors" placeholder="Choose a color">
<datalist id="colors">
  <option value="#FF0000">Red</option>
  <option value="#00FF00">Green</option>
  <option value="#0000FF">Blue</option>
</datalist>

Пользователь может ввести название цвета или шестнадцатеричный код. Добавив JavaScript, можно создать предварительный просмотр:

const input = document.querySelector('input');
const preview = document.getElementById('colorPreview');

input.addEventListener('input', () => {
  preview.style.backgroundColor = input.value;
});

Главное ограничение <datalist> - стилизация: невозможно с легкостью настроить внешний вид появляющихся вариантов. Поэтому, если Вам нужен индивидуальный стиль, все равно понадобится решение на JavaScript. Но во многих случаях нативный элемент вполне применим.

#frontend #html

Нужные элементы HTML5

Результаты расчетов: <output>

При создании калькуляторов или интерактивных форм большинство разработчиков используют элемент div для вывода результата. Но в HTML5 для этого есть специальный элемент:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

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

#frontend #html

Нужные элементы HTML5

Семантическое выделение: <mark>

При выделении текста большинство разработчиков используют span с фоновым цветом. Но в HTML5 для этого есть специальный элемент:

<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>

По умолчанию браузеры устанавливают желтый фон, но его можно изменить:

mark {
  background-color: #fff9c4;
  padding: 2px 4px;
  border-radius: 3px;
}

Это особенно полезно для результатов поиска:

const searchTerm = "HTML";
const content = "HTML elements are the building blocks of HTML pages.";

const highlighted = content.replace(
  new RegExp(searchTerm, 'gi'),
  match => `<mark>${match}</mark>`
);

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

#frontend #html

Нужные элементы HTML5

Семантическое время: <time>

Обычно дату и время выводят с помощью текстовых элементов, но в HTML5 для этого есть специальный тег:

<p>The article was published on <time datetime="2025-05-20">May 20, 2025</time>.</p>

Атрибут datetime позволяет указать дату в стандартизированном формате (ISO 8601), понятном для машин, а также отображать ее в удобном для пользователя формате.

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

Вы можете использовать <time> для различных форматов даты и времени:

<!-- Just a date -->
<time datetime="2025-05-20">May 20, 2025</time>

<!-- Date and time -->
<time datetime="2025-05-20T14:30:00">2:30 PM on May 20, 2025</time>

<!-- Just a time -->
<time datetime="14:30:00">2:30 PM</time>

<!-- A duration -->
<time datetime="PT2H30M">2 hours and 30 minutes</time>

Одним из практических вариантов является относительное время:

p>Posted <time datetime="2025-05-18T14:30:00" class="relative-time">2 days ago</time></p>

Для обновления даты и времени, конечно, не обойтись без JavaScript:

function updateRelativeTimes() {
  document.querySelectorAll('.relative-time').forEach(el => {
    const date = new Date(el.getAttribute('datetime'));
    el.textContent = getRelativeTimeString(date);
  });
}

// Update every minute
setInterval(updateRelativeTimes, 60000);

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

#frontend #html

Нужные элементы HTML5

Подписи к изображениям: <figure> и <figcaption>

Обычно разработчики реализуют подписи к изображениям с помощью элементов <div> или <p>, но в HTML5 для этого есть специальные элементы:

<figure>
  <img src="chart.jpg" alt="Sales chart for Q2 2025">
  <figcaption>Fig.1 - Company sales increased by 25% in Q2 2025.</figcaption>
</figure>

Элемент '<figure>' предназначен не только для изображений. Его можно использовать для любого контента, на который можно сослаться как на единое целое:

<!-- Code snippet with caption -->
<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>A simple JavaScript greeting function using template literals.</figcaption>
</figure>

<!-- Quote with attribution -->
<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

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

#frontend #html

CSS трюки

Списки и счетчики

Счетчики CSS позволяют вам настраивать внешний вид контента в зависимости от его расположения в документе.

<ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

li {
    font-size: 40px;
    margin-bottom: 20px;
    counter-increment: li;
}

.list li::before {
    content: counter(li);
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    background-color: #f3b70f;
    color: white;
    text-align: center;
    line-height: 50px;
}

#frontend #css

CSS трюки

Псевдоэлемент ::selection

Псевдоэлемент ::selection позволяет применить стилm к части документа, который был выделен пользователем, например, с помощью мыши:

p::selection {
  color: white;
  background-color: green;
}

#frontend #css

CSS трюки

Значение атрибута: attr()

С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдоэлементами:

<h2 class="title" data-count="01">Section</h2>
<h2 class="title" data-count="02">Section</h2>
<h2 class="title" data-count="03">Section</h2>

.title {
    font-size: 35px;
    letter-spacing: 3px;
}

.title::before {
    content: attr(data-count);
    font-size: 1.2em;
    color: steelblue;
    margin-right: 10px;
}

Функцию attr() можно использовать с любым свойством CSS, но поддержка свойств, отличных от content, является экспериментальной.

#frontend #css

Что такое Tailwind Vue?

Tailwind Vue является интеграцией Tailwind CSS в приложения Vue.js.

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

В Tailwind Vue, можно использовать подход Tailwind, ориентированный на утилиты, вместе с реактивной природой Vue.js. Это эффективное и мощное сочетанием для современной веб-разработки.

Основные преимущества использования Tailwind Vue

1. Скорость разработки: с помощью служебных классов разработчики могут стилизовать компоненты непосредственно в разметке, ускоряя процесс разработки.

2. Настройка:
Tailwind предоставляет большие возможности настройки, позволяя легко расширять стандартную тему в соответствии с требованиями проекта.

3.Адаптивный дизайн:
Tailwind помогает легко реализовывать адаптивный дизайн, используя контрольные точки, ориентированные на мобильные устройства.

4. Минимальное раздувание CSS:
благодаря использованию PurgeCSS проекты Tailwind Vue могут сохранять небольшой размер конечного пакета CSS.

#frontend #css #tailwind #tailwindvue

Начало работы с Tailwind Vue

1. Создайте новый проект Vue.js (используя Vue CLI)

vue create my-tailwind-vue-app

2. Перейдите в папку Вашего проекта

cd my-tailwind-vue-app

3. Установите Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

4. Создайте файлы конфигурации Tailwind и PostCSS

npx tailwindcss init -p

5. Добавьте Tailwind в свой CSS , включивследующие строки в src/assets/styles.scss или в любой другой основной файл CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
#frontend #css #tailwind #tailwindvue

#frontend #css #tailwind #tailwindvue

Что нужно знать о Tailwind Vue

1. Настройка конфигурации Tailwind
Tailwind позволяет выполнять обширную настройку через файл tailwind.config.js, в котором можно настроить темы, размер экрана и многое другое.

2. Режим JIT
включите режим Just-In-Time (JIT) для быстрых итераций дизайна и меньшего рабочего объема CSS, настроив tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  // other configurations
}

3. PurgeCSS
обязательно настройте PurgeCSS в настройках Tailwind, чтобы удалить неработающие классы CSS в рабочей среде и сохранить небольшой объем финальной таблицы стилей.

4. Плагины
У Tailwind CSS есть богатая экосистема плагинов, способных улучшить разработку, предоставляя дополнительные функции: формы, типографику и утилиты соотношения сторон.

5. Библиотеки компонентов
рассмотрите возможность интеграции библиотек компонентов, таких как Tailwind UI, чтобы ускорить разработку, используя готовые компоненты на основе Tailwind CSS.

#frontend #css #tailwind #tailwindvue

Можно ли использовать Tailwind CSS с другими фреймворками?
Tailwind CSS можно интегрировать с другими фреймворками: Vue.js, React, Angular

Tailwind CSS дружелюбен к мобильным устройствам?
Tailwind CSS разработан с учетом принципов mobile-first, это упрощает реализацию адаптивного дизайна.

Можно ли создавать пользовательские компоненты с помощью Tailwind CSS?
Можно создавать пользовательские компоненты с помощью служебных классов Tailwind, сохраняя единообразие дизайна во всем приложении Vue.js.

#frontend #css #tailwind #tailwindvue

Как оптимизировать CSS?

Удаляйте неиспользуемый CSS

Вы когда-нибудь проверяли, какой объем кода CSS на самом деле использует Ваш сайт?

Такие инструменты, как PurgeCSS и UnCSS, позвол неиспользуемые правила CSS, анализируя ваш HTML. Это особенно полезно, если вы используете большие фреймворки, такие как Bootstrap или Tailwind.

#frontend #css

Мы все говорим:

Это займет всего пару часов

... а через неделю все еще отлаживаем приложение...

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

Мы продолжаем совершать одну и ту же ошибку: оцениваем задачи так, словно знаем будущее

#dev