Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍46🔥5
Для изменения стилей элемента
<span> в CSS можно использовать селекторы классов, идентификаторов, селекторы по атрибутам или селекторы по типу элемента. Если элементу
<span> присвоен класс, вы можете использовать класс-селектор для его стилизации.HTML
<span class="highlight">Этот текст будет выделен.</span>
CSS
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
}Если элементу
<span> присвоен идентификатор, вы можете использовать идентификатор-селектор для его стилизации.HTML
<span id="unique-span">Этот текст уникален.</span>
CSS
#unique-span {
color: blue;
font-style: italic;
background-color: lightgray;
}Вы можете использовать селекторы атрибутов для стилизации элементов
<span>, основанных на наличии определенного атрибута или его значения.HTML
<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
CSS
span[data-custom="example"] {
color: green;
text-decoration: underline;
}Вы можете использовать селектор по типу элемента для стилизации всех элементов
<span> на странице. Однако будьте осторожны с этим подходом, так как он затронет все <span> элементы.HTML
<span>Этот текст будет стилизован.</span>
<span>И этот текст тоже.</span>
CSS
span {
color: purple;
font-size: 18px;
}Вы можете комбинировать различные типы селекторов для более точной стилизации.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Span Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="highlight">Этот текст будет выделен.</span>
<span id="unique-span">Этот текст уникален.</span>
<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
<p>Текст с <span class="highlight">выделением</span> внутри абзаца.</p>
<p id="unique-paragraph">Абзац с <span class="highlight">выделением</span> и уникальным идентификатором.</p>
</body>
</html>
CSS
/* Стили для класса */
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
}
/* Стили для идентификатора */
#unique-span {
color: blue;
font-style: italic;
background-color: lightgray;
}
/* Стили для пользовательского атрибута */
span[data-custom="example"] {
color: green;
text-decoration: underline;
}
/* Стили для всех span */
span {
color: purple;
font-size: 18px;
}
/* Комбинированные стили */
p span.highlight {
color: red;
font-weight: bold;
}
#unique-paragraph span.highlight {
color: blue;
background-color: yellow;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥17💊5❤1
Это процесс в CSS, когда вертикальные внешние отступы (margins) двух или более блоков объединяются в один. Это поведение касается только вертикальных отступов (margin-top и margin-bottom) и не касается горизонтальных (margin-left и margin-right).
Схлопывание границ помогает избежать ненужных больших отступов между элементами. Например, если у двух соседних элементов установлены верхний и нижний отступы, то без схлопывания они бы суммировались и создавали избыточное пространство между элементами.
Если у одного блока снизу есть margin-bottom, а у другого блока сверху есть margin-top, то итоговый отступ между этими блоками будет равен большему из двух значений, а не их сумме. Если у элемента задан margin-top и он находится первым в контейнере, его верхний отступ может схлопнуться с верхним отступом контейнера. Если у элемента установлен margin-bottom и он является последним в контейнере, его нижний отступ может схлопнуться с нижним отступом контейнера. В этом примере между блоками будет отступ не 50px (20px + 30px), а 30px, потому что сработает схлопывание границ и возьмется большее значение.
<!DOCTYPE html>
<html>
<head>
<style>
.block1 {
margin-bottom: 20px;
background-color: lightblue;
}
.block2 {
margin-top: 30px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="block1">Блок 1</div>
<div class="block2">Блок 2</div>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥7❤2🤯1
Используется для создания нового массива, содержащего результаты вызова переданной функции для каждого элемента исходного массива. Этот метод не изменяет оригинальный массив, а возвращает новый.
Метод
map удобен для выполнения операции на каждом элементе массива без необходимости вручную перебирать массив с помощью цикла. Он обеспечивает более чистый и читаемый код.Метод
map принимает одну функцию в качестве аргумента. Эта функция будет выполнена для каждого элемента массива, и результат выполнения этой функции будет добавлен в новый массив, который в итоге возвращается методом map. В этом примере каждый элемент массива numbers умножается на 2, и результат сохраняется в новом массиве doubled.const numbers = [1, 2, 3, 4, 5];
// Используем метод map для умножения каждого элемента на 2
const doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]
С использованием стрелочных функций, код становится еще более компактным:
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
Функция, переданная в
map, может принимать до трех аргументов:Пример с использованием всех трех аргументов:
const numbers = [1, 2, 3, 4, 5];
const detailed = numbers.map((num, index, array) => {
return `Элемент ${num} находится на индексе ${index} в массиве [${array}]`;
});
console.log(detailed);
/*
[
'Элемент 1 находится на индексе 0 в массиве [1,2,3,4,5]',
'Элемент 2 находится на индексе 1 в массиве [1,2,3,4,5]',
'Элемент 3 находится на индексе 2 в массиве [1,2,3,4,5]',
'Элемент 4 находится на индексе 3 в массиве [1,2,3,4,5]',
'Элемент 5 находится на индексе 4 в массиве [1,2,3,4,5]'
]
*/
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤3
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥4❤1
HTML и JSX имеют сходства и различия, которые важно понимать при разработке веб-приложений, особенно в контексте работы с библиотекой React.
Это стандартный язык разметки для создания веб-страниц. Он используется для определения структуры и содержания веб-страницы. HTML состоит из элементов, заключенных в теги, которые определяют различные части веб-страницы, такие как заголовки, абзацы, списки, ссылки, изображения и другие элементы.
<!DOCTYPE html>
<html>
<head>
<title>Пример HTML</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
Это синтаксическое расширение для JavaScript, которое используется в React для описания того, как пользовательский интерфейс должен выглядеть. JSX позволяет писать HTML-подобный код внутри JavaScript, который затем транспилируется в вызовы JavaScript-функций. Этот код выглядит как HTML, но на самом деле он является JavaScript-кодом, который будет компилироваться в вызовы React.createElement.
const element = (
<div>
<h1>Заголовок</h1>
<p>Это абзац.</p>
</div>
);
HTML использует стандартные HTML-теги и атрибуты. JSX использует JavaScript-выражения внутри фигурных скобок
{}, и некоторые атрибуты имеют другие названия (например, className вместо class, htmlFor вместо for).В HTML нельзя напрямую писать JavaScript-код, можно лишь использовать его через теги
<script>. В JSX можно использовать любые JavaScript-выражения, что позволяет динамически формировать разметку.HTML непосредственно интерпретируется браузером. JSX нужно транспилировать (с помощью Babel или другого транспилера) в обычный JavaScript, чтобы браузер мог его понять.
HTML не поддерживает логику напрямую, все изменения в DOM происходят через JavaScript. JSX позволяет интегрировать логику непосредственно в разметку, что делает код более декларативным и удобным для работы в рамках React.
Пример использования динамического контента
const name = "Мир";
const element = <h1>Привет, {name}!</h1>;
Этот JSX-код будет транспилирован
const element = React.createElement('h1', null, 'Привет, ', name, '!');Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥13
В веб-разработке влияет на то, насколько удобно и возможно использовать веб-сайт или веб-приложение для всех пользователей, включая людей с ограниченными возможностями. Она охватывает широкий спектр практик и технологий, которые делают веб-контент более доступным и понятным для людей с различными физическими, сенсорными, когнитивными и технологическими ограничениями.
Доступность позволяет людям с ограниченными возможностями использовать веб-сайты наравне с другими пользователями. Это включает людей с нарушениями зрения, слуха, двигательной активности и когнитивными проблемами.
В некоторых странах и регионах существуют законы и нормативные акты, требующие обеспечения доступности веб-сайтов и приложений. Например, в США действует Закон о доступности (ADA), а в Европейском Союзе – Директива о доступности веб-сайтов и мобильных приложений.
Доступные веб-сайты часто лучше индексируются поисковыми системами, поскольку многие практики доступности пересекаются с рекомендациями по SEO (поисковой оптимизации). Это помогает улучшить видимость сайта и его охват.
Доступные сайты обычно имеют более ясную и интуитивно понятную структуру, что улучшает общий пользовательский опыт для всех, включая людей без ограниченных возможностей.
Все визуальные элементы (например, изображения, иконки) должны иметь текстовые альтернативы (атрибуты
alt), чтобы их можно было понять с помощью экранных читалок.Весь функционал сайта должен быть доступен с клавиатуры. Это важно для людей, которые не могут использовать мышь.
Текст должен быть достаточно контрастным по отношению к фону, чтобы его было легко читать людям с нарушениями зрения.
Семантические теги (
<header>, <nav>, <main>, <footer>, <article>, <section> и т.д.) помогают структурам страницы быть более понятными для вспомогательных технологий.Формы должны быть четко обозначены с помощью меток (
<label>) и иметь описания ошибок, чтобы пользователи могли легко взаимодействовать с ними.Видео и аудио должны сопровождаться субтитрами и текстовыми транскрипциями, чтобы пользователи с нарушениями слуха могли понять содержание.
<img src="example.jpg" alt="Описание изображения">
Пример формы с доступными метками:
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email">
<button type="submit">Отправить</button>
</form>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤1
- Обе директивы предоставляют блочную область видимости.
- let идеально подходит для использования в случаях, когда значение переменной может изменяться.
- const используется для объявления переменных с неизменным значением.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39❤2
Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.
type User = {
name: string;
age: number;
};Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):
type ID = string | number;
type Employee = {
id: ID;
department: string;
};
type Manager = User & Employee & {
employees: User[];
};
Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.
interface User {
name: string;
age: number;
}
interface Employee extends User {
department: string;
}Интерфейсы могут расширять другие интерфейсы:
interface Manager extends Employee {
employees: User[];
}Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова
extends. Типы могут использовать пересечения (&) для комбинирования других типов.Типы могут определять объединения (например,
string | number), что позволяет описывать переменные, которые могут быть одного из нескольких типов. Интерфейсы не поддерживают объединения.Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке.
Типы могут представлять примитивные типы (например,
string, number), а также сложные типы и функции. Интерфейсы могут описывать только структуры объектов.Тип с объединением
type ID = string | number;
const userId: ID = 123;
const userName: ID = "abc";
Объединение интерфейсов
interface User {
name: string;
}
interface User {
age: number;
}
const user: User = {
name: "John",
age: 30
};Расширение интерфейсов
interface User {
name: string;
age: number;
}
interface Employee extends User {
department: string;
}
const employee: Employee = {
name: "Alice",
age: 25,
department: "HR"
};Тип с пересечением
type User = {
name: string;
age: number;
};
type Employee = User & {
department: string;
};
const employee: Employee = {
name: "Bob",
age: 35,
department: "IT"
};Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍57❤6🔥1💊1
- pop() удаляет последний элемент из массива.
- shift() удаляет первый элемент массива.
- unshift() добавляет один или несколько элементов в начало массива.
- map() создает новый массив с результатами вызова указанной функции для каждого элемента.
- filter() создает новый массив со всеми элементами, прошедшими проверку, заданную в передаваемой функции.
- reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍54❤10🔥3
Необходимы для создания повторно используемых компонентов, которые работают с различными типами данных, обеспечивая при этом строгую типизацию. Они позволяют писать код, который может работать с различными типами данных без необходимости указывать конкретные типы при каждом использовании.
Дженерики позволяют создавать обобщенные функции, классы и интерфейсы, которые можно использовать с различными типами данных, уменьшая дублирование кода и увеличивая его повторное использование.
Использование дженериков позволяет избежать ошибок, связанных с типами, поскольку компилятор TypeScript может проверять типы на этапе компиляции.
Дженерики предоставляют возможность создавать более гибкие и абстрактные компоненты, которые могут работать с любыми типами данных, обеспечивая при этом строгую типизацию.
Дженерики позволяют создавать функции, которые могут работать с различными типами данных. Например, функция, которая возвращает переданное ей значение:
function identity<T>(value: T): T {
return value;
}
const numberIdentity = identity(42); // T is inferred as number
const stringIdentity = identity("Hello"); // T is inferred as stringКлассы могут использовать дженерики для работы с различными типами данных:
class Box<T> {
contents: T;
constructor(value: T) {
this.contents = value;
}
getContents(): T {
return this.contents;
}
}
const numberBox = new Box<number>(123);
console.log(numberBox.getContents()); // 123
const stringBox = new Box<string>("Hello");
console.log(stringBox.getContents()); // HelloИнтерфейсы могут использовать дженерики для описания структур данных, которые могут содержать различные типы:
interface Pair<T, U> {
first: T;
second: U;
}
const numberStringPair: Pair<number, string> = {
first: 42,
second: "Answer"
};
const booleanArrayPair: Pair<boolean, boolean[]> = {
first: true,
second: [true, false, true]
};Иногда требуется ограничить типы, которые могут быть переданы дженерикам. Для этого используются ограничения (
extends). В этом примере функция logLength принимает только те типы, у которых есть свойство length.function logLength<T extends { length: number }>(value: T): void {
console.log(value.length);
}
logLength("Hello"); // 5
logLength([1, 2, 3]); // 3
logLength({ length: 10, value: "example" }); // 10Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤2
- Прототипное наследование является механизмом, позволяющим объектам использовать свойства и методы, определенные в других объектах.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥4🤯1
Для работы с состоянием и другими возможностями React без использования классовых компонентов. Они позволяют вам использовать функциональные компоненты и при этом сохранять состояние, обрабатывать побочные эффекты и использовать другие возможности, которые ранее были доступны только в классовых компонентах.
Позволяет добавлять состояние в функциональные компоненты. Он принимает начальное значение состояния и возвращает массив с текущим значением состояния и функцией для его обновления.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажми меня
</button>
</div>
);
}Позволяет выполнять побочные эффекты в функциональных компонентах. Это может быть запрос данных, подписка на события или манипуляции с DOM. Он выполняется после рендера компонента.
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(timer); // Очистка таймера при размонтировании
}, []);
return (
<div>
<p>Счетчик: {count}</p>
</div>
);
}Позволяет использовать контекст в функциональных компонентах. Он принимает объект контекста и возвращает текущее значение контекста.
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemeButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>Тема: {theme}</button>;
}Вы можете создавать свои собственные хуки, чтобы переиспользовать логику между компонентами. Пользовательский хук — это функция, которая использует другие хуки.
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}
// Использование пользовательского хука
function DataComponent() {
const { data, loading } = useFetch('https://api.example.com/data');
if (loading) return <p>Загрузка...</p>;
return <div>Данные: {JSON.stringify(data)}</div>;
}Ставь 👍 и забирай 📚 Базу знании
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19💊2❤1
- В глобальной функции this ссылается на глобальный объект (в браузере это window).
- В методе объекта this ссылается на сам объект.
- Стрелочные функции не имеют собственного контекста this, они наследуют его от окружающего контекста.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤1🔥1😁1💊1
Это метод рендеринга веб-страниц, при котором большая часть обработки и рендеринга контента происходит на стороне клиента, т.е. в браузере пользователя. В контексте веб-разработки, CSR обычно используется в одностраничных приложениях (Single Page Applications, SPA), где JavaScript играет ключевую роль в управлении содержимым и взаимодействиями на странице.
При первой загрузке страницы браузер получает минимальный HTML-код, обычно содержащий только базовую структуру и ссылку на JavaScript файл.
Основной JavaScript файл загружается и исполняется. Этот файл обычно содержит код приложения и необходимые библиотеки.
JavaScript код инициирует запросы к серверу (обычно через API) для получения данных, необходимых для отображения содержимого страницы.
Полученные данные используются для динамического создания и отображения контента непосредственно в браузере пользователя.
После начальной загрузки, взаимодействие с приложением обычно быстрее, поскольку обновление контента происходит без полной перезагрузки страницы.
Пользователь получает более плавный и интерактивный опыт, так как обновления происходят мгновенно без видимой перезагрузки страниц.
CSR позволяет создавать более динамичные и интерактивные пользовательские интерфейсы, так как все управление происходит на клиентской стороне.
Так как основное содержание страницы рендерится на клиентской стороне, поисковым системам может быть сложнее индексировать такие страницы. Это может повлиять на SEO.
Начальная загрузка страницы может занять больше времени, так как сначала загружается и исполняется JavaScript код, а затем уже происходит рендеринг контента.
Пользователи с отключенным JavaScript не смогут полноценно пользоваться сайтом. Также могут возникать проблемы с производительностью на слабых устройствах.
Минимальный HTML
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
JavaScript рендеринг
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤3
- Примеры state managers включают Redux, MobX и Context API в React.
- Redux предоставляет глобальное хранилище для состояния и управляет его изменениями через чистые функции (reducers).
- MobX использует наблюдаемые объекты и автоматически отслеживает изменения для реактивного обновления UI.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥5
Это два подхода к рендерингу веб-страниц, которые различаются по тому, где происходит рендеринг контента: на сервере или на клиенте.
SSR (Server-Side Rendering): Рендеринг контента происходит на сервере. Сервер генерирует HTML страницу и отправляет её клиенту (браузеру), который отображает готовую страницу.
CSR (Client-Side Rendering): Рендеринг контента происходит на стороне клиента (в браузере). Браузер загружает минимальный HTML и JavaScript файлы, которые затем выполняются для создания и отображения контента.
SSR: Начальная загрузка может быть быстрее, так как клиент получает готовый HTML и может сразу начать его отображать. Однако последующие взаимодействия могут быть медленнее, так как могут потребовать загрузки дополнительных данных с сервера.
CSR: Начальная загрузка может быть медленнее, так как клиент сначала загружает JavaScript, который затем рендерит страницу. Однако последующие взаимодействия обычно быстрее, так как они обрабатываются на клиенте без полной перезагрузки страницы.
SSR: Лучше подходит для SEO, так как поисковые системы получают готовый HTML контент, который легко индексировать.
CSR: Может быть сложнее для SEO, так как контент генерируется на клиенте после загрузки JavaScript. Поисковым системам сложнее индексировать такие страницы.
SSR: Пользователь видит контент быстрее при первой загрузке страницы, так как сервер отправляет готовый HTML. Однако последующие действия могут быть медленнее из-за необходимости делать запросы на сервер.
CSR: Пользователь может дольше ждать при первой загрузке, но последующие действия обычно быстрее и более интерактивны, так как они обрабатываются на клиенте.
SSR: Менее зависим от JavaScript, так как основной контент генерируется на сервере и доступен даже если JavaScript отключен или не работает.
CSR: Полностью зависит от JavaScript. Если JavaScript отключен или не работает, сайт может не функционировать должным образом.
// pages/index.js
import React from 'react';
const Home = ({ data }) => (
<div>
<h1>Server-Side Rendered Page</h1>
<p>{data}</p>
</div>
);
export async function getServerSideProps() {
// Fetch data from an API or database
const data = "This is server-side rendered content";
return {
props: {
data,
},
};
}
export default Home;
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22