Creating custom buttons (1): Action Buttons
We take a lot of what HTML does for granted and assume that whatever we throw at the browser will do the same thing. One of the earliest examples I remember is creating our own custom buttons. We will...
Color Fonts (again, with feeling)
I first saw information about color fonts in 2013 in Color fonts. Overview of the proposals for color extensions of the OpenType font format. but they haven't taken off despite Safari supporting one...
Detecting user's color preferences
There are multiple ways to handle theming an app or a site. The first one depends on whether the user has enabled light or dark mode at the operating system level. We can use prefers-color-scheme`...
Templates on web pages
Using templates in Web pages has always been complicated and always required third-party libraries like Handlebars and Moustache HTML templates, part of the web components family of specifications,...
Sanitizing HTML content
One of the biggest security issues with web applications is Cross Site Scripting (XSS). In an XSS attack, malicious code is added to HTML that we expect the browser to parse, thus rendering and...
Styling Native Dialogues
In dialogues in the web we saw how to create native dialogues using HTML and Javascript. This post will look at how to style the dialogues and the parent element. Styling the dialogue element # The...
Dialogues in the web
I found an interesting thing that would make it easy to create dialogues for web applications. The dialog element represents a dialog box or other interactive components, such as a dismissible alert,...
What is semantic markup and why it's important
A lot of times we'll hear about semantic markup and its importance on one hand and how you can create really odd or broken markup and it will still render in browsers. The example that still catches...
Switching to pointer events
It is easy to think that everything will work with mouse clicks on the web. However, many devices support other types of pointing input devices, such as pen/stylus and touch surfaces so we need a way...
Using clamp() to constraint a container width
Reading min(), max(), and clamp(): three logical CSS functions to use today presented an interesting case for using clamp(): Controlling the width of a text-container. In typography books, we're told...