Creating dynamic, responsive web forms doesn’t have to be complicated. With HTMX, you can build a seamless signup form using just a few HTML enhancements. In this blog, I’m going to show how to make a basic signup form with HTMX.
We’ll cover how a few minor improvements to HTML allow us to make a simple form quickly while keeping state consistent. There will be only three sections to the form, but it’s easily extendable with changes in only one or two routes per change.
Through the years, we were told a parent selector would be an engineering feat that could not be achieved due to the way browsers render a page and apply computed styles to elements as a stream, one element after the other. When the browser paints a parent and inevitably its children, reevaluating this already-painted DOM to evaluate parents for children containing a particular context would be too expensive of a task.
As the years moved on, we all applied different hacks or strategies, either reworking our DOM to avoid the issue altogether or using various JavaScript techniques to select parents and add CSS classes to use instead. We were just waiting for something to save us…
Layout shifts, or page jank as I like to call it, rears its ugly head when a visible element changes position or dimensions, causing the position or dimensions of content around it to be changed.
There are too many possible reasons behind a layout shift to cover in one post, so I’ve narrowed it down to one in particular for the sake of brevity. In this article, we will discuss this scenario: a component changing its height due to its state being changed from user interaction.
I know that this is a relatively isolated example, especially in the grand scheme of things. However, I think this proves an important point. Solving a layout shift doesn’t always have to be a tedious and complicated process to fix. Sometimes, scenarios like this can easily be solved using the CSS we already have at our disposal.
There is a new exciting feature coming to JavaScript in the not-so-far future. That feature is Optional Chaining. At this moment, Optional Chaining is in Stage 3 of the TC39 process, so it’s in late stages of the process and will be here soonish.
In general terms, Optional Chaining is an approach to simplify JavaScript expressions for accessing deeply nested values, array items, and methods when there is a possibility that a reference may be missing.
In this blog, we give an introduction to Optional Chaining in JavaScript. We discuss what problems Optional Chaining solves, the various ways you can use it, and relatable code examples.
With the introduction of .Net Core 3.0, Microsoft has built its own web UI framework.
Introducing Blazor: Microsoft’s fully C# client-side framework. With the help of its Razor platform, Microsoft is attempting to put its hat in the ring with the likes of Angular, React, and Vue.
Blazor allows developers to fully design and execute web pages purely with C# — it is meant to eliminate the need for JavaScript. The goal is also to hopefully limit the number of vulnerabilities found in front-end UI work.
In this post, we give an introduction to Blazor and a quick tutorial for getting started.
