Size: a a a

Веб-стандарты

2020 November 23
Веб-стандарты
Стартовал 12-й CSSBattle. Участникам предлагается реализовать предложенную картинку с помощью HTML и CSS, без использования графики и JS, используя минимальное количество кода. Игра продлится до 21 декабря.

https://cssbattle.dev/battle/12
источник
Веб-стандарты
Как работать с предпочтениями пользователей в React. Хьюго Жирадель предлагает решение, которое позволит удобно учитывать и ограничивать анимацию и трафик или выбирать подходящую светлую или тёмную тему — в зависимости от настроек браузера.

https://hugogiraudel.com/2020/11/20/user-preferences-in-react/
источник
2020 November 24
Веб-стандарты
Редактирование с семантичным HTML. Джон Ри показывает, как, используя стандартные элементы и стилизуя их, удобно показывать информацию о правках в документе.

https://css-tricks.com/copyediting-with-semantic-html/
источник
Веб-стандарты
Онлайн-курс «Основы веб-разработки» GeekBrains для детей 11–17 лет стартует 26 ноября. Курс длится 3 месяца с часовыми занятиями раз в неделю. В программе: разметка, стили, основы скриптов, резиновая вёрстка и учебный проект собственного сайта.

https://geekbrains.ru/link/cEodCQ
источник
Веб-стандарты
Симуляция недостатков зрения. Матиас Байненс рассказывает, как и зачем в DevTools и рендерере движка Blink реализованы режимы, имитирующие цветовую слепоту или нечёткое зрение у пользователя.

https://developers.google.com/web/updates/2020/11/cvd
источник
Веб-стандарты
Выпуск №257: Chrome 87, Firefox 83, Servo, Safari 14, Open Prioritization, кэш туда-обратно, гриды и minmax. В гостях Саша Шинкевич. Слушайте на Ютубе https://youtu.be/Dlb0B2pMsTk, читайте на Медиуме https://medium.com/p/1fadc4e67dee
источник
Веб-стандарты
00:01:14 События
00:03:05 Chrome 87
00:10:24 Chrome DevTools
00:15:14 Firefox 83
00:24:23 Новый дом для Servo
00:28:26 Safari 14
00:38:38 Open Prioritization
00:44:57 Кэш туда-обратно
00:53:38 Гриды и minmax
источник
2020 November 25
Веб-стандарты
A11Y Websites. Пополняемся коллекция примеров доступных сайтов Калума Райяна. Любой сайт можно предложить в коллекцию, если его уровень доступности по WCAG не меньше AA.

https://www.a11ywebsites.com/
источник
Веб-стандарты
Upptime. Опенсорсный аптайм-монитор, работающий на Гитхабе с помощью экшенов: тесты запускаются каждые пять минут, генерируется дэшборд со статусом и событиями, можно настроить уведомления.

https://upptime.js.org/
источник
Веб-стандарты
Адаптивные таблицы, простая версия. Адриан Розелли делится чуть более простым рецептом создания доступных адаптивных таблиц, протестированных на реальных пользователях.

https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
источник
2020 November 26
Веб-стандарты
Управление npm-зависимостями. Хьюго Жирадель делится опытом работы над кодом банка N26: документирование и аудит зависимостей, неиспользуемые и устаревшие зависимости.

https://hugogiraudel.com/2020/11/19/managing-npm-dependencies/
источник
Веб-стандарты
GUI Challenges. Первый эпизод новой серии Адама Аргайла про создание компонента слайдера для фото на гридах и залипающей прокрутке.

Статья https://web.dev/building-a-stories-component/
Видео https://youtu.be/PzvdREGR0Xw
Код-лаб https://web.dev/codelab-building-a-stories-component/
источник
Веб-стандарты
Marko.js — фронтенд от eBay. Попытка разобраться в устройстве альтернативного и малоизвестного SSR-first фреймворка, который разрабатывает eBay.

Статья https://habr.com/p/529320/
Примеры https://github.com/apapacy/marko-tut
источник
2020 November 27
Веб-стандарты
Plaiceholder. Джо Белл делится генератором размытых плейсхолдеров для изображений на время, пока они загружаются.

GUI: https://plaiceholder.co/
Репозиторий: https://github.com/joe-bell/plaiceholder
источник
Веб-стандарты
Создание сайтов с prefers-reduced-data. Разработчики Polypane рассказывают про медиафичу prefers-reduced-data, которая позволяет учесть предпочтение пользователя и сэкономить трафик. Примеры использования в CSS и JS, варианты тестирования.

https://polypane.app/blog/creating-websites-with-prefers-reduced-data/
источник
2020 November 30
Веб-стандарты
Выпуск №258: Никита Дубко и Вадим Макеев про Bocoup и appearance, нестинг в CSS, адаптацию таблиц, устройство браузера и идею смёржить всё в JS.

Слушайте на Ютубе https://youtu.be/rrufSecNOWE
Читайте на Медиуме https://medium.com/p/292b91e621af
источник
Веб-стандарты
00:00:27 События
00:04:15 Bocoup и appearance
00:09:29 Нестинг в CSS
00:18:21 Адаптация таблиц
00:27:23 Устройство браузера
00:41:38 Смёржить всё в JS
00:53:28 Ценность разделения
источник
Веб-стандарты
Нативное соотношение сторон с помощью CSS-свойства aspect-ratio. Брэм Штайн про новое свойство из черновика Box Sizing L4, которое уже работает в сборках Chromium 89 и Firefox 85 и поможет нам избавиться от привычного, но неудобного паддинг-хака.

https://www.bram.us/2020/11/30/native-aspect-ratio-boxes-in-css-thanks-to-aspect-ratio/
источник
Веб-стандарты
Новая демка Юлии Музафаровой по мотивам игры Monument Valley, но только на чистом CSS. Работает в Chrome, Firefox, но не работает в Safari.

https://codepen.io/miocene/full/NWRWQpX
источник
2020 December 01
Веб-стандарты
Рекомендации от Microsoft по улучшению производительности TypeScript с объяснением особенностей его работы.

https://github.com/microsoft/TypeScript/wiki/Performance
источник