Develop pluggable widgets for fun

Development is easy and fun with the proper development tools, less manual work and some fancy things we love.

This article is about creating our own widget and integrate it into a website that helps us in the development or looks cool or does both.

The idea here is unlike components, widgets will be rendered automatically, floats on the UI and can be movable and resizable like the desktop or the mobile widgets.

Here is the sample template of the widget that I have created to create widgets.

// IFFE for scoping
(function () {

    let html = ``;

    let styles = ``;

    // Do not use window.onload as it will override other mehtods instead adding new listner
    window.addEventListener('load', function () {

        // Create container div and append it to body


        // Code to make the div resizable


        // Code to make the div movable


        // Widget specific javascript code

    });
})();

Let's see an example of such a widget- a Todo widget

I have cloned a sample dashboard from a codepen pen and imported the widget file in it. You can see a floating todo widget floating at top right that shows a list of todo tasks. This widget uses local storage so even on reload, you can see your previously added todo list.

Here is the git repo for that todo widget. You also will find a sample template where you can put your html, css and JS code and try your idea.

Maulikdes / JS-Widgets

This repo consists of single file widget written in pure JS, HTML and CSS

We can create any kind of widget that we want. Here are some other examples

• clock
  

• or a music player
  

What else you want as a widget? please comment

Also, if you see the code, you will find it a bit ugly and you have to keep in mind that the style of your widget should not affect the existing application and also need to think about scope... which is a bit difficult in vanilla javascript as you have to write code for it. But, it would be easy for us to write the same code in angular or other frameworks, right?

Angular has the functionality of creating a single file web-element which can be used in any site developed in any framework or even in simple HTML after exporting the angular component and importing it in any project.

These widgets also have an advantage over plugins that they have more access to plugins. My next article will be creating this type of widgets using angular.