For Web — фронтенд, дизайн, программирование

Plaiceholder, инструмент для генерации размытых изображений-заглушек на время загрузки оригинала: поддерживает CSS, SVG, base64 и другие форматы → https://plaiceholder.co

[Реклама] Бесплатная онлайн-конференция Design is Frontend пройдёт 24 марта в 14:00 по Москве В этот раз поговорим о дизайн-системах финтех-компаний. В программе шесть докладов от ведущих фронтенд-тимлидов и UX-дизайнеров Райффайзенбанка, SberDevices, AFFINAGE, AGIMA и PINKMAN. 1. «Что должен знать фронтенд-разработчик о дизайне: чек-лист с объяснениями» — Игорь Яковлев, CEO AFFINAGE. 2. «Мастер-класс по работе с дизайн-системой в Figma» — Василий Гордеев, дизайнер SberDevices. 3. «Дизайн. Реализация дизайн-системы в Райффайзенбанк» — Вика Дубровская, лид команды дизайн-системы Райффайзенбанка. 4. «Фронтенд. Реализация дизайн-системы в Райффайзенбанк» — Мария Гущина, фронтенд-разработчик Райффайзенбанка. 5. «Почему вам не нужна дизайн-система» — Константин Кислейко, руководитель отдела дизайна AGIMA. 6. «Есть ли жизнь без дизайн-системы» — Юрий Чижов, CTO PINKMAN. Регистрируйтесь и прокачивайте хард-скиллы вместе с нами!

Смерть Node.js-процесса: Томас Хантер с исчерпывающим обзором причин, по которым процесс может быть остановлен → https://thomashunter.name/posts/2021-03-08-the-death-of-a-nodejs-process

Исследуем CSS-директиву property: обзор новой директивы, позволяющей сообщить браузеру, как анимировать CSS-переменные → https://css-tricks.com/exploring-property-and-its-animating-powers/

Гамбит килобайта: попробуйте обыграть шахматный движок, уложенный в 1024 байта JavaScript-кода → https://vole.wtf/kilobytes-gambit/

Вавилонская башня из миллиона печенек на TypeScript, React и MobX : фронтендеры KTS об опыте разработки и оптимизации мобильной игры к 5-летию Oreo в России → https://habr.com/p/546388/

[Реклама] React-разработчик создаёт интерфейсы на React и использует популярные дополнительные инструменты: Redux, Typescript и Jest. За 2 месяца вы изучите этот набор технологий, соберёте проект, проанализируете его производительность и покроете его тестами. Вас ждёт: 1. Вступительное тестирование. Проверьте себя и познакомьтесь с программой. 2. Собственная среда для обучения. Специальный полноценный тренажёр от Яндекс.Практикума. 3. Поддержка наставников и код-ревьюеров. 4. Программа профессиональной акселерации. Освоить React можно за 2 месяца. Попробуйте в Яндекс.Практикуме.

Изучаем внутреннее устройство компьютеров, разрабатывая 16-битную виртуальную машину на JavaScript: 15 подробных видеоуроков → https://www.youtube.com/playlist?list=PLP29wDx6QmW5DdwpdwHCRJsEubS5NrQ9b

Как разрабатывается фронтенд в Lyft: от инструментов и инфраструктуры до коммуникации и оргструктуры → https://eng.lyft.com/frontend-at-lyft-an-overview-f934c1524370

[Реклама] 10 марта на демо-занятии «Vue 3» Михаил Кузнецов познакомит вас с возможностями новой версии одного из популярных фронтенд-фреймворков. На открытом уроке: — рассмотрим ключевые отличия в синтаксисе Vue 2 от Vue 3; — разберёмся, как работать с vue-router и Vuex в новой версии фреймворка; — cоздадим проект на Vue 3 с нуля с помощью vue-cli. Демо-урок — возможность познакомиться с онлайн-курсом «JavaScript Developer. Professional» и преподавателем. Пройдите вступительный тест, чтобы принять участие в занятии → https://otus.pw/tIpW/

Постепенное внедрение GraphQL и Apollo в legacy-приложение: реальный опыт фронтендеров Trello → https://www.atlassian.com/engineering/a-look-at-trello-adopting-graphql-and-apollo-in-a-legacy-application

Подробное введение в Streams API, позволяющий поточно обрабатывать большие данные: декодировать изображения, применять эффекты к видео на лету и многое другое → https://web.dev/streams/

В Google Fonts появилось 2 000+ бесплатных иконок Material Design в пяти стилях и различных форматах для веба, iOS и Android → https://fonts.google.com/icons

git-notify, инструмент для оповещения коллег о важных изменениях в кодовой базе прямо в терминале после git pull → https://github.com/jevakallio/git-notify

[Реклама] Начните работать с React уже 9 марта на демо-занятии с Никитой Овчинниковым. Вы познакомитесь с сильными и слабыми сторонами React и начнёте его использовать. Демо-занятие является частью программы онлайн-курса React Developer, который поможет вам эффективно решать задачи фронтенда. Пройдите вступительный тест, чтобы зарегистрироваться на урок → https://otus.pw/uJJn/

Погружаемся в тени: теория и практика применения теней в веб-дизайне → https://css-tricks.com/getting-deep-into-shadows/

Спорные Web API: обзор новых API, о внедрении которых не могут договориться браузеры по причинам вроде нарушения приватности → https://webapicontroversy.com

​[Вакансия, удалёнка или офис в Казани] Middle/Senior фронтенд-разработчик в Flatstack, 100–185К рублей на руки Flatstack — международная IT-компания с офисами в Казани, Новом Орлеане и Варшаве. С 2006 года разрабатываем ПО для клиентов из США, Европы, России и других стран. Сейчас у нас 50 талантливых программистов, дизайнеров, проектных менеджеров и QA. Ищем фронтенд-разработчиков на разные проекты: CRM-система, HR-система, сервис по оказанию юридических услуг, американский сервис по управлению парковками. Мы используем React, Vue.js, GraphQL (Apollo), GitLab, пишем unit/интеграционные/E2E-тесты, кроссбраузерно и адаптивно верстаем. Предлагаем: — официальное трудоустройство с гибким графиком; — индивидуальный план развития, регулярный пересмотр зарплаты; — практику английского языка и общение с иностранными заказчиками; — надбавку за стаж, бонус к значимым событиям (свадьба, рождение детей); — софинансирование покупки MacBook; — подарки за отличную работу; — (в офисе) уютные коворкинг-места в центре, спорт-уголок, кухня, cкидки в спортзале этажом ниже, поддержка в поиске парковочных мест. Присоединяйтесь → https://kazan.hh.ru/vacancy/40747576, join@flatstack.com, @irinalenchevskaia

Архитектура UI в Netflix Studio Technology: как разрабатывают интерфейсы для 80+ приложений, используемых на протяжении всего процесса производства сериалов и фильмов → https://youtu.be/LtrXwX81CPE

Погружаемся в псевдоэлементы ::before и ::after: от способов применения до неочевидных нюансов → https://codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements/