DEV Community: Narendra Kumar Vadapalli

Productive Taskbar Settings missing in Windows 11

Narendra Kumar Vadapalli — Tue, 06 Jul 2021 20:54:24 +0000

Ungroup the Icons in Taskbar

If you are a person who likes to see all your open windows in the taskbar, with their titles for one click navigation, you would relate to my pain.

There used to be the option called Combine Taskbar Buttons

Now in Windows 11, its gone !

This makes it super hard to navigate directly to your inteded window with a glance and click :(

Position the Taskbar

Also there used to be the option of Taskbar Location on Screen which goes missing

Now

This is a real productivity tool for many developers who rely on the left/right positioning to get more real estate for individual window titles, again for quicker navigation.

Not sure what the logic behind this is, but please bring these settings back Microsoft !

Adding Google Analytics to personal website

Narendra Kumar Vadapalli — Thu, 18 Mar 2021 00:48:57 +0000

Click here for Original Post

Setting up Google Analytics Account

Go to Google Analytics home page
Sign in with your google account (otherwise Sign Up)
Click on the Admin icon on the left pane
Create an account for the website by providing the details for the property to measure, which in this case is my personal website

step 1

step 2

step 3

Getting the Tracking ID for the property to Measure

Tracking ID is the identifier that will be given in the gatsby config of my personal website under the gatsby google analytics plugin
Following will help you find the same
Take a note of the Tracking ID

Adding the gatsby plugin

Need to install the plugin gatsby-plugin-google-analytics (Ref: https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/)
Run the command in your local dev environemtn npm install gatsby-plugin-google-analytics
Add the following block to gatsby-config.js

        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: process.env.GATSBY_GOOGLE_ANALYTICS_TRACKING_ID || "none"
            }
        }

GATSBY_GOOGLE_ANALYTICS_TRACKING_ID is an enviornment variable that needs to be added to the deployment environment, to not expose the Tracking ID to public

Setting Env Variable in AWS Amplify

Deployment environment

My personal website has been setup to be hosted and deployed via AAWS Amplify
- Has the advantage of automatic provisioning of the AWS resources
- CI/CD built in
- Automatic Depoloyment when code is merged to master branch on a connected github repository

Amplify Console - Environment Variables

Login in to Amplify Console: https://console.aws.amazon.com/console/home with AWS credentials
Select the app (website deployment) and under App Settings check for Environment Variables
Click on Manage Variables
Click on Add Variable. Add GATSBY_GOOGLE_ANALYTICS_TRACKING_ID as the Variable and under Value paste the Tracking ID copied from Google Analytics
Once Saved, environment variables list should show the value

That's it !

Once Setup, Google Analytics will now start tracking the metrics in Real Time (eg: Active Users). Analytics has a lot of potential in tailoring the content to the target audience

Running a react app on Local Kubernetes cluster on Windows 10

Narendra Kumar Vadapalli — Thu, 18 Mar 2021 00:43:05 +0000

Click here for Original Post

Prerequisites

Won't be covering the installation process of Docker Desktop and enabling the WSL2 backend here in this blog. Assumption is that readers can figure out the process from the given resources on their own. I might cover those topics in detail if there is enough demand in future blogs.

Make sure you are running Linux Containers Backend in Docker Desktop after installing it.

minikube start

minikube setups up a local kubernetes cluster for development on local host (in this case windows).

Since we will be using a local docker image and bypassing the need to push to a docker registry and then specifying the same during deployment on kubernetes, --insecure-registry=10.0.0.0/24 is used.

Why 10.0.0.0/24? Checkout

Run the following command to start the local kubernetes cluster in a powershell (preferably admin powershell)

minikube start --insecure-registry="10.0.0.0/24"

Sample Output

❯ minikube start --insecure-registry="10.0.0.0/24"

* minikube v1.18.1 on Microsoft Windows 10 Pro 10.0.21332 Build 21332
* Using the docker driver based on existing profile
* Starting control plane node minikube in cluster minikube
* Restarting existing docker container for "minikube" ...
* Preparing Kubernetes v1.20.2 on Docker 20.10.3 ...
* Verifying Kubernetes components...
  - Using image kubernetesui/dashboard:v2.1.0
  - Using image kubernetesui/metrics-scraper:v1.0.4
  - Using image gcr.io/k8s-minikube/storage-provisioner:v4
* Enabled addons: storage-provisioner, dashboard, default-storageclass
* Done! kubectl is now configured to use "minikube" cluster and "default" namespace by default

Create React app

Make sure that node and npm are installed in the windows environment

❯ node -v
v15.11.0

❯ npm -v
7.6.3

Then use npx create-react-app test-react-app to create a test react application

❯ npx create-react-app test-react-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

Creating a new React app in D:\work\test-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...

Finally check to see that app is running as expected

Configure minikube docker local environment

Run the following command to set the local configuration for making the development iteration easier by using the local docker images.

NOTE
This stays local to your powershell terminal in which we run the following command

& minikube -p minikube docker-env | Invoke-Expression

For anyone curious, Run minikube docker-env to see the actual commands that are getting run

❯ minikube docker-env
$Env:DOCKER_TLS_VERIFY = "1"
$Env:DOCKER_HOST = "tcp://127.0.0.1:52175"
$Env:DOCKER_CERT_PATH = "C:\Users\Naren\.minikube\certs"
$Env:MINIKUBE_ACTIVE_DOCKERD = "minikube"
# To point your shell to minikube's docker-daemon, run:
# & minikube -p minikube docker-env | Invoke-Expression

Dockerize the react application

Simplest way to create a docker image of a react app is to add the following files to the root of the application folder (repository in case of git)

Dockerfile

FROM node:10-alpine as build-step

RUN mkdir /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build

FROM nginx:1.17.1-alpine
COPY --from=build-step /app/build /usr/share/nginx/html

.dockerignore

/node_modules
/build
.git
*.md
.gitignore

Docker Build the image

docker build -t test-react-app .

Check for the built image

❯ docker images test-react-app
REPOSITORY       TAG       IMAGE ID       CREATED              SIZE
test-react-app   latest    e81a494ead2b   About a minute ago   21.1MB

Kubernetes deployment

A deployment and service resources are required for deploying the react app on to the kubernetes cluster. We can combine both specifications in to single yaml file by separating them with ---

Observe the imagePullPolicy attribute marked as Never indicating that don’t look at docker registry for pulling the image called test-react-app
Also we will be using the simplest service called NodePort to map the node’s port in kubernetes cluster to applications port

deployment.yaml

kind: Deployment
apiVersion: apps/v1
metadata:
  name: test-react-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: test-react-app
  template:
    metadata:
      labels:
        app: test-react-app
    spec:
      containers:
        - name: test-react-app
          image: test-react-app
          imagePullPolicy: Never
          ports:
            - containerPort: 80
      restartPolicy: Always

---

kind: Service
apiVersion: v1
metadata:
  name: test-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 32000
  selector:
    app: test-react-app

Deploy

We use kubectl apply -f <yaml> to deploy both the deployment and service

kubectl apply -f .\deployment.yaml

Sample Output

❯ kubectl apply -f .\deployment.yaml
deployment.apps/test-react-app created
service/test-react-app created

Check the pods running

Verify that there are pods running using kubectl get pods

❯ kubectl get pods
NAME                             READY   STATUS    RESTARTS   AGE
test-react-app-9bf9cbcdb-h9zvj   1/1     Running   0          12s

Access the react app

Finding the Service URL

We use minikube to find out the service URL for the deployed react application

minikube service test-react-app --url

Sample Output

❯ minikube service test-react-app --url
🏃  Starting tunnel for service test-react-app.
|-----------|----------------|-------------|------------------------|
| NAMESPACE |      NAME      | TARGET PORT |          URL           |
|-----------|----------------|-------------|------------------------|
| default   | test-react-app |             | http://127.0.0.1:62352 |
|-----------|----------------|-------------|------------------------|
http://127.0.0.1:62352
❗  Because you are using a Docker driver on windows, the terminal needs to be open to run it.

Open the app in Browser

Local Kubernetes Dashboard

All the while we can see the effects of running any kubectl commands in the kubernetes local dashboard

minikube dashboard

Sample Output

❯ minikube dashboard
🔌  Enabling dashboard ...
    ▪ Using image kubernetesui/dashboard:v2.1.0
    ▪ Using image kubernetesui/metrics-scraper:v1.0.4
🤔  Verifying dashboard health ...
🚀  Launching proxy ...
🤔  Verifying proxy health ...
🎉  Opening http://127.0.0.1:56135/api/v1/namespaces/kubernetes-dashboard/services/http:kubernetes-dashboard:/proxy/ in your default browser...

will open the dashboard in a new tab

Cleanup

Cleanup the deployment and service using the following command

kubectl delete -f .\deployment.yaml

Close down minikube (local k8s cluster) and delete

minikube stop
minikube delete

Gatsby site hosted on AWS Amplify redirecting to homepage always

Narendra Kumar Vadapalli — Fri, 06 Nov 2020 22:47:25 +0000

Click here for Original Post

Problem Statement

After connecting the app for continuous deployment by attaching the branch on my github repository (For those interested, details here: Connecting to AWS Amplify for deployment), any specific url provided was always getting redirected to my home page (./index.html)

Rewrites and Redirects

You Need to sign in to AWS account by clicking on on https://aws.amazon.com/amplify/. Once the credentials are provided. Click on Rewrites and redirects

Default entries

There were 3 default entries and was suspecting one of them was causing this issue, but wasn't certain.

[
    {
        "source": "https://narenvadapalli.com",
        "target": "https://www.narenvadapalli.com",
        "status": "302",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

Approach

I could have spent time and understood the redirects by studying the regex closely, but even simpler was to remove one by one (starting with the most suspected) and trying.

Attempt 1

First removed the second entry which felt like it was grabbing all the entries after my website's url.

    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },

which didn't help and pages were still getting redirected

Attempt 2

Removed the last entry

    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }

and saved the updated entries

and suddenly the specific urls were sticking without redirection to my homepage ( ./index.html)

So found the culprit

Bonus research

As per https://moz.com/learn/seo/redirection, seems like 301 redirection is preferred in terms for Search Engine Optimization (SEO) rather than 302 for the redirection of URL with and without www
The second rule there was to catch any urls that point to an invalid/non-existing page. So I had a 404.html in my static website and was to redirect to that page, rather than my homepage ( ./index.html`)

So finally the working combination of Rewrites and Redirects is

[ { "source": "https://narenvadapalli.com", "target": "https://www.narenvadapalli.com", "status": "301", "condition": null }, { "source": "/<*>", "target": "/index.html", "status": "404-200", "condition": null } ]

Steps to open the bulk edit text editor

Follow the steps to get to the bulk edits text editor

Edit button

Open Text Editor button

Text editor

Provision and Deploy webapp using AWS Amplify

Narendra Kumar Vadapalli — Fri, 06 Nov 2020 22:44:42 +0000

Click here for Original Post

AWS Amplify Console

You Need to sign in to AWS account by clicking on on https://aws.amazon.com/amplify/. Once the credentials are provided, should see welcome screen like the following

Connecting Github (source code)

Since the code for my website is already hosted on github, we choose From your existing code option as shown and Github

Choose the repo

Choose the branch

Adding in the custom environment variables

Once we hit the Next button, there will be App Settings and under Advanced Settings, there is a provision to add the custom env vars that we want to secure from exposing them in source code. I have Google Analytics connected to my website to track the insights in to the audience. More details here: Adding Google Analytics to personal website

Connecting the deployment to custom domain

As per https://docs.aws.amazon.com/amplify/latest/userguide/custom-domains.html, by default the deployment happens at the custom url in the following format

https://branch-name.d1m7bkiki6tdw1.amplifyapp.com

This step enables us to connect any custom domain to the deployment process. This step will take time as it has to issue SSL certificates and then verify the ownership, finally propagates the DNS records

Domain Activation

If the SSL certificate issued successfully and the ownership is verified, Domain will be activated

Potential Issue

SSL Configuration step could just be not moving forward and stuck for more than 1 hour

Fix

Just delete the custom domain and restart the process

Commute Times to Work -> Killer

Narendra Kumar Vadapalli — Thu, 09 Jan 2020 17:44:29 +0000

Received an email from Google and it was slightly depressing to see how much time we spend just traveling to work in an year.

Close to 23 days in an year ! That's incredibly wasted amount of time which could have been well spent even on a vacation to refresh/replenish your energy.

Imagine how many software skills, you could achieve in 3 weeks of time !?

Profiling and visualization tools in Python

Narendra Kumar Vadapalli — Thu, 17 Oct 2019 03:42:45 +0000

Click here for Original Post

Which part of the my python code is taking time ?

Sounds like a familiar question asked!

Well, I have that question pop up quite often, especially when dealing with legacy code bases and unfamiliar code. This is my effort in helping shed light on exploring an answer to the question

Setup

Consider the following simple piece of code in a file called test.py

def print_method():
    print("hello world")

def test_print_method():
    for i in xrange(2):
        print_method()

for i in range(3):
    test_print_method()

When you execute the code using python executable, following output of hello world is printed 6 times

$ python test.py
hello world
hello world
hello world
hello world
hello world
hello world

Probing Parameters

Let’s look in to different tools which we could use to determine

Code path
Number of calls and
Which method took the most time !

Disclaimer

This blog has been created after executing the commands on a Linux distro. If on a different platform, I assume one knows how to get to the required (or similar) software packages

Basis for profiling

We basically rely on profile module, more specifically cProfile module to generate the data needed for different visualization tools. (https://docs.python.org/2/library/profile.html#module-profile)
Easiest way to run cProfile on a python code is to run it as a module with python executable by passing the actual script as an argument to cProfile

Example

python -m cProfile test.py

Along with the expected output of hello world lines ,we see additional information about the time it took to execute each method.

$ python -m cProfile test.py
hello world
hello world
hello world
hello world
hello world
hello world
         12 function calls in 0.000 seconds
Ordered by: standard name
ncalls  tottime  percall  cumtime  percall filename:lineno(function)
        1    0.000    0.000    0.000    0.000 test.py:1(<module>)
        6    0.000    0.000    0.000    0.000 test.py:1(print_method)
        3    0.000    0.000    0.000    0.000 test.py:5(test_print_method)
        1    0.000    0.000    0.000    0.000 {method 'disable' of '_lsprof.Profiler' objects}
        1    0.000    0.000    0.000    0.000 {range}

Output might not be super digestible instantly at the first glance. Lets dive into different visualization tools available which can make the timing information more perceivable.

A picture is worth a thousand words

gprof2dot

My favorite one among all the available tools is gprof2dot https://github.com/jrfonseca/gprof2dot

Install `gprof2dot`

pip install gprof2dot --user

Generate .pstats file

Execute the test.py script this time with the timing information being directed to an external output file, rather than standard console output. Observe the -o flag with the output filename being test.pstats

python -m cProfile -o test.pstats test.py

Visualize profiling information

Assuming you have dot and eog installed, run the following command in the terminal where the profiling output file test.pstats is located

gprof2dot -f pstats test.pstats | dot -Tpng -o output.png && eog output.png

Bingo, you get a window which shows something like the following

gprof2dot output

Analysis

Above graph shows you that 91.67% was spent in test_print_method and the same method was called 3 times (3x) , which in turn calls print_method (overall 6 times).

Other method calls like range is a tiny amount of total execution time, but it is also visible in the graph

This was a simple python code. This method works equally well with complex code. Pasting a sample image from gprof2dot’s github repo

gprof2dot sample output

SnakeViz

SnakeViz is a browser based visualization tool. It needs the output in a .profile format, rather than .pstats when the profiling output is generated using cProfile module

Install `snakeviz`

pip install snakeviz --user

Generate .profile file

Execute the test.py script this time with the timing information being redirected using -o flag to output file named test.profile

python -m cProfile -o test.profile test.py

Visualize profiling information

Run the following command in the terminal where the profiling output file test.profile is located

snakeviz test.profile

Analysis

There will be some information printed in the console when the command is run and a new window which pops in a browser session

$ snakeviz test.profile 
snakeviz web server started on 127.0.0.1:8080; enter Ctrl-C to exit
http://127.0.0.1:8080/snakeviz/%2Ftmp%2Ftest.profile
START /usr/bin/google-chrome-stable "http://127.0.0.1:8080/snakeviz/%2Ftmp%2Ftest.profile"
Opening in existing browser session.
WARNING:tornado.access:404 GET /images/sort_both.png (127.0.0.1) 1.04ms
WARNING:tornado.access:404 GET /images/sort_desc.png (127.0.0.1) 0.49ms

Snakeviz icicle visulaization

Snakeviz suburst visulaization

PyCallGraph

This seems to be an abandoned project, but hey ! still works.

Install `pycallgraph`

pip install pycallgraph --user

Generate png visualization file

Execute the script using pycallgraph executable, rather than going via python executable.

Disclaimer

The following examples specify graphviz as the outputter, so it’s required to be installed

pycallgraph graphviz -- ./test.py

Visualize profiling information

Above command generates a pycallgraph.png image. Open the image using any image viewer. Using eog as an example on my host

$ eog pycallgraph.png

pycallgraph png

Shows the timing and number of calls information.

Conclusion

I still believe gprof2dot does a better job at giving % and eye tracks naturally the flow in the graph much easier than other visualization methods.

DEV Community: Narendra Kumar Vadapalli

Productive Taskbar Settings missing in Windows 11

Ungroup the Icons in Taskbar

Position the Taskbar

Adding Google Analytics to personal website

Setting up Google Analytics Account

step 1

step 2

step 3

Getting the Tracking ID for the property to Measure

Adding the gatsby plugin

Setting Env Variable in AWS Amplify

Deployment environment

Amplify Console - Environment Variables

Running a react app on Local Kubernetes cluster on Windows 10

Prerequisites

minikube start

Create React app

Configure minikube docker local environment

Dockerize the react application

Docker Build the image

Check for the built image

Kubernetes deployment

Deploy

Check the pods running

Access the react app

Finding the Service URL

Open the app in Browser

Local Kubernetes Dashboard

Cleanup

Gatsby site hosted on AWS Amplify redirecting to homepage always

Problem Statement

Rewrites and Redirects

Default entries

Approach

Attempt 1

Attempt 2

Bonus research

Steps to open the bulk edit text editor

Edit button

Open Text Editor button

Text editor

Provision and Deploy webapp using AWS Amplify

AWS Amplify Console

Connecting Github (source code)

Choose the repo

Choose the branch

Adding in the custom environment variables

Connecting the deployment to custom domain

Domain Activation

Potential Issue

Fix

Commute Times to Work -> Killer

Profiling and visualization tools in Python

Which part of the my python code is taking time ?

Setup

Probing Parameters

Basis for profiling

gprof2dot

Install gprof2dot

Generate .pstats file

Visualize profiling information

Analysis

SnakeViz

Install snakeviz

Generate .profile file

Visualize profiling information

Analysis

PyCallGraph

Install pycallgraph

Generate png visualization file

Visualize profiling information

Conclusion

Install `gprof2dot`

Install `snakeviz`

Install `pycallgraph`