Frontend Interview - собеседования по Javascript / Html / Css
11.9K subscribers
2.07K photos
112 videos
313 files
512 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Что выведется в консоль?
Anonymous Quiz
19%
undefined
21%
John
49%
Sam
11%
Ошибка
3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Выпадающее меню

Как сверстать многоуровневое выпадающее меню, да ещё доступно?

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

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

👉 @frontendInterview
👎3👍21🔥1
Как информативно оформить профиль на GitHub?

Многие из рекрутеров не против оценить ваш профиль. Подавать себя, как в маркетинге, важно. И неплохо бы сразу представить всю статистику развернуто перед глазами, чтобы бедный HR не искал ваши коммиты, а гордо проведенные тысячи часов в GitHub не остались за кадром. Каждый проект служит материальным доказательством способностей разработчика, позволяя потенциальным соавторам или работодателям оценить его стиль программирования, навыки решения задач и умение управлять проектами.

В этой статье автор рассказывает, как красиво и информативно оформить свой github.

👉 @frontendInterview
🤔6👍2
Как импортировать внешний CSS-файл в качестве каскадного слоя?
Anonymous Quiz
22%
Используя директиву "@layer" с указанием URL-адреса файла
11%
Используя функцию "layer()" с указанием URL-адреса файла
24%
Невозможно импортировать внешний CSS-файл в качестве каскадного слоя
👍2
Backend-for-Frontend

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

Как правило, бэкенд — это совокупность разных программ (микросервисы) или одна большая программа (монолит). В современном вебе всё чаще используется микросервисный подход. Проблема такого сложного бэкенда состоит в том, что каждый микросервис предоставляет уникальный программный интерфейс. Фронтенду приходится работать с каждым микросервисом отдельно и помнить API каждого. Это неудобно, создаёт жёсткую связь между фронтендом и бэкендом, требует много знаний о внутреннем устройстве бэкенда. Решение этой проблемы состоит в том, чтобы сделать один унифицированный интерфейс, который в свою очередь будет обращаться ко всем микросервисам.

Одним из первых таких решений был Gateway, который является, как правило, прокси-сервером и предоставляет единое окно для доступа к данным по определённому программному интерфейсу (Application Programmable Interface — API), пересылая данные от фронтенда к нужному микросервису и обратно. Внешний вид приложения пользователя меняется, бизнес-логика меняется, клиентское приложение меняется, может меняться и контракт, но на остальные API это никак не влияет. Gateway пересылает запросы со стороны клиентов на другие API, учитывая разницу в контрактах, и этим позволяет снизить зацепление бэкенда и фронтенда в веб-приложении.

Работа Backend-for-Frontend, который является развитием идеи единого окна, похожа на Gateway в задачах обеспечения единого контракта и контроля над набором данных. BFF обязательно включает в себя Gateway, к которому предъявляются следующие требования:

- Общие шаблоны на клиенте и сервере (например, JSX).
- Высокая скорость ответа под нагрузкой.
- Единый язык на клиенте и промежуточном сервере BFF.

👉 @frontendInterview
5
Для первого сезона профильной IT-конференции Podlodka React Crew сложно придумать более нужную тему, чем «архитектура».

Уже 27 мая опытные эксперты научат React-разработчиков:
💜 Решать архитектурные вопросы в разрезе React. В формате круглого стола Сергей Сова, Максим Вишневский и Сергей Самохов обсудят, как строить архитектуру, организовывать компоненты и данные, использовать рендер-движок, задействовать реактивность и учитывать особенности
💜 Применять архитектурный линтер для Feature-Sliced Design. Антон Медведев и Лев Челядинов из FSD core team представят новый линтер и в режиме лайвкодинга покажут, как его применять.
💜 Менять жизненный цикл проектов на React, проектировать гибкое приложение и править негибкое. Редактор «Доки» Полина Гуртовая расскажет, когда мигрировать проект и нужно ли это делать, если он ещё не устарел.
💜 Выбирать стейтменеджер. Валерий Смирнов из Oone.World покажет, когда и какие популярные библиотеки использовать для управления стейтом.
🎁 Бонусы: публичное собеседование по архитектуре и открытый микрофон.

Билеты уже ждут вас на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
1👎1
Основы юзабилити-тестирования

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

👉 @frontendInterview
2
Least Larger

Вам дан массив чисел и индекс, верните либо индекс наименьшего числа, которое больше элемента по данному индексу, либо -1, если такого индекса нет.

Примеры:
leastLarger( [4, 1, 3, 5, 6], 0 ) => 3
leastLarger( [4, 1, 3, 5, 6], 4 ) => -1

👉 @frontendInterview
👎7
События scroll и wheel в браузере

scroll — это событие на HTML-элементе. Событие происходит, когда страница или элемент не входит на экран и пользователь её прокручивает. Способ прокрутки может быть любым — колесом мыши, кнопками клавиатуры, с помощью полосы прокрутки на экране.

Событие wheel происходит, когда пользователь прокручивает колесо мыши. При этом реального прокручивания может не происходить. Например, наша страница полностью помещается на экран, но пользователь пытается её прокрутить. В этом случае событие wheel будет происходить, а событие scroll — нет.

// обрабатываем скролл на всей странице
document.addEventListener('scroll', function(event) {
// реагируем на событие
console.log(event);
});

// отловим все случаи, когда пользователь крутит колесо мыши
// при наведенном на элемент курсоре
let div = document.getElementsByTagName('div')[0];
div.addEventListener('wheel', function(event) {
console.log(event);
});


👉 @frontendInterview
👍51
Какое значение примет result?
Anonymous Quiz
17%
0,0,0,0,0
17%
Empty string
43%
,,,,
3%
0
20%
5
👍6
Выразительный React: простые компоненты на сервере

В статье вы познакомитесь с React и создадите первый простой компонент — прямоугольник с собачкой. В этом примере мы не будем запускать код в браузере. Вместо этого напишем простой скрипт, который запустит сервер и отдаст HTML-страницу с компонентом. Эта техника называется рендеринг на стороне сервера (Server-Side Rendering, SSR).

👉 @frontendInterview
👍4🤔1
Мегагайд: культура работы с Git

Git — это не только (и не столько!) знание самой технологии и конкретных команд, но и определённая культура взаимодействия, практики, подходы, договорённости. Всё это помогает участникам команды лучше понимать друг друга и работать быстрее и чётче.

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

👉 @frontendInterview
🔥5👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Когда 3 часа дебажишь код и находишь тупую ошибку

👉 @frontendInterview
🤔12👍4👎21
Как устроены системы, которые обновляются автоматически при изменении состояния приложения?

Реактивность – это способ автоматически обновлять систему в зависимости от изменения потока данных.

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

Реактивное программирование – парадигма в программировании, в которой программа больше сосредоточена на управлении потоками данных, таким образом описывая взаимосвязи между ними.

👉 @frontendInterview
👍1
Карьера программиста. 6-е изд.

Книга основана на опыте практического участия автора во множестве собеседований, проводимых лучшими компаниями. Это квинтэссенция сотен интервью со множеством кандидатов, результат ответов на тысячи вопросов, задаваемых кандидатами и интервьюерами в ведущих мировых корпорациях. Из тысяч возможных задач и вопросов в книгу были отобраны 189 наиболее интересных и значимых.

👉 @frontendInterview
3🔥3👍1