Псевдоклассы позволяют стилизовать элементы в определённом состоянии. Примеры:
- :hover — при наведении;
- :active — при нажатии;
- :focus — при получении фокуса;
- :first-child, :last-child — для первого/последнего дочернего элемента;
- :nth-child(n) — выбор по порядку;
- :not() — отрицание условия;
- :disabled, :checked, :required — состояния форм.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥3
Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).
Относительная ссылка
<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
👍9
Module Pattern — это способ инкапсулировать логику и данные внутри функции, скрывая внутренние детали и открывая только нужное API. Применяется для:
- организации кода;
- избежания глобальных переменных;
- создания приватных и публичных методов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9
В Vue 2 и Vue 3 (Options API) методы жизненного цикла (
mounted
, created
, beforeDestroy
и др.) должны быть обычными функциями, а не стрелочными (() => {}
). Когда Vue вызывает метод жизненного цикла, он автоматически привязывает
this
к экземпляру компонента. export default {
data() {
return { message: "Привет!" };
},
mounted() {
console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
}
};
Стрелочные функции не создают свой собственный
this
, а берут this
из внешнего контекста (того, что было при их создании). export default {
data() {
return { message: "Привет!" };
},
mounted: () => {
console.log(this.message); // ❌ Ошибка: this === undefined
}
};
Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:
export default {
data() {
return { message: "Привет!" };
},
mounted() {
setTimeout(() => {
console.log(this.message); // ✅ Работает, this берётся из `mounted()`
}, 1000);
}
};
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
- Прототипное наследование является механизмом, позволяющим объектам использовать свойства и методы, определенные в других объектах.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.
Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую
document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});
Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});
Если мы добавляем кнопки динамически, обработчик все равно будет работать
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});
// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
- HTML — структура контента.
- CSS — внешний вид, стилизация.
- JavaScript — интерактивность, логика, обработка событий.
Все три языка образуют основу фронтенд-разработки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10💊5🤔1
Forwarded from easyoffer
Новая фича на easyoffer – Автоотлики
Вы автоматически откликаетесь на подходящие вам вакансии. Попробуйте её бесплатно и начните получать больше предложений о работе.
🚀 Запуск занимаем всего 3 минуты, а экономит очень много времени
🛡 Это безопасно: easyoffer официально одобрен HeadHunter и прошел его модерацию.
🥷🏻 Автоотклик незаметен для рекртера. Автоотклик ничем не отличается от обычного отклика, который вы делаете вручную
Рекрутеры давно используют автоматизацию для поиска кандидатов. Так почему вы должны откликаться вручную?
💡Совет – Добавьте шаблон сопроводительного письма, чтобы откликаться на большее количество вакансий (на некоторые вакансии нельзя откликнуться без сопроводительного)
Попробовать бесплатно → https://easyoffer.ru/autoapply
Вы автоматически откликаетесь на подходящие вам вакансии. Попробуйте её бесплатно и начните получать больше предложений о работе.
🚀 Запуск занимаем всего 3 минуты, а экономит очень много времени
🛡 Это безопасно: easyoffer официально одобрен HeadHunter и прошел его модерацию.
🥷🏻 Автоотклик незаметен для рекртера. Автоотклик ничем не отличается от обычного отклика, который вы делаете вручную
Рекрутеры давно используют автоматизацию для поиска кандидатов. Так почему вы должны откликаться вручную?
💡Совет – Добавьте шаблон сопроводительного письма, чтобы откликаться на большее количество вакансий (на некоторые вакансии нельзя откликнуться без сопроводительного)
Попробовать бесплатно → https://easyoffer.ru/autoapply
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
👍6💊1
Атрибуты — это то, что написано в HTML (<input value="hello">). Свойства — это то, что доступно в объекте DOM (input.value). Атрибут задаёт начальное значение свойства, но при изменении свойства атрибут не меняется автоматически.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6💊2
В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.
Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.
var globalVar = 'Я глобальная переменная';
function testFunction() {
console.log(globalVar); // Доступно
}
testFunction();
console.log(globalVar); // Доступно
Переменные, объявленные с помощью
var
внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.function testFunction() {
var functionVar = 'Я внутри функции';
console.log(functionVar); // Доступно
}
testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна
Переменные, объявленные с помощью
let
и const
, имеют область видимости, ограниченную ближайшим блоком {}
.if (true) {
let blockVar = 'Я внутри блока';
console.log(blockVar); // Доступно
}
console.log(blockVar); // Ошибка: переменная blockVar недоступна
При использовании модулей (например,
import
и export
в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.export const myVar = 'Я переменная из модуля';
import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
Синхронный код выполняется пошагово. Асинхронный — может запускаться и завершаться позже, с использованием callback, promise или async/await.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍2
MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set).
В MobX основная функция для создания реактивного состояния —
observable()
. Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств. import { observable } from "mobx";
const store = observable({
count: 0,
increment() {
this.count++;
},
});
console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилось
Vue-компоненты подписываются на реактивные свойства, когда они рендерятся внутри
observer()
. import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";
export default observer(defineComponent({
setup() {
return {
store,
};
},
template: `<div>{{ store.count }}</div>`,
}));
MobX автоматически отслеживает зависимости во время рендера.
Когда компонент использует
store.count
, MobX **"запоминает", что он зависит от count
. Когда
count
изменяется, MobX перерисовывает только этот компонент. import { computed } from "mobx";
const store = observable({
count: 1,
get doubleCount() {
return this.count * 2;
},
});
console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)
MobX не просто перерисовывает всё — он оптимизирует рендеринг.
запускается сразу и при изменении любого используемого свойства.
запускается только когда меняется конкретное наблюдаемое свойство.
выполняется один раз, когда условие становится
true
. import { autorun } from "mobx";
const store = observable({ count: 0 });
autorun(() => {
console.log("Count изменился:", store.count);
});
store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
HTML5 включает:
- Разметку и семантику (новые теги: article, nav, section);
- API (Canvas, Geolocation, Drag-and-Drop);
- Мультимедиа (<video>, <audio>);
- Storage (LocalStorage, SessionStorage, IndexedDB);
- Сетевые возможности (WebSocket, SSE, Fetch);
- Offline (Service Workers, Cache API);
- Формы и валидация (input types, pattern, required и т.д.).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8💊3🤔2
Разделение на 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
👍8
Некоторые теги (strong, em) имеют семантический смысл — важны для SEO и доступности. Например, strong указывает на важность, а не только жирный стиль.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍4
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}
Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}
Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12💊1
Мутации — это единственный способ изменить данные в state. Они должны быть синхронными и простыми. Каждый раз, когда нужно поменять что-то в хранилище — например, добавить элемент в массив или изменить флаг — это делается через вызов мутации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
Нечистая функция (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
👍8
Props — это механизм передачи данных между компонентами. Родитель передаёт данные дочернему компоненту через props.
Они позволяют:
- Делать компоненты гибкими и переиспользуемыми.
- Управлять поведением дочерних компонентов.
- Разделять логику отображения и данные.
Props неизменяемы — это защита от случайных изменений внутри компонентов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3