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.
Auto generate Heading Anchors using HTML AgilityPack DOM Manipulation
Manually adding an anchor to every heading would be a painful solution. So let's learn how we can achieve this by generating the Heading Anchors using the HTML AgilityPack .NET library.
Instead of slowing down our site and feeding advertisement profiles, we can use plain HTML to provide social sharing functionality. This post will cover social sharing to Twitter, Reddit, LinkedIn, and Facebook.
Web performance: prevent wasteful hidden image requests (display: none)
We often hide images using CSS with "display: none", but this doesn't actually prevent the browser from downloading these images. Using the HTML Picture element, we can serve different versions of an image depending on media queries. We can even use a data-img to prevent images from being downloaded at all and optimize our website speed.