👉 @frontendInterview

Выпадающее меню

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

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

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

👉 @frontendInterview

Как информативно оформить профиль на GitHub?

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

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

👉 @frontendInterview

Фиксит баги на проде

👉 @frontendInterview

​Backend-for-Frontend

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

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

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

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

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

👉 @frontendInterview

Основы юзабилити-тестирования

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

👉 @frontendInterview

Least Larger

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

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

👉 @frontendInterview

События 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

👉 @frontendInterview

Выразительный React: простые компоненты на сервере

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

👉 @frontendInterview

Мегагайд: культура работы с Git

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

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

👉 @frontendInterview

Когда 3 часа дебажишь код и находишь тупую ошибку

👉 @frontendInterview

Как устроены системы, которые обновляются автоматически при изменении состояния приложения?

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

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

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

👉 @frontendInterview

Карьера программиста. 6-е изд.

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

👉 @frontendInterview