Adventures

In Front-End

Як ви вважаєте що є одним з найскладніших у сучастному

front-end?

Які проблемі частіше за все вирішуємо?

Як ви вважаєте які очікування у користувачів?

Як ви вважаєте які очікування у користувачів?

1 Доступність

2 Performance

3 White and Dark mode (як з полем пошуку у якого автокомпліт)

Доступність

Коли ми думаємо о мобільном девайсі - ми не повинні думати лише о екрані

Це Mobile is a Spectrum.

Хтось з вас намагався зайти на amazon або airbnb з mobile low or medium?

Інколи приходитьтся чекати до 15 - 20 секунд щоб натиснути на кнопку і щось відбулося. Для девайсів які в mid або low range.

Як ви вважаєте чому складно перенести такий бізнес до Індонезіі?

Iphone 11 у 22 рази швидший за Moto E6

https://simplified.dev/performance/impact-of-web-performance

https://www.debugbear.com/blog/2020-chrome-extension-performance-report

https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Page Experience Ranking

Головні метрики

Google дивиться на перформанс application на Android.

Для різного конекшина раздавать різний контент.

https://developer.mozilla.org/ru/docs/Web/API/HTMLImageElement/decoding

Tooling

• https://developers.google.com/speed/pagespeed/insights/
• https://lighthouse-metrics.com/
• https://web.dev/measure/
• https://g.co/chromeuxdash
• https://yellowlab.tools/
• https://github.com/YellowLabTools/YellowLabTools

Не забываем:

• что доступно 12 страниц
• данные обновляются раз в 2-ве недели

Commpression

Commpression

Commpression

https://medium.com/@arturbasak/%D1%80%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D1%8C-brotli-9ff6edeb5abf

Commpression

Commpression

JPG+PNG to SVG Mask

https://codepen.io/shshaw/pen/tKpdl

https://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

The Contrast Swap Technique

Images

https://github.com/mozilla/mozjpeg

Images

https://squoosh.app/

font-display

https://developer.mozilla.org/ru/docs/Web/CSS/@font-face/font-display

Chrome Dev Tools Network Tab Priority Column

https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit

https://web.dev/priority-hints/