Фронтенд дайджест #133 Лучшее за неделю Подкаст Если вы с д | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #133
Лучшее за неделю
Подкаст

Если вы с детства мечтали разрабатывать игры, но выучили только HTML и CSS — не всё потеряно.
Перед вами полноценный квест с сюжетом, переходами по локациям, взаимодействиями с предметами окружения и всё это на чистом CSS. Возвращайтесь, как посмотрите.

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

Зачем кому-то писать игру на HTML и CSS?
Чтобы показать, что так тоже можно.

Ситуация: руководитель или коллега позвали вас побеседовать, вы проболтали час, но ничего не решили?

Добавьте щепотку конструктива таким встречам:
1. Поставьте чёткую цель: чего вы хотите добиться этой беседой;
2. Заранее определите тему и придерживайтесь её до конца разговора;
3. Соберите факты по теме заранее;
4. Не делайте каких-либо установок или выводов перед беседой. Если всё уже решено — разговор не нужен;
5. Будьте искренними — это поможет сохранить хорошие отношения, даже если цель беседы — увольнение;
6. Во процессе не отвлекайтесь на чтение почты и прочие уведомления;
7. В заключении беседы подведите итог и убедитесь, что вопрос исчерпан.

[EN] Кнопка — один из самых базовых примитивов, используемых в веб-приложениях.
Кто бы мог подумать, сколько нюансов необходимо учесть, при создании такого компонента:
- 6 состояний, которые должны явно отличаться друг от друга;
- 9 стилей кнопок: просто кнопка, кнопка с одной только иконкой, с иконкой и текстом, плавающая кнопка, отображение в группе кнопок и другие варианты;
- Размер самой кнопки и область для клика небольших кнопок;
- Доступность для скринридеров и правильный контраст.

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

[EN] Бесячие сториз теперь и в VSCode. Несите новый редактор!
По словам автора, работает это так: плагин записывает до 30 секунд видео, где вы показываете свой код в редакторе. Затем это всё преобразуется в GIF и отправляется в облако MS Azure.

Кстати, современные видео-кодеки дали бы более сильный уровень сжатия, при более высоком качестве видео.

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

[EN] Марк Эриксон — мэйнтейнер Redux — напоминает: если вы не знаете, зачем вам Redux, то, возможно, он вам и не нужен.
Зачастую Redux выбирают, чтобы просто передавать свойства глубоко вложенным компонентам или чтобы закэшировать результаты сетевых запросов.
Для решения первой задачи есть стабильное Context API, которое вместе с useReduсer решает большинство задач управления состоянием приложения.
А для кэширования сетевых запросов, можно взять хук swr,
React Query или Apollo Client, если вдруг у вас GraphQL.
Выбирайте утилиты не по звёздочкам на гитхабе, а под решение конкретных задач.

[EN] Крис Койер, со-основатель CodePen и создатель CSS-Tricks, рефлексирует на тему обязанностей современного фронтендера. Исторически так сложилось — люблю эту фразу — что всё, что касается работы с браузером и JavaScript, выполняют фронтенд-разработчики.
Что должен знать современный фронтендер, кроме умения конвертировать дизайн-макеты в код?

Как минимум, адаптивность, кроссбраузерность, доступность, семантику, производительность и переиспользуемость компонентов.

Каждый пункт — это целая наука, по которой можно получить степень бакалавра. И это мы еще не дошли до JavaScript c его фреймворками и библиотеками.

А что насчет целых стэков вроде LAMP, MEAN, STAR, Jamstack, Serverless? Это все еще фронтенд технологии?
Может, пора уже вводить более узкие термины, характеризующие конкретную специализацию?

Предлагаю подумать над Webpack-архитектором. Что скажете?