For Web — фронтенд, дизайн, программирование
14.6K subscribers
5.47K photos
7 videos
5 files
1.74K links
Новости и полезности для фронтендеров.
Поддержать, чтобы в канале не было рекламы:
https://patreon.com/forweb
https://boosty.to/forweb
Download Telegram
Live Share, режим совместного редактирования для редактора Visual Studio Code — https://code.visualstudio.com/blogs/2017/11/15/live-share
Как делать на SVG заглушки для тяжёлых изображений, обзор техник — https://medium.freecodecamp.org/bed1b810ab2c
FCP, FMP, TTI и другие метрики загрузки страницы: что они все означают? Объясняет Артём Денисов в блоге «Веб-стандартов» — https://medium.com/p/ff23c213164e
Цена использования JavaScript: из-за чего тормозят странички на мобильных и как это оптимизировать, подробный рассказ Эдди Османи — https://medium.com/p/84009f51e99e
Как сервис-воркеры влияют на различные метрики производительности? Филип Уолтон с подробным исследованием на примере Google I/O Web App — https://developers.google.com/web/showcase/2016/service-worker-perf
Русскоязычное руководство по созданию WYSIWYG-редакторов на Draft.js — https://medium.com/p/ea8e9102aa1
Hi-Q, расширяемый и простой фреймворк для вёрстки на основе PostCSS и CSS-переменных — https://hiq.jonathan-harrell.com/
Мастер-класс по инструментам разработчика Chrome от Игоря Уварова — https://youtu.be/P753B81-szE
«В интернете нет ни ступенек, ни пандусов — ограничений быть не должно», Алексей Любимов о работе экспертом по доступности в Яндексе и других компаниях — http://www.the-village.ru/village/business/opyt/257012-accessibility-yandex
К сожалению, фронтендеры часто не понимают сути своей работы. Суть работы фронтендера не в вёрстке или программировании, а в разработке интерфейсов для людей. Ваша работа заключается в разработке интерфейса, которым удобно пользоваться, который отзывчив во всех смыслах, который доступен большинству людей в большинстве ситуаций.

Хороший фронтендер должен разбираться не только в веб-технологиях, но и в дизайне — без этого он не сможет сделать хороший интерфейс. Каждый день фронтендеру приходится принимать решения, связанные с дизайном. Дизайнер не нарисовал hover-состояния для кнопок и ушёл в отпуск; нужно что-то показать пользователю, если произошла ошибка; нужно добавить пару разделов на страничку «О компании», а дизайнера привлекать не хотят, потому что задача простая; а тут вообще задача по админке, для которой никогда специально дизайн не рисовали.

Даже если говорить о технической стороне, написание кода — тоже дизайн. Интерфейсы ведь бывают не только графические, но и программные. Мало кто станет использовать библиотеку с плохо спроектированным API (всякие OpenGL, Windows API и прочие ужасы не в счёт, там выбора нет).

С чего разработчику интерфейсов начать погружение в дизайн? Рекомендую начать с доклада Артёма Поликарпова «Технолог — тоже дизайнер» о дизайнерских решениях проблем, с которыми может столкнуться любой фронтендер: https://events.yandex.ru/lib/talks/460/
«Запашки» CSS-кода, Робин Рендл в переводе CSS-Live о признаках плохого CSS-кода — http://css-live.ru/articles/zapashki-css-koda.html
«Веб-стандарты» №95, в гостях Саша Годун из Semrush: Firefox жив, парное программирование, дорогой JS, доступность, книги и термины, школы при компаниях, юниоры — https://soundcloud.com/web-standards/episode-95
Frontend Weekend №28, в гостях Александр Майоров: о будущем RadioJS и собственном кадровом агентстве — https://soundcloud.com/frontend-weekend/fw-28
«Фронтенд-юность» №27: почему Дэн Абрамов не пользуется Firefox, почему у библиотек такие тупые названия, работа в СберТехе, ФБК и Mozilla Foundation — https://soundcloud.com/frontend_u/e27
Принципы и примеры хорошей обратной связи в интерфейсе, Илья Бирман на FDConf — https://ilyabirman.ru/meanwhile/all/feedback-first-minsk/
Оптимизация отрисовки веб-страниц, конспект и запись доклада Мартина Сплитта на HolyJS 2017 — https://habr.ru/p/342632/
Деплой вашего приложения, 12 глава Node Hero в переводе devSchacht — https://medium.com/p/6c392f4e3c0f
Что выбрать для генерации HTTP-запросов, fetch или axios? Перевод обзора Джейсона Арнольда на «Веб-стандартах» — https://medium.com/p/41206a4c0060