Daily Shaarli
November 26, 2023
Using radial gradients to create shapes. They are similar in some ways to svgs.
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.
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?
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.
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/
CSS has gotten easier to write than it is different to write.
- use
:isto group multiple selectors such asa:hoveranda:focus - using logical properties instead of marg
margin-trimcan help by removing the last margin child element of a list for example. It is experimental, so Flexbox with the gap propertyaspect-ratioto set only one dimension between the height and the width, while keeping proportions.card:has(:hover, :focus)is easier and straightforward thana.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! chfor managing line lengths;text-wrap: balanceis a work in progress (65% of users can use it)
and more with cascade layers, container queries, <selectmenu> and CSS nesting
:root {
overscroll-behavior: none;
}
A codepen demo https://codepen.io/michellebarker/pen/vYbrpbX
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.