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

Дока: справочник для веб-разработчиков на человеческом языке от русскоязычных авторов. Актуальные и понятные руководства по HTML, CSS, JavaScript, архитектуре и инструментам → https://doka.guide

[Реклама] Podlodka анонсировала второй сезон Podlodka Techlead Crew — онлайн-конференции про техническое лидерство, архитектуру систем и инженерные практики. 🔥 Старт 11 октября. Интенсив продлится две недели. Сессии проходят дважды в день: утром и вечером. В программе: крутые спикеры, сессии в лайве, ламповое общение и обмен кейсами в слаке, записи (для тех, кто не успевает на лайв). Во время первой недели разбирают проектирование с нуля: — учат выбирать подходящий технологический стек; — разбирают современные архитектурные паттерны; — обсуждают дизайн и управление жизненным циклом публичного API; — расскажут, что нужно заложить в систему, чтобы потом не было больно. Вторую неделю посвящают техдолгу и рефакторингу: — учат измерять и продавать менеджменту технический долг; — изучают современные подходы к рефакторингу; — разбирают кейсы миграции с одного технологического стека на другой. Подробности и билеты уже на сайте! 😊

W3C Design System, официальная дизайн-система для сайтов W3C → https://design-system.w3.org

Нативная раскраска скобок в VS Code: разработчики VS Code рассказали, как они перенесли в ядро редактора раскраску скобок, ранее реализованную в стороннем расширении, и попутно ускорили алгоритм раскраски в 10 000 раз → https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization

[Реклама] «Профессия UX/UI-дизайнер», онлайн-курс в школе дизайна Contented → https://bit.ly/3BdSNmB Мы научим вас создавать удобные и современные интерфейсы сайтов и приложений. За 9 месяцев вы узнаете фундаментальные принципы дизайна интерфейсов и научитесь: — создавать интерактивные прототипы в Figma; — проводить пользовательские исследования и создавать customer journey map; — создавать прототипы мобильных приложений; — оформлять и защищать дизайн-концепцию; — создавать эффектную анимацию для посадочных страниц. Преподаватели курса — практикующие эксперты, работающие с Mail.Ru Group и Ozon, а также Роман Храмов, сооснователь Cuberto — агентства года по версии Аwwwards. Подробнее о программе → https://bit.ly/3BdSNmB До 10 октября скидка 45% по промокоду WEB — не упустите шанс!

Boring SEO: скучное, но действенное руководство по поисковой оптимизации → https://boringseo.org

Как хранят данные в браузере: краткий обзор существующих способов от Антона Жиянова → https://antonz.ru/browser-storage/

Адаптивный layout: как переверстать весь проект, не перевёрстывая его. Юрий Голубев из Почты Mail.ru делится опытом реализации ручного ресайза колонок с адаптацией содержимого под ширину контейнера → https://habr.com/p/579798/

Самопаркующаяся тачка в 500 строк кода: Алексей Трехлеб подробно рассказывает о разработке генетического алгоритма для парковки машины на TypeScript → https://vas3k.club/post/12073

Motion One, новая библиотека для создания анимаций: существенно меньше популярных альтернатив (всего ~3 КБ), основана на Web Animations API, поддерживает таймлайны, написана на TypeScript, использует аппаратное ускорение → https://motion.dev

[Реклама] 💥В OTUS запускается первая группа по разработке на Rust! Вас ждёт 4 месяца хардкорной практики и возможность перенять опыт ведущих разработчиков. Пройдите вступительный тест, чтобы занять место в группе с бонусной скидкой. Хотите протестировать учебный процесс заранее? Регистрируйтесь на демо-уроки: — 6 октября (среда): ключевые особенности RUST — 14 октября (четверг): веб-сервис на RUST

Partytown, экспериментальное решение для переноса сторонних скриптов вроде Google-аналитики в веб-воркер для разгрузки основного треда и полноценного контроля и отслеживания доступа к DOM и браузерным API → https://github.com/BuilderIO/partytown

Будущее CSS: слои каскада. Брамус Ван Дамм подробно рассказывает о новом механизме в CSS, позволяющем управлять каскадом → https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/

История внедрения GraphQL в PayPal: подробный рассказ о предпосылках, процессе внедрения, масштабировании, полученных преимуществах, проблемах и убеждении команд в переходе на GraphQL → https://medium.com/p/b7e01175f2b7

Цветовые пространства: знаете ли вы разницу между sRGB, LAB и CIE XYZ? Джейк Арчибальд и Александр Сурма обсуждают, как устроены цветовые пространства, чем они отличаются и при чём здесь фронтенд → https://youtu.be/cGyLHxn16pE

Паттерны Web Vitals: коллекция примеров и рекомендаций по реализации UX-паттернов, которые могут негативно повлиять на метрики Web Vitals. Карусели, кастомные шрифты, бесконечная прокрутка, видео и другие паттерны → https://web.dev/patterns/web-vitals-patterns/

Atropos, легковесная библиотека для создания трёхмерных параллакс-эффектов при наведении курсора → https://atroposjs.com

OpenMoji, первая опенсорсная и независимая от крупных компаний библиотека Emoji → https://openmoji.org

[Реклама] One Day Offer в Яндекс для фронтенд-разработчиков 🔥 25 сентября пройдёт новый One Day Offer для фронтендеров. One Day Offer — это онлайн-встреча, на которой можно получить оффер за один день. Чтобы попасть на мероприятие, необходимо решить 2-3 задачи онлайн в системе Яндекс.Контест до 22 сентября. Это можно сделать в любое время — решение проверяет компьютер. Если задачи решены успешно — мы пригласим на One Day Offer, где в течение дня участники смогут пройти две секции с кодом и тем же вечером получить предложение о работе. Регистрация → https://clck.ru/XQrHw

Какого чёрта, z-index?? Джош Камю на примерах объясняет механизм работы z-index и контекстов наложения в CSS → https://www.joshwcomeau.com/css/stacking-contexts