Sridhar Tech Stories

NPM Tricks I Wish I Knew Sooner

Sridhar Katta — Sat, 12 Jul 2025 08:36:20 GMT

Recently I have been working on migrating an old React application based on react-scripts to support Node.js 18. To make it work, I came across multiple npm tricks that helped solve these issues, so I am going to explain and document them in this blog.

Dependencies Checks

npx depcheck

Analyzes the dependencies in a project to see how each dependency is used, which dependencies are unused, and which dependencies are missing from package.json.

Why Events

npm why package_name

This command helps you understand why a package is installed in your project and where it comes from.

Check Subdependencies

npm ls buffer

Prints all the versions of packages that are installed, as well as their dependencies.

Find Duplicates

npm find-dupes

Runs npm dedupe and outputs all the duplication changes without changing the package tree.

Reduce Duplication

npm dedupe

Searches the local packages tree and attempts to simplify the overall structure by moving dependencies further up the tree, where they can be more effectively shared by multiple dependent packages.

Clean Install

npm ci

If you have already set up projects where you have node_modules and package-lock.json, using this command will remove them and perform a clean install.

Resources:

My GitHub Setup, Tricks & Daily Commands

Sridhar Katta — Sun, 06 Jul 2025 06:59:00 GMT

Over the years I have picked up a lot of GitHub tricks, ways that I work around GitHub. I mostly use some set of commands and want to make a list of it & have it for reference.

Setting Up SSH:

I think anyone who is working with Git & GitHub should set up SSH on their machine, because it gives us more flexibility than anything. There are other ways to do it like personal access tokens, but those are hard to set up, and keys often get expired after some time. You need to store that token somewhere & always have to copy & paste whenever you need to. So why do that stuff? It’s better to set up SSH whenever you start working with GitHub.

Go to your terminal from Linux or Mac, run the below command & press enter. It will create two files: one is id_rsa & the other is id_rsa.pub.
Now go to your profile settings on github.com & add your SSH key contents from id_rsa.pub with a description.

ssh-keygen -t rsa -b 4096 -C "your_github_email@example.com"

Now to authenticate whether you have added it correctly or not, from your terminal run this command & type yes to authenticate. Now you can start using GitHub with SSH.

ssh -T git@github.com

Setting up multiple GitHub Accounts

Over time I had to set up multiple GitHub accounts, so I have followed this approach to create it. Go to your terminal in your .ssh folder and check for a config file. If it is not there, create it.

Open your config file in your favourite editor of choice (I like NVIM for these kinds of things).
Add the following content into your config file. You can change your host name as you like.

# Sridhar 2nd GitHub account
Host github.com-sridhar-2nd
     HostName github.com
     User git
     IdentityFile ~/.ssh/your_ssh_file_name

Once you add the above configuration, whenever you want to clone or want to use your second GitHub account, you need to change your clone URL or git remote URLs.

# this will be authenticated using my first SSH key
git clone git@github.com:sridhar02/pointing-poker.git

# using second SSH key
git clone git@github.com-sridhar-2nd:sridhar02/pointing-poker.git

# Remove remote origin — this command will remove your current repo origin
git remote remove origin

# Set remote origin — if the repo is already there, you can change it to use the 2nd account
git remote add origin git@github.com-sridhar-2nd:sridhar02/pointing-poker.git

Setting up dual GitHub accounts is as simple as this. It is not a big thing at all.

Branch Creation

When you work with Git, you create your own branches from your main or master branch. Use the below command to create from your current branch:

git checkout -b branch_name

Change Branches:

Sometimes you may need to hop from one branch to another. You can use the below command:

git checkout branch_name

Note: If you are changing from main to your feature branch, easiest way to change is using the switch command. This will take you to your previous branch from your current branch. I got to know this from a friend when working with him & from that time this has been one of my most used commands.

# Switch branches from current to previous
git switch -

Fundamental Commit & Stage Commands:

Once you clone a repo from GitHub & add changes, you can see your changes using the status command, which shows a list of files changed & untracked file changes like adding new files.

git status

Once you have your changes ready, stage them using the below commands:

# Stages all your current files
git add .

# If you only want to stage separate files, add them one by one
git add file_name

Once files are staged, add your commit message:

git commit -m "add your commit message"

Push & Pull

Once you have staged & committed your changes locally, now you need to push your changes to your origin. Use the below command:

git push origin branch_name

# Sometimes you will be asked to set upstream origin so then you can use:
git push --set-upstream origin branch_name

# Once upstream is set up you can just do:
git push

Sometimes you need to pull the latest changes from your branch from origin to local, then use this command:

# Branch name can be anything — your current branch or main or master
git pull origin branch_name

Note: One thing I personally follow is not to pull main or other branches into your current branch as it disturbs the current commits that you have worked on & adds extra commits instead of just yours. Best way to update your current branch is to rebase or merge. I prefer rebase as it gives a clean history (covering rebase next). Only use pull when someone has updated your branch directly on origin & you don’t have those changes locally.

Rebase & Merge

Rebase: When you work with multiple people, often code gets pushed to main or master continuously & you might be working on your separate branch. When you often need to update your current branch in line with main or master, use rebase. The below command rebases your branch on top of the main branch. Most of the time it works easily, but when the same file is changed by multiple people, you may need to resolve merge conflicts & stage them to continue the rebase until it finishes.

git rebase origin/main

Note: If your branch has 10 to 15 commits then one problem you may run into when rebasing is resolving merge conflicts after every commit, which can be tricky & time-consuming. In those cases, you can opt for git merge which basically merges the current main into your branch (adds an extra commit). One more thing to add — whenever you rebase a branch, you need to force push that branch when pushing to origin. Use --force-with-lease only — don’t use just --force as it is the safer option.

# Force push with lease (safer)
git push origin branch_name --force-with-lease

# Force push (not safer)
git push origin branch_name --force

Merge: This is also another way to update your current branch with main or master. This merges your main changes into your current branch. (You can explore some advanced things as well in merge when you add new commit messages & other options — explore that on your own.)

# merge main into current branch
git merge origin/main

Stashes

I think this is my most used command in Git, as I often work on something I can’t push or want to just keep locally. Stash command is the most useful.

# Git stash your current changes
git stash 

# Git stash with custom message & untracked files
git stash save -u "stash message"

# Git stash list
git stash list

Once you stash some changes, then comes the part to apply or pop those changes into your current branch. Apply means applying stashed changes while keeping them in the stash list. Pop means applying and removing the stash from the list.

# Apply stash, 0 or whatever index you want from stash list
git stash apply stash@{0}

# Pop stash
git stash pop

Note: One better option is to use stash apply instead of pop if you think you'll need those changes again. I mainly use pop for instant updates to the current branch or when rebasing for a quick turnaround.

Cherry Pick

This is the best way to move commits from one branch to another. I often work with release & main branches where I merge commits to main, then cherry-pick and merge them to release branches. Switch to the branch where you want to add the commit, copy the commit ID you want to cherry-pick & run the below command:

git cherry-pick commit_hash_id

Reflog

To view your recent Git commit history (including branch changes, resets, rebases, etc.), you can use the following command in the terminal. Personally, I’m not a fan of logs from terminal — I just use Git Graph extension from VSCode.

# Extra --oneline parameter gives a nice list in one-liners
git reflog --oneline

Conclusion

Git is one of those tools that sticks with you through every project. Learn it once, understand it well, and it’ll make your daily workflow smoother, faster, and less frustrating.

Resources

These are some extensions I use with VSCode & guides I refer to when I need to know something:

Supercharge Your Terminal Workflow with Atuin

Sridhar Katta — Sun, 27 Oct 2024 17:49:44 GMT

The terminal is essential software for any developer or engineer. It is one of their daily drivers, so a terminal with better tools will not only save you time but also increase productivity. These are some key features that make Atuin stand out in your terminal workflow:

Terminal History
Terminal commands search
Terminal history sync

Setting up Atuin:

Open your preferred terminal and run the following command on your Unix system

curl --proto '=https' --tlsv1.2 -LsSf https://setup.atuin.sh | sh

If you prefer to install manually, follow the documentation here
Once the installation is done you can import your current bash or zsh or fish shell history into atuin using this command

atuin import auto

That's all you need to set up Atuin and make your terminal more powerful.

Using Atuin

Here's a basic usage guide. For a more detailed guide, check out the Atuin documentation here.

In your terminal, pressing the up arrow, Ctrl-R, or Command-R opens a search TUI where you can type text to find related commands.
Pressing Enter or Return on any command in the Atuin search UI will execute it immediately. To enter the highlighted command without executing, press Tab to modify it.
You can check which commands you use most frequently with the atuin stats command, which shows your stats for the full history. To check stats for a specific day, follow the steps here.

atuin stats

To view stats for a single day, refer to the documentation here

If you use multiple systems and want to sync your Atuin history, follow the steps here. To set up self-hosting, refer to this guide.

Interesting links about Atuin:

Thank you for reading. Feel free to subscribe to my blog and connect on LinkedIn or Twitter.

Big Companies vs. Small Startups: What's the Difference?

Sridhar Katta — Wed, 31 Jan 2024 18:23:00 GMT

I have worked mostly in small & early-stage startups but got an opportunity to work at a large organization like Amazon. Listing down the different processes that are followed in both the organizations describing the development process & release process in them.

Startup work life:

In the startups where I worked, we had lean teams (mostly 4-5 developers) who actively worked on development and a few designers with whom we collaborated. The development process mostly involved setting up the codebase locally and asking questions about it to get clarity on certain patterns in the initial days. Mostly, I worked in 2-week sprints where we were assigned development tasks around the product, like enhancing a page UI or creating a functionality according to the designs. Once you are done with the implementation, you would raise a PR (Pull Request), which would be reviewed by senior team members. Then, you would address any comments by them and merge the PR. The feature might go live initially in a staging environment, which would be tested by other developers or designers to validate that the feature is working correctly. If everything is okay, we will release the feature to production along with other features in a week.

Amazon work life:

It took me almost 20 days or more to properly set up my work laptop as you need to follow a lot of steps. Mostly, we followed 10-day sprints which included retro meetings to discuss any feedback. The product manager and managers would decide the priority of the feature for the sprints. Based on that, you would start working on the feature and raise a Change Request (CR). Once you raise a CR, the code is tested against previously configured tests for your project. If any test fails, you need to fix them. The CR will be reviewed by at least 2 reviewers, but sometimes a 3rd reviewer gets added to it if the feature is large. If the approach is correct, they will approve the CR, or else you need to have meetings with the team and decide on the approach to finalize it. If everything looks good after multiple reviews, or depending on comments, they will approve the CR, and you need to merge it to the mainline.

If you need to update a CR after a review, you will have to raise another revision for the CR. For performance reviews, how many revisions occurred for your CRs will also be taken into account, both for the reviewer and for you. So, it is recommended to close it in 2 revisions.

The release process at Amazon is very different from the companies I have worked with. The top management decides on particular dates for a release, usually 2-week or 3-week release cycles. Before a week from the release date, you need to merge your changes to the mainline. They will go for QA testing. Once everything is finalized by QA, then only it will go to production, or if they find a bug, you need to fix it and merge it into the release branch for the release date.

Summary:

I felt that working at both a startup and Amazon is challenging; you have to keep up with deadlines and deliver features on time. I think when you have a streamlined approach to doing things, you can perform better and manage the expectations of the management. Eventually, any startup or large organization will create their streamlined approaches.

PS: Actively seeking frontend/fullstack JavaScript roles. If you have openings that match my skills, please connect with me on LinkedIn. Let’s discuss opportunities!

My 2023: A Year of Challenges and Triumphs

Sridhar Katta — Tue, 02 Jan 2024 19:22:54 GMT

2023 has been a rollercoaster ride for me. I faced a layoff early in the year from my last company, Hootboard, but bounced back and joined Amazon. Even though it is a contract role, it was the best decision I made. I traveled to the React Nexus conference with Zubair in July and after the conference trekked to Skandagiri Hills. Completing the trek was challenging, but with persistence and the help of others, I succeeded. I also visited Anthargiri Hills in September with Nomadic Gurukul, which was a fantastic experience.

Work:

Experienced a layoff in February from Hootboard.
Joined Amazon MiniTV in April.
Worked on a large codebase at Amazon, improving SEO performance by correcting headers, meta descriptions, and adding footer links.
Also learned HTTP status redirections 301 & 302.
Also learned how server-driven UI will make your app load faster & configure every section from the backend.
Key learnings at Amazon:
- The importance of thorough code documentation.
- The a need for well-structured documentation when proposing ideas to the team, including a comparative analysis of libraries, along with their advantages, drawbacks, and recommended approaches.
- The significance of writing effective Product Requirement Documents (PRDs).

Outside Work:

Initially felt discouraged after the layoff, grappling with doubt fullness. However, in hindsight, it was the best thing that happened to me this year, considering the accomplishments I achieved thereafter.
Attended the React Nexus conference in July & met great people at the conference.
Successfully trekked Skandagiri Hills. Although challenging due to my fitness level, I was supported by trek friends to the top. This was my second trek, following a previous one to Kudurumuka with another friend Nava in 2022.
Met many incredible people at React Nexus, including Vivek from ARC Browser & Tejas.
Purchased an M1 MacBook and an iPhone for personal use.
Learned swimming during the summer.
Also did an aerial yoga workshop along with my brother, hopefully, next year want to try scuba driving in Andaman or some other place.
Attended numerous meetups in Hyderabad. Notable ones include Web, Cloud & Go Multi-Track DevDays at IIIT Hyderabad, AI & ML Multi-Track event at ServiceNow, and a Temporal meetup at Microsoft.

I also wanted to write my experiences of meetups & conferences, I will try to do it after this blog. If you have read till the end, consider writing your own retrospective and sharing it

Some more year in reviews you may like to read & which inspired me to write my own

Cracking the Code: My Senior Software Engineer Interview Experience at Codecademy

Sridhar Katta — Mon, 16 Oct 2023 19:20:07 GMT

This is my interview experience at Codecademy, I want this to be a guide for others that could help others ace their interviews at product companies.

Company Info

Website: https://www.codecademy.com/
Location: Remote
Process for Role: Senior Software Engineer - Labs
Job Role Link: https://www.codecademy.com/about/job/4278254005
Status: Not Selected

Interview Process Summary


Rounds	7
Scripted Questions?	No
Typical DS and Algo Questions?	No
Live Coding?	Yes
Asked Current CTC?	Yes

Rounds Description

1. Codecademy Recruiter Screen:

In this round, you will converse with the Hiring Recruiter. You will be asked about yourself, your current place of employment, your reasons for seeking a new opportunity, your current CTC, and your expected CTC. The recruiter will then provide further details about the role for which you have applied.

2.Hiring manager Screen:

In this round, you will speak with the technical hiring manager about the role. You will need to discuss your past work experiences, highlight specific projects, and describe what you are seeking in your next position.

3.Frontend Take Home Assignment:

In this round, you will receive a CodeSandbox link containing a readme.md file with instructions for the front-end coding exercise, which will be closely related to a business use case. You will have 5 to 6 days to submit your solution. If you require additional time, you may request an extension.

4.Backend Coding Exercise:

In this round, you will be tested on your backend knowledge, specifically concerning HTTP request/response dynamics and other core backend-related topics. This round will primarily focus on real use cases that arise in Codecademy. Concentrate more on backend basics concepts don't think too complex. Please try to complete the coding before the time limit.

5.Take Home Assignment Review:

In this round, you will provide an outline of the code you wrote for the take-home assignment. Following that, you will be asked about potential improvements in your solution, possible UI enhancements, and data flow optimizations. Additionally, you will face some questions based on the specifics of the project.

6.Frontend Design & Architecture:

In this round, you will be asked to use Excalidraw to examine various UI screens from Codecademy. Dive deep into each screen to identify common components, local states, API call request/response structures, and server-side states. Endeavor to explore in detail. In excalidraw mark common components & write the json responses as much as possible. Ask as many questions as necessary to thoroughly understand the requirements for the UI.

Failed in this Round.

7.Hiring Manager Interview:

In this round, you will be asked about the company's core values, which include teamwork, feedback, transparency, and evolution. Please focus primarily on the Engineering Values matrix. Additionally, reflect on your past work, especially instances where you took the initiative to improve the codebase or user experiences. Discuss how you managed deadlines and how you overcame challenges faced while implementing new features.

Overall Experience

I had a very good Interview experience at Codecademy, recruiter was very kind and assisted in answering all the questions I had before the interview. They also clarified what was expected of me in each round. The coding questions asked ranged from easy to moderate, and each interview focused on business use cases. If you have a strong foundation in the fundamentals of JavaScript and React, you should be able to tackle them with ease.

Resources/Tips

A similar interview process by Codecademy recruiter
Make sure you try to give your best in each & every round possible.

I would like to tell people to start sharing their interview experiences to order using these platforms so that it would help others to ace their interviews. If you want some kind of template to document this then use this template & refer to this awesome-interview-experinces-repo. For blog cover credits go to [Coverview](https://coverview.vercel.app/)

If you need more info regarding this article or anything related to tech or software engineering in general, drop a comment here or you can message me here ksridhar02

What is Local Storage in browsers and How can you use it?

Sridhar Katta — Fri, 20 Jan 2023 09:04:50 GMT

Basic Definition:

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends that is when the page is closed.

Data stored in either localStorage is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different localStorage object from the same site accessed with HTTPS (e.g.https://example.com).

The simplest way to access local storage from our browser local like this

window.localStorage

which returns an object with the data stored in our browser's local storage.

The type of data you want to store in local storage should be key-value pairs which are always in the UTF-16 DOMString format, which uses two bytes per character. If you want to store objects and arrays they can also be stored by converting them into strings.
Methods available on storage object:

Setting data to storage object:

window.localStorage.setItem("mode","dark");

Using the above method you can set a key to a value, here I am setting mode to a value called dark.

Getting data from storage object:

window.localStorage.getItem("mode");

Using the above method you can get the value of the mode key that we previously set in the storage object.

Removing data from storage object:

window.localStorage.removeItem('mode');

Using this we can remove the value of the particular key from the storage object.

Remove all the items from the storage object:

window.localStorage.clear();

Using this method we can remove all the key-value pairs from the storage object. This can use in cases where the user logs out from the application.

Now we will see how you can set an object or an array to the storage object:

let user = {
      name: "sridhar",
      city: "Hyderabad"
}
or 
let numbers = [1,2,3,4,5]

To store these kinds of object user or numbers array, you have to convert them to strings by JSON.stringify method.

const User = JSON.stringify(user);
window.localStorage.setItem('user',User);

To access the above kind of data from the storage object you have to parse the data coming from the storage object like this

JSON.parse(window.localStorage.getItem("user"));

Let me show a small Demo:

Here I am using the chrome browser in Incognito mode, where I am showing where you see the local storage in your browser and how you can interact with it.

https://youtu.be/h7_3kQlYsm4

References:

MDN Docs links:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://developer.mozilla.org/en-US/docs/Web/API/DOMString

If you have any doubts related to this article or anything related to tech or software engineering in general, drop a comment here or you can message me here sridhar katta

How to deploy a Nodejs application to a server from scratch with an HTTPS URL?

Sridhar Katta — Thu, 24 Feb 2022 05:24:48 GMT

Today we are going to see how to deploy a Nodejs application to a Linode Nanode 1GB instance with an SSL certificate using a caddy server to one of my sub-domain https://twitter.server.ksridhar.xyz

Prerequisites:

Before we dive into the code, below are some things you should know:

You are familiar with JavaScript, Node.js in general
You are familiar with Git and GitHub
You are familiar with Linux systems and commands
You are familiar with Linode

First let's see how to create an instance on Linode:

Create a free Linode account using this link you will get 60 days $100 credit and log in to Linode and click on create Linode button.
Create a Linode instance from this page where you need to choose the operating system(choose the one you are most comfortable with I am choosing ubuntu), server location(choose the nearest location to your place), now select a plan I am choosing the shared CPU section and selecting the Nanode 1 GB instance for my project.

Add a password to your instance and add the ssh key if you want to use ssh to your server, then click on create Linode button it will create an instance for you in a few minutes and It will assign you an IP address for you to use.

Let's see how to deploy your application to your server:

First ssh into your server using this command from your Unix terminal.

ssh username@ipaddresss

Once you ssh into your it is a new system for you to use, so we have to update our system drivers and install certain dependencies such as git, Nodejs, neovim and net-tools.
Update your system using this command

sudo apt-get update && sudo apt-get upgrade

Install git, neovim(to edit files in the server) & net-tools(net-tools are used to see what ports are running in your server).

sudo apt install git net-tools neovim

Install Nodejs, I am using volta to install nodejs you can use other ways as well.

# install Volta
curl https://get.volta.sh | bash

# install Node
volta install node

# start using Node
node

# check  Node version
node -v

# check Npm version
npm -v

Once you install nodejs, clone your project into the server in my case I am using this nodejs project

git clone repository link

Now change the directory into the project and install the dependencies

cd projectName && npm i

Start the project using your script in your project

npm start

If you visit your IP: port in the browser (example: http://156.46.42.207:8000), you can see use your project is running but this way does not work once you close your terminal from the server so you have to use pm2 which is a node process manager to run your project.
To use pm2, you have to install the pm2 globally first

volta install pm2

Once pm2 is installed you can create a ecosystem.config.js file to list your env variables and other things but I am not doing that in my project. Instead, i am directly starting the project and creating an env file, and adding my environment variables.

# create an env file
touch  .env

#Edit the file using neovim
nvim .env

#Start the pm2 process in my case the file is preset in src/server.js
pm2 start src/server.js

Now you see the logs and see the process using the following commands.

#To list all the pm2 process
pm2 list

#To see the logs run
pm2 log processNumber

#You can also restart the server using this
pm2 restart processNumber

#You can also monitor using this command
pm2 monit 0

#To flush all process logs
pm2 flush

#To flush logs only certain process
pm2 flush processNumber

If you visit your IPAddress: port(port is your application running port number) number you check your endpoints but know we will convert this HTTP into HTTPS with caddy and a sub-domain to my domain ksridhar.xyz
First, we will install caddy from this caddy docs install link, so I am running ubuntu on my server so I am using these commands:

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https

curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo tee /etc/apt/trusted.gpg.d/caddy-stable.asc

curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list

sudo apt update

sudo apt install caddy

After installing Caddy we can use the following commands:

#To check the caddy status
systemctl status caddy

#To stop caddy you can use this command:
sudo systemctl stop caddy

#To start cady you use this command:
sudo systemctl start caddy

we need to add a DNS record to your domain provider, I am using Cloudflare as domain manager so I am adding A record to my sub-domain twitter.server with the content field as my server IP Adress

Tip: If you are using Cloudflare free account then turn off the proxy status for your record which will cause some issue for your domain, you can also check your website SSL certificates from your terminal using the following command
#Here I am using my domain but you can use any web address to check their SSL certificates
curl https://ksridhar.xyz -v

Once you added a sub-domain you need to add this line into your caddy file which can be opened and changed by the following commands:

#To open caddy in you system
nvim /etc/caddy/Caddyfile

#Add this sub-domain with the following object 

twitter.ksridhar.xyz {
    reverse_proxy localhost:PORT
}

PORT is your application running port number

Tip: similarly, you can add any number of domains and sub-domains into the Caddyfile in your server with respective ports, once you reload caddy it will create all the HTTPS URLs.

All you need to do know is to reload the caddy using this command:

sudo systemctl reload caddy

Know check for any errors in the caddy server with the status command, if there are no errors then your application is converted to HTTPS with the sub-domain, this is how the status logs show if it is successful.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my blog and connect on LinkedIn or Twitter.

Introduction to Ionic-react?

Sridhar Katta — Tue, 10 Nov 2020 17:35:27 GMT

Hi everyone

Today I am going to explain how to get started with ionic framework to build different hybrid mobile application using your web technologies.

What is the ionic framework?

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular, React, and Vue.JS.

Today we are going to cover how to use React and ionic to create a hybrid mobile application.

Install ionic-cli from your terminal

npm install -g @ionic/cli

Like we create a React app using create-react-app we can create react app using ionic/cli from your terminal

ionic start

Then you will be asked to select a framework you want to use for your application, I am choose to react but you can choose whatever you are comfortable.

After you choose framework you are asked to enter a name for your project
After choosing the framework and project name you will be asked to select a template from the following list

Templates are as follows
- blank - An empty project with a single page
- list - A list based layout application
- sidemenu - A sidemenu based layout
- tabs - A tabs based layout
- my-first-app - A tabs based fully functional photo Gallery application using native camera elements for android and IOS
- conference - A kitchen-sink application that shows off all Ionic features
Out of the above templates two are fully functional application those are my-first-app which is a photo gallery app, conference apps is a kitchen-sink application which show how much we can do with ionic framework using native elements from ionic.
For this tutorial I am choosing the my-first-app template and file structure will look like this.

After the creation of template change the directory to the project folder and start the project using the following command

ionic serve

Now you can see the server started at http://localhost:8100 and will open in your default browser the UI look something like this
By default the application opens tab1 which will look something like this

If you go to tab 2 where you can see the camera button floating, click on it will open your webcam and you can take a picture which will be stored locally memory.

Open browser dev tools,view the application different devices you can feel the native look, I have taken a simple photo using the webcam from my computer and all the images will be displayed in a grid format.

Utill now we only created a web application so in order to create a native hybrid application you need to add either capacitor or Cordova for the project. We will look at those in the next part of this series and much more about ionic in general.

Resources

Ionic-docs

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter @ksridhar02.

What is clamp function in CSS?

Sridhar Katta — Thu, 15 Oct 2020 03:25:13 GMT

Hi everyone, today I going to explain the importance of an inbuilt CSS function called clamp() which can be used most of the time in building responsive web pages without the need of media queries.

What is a clamp function?

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.

While it’s a related idea to min() and max() it is different in specific ways:

Order matters
It only takes 3 parameters
Those 3 parameters are

1.The minimum

2.The target value (ideally a relative unit)

3.The maximum

 clamp(MIN, VAL, MAX)

clamp() can be used for any of the following data types:

Clamp function in action:

Font size control using a clamp() with using a single media query

See the Pen fontSize-control-with-clamp() by Sridhar Katta (@sridhar-katta) on CodePen.

Clamp() for controlling Image width

See the Pen clamp-function-css by Sridhar Katta (@sridhar-katta) on CodePen.

Resources:

Mozilla Docs

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter @ksridhar02.

What is Mixed content block and how can we create a proxy server?

Sridhar Katta — Fri, 18 Sep 2020 15:44:31 GMT

Hi everyone, recently I have encountered a problem when working on a react project. I created the project with a basic login and a dashboard page. I have deployed it to Heroku, now started to test in my browser visiting the URL and entering the login credentials there got an error alert on my login screen then went to developer tools and checked what is the error in the network tab.

I got these two errors in dev tools saying mixed content block restricted.

Network tab errors

Browser console errors

Now I began to wonder what is a mixed content block, I have never encountered it till now, so began to search what is it in MDN as it is the best where can find answers about any issue related to web applications. I will explain the gist of it now.

What is Mixed content block?

When a user visits a page served over HTTPS, their connection with the webserver is encrypted with TLS and is therefore safeguarded from most sniffers and man-in-the-middle attacks. An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. That leaves the pages unsafe.

There are two types of mixed content blocks here :

1.Mixed passive/display content:

Mixed passive/display content is content served over HTTP that is included in an HTTPS webpage, but that cannot alter other portions of the webpage.

Passive content list

This section lists all types of HTTP requests which are considered passive content:

(src attribute)
(src attribute)
(src attribute)
subresources (when an performs HTTP requests)

2.Mixed active content:

Mixed active content is content that has access to all or parts of the Document Object Model of the HTTPS page. This type of mixed content can alter the behavior of the HTTPS page and potentially steal sensitive data from the user. Hence, in addition to the risks described for mixed display content above, mixed active content is vulnerable to a few other attack vectors.

Active content examples

This section lists some types of HTTP requests which are considered active content: