DEV Community: Ganesh Patil

DOM Element Observer

Ganesh Patil — Sun, 20 Nov 2022 06:02:28 +0000

While developing a web application sometimes requires watching changes being made on the DOM element like when an attribute of a component changes or a new child element is added or removed.

How we can observe a DOM element in Javascript?

MutationObserver is the class that will help here to add a watcher on the DOM element. this watcher can observe changes for attributes or children elements as well. This MutationObserver API works asynchronously and similar to Promise uses a microtask queue while running their callbacks. In simple words, Promise / MutationObserver has more priority than setTimeout / setIntervals using the Task queue.

Let's see how to create this observer step by step.

First, create a configuration for what exactly you want to observe i.e. attributes or child nodes also both can observe at the same time.

    const mutationConfig = { attributes: true, childList: true };

Second, create a callback function that will call when attributes or childList are modified.

function onMutationChangeCallack(mutationConfigList) {
    for(const mutationConfig of mutationConfigList) {
        if(mutationConfig.type === 'attributes') {
            addLogs(`${mutationConfig.attributeName} attribute changed`);
        } else if(mutationConfig.type === 'childList') {
        addLogs(`childList updated. new dom element added`);
        }
    }
}

Here inbuild attributes like a style or custom attributes like custom-data can be observed.
Third, create an object of MutationObserver class and pass onMutationChangeCallback to the constructor.

   const observer = new MutationObserver(onMutationChangeCallack);

Then observe is the method that starts watching changes on the DOM element. Two mandatory parameters need to pass to observe method. One is the target DOM element that we need to watch and the configuration object created above.

   let target = document.getElementById('playarea');
   observer.observe(target, mutationConfig);

There are other methods like disconnect which stops the observing functionality and a callback will not be called after that.

For more information

Please check below link of live of mutation observer api

Live Example

What is Server Sent Event?

Ganesh Patil — Fri, 14 Oct 2022 17:34:54 +0000

Server Sent Event is nothing but receiving data from the server through the event stream. This is one-way communication and only the server can push data to the client. Whereas WebSocket works two-way & can send an event with payload to the server as well as server can trigger an event to the client.

EventSource is the class used to open an event stream from the server. We need to create an object of EventSource class and pass the API url inside the constructor. After that just subscribe to the event that is triggered from the server. If there is no custom event triggered by API then the message is the default event that can be subscribed.

Check below the example.

let eventStream = new EventSource(`${URL}?city=${selectedCityValue}&sec=${secondsToUpdate.value}`);
    eventStream.addEventListener('open', () => {
        console.log("Connected and subscribed to channel ");
    });
    eventStream.addEventListener('UPDATE', (event) => {
        const data = JSON.parse(event.data);
        console.log('eventStream data', data);
        time.innerHTML = data.dateTime;
    });
    eventStream.addEventListener('error', (err) => {
        console.error("EventSource failed:", err);
    });

You can send query param to API URL to make partially two-way communication 🙂 And whenever you want to send or update query param just close this previous connection and open another.

Close the connection using a close method provided by the event source object.

if(eventStream) {
    eventStream.close();
}

I don’t have much experience with Backend technologies but created a simple node server with express for example purposes.

const express = require('express');
const app = express();
const MAX_LIMIT = 100;

function getFormattedDate() {
    const d = new Date();
    return `${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
}
app.get('/event-stream', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Access-control-Allow-Origin', '*');
    res.setHeader('Connection', 'keep-alive');

    res.flushHeaders();
    const sec = (req.query && req.query.sec) ? req.query.sec : 5
    const timezone = (req.query && req.query.city) ? req.query.city : 'Asia/Calcutta';
    let count = 0;
    process.env.TZ = timezone;
    console.log('Request Param -> ', timezone, ' seconds -> ', sec);
    let interval = setInterval(() => {
        count++;
        if(count >= MAX_LIMIT) {
            console.log('Interval Reached Max Limit Closing the Connection'); 
            clearInterval(interval);
            res.end();
            return;
        }
        const obj = {
            id: count,
            dateTime: getFormattedDate()
        };
        const time = new Date().getTime();
        res.write(`id: ${time}_${count}\n`);
        res.write(`event: UPDATE\n`);
        res.write(`data: ${JSON.stringify(obj)}\n\n`);
    }, sec * 1000);

    req.on('open', (event) => {
        console.log('connection open ', event);
    });
    res.on('close', () => {
        console.log('closed connection');
        clearInterval(interval);
        res.end();
    });
});
app.listen(3000, () => { 
    console.log('listening on port 3000');
});

Check the live example to display the current server time using SSE. (Full Source Code)

The limitation of SSE is browser can open only six connections and this limit is per browser with the domain. This limitation is there only when using HTTP/1, not for HTTP/2 has increased this limit.

The practical and real scenario where we can take advantage of SSE is when there is a large dataset that needs to be processed on the server side and we don’t know exactly when that process will complete. There are two solutions to solve this problem.

Send a REST API request to the server to start processing then start pulling the status from the server via API to check process is completed or not.
Send a REST API request to the server to start the process and then create an event source object with some unique process id as a query param, once the process is completed then just dispatch the action from the server. Second way is more cleaner than pulling status from server every some time.

Please check the live example that can demonstrate this scenario. (Source Code)

What is Developer Experience?

Ganesh Patil — Tue, 11 Oct 2022 12:59:50 +0000

I am writing my first post here to express my developer experience in my 10+ years of experience as a developer. I am trying here to explain Developer Experience that can understandable by developer 😊

Many organizations needs to think more seriously about the DX. Let’s see what is exactly mean by Developer Experience. DX is similar to UX and here User is the Developer, User who is creating a product or work for companies.

Companies mainly focuses on improving employee experience, means they provide perks like wel-come kit, good office ambiance, free beverages etc. but I think they should more spend or invest on how developer can work or finish their tasks effectively or efficiently.

Below are some of Good / Bad developer experiences.

🌐 System OS : Biggest problem these days, companies provides windows laptop to developer to work. Windows has many issues while installing dependencies. Most of the dev’s spent maximum time to resolving dependencies while setup new projects on windows system. On the other hand Linux or Mac suites best for development & that can be improve dev experience as well as product quality and it consumes less time as well.
🏗️ Project Setup: Complex architecture, over engineering or unnecessary other application’s dependencies make difficult to setup a project on local for new joiners. Another big problem is not having proper documentation to install/setup the project. After cloning project need to modify too many files inside project to get it run on local & keeping in mind that those changes should not be a part of your PR 😖.
🛠️ Tools: Many Developer dev’s uses VS Code these days but there are other many dev’s uses WebStorm, sublime text, atom etc. company should allow them to download this kind of IDE’s and also provide them paid license if required. Same with other tools like BrowserStack, Udamy, Coursera etc.
🤖 Automation: Architect/Senior team must think about automate deployment process. Jenkin pipeline jobs should be auto triggered, like after creating PR or after merging PR to branch, deploy changes to dev environment & easily can deploy changes on QA/Stage/Prod environment. Manually triggering Jenkins job with too many parameters is not good DX.
🛡️ Release Process: Release process should be very well aligned, automated & should not include any manual changes needs to be done while releasing. Developers are humans and they have ability to forget 😊, Sometime they forget to run one of script on stagging/beta/production environment while deployment is nightmare 😢. Sometime I experienced to release one feature which needs to deploy multiple changes on multiple servers (buckets) or manage many scripts to run on difference DB manually is not a good process. This gives headache to developers as well as time consuming. Organization should invest sufficient time to automate this kind of process. 😊
👨🏽‍💻 Role & Responsibilities: Many organizations assign tasks to developers who don’t have that skills. Like assign some backend task to Frontend dev and vice versa. Or give some technical task to non-technical person. This is very bad developer experience and that task will not be completed properly.

Organizations should take a survey to collect the feedback from developers whether are they happy or not with current development environment & what exactly they want or how can that be improvised.

Please feel free to add your thoughts or good / bad experiences as a developer in the below comment section.