Это встроенные коллекции в JavaScript, введенные в ECMAScript 2015 (ES6), которые предоставляют новые способы хранения и управления данными.
Это коллекция, которая позволяет хранить уникальные значения любого типа, будь то примитивы или объекты.
const set = new Set();
const setWithValues = new Set([1, 2, 3, 4, 5]);
set.add(1);
set.add(2);
set.add(2); // Игнорируется, т.к. 2 уже существует
console.log(set); // Set { 1, 2 }
set.delete(1);
console.log(set); // Set { 2 }
console.log(set.has(2)); // true
console.log(set.has(3)); // false
console.log(set.size); // 1
set.forEach((value) => {
console.log(value);
});
for (let value of set) {
console.log(value);
} Это коллекция, которая позволяет хранить пары ключ-значение. В отличие от обычных объектов, ключи в
Map могут быть любого типа, включая функции, объекты и примитивы.const map = new Map();
const mapWithValues = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map); // Map { 'key1' => 'value1', 'key2' => 'value2' } map.delete('key1');
console.log(map); // Map { 'key2' => 'value2' } console.log(map.get('key2')); // value2 console.log(map.has('key2')); // true
console.log(map.has('key1')); // false console.log(map.size); // 1
Если вам нужно хранить только уникальные значения,
Set идеально подходит:const numbers = [1, 2, 3, 4, 5, 5, 6, 7, 7, 8];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // Set { 1, 2, 3, 4, 5, 6, 7, 8 }
Если вам нужно хранить данные в формате ключ-значение и вам важна возможность использовать сложные типы данных в качестве ключей,
Map — лучший выбор:const userRoles = new Map();
const admin = { name: 'Admin' };
const editor = { name: 'Editor' };
userRoles.set(admin, 'admin');
userRoles.set(editor, 'editor');
console.log(userRoles.get(admin)); // admin
console.log(userRoles.get(editor)); // editor
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍36🔥3❤2
Чтобы повернуть блок на 45 градусов, используется свойство CSS
transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон..rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}Основной синтаксис
transform: rotate(угол);
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotated-box"></div>
</body>
</html>
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
В комбинации с анимацией (
@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥9
Чтобы сделать вращения по осям X и Y заметными, нужно учитывать перспективу. Перспектива добавляет глубину к элементам, позволяя визуально различать вращение по осям X и Y. В CSS для этого используются свойства
perspective и transform.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
perspective: 800px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 50px;
transform-style: preserve-3d;
transition: transform 1s;
}
.rotate-x {
transform: rotateX(45deg);
}
.rotate-y {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box rotate-x"></div>
<div class="box rotate-y"></div>
</div>
</body>
</html>
Определяет глубину перспективы. Меньшие значения делают перспективу более выраженной, большие значения — более плоской.
.container {
perspective: 800px;
}
Обеспечивает сохранение трехмерных преобразований для потомков элемента. Добавляет плавный переход при изменении трансформации.
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 50px;
transform-style: preserve-3d;
transition: transform 1s;
} Вращает элемент на 45 градусов вокруг оси X.
.rotate-x {
transform: rotateX(45deg);
} Вращает элемент на 45 градусов вокруг оси Y.
.rotate-y {
transform: rotateY(45deg);
} Добавляет визуальную глубину, делая трехмерные эффекты более реалистичными.
Вращение по осям X и Y без перспективы не будет выглядеть объемным. Перспектива помогает зрительно отличить, что элемент вращается в трехмерном пространстве.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥6
Чтобы создать бесконечно повторяющуюся анимацию в CSS, используется свойство
animation вместе с параметром infinite, который указывает, что анимация должна повторяться бесконечно.с помощью @keyframes.
Сначала создайте анимацию с ключевыми кадрами. Допустим, мы хотим, чтобы элемент плавно изменял цвет и возвращался к исходному состоянию.
@keyframes changeColor {
0% {
background-color: lightblue;
}
50% {
background-color: lightgreen;
}
100% {
background-color: lightblue;
}
}Теперь применим эту анимацию к элементу и укажем, что она должна повторяться бесконечно.
.animated-box {
width: 100px;
height: 100px;
background-color: lightblue;
animation: changeColor 3s infinite;
}Бесконечные анимации могут использоваться для создания привлекательных визуальных эффектов на сайте, таких как мерцание, изменение цвета или вращение элементов.
Такие анимации могут сделать пользовательский интерфейс более динамичным и интересным.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15💊4
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥9❤2
Препроцессоры используются для расширения возможностей CSS, упрощения написания стилей и улучшения организации кода. Они добавляют функциональность, которая отсутствует в стандартном CSS, такую как переменные, вложенные правила, миксины, функции и операции. Основные препроцессоры, такие как Sass, LESS и Stylus, помогают разработчикам писать более чистый, структурированный и поддерживаемый код.
Препроцессоры позволяют использовать переменные для хранения значений, таких как цвета, размеры и другие повторяющиеся значения. Это упрощает изменение стилей, поскольку изменения нужно вносить только в одном месте.
// Пример на Sass
$primary-color: #3498db;
$font-size: 16px;
body {
color: $primary-color;
font-size: $font-size;
}
В стандартном CSS вложенность не поддерживается, что может затруднять чтение и поддержку кода. Препроцессоры позволяют использовать вложенные правила, что делает структуру кода более логичной и читаемой.
// Пример на Sass
.nav {
background: #eee;
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
a {
color: #333;
}
}
}
}
Миксины позволяют определять повторяющиеся блоки стилей и использовать их в разных местах кода. Это помогает избежать дублирования и облегчает внесение изменений.
// Пример на Sass
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
Препроцессоры поддерживают использование функций и операций для выполнения вычислений и обработки значений непосредственно в CSS-коде.
// Пример на Sass
$base-font-size: 16px;
.large-text {
font-size: $base-font-size * 1.5;
}
Препроцессоры позволяют разбивать CSS на несколько файлов и импортировать их в основной файл стилей. Это улучшает организацию кода и его поддерживаемость.
// Пример на Sass
@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25😁8🔥2💊2
Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
} .box {
@include border-radius(10px);
}
.button {
@include border-radius(5px);
} .border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}.box {
.border-radius(10px);
}
.button {
.border-radius(5px);
}border-radius(radius)
-webkit-border-radius: radius
-moz-border-radius: radius
border-radius: radius
.box
border-radius(10px)
.button
border-radius(5px
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25
Простые: селекторы тегов (div), классов (.class), ID (
Комбинаторы: потомок (A B), прямой потомок (A > B), сосед (A + B), все последующие (A ~ B).
Псевдоклассы: :hover, :nth-child(n), :first-of-type.
Псевдоэлементы: ::before, ::after, ::placeholder.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥7🤯1
Это популярный фреймворк для разработки интерфейсов веб-приложений. Он включает в себя набор инструментов для создания адаптивных и удобных для пользователя веб-страниц. Bootstrap предоставляет готовые CSS и JavaScript компоненты.
Bootstrap использует гибкую сеточную систему, основанную на 12 колонках, что позволяет создавать адаптивные макеты. Вы можете легко управлять расположением элементов на странице для различных размеров экранов.
<div class="container">
<div class="row">
<div class="col-md-4">Колонка 1</div>
<div class="col-md-4">Колонка 2</div>
<div class="col-md-4">Колонка 3</div>
</div>
</div>
Bootstrap включает множество готовых компонентов, таких как кнопки, формы, карточки, навигационные панели, модальные окна и многое другое. Эти компоненты можно легко стилизовать и настроить.
<button type="button" class="btn btn-primary">Основная кнопка</button>
В Bootstrap также включены JavaScript плагины, которые добавляют интерактивность и динамичность. Например, модальные окна, карусели, выпадающие меню и другие.
<!-- Кнопка для вызова модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Запустить модальное окно
</button>
<!-- Модальное окно -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Название модального окна</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Содержимое модального окна.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить изменения</button>
</div>
</div>
</div>
</div>
В Bootstrap имеются утилиты для быстрого добавления часто используемых стилей, таких как отступы, цвета, выравнивание текста и другие. Эти утилиты позволяют быстро применять стили без написания дополнительных CSS-классов.
<div class="p-3 mb-2 bg-primary text-white">Основной фон с отступами и белым текстом</div>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥10
Методы
map, filter, reduce и forEach в JavaScript предназначены для обработки массивов и предоставляют мощные инструменты для работы с данными. Эти методы упрощают и делают код более читаемым и декларативным.Метод
forEach выполняет указанную функцию один раз для каждого элемента в массиве.const array = [1, 2, 3, 4, 5];
array.forEach((element) => {
console.log(element);
});
forEach просто выполняет функцию для каждого элемента и не возвращает новый массив или значение.Подходит для выполнения побочных эффектов, таких как логирование или изменение элементов массива.
Метод
map создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.const array = [1, 2, 3, 4, 5];
const doubled = array.map((element) => {
return element * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]
Каждый элемент нового массива является результатом вызова функции.
Подходит для преобразования данных, не изменяя исходный массив.
Метод
filter создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.const array = [1, 2, 3, 4, 5];
const evenNumbers = array.filter((element) => {
return element % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
Включает только те элементы, которые соответствуют условию.
Подходит для фильтрации данных на основе заданного условия.
Метод
reduce выполняет функцию редуктора (сборщика) для каждого элемента массива, сводя массив к одному значению.const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
Результат выполнения функции редуктора.
Второй аргумент функции
reduce задает начальное значение аккумулятора.Подходит для агрегирования данных, например, для вычисления суммы, произведения или объединения значений.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥1
Были введены в 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
👍23❤3
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥4❤3
Google разработал набор метрик, называемых Web Vitals, которые оценивают ключевые аспекты пользовательского опыта:
Largest Contentful Paint (LCP): Время загрузки основного контента страницы.
First Input Delay (FID): Время от первого взаимодействия пользователя с сайтом до момента, когда браузер начинает обработку этого взаимодействия.
Cumulative Layout Shift (CLS): Стабильность макета страницы (измеряет неожиданные сдвиги контента).
Google Lighthouse: Инструмент, встроенный в Chrome DevTools, который анализирует страницу и предлагает улучшения.
PageSpeed Insights: Онлайн-сервис от Google, который предоставляет отчеты о производительности сайта на мобильных и десктопных устройствах.
WebPageTest: Позволяет проводить детализированные тесты производительности с разными настройками сети и устройства.
Chrome DevTools: Включает вкладку "Performance" для записи и анализа производительности загрузки страницы и исполнения скриптов.
Network Panel: Показывает время загрузки различных ресурсов, что помогает найти "узкие места".
Google Analytics: Предоставляет отчеты о скорости загрузки страниц.
New Relic, Datadog: Платформы для мониторинга производительности приложений и сайтов в реальном времени.
Использование CDN (Content Delivery Network): Ускоряет доставку контента пользователям, снижая задержки.
Минимизация и сжатие ресурсов: Уменьшение размеров файлов CSS, JavaScript и изображений.
Кэширование: Хранение копий статических ресурсов для ускорения повторных посещений.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥3🤯2💊1