WDRL — Edition 284: AVIF, Lots of CSS and our own Soil.

Celý článek

Hey,

“You can run-away, run-away, run-away… you gotta face this… time is running fast…” — Snoop Lion in his song ‘Rebel Way’

We can apply this quote to a lot of matters in our lives right now. Our time to do something for ourselves, for our relatives, our animals, our planet is running fast. And whether it’s about voting, about the actions to fight a pendemic or to fight to get back our human rights and freedom in face of country lock-downs, or in the fight against global warming which is getting harder each year we don’t do enough.

Have we considered the impact of our current system to develop, deploy, test and run our Internet services on the planet? How much energy is used to create all these Docker images, to run all the VMs and hardware machines that are just there to run Continuous Integration systems and get rebuilt from scratch each time we push a little piece of code? Now considering that no provider is yet powering their server clusters completely CO2 neutral, not event trying to count the energy and sources we need to build all the hardware in there, this suddenly shines in a not so bright light. At the same time we destroy the biggest value we have as humans: Our soil. By using farming techniques, chemicals that destroy the soil long-term and building more and more houses and business units on the soil, we destroy our ability to produce food that keeps us living. And then we face a pandemic and wonder why… it’s time to act. Not just to watch another video stream. To reduce our impact, to reduce our energy consumption, our car drives, our use of chemicals that hurt ourselves. And instead, we should focus on what’s doing good to us… nature, calmness, friendship, love, kindness.

News

• Postgres 13 was released and brings performance benefits, application development conveniences such as native UUIDv4 generation, or datetime() support in the JSON path. Here’s an in-depth review including code how to use the new things in v13.

Generic

• Steve Messer explains us why his website is killing the planet — or is it really? We can do something.

UI/UX

• Chris Coyier shows us how to offer options for mailto: and tel: links in a custom popup modal.
• System UIcons is a set of icons under Unlicense so you can use without attribution for free (but it’s even cooler if you add an attribution).

Tooling

• umami is a simple self-hosted open web analytics platform.

Security

• terjanq provides us with a collection of short XSS payloads that can be used in different contexts. Pretty cool to do some security testing on our applications.

Privacy

• The browser Chrome is changing the default Referrer-Policy and is now using strict-origin-when-cross-origin by default. That will be for the benefit of the users’ privacy. Of course, if you want to enable another type of policy, you can still do.

Web Performance

• Infinite scrolling is used a lot across the web, especially for item listings. Now the key for this cool way to ease a flow for the user is to implement this right and without layout shift or other glitches. Addy Osmani shows how to avoid layout shifts in infinite scolling. And don’t forget to update the URL to the next paging so if something goes wrong and the user needs to reload the page, they see the same state again.
• AVIF is the new hot image format that we can use on the web. Finally, it’s a standard format that’s going to be implemented by probably all browsers quite quickly. Chrome already has support on Desktop and it’s coming to Android soon, Firefox is currently implementing it and Apple is part of the AV1 working group so they’ll probably add it as well soon. Anyway, you can already use the new image format by using the picture element and content negotiation methods as we do it for WebP or other formats already. But why AVIF? Well, it’s a standard that is accepted by many major software companies and it’s really good in compressing images while still looking good. In many cases it’s much better than WebP, and it’s really good for not only photos but also illustrations.

Accessibility

• Microsoft had it for years already as proprietary solution on their platform, now Mozilla added support for the standard Media Query prefers-contrast in Firefox. This means that some colors are enforced by the browser to ensure better contrast and now we can serve high contrast modes of our websites to more users.
• Dave Rupert appeals for writing alt attribute values like paragraphs so in case of an image loading failure or a screen reader, the user still gets a really good description of what’s to be seen here. This is good, I do this a lot already but one thing to say is that it’s still an attribute so we can’t really write more than one paragraph there. Alternatively, you can still use figure and figcaption elements for this use case and just leave the img element’s alt attribute empty. Never omit the attribute, please, by the way.

JavaScript

• inclusive-dates is a really well made human-friendly datepicker that’s also fully accessible.

CSS

• Ana Tudor shows the future of CSS masonry solutions with CSS Grid. But as support is very limited and yet to be implemented by many browsers, we need a fallback which Ana shows as well in the tutorial.
• Wonder how to make a gradient colored text nowadays? Serving it as an image or SVG isn’t necessary, Adam Argyle shows us in a Codepen how it can be solved using background-clip and other CSS properties.
• While we all use box-shadow a lot, the lesser known drop-shadow property is a really cool one: it creates a shadow around the element’s clippings instead of their box-model. Maybe you remember how to create triangles with just some borders. Using drop-shadow let’s us define a shadow on such elements.
• Adam Argyle and Oriol Brufau share how to make custom bullets in a HTML list using the CSS ::marker pseudo-element selectors. This is good because it’s standardizing things we used to hack since years.
• Stephanie Eckles with a new great tutorial how to apply a custom look to native HTML input fields with the latest methods.
• Linearly scale font-size with CSS clamp() based on the viewport. The solution we looked for since a long time is now available in browsers.
• Ahmad Shadeed explains the mindset we should use when coding CSS: Just in case.

Work & Life

• Caring about the climate but don’t find things to help? Climatebase is a platform that offers events and jobs to find in the fight against climate change.
• Matthias Ott with some simple, honest words on why the change of climate affects us, directly.

Go beyond…

• You remember I posted a link to a website that’s entirely powered by Solar? Here’s the follow-up that shares how sustainable the project is. Well, crazy how unsustainable technology most of the time is, right?
• Nigeria′s Bayo Akomolafe: “We aren′t ′in control′ of climate crisis” This interesting read gives us some insight into other cultures and how we could treat our nature and living environment differently to how we’re used to do right now.
• Why soil matters. A good summary of why we should take more care on the soil we live on, we live from. I myself am going to hold workshops and talks beginning next year here in southern Germany about solutions how to take care of soil, how to restore it, preserve it and bind CO2 in the atmosphere in the soil.

Thank you all for reading this, I hope you’re doing fine and stay positive, find your way to make an impact and help build a better society, better friendships and make our world a little better.
If you want to support my work, you can give back via PayPal or Stripe. Thank you!

—Anselm