CSS Houdini. Винсент де Оливейра с обзором возможностей и задач, которые решает проект «Гудини», его ограничений и точек роста — https://iamvdo.me/en/blog/css-houdini
Size: a a a
2020 June 09
12 советов по внедрению TypeScript в приложениях на React. Андрей Алексеев в блоге Tinkoff на Хабре — https://habr.com/ru/company/tinkoff/blog/505488/
Гибридное позиционирование с кастомными CSS-свойствами и функцией max(). Лия Веру передаёт scrollTop в стили и комбинирует с position: fixed в простой логике, дающей эффект position: sticky, но лучше — https://lea.verou.me/2020/06/hybrid-positioning-with-css-variables-and-max/
2020 June 10
Улучшаем навигацию с клавиатуры с помощью tabindex и ARIA. Сара Суайдан предлагает задуматься, какие ссылки действительно полезные, а какие можно спрятать для удобства пользователей — https://www.sarasoueidan.com/blog/keyboard-friendlier-article-listings/
Перфоманс CSS-переменных. Лизи Линхарт разбирается, насколько быстро работают нативные кастомные свойства в разных случаях применения, и выводит рекомендации — https://lisilinhart.info/posts/css-variables-performance
2020 June 11
Эксперименты с QuicTransport. Джеф Позник про новый API на основе протокола QUIC для двусторонней коммуникации с помощью datagram API и streams API. QuicTransport является частью большей спецификации WebTransport и проходит origin trial — https://web.dev/quictransport/
Гриды для раскладки, флекс для компонентов. Ахмад Шадид разбирается в разнице между системами раскладки и пытается понять, в каких ситуациях использовать каждую — https://ishadeed.com/article/grid-layout-flexbox-components/
Несколько простых советов для поддержки режима высокой контрастности на Windows от Сары Хигли, специалиста по доcтупности из Microsoft — https://sarahmhigley.com/writing/whcm-quick-tips/
2020 June 12
Путь развития фронтендера на MDN. Главный редактор MDN Крис Миллс анонсировал новый раздел, в котором последовательно собраны статьи, примеры и задания для развития во фронтенде: разметка, стили, скрипты, формы, тестирование, доступность и инструменты — https://hacks.mozilla.org/2020/06/introducing-the-mdn-web-docs-front-end-developer-learning-pathway/
Меню со списком быстрых действий, выпадающее из иконки веб-приложения, появилось в Chrome 84 на Android и в Edge 84 и Chrome 84 на Windows за флагом. Подробнее о добавлении и отладке на Web.Dev — https://web.dev/app-shortcuts/
2020 June 15
Удивительные вещи, которые можно анимировать в CSS. Уилл Бойд показывает примеры использования непривычных для анимации свойств, позволяющих достичь интересных эффектов — https://codersblock.com/blog/the-surprising-things-that-css-can-animate/
Минифицируем приватные поля в TypeScript. Расшифровка доклада Алексея Гусева о том, как заменять имена приватных полей на короткие во время компиляции и сборки, чтобы ничего не сломалось — https://habr.com/p/506030/
Выпуск №234: Путь фронтендера на MDN, QuicTransport, кастомные свойства, Houdini, GC, записи и кортежи в ES. Слушайте на Ютубе https://youtu.be/mAG4-prTFOw, читайте на Медиуме https://medium.com/p/3efa592ffbd5
Обработчики событий и сборка мусора. Джейк Арчибальд разбирается, течёт ли память, если прерывать запросы при помощи AbortController и обрабатывать при этом событие прерывания — https://jakearchibald.com/2020/events-and-gc/
2020 June 16
Изучение z-index через визуализацию. Тиру Маникандан делится демкой, в которой можно наблюдать за поведением блоков с различным позиционированием при изменении их z-index — https://thirumanikandan.com/posts/learn-z-index-using-a-visualization-tool
Как доступно прятать и стилизовать чекбоксы и радиокнопки. Сара Суайдан показывает варианты решения задачи — https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
Кнопки «Закрыть»: паттерны и антипаттерны. Мануэль Матузович разбирает популярные способы создания кнопок для закрытия попапов и модальных окон, объясняет их плюсы и минусы и предлагает альтернативные решения, в переводе на Хабре — https://habr.com/p/505758/
2020 June 17
Атрибут form. Михаэль Шарналь показывает, как связать кнопки с формой за пределами тега <form> — https://funwithforms.com/posts/form-attribute/
Анализ производительности расширений для Chrome. Мэтт Цойнерт провёл исследование, как популярные расширения влияют на метрики производительности различных сайтов — https://www.debugbear.com/blog/2020-chrome-extension-performance-report