Self-initializing elements with super powers

A Web Developer based in Belgium, specialized in PHP & JS development
Search for a command to run...

A Web Developer based in Belgium, specialized in PHP & JS development
No comments yet. Be the first to comment.
I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

I've just finished a major update of my library Modular Behaviour. Let me walk through what it could bring to you.
If you are using big frameworks like react, vue, etc... this will not apply to you. But if you are working with simple html and js classes, I have good news for you: your life could be much simpler.
One of the common things I have to do: bind js behaviour to my html node. It could be for custom form inputs (a file upload, a date picker...) or some other UI parts (a slider, ...).
This means I need to use libraries that take care of themselves (eg: bootstrap, most of it... except when you add stuff dynamically, for example when injecting ajax content) or have a little bit of JS here and there.
This is all well and good, until you don't know in advance what will be available in your pages. Very often, you find yourself having if clauses everywhere to check for presence of such and such library.
var slider = $('.slider');
if(slider.length) {
slider.mySliderPlugin(opts);
}
Looks familiar?
What if instead we could do...
<modular-behaviour name="$.mySliderPlugin"><div></div></modular-behaviour>
Isn't that much better?
You are going to tell me that creating a custom element just to save a little bit of init code is overkill, and you would be right. But let's consider some more advanced usages.
What if you don't know when mySliderPlugin is loaded? For example, you have an ajax call, that injects some html and trigger the loading of your plugin in js. Your html might very well be injected before the js is loaded. This means you have to wait until all js is loaded and then initialize again, basically forcing you to move your init code in a dedicated space, outside of your regular domReady callback.
Modular Behaviour provides you a central, code-free way, to manage your init code, regardless of how your html nodes are injected or when your js libraries are loaded.
Indeed! By using a custom element, you can leverage a few other things to apply advanced features to all your libraries.
For example: lazy loading. In many cases, there is no need to run the init code until the html node is visible on the page (example, why would you init some complex uploader if it's buried inside a modal or a tab?). While some libraries support lazy loading, it seems like a waste that each of them needs to implement that feature, leading to duplicated code and many IntersectionObservers being created.
With Modular Behaviour, this is not the case anymore! It takes care of lazy loading your elements for you!
But wait! There is more! You can even lazily import the js source itself for simple use cases. Everything is loaded and displayed as needed, based on your user interactions, for free!
Here is an example of a self-initializing bootstrap tags input using this method.