- Через разграничение прав (RBAC) — фильтровать данные на сервере в зависимости от роли пользователя.
- Использовать view-модели или DTO, в которых отфильтровано содержимое.
- Настроить фильтрацию SQL-запросов (например, WHERE role = ?).
- В UI можно скрывать/показывать поля, но не полагаться только на фронт.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
Для добавления слушателя события используется метод
addEventListener.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button was clicked!');
});
</script>
</body>
</html>
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как
onClick, onChange и т.д.import React from 'react';
function App() {
const handleClick = () => {
alert('Button was clicked!');
};
return (
<div>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default App;
Если вы используете его, добавление слушателей событий также очень просто и удобно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click me</button>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
alert('Button was clicked!');
});
});
</script>
</body>
</html>
Позволяет создавать динамичные и отзывчивые интерфейсы.
Возможность реагировать на различные действия пользователей.
В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Event Loop отвечает за выполнение кода, управление очередями микротасков и макротасков. Он поочерёдно берёт задачи из очереди и выполняет их, не блокируя UI.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS
flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
Основная ось — горизонтальная, элементы располагаются справа налево.
Основная ось — вертикальная, элементы располагаются сверху вниз.
Основная ось — вертикальная, элементы располагаются снизу вверх.
Горизонтальное направление (слева направо):
.container {
display: flex;
flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}Горизонтальное направление (справа налево):
.container {
display: flex;
flex-direction: row-reverse;
}Вертикальное направление (сверху вниз):
.container {
display: flex;
flex-direction: column;
}Вертикальное направление (снизу вверх):
.container {
display: flex;
flex-direction: column-reverse;
}Пример HTML и CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Direction</title>
<style>
.container {
display: flex;
flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
border: 1px solid #000;
height: 200px;
}
.item {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Макро-задачи (macro-tasks) — это крупные задачи, такие как события ввода-вывода, таймеры или сетевые запросы, которые планируются в основной очереди событий. Микро-задачи (micro-tasks) — это задачи меньшего приоритета, которые выполняются сразу после завершения текущего блока кода, но до выполнения следующих макро-задач (например, Promise или MutationObserver). Микро-задачи всегда выполняются перед макро-задачами, что позволяет им завершаться быстрее. Это важное отличие в управлении асинхронным кодом и приоритизацией событий.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта
window.history. Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.
history.back(); // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед
Пример кнопок "Назад" и "Вперед"
<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>
Этот метод позволяет перемещаться на определенное количество шагов:
history.go(-1) – назад на 1 страницу history.go(1) – вперед на 1 страницу history.go(-2) – назад на 2 страницы history.go(-2); // Перейти на две страницы назад
history.go(3); // Перейти на три страницы вперед
Если нужно узнать, сколько страниц в истории текущей сессии:
console.log(history.length); // Количество записей в истории
Если нужно изменить URL без перезагрузки страницы, можно использовать:
history.pushState(state, title, url)Добавляет новый URL в историю (как будто пользователь перешел по ссылке).
history.pushState({ page: 1 }, "Title 1", "/page1");history.replaceState(state, title, url)Заменяет текущий URL (не добавляет новую запись в историю).
history.replaceState({ page: 2 }, "Title 2", "/page2");Пример динамического изменения истории:
document.querySelector("button").addEventListener("click", () => {
history.pushState({ page: "about" }, "About Page", "/about");
});Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события
popstatewindow.addEventListener("popstate", (event) => {
console.log("Текущий state:", event.state);
});Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Все три тега (
<div>, <img>, <p>) используются в HTML, но у них разные предназначения и свойства. Блочный элемент, используется для группировки других элементов и стилизации.
<div class="container">
<p>Привет, мир!</p>
<img src="image.jpg" alt="Картинка">
</div>
Особенности
<div> - Не несёт семантического значения (просто контейнер).
- По умолчанию блочный (занимает всю ширину).
- Используется для группировки и стилизации через CSS.
Строчно-замещающий элемент, предназначен для вставки картинок.
<img src="logo.png" alt="Логотип">
Особенности
<img> - Не имеет закрывающего тега (
<img> – одиночный тег). - Строчно-замещающий (ведёт себя как
inline, но может иметь размеры). - Заменяется на картинку при отображении страницы.
- Требует
alt для доступности и SEO. Блочный элемент, предназначен для разметки текста.
<p>Это текст в абзаце.</p>
Особенности
<p> - Блочный (начинается с новой строки).
- Используется только для текста.
- Внутри нельзя размещать другие блочные элементы (
<div>, <p>). Ошибка
<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- border-box включает padding и border в размер элемента — проще контролировать итоговую ширину.
- content-box — по умолчанию: ширина задаётся только для содержимого, а padding и border добавляются отдельно.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы.
Объектно-ориентированное программирование подходит, когда:
Нужно моделировать реальные объекты и их поведение
Приложение состоит из множества взаимодействующих сущностей
Важно инкапсулировать данные и защитить их от прямого изменения
Требуется повторное использование кода через наследование и полиморфизм
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} издает звук`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} лает`);
}
}
const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"Функциональный подход хорош, если
Код должен быть чистым и предсказуемым
Нужно избегать изменений состояния (иммутабельность)
Требуется много работы с массивами, коллекциями данных
Нужно легко писать асинхронный код
const double = num => num * 2;
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);
console.log(doubledNumbers); // [2, 4, 6, 8]
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это логические операторы, которые используются для проверки условий:
- or (||) — возвращает true, если хотя бы одно из условий истинно.
- and (&&) — возвращает true, только если все условия истинны.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).
Относительная ссылка
<a href="../contact.html">Контакты</a>
Абсолютная ссылка
<a href="https://example.com/contact.html">Контакты</a>
Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.
<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->
Используются два символа точки (
..) для перехода на уровень выше.<a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->
Указывают путь относительно корня веб-сайта, начиная с
/.<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->
Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через
localhost), вам не нужно указывать абсолютный путь с доменом.Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней.
Меньше текста в коде, особенно если проект содержит множество ссылок.
Ссылка на файл в текущей папке
<a href="file.html">Файл в текущей папке</a>
Ссылка на файл в подкаталоге
<a href="subfolder/file.html">Файл в подкаталоге</a>
Ссылка на файл в родительской папке
<a href="../file.html">Файл в родительской папке</a>
Ссылка на файл относительно корня сайта
<a href="/folder/file.html">Файл в папке от корня</a>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
1. Промисы — основной способ в современных браузерах:
2. fetch('/api').then(response => callback(response));
3. async/await — оборачиваем функцию в async, а внутри можно использовать await:
4. const callback = async () => {
5. const result = await fetch(...);
6. // обработка
7. };
8. Таймеры и события — классические способы:
9. setTimeout(() => callback(), 1000);
10. element.addEventListener('click', () => callback());
Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
em зависит от размера шрифта родителя (font-size). .parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}Но если
.child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя..parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}
.grandchild {
font-size: 2em; /* 2 * 30px = 60px */
}rem всегда зависит от font-size у <html>. html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 2 * 16px = 32px */
}Используйте
rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте
em, если хотите, чтобы элементы зависели от родителяСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- Layered architecture — с разделением на controller, service, repository;
- Hexagonal architecture — с портами/адаптерами;
- Microservices с gRPC/REST;
- GraphQL gateway с Apollo;
- Event-driven через Kafka/RabbitMQ;
- Serverless архитектура (AWS Lambda, Firebase Functions).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
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
Мемоизация (React.memo, useMemo, useCallback) основана на сравнении входных данных. Для объектов и функций сравнение происходит по ссылке.
Если ссылка на объект или функцию изменилась — React считает, что данные изменились. Даже если внутренности одинаковые.
Поэтому важно сохранять одну и ту же ссылку, если значение не изменилось, иначе мемоизация не сработает и будет лишняя перерисовка.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне.
Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.
class UserService {
constructor() {
this.db = new Database(); // Прямо создаем зависимость
}
getUser(id) {
return this.db.findUserById(id);
}
}С DI (гибкость)
class UserService {
constructor(db) {
this.db = db; // DI передает зависимость извне
}
getUser(id) {
return this.db.findUserById(id);
}
}
// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);С DI можно подменять зависимости на заглушки (mock, fake, stub).
const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔
С DI (можно подменить зависимость)
class FakeDatabase {
findUserById(id) {
return { id, name: "Тестовый пользователь" };
}
}
const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);
console.log(userService.getUser(1)); // ✅ Тест без реальной БДДопустим, сначала использовали
MySQLDatabase, но решили перейти на MongoDatabase. class UserService {
constructor() {
this.db = new MySQLDatabase(); // Нужно менять здесь
}
}С DI (добавляем новую зависимость без изменения кода UserService)
const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);
В крупных приложениях удобно использовать DI-контейнер (например,
InversifyJS для JavaScript/TypeScript). import "reflect-metadata";
import { Container, injectable, inject } from "inversify";
@injectable()
class Database {
findUserById(id) {
return { id, name: "База данных" };
}
}
@injectable()
class UserService {
constructor(@inject(Database) db) {
this.db = db;
}
getUser(id) {
return this.db.findUserById(id);
}
}
// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();
// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Событие, которое срабатывает при потере фокуса элементом формы, называется
blur.Событие
blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.blur срабатывает, когда элемент теряет фокус, то есть пользователь:Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события
focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например,
onblur).2. JavaScript через метод
addEventListener.Пример на практике
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример blur</title>
<script>
function validateInput(event) {
const input = event.target;
if (input.value.trim() === "") {
alert("Поле не должно быть пустым!");
}
}
document.addEventListener("DOMContentLoaded", () => {
const inputElement = document.getElementById("name");
inputElement.addEventListener("blur", validateInput);
});
</script>
</head>
<body>
<form>
<label for="name">Введите имя:</label>
<input type="text" id="name" name="name" />
<button type="submit">Отправить</button>
</form>
</body>
</html>
Событие
blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.// Работает только для конкретного элемента
element.addEventListener("blur", handler);
// Для делегирования используют focusout
parentElement.addEventListener("focusout", handler);
Событие
change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM