В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными).
Запрашиваем список пользователей:
GET /users HTTP/1.1
Host: api.example.com
Ответ (JSON)
[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]
Отправляем данные нового пользователя:
POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json
{
"name": "Charlie",
"email": "charlie@example.com"
}
Ответ (201 Created)
{
"id": 3,
"name": "Charlie",
"email": "charlie@example.com"
}Заменяем пользователя с ID
1:PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json
{
"name": "Alice Smith",
"email": "alice.smith@example.com"
}
Меняем только имя пользователя
1, не трогая email:PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json
{
"name": "Alice Johnson"
}
Удаляем пользователя с ID
2:DELETE /users/2 HTTP/1.1
Host: api.example.com
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10💊1
В React доступ к DOM-дереву осуществляется через рефы (Refs). Используется useRef для функциональных компонентов или React.createRef для классовых.
Также можно использовать document.querySelector() внутри useEffect, но это не рекомендуется.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥4🤔1
Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри
<head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. Улучшают SEO (поисковую оптимизацию)
Управляют отображением в соцсетях и поисковиках
Настраивают адаптивность страницы (например, на мобильных устройствах)
Определяют кодировку, язык и авторство страницы
Кодировка страницы
<meta charset="UTF-8">
Описание страницы (SEO)
<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">
Ключевые слова (SEO, устарело)
<meta name="keywords" content="рецепты, еда, кулинария, блюда">
Автор страницы
<meta name="author" content="Иван Иванов">
Запрет индексации страницы
<meta name="robots" content="noindex, nofollow">
Адаптивность на мобильных устройствах
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Социальные сети (Open Graph, Twitter Cards)
Facebook и другие соцсети (Open Graph)
<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
Twitter-карточки
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Сходства:
- Оба асинхронные;
- Позволяют работать с отложенными значениями.
Отличия:
- Promise — одноразовый, сразу запускается;
- Observable — ленивый, запускается при подписке, может вернуть несколько значений и быть отменён.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥3
Сжатие без потери качества: Используйте инструменты, такие как 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
👍11💊2
- Через CSS:
width: 100%;
- Убедиться, что родительский элемент имеет ширину (не auto, не inline).
- Иногда нужно указать display: block или flex-grow: 1 в флекс-контейнере.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍6
Методы call, apply и bind принадлежат к функциональному объекту
Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.Вызывает функцию, явно устанавливая
this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.function greet(message, name) {
console.log(${message}, ${name}. This is ${this});
}
greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"Очень похож на
call, но принимает аргументы в виде массива, а не по отдельности.function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст
this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍18
Margin collapse — это схлопывание внешних отступов между вертикально соседствующими элементами.
Если один элемент имеет margin-bottom, а следующий — margin-top, будет применён наибольший из них, а не сумма. Это упрощает вертикальные отступы.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍8🔥5
Forwarded from easyoffer
Напоминаю, что в честь релиза запускаем акцию.
Первые 500 покупателей получат:
🚀 Скидку 50% на PRO тариф на 1 год
🎁 Подарок ценностью 5000₽ для тех, кто подписан на этот канал
🔔 Подпишитесь на этот канал: https://t.me/+b2fZN17A9OQ3ZmJi
В нем мы опубликуем сообщение о релизе в первую очередь
Please open Telegram to view this post
VIEW IN TELEGRAM
💊2🤔1
В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).
<img> – самый простой способ (браузер сам загружает) <img src="https://example.com/image.jpg" alt="Картинка">
CSS (
background-image) – если нужно фоновое изображение .element {
background-image: url("https://example.com/image.jpg");
background-size: cover;
}Можно загрузить изображение как Blob и создать временный URL.
fetch("https://example.com/image.jpg")
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById("img").src = url;
});XMLHttpRequest – старый метод (устарел, но работает) const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";
xhr.onload = function () {
const url = URL.createObjectURL(xhr.response);
document.getElementById("img").src = url;
};
xhr.send();
Можно загрузить картинку и нарисовать её на
<canvas>. const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
img.src = "https://example.com/image.jpg";WebSocket – если изображение передаётся в реальном времени
const socket = new WebSocket("wss://example.com/socket");
socket.onmessage = function (event) {
const url = URL.createObjectURL(event.data);
document.getElementById("img").src = url;
};data URL (Base64) – если нужно хранить изображение в тексте <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Vue 2:
- v-model работает только с одним пропом: value.
- Событие по умолчанию — input.
- Используется для двусторонней привязки в form-элементах и компонентах.
- В кастомных компонентах нужно явно прописывать props: ['value'] и эмитить input.
Vue 3:
- v-model стал более гибким:
- Можно задавать имя пропа и события: v-model:foo="bar" → проп foo, событие update:foo.
- Можно иметь несколько v-model на компонент.
- Поведение более явно выражено, лучше читаемость и масштабируемость.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥3
Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным.
pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода.Вместо вложенных вызовов функций (когда результат одной функции передается в другую)
pipe упрощает цепочку, делая её линейной.Код становится проще для понимания, особенно если функций много.
Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода.
pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую.const pipe = (...functions) => (input) =>
functions.reduce((acc, fn) => fn(acc), input);
// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;
// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);
console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121
В контексте RxJS
pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);
// Используем pipe для применения операторов
numbers$
.pipe(
filter((num) => num % 2 === 0), // Оставляем только четные
map((num) => num * 10) // Умножаем их на 10
)
.subscribe((result) => console.log(result));
// Вывод: 20, 40Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍6
Чтобы стили применялись только внутри одного компонента и не влияли на другие, их можно ограничить локально. Для этого используется специальная настройка, которая говорит системе Vue изолировать эти стили от внешней среды. Это удобно, если ты хочешь, чтобы классы с одинаковыми названиями не конфликтовали между компонентами.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊10🔥5
Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки.
Главные особенности
элементов в строку или колонку
пространства между элементами
без
float и position элементов
Когда включается
display: flex;, элементы внутри него становятся флекс-элементами. Flex-контейнер → родительский элемент (
display: flex;) Flex-элементы → дочерние элементы контейнера
Главная ось (main axis) → ось, вдоль которой расположены элементы
Поперечная ось (cross axis) → перпендикулярная ось
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: flex;
}Включает Flexbox для контейнера.
.container {
display: flex;
}Определяет, как располагаются элементы (по горизонтали или вертикали).
.container {
flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
flex-direction: column; /* В столбик */
flex-direction: row-reverse; /* Справа налево */
flex-direction: column-reverse; /* Вниз-вверх */
}.container {
justify-content: flex-start; /* По умолчанию, слева направо */
justify-content: center; /* Центр */
justify-content: flex-end; /* Справа налево */
justify-content: space-between; /* Равномерное распределение */
justify-content: space-around; /* С отступами */
justify-content: space-evenly; /* Равномерные промежутки */
}.container {
align-items: stretch; /* По умолчанию (растягивает) */
align-items: center; /* Центр по вертикали */
align-items: flex-start; /* Вверх */
align-items: flex-end; /* Вниз */
align-items: baseline; /* По базовой линии текста */
}.container {
flex-wrap: nowrap; /* По умолчанию – все в одной строке */
flex-wrap: wrap; /* Элементы переносятся */
flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}Работает, когда элементы занимают несколько строк.
.container {
align-content: flex-start; /* Вверх */
align-content: flex-end; /* Вниз */
align-content: center; /* По центру */
align-content: space-between; /* Равномерное распределение */
align-content: space-around; /* С отступами */
align-content: stretch; /* Растянуть (по умолчанию) */
}flex-grow – рост элемента .item {
flex-grow: 1; /* Растянется, если есть место */
}flex-shrink – сжатие элемента .item {
flex-shrink: 0; /* Не уменьшаться */
}flex-basis – начальный размер элемента.item {
flex-basis: 200px; /* Фиксированный размер */
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
- Позволяет не блокировать основной поток и обрабатывать другие задачи.
- Обеспечивает реактивный UI, особенно при запросах к сети или базе.
- Улучшает производительность и отзывчивость.
- Это обязательное условие масштабируемости в современном вебе.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
Функциональное программирование (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
👍7🤔1
- DOM позволяет программам читать и изменять документ структурно, стилистически и содержательно, реагируя на пользовательские взаимодействия.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥4
Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут
style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>
Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут
style, то они будут применены.Inline стили (наивысший приоритет)
ID селекторы
Классы, псевдоклассы и атрибуты
Элементы и псевдоэлементы (наименьший приоритет)
Стоит отметить, что существует способ переопределить даже их с помощью правила
!important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5