DEV Community: Rishi Verma

Roadmap To Learn Data Structures and Algorithms

Rishi Verma — Sun, 27 Jun 2021 08:20:58 +0000

Credit

1. Arrays

-Bare Minimum

a. https://www.geeksforgeeks.org/top-50-array-coding-problems-for-interviews/

-Bonus

a. https://www.interviewbit.com/courses/programming/topics/arrays/
b. https://leetcode.com/tag/array/

2. Strings

-Bare Minimum

a. https://www.interviewbit.com/courses/programming/topics/strings/

-Bonus

a. https://leetcode.com/tag/string/
b. https://www.hackerrank.com/domains/algorithms?filters%5Bstatus%5D%5B%5D=unsolved\u0026filters%5Bsubdomains%5D%5B%5D=strings\u0026badge_type=problem-solving

3. Linked Lists

-Bare Minimum

a. https://www.interviewbit.com/courses/programming/topics/linked-lists/

-Bonus

a. https://leetcode.com/tag/linked-list/
b. https://www.geeksforgeeks.org/top-20-linked-list-interview-question/

4. Stacks and Queues

5. Tree-based data structures:

-Theory:

a. https://www.geeksforgeeks.org/binary-tree-data-structure/
b. https://www.geeksforgeeks.org/binary-search-tree-data-structure/
c. https://www.geeksforgeeks.org/trie-insert-and-search/
d. https://www.geeksforgeeks.org/heap-data-structure/
e. https://www.geeksforgeeks.org/hashing-data-structure/

-Bare minimum:

a. https://www.interviewbit.com/courses/programming/topics/tree-data-structure/
b. https://www.interviewbit.com/courses/programming/topics/heaps-and-maps/
c. https://www.interviewbit.com/courses/programming/topics/hashing/

-Bonus

a. https://leetcode.com/tag/tree/
b. https://leetcode.com/tag/heap/
c. https://leetcode.com/tag/trie/
d. https://leetcode.com/tag/hash-table/

6. Graphs:

-Theory:

a. https://www.geeksforgeeks.org/graph-and-its-representations/

-Standard Algos:

a. BFS - https://www.geeksforgeeks.org/breadth-first-search-or-bfs-for-a-graph/
b. DFS - https://www.geeksforgeeks.org/depth-first-search-or-dfs-for-a-graph/
c. Dijkstra - https://www.geeksforgeeks.org/dijkstras-shortest-path-algorithm-greedy-algo-7/
d. Prim's - https://www.geeksforgeeks.org/prims-minimum-spanning-tree-mst-greedy-algo-5/
e. Kruskal - https://www.geeksforgeeks.org/kruskals-minimum-spanning-tree-algorithm-greedy-algo-2/
f. Floyd-Warshall - https://www.geeksforgeeks.org/floyd-warshall-algorithm-dp-16/
g. Union Find - https://www.geeksforgeeks.org/union-find-algorithm-union-rank-find-optimized-path-compression/

-Bare Minimum:

a. https://leetcode.com/tag/graph/ (Easy and Medium)

-Bonus:

a. https://www.interviewbit.com/courses/programming/topics/graph-data-structure-algorithms/

7. Dynamic Programming:

-Video lectures:

a. Lec 1 - https://www.youtube.com/watch?v=OQ5jsbhAv_M\u0026list=PLcDimPvbmfT8qAxD6JH_kmXiQwTNcoK78
b. Lec 2 - https://www.youtube.com/watch?v=ENyox7kNKeY\u0026list=PLcDimPvbmfT8qAxD6JH_kmXiQwTNcoK78\u0026index=2
c. Lec 3 - https://www.youtube.com/watch?v=ocZMDMZwhCY\u0026list=PLcDimPvbmfT8qAxD6JH_kmXiQwTNcoK78\u0026index=3

-Bare minimum (Standard problems):

a. https://www.geeksforgeeks.org/program-for-nth-fibonacci-number/
b. https://www.geeksforgeeks.org/0-1-knapsack-problem-dp-10/
c. https://www.geeksforgeeks.org/coin-change-dp-7/
d. https://www.geeksforgeeks.org/compute-ncr-p-set-1-introduction-and-dynamic-programming-solution/
e. https://www.geeksforgeeks.org/longest-increasing-subsequence-dp-3/
f. https://www.geeksforgeeks.org/longest-common-subsequence-dp-4/
g. https://www.geeksforgeeks.org/longest-common-substring-dp-29/

-Bonus:

a. https://www.interviewbit.com/courses/programming/topics/dynamic-programming/
b. https://leetcode.com/tag/dynamic-programming

Quick start with Tailwind CSS

Rishi Verma — Sat, 24 Apr 2021 20:37:24 +0000

1. Configuring Tailwind CSS without using PostCSS plugin

Make a folder with any name and open the folder path in the terminal (You can use VS Code built-in terminal).

Create package.json file 📦

npm init -y //default options

Install tailwind CSS using npm

npm i tailwindcss

Install Autoprefixer

npm i autoprefixer //For different browsers support

Create a folder 📁 name public, inside public folder create a file 📄 named index.html and create another folder 📁 named src , inside src folder create a file 📄 named tailwind.css.

Your file structure should look like this

├── tailwindcss
│   ├── public
│   │   ├── index.html
│   ├── src
│   │   ├── tailwind.css
.
.
.

Open src/tailwind.css 📄 and copy-paste below code 📋

@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;

Create a build scrip which compiles the src/tailwind.css 📄 and make actual compiled css inside the public folder 📁, open package.json 📦 file and copy-paste below code.

"scripts": {"build": "tailwindcss build ./src/tailwind.css -o ./public/tailwind.css"}

Run build script

npm run build

This will generate compiled css inside the public folder 📁, and link this css in your index.html 📄(Note: Don't modify compiled css)

Customize tailwind CSS Config

First create tailwind config file with the following command

npx tailwindcss init

It will generate tailwind.config.js 📄

In talwind.config.js 📄 you can define your own custom property.
after changing talwind.config.js 📄 again you need to run build script

npm run build

Compress size of tailwind.css(Production ready)

Install NODE_ENV

npm install win-node-env

In package.json 📦 file add the following script which reduces the compiled CSS (It will remove unused classes)

"prod": "NODE_ENV=production npx tailwindcss build ./src/tailwind.css -o ./public/tailwind.css“

Open tailwind.config.js 📄 file add the following line in PURG.

purge:['./public/**/*.html']

Now you can make production ready 💪 CSS by running the following command

npm run prod

2. Configuring Tailwind CSS with as PostCSS plugin

Create package.json 📦 file

npm init -y //default options

Install tailwind CSS using npm

npm i tailwindcss

Install Autoprefixer

npm i autoprefixer //For different browsers support

Install PostCSS-CLI Plugin

npm i postcss-cli

Create Configuration files for Tailwind CSS and PostCSS using following command

npx tailwindcss init -p

This will generate two files tailwind.config.js and postcss.config.js

Create a folder name public , inside public folder 📁 create a file named index.html 📄 and create another folder named src , inside src folder 📁 create a file named tailwind.css 📄.

Your file structure should look like this

├── tailwindcss
│   ├── public
│   │   ├── index.html
│   ├── src
│   │   ├── tailwind.css
.
.
.

Open src/tailwind.css 📄 and copy-paste below code

@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;

Create a build scrip which compiles the src/tailwind.css 📄 and make actual compiled css inside the public folder 📁, open package.json 📦 file and copy-paste below code.

"scripts": {"build": "postcss build ./src/tailwind.css -o ./public/tailwind.css"}

Run build script

npm run build

This will generate compiled css inside the public folder 📁, and link this css in your index.html(Note: Don't modify compiled css)

Customize tailwind CSS Config

First create tailwind config file with the following command

npx tailwindcss init

It will generate tailwind.config.js 📄

In talwind.config.js 📄 you can define your own custom property.
after changing talwind.config.js 📄again you need to run the build script

npm run build

Compress size of tailwind.css(Production ready)

Install NODE_ENV

npm install win-node-env

In package.json 📦 file add the following script which reduces the compiled css (It will remove unused classes)

"prod": "NODE_ENV=production npx tailwindcss build ./src/tailwind.css -o ./public/tailwind.css“

Open tailwind.config.js 📄 file add the following line in purg.

purge:['./public/**/*.html']

Now you can make production ready 💪 CSS by running the following command

npm run prod