html(5/0)
Offer local user comment interaction
I’m wondering if it would be nice for users to take comments on my pages? Or for myself even? Here’s a self-contained example of a simple page that lets the user highlight a bit of text, make a short comment, and append it to the page. I’m not interested in wiring this up to a service or anything, but it’s pretty cool just to have this kind of local interaction with the content.…
Web development is both imperative and declarative
Jeremy Keith explores Imperative/Declarative web development and how team culture defines the paradigm a project chooses more than the language itself in this Youtube Video. It’s insightful and short: only 22 minutes. Jeremy defines imperative programming in terms of control. Imperative programs stipulate each step (instantiate this array, iterate over this collection, put items that meet this criteria into the instantiated array). Side-effects are minimized, but the code must also describe everything that must be accomplished.…
Prefer Light DOM to Shadow DOM
While there are legitimate uses for Shadow DOM, light DOM ought to be preferred until it is absolutely necessary to place your component’s element tree outside the main document. One common use-case which does not require shadow DOM is a custom element that does something special with events. Light DOM Use-Case Let’s say you have a custom element called <chaos-filter>. It has a form with a <select> dropdown and a filter <button> which applies the selected option to a list of children.…
Add snippets to your text input
If you have a textarea where you enter content on a regular basis and want to implement snippets to help with certain constructs, this JavaScript example might be just your style. I may use it in my publishing service so I can easily enter Hugo shortcodes I’ve developed for my site. document.querySelector('textarea.content').addEventListener('keyup', (event) => { var txt = event.target.value; if (txt.length < 7) { return; } var lastWord = txt.split(' ')?…
Custom container queries with resize observer
Until CSS container queries are baked into every browser, ResizeObserver fills the gap. Here’s an example of an observer that switches the CSS Flex from row to column based on the container’s width. This is used on my Plants and Stones pages. ℹ️ I use a Store object to share observable state across my application. This vastly simplifies communication between components; in this case, with my filter component. When my filter results change, I want to re-calculate the possible list width.…