Создание favicon для сайта 2020

Вместо всей этой горы иконок можно использовать один svg плюс три картинки самых больших размеров. Хорошая статья по ссылке.

5 типичных ошибок при создании React компонентов (с хуками) в 2020 году

Четвёртый пункт, честно говоря, не понял. То ли проблема надуманная, то ли пример плохой. По факту в «решении» просто вместо выноса логики отображения в отдельный компонент заинлайнили эту логику в родителя. Как это упростило тестирование или повторное использование — сказать сложно. Как раз наоборот, если компонент headerInner использовался более чем в одном месте, теперь везде нужно будет прописывать условие показа руками.

Opium.Fill — стандартизация цветовой схемы глазами программиста

Всегда пожалуйста)

Alpine.js — легковесный фреймворк с удобным синтаксисом

До чего странно после Реакта воспринимается синтаксис, когда логика пишется в строковых кавычках. Упорно читаю это как string присвоение.

Opium.Fill — стандартизация цветовой схемы глазами программиста

Вместо использования классов вроде .back и .text, можно их вынести в отдельное data свойство, например data-color-mode. Так меньше шансов налепить взаимоисключающих стилей в один компонент.

Интересные CSS-находки в новом дизайне Facebook

>Использование в роли разделителей элементов , а не внешних отступов
Думаю, это попытка обойти одно очень неприятное свойство overflow. Браузер игнорирует margin-right отступы последнего элемента, останавливая прокрутку аккуратно на его границе справа.

Div по краям — прямолинейное, но надёжное и кроссбраузерное решение этой проблемы.

Другое вариант — обернуть все внутренние элементы в div-обёртку с 'width: fit-content'. И уже обёртке дать нужные отступы в виде padding.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №410 (6 — 12 апреля 2020)

>Новые функции в Create React App 3.3
Версия 3.3 вышла 4 месяца назад. Довольно несвоевременная статья.

Пакет use-sound: звуковые эффекты в React-приложениях

Звуки в повседневном интерфейсе — очень сомнительная идея, даже при хорошем исполнении. Но всё же есть отдельные сценарии и крутые сайты, звуки в которых работают замечательно. Например, Duolingo и Lichess.

Драм-машина из демо use-sound — пушка.

Reactjs, Material-UI with JSS. Краткий гайд

Очень бесит, что когда в проекте используешь styled-components и material-ui, иногда приходится долго и нудно переводить стили из одной семантики в другую. Material-UI воспринимает стили как объекты, а значит требует перевести все названия в camelCase, все значения взять в кавычки, и после них ещё везде проставить запятые.

Telegram.Такси за 200 строк кода

не вы звоните в 2 клика, а вы лишь делаете 2 клика, а звонят вам

Ну да, тогда это совершенно другое дело.

Telegram.Такси за 200 строк кода

Мудрите. Пиццу можно заказать прямо в браузере, и никаких разрешений для этого давать не надо.

Telegram.Такси за 200 строк кода

Я это не в обиду лично вам. :)
Просто как факт, что тенденция сейчас максимально снижает контакт с живым человеком в рутинных задачах, вроде заказа пиццы или вызова такси. Особенно в продвинутых странах вроде Японии.

Telegram.Такси за 200 строк кода

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

48 open source ресурсов для JavaScript (2019)

Спасибо за перевод! Очень интересная подборка, сохранил пару ссылок.

Разбор решенных задач с чемпионата по программированию от Яндекса (фронт-энд разработка) 2019

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

Server Side Rendering для React App на Express.js

Ну, девятой версии скоро будет полгода. О проблемах восьмой версии уже и правда немного неактуально говорить.

Server Side Rendering для React App на Express.js

Хотелось бы поподробнее про проблемы с Next.js. По своему опыту могу сказать, что разработка на Next — просто сказка, когда разбираешься с его особенностями.

Какой код нужно показывать на собеседовании

Решение в лоб:

const getRanges = (array: number[]): string => {
  let result = "";
  for (let i = 0; i < array.length; i++) {
    result += array[i];
    let rangeLength = 1;
    while (array[i] + rangeLength === array[i + rangeLength]) {
      rangeLength++;
    }
    if (rangeLength > 1) {
      result += `-${array[i + --rangeLength]}`;
      i += rangeLength;
    }
    result += ",";
  }
  return result.slice(0, -1);
};

С чего начать изучать веб-разработку в 2019 году или HTML Academy VS Codecademy VS FreeCodeCamp

Как альтернатива, из самостоятельного изучения есть ещё онлайн учебник от w3schools. Сам изучал на нём фронт, для начинающих как база — вообще замечательно.