Image for post
Image for post
A diff’d version of HTML

Hello y’all, let’s talk about “Diff View” today and see how we can achieve that in our project. You can get the JS file from tnwinc’s repo here. It is a CoffeeScript code though, but you can use any online converter to get JS code out of it — I used JS2.Coffee. OR you could just grab a copy of my file from this GitHub Gist

So to start things off, here’s a little more information on what we are trying to achieve today.

Scenario

Let’s say we used an algorithm to generate a document in the backend and provided it to the frontend where we use a WYSIWYG editor to allow the user to modify the content based on their requirement. Now, a few years later they want to know what they changed (mostly improbable, yes, but you get the point). …


Image for post
Image for post
Passing blobs from one window to another

Have you ever built a chrome extension and uploaded a photo and wanted to transfer the data to your website for further processing?

I did, and damn, it took a while to figure it out! Here’s how to do it. Here I will demonstrate using image upload as an example.

Gotcha 1️

The iframe approach to set / get the blob — Nope! That’s unreliable.

Gotcha 2️

A good friend told me that we could actually use chrome.postMessage() to send the blob as a message to the web app, but then we figured that it is not possible since postMessage stringifies the blob and stringifying a blob will rip apart all the underlying methods and data so we end up getting an empty object no matter what we do. …


Image for post
Image for post

Hi y’all, hope you’re doing good. I am excited to share this article with you all. It is an animation that you see in the gif above. I have achieved the transitions using simple CSS transform properties timed right, though, the challenge was more with how the scrolling affects it. Yes, you heard it right! Every bit of the animation (transitions) you see happening above occur on individual scrolls! No hover, No click but only Scroll!

Kudos to my good friend Punith Bn for this interactive design.
Here’s a link to a live demo of this animation —TheCodeAddict.Com/Explore-Space

As usual, I will be skipping most parts of the templating and styling as requirements change. Albeit, since this is a mostly CSS animation, I will explain the crucial CSS parts as best as I can.
You will find a link to all the files as a Github gist at the end of the post!


Image for post
Image for post
Insert or Update?

Hello people! Lately I have been working a lot with Postgresql and NodeJS. One of the latest requirements I have faced is a CHALLENGE! Bulk upsert of data read from a .xlsx file. I had to read through tons of questions and docs on Google to even parse what I needed to do.

So enough talk and let’s jump straight into some action. Here’s my setup —

  1. NodeJS version 11.11.0
  2. Postgresql version psql (PostgreSQL) 11.2

On a sidenote, I use Multer to upload the excel files and I will not be walking through that process as it is pretty straight forward. Skipping that, I will directly go through the actual excel file read and data dump. In my case, it is a dynamic mapping of headers so I have a customer mapped “headers” object. Here’s a gist of what I’m doing (You can find the complete code gist on a link below, I will explain only the reading of data part here)…


Image for post
Image for post
Angular + Firebase Realtime Database

Hey folks, hope you’re all doing good. Recently, while working on a project, I got a requirement for a chat service, but this time, using firebase realtime database and not Twilio or Intercom. Here’s the exact requirement —

  1. There is a customer end of chat where he has the ability to chat with one agent at a time.
  2. There is an agent view where all the agents will log in to and must have the ability to view all messages from all customers.
  3. The ability to handle and show “new messages” from a customer to an agent.
  4. When an agent starts chatting with a customer, display an overlay on the customer name with the agent’s name indicating that this chat is in progress. …

About

Krishna Prasad

ReactJS, NextJS, NodeJS and every other JS! It’s like a never ending learning journey. 😎

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store