📎 Основные инструменты для анализа и форматирования кода

Поддержка кода так же важна, как его написание. Если код плохо организован, это может привести к:
- Ошибкам, которые сложно обнаружить.
- Сложностям в его понимании и доработке.
- Несоответствию стилей написания.

Вот ключевые инструменты, которые помогут избежать этих проблем:

✔️ ESLint — Линтер для JavaScript/TypeScript

Проблема: Ошибки и несоответствие стандартам кода.
Решение:
- Находит баги и предупреждает о потенциальных проблемах.
- Проверяет стиль написания (например, использование ; или длину строк).
- Исправляет часть ошибок автоматически.

const unusedVar = 42; // unusedVar не используется
console.log('Hello')

✔️ Prettier — Инструмент для форматирования кода

Проблема: Разный стиль оформления у разработчиков.
Решение: Приводит код к единому виду (отступы, кавычки, длина строк и др.).

// До форматирования:
function test ( ) {console.log( "Hello!" )}

// После Prettier:
function test() {
  console.log("Hello!");
}

✔️ Stylelint — Линтер для CSS/SCSS

Проблема: Ошибки и несоответствие стандартам в стилях.
Решение: Проверяет чистоту и стандарт кода CSS/SCSS.

button {
  color: red;
  color: blue; /* Ошибка: дублирование свойства */
}

✔️ PostCSS — Обработчик CSS

Проблема: Сложность управления стилями в крупных проектах.
Решение:
- Добавляет вендорные префиксы.
- Минифицирует стили для производительности.

/* Исходный код: */
display: flex;

/* После PostCSS: */
display: -webkit-box;
display: -ms-flexbox;
display: flex;

✔️ Husky — Автоматизация проверки перед коммитом

Проблема: Внесение невалидного кода в репозиторий.
Решение: Запускает проверки (линтеры, тесты) перед коммитом.

Пример: Husky не позволит закоммитить файлы, не прошедшие ESLint.

✔️ lint-staged — Проверка только изменённых файлов

Проблема: Долгое время проверки всего проекта.
Решение: Проверяет только изменённые файлы в коммите, ускоряя процесс.

Пример: Если вы изменили только app.js, линтер будет запущен только для этого файла.

Эти инструменты помогают писать код, который легко поддерживать, тестировать и развивать.

#eslint #husky #prettier #postcss

🔼 Почему важно использовать lazy-loading

Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.

⚠️ Проблема

При загрузке страницы браузер загружает все ресурсы сразу, даже те, которые пользователь не видит. Это увеличивает время загрузки и может ухудшить пользовательский опыт.

✔️ Решение

Lazy-loading изображений
Современный HTML позволяет указать атрибут loading="lazy":

<img src="example.jpg" alt="Описание" loading="lazy" />

Это простой и поддерживаемый способ ленивой загрузки.

Lazy-loading компонентов в React
В React можно использовать React.lazy и Suspense:

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<div>Загрузка...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

Компонент HeavyComponent загрузится только тогда, когда он понадобится.

💎 Преимущества
- Ускоряет загрузку страницы.
- Снижает объем передаваемых данных.
- Улучшает производительность и SEO.

Используйте lazy-loading, чтобы сделать ваши проекты быстрее и удобнее для пользователей.

#lazy #react #optimization

🎮 Изменение свойств DOM и их влияние на Repainting и Layouting

Когда изменяется DOM, браузер перерасчитывает его внешний вид и положение на экране. Этот процесс делится на два этапа:

- Layout (или reflow) – перерасчёт геометрии элементов (размеры, положение, отступы и т.д.).
- Repainting – перерисовка внешнего вида элементов (цвет, тень, шрифт и т.д.) без изменения их размеров или положения.

➕ 1. Layout (Reflow)
Что вызывает Layout? Изменения, влияющие на размеры, положение или геометрию элементов. После Layout, браузеру необходимо заново отрисовать элемент (Repainting).

Примеры действий:

// Изменение размеров элемента:
element.style.width = "200px";
element.style.height = "100px";

// Изменение положения (например, top, left, margin, padding):
element.style.margin = "20px";
element.style.top = "50px";

// Добавление или удаление DOM-элементов:
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);

// Изменение шрифта, которое изменяет размеры текста:
element.style.fontSize = "24px";

// Изменение значения display или position:
element.style.display = "block";
element.style.position = "absolute";

Оптимизация: Layout – затратный процесс, поэтому избегайте его частого вызова. Например, изменения в цикле следует группировать через requestAnimationFrame.

➕ 2. Repainting
Что вызывает Repainting? Изменения внешнего вида элемента, которые не влияют на его размеры или положение.

Примеры действий:

// Изменение цвета фона:
element.style.backgroundColor = "blue";

// Изменение цвета текста:
element.style.color = "red";

// Изменение тени:
element.style.boxShadow = "5px 5px 10px gray";

// Прозрачность:
element.style.opacity = "0.5";

Оптимизация: Хотя Repainting менее затратный, чем Layout, частые изменения могут вызывать визуальные задержки. Используйте classList для массового применения стилей.

✔️ Советы для оптимизации производительности
Избегайте частого обращения к Layout-метрикам. Методы, такие как offsetWidth, offsetHeight, getComputedStyle и подобные, вызывают синхронный Layout. Если нужно получить несколько значений, лучше сохранять их в переменные.

// Пример (неоптимально):
const width = element.offsetWidth;
const height = element.offsetHeight;

// Пример (оптимально):
const { offsetWidth, offsetHeight } = element;

Используйте классы вместо инлайн-стилей. Вместо применения стилей по одному:

element.style.color = "white";
element.style.backgroundColor = "black";

// Применяйте класс:
element.classList.add("dark-theme");

Используйте transform и opacity для анимаций. Эти свойства не вызывают Layout или Repainting. Браузер оптимизирует их через GPU:

element.style.transform = "translateX(100px)";
element.style.opacity = "0.5";

Группируйте изменения через requestAnimationFrame. Это поможет избежать промежуточных пересчётов:

requestAnimationFrame(() => {
  element.style.width = "300px";
  element.style.height = "150px";
});

#browser #repainting #reflow

🛡 Разновидности атак на веб-приложения: XSS, CSRF, Man-in-the-Middle и другие

Веб-приложения ежедневно подвергаются множеству угроз, которые могут повлиять на безопасность данных, пользователей и компаний. В этом посте мы разберем основные виды атак, их последствия и способы защиты.

1. XSS (Cross-Site Scripting)

Атака XSS позволяет злоумышленнику внедрить вредоносный скрипт в веб-страницу, который затем выполняется на стороне пользователя. Это может привести к краже данных, подмене контента или захвату сессии.

Представьте форму комментариев на сайте. Если введённый текст отображается без проверки, злоумышленник может вставить скрипт:

<noscript>alert('Ваши данные украдены!');</noscript>

Этот скрипт выполнится у других пользователей, открывших страницу.

В 2020 году атака XSS была использована для фишинговых атак через популярные SaaS-сервисы.

Как защититься:
- Используйте экранирование данных (escaping) перед их выводом.
- Включите Content Security Policy (CSP).
- Проверяйте и очищайте вводимые данные (включая HTML).
- Ограничивайте использование опасных функций, таких как innerHTML.

2. CSRF (Cross-Site Request Forgery)

CSRF-атака заставляет пользователя выполнить нежелательное действие на сайте, на котором он авторизован. Это может быть перевод денег или изменение настроек.

Если пользователь авторизован на банковском сайте, злоумышленник может подставить ссылку:

<img src="https://bank.com/transfer?amount=1000&to=attacker" />

Когда пользователь откроет эту ссылку, запрос выполнится от его имени.

В 2008 году через CSRF злоумышленники массово взламывали аккаунты в социальных сетях, отправляя вредоносные сообщения друзьям пользователей.

Как защититься:
- Используйте CSRF-токены в формах и запросах.
- Применяйте заголовок SameSite для cookies.
- Проверяйте источник запросов, например, с помощью заголовка Referer.

3. Man-in-the-Middle (MitM)

MitM-атака позволяет злоумышленнику перехватывать и модифицировать данные, передаваемые между пользователем и сервером.

Если пользователь подключён к общественному Wi-Fi без шифрования, злоумышленник может перехватить данные формы входа на сайт.

В 2015 году хакеры атаковали публичные Wi-Fi сети в аэропортах, перехватывая логины и пароли пользователей.

Как защититься:
- Всегда используйте HTTPS.
- Применяйте HSTS (HTTP Strict Transport Security).
- Проверяйте сертификаты серверов.
- Избегайте использования открытых Wi-Fi сетей без VPN.

4. SQL Injection

SQL-инъекция позволяет злоумышленнику вмешиваться в базу данных приложения, выполняя произвольные SQL-запросы.

На сайте с формой авторизации вводится:

' OR '1'='1

Это может обойти проверку логина и пароля.

В 2017 году через SQL-инъекцию была взломана база данных компании Equifax, что привело к утечке данных 143 миллионов человек.

Как защититься:
- Используйте подготовленные запросы (prepared statements).
- Проверяйте входные данные.
- Избегайте прямого динамического формирования SQL-запросов.

5. DDoS (Distributed Denial of Service)

DDoS-атака перегружает сервер, делая его недоступным для пользователей.

Злоумышленники отправляют тысячи запросов на сайт одновременно, заставляя сервер тратить все ресурсы на обработку этих запросов.

В 2016 году произошла крупнейшая DDoS-атака на провайдера Dyn, что вызвало сбои в работе сайтов Amazon, Twitter и Reddit.

Как защититься:
- Используйте CDN с защитой от DDoS (например, Cloudflare).
- Настройте ограничения на количество запросов (rate limiting).
- Мониторьте и фильтруйте подозрительный трафик.

Понимание и предотвращение атак — ключ к созданию безопасных веб-приложений. Используйте лучшие практики и будьте в курсе новых угроз. Ведь безопасность пользователей и данных — это основа доверия к вашему продукту.

#security #web

🖥 Логика Дженериков в TypeScript: Generics, Extends и Conditional Types

В этом видео рассмотрена одна из ключевых тем в TypeScript — Дженерики (Generics). Вы узнаете, как использовать дженерики для создания универсального и переиспользуемого кода.

Мы подробно разберем:
- Примеры работы с дженериками на функциях, классах, интерфейсах, типах, компонентах и хуках.
- Условные типы (conditional types) и ограничения через extends.
- Логику использования дженериков, чтобы вы могли применять их эффективно и уверенно.

Дженерики — это основа современного программирования в TypeScript, позволяющая писать чистый, безопасный и гибкий код. Умение работать с дженериками помогает создавать сложные и масштабируемые проекты.

После просмотра этого видео вы сможете:
- Разрабатывать универсальные функции и компоненты.
- Переиспользовать код без потери строгой типизации.
- Понимать сложные структуры и писать более читаемый и надежный код.

Этот курс подходит для всех, кто хочет углубить свои знания в TypeScript и научиться писать действительно крутой код.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#typenoscript #frontend #generics #дженерики

🖥 Задания для закрепления Дженериков в TypeScript.

Посмотрите видео -> Выполните задания самостоятельно.

Задание 1
Создайте функцию createArray с использованием дженериков. Функция должна принимать два аргумента:
- Тип элемента T,
- Количество элементов length — число, указывающее количество элементов в массиве.

Функция должна возвращать массив из указанного числа элементов типа T. Все элементы массива должны быть равными null.

Напишите тесты для функции:
- Проверьте, что она корректно создаёт массивы для различных типов (`number`, string, `boolean`).
- Проверьте, что длина массива соответствует указанному числу length.

function createArray(length: any): any {
  // Реализуйте функцию
}

// Пример теста
const numberArray = createArray(3); // Ожидается: [null, null, null]
const stringArray = createArray(2); // Ожидается: [null, null]

Задание 2
Создайте дженерик Box<T> для упаковки значений. Функция должна принимать значение типа T и возвращать объект с этим значением в свойстве value.

Напишите функцию getBoxValue(box) для извлечения значения из упакованного объекта. Функция должна:
- Возвращать значение из объекта,
- Выбрасывать ошибку, если тип T не соответствует ожидаемому.

Например, если тип в коробке — это строка, функция должна извлечь строку, но выбросить ошибку, если тип окажется другим.

type Box = {
   // Реализуйте дженерик
};

function getBoxValue(box: any): any {
  // Реализуйте функцию
}

// Пример теста
const stringBox = { value: 'Hello' };
const extractedValue = getBoxValue(stringBox); // Ожидается: 'Hello'

Задание 3
Используйте дженерики для создания функции mergeArrays<T>(arr1, arr2), которая сливает два массива в один.

Функция должна принимать два массива типа T[] и возвращать новый массив, который содержит все элементы из обоих массивов.

Напишите тесты для функции:
- Проверьте, что она корректно сливает массивы для различных типов (`number`, `string`).
- Проверьте, что она сохраняет правильный тип массива.

function mergeArrays(arr1: any, arr2: any): any {
  // Реализуйте функцию
}

// Пример теста
const mergedNumbers = mergeArrays([1, 2], [3, 4]); // Ожидается: [1, 2, 3, 4]
const mergedStrings = mergeArrays(['a', 'b'], ['c', 'd']); // Ожидается: ['a', 'b', 'c', 'd']

#typenoscript #frontend #generics #дженерики

🖥 5 главных правил THIS для Frontend собеседований

В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика!

- Как работает this в стрелочных функциях.
- Почему важно, как вызывается функция, а не где она создается.
- Как this ведет себя в методах объектов.
- Как режим выполнения (strict или нестрогий) влияет на значение this.
- Как управлять this с помощью методов bind, call и apply.

🔗 СХЕМА-ШПАРГАЛКА ИЗ ВИДЕО

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#this #frontend #javanoscript

🖥 Практика This

Каким будет вывод этого фрагмента кода?

function f() {
    this.x = 5;
    console.log(this);
}
var o = new f();
console.log(o.x); 

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
console.log(o.f())

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
var o2 = {f: o.f};
console.log(o.f());
console.log(o2.f())

Каким будет вывод этого фрагмента кода?

function f() {
  console.log( this );
}

let user = {
  g: f.bind(null)
};

user.g();

Каким будет вывод этого фрагмента кода?

function sayHi() {
  alert( this.name );
}
sayHi.test = 5;

let bound = sayHi.bind({
  name: "Вася"
});

alert( bound.test );

#this #frontend #javanoscript

🖥 5 типичных задач по TypeScript на собеседованиях

Советую изучить дженерики в TypeScript перед просмотром моего нового видео с разбором задач. Дженерики — одна из самых частых тем на собеседованиях, поэтому важно их понимать. В видео "Логика дженериков в TypeScript: Generics, Extends и Conditional Types" я подробно разобрал эту сложную тему, объясняя, как дженерики работают, где и зачем их использовать. Это поможет вам не только в задачах, но и в реальных проектах.

Видео с разбором задач выйдет в понедельник. Не пропустите! 🎥

https://youtu.be/2oJAXXjFhnI?si=uIgzOSihpfGqwYK4

🖥 5 типичных задач по TypeScript для Frontend собеседований

В этом видео мы разберем 5 типичных задач по TypeScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

- Типизация функций
- Дженерики (Generics)
- Extends, keyof, typeof
- Утилитарные типы (Utility Types)
- Маппинг типов (Mapped Types)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #typenoscript

🖥 Задачи с собеседований по TypeScript

➕ Напиши нативный Pick<>
➕ Напиши нативный Omit<>
➕ Напишите кастомный Partial<Type>
➕ Напишите кастомный Record<Keys, Type>

🔗 Сборник заданий по TypeScript

🔗 Платформа для решения задач

#typenoscript #livecoding #interview