Posts
-
til: TF plugin cache
Writing a tool at work to move our infrastructure setup to a more declarative approach. To do so, I run terraform inside AWS Lambda (will write about this some time), every time a configuration needs to be applied.
-
The ü/ü Conundrum
I implemented search and filtering for entities on our product at epilot. The users were heavily using the feature, however, a unique issue surfaced: difficulties in filtering file names containing diacritical marks like umlauts (
Äpfel,über,schön, etc.). -
How using Server-Timing API helped bring > 70% perf improvement
When working on the web, we all end up coming across situations where the experience for the user seems a bit janky. This happens either when you are dogfooding, or the users actually highlight facing that slowness, or you see that for yourself in your performance metrics or tools.
-
the “fancy” year
I have come to realise a pattern in my past few years.
-
Breaking up long tasks
Imagine the scenario where you click on an element and expect a response but the element doesn’t seem like it was clicked and doesn’t respond, so you click again. Those two clicks however, when the response completes, lead to undoing the action you wanted. Ever happened with you? Sounds frustrating, doesn’t it?
-
Failed to execute ‘removeChild’ on ‘Node’.
This error is frequently noticed on some projects. Though it seems to be something to do with DOM modification, there seems to be nothing obvious from code where this could be caused.
-
dabbling at epilot with…
Year 2022 marked an amazing start for me with a new stint with epilot GmbH based out of Cologne, Germany. I joined the team to be working on their micro-frontend architecture, with my primary focus going to be on the performance aspects of the applications.
Like the first recent addition we did after I started was to addbrotlicompression to each of our micro-frontend (MFEs) bundles. -
catching up!
hi folks!
This post comes after 4 months and I am grateful to my almost 1K Medium followers who still read my posts.
The past months were quite a ride with all the work that I was busy with. Did you say, “but you weren’t writing!”? I was! Just not here on my personal medium blog. -
interesting JavaScript metrics?
Suggestions welcome,
-
Attend Reliable Web Summit
Hey everyone,
I’ll be speaking at the ReliableWebSummit by #ngconf this August. -
travel ??= stay/work/play at home
know what I mean?
-
life rn
friday night — make an overflowing todo list
-
Double free error?
This is one of the memory safety bugs in Rust, which we will try to understand through a dialogue in this blog post.
-
layman understanding of Null in Rust
-
Reflections — 2020
Pretty sure you know why the blog post has visuals in the first 2–3 paragraphs, and then none! 🤷🏻♀️
-
Custom A2HS for your PWA
I came across a question somewhere regarding adding a custom prompt of “Add to Home Screen” for your progressive web application for the browsers that do not have a built-in support for the same. An example of this is the Safari browser that currently does not prompt the user for adding an app to your home screen as an application.
-
Angular web app on Azure Static web apps
Building your app from a Github repository, with monitored commits and continuous deployment. Sounds fun? We can do this using Azure Static web apps. This was announced at Microsoft Build this year 2020. And, it seems to be making the task of building and hosting our web applications seamless.
-
Counter with Redux-saga
Have been exploring redux-saga lately and thought I will put down here a simple counter example using Redux saga with TypeScript to manage the counter state across the application.
-
Implement an e-commerce application
- Create relevant components and modules
- Perform routing in your app
- Prepare services to interact with data
- Manage the state of the application
-
IWD India Summit 2020
IWD India Summit 2020 is not very far and I am sure all of you are as excited as I am.
I will be talking about framework-agnostic web components in Polymer, Angular etc. on May 31, 2020. -
HackOn Hackathon – World of web components
A hackathon event was organised on April 18, 2020 and we discuss about how the web is getting componentized day by day.
-
Global Azure Virtual 2020 – Angular with Azure
I shared my two cents about using and deploying your Angular applications to Azure with CI/CD in the Global Azure Virtual 2020 UK and Ireland.
-
Microsoft Most Valuable Professional (MVP)
Around May 2018, I started my journey of development and with Angular. With loads of learning and projects in the progress, I started writing blog posts and sharing my understanding with others through the writings, videos, discussions etc.
-
DI deets
The title seems vague? I hope you guessed already what it is going to be about. In this blog post, I will be sharing about dependency injection in general and move to further discuss the
DI detailsin Angular framework. I will try to dive deeper into the topic and demystify some of the less known concepts in the vast DI system that we follow in Angular. -
Bye bye, entryComponents?
With angular 9, there has been a lot of talking going on around entryComponents, and the Angular developers who had not been much aware of entryComponents have now been interested in knowing more about it.
-
Recognized as a Google Developer Expert
-
forkJoin, combineLatest, withLatestFrom
In this blog post about understanding the usage of these three combination operators and handling errors with these, I will cover:
-
Step-by-step guide to creating your first library in Angular
I was working on a library project and I realised having never really documented anywhere about the step by step creation of an angular library, both for my later reference and for you all. So, here I go!
-
Code Lab — Web Components using Angular Elements
Link to Code Lab: https://ng-codelab-webcomponents.netlify.com
-
The Angular Router – Trivandrum TechCon20
2020 started with the first Angular event on 25th of January of the year. This event, Trivandrum TechCon20 was organised as a part of 2020 twenty series in Thiruvananthapuram, Kerala, India.
-
Creating a LitElement
This is a very basic blog post on how to create a simple web component using Polymer LitElement.
-
New Angular Router features in versions 7, 8, and 9
When I published my book on Angular Routing, Angular 8 was not yet released. Some of the topics that I covered in my book are Router events, lazy loading etc. When I was implementing lazy loading as a demo for one of the chapters in the book, I was scratching my head.
-
New Angular Router features in versions 7, 8, and 9
When I published my book on Angular Routing, Angular 8 was not yet released. Some of the topics that I covered in my book are Router events, lazy loading etc. When I was implementing lazy loading as a demo for one of the chapters in the book, I was scratching my head.
-
Creating framework-agnostic web components with Angular
-
Using a bootstrap modal as a dynamic component
Working in an application involving multiple components under different modules, there are scenarios where in you’d not want to fix another template for a simple functionality like a modal component, let’s say!
-
Deploying your Angular app to IBM Cloud
I will be writing about how to deploy an angular application on to the public IBM cloud platform and be able to access the application.
-
ng-Srilanka: Good to knows before attending my talk
Hey everyone!
-
Build a Web page with WEB2PY
Fond of Python? Thinking how to use it for web development?
-
Custom validation for your reactive forms?
-
Lazy Loading in Angular 8
We all know lazy loading is one of the most useful concepts of Angular Routing, and for those of us who have been working with Angular, we know how it brings down the size of large files. This is done by lazily loading the files that are required occasionally.
-
A book on Angular Routing?
When I started my journey of learning Angular, the concept that captured my interest totally was the routing and navigation techniques in the framework. First of all, my basic understanding of web apps was that there are multiple pages and clicking on one element on a page would link to the next page having a different set of information. After all, We have all evolved from the time when we used websites involving a number of HTML pages interlinked.
-
Angular Library with ng-packagr
NOTE: The article is relevant to the earlier versions of Angular and with the version 7 and above, we can create a library in Angular using the command ***ng generate library
.*** For more on this, refer to the documentation here: [**https://next.angular.io/guide/creating-libraries**](https://next.angular.io/guide/creating-libraries) -
CSharp Corner Conference 2019
In the month of April 2019, I got the opportunity to speak at the annual conference of CSharp Corner. CSharp Corner is the worldwide community of software professionals and developers located in the USA.
-
IWD 2019 - GDG Makurdi
In the March of 2019, Pius contacted me to share my knowledge about the basic concepts of Angular with the audience of Makurdi, Nigeria. It was organised as a celebration of International Women’s Day 2019.
-
Understanding Component Communication using @Input()
-
CRUD with Angular
-
Online/Offline? Check in a minute!
Here is a small and easy Angular application to check if you are connected to Internet or not!
-
First Routing application? Check these essential routing configs!
Hello there!
-
ng-India Conference 2019
Organised on February 23, 2019 in Gurgaon, India, ngIndiarightly proved its stature as the largest Angular conference of India. Starting from the love of the audience to the super informative sessions from all the speakers, the one-day conference did great justice to the community with people coming in from so many different cities/countries like Chennai, Ludhiana, Nepal etc.
-
Faking a back-end server in Angular
In this blog post, we will see how to work with data without using a real server. This means without having to use a server where the data resides or without having to working with $http services or requesting APIs, we can use the data and perform CRUD operations with that.
-
Pre-requisites for my talk at #ngIndia
Hello lovely people!
-
Angular & SPAs
I was scrolling through questions on stackoverflow and saw a lot of people questioning if Angular applications are SPAs (Single-page applications) or what are SPAs. Hope this blog post will contain the information required to understand what this actually means.
-
Change CSS of PC on button click in CC?
To start with this blog post, let me put focus on some of the terminologies that I have used in the title of it. So, the agenda is to change the CSS of our Parent Component with the help of a button inside our child component.
-
Instant Search Tab in Angular
In this blog post, we will learn doing Instant search in Angular using the data from Cloud Firestore. So let us first assume what we actually want to have as the results on the browser.
-
FireStore with Angular. But Firebase?
This confusion about the difference between FireStore and Firebase comes to many. In this article, I put focus on why Firestore was launched and how it can be used with Angular.
-
Contemplating 2018
Graduating from the university in this year, 2018 was a revolutionary year for me. This was due to loads of things happening around. Since it was a break time after college and my campus placement at this renowned company, IBM was still months away for joining, I went for a fellowship program based on Community Development by Voluntary Service Overseas (VSO).
International Citizen Service was a 3-month placement into some rural community of the country with people from cross-cultures to work on the Sustainable Development Goals (SDGs) like Gender Equality, No Hunger etc. -
Using setValue and patchValue
In this blog post, we will see that when building Reactive Forms, if we need to update the input elements on the form from our component class, we use setValue and patchValue.
-
Understanding Microsoft Cognitive Services
In this article, I will be talking about Microsoft Cognitive Services and give you an idea of what all can we achieve with the help of Cognitive Services and the different APIs.
-
Installing node.js using NVM
Can we manage and use different versions of Node.js on the same machine? Using NVM, we can!
-
Udemy- Step by Step Guide: Angular for Beginners
I am very excited to share that my course Angular for Beginners by BPB Publications has been published on Udemy.com(https://www.udemy.com/angular-for-beginners-l/).
-
Node’s REPL Mode
When working with node, if we type in node command with an executable script for it, the node starts a REPL session. But, What is a REPL session? REPL is Read-Eval-Print-Loop implementation provided by the REPL module which exists both as a standalone program as well as a includible one in other applications. It is very useful to debug the JavaScript codes.
-
Working with Hasura in Angular 6
In this article, we will work with setting up a login application with the Hasura’s GraphQL engine using Angular 6.
Starting with a small description about GraphQL and Hasura’s GraphQL engine. -
Error: Cannot match any routes
In Angular, when working with routing, we face this error “Cannot match any routes” very commonly. This generally occurs when there is a mismatch in the routes specified, or a component which is not present in our routing configuration, or if there is the use of multiple routes in our angular application which is not properly configured. In this blog post, we will see how the third reason brings out this error and how can it be solved.
-
All about your package.json
Our Angular applications use a lot of packages, modules and other files to work in the way they do. All the packages with their versions that our project depends on is what is contained inside this file called package.json. Anything that needs to be changed in the package can simply be updated inside the package.json file, thus, reflecting the changes inside our project.
-
Common errors faced on compilation in Angular
Recently, I was working on a project where in I was trying to connect Angular to Firebase database to do some back end work with Angular. The compilation after connecting the Firebase to my Angular application threw buckets of errors to me.
That is when I realized an article on the common errors we face while bringing in something new to Angular is very much required. -
Debugging Angular Apps
We have been working with a variety of concepts in Angular, but when it comes to debugging our Angular application, that’s when it becomes one of the hardest parts of the job.
-
Video: Reactive Forms in Angular
In Angular, Forms are of two types:
-
Directives in Angular
Want your DOM (Document Object Model) element to behave in a certain manner, yes you can do that in Angular. We can attach a specified behavior to a DOM element in our angular application. This is done with the help of a decorator @Directive.
-
Wildcard Routes in Angular
In a routing-based angular application, we create different routes to be directed to, and for that we create different components. If you are new to routing, refer to my previous article on how to create basic routes in Angular here.
-
Proud to deliver Angular talk in India’s largest Angular Conference: ng-India
February 23, 2019 is the date. I will be speaking in India’s largest Angular conference, ng-India. I will be talking about @HostBinding() and @HostListener() in Angular.
-
Angular Component Lifecycle Hooks Explained
We have worked with Components and Directives in Angular quite a lot now. And if dear Reader, you are new to Components or directives, refer here. When dealing with components or directives, there is a sequence of steps that are performed to build an angular application. These steps range from the process of its initialization to its destruction.
-
JavaScript Modules vs. NgModules
This article explains in short about the difference between the JavaScript modules and NgModules and that how they are used in Angular.
-
Course: Angular for Beginners
To all the beginners of Angular out there, here is a step-by-step video course for you all. This course will focus on creating web applications using the JavaScript framework Angular and will walk us through a journey of learning how to install Angular to learning how to route from one page to another using components, directives, modules, routing etcetera.
-
Video: ViewChild for Component Communication
To do component communication in ANgular, there are many ways. One of those is using ViewChild.
-
Using Redux in Angular
In this blog post, we will see how to integrate and use Redux with Angular. Before beginning, let us have a basic understanding of what Redux is!
-
Creating your first Angular project
In this blog post, we will see how to create a new project and start working with all the concepts in Angular.
-
Angular Model-Driven (Reactive) Forms
Forms come handy when handling user-input and enabling user to log in, update information, and other data-entry tasks. These are basically used to capture user input events. In Angular, there are two approaches to handling user inputs.
-
Video: Content Projection in Angular
In this video, we will learn about yet another way of binding the data in Angular, i.e., Content Projection.
There is a kind of visual wrapper around our content which has to be projected. -
Setting up Development Environment to work with Angular
To begin working in Angular, a typescript-based framework, we need to set up the development environment in our systems.
-
Route Guards in Angular
We have worked with routing and navigating from one route to another in our previous articles. If you are new to Routing, refer to: Routing in Angular
-
Creating Basic Routes in Angular
Displaying content on different pages, splitting up the content on different pages, creating special authorized access-only pages is what Routing is used for.
-
Video – Adding Module using Angular CLI
This videos teaches how to add a module to an Angular Application using Angular CLI. We can also do that manually but to do it using CLI, we use the command:
-
Angular Pipes
Transforming and showing the modified data to the user is what pipes are used for, in Angular. Pipes help to apply fine tune to the data and display value transformation to the user. Pipes can also be thought of, as styles which we apply in the HTML template. A pipe takes in some data as input and returns an output based on the output of transform function evaluation.
-
Providers in Angular
We have learnt the concept of Services and Dependency injection in our previous article. Read here: Understanding Services and Dependency injection
-
Using @ViewChild in Angular
A ViewChild is a component, directive, or element as a part of a template. If we want to access a child component, directive, DOM element inside the parent component, we use the decorator @ViewChild() in Angular.
-
Routing in Angular: Beginners
Traditionally, when we wanted to access a file, we used to ask the server to get that file and then it used to get displayed. Every time a file was retrieved, the page needed to get loaded.
-
ng-Nepal
-
ng-Nepal Conference
Organised on July 21, 2018, ng-Nepal conference (Angular Conference of Nepal) invited me to speak on “Custom Directives in Angular” at Yellow Pagoda Hotel, Kathmandu, Nepal.
-
Reusing components with Content Projection in Angular
Want to change the content inside your component and re-use them? Well, That is what we use Content Projection for, in Angular.
-
Beginning with Unit Testing in Angular
Before going on to test our angular code, we need to understand what is a unit test.
-
Video – Binding arrays to Tables in Angular
In this video, you will learn about binding arrays to tables in Angular.
-
Binding Array to a Table
In this article, we will learn how to bind an array to a HTML table. This means that we want the elements in our array and their attributes to be displayed on the view.
-
What is a Shared Module?
In Angular, we can create different feature modules for every feature. Each one of these features would require importing the CommonModule and other imports too. Do we really want to repeat all this for every feature module? Or do we have an alternative?
-
Using Template Reference variable in Angular
In this article, we will discuss the use of a template reference variable for component communication.
-
Using @Output and EventEmitter
So, I have an event in one component and I want it to get handled in another component. Does Angular allow me to do that?
-
Understanding Services and Dependency Injection
We’ve all worked with Components and used component communication, but what do we do if we want to share data or logic across components?
-
Understanding Component Communication using @Input()
Want your components to share information? Yes, they can!
Say you have two components, a parent component (PC) and a child component (CC) and you want the data to move from the parent component to the child component or vice versa, you use COMPONENT COMMUNICATION/INTERACTION. -
REACTIVE FORMS FOR BEGINNERS
In Angular, there are two types of forms:
— Template Driven Forms
— Reactive Forms -
Modules in Angular
What is an Angular Module?
A class with an @NgModule decorator which organizes the pieces of an application and extend our application with capabilities from the external libraries. -
Data Binding in Angular
To understand data binding in angular, we need to know the meaning of binding the data. To put it simply, when the data changes its value, all the elements bound to it reflect changes automatically.
-
Custom Directives in Angular
For those who do a lot of angular, you might have used ng-bind, ng-init somewhere in your project. These are the built-in directives that are provided to us by the angular team. We’ll see how to create our very own directive in angular.
So to create one, we need to understand different types of custom directives. -
Creating Custom Pipes in Angular
Previously known as Filters in AngularJS, Custom Pipes can be of two types. Pure and impure custom pipe. Pipe takes an input and returns an output based on the output of transform function evaluation.
-
Add Bootstrap to your Angular CLI Project
This article will help us understand the usage of bootstrap framework within Angular. To understand a little about bootstrap, Bootstrap is the most popular HTML, CSS, and JavaScript framework for web front-end development. It’s great for developing responsive, mobile-first web sites.
-
Video – Services in Angular
Learn Services and Dependency Injection in Angular. Injecting services is an important concept to be used in almost all the Angular projects.
-
Video – Data Binding in Angular
Learn different ways of Data Binding in Angular.
-
Video – Custom Attribute Directive in Angular
In this video, learn about Directives in Angular. Directives are used to attach a specified behavior to our DOM element.
-
Video – Template Reference Variable in Angular
This video talks about how to use a template reference variable in Angular to make communication among components much easier. There are no pre-requisites as such, but having VS Code, Angular CLI installed.
-
Video – Using @Output in Angular
In this video, you will learn using @Output decorator in Angular. This decorator is used for component communication
-
Video – Using @Input in Angular
This video describes how to use @Input decorator for component communication in Angular. Some pre-requisites are:
subscribe via RSS