Frontend meetup

1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.

2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.

3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.

Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf

➖➖➖

🗓 22 мая, начало в 19:00 мск, Среда

🌐 ОНЛАЙН

✅ Регистрация на мероприятие

Реклама, ООО "Эвроне.ру", ИНН 3663057399

Любой разраб, когда готовится написать одну строчку кода

👉 @frontendInterview

​.style

Свойство style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через HTML-атрибут style.
С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style.

Чтобы получить значения инлайновых стилей с помощью свойства style, мы можем записать:
const element = document.getElementById('someElement')
const inlineStyles = element.style

В этом случае в значение inlineStyles запишется объект CSSStyleDeclaration, который будет содержать в себе все инлайновые стили элемента element.

Чтобы задать стили для элемента, мы можем использовать несколько способов. Например, через cssText, чтобы указать несколько свойств разом (этим же эффектом обладает установка стиля через setAttribute()). Альтернативно, через отдельные свойства в style.[propertyName].

Следующие две записи работают одинаково и устанавливают несколько стилей в одном выражении:
element.style.cssText = 'color: blue; border: 1px solid black'
element.setAttribute('style', 'color:red; border: 1px solid blue;')

Следующая — устанавливает значение определённого свойства, оставляя другие значения стиля нетронутыми:

 element.style.color = 'blue'

👉 @frontendInterview

jаvascript. Рецепты для разработчиков, 3-е издание

Зачем изобретать велосипед, сталкиваясь с очередной проблемой в jаvascript? Здесь вы найдете множество рецептов кода для типовых задач программирования, а также познакомитесь c методами создания приложений, работающих в любом браузере. Адаптируемые примеры кода можно вставить практически в любой проект, а заодно поглубже изучить JS.

👉 @frontendInterview

The Pony Express

Вам дан массив дистанций. Создайте функцию riders, которая вернет количество riders, которые потребуются, чтобы преодолеть всё расстояние. Один rider может проехать максимум 100 миль.

Примеры:
riders([18, 15]) =>1
riders([43, 23, 40, 13]) => 2
riders([33, 8, 16, 47, 30, 30, 46]) => 3
riders([6, 24, 6, 8, 28, 8, 23, 47, 17, 29, 37, 18, 40, 49]) => 4

👉 @frontendInterview

:empty

Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков, текста или псевдоэлементов внутри.
<div>
<h6>Без :empty</h6>
<p>Если человеку...</p>
<footer class="reactions"><span>🤔</span></footer>
</div>

<div>
<h6>С :empty</h6>
<p>Если заменить...</p>
<footer class="reactions with-empty"><span>😁</span></footer>
</div>

.reactions {
border: 1px solid blue;
border-radius: 16px;
padding: 5px;
background-color: #123E66;
}

.with-empty:empty {
display: none;
}

В примере выше реакции на сообщения будут вставлены в блок с классом reactions. Ему заданы внутренние отступы, фоновый цвет и рамка. Если реакций нет, то блок останется пустым и будет скрыт.

Без использования псевдокласса :empty у нас на экране останется пустой элемент с внутренними отступами, фоном и рамкой.

👉 @frontendInterview

👉 @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