Blog - Web

Swimburger
Social Media Logo's in front of arrows

Don't forget to provide image alt meta data for open graph and twitter cards social sharing

- Web
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.
Screenshot of metatags.io preview

Verify what your webpage looks like in Google, Facebook, Twitter, LinkedIn, and more

- Web
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.
Microsoft Edge and Google Chrome logo

Hidden Gem: Take screenshots using built-in commands in Chrome/Edge

- Web
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.
Screenshot of HTTP Request in PowerShell

Copy HTTP Requests from Chrome/Edge DevTools to PowerShell/cURL/Fetch

- Web
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!
Phone/Tablet/Laptop displaying Umbraco logo

Implementing Responsive Images in Umbraco

- 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.