HTMXhttps://htmx.org/, or Hypertext Markup Extensions, is a JavaScript library that allows developers to build web applications using HTML instead of JavaScript. It was created by Carson Gross and was initially released on November 24, 2020. You can integrate HTMX into an HTML document by adding a script tag that links to the HTMX library. HTMX extends HTML with custom attributes that allow developers to: Access AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML Dynamically update web pages Insert server responses into specific parts of a web page without redrawing the entire page HTMX uses HTML attributes to: Swap...
Style tokens, also known as design tokens, are named, reusable values that represent design elements like colors, fonts, spacing, and other visual attributes within a design system, allowing for consistent application of styles across different platforms and codebases by replacing static values with descriptive names; essentially, they act as a centralized repository for design decisions, ensuring uniformity throughout a product. This post will look at whether design tokens are still relevant, how to generate them with Style Dictionaryhttps://amzn.github.io/style-dictionary// and how to use design tokens in a PostCSS workflow. Why use design tokens? For smaller bespoke projects, design tokens may seem...
Splitting.jshttps://splitting.js.org/ is a JavaScript library that splits text into characters, words, and lines. It can be used to create interesting text animations and effects. However, there are times when it can be overkill since we don't always need the full functionality it provides. This post will show you how to split text into characters using Javascript and how you can use this technique to style characters individually. Splitting text into characters Rather than manually wrapping each character in a span tag, we can use Javascript to split the text into characters and wrap each character in a span tag. We...
It All Led to ‘Dune’https://www.indiewire.com/p/denis-villeneuve-career-lookback-interview/ is a very interesting and challenging page to dissect. It has many different elements and APIs that can be used to create a similar page. In this post, we will go through the different elements and APIs that can be used to create a similar page. General Observations The most intersting aspect of the page is that it uses WordPress as a CMS so deciphering the added complexity is a very interesting exercise. It also appears that the site is using Animate On Scrollhttps://wordpress.org/plugins/animate-on-scroll/ WordPress plugin and the corresponding JS library,the full site editor and,...
It appears that the CSS Working Group has decided to add masonry layouts as part of the CSS Grid Level 3https://drafts.csswg.org/css-grid-3/ specification. IMO this sucks but it appears to be a done deal that will hurt developers in the long run but, since it's a done deal it's time to move forward and learn how to work with it. Before we look at the details of how to work with the new masonry layout, I'll take a brief detour and explain why I think it's a bad idea. Why I think it's a bad idea In Help us choose the...
For the most part opening and reading files synchronously in the browser is not a big deal since the files are seldom large enough to cause any performance issues and reading from the local file system is faster than downloading from the web or external resources. When working in certain types of applications it may be better to work with streams since we can't know how large the files users will upload to the application are and that may block the main thread can cause perceived performance issues. This post will revisit the file system access API code from a...
Node.js has always supported Common.js as the module system. When building a package we use modules.export to define the elements in the package that can be consumed by other modules: js // file: myMath.js function adda, b { return a + b; } modules.exports = add; This is the traditional way of defining modules in Node.js: js const add = require'myMath'; Ecmascript developed a module system as a standard way to import and export When building a package we use export to define the elements in the package that can be consumed by other modules: js function adda, b {...
The Filesystem Access APIhttps://developer.chrome.com/docs/capabilities/web-apis/ is a Chromium-only feature that's part of Project Fuguhttps://www.chromium.org/teams/web-capabilities-fugu/. It allows you to work opening and saving files to the local filesystem. This post will discuss the feature and provide examples of how to open and save individual files. This example will perform the following tasks 1. Configure the file picker 2. Write a function to open a file from the local file system 3. Write a function to save the open file to disk Before we start, I'll put the assumptions I make in the code here so you know what you're dealing with. This...
While we have touch and mouse events, pointer events, the pointer events API provides a unified interface for both mouse and touch devices. This post will explore pointer events, paying special attention to how they will work across devices and how to leverage the features of pens and other types of devices. Basic Usage The basic usage of pointer events work just like other events. We attach a listener to the desired event and act accordingly. In the following example the pointerdown event we test the type of pointer device that you used. We can use this as a starting...
Events are things that happen in the system you are programming — the system "fires" a signal of some kind when an event occurs, and provides a way to use the event in either the element that triggers it or with any parent element until you reach the window object. This post will explore events. What they are how to use them with event listeners and how to create and use custom events for our apps and pages. How They Work We first decide what element we will capture the event for. In this case we create a button with...
