Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений.
Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса
${}.const name = 'Alice';
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.
Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (
\n).const multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.
Внутри шаблонных литералов можно использовать любые JavaScript-выражения.
const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);
// Вывод: The sum of 5 and 10 is 15.
Можно вызывать функции и методы внутри шаблонных литералов.
function toUpperCase(str) {
return str.toUpperCase();
}
const name = 'Alice';
const loudGreeting = `Hello, ${toUpperCase(name)}!`;
console.log(loudGreeting);
// Вывод: Hello, ALICE!Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.
function tag(strings, ...values) {
console.log(strings);
console.log(values);
return 'Tagged template';
}
const name = 'Alice';
const age = 25;
const taggedResult = tag`Name: ${name}, Age: ${age}`;
console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged templateСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
- Легаси-технологии могут:
- не поддерживаться;
- быть уязвимыми;
- тормозить развитие и найм.
- Новые технологии:
- упрощают поддержку;
- ускоряют разработку;
- позволяют внедрять CI/CD, тестирование, масштабирование.
Важно: не переписывать ради переписывания, а по конкретной цели и этапам
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊7👍3🔥1
em зависит от размера шрифта родителя (font-size). .parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}Но если
.child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя..parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}
.grandchild {
font-size: 2em; /* 2 * 30px = 60px */
}rem всегда зависит от font-size у <html>. html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 2 * 16px = 32px */
}Используйте
rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте
em, если хотите, чтобы элементы зависели от родителяСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают.
Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу.
then, catch, finallyqueueMicrotask()Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче.
setTimeoutsetIntervalsetImmediate (Node.js)I/O операции
Интерактивные действия, такие как клики мыши и нажатия клавиш
Основное различие между макро- и микро-задачами заключается в их приоритете выполнения:
После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами. Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются.
setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));
setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
Ориентируйся на:
- актуальность и поддержку;
- количество скачиваний и звёзд (на GitHub, npm);
- документацию и сообщество;
- совместимость с текущим стеком;
- размер и влияние на bundle.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1💊1
Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.
Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.
Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.
Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.
Заголовок страницы (должен быть уникальным и только один на странице).
Подразделы
<h1>.Подразделы
<h2>, и так далее.<h1>Главный заголовок страницы</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h3>Подраздел 1.2</h3>
<h2>Раздел 2</h2>
<h3>Подраздел 2.1</h3>
<h4>Подраздел 2.1.1</h4>
Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например,
<h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>).В браузере откройте DevTools (например, в Chrome нажмите
F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность.Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.
Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.
const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.
Ошибка: Пропуск уровней заголовков
<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->
Исправление
<h1>Главный заголовок</h1>
<h2>Подраздел</h2>
Ошибка: Несколько
<h1> на одной странице<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>
Исправление
<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
- Responsive (отзывчивый) дизайн — подстраивается под любое устройство с помощью гибкой сетки, процентов, vw/vh, media-запросов.
- Adaptive (адаптивный) — использует фиксированные "точки останова", под каждое разрешение загружается заранее подготовленная верстка.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥3
В JavaScript, чтобы уничтожить объект
Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
Вы вызываете метод
terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.onmessage), они автоматически удаляются.terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершенЕсли вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
- <script> — блокирует парсинг HTML, загружает и выполняет скрипт сразу.
- <script async> — загружает скрипт параллельно и выполняет как только загрузится (не гарантирует порядок).
- <script defer> — загружает параллельно, но выполняет после загрузки HTML, в порядке следования.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥14
Промисы (
Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами). Категория: Асинхронные программные конструкции (Async Objects / Async Patterns)
Тип: Объект (Promise Object)*
Используются в: Асинхронном программировании (Async/Await,
then/catch) Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в
.then() или .catch(). const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Данные загружены!"); // Успех
}, 2000);
});
fetchData.then(data => console.log(data));До появления
Promise в JavaScript использовались колбэки, но они приводили к "callback hell". function fetchData(callback) {
setTimeout(() => {
callback("Данные загружены!");
}, 2000);
}
fetchData(data => console.log(data));Решение с
Promise fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
- Храним историю в БД (timestamp + price).
- Отдаём через API диапазон.
- Рендерим через Chart.js, Highcharts, ECharts, Plotly.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10💊9🤔3
Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.
представляет как целые числа, так и числа с плавающей точкой. Например,
42 или 3.14.представляет текстовые данные. Строки неизменяемы. Пример:
"Привет, мир!".имеет два значения,
true и false, и используется для работы с логическими операциями.переменная имеет тип
undefined, если она была объявлена, но ей не было присвоено никакого значения.специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что
null является объектом из-за ошибки в ранних версиях JavaScript.уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.
тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип
Number.могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6💊2
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍7💊2
<datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение. Пример: автодополнение города
<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Казань">
<option value="Новосибирск">
</datalist>
Нет,
<datalist> не работает с type="number". Но с
type="text" и type="email" — работает отлично. <input type="number" list="numbers">
<datalist id="numbers">
<option value="10">
<option value="20">
</datalist>
Рабочий вариант
<input type="text" list="numbers">
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
В JavaScript и TypeScript для наследования используется ключевое слово extends. Класс-потомок наследует все свойства и методы родителя. Если в дочернем классе нужно вызвать метод родителя, используется super.
Такой подход позволяет расширять поведение классов без дублирования кода.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3
Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов.
Функция называется чистой, если:
При одинаковых входных данных всегда возвращает одинаковый результат.
Не изменяет внешние переменные (нет побочных эффектов).
Нечистая функция (изменяет внешнюю переменную)
let count = 0;
function increment() {
count += 1; // изменяет внешнюю переменную
return count;
}
Чистая функция (зависит только от аргументов)
function increment(num) {
return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)Данные не изменяются, а создаются новые версии объектов.
Изменение объекта (нефункциональный подход)
const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объектСоздание нового объекта (функциональный подход)
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объектФункция, которая принимает другую функцию в аргумент или возвращает функцию.
const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]
Пример: Функция, возвращающая другую функцию
const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10
Функциональные методы позволяют не мутировать массив, а создавать новый.
Используем
map() для изменения элементов const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
Используем
filter() для фильтрации const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]
Используем
reduce() для вычислений const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10
Разделение функции на несколько функций, каждая принимает по одному аргументу.
function sum(a, b) {
return a + b;
}
console.log(sum(2, 3)); // 5Пример: Каррированная функция
const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
Методология помогает структурировать и стандартизировать верстку, улучшает читаемость, поддержку и масштабируемость кода. Пример: BEM (Block Element Modifier) — популярная методология для CSS/HTML.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍2💊1
Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:
Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным.
React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение.
Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.
React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились.
Управление состоянием больших и сложных приложений может стать хаотичным.
React предоставляет механизмы для удобного управления состоянием компонентов с помощью
useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой.По мере роста приложения, код может стать сложным для понимания и изменения.
Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода.
Наличие обширного сообщества и инструментов для разработки.
React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.
import React, { useState } from 'react';
function Counter() {
// Определение состояния count с начальным значением 0
const [count, setCount] = useState(0);
return (
<div>
<p>Вы кликнули {count} раз(а)</p>
<button onClick={() => setCount(count + 1)}>
Кликни меня
</button>
</div>
);
}
export default Counter;Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
- Redux / Zustand / Context API — для управления состоянием.
- TypeScript — для типизации.
- React Router — для маршрутизации.
- Formik / React Hook Form — для работы с формами.
- Styled-components / Emotion / Tailwind CSS — для стилизации.
- Jest / React Testing Library — для тестирования компонентов.
- Next.js — для SSR, SSG и улучшенного рендеринга. Если ты уточнишь стек, могу подробнее описать каждую технологию.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊15🔥6🤔6👍1