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

at()

Метод at() возвращает значение элемента массива по указанному индексу. Индекс может быть как положительным, так и отрицательным. Отрицательный индекс используется для отсчёта от последнего элемента массива.

Пример
Получим последний элемент массива:
const beatles = ['Джон', 'Пол', 'Джордж', 'Ринго']
console.log(beatles.at(3))
// Ринго

👉 @frontendInterview

Микросервисы и контейнеры Docker

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

👉 @frontendInterview

Compose functions

Создайте функцию compose, которая принимает параметр и неограниченное количество функций, через которые пройдет этот параметр по очереди.

 compose(n, f1, f2, f3..., fn) // === fn(...(f3(f2(f1(n)))))

Примеры
var doubleTheValue = function(val) { return val * 2; }
var addOneToTheValue = function(val) { return val + 1; }

compose(5, doubleTheValue)
// should === 10

compose(5, doubleTheValue, addOneToTheValue)
// should === 11

👉 @frontendInterview

​.flatMap()

Метод flatMap() позволяет сформировать массив, применяя функцию к каждому элементу, затем уменьшает вложенность, делая этот массив плоским, и возвращает его.

Был добавлен в стандарте ES2019. Если вы поддерживаете браузеры, выпущенные раньше 2018 года, то вам понадобится полифил.

Пример
Представим, что у нас есть список заказов пользователей из которого мы хотим понять, какие товары заказывают:
const orders = [
{
id: 1,
products: [
{ name: 'Чизкейк', price: 1.99 },
{ name: 'Бисквит', price: 4.99 },
]
},
{
id: 2,
products: [
{ name: 'Шоколад', price: 5.59 },
{ name: 'Зефир', price: 8.99 },
]
}
]

Одним из решений будет сначала дважды вызвать метод map(), а затем сделать массив плоским с помощью метода flat()
Другое решение этой задачи — сразу вызвать метод flatMap() (ведь статья у нас именно про него):
orders.flatMap(
(order) => order.products.map(product => product.name)
)

Увидим что функция применилась, вложенность уменьшилась и мы получили только названия продуктов из массива products:
['Чизкейк', 'Бисквит', 'Шоколад', 'Зефир']

👉 @frontendInterview