DEV Community: Ashokkumar

Study Guide for Full Stack Developer

Ashokkumar — Sat, 02 Mar 2024 06:37:32 +0000

Each repository contains a comprehensive study guide with useful links tailored for full stack developers. Explore these resources to enhance your skills and knowledge across various domains.

Useful ReactJS links - Study Guide

Ashokkumar — Sat, 08 Apr 2023 01:26:15 +0000

Hey Guys !!

I have listed some of the useful links which will help you to crack ReactJS interview.

ReactJS Github

Please find the table of contents,

React Life cycle
React Road map for beginners
React Performance
React tips and Tricks
React Hooks
React Libraries
React interview questions
React Learn
React Projects
React Unittest
Architecture
React checklist
React with WebPack
Error handling
React with typescript
React with DynamoDB
NextJS
React Resources
Redux
React GraphQL
React Github
React Linkedin
React Router

`React Life cycle`

`React Road map for beginners`

`React Performance`

`React tips and Tricks`

`React Hooks`

`React Libraries`

`React interview questions`

`React Learn`

`React Projects`

`React Unittest`

`Architecture`

`React checklist`

`React with Webpack`

https://devdojo.com/myogeshchavan97/how-to-create-a-react-app-from-scratch-using-webpack-5-babel

`Error handling`

`React with typescript`

`React with DynamoDB`

https://betterprogramming.pub/how-to-use-aws-dynamodb-in-react-70b55ffff93e

`NextJS`

`React Resources`

`Redux`

`React GraphQL`

https://blog.openreplay.com/fetching-data-from-graphql-apis-with-apollo-react

`React Github`

React Linkedin

https://www.linkedin.com/pulse/ultimate-react-developers-digest-top-picks-from-past-few-/

React Router

How I made my Github readme profile awesome

Ashokkumar — Wed, 20 Oct 2021 01:22:26 +0000

Header Section

I have started with greetings also my reach me section in the top right corner.

<h1 align="left"> Hello from A8hok <img src="https://user-images.githubusercontent.com/1303154/88677602-1635ba80-d120-11ea-84d8-d263ba5fc3c0.gif" width="28px" alt="hi"> 

<a href="https://www.linkedin.com/in/a8hok/" target="_blank">
  <img align="center" alt="a8hok | linkedin" src="https://user-images.githubusercontent.com/22448559/137614008-18f96cfd-b2c4-4066-9991-f605c978f9d9.png" width="80"/>
</a>
<a href="https://dev.to/a8hok" target="_blank">
    <img align="center" alt="a8hok | dev" src="https://user-images.githubusercontent.com/22448559/137614000-07f740bc-3723-497b-bb5e-54185478c892.png" width="80" />
</a>
<a href="mailto:a8hokkumar@gmail.com">
  <img align="center" alt="a8hok | Gmail" width="80px" src="https://user-images.githubusercontent.com/22448559/137614003-749c6718-b38d-4d6f-9cb2-b01a1781b144.png" />
</a>

About me section

In this section I have added my basic information with an Image in right.

Skills Section

I have added all my tech stack worked upon with images. Also I have done some fancy alignment.

Tech stack badge images can be find here, Skill badge

<p align="left">
<img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" width="90" height="30">
&nbsp;
  <img src="https://img.shields.io/badge/-Flask-05122A?style=flat&logo=flask" width="90" height="30">
&nbsp;
    <img src="https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green" width="90" height="30">
&nbsp;
    <img src="https://user-images.githubusercontent.com/22448559/137615981-be5a8b84-19b2-4b1e-ae97-3b273b594c4c.jpeg" width="90" height="30">
</p>

Github Trophies Section

You can add Github trophies with some basic stats about your commit, repo, PR .. etc

Different types of trophy can be find here, trophy

<img src="https://github-profile-trophy.vercel.app/?username=a8hok&theme=tokyonight&margin-w=15" />

Github contribution Graph

In this section, I have added a graph to identify my day to day Github contribution level.

you can find different vanities of graph here, Graph.

![github graph](https://activity-graph.herokuapp.com/graph?username=a8hok&theme=react-dark)

Github Stats and Streaks section

Here I have added about Github Streaks and Github stats, where you can find continues contribution in Github also Stats.

![Ashokkumar's github stats](https://github-readme-stats.vercel.app/api?username=a8hok&show_icons=true&theme=tokyonight)

![Ashokkumar GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=a8hok&theme=tokyonight)

you can find more details about streaks here, Streaks

Language used section

Here you can find most language used by myself.

<img align="center" width=600 src="https://github-readme-stats.vercel.app/api/top-langs/?username=a8hok&count_private=true&theme=radical" alt="ashok" />

More info here, most language

Dev card section

Here I have added a dev card where we can find my stats about article I use to read.

<a href="https://app.daily.dev/a8hok"><img src="https://api.daily.dev/devcards/a860938a2959496d844e2e79a4971610.png?r=o9p" width="400" alt="ashok's Dev Card"/></a>

Github link to my Profile

Useful Javascript links - Study Guide

Ashokkumar — Wed, 25 Aug 2021 16:20:54 +0000

Hey Guys !!

I have listed some of the useful links which will help you to learn Javascript.

Javascript Study Guide

ReactJS Study Guide

Please find the table of contents,

Variable, Scope, Hoisting this Patterns Prototype Functions Closure Iterators Currying Promises Es6+ Array Event Loops Objects String Date and time Regex Error Handling

Javascript Style Guides Performance/Code Optimisation Javascript Interview Questions Tips and Tricks Javascript Cheatsheet Javascript News Letters Developers to follow Javascript Algorithm Learn Javascript Javascript Books General Best Practices Javascript Projects Youtube channels

`Javascript Style Guides`

`Performance/Code Optimization`

`Javascript Interview Questions`

`Tips and Tricks`

`Javascript Cheatsheet`

`Javascript News Letters`

`Developers to follow`

`Javascript Algorithm`

`Learn Javascript`

`Javascript Books`

`General`

`Best Practices`

`Javascript Projects`

`Youtube channels`

Upcoming,
Python interview preparation.

Stay tuned :) :)

Boost your application with Google LightHouse

Ashokkumar — Sun, 05 Jan 2020 14:37:54 +0000

How Google LightHouse works?

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Lighthouse analyses web apps and web pages, collecting modern performance metrics and insights on developer best practices.

What Does Lighthouse Test?

Performance
Accessibility
Best Practices
SEO
PWA

Lighthouse can be integrated with,

CI/CD process
Task runners
Unit tests
Git pre-commit hooks

How to access Lighthouse?

Google developer tools
- Supports from version 52+ Open Google developer tools by clicking Inspect option from browser, then you can find Audits. There we can access LightHouse.

Google extension
- We can also find Google lighthouse as Extension.
Using NodeJS CLI
- The Node CLI provides the most flexibility in how Lighthouse runs can be configured and reported.Npm

Examples,

Open your terminal and run the below command.

npm install -g lighthouse

Verify Lighthouse installed by checking the version.

lighthouse --version

Now you can run audits against your application or any,

lighthouse https://flipkart.com --output html --out json --output --svg

Above command run the audits against flipkart and output the results in three format.

html
json
svg

Lighthouse integrated with Task runner(Gulp) Github repo

Reverse proxy using Varnish

Ashokkumar — Sat, 04 Jan 2020 09:36:18 +0000

Reverse proxy

A Reverse proxy is a server that sits in front of web servers and forwards client (e.g. web browser) requests to those web servers.

Some of the Reverse proxy

Nginx
HAProxy
Varnish-Cache
Lighttpd
Repose

Reverse proxies are typically implemented to help increase Security, Performance, and Reliability. Most of us are already familiar with Nginx, so will try Varnish Cache in this article.

Varnish is a program that can increase the speed of a Web site while simultaneously reducing the load on the Web server.

“Varnish is a Web application accelerator also known as a caching HTTP reverse proxy”.

It typically speeds up delivery with a factor of 300 - 1000x, depending on your architecture.

How varnish works?

The first time a certain URL and path are requested, Varnish has to request it from the origin server in order to serve it to the visitor. This is called a CACHE MISS, which can be read in HTTP response headers, depending on the Varnish setup.

When a particular URL or a resource is cached by Varnish and stored in memory, it can be served directly from server RAM; it doesn’t need to be computed every time. Varnish will start delivering a CACHE HIT in a matter of microseconds.

Varnish vs Ngnix
If you are using Nginx and Varnish only as reverse proxy, it’s fair to compare both.

Both Nginx and Varnish can be used as a reverse proxy cache, also for load balancing between two or more Apache servers that will deliver the dynamic content.
Varnish Cache has a lot of flexibility, allowing developers to create a more complex caching structure than Nginx.
Varnish Cache Configuration Language (VCL). VCL allows developers to specify request handling rules and set specific caching policies giving them a lot of control over what and how they cache.
Varnish Cache supports ESI while Nginx doesn’t; Nginx supports SSL where Varnish Cache doesn’t.
Varnish by default supports PURGE.

How to install Varnish in MacOS

With the help of brew we can install Varnish cache.

Open your terminal then run,

brew install varnish

Check varnish is installed,

brew info varnish

Varnish has a great configuration system. Most other systems use configuration directives, where you basically turn on and off lots of switches.

We have instead chosen to use a domain specific language called VCL for this.Varnish is configured via Varnish Configuration Language (VCL).

Once the configuration file is loaded by the system, Varnish translates and compiles.when you install varnish, default configuration file will be available called default.vcl file.

In the above image you can able to locate default.vcl file.

cat /usr/local/etc/varnish/default.vcl

Setting up Varnish with NodeJS
where we had already installed Varnish, Now setting up a NodeJS app.

Save file as server.js

Open terminal and start your NodeJS server,

node server.js

Goto browser and open https://localhost:8080.

Configure Varnish

Open your default.vcl file.
Setup your server configuration.

Handle request methods, by default varnish supports GET and HEAD method.
Handle backend response, once varnish fetch content from backend we can set ttl(time to live) and other configurations like handling response code.

We can control whether or not our request is being cached in our browser inspector, we ought to add the following snippet to our Varnish config file, into the sub vcl_deliver.

Start your varnish server.
Goto your browser, then we can see the feedback in our response headers as HIT or MISS.

This was just a short tutorial on speeding up your web service using Varnish.
You can use Varnish with any backend server like Python, PHP, NodeJS.

In built VCL makes life easy. Based on our needs we can stick with Nginx or Varnish to boost our site performance.

Please find full version of default.vcl file Github

Video link youtube

DEV Community: Ashokkumar

Study Guide for Full Stack Developer

VERSION CONTROL

FRONTEND

HTML & CSS

JAVASCRIPT

TYPESCRIPT

REACTJS

NEXTJS

BACKEND

NODEJS

Python

DATABASE

CLOUD SERVICES

Useful ReactJS links - Study Guide

React Life cycle

React Road map for beginners

React Performance

React tips and Tricks

React Hooks

React Libraries

React interview questions

React Learn

React Projects

React Unittest

Architecture

React checklist

React with Webpack

Error handling

React with typescript

React with DynamoDB

NextJS

React Resources

Redux

React GraphQL

React Github

React Linkedin

React Router

How I made my Github readme profile awesome

Header Section

About me section

Skills Section

Github Trophies Section

Github contribution Graph

Github Stats and Streaks section

Language used section

Dev card section

Useful Javascript links - Study Guide

Variable, Scope, Hoisting

this

Patterns

Prototype

Functions

Closure

Iterators

Currying

Promises

Es6+

Array

Event Loops

Objects

String

Date and time

Regex

Error Handling

Javascript Style Guides

Performance/Code Optimization

Javascript Interview Questions

Tips and Tricks

Javascript Cheatsheet

Javascript News Letters

Developers to follow

Javascript Algorithm

Learn Javascript

Javascript Books

General

Best Practices

Javascript Projects

Youtube channels