Свойство
box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. Размеры элемента считаются только по `width` и `height`, без учета
padding и border. Если добавить padding или border, фактические размеры элемента увеличатся. .box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: content-box;
}width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры. .box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box;
}Наследует значение
box-sizing от родительского элемента. .parent {
box-sizing: border-box;
}
.child {
box-sizing: inherit; /* Унаследует border-box */
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
- Помогает находить ошибки на этапе написания кода.
- Улучшает стиль кодирования по стандартам (Prettier, Airbnb).
- Повышает читаемость и поддерживаемость кода.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2
AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что:
Используют оптимизированный HTML (AMP HTML)
Ограничивают использование JavaScript
Подключают Google AMP Cache для мгновенной загрузки
Ускоряют загрузку страниц → полезно для мобильных пользователей
Улучшают SEO → Google любит быстрые сайты
Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание
Снижают нагрузку на сервер
AMP-страница – это обычный HTML, но с ограничениями и своими тегами.
<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
<meta charset="UTF-8">
<title>AMP Страница</title>
<link rel="canonical" href="https://example.com/normal-page.html">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-boilerplate>
body { visibility: hidden; }
</style>
<noscript>
<style amp-boilerplate>
body { visibility: visible; }
</style>
</noscript>
</head>
<body>
<h1>Привет, это AMP!</h1>
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7💊5🔥2
color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG). p {
color: red;
}CSS позволяет задавать цвета несколькими способами
Наследование
color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background). body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}currentColor — скрытое золотоЭто специальное значение, которое означает "используй текущее значение
color". Очень полезно для стилизации border, box-shadow, outline и SVG. button {
color: red;
border: 2px solid currentColor; /* Использует color */
}transparent — особый цветp {
color: transparent;
}Когда
rgba() или hsla() лучшеp {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}color и mix-blend-modeМожно заставить текст взаимодействовать с фоном с помощью
mix-blend-modeh1 {
color: white;
mix-blend-mode: difference;
}color в ::selection и ::placeholderНекоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания
color::selection {
background: blue;
color: white;
}
input::placeholder {
color: gray;
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
- jpeg, png, gif, svg, webp, avif.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5👍3🔥1
Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.
В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
Затем передаем эти данные в дочерний компонент через пропсы.
В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.
Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const message = "Привет, дочерний компонент!";
return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent message={message} />
</div>
);
}
export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';
function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>{props.message}</p>
</div>
);
}
export default ChildComponent;
Создаем переменную
message, содержащую строку "Привет, дочерний компонент!".В JSX разметке мы рендерим дочерний компонент
ChildComponent, передавая ему пропс message со значением переменной message. ChildComponent:Принимаем пропс
message через параметр props.Используем
props.message для отображения переданной строки внутри тега <p>.Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const user = {
name: "Иван",
age: 25
};
return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent user={user} />
</div>
);
}
export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';
function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>Имя: {props.user.name}</p>
<p>Возраст: {props.user.age}</p>
</div>
);
}
export default ChildComponent;
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1🤔1
Обычно это происходит, когда ссылки на объекты сохраняются, даже если они больше не нужны: в глобальных переменных, замыканиях, обработчиках событий, коллекциях (Map, Set) и таймерах. GC не может очистить объект, пока есть ссылка на него.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя.
Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.
Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.
На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.
Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.
Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов.
Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов.
Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic.
Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку.
Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем.
Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки.
Отсутствие кэширования: Увеличивает время загрузки для повторных посещений.
JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами.
Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах.
Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью.
Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Любой HTML-элемент может иметь ARIA-атрибут, особенно если он участвует в интерфейсном взаимодействии. Однако ARIA особенно полезна для элементов:
- интерактивных (button, input, a, nav, dialog);
- структурных (section, article, aside, header, footer);
- пользовательских компонентов (custom elements или div, span, выполняющие роль UI).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3
float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Основные значения
float <img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>
.float-img {
float: left;
margin-right: 10px;
}Когда внутри
div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока. <div class="container">
<img src="image.jpg" class="float-img">
<p>Текст обтекает картинку.</p>
</div>
.container {
background: lightgray;
}
.float-img {
float: left;
}Решение 1:
overflow: hidden; .container {
overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}Решение 2:
clearfix (старый способ) .container::after {
content: "";
display: block;
clear: both;
}Чтобы отменить обтекание, используется
clear. <img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>
.float-img {
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}Раньше
float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (
display: flex;) – лучше для адаптивных макетов. CSS Grid (
display: grid;) – мощный инструмент для сложных сеток. .container {
display: flex;
align-items: center;
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
- Code First — быстрее, но не всегда безопасно. Комбинируем: бизнес-критичный код — через TDD, остальное — гибко.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching).
Проблема: поверхностное слежение (`shallow watching`)
JavaScript сравнивает только ссылки на объекты, а не их содержимое.
const obj = { user: { name: "Иван" } };
const copy = obj;
copy.user.name = "Петр";
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)Обычный
Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование: const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };
shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)Для глубокого копирования можно использовать
structuredClone() или JSON.parse(JSON.stringify(obj)): const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";
console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)
В React состояние обновляется только при изменении ссылки (
shallow compare). const [user, setUser] = useState({ name: "Иван" });
useEffect(() => {
console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!
// НЕ сработает:
user.name = "Петр"; // user остался тем же объектомРешение – создавать новый объект при изменении:
setUser(prev => ({ ...prev, name: "Петр" }));Обычный
watch следит только за первой вложенностью watch(user, (newValue) => {
console.log("Изменено:", newValue);
});Глубокое слежение (
deep: true)watch(user, (newValue) => {
console.log("Изменено:", newValue);
}, { deep: true });Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3
Метод bind позволяет создать новую функцию с жёстко привязанным контекстом (this) и при необходимости — предустановленными аргументами. Полезен при передаче методов в колбэки, где может потеряться контекст.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа.
Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов.
Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки.
Основной шаблон
<тип>(<область>): <краткое описание>
добавление новой функциональности
исправление ошибки
изменение документации
исправления, не влияющие на логику (например, форматирование)
переработка кода без изменения функциональности
добавление или обновление тестов
изменения, не влияющие на код (например, обновление зависимостей)
feat(auth): добавлена аутентификация через Google
fix(login): исправлен баг с неверным редиректом
refactor(api): оптимизирован алгоритм фильтрации данных
docs(readme): добавлены инструкции по развертыванию
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
Общение между
iframe и родительской страницей может происходить с помощью: Метода
postMessage (лучший способ) Доступа к
window.frames или window.parent (если тот же домен) Передачи данных через
localStorage или cookies Метод
window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах.*Код в
iframe (child.html) // Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");
Код в родительской странице (index.html)
window.addEventListener("message", (event) => {
console.log("Получено сообщение от iframe:", event.data);
});* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например: window.parent.postMessage({ type: "hello" }, "https://example.com");Код в родительской странице (index.html)
const iframe = document.getElementById("myIframe");
// Ждём, когда iframe загрузится
iframe.onload = () => {
iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};Код в
iframe (child.html) window.addEventListener("message", (event) => {
console.log("Получено сообщение от родителя:", event.data);
});Если
iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую.Родительская страница →
iframe const iframe = document.getElementById("myIframe");
// Получаем объект `window` внутри `iframe`
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";iframe → Родительская страница console.log(window.parent.document.title); // Доступ к заголовку страницы
Можно сохранять данные в
localStorage или cookies, а другая сторона будет их читать. Запись в
localStorage из iframe localStorage.setItem("message", "Привет от iframe!");Чтение
localStorage в родительской странице console.log(localStorage.getItem("message")); // "Привет от iframe!"Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Если данные используются в нескольких независимых компонентах или влияют на поведение всего приложения (например, авторизация, тема, язык), это глобальное состояние. Такие данные лучше выносить в централизованное хранилище.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2👍1