Don't forget to provide image alt meta data for open graph and twitter cards social sharing
Due to the lack of support historically and it not being prominent in many samples, the important alternative text meta tag is often forgotten. To add support for the alt-meta tag use og:image:alt and twitter:image:alt.
Verify what your webpage looks like in Google, Facebook, Twitter, LinkedIn, and more
Social media platforms each generate link previews/cards differently. You can use the official debuggers/inspectors provided by Facebook, Twitter, LinkedIn to debug the previews. To quickly preview multiple social networks + Google + Slack, you can use metatags.io.
Hidden Gem: Take screenshots using built-in commands in Chrome/Edge
Chromium browsers such as Chrome and Edge have many lesser known features. One of those features is the ability to take screenshots of your current tab content. These commands are even more powerful when you emulate different devices and resolutions.
Copy HTTP Requests from Chrome/Edge DevTools to PowerShell/cURL/Fetch
You can copy the recorded HTTP requests the from Chrome and Edge DevTools to PowerShell/cURL/Fetch. This allows you to quickly replay HTTP requests from the console/command line saving saving you time!
Implementing Responsive Images in Umbraco
The web platform has responsive image capabilities such as the srcset-attribute, sizes-attribute, and the picture-element. These capabilities may seem daunting sometimes. We'll learn how to make them available and maintainable to Umbraco content editors.