Daily Shaarli

All links of one day in a single page.

November 26, 2023

CSS { In Real Life } | Radial Gradients and CSS Trigonometric Functions

Using radial gradients to create shapes. They are similar in some ways to svgs.

The Platform for Privacy Preferences 1.1 (P3P1.1) Specification

Even if this standard is not used for years, some ideas are interesting. How and which data is collected and used are pretty well standardized.

It can somehow interact with the GDPR.

More native than a Web app - Seirdy

When to use a GUI Toolkit, is it more native than the web? It means some criteria the author defines. Also what level of WCAG conformance can someone hope for?

CSS { In Real Life } | What to Blog About When You Don’t Know What to Blog About

Idea of writing:

  • Here’s a cool thing I made.
  • Here’s a cool thing someone else made.
  • Here’s something I just learned.
  • Here’s something I want to learn that looks cool.
  • Why I want to learn/use/do this thing.
  • Why I don’t want to learn/use/do the thing.
  • I’m in the process of learning something but I haven’t quite got it figured out yet.
  • Here’s something else I discovered while learning a thing.
  • Let’s learn a thing together!
  • Here’s a tip, tool and/or person that helped me recently. Maybe it’ll help you too.
  • Here’s a problem that’s been bugging me.
  • This is what I think about work/life/the industry/the world/this UI component right now.
  • Here’s an interesting thing someone else has to say. Here’s my take on it.
  • I’m feeling motivated! This is what’s motivating me.
  • I’m feeling unmotivated or burnt out. Here’s why.
  • This is what I’ve been reading/watching/listening to recently.
  • Here’s a list of things I could blog about.
CSS { In Real Life } | Choosing a Green Web Host

Green energy means renewable energy instead of carbon credits or offsets.
What is the water consumption of the data center?
What about the energy efficiency?

Green hosting can be found at https://www.thegreenwebfoundation.org/tools/directory/

A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine

CSS has gotten easier to write than it is different to write.

  • use :is to group multiple selectors such as a:hover and a:focus
  • using logical properties instead of marg
  • margin-trim can help by removing the last margin child element of a list for example. It is experimental, so Flexbox with the gap property
  • aspect-ratio to set only one dimension between the height and the width, while keeping proportions
  • .card:has(:hover, :focus) is easier and straightforward than a.card-link:hover > .card
  • an easier way to define color palette with --gray-dark: color-mix(in srgb, var(--primary-color), [#fff](./add-tag/fff) 25%);. It is more maintainable!
  • ch for managing line lengths; text-wrap: balance is a work in progress (65% of users can use it)

and more with cascade layers, container queries, <selectmenu> and CSS nesting

CSS { In Real Life } | Preventing Scroll “Bounce” with CSS
:root {
  overscroll-behavior: none;
}

A codepen demo https://codepen.io/michellebarker/pen/vYbrpbX

How to Design More Intuitive Websites & Apps | OddBird

Using an object model helps while designing some web pages or content.

An object in a web project is something that has structure, instances, and purpose. Instances are all the specific occurrences of an object.
An instance of the object link can be "When to choose a progressive web app".

So, as we make our user experiences more object-oriented, we also make them more intuitive.” - Sophia Prater, ooux.com.

With this practice, 4 unintuitive objects are identified. The author use the example of a zoo website and they are:

  • isolated objects: they are disconnected from related objects. The penguin animals are not related to the demos and habitat from the list of all the animals. The habitat is also included on the map view of the zoo, but there are no links to the Animal or the demo on this map view either.
  • broken objects: ones that are not directly manipulatable. Demos are useful to show events to the user. As someone who would like to attend the penguin demo, I want to click on an individual demo to see more details, but it is not possible.
  • masked objects: styled to look the same, but are actually different. On the DisneyPlus web view, there is no way to differentiate between a series or a movie. As you want to see a movie (one shot) instead of a series (multiple shots), you have to check on the detailed view in a panel.
  • shapeshifter objects: opposite of masked ones, they are styled to look different, but are actually the same. Date formatting, links, and so on should look and behave the same across the website or the experience platform. They have to be consistent.