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...
One of the aspects I seldom consider when building demos and applications is how to build the database that will power the CRUD application. For this post we'll use Postgresql 17 installed via Homebrew. Just like with Node, we append the version specifying it using @ and the version that we want to install. This is important because the Homebrew default version is not the latest. bash brew install postgresql@17 When starting the database we have two options. We can start it manually every time we want to use it with this command: The LCALL variable control collation settings for...
Baseline is an interesting initiative The Web Platform Developer Experience group created the baseline-statushttps://github.com/web-platform-dx/baseline-status web component to display data regarding the baseline status of a given feature. This could be useful when discussing a feature in a post since it provides a visual cue as to what major browsers supports the feature. The structure of the component is simple. It has one parameter, the feature ID for the desired feature as it's found in the web features explorerhttps://web-platform-dx.github.io/web-features-explorer/ site. The component requires one attribute, the name of the feature in the featureId attribute. The following examples show how the component...
