Problem-solving is a key skill set for any tech-related stuff you might be working on.

When it comes to developers it's one of the most crucial skills which is needed in almost any day-to-day code you might be writing.

So, this series of blogs is all about practicing Daily LeetCode Challenges & Problem-solving. ð

The Fibonacci numbers, commonly denoted

`F(n)`

form a sequence, called the Fibonacci sequence, such that each number is the sum of the two preceding ones, starting from 0 and 1. That is,

`F(0) = 0, F(1) = 1`

`F(n) = F(n - 1) + F(n - 2), for n > 1.`

Given n, calculate F(n).

**Example 1:**

```
Input: n = 2
Output: 1
Explanation: F(2) = F(1) + F(0) = 1 + 0 = 1.
```

**Example 2:**

```
Input: n = 3
Output: 2
Explanation: F(3) = F(2) + F(1) = 1 + 1 = 2.
```

**Example 3:**

```
Input: n = 4
Output: 3
Explanation: F(4) = F(3) + F(2) = 2 + 1 = 3.
```

**Algorithm**

- This is the recursive solution where If
`n`

is`0`

it will return`0`

or if`n`

is`1`

it will return`1`

. This is the base case for recursion - Recursively call the
`f(n-1)`

and`f(n-2)`

to return the final value of`f(n)`

- Finally we get out
`f(n)`

.

**Code in JS ð§ðŧ **

```
/**
* @param {number} n
* @return {number}
*/
var fib = function (n) {
if (n < 2) return n;
return fib(n - 1) + fib(n - 2);
};
```

**Time Complexity : O(n) **

**Space Complexity: O(n)**

**Algorithm**

- First of all,
`n = 0`

return`0`

and for`n = 1`

return`1`

- Create an array and store the first two values of the Fibonacci sequence in the array
- Now update the
`ith`

value of the array with the`i-1`

value + the`i-2`

value of the array. - Repeat the same for n iterations and then the array will have the
`nth`

value too. - Return the
`nth`

value from the array

**Code in JS ð§ðŧ **

```
/**
* @param {number} n
* @return {number}
*/
var fib = function (n) {
if (n < 2) return n;
var fibArray = [];
fibArray[0] = 0;
fibArray[1] = 1;
for (var i = 2; i <= n; i++) {
fibArray[i] = fibArray[i - 1] + fibArray[i - 2];
}
return fibArray[n];
};
```

**Time Complexity : O(n) **

**Space Complexity: O(n)**

**Algorithm**

The approach is similar to the 2nd solution but it is done without using a new array.

- First of all,
`n = 0`

return`0`

and for`n = 1`

return`1`

- Store the last two values of the Fibonacci series in
`f1`

and`f2`

. - Update
`f1`

with`f2`

- Update
`f2`

with the current sum of`f1`

and`f2`

. - Steps 2 and 3 will be repeated till we get the final value after n iterations.
- Return
`f2`

.

**Code in JS ð§ðŧ **

```
/**
* @param {number} n
* @return {number}
*/
var fib = function (n) {
if (n < 2) return n;
var f1 = 0;
var f2 = 1;
for (var i = 2; i <=n; i++) {
var currentSum = f1 + f2;
f1 = f2;
f2 = currentSum;
}
return f2;
};
```

**Time Complexity : O(n) **

**Space Complexity: O(1)**

Now it is time to try some similar questions

- Climbing Stairs
- Split Array into Fibonacci Sequence
- Length of Longest Fibonacci Subsequence
- N-th Tribonacci Number

Add your solution or approach in the comments below. Also, show your love by Sharing the blog. ðĪ

]]>Belief creates the actual fact.

~ William James

Problem-solving is a key skill set for any tech-related stuff you might be working on.

When it comes to developers it's one of the most crucial skills which is needed in almost any day-to-day code you might be writing.

So, this series of blogs is all about practicing Daily LeetCode Challenges & Problem-solving. ð

Given an unsorted array of integers

`nums`

, return the length of the longest consecutive elements sequence.You must write an algorithm that runs in

`O(n)`

time.

**Example 1:**

```
Input: nums = [100,4,200,1,3,2]
Output: 4
Explanation: The longest consecutive elements sequence is [1, 2, 3, 4]. Therefore its length is 4.
```

**Example 2:**

```
Input: nums = [0,3,7,2,5,8,4,6,0,1]
Output: 9
```

**Algorithm**

- we create a
`numsMap`

and store all the values in the map. - Now Iterate through the
`nums`

array and check if it is the starting point of a consecutive sequence of values or not. ie.`num-1`

exists or not. If it doesnt exist that means it can be starting value of the sequence. - Now check whether the next consecutive value exists or not in a while loop and increment the value of the current sequence length.
- Compare the longest sequence length with the current sequence length whichever is maximum will be stored in longest sequence length
- Finally return the longest sequence length.

**Code in JS ð§ðŧ **

```
/**
* @param {number[]} nums
* @return {number}
*/
var longestConsecutive = function (nums) {
var numsMap = new Map();
for (const num of nums) {
numsMap.set(num);
}
var longestSequence = 0;
for (const num of nums) {
if (!numsMap.has(num - 1)) {
var currentSequence = 1;
var currentNum = num;
while (numsMap.has(currentNum + 1)) {
currentNum++;
currentSequence++;
}
longestSequence = Math.max(longestSequence, currentSequence);
}
}
return longestSequence;
};
```

**Time Complexity : O(n) **

**Space Complexity: O(1)**

Now it is time to try some similar questions

- Binary Tree Longest Consecutive Sequence
- Find Three Consecutive Integers That Sum to a Given Number
- Maximum Consecutive Floors Without Special Floors

Add your solution or approach in the comments below. Also, show your love by Sharing the blog. ðĪ

]]>Believe you can and youre halfway there.

~ Theodore Roosevelt

Problem-solving is a key skill set for any tech-related stuff you might be working on.

When it comes to developers it's one of the most crucial skills which is needed in almost any day-to-day code you might be writing.

So, this series of blogs is all about practicing Daily LeetCode Challenges & Problem-solving. ð

There are

`n`

children standing in a line. Each child is assigned a rating value given in the integer array`ratings`

.You are giving candies to these children subjected to the following requirements:

- Each child must have at least one candy.
- Children with a higher rating get more candies than their neighbors.
Return the minimum number of candies you need to have to distribute the candies to the children.

**Example 1:**

```
Input: ratings = [1,0,2]
Output: 5
Explanation: You can allocate to the first, second, and third child with 2, 1, 2 candies respectively.
```

**Example 2:**

```
Input: ratings = [1,2,2]
Output: 4
Explanation: You can allocate to the first, second, and third child with 1, 2, 1 candies respectively.
The third child gets 1 candy because it satisfies the above two conditions.
```

**Constraints:**

`n == ratings.length`

`1 <= n <= 2 * 10^4`

`0 <= ratings[i] <= 2 * 10^4`

**Algorithm**

- Create a new array of
`candies`

with all initial values as at least one candy will be given to all the children. - Now, traverse from the left of the array to the right of the array and increase the count of the candies to be given based on the rating of the neighbor child. In this iteration, we are incrementing candies count only based on the left neighbor.
- Now, repeat the above from right to left and also store the sum.
- Finally return the total sum of candies. ð

**Code in JS ð§ðŧ **

```
/**
* @param {number[]} ratings
* @return {number}
*/
var candy = function (ratings) {
var candies = Array(ratings.length).fill(1);
for (var i = 1; i < ratings.length; i++) {
if (ratings[i] > ratings[i - 1]) {
candies[i] = candies[i - 1] + 1;
}
}
var sum = candies[ratings.length - 1];
for (var i = ratings.length - 2; i >= 0; i--) {
if (ratings[i] > ratings[i + 1]) {
candies[i] = Math.max(candies[i], candies[i + 1] + 1);
}
sum += candies[i];
}
return sum;
};
```

**Time Complexity : O(n) **

**Space Complexity: O(n)**

Add your solution or approach in the comments below. Also, show your love by Sharing the blog. ðĪ

]]>Life is like riding a bicycle. To keep your balance, you must keep moving.

Albert Einstein

Problem-solving is a key skill set for any tech-related stuff you might be working on.

So, this series of blogs is all about practicing Daily LeetCode Challenges & Problem-solving. ð

A

wiggle sequenceis a sequence where the differences between successive numbers strictly alternate between positive and negative. The first difference (if one exists) may be either positive or negative. A sequence with one element and a sequence with two non-equal elements are trivially wiggle sequences.

- For example,
`[1, 7, 4, 9, 2, 5]`

is a wiggle sequence because the differences`(6, -3, 5, -7, 3)`

alternate between positive and negative.- In contrast,
`[1, 4, 7, 2, 5]`

and`[1, 7, 4, 5, 5]`

are not wiggle sequences. The first is not because its first two differences are positive, and the second is not because its last difference is zero. Asubsequenceis obtained by deleting some elements (possibly zero) from the original sequence, leaving the remaining elements in their original order.Given an integer array

`nums`

, return the length of the longest wiggle subsequence of`nums`

.

**Algorithm**

- First check if the length of the
`nums`

array is smaller than two or not. If yes, we will simply return the length of the array ie.`0`

for`[]`

and`1`

for`[x]`

(where x can be any value) - We check the first difference between the
`1st`

from the`0th`

value in the`nums`

array and store it in the`previousdiff`

- If the values are not equal we will count both the no. for the wiggle sequence thus our counter will be
`2`

and if equal we take our counter to be`1`

- Now, While iterating the
`nums`

array we will compare the compare current difference and previous difference. If one is positive the other should be negative or vice versa. Now, we will increment the count if the conditions are satisfied and update the previous difference with the current difference. - Finally return the count of the wiggle sequence.

**Code in JS ð§ðŧ **

```
/**
* @param {number[]} nums
* @return {number}
*/
var wiggleMaxLength = function (nums) {
if (nums.length < 2) {
return nums.length;
}
var previousdiff = nums[1] - nums[0];
var counter = previousdiff != 0 ? 2 : 1;
for (var i = 1; i < nums.length; i++) {
const currentDiff = nums[i] - nums[i - 1];
if (
(currentDiff > 0 && previousdiff <= 0) ||
(currentDiff < 0 && previousdiff >= 0)
) {
counter++;
previousdiff = currentDiff;
}
}
return counter;
};
```

**Time Complexity : O(n) **

**Space Complexity: O(1)**

Now it is time to try more similar questions

Add your solution or approach in the comments below. Also, show your love by Sharing the blog. ðĪ

]]>"Dream big. Start small. But most of all, start."

~ Simon Sinek

Problem-solving is a key skill set for any tech-related stuff you might be working on.

So, this series of blogs is all about practicing Daily LeetCode Challenges & Problem-solving. ð

**Maximum Area of a Piece of Cake After Horizontal and Vertical Cuts ð°**

You are given a rectangular cake of size

`h x w`

and two arrays of integers`horizontalCuts`

and`verticalCuts`

where:

`horizontalCuts[i]`

is the distance from the top of the rectangular cake to the`ith`

horizontal cut and similarly, and`verticalCuts[j]`

is the distance from the left of the rectangular cake to the`jth`

vertical cut.Return the maximum area of a piece of cake after you cut at each horizontal and vertical position provided in the arrays

`horizontalCuts`

and`verticalCuts`

. Since the answer can be a large number, return this`modulo 109 + 7`

**Algorithm**

- Push
`0`

and`h`

in the`horizontalCuts`

. - Sort the
`horizontalCuts`

array in Ascending Order. - Take the maximum difference between the cuts by iterating on the list of
`horizontalCuts`

- Push
`0`

and`h`

in the`horizontalCuts`

. - Sort the
`horizontalCuts`

array in Ascending Order. - Take the maximum difference between the cuts by iterating on the list of
`horizontalCuts`

- Multiply both the max values and return the modulo
`10^9 + 7`

- Now, we got the largest piece of Cake ð°

**Code in JS ð§ðŧ **

```
/**
* @param {number} h
* @param {number} w
* @param {number[]} horizontalCuts
* @param {number[]} verticalCuts
* @return {number}
*/
var maxArea = function (h, w, horizontalCuts, verticalCuts) {
horizontalCuts.push(0, h);
horizontalCuts.sort((a, b) => a - b);
var maxH = 0;
verticalCuts.push(0, w);
verticalCuts.sort((a, b) => a - b);
var maxW = 0;
for (var i = 1; i < horizontalCuts.length; i++) {
maxH = Math.max(maxH, horizontalCuts[i] - horizontalCuts[i - 1]);
}
for (var j = 1; j < verticalCuts.length; j++) {
maxW = Math.max(maxW, verticalCuts[j] - verticalCuts[j - 1]);
}
return (BigInt(maxH) * BigInt(maxW)) % BigInt(1e9 + 7);
};
```

**Time Complexity : O(nlogn) **

**Space Complexity: O(1)**

Add your solution or approach in the comments below.

Show your love by Sharing the blog. ðĪ

]]>The best way to predict the future is to create it.

~ Peter Drucker

Problem-solving is a key skill set for any tech-related stuff you might be working on.

So, this series of blogs is all about practicing Daily LeetCode Challenges & Problem-solving. ð

You are assigned to put some amount of boxes onto one truck. You are given a 2D array

`boxTypes`

, where`boxTypes[i] = [numberOfBoxesi, numberOfUnitsPerBoxi]`

:

`numberOfBoxes`

is the number of boxes of type i.`numberOfUnitsPerBox`

is the number of units in each box of type i. You are also given an integer`truckSize`

, which is the maximum number of boxes that can be put on the truck. You can choose any boxes to put on the truck as long as the number of boxes does not exceed`truckSize`

.Return the maximum total number of units that can be put on the truck.

**Algorithm**

- Sorting the array in descending order based on the no. of units in each box. ðĶ
- Iterate through the sorted array elements and check the remaining
`truckSize`

.- If not enough size for all boxes take as many boxes as you can and calculate the total units
- Else take all the boxes and calculate the total units.

- Return the total units

**Code ð§ðŧ **

```
var maximumUnits = function (boxTypes, truckSize) {
boxTypes.sort((a, b) => b[1] - a[1]);
var maxTotal = 0;
var i = 0;
while (truckSize > 0 && i < boxTypes.length) {
const numOfBoxes = boxTypes[i][0];
const numOfUnits = boxTypes[i][1];
if (truckSize <= numOfBoxes) {
maxTotal += truckSize * numOfUnits;
truckSize = 0;
} else {
maxTotal += numOfBoxes * numOfUnits;
truckSize -= numOfBoxes;
}
i++;
}
return maxTotal;
};
```

**Time Complexity : O(nlogn)+O(n) = O(nlogn) **

**Space Complexity: O(1)**

Now it is time to try more similar questions

Add your solutions or approaches to the comments.

Show your love by Sharing the blog. ðĪ

]]>"I didn't fail 1000 times. The light bulb was an invention with 1000 steps."

~Thomas A. Edison

The above Codepen example shows a moving gradient animation on the whole body of the website.

Code snippet for the animation effect.

HTML ð

```
<body>
<h1>
Animation effect on "body"
</h1>
</body>
```

CSS ð

```
body {
background: -webkit-linear-gradient(
-70deg,
#a2facf,
#64acff
);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
```

The ** background size here is 400% 400%** and the background is moving. Thus, the animation is happening.

A lot of cool stuff can be code with this type of animation.

The above Codepen example shows a ð rainbow effect.

This is similar to the animation that we saw in the previous example but with 7 colors.

The above Codepen example shows a loader ð with the same gradient animation.

The above Codepen example shows ð the rainbow effect on a button.

Animation on hovering on the card

`background-size`

`time-duration`

`degree`

of the linear gradient.Now, put on your creative ðĪ hats and make an interesting animation effect with moving gradients.

Drop the website link in the comments for which you would be doing it or have done it.

Show your love by Sharing the blog. ðĪ

Let us create a page fade-in animation with CSS.

The above codepen shows animation with

`opacity:`

from`0`

to`1`

. Because of`infinite`

, it is animating continuously

check the whole code in Codepen or, check the code below for the animation

HTML snippet.

```
<body>
<h1>
This is the fade-in animation moving in y axis
</h1>
<!-- Your code -->
</body>
```

Now, add the below code to your ðĻ CSS.

```
body{
animation: fadeIn 2s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
```

If you remove the `infinite`

from the CSS you will get the animation effect on the first render only. With `infinite`

it is animating continuously.

There can be many more possibilities.

Check this out,

The above codepen shows animation with

`transform:`

from`translateY(50px)`

to`translateY(0)`

and`opacity:`

from`0`

to`1`

. Because of`infinite`

it is animating continuously.

Link for Codepen

The HTML code snippet will be the same and for the ðĻ CSS. check the code below ð

```
body{
animation: fadeIn 2s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
```

Just remove the `infinite`

from the CSS code for getting the animation once on the load of the page only.

Now, put on your creative hats and make an animation effect for your whole website on the initial load.

You can check something similar I did for my portfolio website. Souravdey.Space

Drop the website link in the comments for which you would be doing it or have done it.

Show your love by Sharing the blog. ðĪ

**Part 2** will be after the website is complete.

Currently it is under development but the first page is hosted. souravdey.space

To keep a consistency I am following the Design That I created. Design mockups in Figma

The current technical stack for my portfolio website HTML, CSS, Next.js, React.js, Vercel Cloud and Notion as headless CMS

- About/Home Page
- Work Experience
- Projects
- Tech Skill - with option to endorse
- Contact me

- Completion of the portfolio website.
- A 3D Avatar ðĶ
- Profile picture consistency and a bit more professional ð may be.
- Blog banners with consistent design and changing the previous banners.
- Fonts family and Colors Consistency.

I am not sure how much time I it will take to complete and I will try my best. ðĪ

Will appreciate suggestion in the comments.

**npm** is two things: first and foremost, it is an online repository for the publishing of open-source Node.js projects; second, it is a command-line utility for interacting with a said repository that aids in package installation, version management, and dependency management. A plethora of Node.js libraries and applications are published on npm, and many more are added every day.

This is not out of my brain. ð§

Reference to the definition https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/

What you need to start is with simple Node.js installation and yes, that is it. Refer to the below links ð

For publishing an npm package you don't need anything apart from package.json. But, yeah it will not be having any functionalities.

There are two ways to create the **package.json** file. You can simply open any code editor and go for the good old-fashioned way of editing it yourself. I will suggest trying it once. You will get to know how to and what to add as key-value pair in the JSON file.

```
{
"name": "your-amazing-package",
"version": "1.0.0",
}
```

This is the minimum key-value pair that is required to publish a package

But, again if you want things to be done efficiently. Create the package.json with the below command

```
npm init
```

Follow the instructions and enter the details one after another and after that just select enter after confirming the details.

This is how your **Package.json** is going to look after that ð

```
{
"name": "awesome-npm",
"version": "1.0.0",
"description": "the awesome package",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/YOUR_Git_USERNAME/awesome-npm.git"
},
"keywords": [
"awesome"
],
"author": "Sourav Dey",
"license": "MIT",
"bugs": {
"url": "https://github.com/YOUR_Git_USERNAME/awesome-npm/issues"
},
"homepage": "https://github.com/YOUR_Git_USERNAME/awesome-npm#readme"
}
```

We have the package.json ready. Now, index.js comes to the picture that is defined in pacakge.json as "main": "index.js"

Let's create a simple function in the **index.js** file. ð

```
function awesomeEmojiLog(message) {
if (message === undefined) throw new Error("No Message Found");
console.log("ð", message)
};
module.exports = awesomeEmojiLog
```

It is any day better to test your function before publishing it. It can be easily called inside index.js as

```
awesomeEmojiLog("This is awesome emoji")
```

Test it with a simple command

```
node index.js
```

The output will be

```
ð This is awesome emoji
```

Once done. It is now time to publish it.

To publish an npm package you first need to create an account in the npm registry with this link ð Signup for npm.

Done. Cool.

Log in to npm using the terminal with any of these two commands

```
npm login
```

or

```
npm adduser
```

Enter the **username**, **password**, and **email ID** as asked.

After that, you are one command away from your npm package. Just type this

```
npm publish
```

Note- If your package name starts with "@Your-username/packageName"

use the below command.

```
npm publish --access=public
```

ððĨģ The npm package is Published. You will get a mail for the same and You can check your list of packages in the npm registry if you are logged in.

Create your repo **awesome-npm** and push the code.

Follow the command to push the code.

```
echo "# awesome-npm" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Souravdey777/awesome-npm.git
git push -u origin main
```

Add the Licence for your package. I have used MIT.

Write the package's basic details in the Readme file like how to use it and what it does. Now, you can **Create a new release** for the npm package with proper versioning.

you can check the repo for reference ð https://github.com/Souravdey777/awesome-npm

and the npm package ð https://www.npmjs.com/package/awesome-npm

Your awesome npm package is ready. ðð

Hope you Loved it! Do let me know in the comments.

`GET`

requests which will fetch the Blogs from your Hashnode ids with few parameters and will create SVG cards to bring ð awesomeness to your blog links. ð
Website link https://hashnode-blog-cards.vercel.app

Github link https://github.com/Souravdey777/HashnodeBlogCards

It can be added anywhere in Github, Hashnode, Devpost, Postman Documentation, or any markdown editor. It can also be added to any website with HTML syntax with just the `img`

tag

Now you can add your hashnode blogs to your GitHub profile in .md file to show your latest blogs or to your Repositories or even to any website.

It is simple to use and the APIs can be explored with the `Hashnode Blog Cards`

API Playground.

This API endpoint will fetch a specific blog by its URL

```
https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=light
```

Response

`url`

= The URL of the specific blog

This is a mandatory parameter

eg. `https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool`

`theme`

= The theme of the Card.

This is not a mandatory parameter and the default value is `light`

.
Other values are possible values are `dark`

or `blue`

`large`

= The size of the Card.

This is not a mandatory parameter and the default value is `false`

. And when set to true gives a larger Card.

This API endpoint will fetch a specific blog by the Hashnode username of the author and the serial no of the blog starting from 1 being the latest.

```
https://hashnode-blog-cards.vercel.app/api/getHashnodeBlogBySequence?username=Souravdey777&sequence=1&large=true&theme=light
```

Response

`username`

= The hashnode username of the blogger.

This is a mandatory parameter.

eg. `souravdey777`

this is my hashnode username.

`sequence`

= The serial no of the blog starting from 1 being the latest. Because of this parameter, the blogs will be changing when you add them to your website or Github profile whenever you add a new blog.

This is a mandatory parameter.

eg. `souravdey777`

this is my hashnode username.

`theme`

= The theme of the Card.

This is not a mandatory parameter and the default value is `light`

.
Other values are possible values are `dark`

or `blue`

`large`

= The size of the Card.

This is not a mandatory parameter and the default value is `false`

. And when set to true gives a larger Card.

This API endpoint will fetch a set of the latest blogs by the Hashnode username of the author and the limit up to which the blogs are needed

```
https://hashnode-blog-cards.vercel.app/api/getLatestHashnodeBlog?username=Souravdey777&limit=3&large=true&theme=light
```

Response

`username`

= The hashnode username of the blogger.

This is a mandatory parameter.

eg. `souravdey777`

this is my hashnode username.

`limit`

= The no of the blog starting from latest to the limit defined or all blog you have if the no of blog you have is less than the limit defined.

It is not a mandatory param and the default value is `3`

. The maximum possible value is 6.

eg. `souravdey777`

this is my hashnode username.

`theme`

= The theme of the Card.

This is not a mandatory parameter and the default value is `light`

.
Other values are possible values are `dark`

or `blue`

`large`

= The size of the Card.

This is not a mandatory parameter and the default value is `false`

. And when set to true gives a larger Card.

Now let's see what are the themes we have,

`theme=light`

`theme=dark`

`theme=blue`

Now let's see the different size we have

`large=true`

`large=false`

`width`

and `height`

attributes.```
[![Hashnode Blog Card](https://hashnode-blog-cards.vercel.app/api/API_ENDPOINT?PARAMS)](BLOG_URL)
```

```
<a href="BLOG_URL">
<img src="https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url="https://hashnode-blog-cards.vercel.app/api/API_ENDPOINT?PARAMS" alt="Sourav Dey's Hashnode Blog Cards" />
</a>
```

I designed and created mockups for the cards first.

Exported the final SVG from `figma`

.

Gone through the documentations of `Nextjs`

.

Checked out the hashnode APIs with https://api.hashnode.com/ and Sandeep Panda's blog

Created APIs to fetch the data from hashnode APIs and made the SVG content dynamic.

This is how the APIs were created after that I deployed them in vercel by importing the git repo.

Next, It was the API Playground website.

Edited Lottie Animation as per the color codes.

Then, it was all `Reactjs`

.

And Yes It also has an error page for wrong links. ð

I have been using react for the last 2 years. And honestly, I was only using

`CRA`

but this is the first time I used`Nextjs`

and because of that the deployment in`Vercel`

was super smooth.`Lottiefiles`

. I used it for the first time and I loved it. I edited the animations with the Lottie design Editor and the assets in the website are from pixeltrue.We often don't do proper

`code linting`

on our side projects. But This time I can proudly say I did it properly. Referred to this blog ESlint and Prettier for React apps

```
"dependencies": {
"axios": "^0.21.1",
"next": "10.0.5",
"prop-types": "^15.7.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-lottie": "^1.2.3"
},
"devDependencies": {
"eslint": "^7.19.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"prettier": "^2.2.1"
}
```

`Hashnode blog Cards`

I have to enhance a few things that I already have in mind.

- PWA of the website
- Markdown and HTML syntax generator or API
- Horizontal Cards.
- more themes

This API is for the Hashnode community so Please tell me what you all will prefer next in this.

Special thanks to Sandeep Panda for the explanatory blog on Hashnode APIs. Click the card below and check out the blog.

ð Distributed under the `MIT`

License. See LICENSE for more information.

ðĻð Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Hope you Loved it! Do let me know in the comments.

An `Interactive Tool`

for the concept of Flexbox and Responsive Design. Simply set the attributes as needed and copy the CSS code. ð

Website Link - http://flexbox-guide.vercel.app/

Github Repo - https://github.com/Souravdey777/flexbox-guide

Docs Link - https://souravdey777.github.io/flexbox-guide/

`Flexbox-Guide`

Flexbox-Guide is a website developed for web developers and Coding newbies learning `CSS Flexbox Layout`

. This website can be used for both learnings or generating the code. Simply arrange the flex items as you need and copy the CSS to your code.

Before the Flexbox Layout module, there were four layout modes:

- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for the explicit position of an element

The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using float or positioning.

For a detailed explanation please check A Complete Guide to Flexbox by `Chris Coyier`

**Why wait? Straightaway go to the website and join the Awesomeness** ð
https://flexbox-guide.souravdey777.vercel.app

I got the Idea while I was explaining flexbox to a few of the interns in my office. I was explaining to them with three sample cards that how to make responsive cards with flexbox. And I have seen a lot of web developers using static `paddings`

and `margins`

and handling it with a lot of media queries. But, why go for such a mess when we have the `CSS flexbox layout`

.

This tool was also created with the same thought process. So that all the budding software developers can learn flexbox layout with an interactive tool, where you can set the attributes and check the layout as well as It will generate the CSS code for it.

Built with Reactjs and Love

Hosted in Vercel Cloud.

I have integrated ð analytics with plausible with the website recently on the 29th of Jan and here are the stats https://plausible.io/flexbox-guide.vercel.app.

It also got published in a `Weekly Magzine for Designers`

ð
https://speckyboy.com/weekly-news-for-designers-577/

The greatest of all is that It will help the community.

ð Distributed under the `MIT`

License. See LICENSE for more information.

Upvote Flexbox-Guide in ð **Product Hunt**.

Open a Pull Request or Raise an Issue.

ðĻð Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Hope you Loved it! Do let me know in the comments.

Want to learn more about flexbox?? Check the below link https://souravdey777.github.io/flexbox-guide/#learn-more-about-flexbox

]]>