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...
This post is a continuation of the last post about Javascript events. It will give a partial list of events available to Javascript browsers, whether they bubble up to parent chain and a brief description. Knowing whether an even bubbles or not is important since it may change the way you write code. The first block of events are triggered in the window or document objects. | Event | Bubbles | Description | |:---: |:---: | --- | | Window/Document Events ||| | load | No | Fired when the whole page including external resources is fully loaded. | |...
These components are under development and they may change without notice. If the current version of the components meets your needs you may want to pin to the specific version you're currently using. This may also mean hosting your own version of the library Working in blog updates and ideas for future projects I started looking at web components as an alternative to manually updating code for each type of component I want. These are likely not the only options for what I want to do but are the one I'm evaluating at the time of writing. color.js Color.js elementshttps://elements.colorjs.io/...
We can use special types of parameters to protect ourselves when writing code. This post will cover two defensive coding strategies: default parameters and what I call sibling parameters. Using default parameters protects us from getting errors with our code when we forget to add the parameters or we forget to add the right number of parameters. In this function we've set up default values for each parameter. Default Parameters When we use default parameters we assign values to the parameters when we create the function. In the example function we assign values to each parameter. js function multiplya =...
