Дедлайн просто подгоняет

👉 @frontendInterview

Как вы производите отладку кода?

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

Основные инструменты

Консоль разработчика в браузере
Все современные браузеры (Chrome, Firefox, Edge, Safari) имеют встроенные инструменты для разработчиков, которые включают консоль для вывода сообщений, просмотра значений переменных и выполнения JavaScript кода в реальном времени.

Пример использования консоли в Chrome:
1. Откройте инструменты разработчика (F12 или Ctrl+Shift+I).
2. Перейдите на вкладку "Console".
3. Используйте console.log(), console.error(), console.warn() для вывода сообщений в консоль.

console.log('Это сообщение для отладки');
console.error('Это сообщение об ошибке');
console.warn('Это предупреждающее сообщение');   

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

Пример использования точек останова в Chrome:
1. Откройте инструменты разработчика и перейдите на вкладку "Sources".
2. Найдите и откройте файл JavaScript.
3. Щелкните на номер строки, где хотите установить точку останова.
4. Обновите страницу и выполнение остановится на установленной точке останова.

Интерактивное выполнение кода
Инструменты разработчика позволяют выполнять JavaScript код в реальном времени через консоль.

Пример:
1. Откройте инструменты разработчика и перейдите на вкладку "Console".
2. Введите и выполните произвольный JavaScript код, например:

let x = 10;
let y = 20;
console.log(x + y); // 30

Просмотр вызовов функций (Call Stack)
Инструменты разработчика позволяют отслеживать вызовы функций и видеть, как они были вызваны друг другом.

Пример:
Когда выполнение приостановлено на точке останова, откройте вкладку "Call Stack" в инструментах разработчика, чтобы увидеть последовательность вызовов функций.

👉 @frontendInterview

Грокаем функциональное программирование

Вам кажется, что функциональное программирование – это нечто сложное, доступное только гуру программирования? Эта книга развенчает миф об элитарности и позволит любому программисту с легкостью разобраться в хитросплетениях кода.

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

👉 @frontendInterview

Counting Change Combinations

Напишите функцию, которая подсчитывает, сколькими различными способами вы можете разменять определенную сумму денег, учитывая массив номиналов монет. Например, есть 3 способа сдачи на 4, если у вас есть монеты номиналом 1 и 2:

1+1+1+1, 1+1+2, 2+2.

Порядок монет не имеет значения:

1+1+2 == 2+1+1

Также предположим, что у вас бесконечное количество монет.

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

Пример:

countChange(4, [1,2]) // => 3
countChange(10, [5,2,3]) // => 4
countChange(11, [5,7]) //  => 0

👉 @frontendInterview

🚀 AI Интервью — умная программа для помощи на собеседованиях в Телемост, Google Meet, Zoom, Teams и на других платформах!

💎 Слушает, что говорит интервьюер
💎 Подсказывает правильные ответы в реальном времени, прямо во время разговора
💎 Интервьюер не видит окно с подсказками

Программа очень хорошо работает для собеседований на вакансии разработчика, архитектора, CTO и других. На любых языках.

Подпишитесь на канал AI Интервью и используйте программу на ближайшем собеседовании.

​Расскажи про области видимости

В 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 недоступна

Область видимости модуля (Module Scope)
При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

👉 @frontendInterview

👉 @frontendInterview

Вставка изображений в HTML

Картинки — важная часть веба. Они делают сайты визуально выразительными, помогают передать смысл, иллюстрируют текст и даже играют функциональную роль (например, иконки или изображения товаров). И у HTML есть сразу несколько способов вставки изображений.

👉 @frontendInterview

HTML- и CSS-советы для джуниор фронтенд-разработчиков

Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова?

Хорошо, что сейчас ситуация уже лучше. В целом можно найти очень классные статьи, видео и бесплатные курсы. Но и мне есть что сказать!

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

Давайте посмотрим, что я вам подготовил.

👉 @frontendInterview

"Да, я развился в такой перспективной сфере как гуглить"

👉 @frontendInterview

​Объект пользовательского события CustomEvent

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

Пример

const myCustomEvent = new CustomEvent('mycustomevent', {
  detail: {
    key: 'value'
  }
})

CustomEvent создаёт пользовательское (кастомное) событие. Оно даёт разработчику возможность самостоятельно определить, когда событие происходит, как называется и какие данные с ним передаются. Пригодится, когда стандартных DOM-событий (например, click или input) недостаточно для описания происходящего на странице.

CustomEvent похож на обычный Event. Основное отличие — CustomEvent позволяет передать дополнительные данные, а Event нет.

Отправить пользовательское событие можно с помощью dispatchEvent().

👉 @frontendInterview

Real-World Next.js: Build scalable, high-performance, and modern web applications using Next.js, the React framework for production

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

👉 @frontendInterview

Spin Around, Touch the Ground

Вам дан массив, состоящий из строк "left" и "right". Каждая строка делает поворот на 90° в соответствующую сторону. Создайте функцию, которая вернет количество разворотов на 360°.

Примеры:

 ["left", "right", "left", "right"] ➞ 0

 ["right", "right", "right", "right", "right", "right", "right", "right"] ➞ 2

 ["left", "left", "left", "left"] ➞ 1

👉 @frontendInterview

​Опасности использования innerHTML в JavaScript

innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

Случайное удаление обработчиков событий
Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

👉 @frontendInterview