Louis Hoebregts walks us through how they rendered a 3D globe on a 2D canvas.
Because as all the following animation steps were plain 2D, I couldn’t use a 3D renderer such as Three.js. And so I had to figure out how to render a 3D shape using only the Canvas 2D API.
Some really nice demos in there, such as this one:
😅 Having sudden flashbacks to 2006 here, where I used Photoshop’s Script Listener Plug-In to record my actions as I converted a PDF to a JPG, yielding some Visual Basic code. With that generated code in hand I created a C# application that would steer Photoshop and perform that very same action each file in a folder.
Looking for a way to implement footnotes in HTML, Thomas Steiner experimented with using the <ruby> element.
The MDN docs describe the ruby element as follows.
“The HTML <ruby> element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.”
Hmm 🤔, this sounds like it could fit the footnotes use case.
The markup looks like this:
<ruby tabindex="0">some term<rt>content for the footnote</rt></ruby>
Using CSS Counters number indicators are injected, and using :target the footnotes are shown.
Not sure if this is how <ruby> should be used, but it’s quite a nice solution. Let’s hope this will open up the discussion again to adding elements to allow native footnotes in HTML.
Interesting real-world case-study over at Smashing Magazine:
In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.
In this article, I aim to provide you with a clear explanation of how clip-path works in detail when to use it, and how you can use it today in your web development projects. Are you ready? Let’s dive in.
As per usual: tons of examples and nice accompanying visuals.