Articles List on Aditya Naik | Personal Website

Redis | Cache user data with Redis in golang app

Sun, 16 Jul 2023 08:56:12 +0000

Imagine this. Your fantastic app, written in Golang, is chugging along. You are getting more users and increased activity all the time. Over time, you start hearing complaints about slow performance. This takes you by surprise, and you start exploring potential causes for the slowdown.

The absolute obvious problem you want to fix first is the user behavior tracking system. You want to know most frequently used paths to select code areas for refactoring, simplification, optimization and potential automation.

PGBadger | Postgresql log analysis made easy

Sun, 02 Jul 2023 06:33:21 +0000

The need for postgresql log analysis?

While writing sql for any flow, primary focus is on the correctness of the query and not on the performance of the query. Performance issues creep in when updating/iterating a flow iteratively over multiple development cycles.Query performance is important to analyze during scaling. This is where query log analysis comes in.

In one of our cases, a complicated workflow was significantly slow when we load tested it. We were trying to figure out the bottleneck both in code structure and with query performance. Our go-to tool for query performance analysis became pgBadger.

Links, images, captions, quotes and iframes in a hugo blog

Sat, 23 Apr 2022 00:00:00 +0000

This blog is built with hugo

I like hugo, its easy to work with and blazing fast!

This post is just to document a few changes I recently did with my website and some notes for myself. Kind of a meta post really.

Improve iframe loading for faster page load

For a static site, almost instant page load is expected, and should be verified by lighthouse as such. I attached an iframe to share code/result for one of the blog posts and that was slowing down the page load significantly. It pulls in stuff from the third party and it loads the amount of code it needs to load.

Material UI | How to easily setup popup notifications

Sun, 12 Dec 2021 00:00:00 +0000

Using Material UI and React Context to set up global notification system.

Need for global notification system

In your application, you want have good user experience and let the user know if the actions/clicks have resulted in success or failure. We should also show warning and information messages to guide user through the flows.

It is of course possible to display a local popup component wherever needed, but it quickly becomes a bloat and irritating to manage. It would be really cool to just set up the whole system once and trigger it from wherever from the app to get consistent experience.

Run cypress tests in parallel on CircleCI

Fri, 26 Nov 2021 00:00:00 +0000

Background

I use and enjoy Cypress for testing, and use CircleCI for CI/CD purposes.

In the spirit of learning by tinkering, I wanted to tweak our CircleCI workflows to see if we could cut down on our CI run times and potentially save on some credits.

I wanted to dynamically split up tests and use parallel machines each running only some of the tests to speed up the testing step.

Cypress | How to handle auth JWT using env and commands

Sat, 24 Apr 2021 00:00:00 +0000

1. Setting the scene
2. Need for writing explicit network requests in cypress?
3. Why not mock API responses OR seed the data OR both?
4. What are cypress commands?
5. How does the login command look?
6. How to access redux store?
7. Exploring Cypress env
8. How to set and access cypress env
9. TLDR: Some Example code

1. Setting the scene

A typical case of application structure is when we have a client paired with API. In such a scenario, its very useful to set up end-to-end tests using Cypress , which will help you mimic actual user behavior across the application and builds a lot of confidence in your implementation.

How to easily test react stripe elements using cypress

Wed, 27 May 2020 00:00:00 +0000

How to use react-stripe-elements

I have already written about how to set up and use react-stripe-elements .

However, there is another easier way to test stripe implementation than mentioned in the article.

How to test react-stripe-elements

Just use following function to your cypress test

function fillInStripeForm() {
  const input = [
    ["cardnumber", "4242424242424242"],
    ["exp-date", "1220"],
    ["cvc", "123"],
  ];
  cy.wait(1000);
  cy.get(".__PrivateStripeElement > iframe").each(($element, index, list) => {
    cy.get($element).then(($iframe) => {
      const body = $iframe.contents().find("body");
      cy.wrap(body)
        .find(`input[name=${input[index][0]}]`)
        .type(input[index][1], { delay: 10 });
    });
  });
}

and call it when tripe form needs to be filled.

Material UI | How to easily set up dark theme toggle in React

Wed, 20 May 2020 00:00:00 +0000

Scaffold React Application

A new react app is easily scaffolded using

npx create-react-app my-app

Install dependencies

I need to install material ui core package.

// with npm
$ npm install @material-ui/core

// with yarn
$ yarn add @material-ui/core

Wrap application in Theme Provider

For the purpose of this demo, I will use App.js to set up everything.

Add Light and Dark themes

export const light = {
  palette: {
    type: "light",
  },
};
export const dark = {
  palette: {
    type: "dark",
  },
};

Import ThemeProvider and createMuiTheme

import { ThemeProvider } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core/styles";

Set up the toggle logic

const [theme, setTheme] = useState(true);
const icon = !theme ?  : ; // Icons imported from `@material-ui/icons`
const appliedTheme = createMuiTheme(theme ? light : dark);

Wrap the render inside ThemeProvider and pass the appliedTheme

return //rest of the code;

Trigger toggle using onClick

onClick={() => setTheme(!theme)}

Now our theme toggle logic is in place.

How to test your react websocket implementation with cypress

Tue, 12 May 2020 00:00:00 +0000

Set up demo application

I scaffold a standard react application

$ npx create-react-app ws-demo

Clean up and update app.js to set up a websocket client.

app.js

import React, { useState } from "react";

const App = () => {
  const [message, setMessage] = useState("websocket is closed");

  return (
    
      {message}
      
    
  );
};

export default App;

// WebsocketHandler does what the name suggests - launch/close websocket client and receive messages

const websocketUrl = "ws://127.0.0.1:5000";
const WebsocketHandler = ({ setMessage }) => {
  const ws = new WebSocket(websocketUrl);
  ws.onopen = () => {
    console.log("conn open");
    ws.send("connection is open");
  };
  ws.onmessage = (message) => {
    setMessage(message.data);
    console.log("onmessage triggered", message);
    ws.send("message received");
  };
  ws.onclose = () => {
    console.log("connection closed");
  };
  return null;
};

As highlighted, I have a WebsocketHandler component which handles websocket and sets state in app.js when it receives the message.

How to access Redux state in Cypress

Fri, 08 May 2020 00:00:00 +0000

Set up our application

I borrowed the code from react-redux.js.org which showcases react + redux in action using a todo list application.

Set up and scaffold Cypress

Cypress is a fantastic testing framework. It is easy to set up and can be picked up pretty quickly.

Setting up Cypress is pretty straight forward - just run:

$ npm install cypress
or
$ yarn add cypress

We will also install the recommeded dependency