Видео 283
Просмотров 105 231

RSC vs RCC: Data Fetching Showdown (with Code Examples)

5:49

Mastering Server vs. Client Components in Next.js!

3:50

Streamline Your GitHub Projects with a README Template!

1:43

Master Markdown: Transform Posts with Style!

4:40

Unlock Markdown Magic with marked.js Today!

2:40

Elevate Your Code: Easy Syntax Highlighting!

2:00

Unlocking Dynamic Data with React Server Components!

Unlock the power of dynamic data fetching in Next.js with React Server Components! Learn about error handling, loading states, and enhance your web development skills using TypeScript.
Github repository url (tag 0.13) : github.com/NathanKr/rsc-fetch-dynamic-data-playground
Chapters:
00:00 Project Description
00:18 Motivation
00:48 Installation
01:02 Usage
01:25 Home page
01:43 PostsCount - react server component
02:20 loading.tsx
02:38 error.tsx
03:15 Demo - Loading
03:22 Demo - After Loading
03:30 Error
03:45 SSR in action
04:04 References

Видео

RSC vs RCC: Data Fetching Showdown (with Code Examples)

5:49

RSC vs RCC: Data Fetching Showdown (with Code Examples)

Просмотров 117 часов назад

Join us in "RSC vs RCC: Data Fetching Showdown (with Code Examples)" as we explore the power of React Server and Client Components in Next.js to transform static Markdown into dynamic web content. #React #Nextjs #Markdown Github repository url (tag 0.12) : github.com/NathanKr/simple-react-server-component-playground Chapters: 00:00 Project Description 00:10 Motivation 00:27 Installation 00:44 U...

Mastering Server vs. Client Components in Next.js!

3:50

Mastering Server vs. Client Components in Next.js!

Просмотров 599 часов назад

Dive into the world of Next.js as we explore the key differences between React Server Components (RSC) and React Client Components (RCC), enhancing your understanding of optimized rendering and performance in React applications! Github repository url (tag 0.13) : github.com/NathanKr/super-simple-react-server-component-playground Chapters: 00:00 Project Overview 00:23 Motivation 00:36 Installati...

Streamline Your GitHub Projects with a README Template!

1:43

Streamline Your GitHub Projects with a README Template!

Просмотров 1521 час назад

"Discover how to quickly create a reusable README template for your GitHub projects, enhancing documentation and maintaining consistency across repositories. Simplify your workflow today!" Tags: #GitHub #READMEtemplate #projectdocumentation Post url : nathankrasney.com/posts/github-template-readme Chapters: 00:00 Description 00:10 Motivation 00:28 Installation 00:47 Usage 01:06 Points of Intere...

Master Markdown: Transform Posts with Style!

4:40

Master Markdown: Transform Posts with Style!

Просмотров 49День назад

Learn how to effectively use Markdown and Next.js to create stylish static posts with syntax highlighting, optimizing performance and enhancing your content presentation. Master Markdown today! Github repository url : github.com/NathanKr/next.js-static-blog-with-markdown Following the release of the video I noticed a build error, this is fixed in tag 0.52 Chapters: 00:00 Motivation 00:15 Instal...

Unlock Markdown Magic with marked.js Today!

2:40

Unlock Markdown Magic with marked.js Today!

Просмотров 57День назад

Unlock the power of Markdown with marked.js! Discover how to effortlessly convert Markdown to HTML and enhance your web development projects. Watch now! #marked.js #MarkdownToHTML #WebDevelopment Github repository url : github.com/NathanKr/marked-playground Chapters: 00:00 Motivation 00:10 Installation 00:27 Usage 00:33 What is marked.js? 00:48 Why marked.js? 00:59 How I Use Markdown 01:12 Key ...

Elevate Your Code: Easy Syntax Highlighting!

2:00

Elevate Your Code: Easy Syntax Highlighting!

Просмотров 31День назад

Unlock the power of syntax highlighting in your web projects! Learn how to effortlessly implement `highlight.js` for stunning, readable code displays. Perfect for web developers! #syntaxhighlighting #highlightjs #webdevelopment Github repository url : github.com/NathanKr/highlight.js-playground Chapters: 00:00 Motivation 00:08 Usage 00:13 Installation 00:22 Ingredients of highlight.js 00:59 Bas...

Secure Session Management with Iron-Session!

3:15

Secure Session Management with Iron-Session!

Просмотров 7814 дней назад

Unlock the power of secure session management with iron-session! Learn how to store session data safely using encrypted cookies in Next.js and beyond. repository : github.com/NathanKr/next.js-iron-session-playground Chapters: 00:00 Introduction 00:13 Motivation 00:43 Solution 00:57 API : set value in cookie : /api/set-cookie 01:20 API : get value from cookie : /api/get-cookie 01:41 API : Helper...

Unlocking Cookies: The Secret Behind Web Sessions

2:37

Unlocking Cookies: The Secret Behind Web Sessions

Просмотров 7721 день назад

Dive into the world of cookies! Discover how they manage web sessions, enhance user experiences, and secure data-all crucial for web development. repository: github.com/NathanKr/cookie-playground Chapters: 00:00 What is a Cookie? 00:52 Motivation of this repository 01:00 Setting a Cookie on the Server 01:31 Behavior 01:51 Browser Storage Example 02:01 Retrieving a Cookie on the Server 02:23 Key...

3:07

Bundle and Minify CSS/JS Files

Просмотров 473 месяца назад

Should you bundle and minify CSS and JS files in your production website? The answer is yes, but why? This video has the answer This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF

Fix error : 'serve image in next gen format'

9:24

Fix error : 'serve image in next gen format'

Просмотров 363 месяца назад

The error message “Serve images in next-gen formats” is often flagged by tools like Google PageSpeed Insights or Lighthouse. It indicates that your website could benefit from using modern image formats In this video, I show how to fix this error This is part of my Udemy course "Boost Your Website Performance - The Practical Guide"Enroll here: www.udemy.com/course/boost-your-website-performance-...

8:43

Reduce CLS using aspect ratio

Просмотров 503 месяца назад

Cumulative Layout Shift (CLS) measures the visual stability of a web page during loading. It quantifies unexpected layout shifts caused by moving elements. You can fix it using the CSS aspect ratio More about it in this video This is part of my Udemy course "Boost Your Website Performance - The Practical Guide"Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/...

Removing Unused CSS & JS with Chrome Coverage Tab

5:55

Removing Unused CSS & JS with Chrome Coverage Tab

Просмотров 1843 месяца назад

Suppose you have a large CSS or JS file referenced in your HTML page, but its content is not being used. Will the browser load it? Yes, it will, and this will be a total waste of time because it will delay loading the page for no reason. How can you identify these kinds of files? Use the Coverage tab in Chrome DevTools This is part of my Udemy course "Boost Your Website Performance - The Practi...

6:40

Handle incorrectly loading lazy images

Просмотров 223 месяца назад

Should you lazy load all the images on the page? This video answers this question This is part of my Udemy course "Boost Your Website Performance - The Practical Guide"Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF

Total blocking time and chrome performance tab

5:37

Total blocking time and chrome performance tab

Просмотров 513 месяца назад

What is TBT - Total blocking time? How does it affect your web page performance? How can I find which function causes long TBT? All of these questions will be answered in this video This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF