❓ 5 вопросов к разработчику, который накрутил опыт и устроился в IT

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

1. Что побудило вас накрутить опыт? Считаете ли вы это оправданным шагом, и как вы оцениваете его последствия для себя и рынка IT?

Я решительно хотел устроиться программистом в ограниченные сроки, обучение с ментором с проработкой легенды и доведением до трудоустройства для меня выглядело как более надёжный вариант. Сейчас со своими задачами на работе справляюсь, так что в целом мой работодатель получил для себя рабочее звено, которое ему требовалось. Но всё же без навыков просто через накрутку в моей компании работать бы не получилось, я работаю среди коллег с действительным сильным опытом. Толковым ребятам накрутка позволяет преодолеть некоторый воздушный барьер и занять позицию, где будет комфортно и им от хорошой зп и условий, и работодатель будет в целом доволен своим сотрудником. Но правда, что накрученные и при этом слабообученные и недостаточно компетентные специалисты идут бизнесу в минус, ухудшают рабочие процессы.

2. Какие трудности возникли во время накрутки? Было ли что-то, что вас особенно удивило или оказалось сложнее, чем ожидалось?

Было сложно от себя продумывать легенду, хотя на деле хватало небольшого базового рассказа на 2 минуты. Изучение технических вопросов собеседований в целом было самым лёгким этапом, хотя порой попадались вопросы, которые не затрагивал, или которые уже слышал, но подзабыл и перед собеседованием не повторил, или в каких-то вопросах немного не хватало детальности, но в целом вопросы - самое лёгкое. А вот задач собеседований много разных и можно наткнуться на ту, которую ты просто не знаешь или не знаешь какой-то трюк небольшой, хотя, прорешав достаточный набор разных, в целом можешь справиться или хотя бы просто показать своё мышление.

3. Какие инструменты и подходы вы использовали для создания правдоподобной легенды? Как убедились, что она выглядит достоверно?

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

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

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

5. Удалось ли устроиться? Насколько сложной оказалась работа на новом месте, и с какими трудностями вы сталкиваетесь в реальных задачах?

Устроился и работаю, справляюсь с задачами, первые 2 недели привыкал ко всему новому, потом стало гораздо спокойнее и стал просто работать размеренно. Даже за первые несколько рабочих недель прокачался значительно, привык выполнять ТЗ в большом проекте. Мне сильно помогли навыки, которые я приобрёл во время обучения у своего ментора так, что придя на работу я с первой же недели вклинился в проект и начал в нём выполнять задачи. Сейчас ещё просто хочется поскорее ещё понабраться опыта и поработать с разными рабочими задачами для большей уверенности. В целом задачи бывают разные, но решаемые, со временем приходит какое-то решение.

#interview

🖥 CSS Houdini: Что это и зачем он нужен?

CSS Houdini — это набор API, который открывает доступ к "внутренностям" браузера, позволяя разработчикам управлять процессом рендеринга CSS.

С Houdini можно создавать кастомные свойства, работать с анимациями, управлять раскладкой элементов и даже разрабатывать свои типы CSS-процессоров.

📌 Custom Properties and Values API
Позволяет задавать пользовательские свойства с типизацией.

CSS.registerProperty({
  name: '--main-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Теперь --main-color можно использовать как любое CSS-свойство, например, в анимациях.

📌 Paint API
Используется для создания кастомных графических эффектов.

class MyPaintWorklet {
  paint(ctx, size, properties) {
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, size.width, size.height);
  }
}
registerPaint('my-paint', MyPaintWorklet);

// Затем в CSS:
.element {
  background: paint(my-paint);
}

📌 Animation Worklet API
Упрощает создание сложных анимаций с минимальным воздействием на производительность. Например, плавные анимации, работающие на уровне композитора.

📌 Layout API
Дает контроль над раскладкой элементов. С ним можно реализовать свои алгоритмы расположения, например, нестандартные сетки.

📌 Parser API
Открывает доступ к разбору и интерпретации CSS-свойств.

Преимущества CSS Houdini
- Расчеты выполняются на уровне браузера, а не в основном потоке JavaScript.
- Вы можете создавать уникальные стили и эффекты, не дожидаясь поддержки новых CSS-фич.
- С его помощью можно создать настоящую экосистему кастомных стилей.

// paint.js
class DotsWorklet {
  paint(ctx, size, props) {
    const radius = size.width / 10;
    ctx.fillStyle = props.get('--dot-color').toString();
    for (let y = radius; y < size.height; y += 2 * radius) {
      for (let x = radius; x < size.width; x += 2 * radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsWorklet);

// styles.css
:root {
  --dot-color: red;
}

.element {
  background: paint(dots);
}

CSS Houdini — это будущее веб-разработки, которое уже наступило. Если вы хотите выделяться и использовать передовые технологии, начинайте изучать Houdini прямо сейчас. 💡

#css #browser #frontend #houdini

❓ Куда пропал?

Сейчас все мое свободное время посвящено развитию YeaHub и менторству. Мы уже запустили платформу, активно дорабатываем её функционал и разрабатываем новые сервисы. Моя цель — создать центральное место для всех IT-специалистов, сформировать активное сообщество, организовывать конференции, митапы и объединять единомышленников для реализации новых проектов и продвижения платформы.

В планах — сформировать большое IT-сообщество, проводить профессиональные встречи и создать более 20 сервисов для обучения, развития, карьеры, досуга и работы. Работа идёт полным ходом, постепенно воплощаем эти идеи в жизнь.

Менторство активно развивается: каждую неделю проводим 6–7 групповых занятий — лекции, митапы, собеседования и лайвкодинг. Создали полный курс по фронтенду, завершили курс по Webpack, подготовили материалы по линтерам и форматерам и другим технологиям и инструментам. Ученики трудоустраиваются. Практику расширяем на платформе YeaHub, приходит много новых ребят, заряженных на результат.

С января планирую вернуться к съёмке видео на YouTube. Основные темы — материалы из обучения, такие как Webpack, архитектура приложений, инструменты и другие важные аспекты. Также хочу записать новые курсы по JavaScript и CSS на основе текущих материалов с менторства.

Увольняюсь с текущей работы, чтобы больше времени уделять развитию проектов. Планирую снять офис в центре Краснодара, который станет мини-студией для записи видео и работы.

На этих выходных выступаю с докладом «Как понять программирование, если вы не технарь?» в ОМ. А 16 декабря стартует мастермайнд, где вместе с IT-специалистами, блогерами, менторами и стартаперами будем обсуждать точки роста и возможности для развития. Веду активную айтишную жизнь

Если среди моих подписчиков есть бэкендеры, владеющие Nest.js, и вы хотите принять участие в развитии YeaHub, обязательно пишите! Мы создаём платформу с огромными возможностями.

Как у вас дела? Что нового происходит? Кстати, с наступающим Новым годом! 🎄

https://github.com/YeaHubTeam/yeahub-platform

🌐 Экосистема YeaHub

Сейчас мы активно развиваем экосистему YeaHub. Уже создали тематические Telegram-каналы, которые в будущем заменим полноценными сервисами на платформе. Планируем запустить агрегатор IT-мероприятий, сервис поиска работы и множество других решений.

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

🖥 YeaHub: Главные новости IT, обсуждения с экспертами и аналитика рынка.

👩‍💻 YeaHub Tech: Полезные гайды, статьи и материалы для развития ваших навыков.

🗓 YeaHub Events: Анонсы митапов, конференций, соревнований и вебинаров.

💵 YeaHub Job: Свежие вакансии, стажировки и лучшие карьерные советы.

🖥 YeaHub Frontend: Теория, задачи, тесты и вопросы для подготовки к собеседованиям.

Вы можете поддержать развитие YeaHub, подписавшись на наши каналы и делясь обратной связью. Это поможет нам сделать платформу ещё лучше!

#yeahub

💡 Как понять программирование, если вы не технарь?

Недавно я выступал с докладом в ОМ на важную тему: как гуманитариям и людям без технического образования освоить программирование. В этом посте я собрал основные советы из своего доклада, которые помогут вам преодолеть барьеры и достичь цели.

➕ Развивайте навык обучения
Умение учиться — ключ к освоению программирования. Экспериментируйте с подходами, чтобы найти свой эффективный стиль:

- Читайте материал вслух, затем кратко перескажите своими словами.
- Ведите конспекты, создавайте шпаргалки для быстрого повторения.
- Изучайте темы через разные форматы: видео, книги, интерактивные задания. Это поможет понять материал с разных сторон.

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

➕ Определитесь с мотивацией и целями
Перед началом обучения важно принять твёрдое решение двигаться вперёд. Постоянные сомнения и мысли вроде "вдруг я трачу время впустую?" могут сбить с пути. Для этого:

- Выпишите причины, почему хотите стать разработчиком.
- Определите плюсы и перспективы профессии.
- Поставьте цели с конкретными дедлайнами.

Уверенность в себе и чёткий план помогут не отвлекаться и эффективно использовать время.

➕ Регулярность — залог успеха
Изучение программирования требует постоянства. Большие перерывы приводят к откатам: забываются концепции, снижается мотивация. Найдите комфортный ритм, чтобы занятия стали привычкой.
Если чувствуете, что подходите к сложной теме, не откладывайте. Работайте над ней, пока материал свеж в голове. Это поможет быстрее преодолеть барьер и закрепить знания.

➕ Повторяйте, чтобы закрепить
Программирование — это навык, который требует постоянного повторения. Возвращайтесь к изученным темам, рассматривайте их под разными углами. Например, попробуйте объяснить концепцию другому человеку или перескажите её своими словами.
Регулярное повторение укрепляет память и делает сложные вещи более понятными.

➕ Практикуйтесь как можно больше
Код — это не теория, а практика. Чем больше пишете, тем быстрее поймёте логику и начнёте мыслить алгоритмически. Начинайте с простых задач, чтобы набить руку, а затем переходите к сложным проектам.
Практика помогает развить абстрактное мышление, умение по шагам решать задачи и преобразовывать код в конечный результат.

➕ Погружайтесь в среду
Для эффективного обучения окружите себя программированием:

- Общайтесь с единомышленниками, участвуйте в чатах и встречах.
- Погружайтесь в профессиональную среду через участие в опенсорс-проектах или взаимодействие с более опытными разработчиками.
- Читайте статьи, смотрите доклады, изучайте новые инструменты.

Чем больше вы взаимодействуете с профессиональным сообществом, тем быстрее адаптируетесь и станете частью индустрии.

➕ Не забывайте об отдыхе
Перерывы и смена активности важны для усвоения информации. Часто решение приходит не во время напряжённых размышлений, а после отдыха. Дайте себе время, чтобы «созреть».
Иногда спустя неделю или даже месяц изучение знакомой темы может стать легче. Новые нейронные связи сформируются, а информация ляжет на уже усвоенные знания.

➕ Челендж до конца недели

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

1. Переменные и типы данных

Напишите функцию greet(name), которая принимает имя и возвращает строку:
"Привет, [Имя]!"

console.log(greet("Иван")); // Привет, Иван!

2. Массивы и циклы

Дан массив чисел. Напишите функцию sumArray(arr), которая возвращает сумму всех чисел массива.

console.log(sumArray([1, 2, 3, 4])); // 10

3. Объекты

Создайте объект user с полями name, age и методом introduce, который возвращает строку:
"Привет, меня зовут [Имя], мне [Возраст] лет!"

const user = { name: "Иван", age: 30, introduce() { /* код */ } };
console.log(user.introduce()); // Привет, меня зовут Иван, мне 30 лет!

4. Функции высшего порядка

Напишите функцию filterArray(arr, callback), которая принимает массив и функцию-условие, возвращает новый массив с элементами, которые прошли условие.

console.log(filterArray([1, 2, 3, 4], (num) => num % 2 === 0)); // [2, 4]

5. Замыкания

Напишите функцию createCounter(start), которая возвращает объект с методами:
- increment(): увеличивает значение на 1;
- decrement(): уменьшает значение на 1;
- value(): возвращает текущее значение.

const counter = createCounter(5);
counter.increment();
console.log(counter.value()); // 6
counter.decrement();
console.log(counter.value()); // 5

6. Работа с DOM

Создайте страницу с кнопкой "Нажми меня". Напишите скрипт, который увеличивает счетчик кликов и отображает его на кнопке.

<button id="counter">Нажми меня</button>
<noscript>
  // код
</noscript>

7. Асинхронное программирование

Напишите функцию fetchData(url), которая делает запрос на указанный URL и возвращает данные. Используйте fetch.

fetchData("https://jsonplaceholder.typicode.com/todos/1").then(console.log);

8. Работа с API

Напишите функцию getPosts(), которая запрашивает список постов с того же API и выводит их на страницу в виде списка.

<ul id="posts"></ul>
<noscript>
  // код
</noscript>

9. TypeScript

Напишите универсальную функцию fetchData<T>(url: string): Promise<T>, которая делает запрос на указанный URL и возвращает данные с типизацией через дженерик.

- Получение списка постов:

fetchData<Post[]>("https://jsonplaceholder.typicode.com/posts").then(console.log);

- Получение списка пользователей:

fetchData<User[]>("https://jsonplaceholder.typicode.com/users").then(console.log);

💡 Гайд по процессам. Отвечаю на вопросы про опыт, по YeaHub

Снял для учеников небольшой гайд по прохождению блока вопросов по процессам. Качество картинки плохое, снимал для учеников, но решил сюда тоже добавить.

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

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

Вопросы из видео:
1. Расскажи про команду
2. По какой методалогии работали?
3. Расскажи подробнее про процессы
4. Кто давал задачи?
5. Как проходило ревью?
6. Как проходил релиз?
7. С кем из команды взаимодействовали?

📊 Все вокруг айтишники

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

Многие из нас могут жить в окружении, где программисты и специалисты IT преобладают. Если вы в поиске работы, информация вокруг вас будет сосредоточена на вакансиях, кандидатах и общем рынке труда, создавая иллюзию, что работа в IT — это повсеместное явление.

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

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

Посмотрим на статистику:
- Число IT-специалистов в России выросло на 13% в 2023 году и составило 857 000 человек, заявило Минцифры.
- По данным Statista, к концу 2024 года численность разработчиков в мире достигнет 28,7 миллиона человек.
- В Соединенных Штатах насчитывается более 4,3 миллиона разработчиков.
- Германия — ведущая страна среди европейских стран, с 837 398 разработчиками.

Эти 28 миллионов составляют всего около 0.35% от общего числа населения Земли.

Много ли это? Сфера IT продолжает расти, как и количество сервисов и приложений. Есть множество отраслей, в которых программное обеспечение доисторического уровня. У меня есть друзья — строители, агрономы, которые шутят, что их заставляют работать с глючащим ПО, которое только усложняет их работу. Они даже просят меня переписать их рабочие приложения, в шутку, конечно же.

💡 Несмотря на рост IT-специалистов, новички находят работу за 1-2 месяца благодаря подготовке. Как активный участник IT сообществ, я вижу, что возможности для старта в этой сфере стали доступны как никогда раньше.

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

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

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

✔️ 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