Replace With Alphabet Position

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

"a" = 1, "b" = 2

Например:

Input = "The sunset sets at twelve o' clock."
Output = "20 8 5 19 21 14 19 5 20 19 5 20 19 1 20 20 23 5 12 22 5 15 3 12 15 3 11"

👉 @frontendInterview

​Что будет если передать функцию по ссылке?

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

Определение функции: Вы создаете функцию и сохраняете ее в переменной или объявляете ее прямо в качестве аргумента.

function greet(name) {
  return `Hello, ${name}!`;
}

Передача функции по ссылке: Вы передаете функцию как аргумент другой функции или сохраняете ее в другой переменной.

function executeFunction(fn, arg) {
  return fn(arg);
}

const result = executeFunction(greet, 'Alice');
console.log(result); // "Hello, Alice!"

В этом примере функция greet передается по ссылке в функцию executeFunction, которая затем вызывает greet с аргументом Alice.

В чем преимущества и возможности передачи

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

function add(x) {
  return function(y) {
    return x + y;
  };
}

const addFive = add(5);
console.log(addFive(3)); // 8

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

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log(`Received data: ${data.name}`);
}

fetchData(handleData);

- Многие методы массивов, такие как map, filter, reduce, принимают функции в качестве аргументов для обработки элементов массива.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

Важные моменты

- При передаче функции по ссылке важно помнить, что контекст выполнения (this) может измениться. Это особенно актуально для методов объектов.

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greet = person.greet;
greet(); // undefined, так как контекст потерян

const boundGreet = person.greet.bind(person);
boundGreet(); // Hello, Alice

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

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

👉 @frontendInterview

Стилизация чекбоксов и радиокнопок

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

Задача состоит в том, чтобы создать кастомные элементы форм, которые будут:
- соответствовать дизайну сайта или приложения;
- выглядеть одинаково во всех браузерах и операционных системах;
- быть доступными для пользователей с особенностями здоровья;
- поддерживать стандартные функции интерактивного элемента формы (отмечен или не отмечен, фокус, взаимодействие с клавиатуры).

В статье рассмотрим три способа стилизации чекбокса и радиокнопки. У каждого есть преимущества и недостатки.

👉 @frontendInterview

Стагнация на мидле: когда работаешь, но остаёшься на месте

Годы идут. Джуниорское прошлое уже позади. Ты вроде бы уже тёртый калач, да и деньги платят хорошие. Не 300к в наносекунду, но на пшеничный смузи с вяленой рыбкой хватает. Но что-то не так. Есть стойкое ощущение пустоты впереди. Будто ты никуда не двигаешься. Стрелка компаса хаотично мечется в разные стороны, непонятно, что учить дальше, куда двигаться и "кем ты хочешь стать, когда вырастешь?".

Остановка в карьерном росте рано или поздно ждёт каждого разработчика. Но это не значит, что ты не сможешь пробить собственный потолок. Давай разберём, почему это происходит и как это можно исправить.

👉 @frontendInterview

Начальник пытается вытащить тебя на работу в офис в выходные

👉 @frontendInterview

​В чем отличие между SSR и SPA?

Серверный рендеринг (Server-Side Rendering, SSR) и одностраничные приложения (Single Page Applications, SPA) — это два различных подхода к созданию веб-приложений, каждый из которых имеет свои преимущества и недостатки. Рассмотрим их основные отличия.

Серверный рендеринг (SSR)
- При нем весь HTML-код страницы генерируется на сервере и отправляется в браузер в готовом виде.
- Сервер получает запрос от клиента, обрабатывает его, собирает необходимые данные, рендерит HTML и отправляет его обратно клиенту.

Преимущества:
- Поисковые системы получают полностью отрендеренную HTML-страницу, что облегчает индексацию контента.
- Пользователь видит содержимое страницы быстрее, так как браузер получает готовый HTML.
- Серверный рендеринг не требует от клиента выполнения сложного JavaScript-кода.

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

Одностраничные приложения (SPA)

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

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

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

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

👉 @frontendInterview

JavaScript для начинающих

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

👉 @frontendInterview

Sort array by string length

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

Пример:

["Telescopes", "Glasses", "Eyes", "Monocles"]  //   ["Eyes", "Glasses", "Monocles", "Telescopes"]

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

👉 @frontendInterview

​Что такое шаблонные литералы, и для чего они нужны?

Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений.

Примеры использования

Интерполяция переменных и выражений
Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

Многострочные строки
Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

Встроенные выражения
Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

Вызов функций внутри шаблонных литералов
Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

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

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

👉 @frontendInterview

👉 @frontendInterview

Как и зачем писать тесты?

«Тесты — это лишняя работа», «тесты писать необязательно» — такие мнения часто можно услышать в разговорах о тестировании. В этой статье мы постараемся развеять этот миф и рассмотрим плюсы тестирования и минусы его отсутствия.

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

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

👉 @frontendInterview

Как мы мигрируем с JQuery на React

Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой .

Сегодня я вам расскажу, как мы постепенно мигрируем с JQuery на React.

👉 @frontendInterview

Обычный рабочий день фронтендера

👉 @frontendInterview

​Как мерить скорость работы и отзывчивость сайта?

Web Vitals
Google разработал набор метрик, называемых Web Vitals, которые оценивают ключевые аспекты пользовательского опыта:
Largest Contentful Paint (LCP): Время загрузки основного контента страницы.
First Input Delay (FID): Время от первого взаимодействия пользователя с сайтом до момента, когда браузер начинает обработку этого взаимодействия.
Cumulative Layout Shift (CLS): Стабильность макета страницы (измеряет неожиданные сдвиги контента).

Инструменты для измерения производительности
Google Lighthouse: Инструмент, встроенный в Chrome DevTools, который анализирует страницу и предлагает улучшения.
PageSpeed Insights: Онлайн-сервис от Google, который предоставляет отчеты о производительности сайта на мобильных и десктопных устройствах.
WebPageTest: Позволяет проводить детализированные тесты производительности с разными настройками сети и устройства.

Встроенные инструменты браузера
Chrome DevTools: Включает вкладку "Performance" для записи и анализа производительности загрузки страницы и исполнения скриптов.
Network Panel: Показывает время загрузки различных ресурсов, что помогает найти "узкие места".

Мониторинг в реальном времени
Google Analytics: Предоставляет отчеты о скорости загрузки страниц.
New Relic, Datadog: Платформы для мониторинга производительности приложений и сайтов в реальном времени.

Оптимизация и анализ
Использование CDN (Content Delivery Network): Ускоряет доставку контента пользователям, снижая задержки.
Минимизация и сжатие ресурсов: Уменьшение размеров файлов CSS, JavaScript и изображений.
Кэширование: Хранение копий статических ресурсов для ускорения повторных посещений.

👉 @frontendInterview

Безопасность веб-приложений. Разведка, защита, нападение, 2 изд.

Три столпа безопасности приложений — разведка, нападение и защита. Во втором издании Эндрю Хоффман рассматривает десятки смежных тем, от новейших типов атак и средств защиты до моделирования угроз, жизненного цикла безопасной разработки ПО (SSDL/SDLC) и архитектуры нулевого доверия. Вы получите подробную информацию об эксплойтах и средствах защиты от атак с использованием GraphQL, облачных технологий и доставки контента (CDN). В главы, посвященные атакам и их предотвращению, добавлены сведения для более продвинутых читателей.

👉 @frontendInterview