👉 @frontendInterview

Счётчик символов в поле ввода

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

👉 @frontendInterview

🔥 Здесь собраны актуальные вопросы к собеседованиям на позицию Frontend Разработчика. Каждый вопрос имеет уровень сложности, короткий и полный ответ, а также ссылки на ресурсы для изучения.

Канал ведут опытные Frontend Разработчики, которые будут еженедельно проводить публичные собеседования среди подписчиков.

«Коллеги, пришлите сроки!» — повторял джун-аналитик в течение месяца…

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

Небольшие лайфхаки собраны в короткой статье:

👉 @frontendInterview

Джун вливается в рабочий процесс.

👉 @frontendInterview

CSS Функция local() экономит трафик пользователя

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


В чём суть. С помощью функции мы можем проверить, установлен ли нестандартный шрифт на устройстве пользователя. Если установлен, то не загружать его по сети. Для этого её нужно использовать при объявлении правила @font-face. Например, я подключаю шрифт Cherry Bomb One.

 @font-face {
   font-family: 'Cherry Bomb One';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: local("CherryBombOne Regular"),
        local("CherryBombOne-Regular"),    
        url("CherryBombOne-Regular.woff2") format('woff2');
 }

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

👉 @frontendInterview

Современный учебник jаvascript в 3 книгах

Часть 1. Язык jаvascript
Часть 2. Браузер. Документ, события, интерфейсы
Часть 3. Дополнительные статьи

Автор: Илья Кантор

С помощью этого учебника вы можете изучить jаvascript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП. Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку jаvascript. Давайте посмотрим, что такого особенного в jаvascript, чего можно достичь с его помощью, и какие другие технологии хорошо с ним работают.

👉 @frontendInterview

saleHotdogs

Функция принимает 1 параметр: n, n - это количество хот-догов, которые купит клиент, за покупку нескольких штук предусмотрены скидки. Сколько денег потратит клиент, чтобы купить указанное количество хот-догов?
n < 5 $100
n >= 5 и n < 10 $95
n >= 10 $90

Пример:
saleHotdogs( 1 ) => 100
saleHotdogs( 5 ) => 475
saleHotdogs( 10 ) => 900

👉 @frontendInterview

Object.groupBy()

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

Пример
const colors = [
{ value: '50% 0.2 12', name: 'oklch' },
{ value: '198, 35, 109', name: 'rgb' },
{ value: '55% 0.2 0', name: 'oklch' },
]

const groupedColors = Object.groupBy(colors, (color, index) => {
return color.name === 'oklch' ? 'easyToUnderstand' : 'notEasyToUnderstand'
})

console.log(groupedColors)
/*
{
easyToUnderstand: [
{ value: '50% 0.2 12', name: 'oklch' },
{ value: '55% 0.2 0', name: 'oklch' }
],
notEasyToUnderstand: [
{ value: '198, 35, 109', name: 'rgb' }
]
}
*/

👉 @frontendInterview

👉 @frontendInterview

Разноцветный текст

Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?

Готовое решение
h1 {
background-image:
linear-gradient(250deg,
#833AB4 0%,
#FD1D1D 50%,
#FCB045 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

Подробное объяснение того, как это работает в рецепте.

👉 @frontendInterview

Как оформлять резюме и проходить интервью

В этой статье фронтенд-разработчик в «Северстали» и выпускник курсов даёт полезные советы по прохождению собеседований. Будет полезно прочитать не только начинающим разработчикам, но и всем, кто собирается сменить работу.

👉 @frontendInterview

Как правильно откликаться на вакансии и проходить собеседования, чтобы получить первое предложение о работе в IT

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

Что делать, если ты выполняешь тестовые задания, а в ответ тишина без объяснений, что не так.

Как действовать, если за последние несколько месяцев тебя позвали всего на несколько собеседований.

Что предпринять, если на собеседовании не знаешь ответов на вопросы и не получается решать задачи.

🎁 Получи бесплатно первые 3 фишки, которые можно применить за 1 минуту и начать получать в 10 раз больше приглашений на собеседования. От тимлида из крупной it-компании, который провел больше 300 собеседований.

Узнать все секреты трудоустройства в IT 👉 https://clck.ru/3ARozL

👉 @frontendInterview

​Значение какого типа возвращает оператор typeof и почему?

Оператор typeof возвращает строку, представляющую тип данных операнда.
console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){});// "function"

Но есть некоторые важные моменты, связанные с оператором typeof:

1. Null: Одна из известных особенностей — typeof null возвращает object. Это считается ошибкой в языке, но сохранено из-за обратной совместимости.
2. Функции: typeof для функций возвращает function. Функции в JavaScript это объекты, но оператор typeof позволяет их отличить от обычных объектов.
3. Массивы: typeof [] возвращает object, поскольку массивы в JavaScript являются разновидностями объектов. Для проверки, является ли переменная массивом, можно воспользоваться методом
Array.isArray.
4. Создание через конструктор: typeof new Number(42) или typeof new String('строка') возвращает object, т.к. когда используется ключевое слово new перед Number(42), создается новый объект типа Number, который является объектной оберткой вокруг числа 42. Таким образом, typeof new Number(42) возвращает "object", поскольку вы создали объект типа Number, даже если его внутреннее значение является числом.

Использование typeof: часто применяется для проверки типов переменных в условиях, чтобы выполнить различные действия в зависимости от типа данных.

👉 @frontendInterview

Теория алгоритмов

Авторы: В. Г. Куликов, В. С. Евстратов

В учебно-методическом пособии по дисциплине «Теория алгоритмов» представлены разделы, традиционно изучаемые в курсе теории алгоритмов: машины Тьюринга, нормальные алгоритмы Маркова, рекурсивные функции и т.д. Рассмотрены вопросы интуитивного и формального определения алгоритмов, сложности и нумерации алгоритмов, алгоритмически неразрешимых проблем, конструирования машин Поста.
Для обучающихся по направлению подготовки 09.03.02 Информационные системы и технологии.

👉 @frontendInterview