--- title: Hybrid meet up Praha, 13 April ’22 | {𝐅}rontendisti tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # { 𝐅 } <br> Newwws<br> 13 April ’22 --- ### Browsers --- #### Microsoft Edge 101 _released 8 April 2022_ note: - No notable changes for developers. --- #### Firefox 99 _released 5 April 2022_ note: - No notable changes for developers. --- #### Chrome 100 _released 5 April 2022_ note: - improved JS debugging (preview of class properties) - improved CSS debugging/experimenting, you can edit `@supports` rules --- #### Chrome 101 _released 26 April 2022_ [Priority hints](https://web.dev/priority-hints/) - new attribute `fetchpriority="high"` - for `link`, `img`, `iframe`, `script` --- ##### Use cases 1. prioritize hero image => reduce LCP 2. deprioritize images in the carousel 3. combine with async/defer: keep essential scripts in high priority, while being async (async are low priority by default) Note: - [LCP reduction](https://storage.googleapis.com/web-dev-uploads/video/1L2RBhCLSnXjCnSlevaDjy3vba73/BCngJfoVOy0YbUz8wFrM.mp4) - `preload` is still required for the early discovery of LCP images included as CSS backgrounds and can be combined with priority hints by including the `fetchpriority='high'` on the preload, otherwise it will still start with the default "Low" priority for images. - Declaring scripts as `async` or `defer` tells the browser to load them asynchronously. However, as seen in the figure above, these scripts are also assigned a "low" priority. You may want to bump up their priority while ensuring asynchronous download, particularly for any scripts that are critical for the user experience. --- #### Safari 15.4 _released 14 March 2022_ - parent (well, almost) selector `:has()` - [CSS :has( ) A Parent Selector Now](https://matthiasott.com/notes/css-has-a-parent-selector-now) by Matthias Ott ```css button:has(svg) { } ``` note: - first attempts to use it - Matthias shows the potential of the new feature and it is breathtaking. Well, at least for coders. - that is the simplest example, but what about this --- ```css /* if .grid contains 2 elements, create 2 columns */ .grid:has(:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } ``` --- ```css /* previous sibling selector! */ :has(+ .second) { background-color: darkmagenta; } ``` note: - combining [the _quantity queries_ by Heydon Pickering](https://alistapart.com/article/quantity-queries-for-css/) - another previously impossible: select a previous sibling --- ```css /* parent selector, in the end */ :has(> .child) { color: grey; } ``` note: - [CodePen](https://codepen.io/Kout/pen/ExoppEe?editors=1100) - in Epiphany or Safari or Chrome 101 with experimental features enabled!!! --- #### Internet Explorer _released 17 October 2013_ > No comment… --- ## Caught in the net note: - I realised only yesterday this is the EN title of the famous CZ documentary about predators on internet. I hope, there is not any double meaning in it 😬 --- [πŸ’Ύ Why we’re nostalgic for the early web](https://newpublic.substack.com/p/-why-were-nostalgic-for-the-early) note: - nice read about nostalgic recreations of early web designs with a deeper insight --- [Those HTML Attributes You Never Use](https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use/) - `enterkeyhint` (values: `enter`, `done`, `go`, `next`, `previous`, `search`, `send`) ```html <input type="text" enterkeyhint="done"> ``` --- <img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e5b94737-9111-4dc6-a2da-474ea6d57ecf/1-html-attributes-you-never-use.png"> note: - You are probably familiar with `imagesizes` and `imagesrcset` attributes. But did you know you can use them for `<link>`? --- - `imagesizes` and `imagesrcset` ```htmlmixed <link rel="preload" as="image" imagesrcset="images/example-480.png 480w, images/example-800.png 800w, images/example.png 2000w" imagesizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src="images/example.png" alt="Example Image"> ``` --- - `title` for `<link>` <img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd02ce55-1048-437a-886a-d8e55cfa8984/3-html-attributes-you-never-use.png"> note: - lists: - `reversed` attribute, to number the items in reverse order (high to low instead of the default low to high); - `start` attribute, to define what number to start from; - `type` attribute, to define whether to use numbers, letters, or Roman numerals; - `value` attribute, to specify a custom number on a specific list item - `form` - `multiple` - `integrity` --- [Why is CSS so weird](https://m.youtube.com/watch?v=aHUtMbJw8iA) - a video by Miriam Suzanne note: - client controls the display - in contrary to print even programming in JS the designer doesn't control but suggests - this loosing of control is a feature of the language - A metaphore I personally like: a stylesheet is like a text written by playwright, but what they gonna do with that in the theatre is beyond playwright's control. It depends on the context (how many actors do they have, what is the budget, for what audience it is mean to be done etc.). --- [Request Map Generator](https://domainmap.webperf.tools/render/220410_AiDc8P_7T5/) note: - let’s look at random website - uses WebPageTest in background --- [Cache-Control for Civilians](https://csswizardry.com/2019/03/cache-control-for-civilians/) by Harry Roberts aka [@csswizardry](https://twitter.com/csswizardry) note: - an article by Harry Roberts full of practical tips (as usual) - not that new (published in 2019), but still valid, I am prettey sure you will find something new. And even if not, revisiting your cache strategy is always good idea. - Two quotes from the article: --- > 1. The best request is the one that never happens: in the fight for fast websites, avoiding the network is far better than hitting the network at all. To this end, having a **solid caching strategy** can make all the difference for your visitors. > 1. I would always recommend solving your cache busting strategy before even thinking about your caching strategy. --- [Back/forward cache](https://web.dev/bfcache/) > Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either [back or forward](https://www.youtube.com/watch?v=cuPsdRckkF0&t=1s). note: To test a particular page, navigate to it in Chrome and then in DevTools go to Application > Back-forward Cache. Next click the Run Test button and DevTools will attempt to navigate away and back to determine whether the page could be restored from bfcache. --- [Smashing Magazine: Performance Optimization Strategy in 2022](https://paper.dropbox.com/doc/Addk8wccr1TuhKqzLW09b) note: - a checklist worth going through --- Thanks, slides soon on [@frontendisti](https://twitter.com/frontendisti)