While it was pretty busy in the last weeks, sadly, I haven’t had time to create another article. Well, it is what it is, but here are some updates from the last couple of weeks.
Learn accessibility
One of the most complicated things I tried to learn over the last two years was how to build accessible websites. There is tons of material out there and even things that you have to figure out yourself. Some things are pretty nuanced, and you will learn from others.
Practical Accessiblity by Sara Soueidan
One great resource on getting started is a course published soon: Practical Accessibility.
Sara Soueidan tells you everything you need to know about this topic in easily followable steps.
Performance optimised video loading
Recently I was confronted with loading performance-optimised videos without using JavaScript at all. The result ended up in a codepen code snippet and might look a bit like magic but is just a combination of a couple of HTML and CSS techniques.
See the Pen
Load Video on Click by Stefan Bauer (@StfBauer)
on CodePen.0
To get full experience watch it directly on codepen.
<details>/<summary> gives you an accordion without extra JavaScript code and also comes with accessibility benefits.
So when a user clicks on the image in the summary container, details get an attribute ‘open’ assigned, allowing you to hide the summary but revealing the content area, the details, which contains a video player.
Images and IFrames support the loading attribute, which can be set to “lazy”. This lazy loading means the browser only loads the content when visually available. Therefore, when the player iframe gets revealed, it loads the player only then.
While for now, I added it to a pimped version of a PnP modern search web part. I am looking forward to adding it as a capability.
FAQ: Flexbox vs CSS Grid
FAQ: Flexbox vs CSS Grid video by Jen Simmons is new, but the information is still accurate and good to know.
Check it out if you ever questioned when to use what.
In addition to this, I would also recommend checking out Kevin Powell’s videos on Flexbox or grid – How to decide?
Fluent Design 2 vs Fluent UI React 9
At the Build Conference, Microsoft released its Fluent 2. It now has great documentation built on Storybook at a dedicated website and contains a log to good information.
Fluent Design v2 got launched with great new update information
With Fluent 2 also, Fluent UI 9 got officially announced. While Fluent UI React 9 is out, the implementation is still an early beta IMO. Again, It has many breaking changes and bad practices and could have better accessibility.
Meanwhile, the controls scale based on the base font size set by the user in their browser, but it’s done pixel-based and gets recalculated via JavaScript, as it seems. Not something great in the case of performance, especially on mobile devices.
New CSS Unit – lh aka line height
Have you ever wondered how large a container is when you only what to have three lines of text? It seems like now you can use a CSS unit for that.
p{
font-size: 1.5rem;
line-height: 2;
max-height: 3lh;
overflow: hidden;
}
Of course, the unit ‘rlh’ for root line height also exists.
While it still takes a bit of testing on my side, at least it’s good to know that it exists.
Bonus – Adobe Generative AI aka Adobe Firefly
Adobe recently released a couple of bet programs under the code name Adobe Firefly. I played around with a couple of creations on text to image, as well as with text decorations.
One of this creations is turtle with turtle neck pullovers.
Collection of turtles with turtle neck pullovers
While I must say the first creation is by far the cutest.
First turthe with turtle neck creation – with generative AI provided by Adobe Firefly.
In case of text decoration I created a PnP logo with unicorns and rainbow colors to celebrate the pride month.
Text Decoration generative AI with Adobe Firefly
Overall, while generative AI can help to improve creations, by no means it will take any job away from good designers.
That’s all for this week. Have a great weekend