Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке.
Можно менять Frontend и Backend независимо.
Можно использовать разные технологии (например, Vue.js + Django).
Можно легко разделить команды разработчиков.
Frontend не имеет доступа к базе данных.
Все важные вычисления, авторизация, хранение данных происходят на сервере.
API можно защитить токенами (JWT, OAuth).
Логика обработки данных выполняется на сервере.
Клиент получает уже готовые данные, а не загружает огромные файлы.
Можно разрабатывать Frontend и Backend независимо.
Можно подменять сервер на mock-данные во время разработки.
Разделённые приложения общаются через API:
REST API (
GET, POST, PUT, DELETE) GraphQL API (запросы только нужных данных)
WebSockets (реальное время, чаты, онлайн-игры)
GET https://api.example.com/users
Ответ от Backend
[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- link — блокирует рендер до загрузки CSS.
- img — создаёт отложенную загрузку изображения.
- script:
- Без async и defer — блокирует парсинг HTML до полной загрузки и выполнения.
- С defer — выполняется после построения DOM.
- С async — загружается и выполняется параллельно, но не в определённом порядке.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.
Когда браузер загружает HTML, он читает код сверху вниз. Если в
<head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу. Если скрипт загружается в
<head>, он останавливает отрисовку страницы до завершения загрузки. <head>
<script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
<h1>Сайт загружается...</h1>
</body>
Если разместить
<script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript. <body>
<h1>Контент загрузился!</h1>
<script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>
defer – отложенное выполнение после загрузки HTML<head>
<script src="script.js" defer></script>
</head>
async – загрузка и выполнение параллельно <head>
<script src="script.js" async></script>
</head>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
HTTP-коды:
- 1xx — информационные;
- 2xx — успешные;
- 3xx — редиректы;
- 4xx — ошибки клиента (напр. 404 Not Found, 403 Forbidden);
- 5xx — ошибки сервера (напр. 500 Internal Server Error).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Метод
.toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. toString() у примитивов Числа, строки, булевы значения,
null, undefinedДля примитивных типов
toString() работает просто — возвращает строковое представление значения:console.log((123).toString()); // "123"
console.log(true.toString()); // "true"
console.log(false.toString()); // "false"
console.log((3.14).toString()); // "3.14"
Но
null и undefined не имеют метода toString() и вызов приведёт к ошибкеconsole.log(null.toString()); // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка
Поэтому для них лучше использовать
String()console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
toString() у массивов Для массивов
toString() преобразует их в строку, разделяя элементы запятойconsole.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)
По умолчанию метод
toString() у объекта возвращает строку вида [object Object]const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"Если нужно другое поведение, можно переопределить
toString() в объектеconst user = {
name: "Иван",
age: 30,
toString() {
return `Имя: ${this.name}, Возраст: ${this.age}`;
}
};
console.log(user.toString()); // "Имя: Иван, Возраст: 30"Можно переопределять метод
toString() в классахclass Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return `${this.name} (${this.age} лет)`;
}
}
const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"Функции тоже имеют метод
toString(), но он возвращает их исходный кодfunction hello() {
return "Привет!";
}
console.log(hello.toString());
// "function hello() { return 'Привет!'; }"Для стрелочных функций
const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"
Лучше использовать
String(значение), потому что toString() не работает на null и undefinedconsole.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42)); // "42"
console.log(String({ a: 1 })); // "[object Object]"
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это реактивные свойства, которые зависят от других реактивных данных и автоматически пересчитываются, когда зависимости меняются.
Они кешируются до тех пор, пока зависимости не изменятся.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.
Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)
Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;
function increment() {
count += 1;
return count;
}
console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)
Модифицирует переданный аргумент
function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}
let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)Выполняет побочные эффекты (например, изменяет DOM)
function changeTitle(newTitle) {
document.title = newTitle;
}
changeTitle("Новая страница");
console.log(document.title); // "Новая страница"Генерирует случайное значение
function getRandomNumber() {
return Math.random();
}
console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.
Чистый вариант функции
addElement() (не меняет исходный массив) function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}
let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- async загружает и выполняет скрипт сразу, не дожидаясь загрузки документа — полезно для независимых скриптов.
- defer загружает скрипт параллельно, но выполняет после полной загрузки HTML — лучше для скриптов, работающих с DOM.
Оба улучшают производительность, но используются в разных сценариях.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.
Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки:
main и feature.В ветке
feature вы сделали несколько коммитов.Вы хотите объединить изменения из
feature в main.git checkout main
git merge feature
Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки:
main и feature.В ветке
feature вы сделали несколько коммитов.Вы хотите перенести изменения из
feature на текущий конец main.git checkout feature
git rebase main
Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.
Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.
Merge: Конфликты решаются один раз при слиянии.
Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.
Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- CI/CD пайплайны (Jenkins, GitLab, GitHub Actions);
- Сборка и доставка артефактов;
- Docker-контейнеры;
- Размещение в облачных сервисах (Heroku, AWS, GCP, Vercel, Netlify);
- Через scp/rsync или ftp для простых решений.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами. Привязывает
this, чтобы не потерять контекст Позволяет создавать частично примененные функции
Используется в обработчиках событий и таймерах
Пример: потеря
this без bind() const user = {
name: "Иван",
sayHello() {
console.log(`Привет, ${this.name}!`);
},
};
setTimeout(user.sayHello, 1000); // ❌ this = undefinedСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- React.memo — мемоизация компонента.
- useMemo — мемоизация значений.
- useCallback — мемоизация функций.
- shouldComponentUpdate / React.PureComponent — в классовых компонентах.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
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
Flow, Phrasing и Sectioning — считаются основными, так как покрывают структурную, текстовую и организационную основу HTML-документа.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут
draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие. <div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>
<script>
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");
dragItem.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", "Данные элемента");
});
dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Нужно, чтобы разрешить сброс
});
dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
alert("Элемент сброшен: " + data);
});
</script>
Основные события:
dragstart — когда начали тянуть элемент. drag — когда элемент двигается (срабатывает много раз). dragenter — когда курсор заходит в зону сброса. dragover — когда элемент находится над зоной (нужно preventDefault()). dragleave — когда курсор покидает зону сброса. drop — когда элемент отпущен в зоне сброса. dragend — когда перетаскивание завершено (даже если не сбросили). - Перетаскивание файлов в
<input type="file"> (например, загрузка изображений). - Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.
Да, можно использовать другие методы:
Через события мыши (
mousedown, mousemove, mouseup). Через CSS
position: absolute и transform. Через JS-библиотеки (
Sortable.js, React DnD, Draggable.js). Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события
touchstart, touchmove, touchend.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
В React
ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:
Доступ к DOM-элементам
Установка фокуса на элемент
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Установить фокус на текстовое поле
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Установить фокус</button>
</div>
);
}
export default TextInputWithFocusButton;Получение размеров элемента
Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (divRef.current) {
const { width, height } = divRef.current.getBoundingClientRect();
setDimensions({ width, height });
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
Измеряемый элемент
</div>
<p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
</div>
);
}
export default MeasureDiv;Использование в классовых компонентах
Доступ к методам компонента:
import React, { Component } from 'react';
class CustomComponent extends Component {
customMethod() {
console.log('Метод компонента вызван');
}
render() {
return <div>Custom Component</div>;
}
}
class ParentComponent extends Component {
constructor(props) {
super(props);
this.customComponentRef = React.createRef();
}
handleClick = () => {
this.customComponentRef.current.customMethod();
};
render() {
return (
<div>
<CustomComponent ref={this.customComponentRef} />
<button onClick={this.handleClick}>Вызвать метод компонента</button>
</div>
);
}
}
export default ParentComponent;Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React.
ref следует использовать для случаев, которые не могут быть решены этим способом.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
На самом деле, статические методы не добавляются в
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
Это встроенные функции в Array.prototype, позволяющие перебирать, фильтровать, изменять, объединять и сортировать массивы. Примеры: map, filter, reduce, forEach, push, pop, splice, sort.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM