Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так.
Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что:
Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег).
Некоторые элементы могут быть проигнорированы или отображены некорректно.
CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре.
Отсутствие закрывающего тега
<p>Привет, мир!
<p>Это новый абзац?
Вложенность тегов в неправильных местах
<p>Текст <div>Блок внутри абзаца</div></p>
По спецификации
<div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца. Итоговый HTML может быть таким:
<p>Текст </p>
<div>Блок внутри абзаца</div>
Если не указать
<!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей. Неправильные атрибуты в тегах
<img src="image.jpg" alt="Картинка" wrongAttr="что это?">
Незакрытые теги в таблице
<table>
<tr>
<td>Ячейка 1
<td>Ячейка 2
</tr>
</table>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9💊2
Two-way binding нужен для:
- синхронизации состояния UI и данных без дополнительного кода;
- удобной работы с формами и интерактивными компонентами;
- упрощения кода (особенно в v-model, ngModel).
Но может затруднять отладку и контроль, если применять безмерно.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍2💊1
На самом деле, статические методы не добавляются в
prototype, потому что они принадлежат самому классу, а не его экземплярам. Но если ты хочешь имитировать статический метод в
prototype, можно использовать функцию-конструктор и добавить метод вручную. В классе статические методы объявляются с помощью
static. Они не находятся в prototype, а принадлежат самому классу. class User {
static sayHello() {
return "Привет!";
}
}
console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)Если нужно, чтобы каждый объект имел доступ к "статическому" методу через
prototype, можно сделать такfunction User(name) {
this.name = name;
}
// Добавляем метод в prototype
User.prototype.sayHello = function () {
return "Привет!";
};
const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"Если хочется добавить метод на сам класс, а не в
prototype, можно сделать такfunction User(name) {
this.name = name;
}
// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
return "Привет!";
};
console.log(User.sayHello()); // ✅ "Привет!"Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊6👍5
Можно использовать Context API, который позволяет передавать данные от родителя к потомку без явного прокидывания через props. Это удобно для глобальных данных: темы, язык, текущий пользователь.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊5👍4🔥2
Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода.
useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
export default DataFetchingComponent;Метод
componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.import React, { Component } from 'react';
class DataFetchingComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
this.setState({ data });
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
render() {
const { data } = this.state;
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
}
export default DataFetchingComponent;Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым.
service.js
export async function fetchData() {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
}DataFetchingComponent.js
import React, { useState, useEffect } from 'react';
import { fetchData } from './service';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData()
.then(data => setData(data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
export default DataFetchingComponent;Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍9🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍5
Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности.
Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке
dist появляются статические файлы (index.html, app.js, styles.css). server {
listen 80;
server_name myapp.com;
root /var/www/myapp/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}Если фронтенд (
myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API. server {
listen 80;
server_name myapp.com;
root /var/www/myapp/dist;
index index.html;
location / {
try_files $uri /index.html;
}
# Проксирование API-запросов
location /api/ {
proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.
upstream backend {
server backend1.myapp.com;
server backend2.myapp.com;
}
server {
listen 80;
server_name api.myapp.com;
location / {
proxy_pass http://backend;
}
}Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.
location /static/ {
expires 7d; # Кэшировать файлы на 7 дней
add_header Cache-Control "public, max-age=604800";
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
- <article> — самодостаточный фрагмент контента, который может существовать независимо (новости, блог).
- <section> — логическая группа контента, часть большей структуры. Используется для организации и разметки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥1💊1
Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.
Начинается с двойного двоеточия (
::), за которым следует название псевдоэлемента. Например, ::before или ::after.::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов. p::before {
content: "«";
color: blue;
}
p::after {
content: "»";
color: blue;
}
::first-line: Применяет стили к первой строке текста в блочном элементе. p::first-line {
font-weight: bold;
}
::first-letter: Применяет стили к первой букве текста в блочном элементе. p::first-letter {
font-size: 200%;
}
::selection: Применяет стили к части текста, которую пользователь выделил. p::selection {
background: yellow;
}
Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
Чтобы псевдоэлементы
::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15
Основные — И, ИЛИ, НЕ. В JavaScript это &&, || и !. Они применяются для составных условий, управления логикой выполнения, фильтрации и принятия решений в коде.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8💊1
Миксины в препроцессорах 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
👍8
- Новостные порталы, блоги, СМИ.
- Страницы лендингов, где важна моментальная загрузка.
- Сайты, сильно зависящие от SEO и мобильного трафика.
Но AMP имеет ограничения и постепенно теряет популярность в пользу Core Web Vitals и PWA.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7
Promise – это объект, представляющий отложенный результат (асинхронную операцию). Помимо
new Promise(), у Promise есть статические методы, которые помогают работать с несколькими промисами. Возвращает успешно выполненный
Promise с переданным значением. Promise.resolve(42).then(console.log); // 42
Возвращает промис в состоянии "отклонён" (
rejected). Promise.reject("Ошибка!").catch(console.error); // "Ошибка!"Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся.
Если один промис отклонится,
Promise.all немедленно выдаст ошибку. Promise.all([
Promise.resolve(10),
Promise.resolve(20),
Promise.resolve(30),
]).then(console.log); // [10, 20, 30]
Ошибка прерывает выполнение
Promise.all([
Promise.resolve(1),
Promise.reject("Ошибка!"),
Promise.resolve(3),
]).catch(console.error); // "Ошибка!"
Возвращает массив состояний (
fulfilled или rejected) каждого промиса. Никогда не отклоняется, даже если есть ошибки.
Promise.allSettled([
Promise.resolve(100),
Promise.reject("Ошибка!"),
Promise.resolve(300),
]).then(console.log);
Выведет
[
{ status: "fulfilled", value: 100 },
{ status: "rejected", reason: "Ошибка!" },
{ status: "fulfilled", value: 300 }
]
Возвращает результат ПЕРВОГО выполненного или отклонённого промиса.
Promise.race([
new Promise(res => setTimeout(() => res("Промис 1"), 500)),
new Promise(res => setTimeout(() => res("Промис 2"), 300)),
]).then(console.log); // "Промис 2" (он быстрее)
Возвращает результат ПЕРВОГО выполненного (
fulfilled) промиса. Если ВСЕ промисы отклонены (
rejected), возвращает AggregateError. Promise.any([
Promise.reject("Ошибка 1"),
Promise.resolve("Успех!"),
Promise.reject("Ошибка 2"),
]).then(console.log); // "Успех!"
Ошибка, если все промисы
reject Promise.any([
Promise.reject("Ошибка 1"),
Promise.reject("Ошибка 2"),
]).catch(console.error); // AggregateError: Все промисы отклонены
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍15
Функциональная область (в function) не охватывает if, for и другие блоки. До ES6 все переменные были глобальны внутри функции. Блочная область (let, const) позволяет избежать утечек переменных и защищает от переопределения в пределах блока.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥3
Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).
asyncИспользуется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.
async function fetchData() {
return 'данные';
}
fetchData().then(data => console.log(data)); // выводит "данные"awaitИспользуется для ожидания результата промиса внутри асинхронной функции
async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.async function fetchData() {
let data = await fetch('https://api.example.com/data');
let json = await data.json();
return json;
}Асинхронный код, написанный с использованием
async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его пониманиеВ асинхронных функциях с
await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.Использование
async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8💊3
Использование отдельных доменов (например,
- разграничить кэш между основным контентом и статикой;
- избежать лишней отправки cookie;
- ускорить загрузку ресурсов браузером (параллельные запросы);
- повысить безопасность (ограничение CORS и хедеров).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👍1💊1
Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).
Использование
max-width вместо width.container {
width: 100%; /* Контейнер занимает всю ширину */
max-width: 1200px; /* Но не больше 1200px */
margin: auto; /* Центрирование */
}Использование Flexbox
.container {
display: flex;
flex-wrap: wrap; /* Перенос элементов, если не влезают */
justify-content: space-between;
}
.item {
width: 48%; /* Два элемента в ряд */
}
@media (max-width: 768px) {
.item {
width: 100%; /* Один элемент в ряд на маленьких экранах */
}
}Использование CSS Grid
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}Изменяют стили в зависимости от ширины экрана.
/* Десктоп (от 1024px) */
body {
font-size: 18px;
}
/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
body {
font-size: 16px;
}
}
/* Телефоны (до 767px) */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
Позволяет загружать разные изображения в зависимости от устройства.
<img
src="image-400.jpg"
srcset="image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Адаптивное изображение">
Управляет масштабированием на мобильных устройствах.
<meta name="viewport" content="width=device-width, initial-scale=1">
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">Контент</div>
<div class="col-md-6 col-sm-12">Контент</div>
</div>
</div>
Tailwind CSS
<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
<div class="bg-blue-500">1</div>
<div class="bg-green-500">2</div>
<div class="bg-red-500">3</div>
</div>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Screen reader — это программа, которая озвучивает содержимое экрана для людей с нарушениями зрения.
Accessibility (доступность) — это практика разработки интерфейсов, которые доступны всем пользователям, включая людей с ограниченными возможностями. Это включает ARIA-атрибуты, контрастность, навигацию с клавиатуры и семантику.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥1