DEV Community: Rohit Gupta

jQuery : Adding Event Listeners to HTML elements even before they are rendered

Rohit Gupta — Sat, 24 Jul 2021 10:03:49 +0000

Intro

This article will help you setup event listeners for dynamic elements on the webpage using JQuery.

Pre-requisites

Basic knowledge of JQuery Selectors, Basic event handling in Javascript

Lets Start

Create a basic html with our jQuery dependency

<html>
  <head>
    <!-- add jquery dependency -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  </head>
  <body>
    <div class="main">
      <!-- button will appear here -->
    </div>
    <script>
      let buttonHtml = `<button class="btn">Click to turn me RED</button>`
      // add a button 1 second after document is loaded
      $(document).ready(function () {
        setTimeout(() => {
          $(".main").append(buttonHtml);
        }, 1000)
      })


    </script>
  </body>
</html>

This code just adds a button with class btn inside our main div.

Wrong Approach

Let's start with what I was doing wrong earlier.
Adding more lines to our script that should add a click listener to my button

// on click of our selector, turn our button RED
$(".btn").on('click', function(){
  $(this).css('background','red');
})

Well, See in action

Correct Approach

I checked for jQuery documentation and found that there is also an event-delegation approach

// Taken from https://api.jquery.com/on/

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.

So, all I had to do was add another parameter to our method and change the selector.

So Basically,

Tell our browser, that whenever there is a click event on our .main class element, check if it was made on the .btn specifically.

So I replaced my previous code with this.

$('.main').on('click','.btn', function(){
  $(this).css('background','red');
})

That was it. Boom!

Thank you note.

Thanks for reading. Like and follow for more such articles.
Happy to engage in healthy discussion in comments.

Logging Node.js logs on Papertrail using Pino

Rohit Gupta — Sat, 17 Jul 2021 16:53:46 +0000

Introduction

This article will help you set up your logs with papertrail with your existing Node.js application

Pre-requisites

Basic knowledge of Node.js, Yarn/NPM, importing and exporting nodejs packages within files.

I will talk in the first person so bear with me 😀

Lets Start Stepwise

I created a new directory on my desktop and named logging
Then fired up a terminal in this folder.
Created a basic project using yarn, feel free to use npm

yarn init

Added 3 packages

yarn add node-cron pino pino-papertrail

Created a logger.js file which will export our Pino transport logger.

// logger.js
module.exports =  require('pino')();

Create an entry file for our project execution index.js

var cron = require('node-cron');
// import our logger
const logger = require('./logger');

// add a cron that will run every 15 seconds
cron.schedule('*/15 * * * * *', () => {
  logger.info('logging every 15 seconds');
});

Created a new log destination using the big button below.

Used next screen with default settings, hit Create
Next screen will show up to your log destination variables

Starting Our Application

In our project terminal, use this command to throw all our logs to papertrail. Update your variables (obviously) for host, port and app name accordingly.

node index | pino-papertrail --host <logs.papertrailapp.com> --port <PORT> --appname <NAME_OF_APP>

Output : Project Console

Here’s my terminal console

<14>1 2021-07-16T22:30:45.438+05:30 rohit testApp 14993 - - {"level":30,"time":1626474645438,"pid":14993,"hostname":"rohit","msg":"logging every 15 seconds"}
<14>1 2021-07-16T22:31:00.458+05:30 rohit testApp 14993 - - {"level":30,"time":1626474660458,"pid":14993,"hostname":"rohit","msg":"logging every 15 seconds"}
<14>1 2021-07-16T22:31:15.475+05:30 rohit testApp 14993 - - {"level":30,"time":1626474675475,"pid":14993,"hostname":"rohit","msg":"logging every 15 seconds"}
<14>1 2021-07-16T22:31:30.491+05:30 rohit testApp 14993 - - {"level":30,"time":1626474690491,"pid":14993,"hostname":"rohit","msg":"logging every 15 seconds"}
<14>1 2021-07-16T22:31:45.510+05:30 rohit testApp 14993 - - {"level":30,"time":1626474705510,"pid":14993,"hostname":"rohit","msg":"logging every 15 seconds"}

Output : Papertrail Event logs

Thats it.

Follow for more upcoming articles. 🙃

Hey programmers, which keyboards do you suggest under $200.

Rohit Gupta — Sat, 01 Aug 2020 17:26:43 +0000

I am currently using CM Storm Devastator for 3 years now. I've been thinking about upgrading this for a while and switch to a good mechanical keyboard.

Since I'm on a budget, I'm looking for a good keyboard under $200 USD.

I would love to take your suggestions on the keyboard you are using or have been meaning to buy.

I do not have much knowledge about them, I have seen some reviews but not the ones where people are using them for long term.

My work includes 7 hours of coding everyday, surfing web for 2 hrs every day.