The User Timinghttps://developer.mozilla.org/en-US/docs/Web/API/PerformanceAPI/Usertiming API allows you to measure the performance of your web application. It provides a simple way to create custom metrics that you can use to measure the performance of your application. In this post, we'll look at what is the User Timing API, how you can use it to instrument your code, how you can and measure the performance of your web application. What is the User Timing API? The browser adds information performance entries to the browser's performance timeline including entries provided by the Resource Timing APIhttps://developer.mozilla.org/en-US/docs/Web/API/PerformanceAPI/Resourcetiming that determine the time it takes to fetch a...
I first started playing with web content in 1994 while in college. Over the years I've see most major changes in web development. From the early days of HTML-only sites, to CGI for server-side processing, to Javascript, Ajax, and many other libraries and frameworks, to AR/VR to now AI. In this post I will try to present a brief history of frameworks and address my views on frameworks and their issues, and why I think we should be careful with AI as it exists at the time of this writing. Prehistory: Before Javascript The earliest server-side programming was done with...
One of my favorite things to see on the web are curved paths with text on them... how to create irregular text paths and laying out text on them. This post will discuss how to create text on a path using SVG, the advantages and disadvantages of using SVG for this purpose, and how to animate the text along the path. Creating Text on a Path Creating text on a path in SVG is straightforward. You define a path using the element and then use the and elements to place the text along that path. In the element we use...
Promises have been around since 2015 and are a powerful way to handle asynchronous code in Javascript. They allow you to write cleaner, more readable code by avoiding callback hell and making it easier to handle errors. Newer methods are introduced periodically to improve the functionality of promises, and the async/await syntax has made working with promises even easier. In this post, we'll take a deep dive into how promises work, their methods, and provide a reference for these methods. We'll also look at the async/await syntax and how it can be used to simplify promise handling. Basic promise support...
Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. This post will explore basic concepts of functional programming and how you can apply them in Javascript. Primitives Primitives are all datatypes that can hold only one value at a time. JavaScript has 7 primitive data types. string : Represents text. number : Represents numerical values. boolean : Represents true or false. undefined : Indicates a variable has not been assigned a value. null : Represents an intentional absence of any object value. Symbol : Creates unique identifiers. BigInt...
The attrhttps://developer.mozilla.org/en-US/docs/Web/CSS/attr function allows you to use the value of an HTML attribute in your css. It has been around for a while, but it was limited to using the value of an attribute as a string. The following example uses the value of the data-color attribute to set the background color of a div element: css div { background-color: attrdata-color; } There is a problem. attrdata-color is always parsed as a string, and could only ever be referenced as a string value and used in the content property of a pseudo element. There has been new functionality introduced recently...
A lot of times we think of HTML as a static, inflexible, language. But there are many things you can do with HTML that are not obvious unless you look for them. This post will look at two specific things you can do with HTML range inputs: adding tickmarks and a live value display. Range inputs with ticks datalist When using a range input on its own, you specify a minimum and maximum value, and the user can select any value in between. html As you can see below, on its own, the range input is not very informative. It...
This post will cover my research on the WebGPU API. WebGPU is a lower level API that will work with underlying native GPU APIs like Vulkan Khronos Group, Metal Apple, and Direct3D 12 Microsoft, providing a unified and efficient way for web developers to utilize GPU capabilities. There is no relationship between WebGPU and the previous WebGL APIs, which targeted different OpenGL specifications. WebGPU provides access to non-graphical computation tasks through compute shaders, which can be used for general-purpose computing tasks that can benefit from parallel processing. Differences with WebGL The following sections will compare WebGL and WebGPU in terms...
JSON5 is a superset of JSON that allows for more flexible syntax and features. This post will disccus reasons why I prefer JSON5 over JSON. What is JSON5 The JSON5 Data Interchange Format is a superset of JSON so valid JSON files will always be valid JSON5 files that expands its syntax to include some productions from ECMAScript 5.1 ES5. It's also a subset of ES5, so valid JSON5 files will always be valid ES5 and fully compaible with ES2019 and later. The following ECMAScript 5.1 features, which are not supported in JSON, have been in JSON5. Objects Object keys...
This post will look at two areas related to reading online: How people read online How to determine optimal font sizes? Is there such a thing? If people scan the content of your page, what font size will make it easier to scan and what font sizes will drive people away? How do people read online? Starting in 1997 with his report How Users Read on the Webhttps://www.nngroup.com/articles/how-users-read-on-the-web/, Jakob Nielsenhttps://www.nngroup.com/people/jakob-nielsen/, and later his team at the Nielsen Norman Grouphttps://www.nngroup.com/, have researched how people read, or don't read, online. Their latest research blog post: How People Read Online: New and Old...
