Frontend Interview - собеседования по Javascript / Html / Css
Frontend Interview - собеседования по Javascript / Html / Css - это канал, созданный для подготовки к собеседованиям по фронтенду. У нас вы найдете полезные материалы, вопросы и ответы, связанные с языками программирования Javascript, Html и Css. Мы предлагаем обзоры ключевых концепций, алгоритмические задачи и советы по успешному прохождению собеседований. Присоединяйтесь к нашему каналу и подготовьтесь к собеседованиям по фронтенду с уверенностью.
Как оформлять резюме и проходить интервью
В этой статье фронтенд-разработчик в «Северстали» и выпускник курсов даёт полезные советы по прохождению собеседований. Будет полезно прочитать не только начинающим разработчикам, но и всем, кто собирается сменить работу.
👉 @frontendInterview
Разноцветный текст
Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?
Готовое решение h1 {
background-image:
linear-gradient(250deg,
#833AB4 0%,
#FD1D1D 50%,
#FCB045 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
Подробное объяснение того, как это работает в рецепте.
👉 @frontendInterview
Какое значение примет result?
Anonymous Quiz
41% - false
59% - true
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
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
Современный учебник JS в 3 книгах.zip
21.2 MB
Современный учебник jаvascript в 3 книгах
Часть 1. Язык jаvascript
Часть 2. Браузер. Документ, события, интерфейсы
Часть 3. Дополнительные статьи
Автор: Илья Кантор
С помощью этого учебника вы можете изучить jаvascript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП. Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку jаvascript. Давайте посмотрим, что такого особенного в jаvascript, чего можно достичь с его помощью, и какие другие технологии хорошо с ним работают.
👉 @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
Джун вливается в рабочий процесс.
👉 @frontendInterview
Что из ниже перечисленного НЕ является особенностью веб-воркера?
Anonymous Quiz
15% - Изолирован от основного потока
41% - Имеет доступ к объекту document и DOM API
14% - Использует собственный контекст выполнения
30% - Создание нового воркера считается "тяжелой" операцией
❓Вышел React 18 — что нового для разработчиков?
Расскажем на бесплатном практическом уроке «Обзор нововведений в React 18» от OTUS. Спикер — опытный разработчик и преподаватель.
На вебинаре мы разберем изменения, которые были добавлены в React 18, познакомимся с ними поближе и посмотрим на новые фичи и API.
Встречаемся 25 апреля в 19:00 мск в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение и персональную консультацию от менеджеров OTUS!
👉 Оставьте заявку прямо сейчас, чтобы посетить бесплатный урок: https://otus.pw/b1Q0/?erid=LjN8Kac2u
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
17 мая собираем всех на IT-конференцию МТС True Tech Day.
Наша работа строится на коде, который мы создали из синтеза науки и технологий. Это надёжная и универсальная платформа для разработки продуктов и сервисов.
Каждый участник конференции поучаствует в сессиях от лидеров индустрии, испытает технологии в true labs и получит новые впечатления и эмоции.
Что будет:
→ 5 тематических треков: Main, Development, AI/ML, Cloud, Science
→ 50 спикеров с докладами про архитектуру, облачные платформы, NLP4Code, вероятностное программирование, безопасность контейнеров и другое
→ 10 часов нетворкинга
→ цифровые зоны и digital-интеграции
→ а ещё вечеринка со звездой
Все спикеры и темы уже на сайте. Регистрируйся на True Tech Day. Участие бесплатное
«Коллеги, пришлите сроки!» — повторял джун-аналитик в течение месяца…
Если коллеги вас не слышат, игнорируют ваши просьбы — вот кое-что, что вам поможет. Один джун-аналитик столкнулся с такой проблемой, а потом поборол.
Небольшие лайфхаки собраны в короткой статье:
👉 @frontendInterview
🔥 Здесь собраны актуальные вопросы к собеседованиям на позицию Frontend Разработчика. Каждый вопрос имеет уровень сложности, короткий и полный ответ, а также ссылки на ресурсы для изучения.
Канал ведут опытные Frontend Разработчики, которые будут еженедельно проводить публичные собеседования среди подписчиков.
Telegram
Frontend | СобеседованияГотовимся к собеседованиям на Frontend разработчика. Актуальные вопросы по JavaScript, CSS, HTML, React и другим технологиям.
Счётчик символов в поле ввода
Нередко разработчик хочет знать число символов, которые пользователь вводит. Например, так можно сообщать количество доступных знаков.
В этом рецепте создается такой счетчик без лишней нагрузки браузера (и человека).
👉 @frontendInterview
Какое значение примет result?
Anonymous Quiz
36% - [object Object]
31% - [object Array]
6% - toString
9% - [Object]
18% - []