Оптимизация работы с DOM. Ещё кое-что

Мы дали уже много советов по работе с DOM в прошлом посте, но кое-что не поместилось, но всё ещё осталось важным.

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

Используйте фрагменты при массовых изменениях. Фрагмент сначала наполняется в памяти, а потом добавляется в DOM одним движением. Это значительно быстрее, чем изменять страницу 100 раз подряд.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let li = document.createElement("li");
  li.textContent = `Элемент ${i}`;
  fragment.appendChild(li);
}
document.querySelector("ul").appendChild(fragment); // Один раз добавляем всё в DOM

Вы также можете кэшировать элементы, если используете их многократно

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
  document.querySelector("#output").textContent = "Кнопка нажата!";
});

Примера ниже лучше избегать, потому что тут querySelector() вызывается каждый раз при клике, что неэффективно.

document.querySelector("#myButton").addEventListener("click", () => {
  document.querySelector("#output").textContent = "Кнопка нажата!";
});

#простымисловами #фронтенд

Что такое Island Architecture

Island Architecture (или «архитектура островов») — это современный подход к созданию веб-страниц, который сочетает преимущества статического контента и интерактивных элементов. Основная идея заключается в том, чтобы разделить страницу на статическую часть и изолированные «острова» — компоненты, которые могут быть динамическими и интерактивными. Это позволяет улучшить производительность, упростить разработку и сделать сайт более удобным для SEO.

Как это работает?

Представьте веб-страницу как карту, где большая часть территории — это статический контент, а отдельные «острова» — это интерактивные элементы. Например:

Статическая часть: текст статьи, изображения, заголовки — всё то, что загружается быстро и не требует JavaScript для отображения.

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

Такой подход позволяет пользователю сразу видеть основное содержание, пока интерактивные элементы подгружаются в фоновом режиме.

Преимущества Island Architecture

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

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

— Удобство разработки. Каждый «остров» можно разрабатывать и тестировать отдельно, используя разные технологии для разных островов, если это требуется.

Недостатки и ограничения

— Если страница содержит много интерактивных элементов (например, социальные сети или сложные приложения), загрузка множества островов может снизить производительность.

— Так как концепция относительно новая, для её реализации часто нужны специфические фреймворки, такие как Astro или Marko, либо собственные решения.

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

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

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

#простымисловами

Разбираемся в разнице между Media Queries и Container Queries в CSS

Когда речь заходит о CSS, многие из нас знакомы с Media Queries. Это инструмент, который помогает адаптировать стиль вашего сайта в зависимости от размеров экрана. Но также есть и другой игрок — Container Queries. Давайте разберемся, в чем между ними разница и как использовать каждый из них.

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

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

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

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

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

.container {
  container-type: inline-size;
}
@container (max-width: 400px) {
  .my-element {
    color: red;
  }
}

В этом примере .my-element станет красным только если его родительский .container будет шире 400 пикселей, независимо от размеров экрана устройства. Это открывает огромные возможности для создания адаптивных компонентов.

Простыми словами, Media Queries реагируют на ширину экрана, а Container Queries — на ширину родительского контейнера. Это делает Container Queries более гибкими для разработки компонентов, которые могут изменяться в зависимости от контекста, в котором они используются.

#простымисловами #css

Разница между SPA и PWA

Мы часто сталкиваемся с терминами SPA (Single Page Application) и PWA (Progressive Web App). Давайте разберемся, что они означают и в чем их основные отличия.

SPA — это веб-приложение, которое загрузится однажды и будет динамически обновлять контент на странице без необходимости перезагрузки. Это значит, что после начальной загрузки сайта пользователю не нужно ожидать, пока загрузится новая страница. Все взаимодействия происходят на одном HTML-документе, что делает работу с приложением более плавной и быстрой. Примеры SPA: Gmail, Google Maps.

Для создания простого SPA можно использовать библиотеки или фреймворки, такие как React или Vue.js. Вот небольшая структура на React:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
            <p>Это простое SPA приложение.</p>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

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

Для создания простого PWA вам нужно добавить файл манифеста и service worker. Пример манифеста:

{
    "name": "Мое PWA приложение",
    "short_name": "PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Основные отличия:

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

2. SPA может быть частью PWA. PWA включает все возможности SPA и добавляет дополнительные функции, такие как работа в офлайн-режиме, установка на устройство и поддержка push-уведомлений.

3. SPA чаще всего использует JavaScript-библиотеки и фреймворки (React, Angular, Vue), тогда как PWA требует дополнительных технологий, таких как сервисные работники и манифесты.

#простымисловами #spa #pwa

Какой фреймворк выбрать новичку для бэкенда на JavaScript

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

Node.js — база для фреймворков

Прежде всего, стоит упомянуть, что бэкенд на JavaScript чаще всего строится на базе Node.js. Это среда выполнения, которая позволяет запускать JavaScript на сервере. Она быстро обрабатывает запросы и легко масштабируется, что делает её идеальным выбором для новичков.

Express.js — проще некуда

Если вы хотите что-то простое и легкое для старта, попробуйте Express.js. Этот фреймворк считается стандартом для разработки веб-приложений на Node.js. Он предлагает минималистичный подход, позволяя сосредоточиться на логике вашего приложения без лишних сложностей.

Вот пример простого сервера на Express.js:

const express = require('express');
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
    res.send('Hello, World!');
});
app.listen(PORT, () => {
    console.log(`Server is running on https://localhost:${PORT}`);
});

С помощью этого кода вы создадите простой сервер, который отвечает на запросы по адресу "/".

Koa.js — больше гибкости

Если вы хотите большей гибкости и современного подхода, посмотрите на Koa.js. Этот фреймворк был создан создателями Express и предлагает более чистый и современный подход к написанию middleware. Если вас интересует асинхронное программирование с использованием async/await, Koa очень подойдет.

Пример применения Koa:

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
    ctx.body = 'Hello, Koa!';
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
    console.log('Koa server running on https://localhost:3000');
});

NestJS — для тех, кто хочет быть на острие технологий

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

Выбор фреймворка зависит от ваших целей и уровня подготовки. Если вы только начинаете, рекомендуем начать с Express.js — он прост в освоении и отлично подходит для небольших проектов. Если уже есть опыт или вы хотите изучить что-то новое, Koa.js или NestJS могут стать отличным выбором. Удачи в изучении бэкенда на JavaScript!

Есть что-то ещё, что мы упустили? Поделитесь своим вариантов в комментариях.

#простымисловами #бэкенд

Что такое прототипные методы в JavaScript

Давайте сегодня разберем одну из ключевых концепций в JavaScript — прототипные методы. Что это такое и какую роль они играют в нашем коде?

В JavaScript каждое значение имеет прототип — объект, от которого оно «унаследует» свойства и методы. Это позволяет создавать структуры, которые могут делиться функциональностью. Прототипы помогают избежать дублирования кода и облегчить его поддержку.

Как работают прототипные методы?

Когда мы создаем объект, он может использовать методы, определенные в его прототипе. Например, у всех объектов, созданных на основе Array, есть общие методы, такие как .push() и .pop(). Эти методы определены в Array.prototype. Если вы не знаете, что такое prototype, подумайте о нем как о шаблоне для создания объектов.

Давайте рассмотрим простой пример. Мы создадим конструктор для объекта Person и добавим метод greet в его прототип:

function Person(name) {
    this.name = name;
}
// Добавляем метод greet в прототип Person
Person.prototype.greet = function() {
    console.log(`Привет, меня зовут ${this.name}!`);
};
// Создаем нового человека
const alice = new Person('Алиса');
const bob = new Person('Боб');
// Вызываем метод greet
alice.greet(); // Привет, меня зовут Алиса!
bob.greet();   // Привет, меня зовут Боб!

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

Использование прототипов полезно по нескольким причинам:

1. Экономия памяти. Методы хранятся в одном месте, а не копируются в каждый объект.
2. Упрощение кода. Легче добавлять, изменять и удалять методы.
3. Наследование. Можно создавать иерархии объектов, где один объект наследует свойства и методы другого.

Если у вас есть вопросы или хотите обсудить тему подробнее, пишите в комментариях!

#простымисловами

Стрелочные и обычные функции в JavaScript: в чём разница?

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

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

Обычные функции пишутся с использованием ключевого слова function, а стрелочные — с помощью более компактного синтаксиса =>.

//Обычная функция
function greet(name) {
  return "Привет, " + name;
}

//Стрелочная функция
const greet = (name) => "Привет, " + name;

This. Одно из главных различий — как функции работают с контекстом this.

— В обычной функции this зависит от того, как её вызвали.
— В стрелочной функции this берётся из внешнего окружения и не меняется.
Это важно, когда вы работаете с объектами или обработчиками событий.

Аргументы. Обычные функции имеют встроенный объект arguments для доступа ко всем переданным параметрам, а стрелочные — нет (но можно использовать ...args).

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

Генераторы. Обычные функции поддерживают синтаксис function* для генераторов, стрелочные — нет.

Чтобы понять разницу работы с this на практике, рассмотрим пример с объектом:

const person = {
  name: "Алекс",
  sayHello: function() {
    console.log("Привет, я " + this.name);
  },
  sayHelloArrow: () => {
    console.log("Привет, я " + this.name);
  }
};

person.sayHello();       // Привет, я Алекс
person.sayHelloArrow();  // Привет, я undefined

— В методе sayHello (обычная функция) this указывает на объект person, и мы получаем доступ к свойству name.

— В методе sayHelloArrow (стрелочная функция) this берётся из внешнего контекста (например, window), где name не определён, поэтому результат — undefined.
Этот пример показывает, почему выбор типа функции важен в зависимости от задачи.

Стрелочные функции отлично подходят для коротких коллбэков (например, в map или setTimeout) и случаев, когда не нужен собственный`this`.

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

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

#простымисловами #javascript

Что такое примеси (mixins) в JS

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

Почему вообще понадобились примеси:
1. В JavaScript только одно наследование «по классам». Класс может расширять ровно один другой класс (extends). Если же необходимо поделиться возможностями между несколькими иерархиями, наследование начинает «скрипеть».
2. Составление (composition) гибче, чем наследование. Примеси позволяют «составлять» объект из маленьких независимых блоков логики, не связывая их жёстко цепочкой «родитель → потомок».

Как это выглядит в коде:

// 1. Описываем примесь как обычный объект с методами
const canLog = {
  log(message) {
    console.log(`[${this.name}] ${message}`);
  }
};

// 2. Функция-помощник, которая «подмешивает» методы
function applyMixin(targetClass, mixin) {
  Object.assign(targetClass.prototype, mixin);
}

// 3. Используем
class User {
  constructor(name) { this.name = name; }
}

applyMixin(User, canLog);

const u = new User('Анна');
u.log('Привет!'); // [Анна] Привет!

Вы только что сделали любого User умеющим писать лог в консоль, не меняя иерархию классов.

Начиная с ES2015, популярна форма, где примесь — это функция, возвращающая класс:

const TimestampMixin = (Base) => class extends Base {
  get createdAt() {
    if (!this._createdAt) this._createdAt = Date.now();
    return this._createdAt;
  }
};

class Article {}
class Comment {}

class ArticleWithTime extends TimestampMixin(Article) {}
class CommentWithTime extends TimestampMixin(Comment) {}

Так вы оборачиваете любой базовый класс, не трогая оригинальную цепочку extends.

Плюсы примесей:
1. Повторное использование кода. Один раз написали — применили в нескольких местах, избавившись от копипаста.
2. Гибкая композиция. Собираете объект как конструктор LEGO из маленьких блоков логики.
3. Изолированность обязанностей. Каждая примесь решает одну задачу, поэтому код легче читать и тестировать.

#простымисловами #javascript #основы

Зачем вам нужен Passive Event Listener

Passive Event Listener — это особый режим для обработчика событий, при котором браузер сразу знает, что внутри вы не будете вызывать preventDefault(). Узнав это заранее, движок может не ждать вашего решения и тут же приступать к прокрутке или другим действиям по умолчанию. В итоге интерфейс отзывается быстрее и анимация скролла становится плавнее. Это позволяет:

1. Бороться с «дёрганым» скроллом на мобильных устройствах. На touchstart/touchmove браузер вынужден приостанавливать прокрутку, пока не убедится, что вы не отменили её через preventDefault(). Если таких обработчиков много, задержка может достигать 100 мс и пользователь ощущает «тормоза». С passive: true пауза не требуется.

2. Снизить нагрузку на главный поток (main thread). Меньше блокирующих операций — меньше шансов, что UI «замёрзнет» на мгновение.

Как использовать:

Ключевой момент — в объекте опций passive: true.

function handleMove(e) {
  // Только читаем, не вызываем preventDefault
  const { clientX, clientY } = e.touches[0];
  // ...логика, например, показать координаты
}

window.addEventListener('touchmove', handleMove, { passive: true });

Если в пасcивном обработчике всё-таки написать e.preventDefault();, браузер выведет предупреждение в консоли и проигнорирует вызов. Поэтому добавляйте passive: true только там, где оно действительно безопасно, то есть где вы не собирались отменять действие по умолчанию.

Где это особенно полезно:
— touchstart и touchmove — для плавного скролла на мобильных.
— wheel и scroll — когда отслеживаете прокрутку, но не мешаете ей.
— Любые жесты, где вы просто читаете координаты.

#простымисловами #javascript

blur в JavaScript: что это такое

Событие blur не стоит путать с CSS-свойством. В JavaScript оно срабатывает на элементах, которые могут получать фокус в случаях, когда эти элементы фокус теряют. Например, пользователь «ушёл» с этого элемента и переключил внимание на что-то другое (другой элемент, окно или вкладку).

Когда происходит blur:

1. Клик мышью в другое место.
2. Переход клавишей Tab.
3. Смена вкладки или окна.

Когда может пригодиться blur:

— Валидация «по уходу». Проверить введённый e-mail или телефон сразу после того, как пользователь перестал редактировать поле.
— Скрытие подсказок. Прятать всплывающие хинты, когда внимание пользователя ушло с элемента.
— Автосохранение. Сохранять черновик, как только заголовок заметки потерял фокус.

Как это выглядит в коде:

<input id="email" placeholder="Введите e-mail" />

<script>
  const emailInput = document.getElementById('email');

  emailInput.addEventListener('blur', () => {
    console.log('Поле e-mail потеряло фокус — проверяем данные.');
    // Здесь может быть ваша валидация или отправка на сервер
  });
</script>

Важные нюансы:

— blur не всплывает вверх по дереву DOM. Если нужно отследить потерю фокуса на контейнере, слушайте событие focusout: оно ведёт себя так же, но всплывает.
— Порядок событий. Когда элемент теряет фокус, сначала срабатывает focusout, затем blur. Это редко важно, но полезно знать при сложной логике.

#простымисловами #javascript

#простымисловами: Что такое Web Worker

Web Worker — это способ запустить тяжёлую задачу в браузере в фоновом потоке, не тормозя интерфейс.

Зачем он нужен

В браузере весь ваш JavaScript обычно работает в одном потоке — основном.

И если вы запускаете что-то тяжёлое (например, сложные вычисления или работу с большими данными), страдает весь интерфейс: кнопки не нажимаются, анимации замирают, скролл лагает.

Чтобы избежать этого, тяжёлую работу можно вынести в Web Worker. Тогда основная страница продолжит работать плавно.

Как это работает

Вы создаёте отдельный файл со скриптом, который будет работать в фоне:

// worker.js
self.onmessage = function(event) {
  const result = event.data * 2;
  self.postMessage(result);
};

А в основном коде:

const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Результат от воркера:', event.data);
};

worker.postMessage(21); // отправляем 21, получаем 42

Всё общение — через postMessage и onmessage. Вы как бы обмениваетесь сообщениями между потоками.

Что можно и нельзя делать в Web Worker:

— Нельзя напрямую работать с DOM (document, window, элементы страницы).
— Нельзя использовать alert, prompt, confirm.

Зато можно делать:

— Математические расчёты.
— Обработку больших массивов.
— Парсинг JSON, XML.
— Декомпрессию данных.
— Обмен сообщениями с сервером (через fetch, WebSocket).

#webworker #фронтенд

var, let, const — в чём разница?

В JavaScript есть три способа объявить переменную. Все они ведут себя по-разному. Разберём детально, но простыми словами, чтобы больше не было путаницы.

🟡 var — привет из прошлого

Особенности:

🔁 Область видимости: не блочная, а функциональная

🔼 Всплывает (hoisting) — поднимается вверх функции, но без значения

🔄 Можно переобъявить и изменить

😵 Может вести себя неожиданно

if (true) {
  var a = 1;
}
console.log(a); // 1 — переменная "вышла" из блока

console.log(b); // undefined — переменная есть, но ещё без значения
var b = 2;

🔵 let — современный стандарт

Особенности:

🔁 Область видимости: блочная

🔼 Всплывает, но в «мертвой зоне» (TDZ — Temporal Dead Zone), поэтому использовать до объявления нельзя

❌ Нельзя переобъявить в той же области видимости

✅ Можно менять значение

if (true) {
  let c = 10;
}
console.log(c); // ❌ ReferenceError — переменная вне блока

let d = 5;
let d = 6; // ❌ тоже ошибка — уже объявлена

🟢 const — постоянство с нюансами

Особенности:

🔁 Область видимости: как у let — блочная

❌ Нельзя изменить значение

⚠️ Но если значение — объект или массив, можно менять его внутренности

📌 Нужно обязательно сразу присвоить значение при объявлении

const x = 42;
x = 100; // ❌ ошибка

const user = { name: "Alice" };
user.name = "Bob"; // ✅ работает
user = { name: "Charlie" }; // ❌ ошибка

В чём подвох в циклах?

Один из частых багов — поведение var в цикле.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 3, 3, 3 — потому что var одна на весь цикл

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 0, 1, 2 — потому что let создаёт новую переменную на каждой итерации

Что использовать?

const — почти всегда. Надёжно, понятно, предсказуемо.
let — если переменная будет меняться.
var — только если пишете поддержку старого кода. В новом — не надо.

#простымисловами #javascript #основы

Что не так с var — и почему его всё реже используют

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

Да, var — не устарел и не запрещён. Он по-прежнему часть JavaScript. Но в современной разработке ему предпочитают let и const. Не потому что это модно, а потому что так безопаснее и предсказуемее.

✅ Почему let и const — лучше:

— работают в пределах блока, а не всей функции;
— защищают от доступа до инициализации (TDZ);
— не позволяют случайно переобъявить переменную;
— делают поведение кода очевидным — особенно в условиях и циклах.

🚫 Почему var — неудачный выбор по умолчанию:

— всплывает с undefined, даже если объявлен ниже;
— работает во всей функции, а не в том месте, где его видно;
— легко переопределяется и ведёт себя неожиданно в асинхронных сценариях и циклах.

⚙️ А как же производительность?

На уровне сборки (Vite, esbuild, Webpack) весь ваш let и const может быть скомпилирован в var, если это действительно ускоряет загрузку.

Вы пишете безопасно, а сборщик сам оптимизирует.

📌 Когда var всё-таки уместен?

Если вы работаете со старым кодом, пишете под очень старые браузеры, или используете особые трюки с hoisting — var может быть оправдан. Но это редкость, а не рекомендация.

Всё ещё не согласны? Делитесь вашим мнением в комментариях.

#простымисловами #javascript

#простымисловами: Что такое srcset и зачем он нужен

Обычный атрибут src в теге <img> указывает одну-единственную картинку. Но что делать, если пользователи заходят с телефонов, ретина-экранов и 4K мониторов? Показывать одну и ту же версию — значит терять в качестве или перегружать страницу.

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

<img 
  src="image-400.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Пример адаптивного изображения">

🔍 Что здесь происходит:

— src — запасной вариант на случай, если браузер не поддерживает srcset.
— srcset — список изображений с их шириной.
— sizes — помогает браузеру понять, сколько пикселей реально нужно на экране.

В результате:

📱 На телефоне загрузится лёгкое изображение.

💻 На ноутбуке — среднее.

🖥 А на 4K-мониторе — чёткое и большое.

❗️ Важно: src обязателен, так как в браузере пользователя может отсутствовать поддержка srcset.

#фронтенд #html

#простымисловами: Как устроен и зачем нужен async/await

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

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

Как это работает

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

Пример:

async function fetchData() {
  const response = await fetch('/data.json');
  const data = await response.json();
  console.log(data);
}

Такой код легко читать и поддерживать — он идёт по шагам и не содержит вложенных .then() и .catch().

Преимущества по сравнению с коллбэками и промисами:

— Нет вложенных функций и «пирамид ада» из коллбэков.
— Ошибки можно обрабатывать привычным try/catch, как в синхронном коде.
— Логика программы остаётся линейной и предсказуемой.

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

Если вы всё ещё используете цепочки .then() или длинные коллбэки — попробуйте переписать их с async/await. Код станет чище, а ошибки — легче отлавливать.

#javascript

Что такое enterkeyhint и зачем он нужен?

На смартфонах и планшетах клавиша Enter на виртуальной клавиатуре по умолчанию просто показывает «Enter» или «Go». Но иногда полезно дать пользователю понять, что именно произойдёт при нажатии: отправится форма, будет выполнен поиск, добавится новая строка…

Атрибут enterkeyhint — это способ подсказать браузеру, какую подпись показать на клавише Enter на экранной клавиатуре.

Работает в <input> или <textarea>.

Пример:

<input type="text" enterkeyhint="search" /> //На экранной клавиатуре вместо обычного Enter отобразится «Поиск».

Какие значения можно указать:

— enter — стандартная клавиша Enter
— done — завершить ввод
— go — перейти
— next — перейти к следующему полю
— previous — вернуться к предыдущему полю
— search — выполнить поиск
— send — отправить

Такие мелочи делают интерфейс понятнее и удобнее для пользователя на мобильных устройствах.

#html #простымисловами

Что такое прототипное наследование в JavaScript?

Предлагаем вам новый формат — мы #простымисловами рассказываем о программировании, но прежде чем прочитать, попробуйте самостоятельно вспомнить о чем речь, чтобы проверить свои знания. Пишите своё понимание в комментарии, а только потом читайте наше объяснение.

В других языках (например, Java или C#) есть классы — «шаблоны», по которым создаются объекты, и у которых можно наследовать методы и свойства.

В JavaScript всё устроено немного иначе — он изначально не был «классовым», и вместо этого использует **прототипы**.

В JavaScript **каждый объект внутри себя хранит ссылку на другой объект — прототип**.

Если вы обращаетесь к свойству или методу, которого нет в текущем объекте, JavaScript заглянет в его прототип. Не нашёл там? Пойдёт дальше — в прототип прототипа.

Эта цепочка называется **прототипной цепочкой**.

const animal = {
  eats: true
};

const rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

console.log(rabbit.jumps); // true (есть в самом объекте)
console.log(rabbit.eats);  // true (нашёлся в прототипе)

Здесь rabbit не хранит eats напрямую, но когда вы к нему обращаетесь — движок пойдёт по цепочке в animal и найдёт.

**Почему это удобно?**

1. Можно «раздавать» общие методы всем объектам через прототип — не дублируя код.
2. Можно строить целые цепочки наследования без классов.
3. Всё это гибко и динамично.

Сейчас в JavaScript уже появились **классы**, но внутри они всё равно реализованы через прототипы — просто это более привычный синтаксис для тех, кто приходит из других языков.

Так что прототипное наследование — это способ объектов «подглядывать» в другие объекты за свойствами и методами. И именно так устроен весь JavaScript под капотом.

#javascript

Псевдоэлемент vs Псевдокласс: Практические советы для реальных проектов

Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.

Пример:

p::first-letter {
  font-size: 2em;
  color: red;
}

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

Псевдоэлементы бывают следующими:

— ::before — добавляет контент перед содержимым элемента.
— ::after — добавляет контент после содержимого.
— ::first-letter — стилизует первую букву элемента.
— ::first-line — оформляет первую строку текста.
— ::grammar-error — позволяет оформить часть документа, содержащую грамматическую ошибки, подсвеченную браузеров.
— ::marker — стилизует поле маркера пункта, как маркированного, так и нумерованного.
— ::selection — соответствует части документа, которая была выбрана.
— ::spelling-error — как и ::grammar-error выделяет ошибку, отмеченную браузером, но уже орфографическую

Что такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.

Пример:

a:hover {
  color: green;
}

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

Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
— :hover — применяется при наведении курсора.
— :active — активируется во время нажатия.
— :focus — используется, когда элемент находится в фокусе (например, форма ввода).
— :visited — для посещённых ссылок.
— :not() — позволяет исключить элементы из селектора.

Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.

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

Важные моменты и подводные камни
При использовании этих инструментов важно учитывать совместимость браузеров: некоторые старые версии могут не поддерживать все возможности.

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

Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!

#простымисловами #фронтенд #css

Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?

Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.

#простымисловами #собеседование #css