Skip to main content

Use nvm use while switching codebases

· One min read
D Balaji
Lead Design Technologist

Disclaimer: Works only on mac OS & Linux

When you work with modern and legacy codebases, we have to switch the node versions that fits the project.

Most developers are familiar with nvm aka Node version manager.

While we switch to a codebase which uses a different codebase, use nvm use command. But its not a magical command to analyze the node version requirements.

Make sure to add .nvmrc to the project root with the minimal node version.

v18

The terminal output would be

> nvm use
Now using node v18.15.0 (npm v9.5.0)

Interestingly the global node version across the machine is not impacted. The changes are restricted to the terminal.

Checklist

  • Install NVM
  • Add .nvmrc with minimum required version number
  • Run nvm use command
  • Notice the change in the version in the terminal

Chatgpt vs Alexa at work, 5 use cases compared

· One min read
D Balaji
Lead Design Technologist

1. Input

Chatgpt - text based dialogue like queries

Alexa - voice based interface

2. Output

Chatgpt - text based on the input query

Alexa - voice, can perform action and do small tasks

3. Usability at work environment

Chatgpt - can be used a quick research tool, good at organizing and listing facts.

Alexa - can be used as a timer, Its more of a personal device.

4. UI

Chatgpt - Its well thought of and you can organize your work within chatgpt. Goto previous queries etc.

Alexa - Its a exceptional tool to manage all things personal/office like music, devices, simple queries, etc.

5. Common drawbacks

Chatgpt - Good at facts but content lacks personal touch or anecdotes or stories

Alexa - As good as the alexa skills but most specific questions are taken to web search

Summary

AI tools have entered into our life like a bicycle for a kid. We have to learn to use the bicycle else there wont be much fun. Identifying professional use cases for AI without compromising data security and privacy is a challenge like the kid ensuring not to fall from cycle before his friends while learning to drive it.

Staying updated with feedly free version

· 2 min read
D Balaji
Lead Design Technologist

Feedly app

We have reached a time in history where one newspaper does not fit all. One music app does not fit all, one form of text communication does not fit all. The same holds good with our efforts to keep ourself updated.

Why feedly

Feedly has been in the market since a long time. Feedly excels at keeping up with sources emitting their updates over RSS feed. Lets say you visit 5 different web sites or news sites every day. Instead of consuming content on their website, we can achieve from one interface inside feedly.

Feedly free version leaves you behind when it comes with keeping up with other information streams like twitter but I feel its a good trade off.

With a setup like feedly, you are isolated from ads and promoted content that deter your focus

Categories inside feedly

Before I proceed further, I would like to confess that I had setup feedly before many years and it failed. One of the main reason was that I overloaded the feed with multiple channels. This time I want to keep it simple.

7 categories of feeds for each day of the week starting with financial news on Sunday

Here are my categories

  1. Financial news

  2. Tech Blogs

  3. Professionals

  4. Engineering

  5. Hackernews

  6. Lifestyle

  7. Newsletters

Filtering quality content

If you want quality content, then we need to find quality sources of content. I followed the trusted, reputed and relevant sources only.

Avoid repetition of content which reduces the number of news items to view.

PS:

On a side note, I am taking refugee from all things social media till Aug 15 this year. I have installed a chrome extension to block all websites that distract us.

Verdict

Old school method of consuming content with RSS feeds might look so old school but thats one way to avoid click baits, trackers, etc. Lets get focussed and acheieve the goal to keep yourself updated at things you care about.

Cognitive biases course notes

· 3 min read
D Balaji
Lead Design Technologist

We all have biases. Biases help us make quick decisions and helped us as an important survival mechanisms. Understanding our biases and using them to our advantage is the motive behind taking up the video course on cognitive biases.

Confirmation bias

Lets say you met with an accident due to negligent driving at some point in life and you survived. For the rest of your life, you will be quick to spot negligent drivers and even predict when they would fall from the bike. Two things happened to you in this situation

  1. Something happened to you which affected you emotionally
  2. Based on the past event, your mind is taking decisions

Thats the high level overview of confirmation bias. Lets look the advantages and disadvantages of confirmation bias.

** Advantages **

You can quickly infer that based on situation that the same set of actions give same results. You are sure of it and even go about spreading the word about your observation.

In professions like law, you can quickly get into the shoes of your client and offer legal services with confidence.

** Disadvantages **

You do not validate your data again. For instance, technogical advances would have offered better bikes which can be driven at higher speeds but you would be still believing that high speeds will only result in accidents.

Falsification is an important step to break confirmation bias. Instead of using the language that confirms the biased person, ask them why they are unsatisfied with the situation. While falsifying their data, they get better and come over their bias.

** Traits **

The person with confirmation bias exhibits the below behaviours

  • Operate like an echo chamber. Shows preference over the data points or stimuli
  • Does not take the risk of falsyfying his data or habits
  • Exhibits drawer effect where he shows only the hits and hides the misses
  • Practice selective recall of events/data
  • Most of the decisions are memory based
  • Design their methodology to make their thoughts to suceed. It could be a algorithm thats designed to maneur their thoughts and operate in that direction only.
  • Occassionally make illusionary associations.

** Work around **

For people with conformation bias, they need to pair up with skeptics as they need good evidence.

Pareidolia

Pareidolia is about how we associate random shapes to something that we already familiar with. For example, we can identify familiar faces even in a packed crowd of people.

Humans have large brains, there is a center which is dedicated to recognizing faces and patterns.

** Advantages **

By observing patterns we can quickly arrive at a conclusion. Pareidolia makes dealing with large set of unpredictable stimuli easier. If something has sharp teeth and agressive, its a dangerous predator. If something has eyes to the side, its a prey.

Allows us to take snap decisions based on familiarity with the shape or pattern

** Disadvantages **

Relying on familiarity with patterns over organized knowledge or schemas is a risky behaviour.

When we lack social connect with humans which is our first choice, we tend to look for social connect with pets and anything that can be recognized as a face. For instance, a car with 2 lights and a grill looks like a human face and people tend to give it a human name or pet name.

** Work around **

Just like confirmation bias is about data, pareidolia is about patterns and affinity towards shapes. We need to be aware of it.

How to fix, external dvd drive not working on windows 10

· 2 min read
D Balaji
Lead Design Technologist

Though you may argue that the end of the DVD era has already begun, I had run into scenarios where CD/DVD is still a suitable storage device given the read-only nature of the device. The data once written cannot be tampered with or overwritten, though one can scratch a lot and make it worthless.

With this task in hand, I dusted my old LG DVD drive which is ideally built to be assembled inside CPUs but we geeks push their limits. So I replaced the SMPS power supply with an adapter and the SATA cable with a USB portable SATA connector.

Given the two mods, the LG dvd writer can work with any laptop or desktop without an issue. However, on windows 10, the CD/DVD drive icon would not show up on my computer. But what could have gone wrong?

Steps to troubleshoot

We geeks don't believe in talent but we believe in the process. The process to troubleshoot the strange behavior is as follows

  1. Observe if the LG/DVD writer powers on. If yes, press the button to eject the tray. This step worked

  2. The second step was to look at my computer to see if any new icon has shown up, but nothing showed up. So fire up the device manager and look for dvd devices

  3. Right-click on the USB DVD drive and uninstall the driver. Then reinstall the driver. Even after this step, the icon would not show up.

  4. Right-click and goto properties and goto volumes. Click on the populate button. A new name should have been created for this device and the corresponding icon would show up on my computer.

  5. Once the icon is available, double-clicking should eject the tray. It works as expected.

Conclusion

Thanks to the LG website for clarifying that no special drivers are required for the DVD RW device since they are plug-and-play only. That means they would work on any Operating system ideally. Later I found windows 10 just put in an extra step that prevented me from using the drive or rather thinking it was dead.

Pinch of common sense, curiousity and passion can open the doors for you in tech.

Why & how to mock date methods in JEST unit tests

· 2 min read
D Balaji
Lead Design Technologist

What are the Date methods?

I have worked with a bunch of web apps and all of them have date-related code in common. The Date utils are written in plain Javascript using the Date constructor.

var date = new Date()

// Sample date methods
date.getMonth()
date.getFullYear()
date.getDate()

I have also worked on issues where the test suite would pass correctly on the day the tests were authored but they would fail on the other day or in the server. This is because the dates are getting dynamically generated in the test but the matcher value is static.

Why is testing Dates tricky?

You cannot assert a dynamically generated date. For instance, if your date until returns a new date by applying some logic. You cannot put a test that looks like this.

// WRONG code, don't use without mocking date.getDate

expect(add2DaysToCurrentDate()).toBe("Some hard coded date")

If you want to use a hardcoded date, you should be able to control the output of the add2DaysToCurrentDate method.

How to make dynamic date logic predictable?

The short answer is JEST mocks. Whenever we want to add 2 days to the current date, we need to ensure the date.getDate() method returns the same value, then we can write a test to assert the returned value.

it("should return new Date which is two days ahead of today", function() {
jest.spyOn(Date, "getDate").mockImplementation(() => 14) // Mocks the getDate method until this test block
expect(add2DaysToCurrentDate()).toBe("Some hard coded date")
})

Downsides to this approach

As I mentioned in the comment, till the end of the test block, we cannot use date.getDate() as if it's a real function. The mock will replace the actual function call in the test block. This might hinder your assertion logic. We need to plan accordingly.

References

https://stackoverflow.com/questions/29719631/how-do-i-set-a-mock-date-in-jest

Turborepo npm workspaces vite react module resolution error resolved

· 3 min read
D Balaji
Lead Design Technologist

From the title it sounds like a lot of cool technologies working side by side isn't it. Let me list them once again

  • Turborepo - managing monorepo
  • NPM - package manager
  • NPM workspaces - also provided by npm, assists in monorepo
  • vite - frontend tooling, rollup wrapper
  • vite react - template for vite

Use case scenario

I have a cool monorepo on github which holds all my sample projects, experimental works and code sample which I play around with.

The monorepo is build with npm workspaces & turborepo. I must admit that I hardly use any turbo repo features yet. Its mostly npm workspaces and npm commands at scale.

I encountered vite for frontend tooling and wanted to give it a try. Without a second thought, I created a directory called tooling and started working with vite.

Glitches and resolutions

  1. The first glitch was the node version requirement of vite. I opened a new terminal and used nvm to set the node version to latest. Thats expected bug while working with latest nodeJS tools.

  2. The vite module was installed locally within the workspace. However the same vite module was referenced in vite.config.js. npm would try to resolve vite by checking in the global node_modules but it would not be there.

To understand why npm installed vite locally instead of global node_modules was easy. vite was used in npm scripts and if vite were to be installed globally then the npm scripts would fail mercilessly.

"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},

But the same module being used in JS modules was not expected by npm, so we need to instruct npm to install vite in both local and global node_modules.

Resolution

At this step I found 2 ways to solve the problem.

  1. The first way is something hinted by turborepo scaffold itself. I had to add vite as dev dependency at the root of the monorepo. This would ensure that vite is installed into the global node_modules.

  2. The second way is to use an alias for vite within the workspace. You can do this with the below command

npm i my-vite@npm:vite -P

This command would ensure that the package vite is alias as my-vite. While checking the global node_modules folder, I noticed a folder with the name my-vite.

The flipside is that, I need to reference the vite package as my-vite within the code.

import { defineConfig } from "my-vite";

Installing Ubuntu Desktop explained in 10 steps

· 2 min read
D Balaji
Lead Design Technologist

Ubuntu desktop download

Installing Ubuntu Desktop is a job with no frills but you do not install Ubuntu quite often so it's natural to forget a few things so here are the 10 steps which I followed while installing Ubuntu desktop in 2022.

  1. Download Ubuntu Desktop and Burn it to a USB through a tool called Ryfus

  2. Google for the key combination which would invoke laptop boot from USB. This would save time.

  3. Choose between options available for installing Ubuntu. This step is irreversible so be cautious. I choose to have dual boot with windows OS. Skip wifi setup while installing OS. I find this step to slow down the installation of OS.

  4. Choose a username and password. Make sure you do not forget it. Sometimes in a dual boot setup, you may not use the OS for months.

  5. Once the installation is complete, set up wifi. Once connected, run sudo apt update.

  6. Install VS Code, node, and a postman from the Snap store

  7. Install git from apt package manager

  8. Set up SSH for GitHub and set config email, user name, etc.

  9. Install extra packages to handle .rar and other file formats

  10. Install Synaptic package manager and remove unwanted bloatware games.