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...
I came across Web Components Are Not the Futurehttps://dev.to/ryansolid/web-components-are-not-the-future-48bh by Ryan Carniato, the creator of Solid.jshttps://www.solidjs.com/. I think that the article is biased and it makes assumptions based on his experience as the creator of a framework, Solid.js so, out of the gate, I would expect biases even though he has done work with web components before. I think the biggest issue I have with the article is that Ryan presents web components and frameworks as an either/or dychothomy where I see it as a cooperative and type of scenario. For example, he addresses the advantages and disadvantages of web...
From their humble beginnings, the specifications that make up web components have become more complex and flexible at the same time. This post will cover the APIs and specifications that make web components, from the core custom element API to the slots API to mix dark and light DOM, to CSS Parts to style the web components from the outside. This will provide a reference for further work. Custom Elements At the most basic level, custom elements are made of two parts: The HTML declaration of the element Javascript that defines it. Most of the time when we see a...
I worked with WordPress for 18 years until 2023 when the direction it was moving to didn't align with what I wanted to do. I've also strongly disagreed with Matt Mullenweg's policies in the past. I'm working hard to keep the biases in check, but want to put them up front, just in case. I have to admit that this caught me by surprise. I've never been a fan of Matt Mullenweg and his heavy handed approach to managing WordPress, its partners and ecosystem but this is getting out of hand and will have serious impact on the community as...
When evaluating web components for the blog, I also came around a different idea. Can we build web components that don't want to use shadow DOM? Would it make sense to do so? Another element to look at is to build web components for some aspects of the blog using either bare bones web components that eschew the shadow DOM, or libraries like Lit, Wired Elements or Shoelace/Web Awesome. The basic idea is this: 1. Create a web component 2. Insert the content in the component's light DOM 3. Evaluate if styling is appropriate or not Hand Written Web Components...
In a previous post we looked at how to create a database in a Homebrew version of Postgresql. This post will look at the database structure of a hypothetical license database web application as an example of building the schema and the database in Postgres 17 along with some necessary concepts when building the schema and table. Database Overview recipe id unique primary key name name of the recipe for example carrot cake description short descriptive text about the recipe instructions step by step on how to make it createdat date when the recipe was inserted into the database ingredient...
