Кастомные чекбоксы правильно. Вадим Макеев рассказывает о способах оформления чекбоксов, которые доступны с клавиатуры и для скринридеров: картинками, инлайновыми картинками, стилями, совместимо и инлайновым SVG — https://youtu.be/E6kLaaQFctU
Size: a a a
2019 February 19
2019 February 20
Приоритеты загрузки JavaScript в Chrome. Эдди Османи свёл все случаи в одну таблицу: от <script> в <head> до <script defer> в конце <body> — https://addyosmani.com/blog/script-priorities/
Не умничайте с элементами форм. Брэд Фрост про модальные окна, скрытые поля и магические ссылки, которые мешают менеджерам паролей и привычкам пользователей. В переводе на Хабре — https://habr.com/p/440948/
Эффекты с SVG-фильтрами: создание текстуры с помощью <feTurbulence>. Сара Суайдан продолжает серию статей на Codrops — https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/
Насколько скрипты аналитики, виджеты соцсетей и прочие сторонние ресурсы замедляют ваш сайт. Сборник «Third Party Web» поможет понять, сколько вы сможете сэкономить на загрузке, если откажетесь от лишних скриптов или подберёте альтернативу — https://github.com/patrickhulce/third-party-web
Как работают переносы в тексте в 2019 году. Михаэль Шарналь про CSS-свойство hyphens и управление переносами с помощью hyphenate-limit-before в короткой заметке — https://justmarkup.com/log/2019/01/a-look-at-css-hyphenation-in-2019/
Как размер кода зависит от минификатора, сборщика и языка. Илья Гольдфарб про неожиданное обновление Webpack, которое переключило сжатие с UglifyJS на UglifyES, в блоге Яндекса на Хабре — https://habr.com/p/438022/
2019 February 21
Введение в метрики шрифта. Уэстон Тейер про выравнивание текста и строк, компенсацию отступов и предложение CSS-свойства leading-trim для выравнивания по рисунку глифов — http://westonthayer.com/writing/intro-to-font-metrics/
Создание современной карусели. Нолан Лоусон берёт scroll-snap из CSS, scrollTo с behavior: 'smooth' плавной прокруткой и кастомный элемент <pinch-zoom> для масштабирования — https://nolanlawson.com/2019/02/10/building-a-modern-carousel-with-css-scroll-snap-smooth-scrolling-and-pinch-zoom/
Изучаем Docker, Джефф Хейл в переводе на Хабре:
1. Основы https://habr.com/p/438796/
2. Термины и концепции https://habr.com/p/439978/
3. Файлы Dockerfile https://habr.com/p/439980/
4. Оптимизация и ускорение https://habr.com/p/440658/
5. Команды https://habr.com/p/440660/
1. Основы https://habr.com/p/438796/
2. Термины и концепции https://habr.com/p/439978/
3. Файлы Dockerfile https://habr.com/p/439980/
4. Оптимизация и ускорение https://habr.com/p/440658/
5. Команды https://habr.com/p/440660/
2019 February 22
Советы по доступности интерактивных элементов на мобильных устройствах. Ире Адеринокун в переводе на «Веб-стандартах» — https://medium.com/p/aac0330569ae
Видео докладов с февральского MinskJS: искусство и Node.js, профилирование JS и зачем переписывать приложение на Elm — https://www.youtube.com/playlist?list=PL-whh3wS8xsKJHySf_D3Kfpbhx8FVNKLp
2019 February 25
Выпуск №162: Npm для энтерпрайза, приоритеты загрузки JS, цена сторонних скриптов, JS прямо в CSS, доступный TodoMVC, кастомные чекбоксы, выравнивание по тексту. Ссылки на Медиуме https://medium.com/p/80855c0cf547 или на Ютубе https://youtu.be/x7wDBUKLnYo
Как работает @supports. Крис Койер разбирается в нюансах работы и поддержки директивы как в CSS, так и в JS, в переводе на «Веб-стандартах» — https://medium.com/p/92dba6de7ae7
Немного перфоманса. Роман Комаров выжал из своего блога всё что можно: предзагрузка ресурсов, шрифты, отложенные счётчики, прогрессивная навигация и другое — https://www.kizu.ru/a-bit-of-performance/
2019 February 26
Меню и диалоги на Гитхабе работают и без JS с помощью <details>. Подробнее смотрите в коде компонентов details-menu-element https://github.com/github/details-menu-element и details-dialog-element https://github.com/github/details-dialog-element и в докладе Муан Чиу про <details> https://github.com/muan/details-on-details.
Как по-умному поправить ошибки в Git. Тобаяс Гюнтер рассказывает о вариантах: от консоли до интерфейсов — https://css-tricks.com/the-smart-ways-to-correct-mistakes-in-git/
Адаптируемся к предпочтениям пользователей. Михаэль Шарналь про медиафичи prefers-reduced-motion и prefers-color-scheme, заголовки SaveData и DoNotTrack — https://justmarkup.com/log/2019/02/adapting-to-user-preferences/
Как заменить самые горячие места в вашем приложении на WebAssembly. Александр Сурма продолжает рассказывать историю создания оптимизатора картинок Squoosh, который использует библиотеки на Си прямо в браузере — https://developers.google.com/web/updates/2019/02/hotpath-with-wasm В предыдущих сериях https://developers.google.com/web/updates/2019/01/emscripten-npm