For Web — фронтенд, дизайн, программирование
14.7K subscribers
5.47K photos
7 videos
5 files
1.74K links
Новости и полезности для фронтендеров.
Поддержать, чтобы в канале не было рекламы:
https://patreon.com/forweb
https://boosty.to/forweb
Download Telegram
Опасности data URI: Энди Дэвис рассказывает о проблемах встраивания ресурсов вроде картинок и шрифтов через data URI → https://calendar.perfplanet.com/2020/the-dangers-of-data-uris/
Справляемся с проблемными программистами: как их распознать, почему они вредят команде и что с этим делать — https://stevemcconnell.com/articles/dealing-with-problem-programmers/
Как готовить фавиконки в 2021: шесть файлов, которые закрывают большинство потребностей. Андрей Ситник о современном способе подключения фавиконок → https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
Как устроено управление памятью в JavaScript: от выделения памяти и сборки мусора до утечек. Иллюстрированное руководство Феликса Гершау → https://felixgerschau.com/javascript-memory-management/
This media is not supported in your browser
VIEW IN TELEGRAM
Пишем хлопушку с конфетти на Canvas: иллюстрированное руководство → https://varun.ca/confetti/
This media is not supported in your browser
VIEW IN TELEGRAM
Яндекс запустил телеграм-канал с вакансиями для разработчиков

— Свежие вакансии каждый день
— Описания задач, технологий и условий без воды
— Лёгкий поиск по тегам
— Один пост раз в две недели будет посвящён ответам на ваши вопросы о найме и работе в Яндексе

Подписывайтесь
Географическая карта в вебе с нуля. Владимир Агафонкин объясняет простой подход к отрисовке карт в вебе, лежащий в основе его популярной библиотеки Leaflet → https://observablehq.com/@mourner/simple-web-map
This media is not supported in your browser
VIEW IN TELEGRAM
Автоматизируем локализацию макетов в Figma. Искандер Ситдиков из Joom делится готовым плагином и рассказывает историю его разработки → https://habr.com/p/535188/
Максимальная оптимизация изображений для веба в 2021 году. Малте Убл из Google делится восемью практическими техниками оптимизации загрузки и декодирования изображений → https://www.industrialempathy.com/posts/image-optimizations/
Искусство вёрстки интерфейсов для реальной жизни. Ахмад Шадид демонстрирует множество аспектов вёрстки на примере небольшого компонента из Facebook Messenger: раскладка, переполнение содержимым, интерактивные состояния, поддержка RTL и тёмной темы → https://ishadeed.com/article/building-real-life-components/
Математика верстальщику не нужна? Иван Богачев разбирает математические концепции, которые могут пригодиться верстальщику в реальных задачах:

Временные функции и траектории для покадровых 2D-анимаций на сайтах → https://habr.com/p/518006/

Матрицы, базовые трансформации, построение 3D и фильтры для картинок → https://habr.com/p/520078/
Почему мнения «фронтенд для джунов» и «во фронтенде нет ничего сложного» ошибочны: Йегуда Кац в переводе Ивана Плесских объясняет, почему не стоит недооценивать фронтенд → https://habr.com/p/535724/
This media is not supported in your browser
VIEW IN TELEGRAM
Как инженеры GitHub реализовали трёхмерный глобус с визуализацией реальных пулреквестов на новой главной странице сервиса → https://github.blog/2020-12-21-how-we-built-the-github-globe/
Вышел ежегодный чеклист быстродействия фронтенда от Smashing Magazine: всё, что нужно знать, чтобы ваш сайт загружался и работал быстро в 2021 году, от метрик до инструментов и подходов → https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/
This media is not supported in your browser
VIEW IN TELEGRAM
Дизайнеры Discord рассказали, как облегчили себе и фронтендерам работу, написав несколько плагинов для Figma (плагины теперь опенсорсные и вы тоже можете их использовать) → https://blog.discord.com/9a25c29f9143
Коммиты — это снимки состояния, а не диффы. Деррик Столи из GitHub объясняет, как коммиты устроены под капотом и как это знание может помочь в понимании команд rebase и cherry-pick → https://github.blog/2020-12-17-commits-are-snapshots-not-diffs/
Проекция раскладки: техника реализации сложных анимаций раскладки с 60 FPS. Мэтт Пэрри подробно рассматривает проблемы анимирования раскладки и представляет новую технику, которую он применил в Framer Motion → https://mattperry.is/writing-code/layout-projection-animate-browser-layout-60fps
[Вакансия, релокация в Санкт-Петербург]
Верстальщик в финтех-стартап Orca, 70—110 тысяч рублей на руки

Orca — платформа простого доступа к инвестициям на фондовом рынке (рынок Великобритании). Мы создаём решение, с помощью которого любой сможет купить акции и другие активы в один клик.

Мы ищем cамостоятельного верстальщика, который будет верстать и поддерживать наши лендинги (пример — orca.app). Макеты от дизайнеров в Figma, контент заранее согласован, иногда будет нужна простая логика взаимодействия с бэкендом.

Ближайшие задачи — определиться с инструментами (шаблонизатор, препроцессоры, etc), причесать существующие лендинги и наладить процесс разработки под себя. На горизонте года планируем начинать веб-версию сервиса, поэтому при желании можно будет перейти в полноценный фронтенд.

От нас — официальное оформление, помощь с переездом в Санкт-Петербург, ДМС, питание, крутой офис и гибкость стартапа во всех вопросах.

Присоединяйтесь → hh.ru/vacancy/41018791 или @anna_orca
Обзор 10 лучших практик контейнеризации Node.js-приложений через Docker → https://snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/
Кастомизация компонентов и избавление от неиспользуемых модулей библиотеки Ant Design: опыт Ивана Копенкова из Mail.ru Cloud Solutions → https://habr.com/p/530798/