mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-01 13:22:38 +02:00
Add video migration
This commit is contained in:
@@ -27,4 +27,4 @@ echo "=== Migrating Guides ==="
|
||||
node guide-migrator.cjs
|
||||
|
||||
echo "=== Migrating Videos ==="
|
||||
# node video-migrator.cjs
|
||||
node video-migrator.cjs
|
||||
|
58
bin/video-migrator.cjs
Normal file
58
bin/video-migrator.cjs
Normal file
@@ -0,0 +1,58 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const yaml = require('json-to-pretty-yaml');
|
||||
|
||||
const contentDirPath = path.join(__dirname, './developer-roadmap/content');
|
||||
const videos = require('./developer-roadmap/content/videos.json');
|
||||
|
||||
// Remove the old videos directory
|
||||
const newVideosDirPath = path.join(__dirname, '../src/videos');
|
||||
if (fs.existsSync(newVideosDirPath)) {
|
||||
fs.rmSync(newVideosDirPath, { recursive: true });
|
||||
}
|
||||
|
||||
fs.mkdirSync(newVideosDirPath);
|
||||
|
||||
videos.forEach((video) => {
|
||||
const { id: videoId } = video;
|
||||
|
||||
const originalVideoPath = path.join(
|
||||
contentDirPath,
|
||||
'videos',
|
||||
`${videoId}.md`
|
||||
);
|
||||
|
||||
const newVideoPath = path.join(__dirname, `../src/videos/${videoId}.md`);
|
||||
|
||||
const videoWithoutFrontmatter = fs.readFileSync(originalVideoPath, 'utf8');
|
||||
fs.copyFileSync(originalVideoPath, newVideoPath);
|
||||
|
||||
const videoFrontMatter = yaml
|
||||
.stringify({
|
||||
title: video.title,
|
||||
description: video.description,
|
||||
duration: video.duration,
|
||||
isNew: video.isNew,
|
||||
date: video.createdAt.replace(/T.*/, ''),
|
||||
author: {
|
||||
name: 'Kamran Ahmed',
|
||||
url: `https://twitter.com/kamranahmedse`,
|
||||
imageUrl: `/authors/kamranahmedse.jpeg`,
|
||||
},
|
||||
sitemap: {
|
||||
priority: 0.7,
|
||||
changefreq: 'weekly',
|
||||
},
|
||||
tags: ['video', `video-sitemap`],
|
||||
})
|
||||
.replace(/date: "(.+?)"/, 'date: $1');
|
||||
|
||||
const videoWithIframeClass = videoWithoutFrontmatter
|
||||
.replace(/<iframe/g, '<iframe class="w-full aspect-video mb-5"')
|
||||
.replace(/<iframe(.+?)\s?\/>/g, '<iframe$1></iframe>');
|
||||
|
||||
const videoWithFrontmatter = `---\n${videoFrontMatter}---\n\n${videoWithIframeClass}`;
|
||||
|
||||
console.log(`Writing video ${videoId} to disk`);
|
||||
fs.writeFileSync(newVideoPath, videoWithFrontmatter);
|
||||
});
|
19
src/videos/acid-explained.md
Normal file
19
src/videos/acid-explained.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "ACID Explained"
|
||||
description: "Learn what it means for a database to be ACID compliant with examples."
|
||||
duration: "5 minutes"
|
||||
isNew: false
|
||||
date: 2021-09-26
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/yaQ5YMWkxq4" title="Acid Explained with Examples"></iframe>
|
19
src/videos/all-about-http-caching.md
Normal file
19
src/videos/all-about-http-caching.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "All about HTTP Caching"
|
||||
description: "Learn what is HTTP caching, places for caching and different caching headers."
|
||||
duration: "13 minutes"
|
||||
isNew: false
|
||||
date: 2020-10-04
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/HiBDZgTNpXY" title="All about HTTP Caching"></iframe>
|
19
src/videos/array-structure.md
Normal file
19
src/videos/array-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "All about Array Data Structure"
|
||||
description: "Learn everything you need to know about array data structure"
|
||||
duration: "10 minutes"
|
||||
isNew: false
|
||||
date: 2022-01-09
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/QJNwK2uJyGs" title="Array Data Structure"></iframe>
|
19
src/videos/arrays-and-objects-in-javascript.md
Normal file
19
src/videos/arrays-and-objects-in-javascript.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Arrays and Objects in JavaScript"
|
||||
description: "Learn how to manipulate arrays and objects in JavaScript."
|
||||
duration: "12 minutes"
|
||||
isNew: false
|
||||
date: 2020-05-09
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/n3NKGsM3iEw" title="Arrays and Objects in JavaScript"></iframe>
|
19
src/videos/async-javascript.md
Normal file
19
src/videos/async-javascript.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Asynchronous JavaScript"
|
||||
description: "Learn how to write asynchronous JavaScript using Async/Await"
|
||||
duration: "15 minutes"
|
||||
isNew: false
|
||||
date: 2021-11-14
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/VyIK6SV5f7o" title="Asynchronous JavaScript"></iframe>
|
19
src/videos/basic-authentication.md
Normal file
19
src/videos/basic-authentication.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Basic Authentication"
|
||||
description: "Learn everything you need to know about basic authentication"
|
||||
duration: "5 minutes"
|
||||
isNew: true
|
||||
date: 2022-10-01
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/mwccHwUn7Gc" title="Basic Authentication | Authentication Series"></iframe>
|
19
src/videos/basics-of-authentication.md
Normal file
19
src/videos/basics-of-authentication.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Basics of Authentication"
|
||||
description: "Learn everything you need to know about authentication with this Authentication Series"
|
||||
duration: "5 minutes"
|
||||
isNew: true
|
||||
date: 2022-09-21
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/Mcyt9SrZT6g" title="Basics of Authentication"></iframe>
|
19
src/videos/big-o-notation.md
Normal file
19
src/videos/big-o-notation.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Big O Notation"
|
||||
description: "Learn what the Big-O notation is and how to calculate the time complexity of an algorithm."
|
||||
duration: "8 minutes"
|
||||
isNew: false
|
||||
date: 2021-10-25
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/Z0bH0cMY0E8" title="Big O Notation — Calculating Time Complexity"></iframe>
|
19
src/videos/content-delivery-networks.md
Normal file
19
src/videos/content-delivery-networks.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Content Delivery Networks"
|
||||
description: "Learn what the CDNs are and the difference between push CDN vs pull CDN."
|
||||
duration: "4 minutes"
|
||||
isNew: false
|
||||
date: 2020-09-26
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/6DXEPcXKQNY" title="Content Delivery Networks"></iframe>
|
19
src/videos/dns-explained.md
Normal file
19
src/videos/dns-explained.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "DNS and how does it work?"
|
||||
description: "Learn what the DNS is and how a website is found on the internet."
|
||||
duration: "5 minutes"
|
||||
isNew: false
|
||||
date: 2020-08-17
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/Wj0od2ag5sk" title="DNS and how does it work?"></iframe>
|
19
src/videos/dns-records.md
Normal file
19
src/videos/dns-records.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "DNS Records"
|
||||
description: "Learn what the DNS is and how a website is found on the internet."
|
||||
duration: "6 minutes"
|
||||
isNew: false
|
||||
date: 2020-08-31
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/7lxgpKh_fRY" title="DNS Records"></iframe>
|
19
src/videos/floating-point-arithmetic.md
Normal file
19
src/videos/floating-point-arithmetic.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Floating Point Arithmetic"
|
||||
description: "Learn how ow the arithmetic operations work on floating-point numbers and why the results might be different from what you may expect."
|
||||
duration: "4 minutes"
|
||||
isNew: false
|
||||
date: 2021-10-10
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/RIiq4tTt6rI" title="Floating Point Arithmetic"></iframe>
|
19
src/videos/freeze-and-seal-objects-in-javascript.md
Normal file
19
src/videos/freeze-and-seal-objects-in-javascript.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Freeze and Seal in JavaScript"
|
||||
description: "Learn what is object freeze and seal in JavaScript and how to use them"
|
||||
duration: "6 minutes"
|
||||
isNew: false
|
||||
date: 2020-10-16
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/O3uT2l6vgZ8" title="Freeze and Seal in JavaScript"></iframe>
|
19
src/videos/graph-data-structure.md
Normal file
19
src/videos/graph-data-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Graph Data Structure"
|
||||
description: "Learn everything you need to know about the graph data structure"
|
||||
duration: "13 minutes"
|
||||
isNew: false
|
||||
date: 2022-09-08
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/0sQE8zKhad0" title="Graph Data Structure"></iframe>
|
19
src/videos/hash-table-data-structure.md
Normal file
19
src/videos/hash-table-data-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Hash Table Data Structure"
|
||||
description: "Learn everything you need to know about the hash table data structure"
|
||||
duration: "8 minutes"
|
||||
isNew: false
|
||||
date: 2022-02-21
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/jalSiaIi8j4" title="Hash Table Data Structure"></iframe>
|
19
src/videos/heap-data-structure.md
Normal file
19
src/videos/heap-data-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Heap Data Structure"
|
||||
description: "Learn everything you need to know about the heap data structure"
|
||||
duration: "11 minutes"
|
||||
isNew: false
|
||||
date: 2022-08-24
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/F_r0sJ1RqWk" title="Heap Data Structure"></iframe>
|
19
src/videos/how-to-use-css-variables.md
Normal file
19
src/videos/how-to-use-css-variables.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "How to use CSS Variables?"
|
||||
description: "Learn how to write scalable CSS using CSS Variables."
|
||||
duration: "5 minutes"
|
||||
isNew: false
|
||||
date: 2020-07-03
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/lgaxU7CRmxU" title="How to use CSS Variables?"></iframe>
|
19
src/videos/how-to-use-github-actions.md
Normal file
19
src/videos/how-to-use-github-actions.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Automate with GitHub Actions"
|
||||
description: "Learn how to implement CI/CD with GitHub Actions"
|
||||
duration: "6 minutes"
|
||||
isNew: false
|
||||
date: 2020-07-13
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/nyKZTKQS_EQ" title="Automate with GitHub Actions"></iframe>
|
19
src/videos/javascript-fetch-api.md
Normal file
19
src/videos/javascript-fetch-api.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "JavaScript Fetch API"
|
||||
description: "Learn how to use JavaScript's Fetch API to interact with remote API."
|
||||
duration: "3 minutes"
|
||||
isNew: false
|
||||
date: 2020-08-02
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/-ZI0ea5O2oA" title="JavaScript Fetch API"></iframe>
|
19
src/videos/linked-list-data-structure.md
Normal file
19
src/videos/linked-list-data-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Linked List Data Structure"
|
||||
description: "Learn everything you need to know about linked list data structure"
|
||||
duration: "11 minutes"
|
||||
isNew: false
|
||||
date: 2022-01-31
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/odW9FU8jPRQ" title="Linked List Data Structure"></iframe>
|
19
src/videos/load-balancers-101.md
Normal file
19
src/videos/load-balancers-101.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Load Balancers 101"
|
||||
description: "Learn the basics of load balancers, types and different algorithms."
|
||||
duration: "9 minutes"
|
||||
isNew: false
|
||||
date: 2020-09-18
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/galcDRNd5Ow" title="Load Balancers 101"></iframe>
|
19
src/videos/osi-model.md
Normal file
19
src/videos/osi-model.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "OSI Model Explained"
|
||||
description: "Learn what is OSI Model and the different layers involved."
|
||||
duration: "7 minutes"
|
||||
isNew: false
|
||||
date: 2020-10-24
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/dV8mjZd1OtU" title="OSI Model Explained"></iframe>
|
42
src/videos/practical-intro-to-react.md
Normal file
42
src/videos/practical-intro-to-react.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: "Practical Introduction to React"
|
||||
description: "Learn how to create a React Application with practical example."
|
||||
duration: "40 minutes"
|
||||
isNew: false
|
||||
date: 2020-07-09
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
In this short series of lessons, we are going to create a react app from scratch. We are mainly going to use React and Chakra UI and see how we can build an application that fetches the trending projects from GitHub's API and shows you in the form of listing.
|
||||
|
||||
If you want to get an idea of what we are going to be building have a look at [GitHunt](https://kamranahmed.info/githunt). Also the complete source code can be found at [@kamranahmedse/githunt](https://github.com/kamranahmedse/githunt)
|
||||
|
||||
## Intro and Basic Setup
|
||||
The video below gives you the basic introduction about the project and explains what we are going to build.
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/NyG7YJWJd6s" title="Practical Introduction to React Part 1"></iframe>
|
||||
|
||||
## Building the Interface
|
||||
In this second lesson we are going to create all the required components and the UI using Chakra UI and in the next lesson of this series we are going to start adding interactivity to our application.
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/zPqzKqjtEL4" title="Practical Introduction to React Part 1"></iframe>
|
||||
|
||||
## Building the View Switcher
|
||||
In this lesson we start adding interactivity to the interface. We will be building the view switcher where you can switch between the "Grid View" and the "List View" and in the next and last lesson of the series, we are going to integrate GitHub API and show the repositories.
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/EYzPJsJwjFg" title="Practical Introduction to React Part 1"></iframe>
|
||||
|
||||
## Fetching Remote Data
|
||||
|
||||
Below is the final lesson where we complete the application by integrating the GitHub API to make the data dynamic.
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/G2IbP9B_4PU" title="Practical Introduction to React Part 1"></iframe>
|
19
src/videos/promises-in-javascript.md
Normal file
19
src/videos/promises-in-javascript.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "All about Promises in JavaScript"
|
||||
description: "Learn how to write asynchronous code in JavaScript using promises."
|
||||
duration: "8 minutes"
|
||||
isNew: false
|
||||
date: 2020-07-20
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/BvrkobaCVVE" title="All about Promises in JavaScript"></iframe>
|
19
src/videos/queue-data-structure.md
Normal file
19
src/videos/queue-data-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Queue Data Structure"
|
||||
description: "Learn everything you need to know about the queue data structure"
|
||||
duration: "4 minutes"
|
||||
isNew: false
|
||||
date: 2022-02-14
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/mDCi1lXd9hc" title="Queue Data Structure"></iframe>
|
19
src/videos/random-number-generators.md
Normal file
19
src/videos/random-number-generators.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Random Number Generators"
|
||||
description: "How do random number generators work?"
|
||||
duration: "8 minutes"
|
||||
isNew: false
|
||||
date: 2021-11-03
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/nDv3yXdD0rk" title="Random Number Generators"></iframe>
|
19
src/videos/scaling-the-unscalable.md
Normal file
19
src/videos/scaling-the-unscalable.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Scaling the Unscalable"
|
||||
description: "Learn the basics of System Design and understand how to build a scalable application."
|
||||
duration: "10 minutes"
|
||||
isNew: false
|
||||
date: 2020-07-26
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/a2rcgzludDU" title="Scaling the Unscalable"></iframe>
|
19
src/videos/session-based-authentication.md
Normal file
19
src/videos/session-based-authentication.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Session Based Authentication"
|
||||
description: "Learn everything you need to know about session authentication"
|
||||
duration: "2 minutes"
|
||||
isNew: true
|
||||
date: 2022-11-02
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/gKkBEOq_shs" title="Session Based Authentication"></iframe>
|
19
src/videos/ssh-ssl-tls.md
Normal file
19
src/videos/ssh-ssl-tls.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "SSH vs TLS vs SSL"
|
||||
description: "Learn the difference between SSH, TLS and SSL"
|
||||
duration: "3 minutes"
|
||||
isNew: false
|
||||
date: 2021-11-25
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/k3rFFLmQCuY" title="SSH vs TLS vs SSL"></iframe>
|
19
src/videos/stack-data-structure.md
Normal file
19
src/videos/stack-data-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Stack Data Structure"
|
||||
description: "Learn everything you need to know about the stack data structure"
|
||||
duration: "5 minutes"
|
||||
isNew: false
|
||||
date: 2022-02-07
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/I5lq6sCuABE" title="Stack Data Structure"></iframe>
|
19
src/videos/system-design-101.md
Normal file
19
src/videos/system-design-101.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "System Design 101"
|
||||
description: "Learn about all the bits and pieces of system design."
|
||||
duration: "7 minutes"
|
||||
isNew: false
|
||||
date: 2020-08-08
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/Y-Gl4HEyeUQ" title="System Design 101"></iframe>
|
19
src/videos/tcp-ip-model.md
Normal file
19
src/videos/tcp-ip-model.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "TCP/IP Model Explained"
|
||||
description: "Learn what is TCP/IP Model and the different layers involved."
|
||||
duration: "5 minutes"
|
||||
isNew: false
|
||||
date: 2020-11-06
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/F5rni9fr1yE" title="TCP/IP Model Explained"></iframe>
|
19
src/videos/transport-protocols-tcp-vs-udp.md
Normal file
19
src/videos/transport-protocols-tcp-vs-udp.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Transport Protocols: TCP vs UDP"
|
||||
description: "Learn about the Transport Layer of the TCP/IP model and different transport protocols."
|
||||
duration: "10 minutes"
|
||||
isNew: false
|
||||
date: 2020-11-21
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/37AFBZv4_6Y" title="Transport Protocols: TCP vs UDP"></iframe>
|
19
src/videos/tree-data-structure.md
Normal file
19
src/videos/tree-data-structure.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "Tree Data Structure"
|
||||
description: "Learn everything you need to know about the tree data structure"
|
||||
duration: "8 minutes"
|
||||
isNew: false
|
||||
date: 2022-08-11
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/S2W3SXGPVyU" title="Tree Data Structure"></iframe>
|
19
src/videos/what-are-data-structures.md
Normal file
19
src/videos/what-are-data-structures.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "What are Data Structures?"
|
||||
description: "Learn about the different data structures in this illustrated series"
|
||||
duration: "1 minute"
|
||||
isNew: false
|
||||
date: 2021-12-12
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/9rhT3P1MDHk" title="What are Data Structures?"></iframe>
|
19
src/videos/what-is-cap-theorem.md
Normal file
19
src/videos/what-is-cap-theorem.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "What is CAP Theorem?"
|
||||
description: "An illustrated explanation to CAP theorem with examples and proof."
|
||||
duration: "8 minutes"
|
||||
isNew: false
|
||||
date: 2021-10-05
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/_RbsFXWRZ10" title="What is CAP Theorem?"></iframe>
|
19
src/videos/what-is-dependency-injection.md
Normal file
19
src/videos/what-is-dependency-injection.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "What is Dependency Injection?"
|
||||
description: "Learn what is dependency injection and how to write better code with the help of it."
|
||||
duration: "3 minutes"
|
||||
isNew: false
|
||||
date: 2020-07-04
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/0yc2UANSDiw" title="What is Dependency Injection?"></iframe>
|
19
src/videos/what-is-dom-shadow-dom-virtual-dom.md
Normal file
19
src/videos/what-is-dom-shadow-dom-virtual-dom.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "DOM, Shadow DOM, Virtual DOM"
|
||||
description: "Learn what is DOM, Shadow DOM and Virtual DOM and how they work."
|
||||
duration: "6 minutes"
|
||||
isNew: false
|
||||
date: 2020-07-20
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/7Tok22qxPzQ" title="DOM, Shadow DOM, Virtual DOM"></iframe>
|
19
src/videos/what-is-eventual-consistency.md
Normal file
19
src/videos/what-is-eventual-consistency.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "What is Eventual Consistency?"
|
||||
description: "Learn about the different consistency models in distributed systems"
|
||||
duration: "5 minutes"
|
||||
isNew: false
|
||||
date: 2021-11-30
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/rpqsSkTIdAw" title="What is Eventual Consistency?"></iframe>
|
19
src/videos/yaml-in-depth.md
Normal file
19
src/videos/yaml-in-depth.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "YAML in Depth"
|
||||
description: "Everything you need to know about YAML"
|
||||
duration: "8 minutes"
|
||||
isNew: false
|
||||
date: 2021-10-18
|
||||
author:
|
||||
name: "Kamran Ahmed"
|
||||
url: "https://twitter.com/kamranahmedse"
|
||||
imageUrl: "/authors/kamranahmedse.jpeg"
|
||||
sitemap:
|
||||
priority: 0.7
|
||||
changefreq: "weekly"
|
||||
tags:
|
||||
- "video"
|
||||
- "video-sitemap"
|
||||
---
|
||||
|
||||
<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/ImHSpwUlNVc" title="YAML in Depth"></iframe>
|
Reference in New Issue
Block a user