Нужные элементы 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

Иллюзия контроля

Приступая к новому проекту, обычно мы представляем самый беспроблемный и простой способ достижения цели, не учитывая моменты "Ой, постойте":

"Ой, постойте, API изменился"
"Ой, постойте, что-то случилось со средой разработки".
"Ой, постойти, я не понял логику этой функции"

Даже опытные разработчики попадают в ловушку, недооценивая неизвестные факторы

Взгляните на закон Хофштадтера :

Всегда требуется больше времени, чем вы ожидаете, даже если вы принимаете во внимание закон Хофштадтера

Невозмжно победить, не планируя поражение

#dev

Почему JavaScript лучше чем TypeScript?

Простая настройка

Одно из самых больших преимуществ JavaScript заключается в том, что он изначально работает в браузере и Node.js без компиляции. Можно добавить тег <script> или запустить node script.js, и все готово. Не нужно настраивать tsconfig.json, не требуется готовить сборку, не нужно ждать завершения компиляции.

Процесс с нулевой настройкой позволяет запускать быстрые демонстрации и проверять гипотезы.

#frontend #js

Почему JavaScript лучше чем TypeScript?

Гибкая типизация

Динамические типы JavaScript позволяют сохранять любое значение в переменной без предварительных объявлений. Можно переключаться между числами, строками, объектами или массивами на лету. Эта текучесть особенно удобна при работе с полезными нагрузками JSON.

let data = { id: 1, name: 'Alice' };
data = [1, 2, 3];

Обработка необработанных данных из API проста благодаря JavaScript Object Notation (JSON) . Вам не придется часто писать шаблонные определения типов или сложные интерфейсы.

#frontend #js