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

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

📌Самый известный пример такой раскладки — галерея изображений в 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

Асинхронная отправка формы

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

👉 @frontendInterview

Почему я отказался от GraphQL

GraphQL — невероятная технология, привлёкшая много внимания с тех пор, когда я начал в 2018 году использовать её в продакшене. После создания множества React SPA поверх путаницы нетипизированных JSON REST API технология GraphQL показалась мне глотком свежего воздуха. Я искренне поддерживал хайп вокруг GraphQL.

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

👉 @frontendInterview

Бесплатный практический вебинар: Профессия «Frontend-разработчик».

⏰ Когда: 18 июня в 19:00 по мск.

Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.

Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру,сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.

Жизненно

👉 @frontendInterview

HTMLCollection и NodeList.

HTMLCollection и NodeList — это очень похожие на массив коллекции. Они хранят элементы веб-страницы (узлы DOM). NodeList может хранить любые типы узлов, а HTMLCollection — только узлы HTML элементов. К элементам коллекций можно обращаться по индексу, но у них нет привычных методов массива.

HTMLCollection возвращают методы getElementsByTagName и getElementsByClassName.

NodeList возвращают методы querySelectorAll и childNodes.

Полный список всех методов, возвращающих типы NodeList или HTMLCollection можно узнать в стандарте DOM.

👉 @frontendInterview

Как обычный парень может стать гением Кремниевой долины

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

Вы узнаете, какова роль интеллекта, гениальности и IQ-тестирования в достижении успеха в сфере информационных технологий; овладеете творческими навыками, основанными на нейробиологии, усовершенствуете когнитивные механизмы и поведенческие реакции; изучите особенности образа мышления, характера и поведения техногениев; поймете, почему им свойственно быть белыми воронами, познакомитесь с их профессиональными секретами и узнаете, как они способствовали созданию успешного бизнеса и как можно применить их в своей деятельности; прочитаете истории бурного роста Dropbox, Snapchat, Groupon и многих других высокотехнологичных компаний.

Maximum and minimum

Создайте две функции - max и min, которые возвращают соответственно максимальное и минимальное из переданных в них числа. Нельзя использовать Math.max и Math.min.

Примеры:
max(1,2,3,4) //returns 4
max(1,2,3,['4']) //returns 4; note it returned 4 not '4'
max(1,2,[3,4]) //returns 4
max(1,2,[3,[4]]) //returns 4
max(1,2,[3,['4r']]) //returns NaN
max([[],[-4]]) // returns -4
max() or max([]) //returns 0

👉 @frontendInterview

Чем удобен селектор :is()

Функция-псевдокласс :is() принимает один или несколько селекторов в качестве аргумента. Браузер при чтении применяет стили к любому из селекторов-аргументов.

Полностью поддерживается во всех стабильных браузерах с января 2021 года. Чуть более широкую поддержку можно получить, если использовать устаревшие версии с префиксами :-webkit-any(), :-moz-any() и :matches().

Применяем стили по наведению курсора на абзацы, вложенные в <header>, <main> или <footer>:
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

Иначе этот селектор пришлось бы записать гораздо более многословно:
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

👉 @frontendInterview