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

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

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

Making Copies

Напишите функцию, которая принимает массив чисел и делает его копию.

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

Пример:
t = [1, 2, 3, 4]
tCopy = copyList(t)
t[1] += 5
t = [1, 7, 3, 4]
tCopy = [1, 2, 3, 4]

👉 @frontendInterview

​.forms

forms — это поле объекта document. Оно хранит коллекцию всех элементов <form>, которые есть на текущей странице.
Коллекция доступна только для чтения.

Для примера создадим три формы на одной странице: форму для применения промокода, форму с полем для подписки на рассылку, и форму авторизации с помощью номера телефона.

При обращении к свойству forms мы получим живую коллекцию HTMLCollection, которая очень напоминает массив, но позволяет также обращаться к элементам по их имени или идентификатору.

Формы, у которых указаны атрибуты id или name, можно получить по значениям этих атрибутов. В остальных случаях получить форму можно по индексу, который совпадает с порядком описания форм на странице.

Доступ к формам
Первая форма в примере выше не имеет атрибутов. Единственный способ обращения к ней — через её индекс в коллекции:

 document.forms[0]

У второй формы задан атрибут id, а значит, обращаться можно и по значению атрибута, и по индексу:

 document.forms['subscriptionFormId']
 document.forms.subscriptionFormId

Третья форма содержит как атрибут id, так и name. У нас появляется возможность получить форму ещё и по имени, указанному в атрибуте name:

 document.forms['loginFormName']
 document.forms.loginFormName

👉 @frontendInterview

Плиточная раскладка

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

📌Самый известный пример такой раскладки — галерея изображений в Pinterest.

В этом рецепте приводится пример реализации такой раскладки при помощи grid-template-* со значением masonry, а также другая реализация на чистом CSS.

👉 @frontendInterview

Стресс на работе

Стресс — неотъемлемая часть нашей жизни и способ адаптироваться к меняющейся реальности. Его не избежать, да и не нужно этого делать. Он может быть «плохим» или «хорошим» , но его действие на организм человека будет одинаковым.

В статье рассматриваются разные виды стресса и даются советы, как с ними справляться.

👉 @frontendInterview

Смертельный номер: айтишник фиксит баг на проде.

👉 @frontendInterview

Этот пост написан человеческим интеллектом специально для тех, кто хочет разрабатывать искусственный 🧠

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

Если ты ищешь IT-вакансию мечты — заходи на rabota.sber.ru 💻