Ever wondered why there is so much emphasis on responsive design? Responsive design doesn’t just mean compatibility between desktop view and mobile view! Today’s computer market has a wiiiide variety of resolutions on laptops and your design varies extensively on each one of them. A good responsive design makes a HUGE difference in user experience here — especially when you are developing a customer-facing product page. It’s like they say — “First impression is the best impression”!

I am Krishna and I am back with this article on how to make your pages totally responsive — from the “Welcome to…”…

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…

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…

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…

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…

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…

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