👉 @frontendInterview

​Как повернуть элементы на странице просто и быстро?

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

Поворачиваем элемент на 30 градусов вправо:

div {
  rotate: 30deg;
}

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

К значению величины поворота можно добавить уточнение, по какой из трёх осей (x, y, z) применится значение. Эквивалентно rotateX(), rotateY(), rotateZ():

.element {
  rotate: x 90deg;
}

В таком формате можно указать угол наклона только по одной из осей. Не получится задать второе значение в этом же свойстве или ниже.

Можно указать собственный вектор и угол вращения в формате: 3 числа + угол. Аналогично функции rotate3d().

.element {
  rotate: 0 0 1 45deg;
}

Каждое из трёх чисел отвечает за соответсвующую ось (x, y, z). 0 значит, что вращения по этой оси не будет. Всё, что больше нуля, устанавливает точку на этой оси.
В итоге элемент будет повярнут вокруг точки на пересечении всех трёх осей.

👉 @frontendInterview

Как озвучивать зарплатные ожидания. Избежать ошибок еще до собеседования

Вопрос о зарплатных ожиданиях задается всегда. При этом разные компании задают его на разных этапах воронки рекрутинга.

Если вам не задавали этот вопрос, значит, вы просто не доходили до нужного этапа. Но рано или поздно вам придется на него ответить. И вполне вероятно, что отвечать придется, глядя рекрутеру прямо в глаза. А значит, что малейшее колебание будет замечено и отмечено (нас этому учат), и это не пойдет вам на пользу.

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

👉 @frontendInterview

Все красные флаги на собеседованиях собрали в одном видосе.

👉 @frontendInterview

<menu>

С помощью <menu> на странице можно создать меню со списком кнопок и других интерактивных элементов. Чаще всего тег используют для вёрстки панели инструментов (тулбара).

Чтобы преобразовать какой-то список элементов в меню, просто оберните его в тег <menu>.

Пример
Для примера создадим меню из аккаунта пользователя. Для этого сделаем каждый пункт кнопкой, обернём в тег <li> и вложим в тег <menu>:

<menu>
  <li>
    <button onclick="signIn()">Войти</button>
  </li>
  <li>
    <button onclick="signUp()">Зарегистрироваться</button>
  </li>
</menu>

Тег <menu>, как и <ul>, объединяет неупорядоченный список элементов. Разница только в содержимом: внутри <menu> должны быть только интерактивные элементы. Чаще всего это кнопки, по клику на которые вызываются функции. Таким образом, пользователь совершает действие или выполняет команду. В спецификации HTML тег <menu> объясняется как альтернатива тегу <ul>, на данный момент разницы в обработке этих двух тегов браузерами нет.

👉 @frontendInterview

JavaScript для профессионалов

Книга "JavaScript для профессионалов" - как можно понять из названия, не подойдет совсем начинающим js разработчикам, а скорее более опытным.

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

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