WDW #431

🗞 Highlights

Web Almanac – HTTP Archive’s annual state of the web report
A comprehensive report on the state of the web, backed by real data and trusted web experts. 8.3M websites were tested.
HTTP Archive (Web Report)

UX Design: Types of interactive content amplifying engagement
The most popular types of interactive content in modern mobile and web interfaces, brought by Marina Yalanska.
Marina Yalanska (UI/UX)

5 Web Design trends for September 2022
Carrie Cousins (Inspiration)

Braun Linear
A new typeface for Braun. “Sleek, useful, friendly, german, and modern.”
Braun (Typeface)

30 best Serif fonts to add to your toolbox
Versatile typefaces that can be used for body copy, headlines, branding, etc.
Marc (Typeface)

💡 Inspirational website of the week
The super creative and interactive portfolio by Sam Fairbairn.

👨‍💻 Tutorials

How to create the perfect favicon
A favicon gets more airplay than the website itself. And if that tiny icon is within users’ fields of vision in browser tabs, search histories, RSS feeds and more, you better make sure it makes a strong impression. 
Sergei Davidov

How to create wavy shapes & patterns in CSS
Temani shows that CSS can make nice waves and the code for it doesn’t have to be all crazy.
Temani Afif (CSS)

6+5 ways to make a two-column layout
There are multiple ways of doing a two-column layout: from pretty reasonable to com­pletely wrong.
Vadim Makeev (HTML, CSS)

Speedy CSS Tip! Animated Loader
Animated CSS loader with scoped custom properties and animation-timing-function.
Jhey Tompkins (CSS)

Learn HTML
This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.
Estelle Weyl (HMTL)

🛠 Tools / Resources

Edit Image using Text
We shared a similar tool in the past, where we could remove objects from a picture. This one is a little different. You can erase the part you want to edit and describe the final effect using detailed text. 😦 They have free plans where you can edit a dozen pictures. If you use this link to register, you get an additional 4 free pictures to edit.

There is a trend of tools like this. They provide free customizable illustrations. Could be useful when you want them to match your color palette.

Fluid type scale calculator
Generate font size variables for a fluid type scale with CSS clamp.

⚡ Snippets

  • With Adobe’s $20 billion takeover of Figma, some think the beloved startup is as good as dead.
  • Rapidly build efficient sites with Neat, the minimalist css framework.
  • Run WordPress in the browser thanks to WebAssembly magic.
  • Modern devices crafted in pure CSS.