Clean Architecture in Frontend Recently, the term “Clean Architecture” was discussed in my company. It sounded interesting, so I started thinking about whether we could use it in frontend projects too. To understand it better, I read “Clean Architecture” by Robert C. Martin. After learning the basics, I tried applying Clean Architecture to a frontend project. In this blog, I will share my experience and how I built a To-Do CRUD app, which you can check out here .

Today I implemented a feature of YouTube in my app . This feature will play video on hover of the thumbnail of a video. Code Changes This commit is having the changes I did for implementing this feature. Implementation Explaination I have used template like below for showing thumbnail card for videos <div class="card"> <img class="thumbnail" src={this.thumbnail}></img> <div class="video-preview"> {this.stream && this.showVideoPreview && ( <video-player sources={this.

At my work, I learned Kubernetes and used that to migrate an old API project. It required lots of learning and research. In this post, I will share my learnings, so it can help others getting started with Kubernetes. Kubernetes Cluster To use Kubernetes, we need a Kubernetes Cluster. I used AWS EKS for that. EKS can be used with AWS Fargate and EC2 instances. I went with Fargate. To create most things in AWS, AWS CDK can be used.

A different view of Functions People experienced in JS have a different view of functions compared to people new to JS coming from background of C, C++, Java. Consider below JS function let sum = function (a, b) { return a + b } The idea of storing a function in variable might seem weird to new JS developers, but this is a powerful feature of JS. This can be used in interesting ways.

I like writing RxJS code. It makes it easy to combine async logic with sync and it treats both of these things in same way. Recently, at my work, I used zip operator for the first time. I used this in a NestJS project. This operator is not commonly used. In this post I will share for which problem I used it and how it was used. The Problem I have an array of input objects.

Recently, in one of my websites I implemented below type of animation on scroll. Try scrolling below list of cards. Notice that the cards are animating only when they are in view. In this post I am going to explain its implementation. It’s using one of the Browser APIs, called Intersection Observer API. What is Intersection Observer API? The Intersection Observer API is an API using which we can run a callback if an element intersects any other element.

I am using TypeScript for everything I code, Frontend, Backend, AWS Infrastructure as Code (IAAC), and writing scripts. In this post, I will cover less common scenarios of writing scripts and IAAC in TypeScript. Why use TypeScript for writing Scripts? This is for people who are familiar with TS and don’t know bash, to write scripts. If you are using TS for your daily work, it would be easier to use the same language for scripts for automation as there is no context switching to another language.

RxJS is mainly popular with Angular Developers. In this post, I am going to share how I used RxJS with Stencil.js to build reactive components. Ideas in this post should be applicable to other Frontend techs too. This post assumes familiarity with RxJS, check my RxJS basics post for that Show me the code Reactive components A frontend component will usually have some state, let’s represent that state by state$ (pronounced as state stream).

Learning RxJS was difficult for me, but it was worth it as it simplifies implementing many complex async features in a Frontend app. Now I think of it, its not that difficult. In this post I will try to simplify learning RxJS. I am using RxJS with Stencil.js, so I will cover what is essential in using it in a Frontend app. Let’s begin. Reactive Programming RxJS is a library using which we can do Reactive programming.

TL;DR If you are using Glimmer.js v1 in production like me, you can find this npm package which I published, useful. Its original repo is archived, so I forked and started maintaining separate npm package. For now, I only did one change to use the latest TypeScript features with Glimmer.js v1 What is Glimmer.js Glimmer.js is a lightweight frontend tool like Preact to build components. Why we are using it? We had a requirement to convert an Ember.