Blog - HTML

Swimburger
Hacker in front of a computer running applications in multiple terminals

Don't let your users get pwned via email HTML injection

- Web
Learn how to prevent HTML injection into your emails and protect your users from bad actors!
Blazor logo

Get Your Head Together With Blazor’s New HeadContent and PageTitle

- .NET
Let’s take a look at the three Blazor components .NET 6 is introducing to help you manage the head of your document—PageTitle, HeadContent, and HeadOutlet.
Japanese Ramen Soup

Introducing online base64 image encoder

- Web
This little tool generates the base64 data URL for the file you select without uploading it to a server. The base64 encoding happens inside your browser.
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.
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.
Screenshot of the HTML Agility Pack homepage

Auto generate Heading Anchors using HTML AgilityPack DOM Manipulation

- .NET
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.
Social Media Logo's in front of arrows

Social Sharing Buttons with zero JavaScript to Twitter, Reddit, LinkedIn, and Facebook

- Web
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.
Phone with speedometer

Web performance: prevent wasteful hidden image requests (display: none)

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