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

Разбивайте свой код на более мелкие, повторно используемые модули. Так Вы упростите разработку и

Используйте модули ES6 для эффективной организации кода.

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

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

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

Производительность имеет решающее значение для оптимального взаимодействия с пользователями:

1. избегайте ненужных манипуляций с DOM,
2. минимизируйте использование глобальных переменных,
3. оптимизируйте циклы и алгоритмы.

// Плохая практика
for (let i = 0; i < array.length; i++) {
  // какой-то код
}

// Хорошая практика
const length = array.length;
for (let i = 0; i < length; i++) {
  // какой-то код
}

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

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

Тестируйте свой код.

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

// sum.js
export function sum(a, b) {
  return a + b;
}

// sum.test.js
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

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

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

CSS фигуры: круг

Создать круг с помощью CSS легко и просто

<div class="circle"></div>

Допустим у нас уже есть квадрат:

.circle {
  width: 300px;
  aspect-ratio: 1;
  background: black;
}

Теперь нужно задать округлую форму. Нам поможет свойство border-radius. Присвоим ему значение 50% или больше:

.circle {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  border-radius: 50%;
}

#frontend #css #shapes

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