Media is too big
VIEW IN TELEGRAM
15. Cache Persistence & Revalidation Tags
Scott implements persistent caching for the RSVPs, events, and attendees. A third-party module that leverages React's caching along with memoization is imported and used as a wrapper just like the cache function. Revalidation tags are added so the cache can be revalidated at a later time.
#lesson
Scott implements persistent caching for the RSVPs, events, and attendees. A third-party module that leverages React's caching along with memoization is imported and used as a wrapper just like the cache function. Revalidation tags are added so the cache can be revalidated at a later time.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Suspense & Errors
Scott creates loading spinners and handles page-specific errors. A loading spinner or any other UI element can be displayed by adding a loading.tsx file to the route. The same pattern can be used to handle errors with a errors.tsx file. The current code can be found on the "step/3" branch.
- https://clumsy-humor-894.notion.site/5-Suspense-and-Errors-803721679f594cefb241894f85aa0b9a
#lesson
Scott creates loading spinners and handles page-specific errors. A loading spinner or any other UI element can be displayed by adding a loading.tsx file to the route. The same pattern can be used to handle errors with a errors.tsx file. The current code can be found on the "step/3" branch.
- https://clumsy-humor-894.notion.site/5-Suspense-and-Errors-803721679f594cefb241894f85aa0b9a
#lesson
Media is too big
VIEW IN TELEGRAM
17. Active Routes
Scott enhances the application's UX by implementing active routes. This will highlight the current navigation item using the usePathname hook and applying active classes.
- https://clumsy-humor-894.notion.site/6-Active-route-c093edcf677d448586be1710edeb5a5f
#lesson
Scott enhances the application's UX by implementing active routes. This will highlight the current navigation item using the usePathname hook and applying active classes.
- https://clumsy-humor-894.notion.site/6-Active-route-c093edcf677d448586be1710edeb5a5f
#lesson
Media is too big
VIEW IN TELEGRAM
18. Route Protection
Scott explains how middleware can be used to add route protection to the application. Middleware functions run on the edge, executing before the server processes cached content or matches routes. This allows the user to be redirected to the sign-in page if they aren't authenticated. Several other examples of middleware are shared, including conditional routing, managing cookies and headers, and CORS.
- https://clumsy-humor-894.notion.site/7-Protect-Routes-with-Middleware-2824779bed824fea8fb96a665fca2253
#lesson
Scott explains how middleware can be used to add route protection to the application. Middleware functions run on the edge, executing before the server processes cached content or matches routes. This allows the user to be redirected to the sign-in page if they aren't authenticated. Several other examples of middleware are shared, including conditional routing, managing cookies and headers, and CORS.
- https://clumsy-humor-894.notion.site/7-Protect-Routes-with-Middleware-2824779bed824fea8fb96a665fca2253
#lesson
Media is too big
VIEW IN TELEGRAM
19. Protecting Routes with Middleware
Scott adds a middleware function to the application to protect the dashboard and root routes. For the dashboard route, the middleware will ensure the user is authenticated; otherwise, it redirects them to the sign-in page. Since there is no page for the root route, the middleware redirects to the dashboard. The current code can be found on the "step/4" branch
- https://clumsy-humor-894.notion.site/7a-Implementation-fa49f6ecd0574c6197796dfec3cbeb45
#lesson
Scott adds a middleware function to the application to protect the dashboard and root routes. For the dashboard route, the middleware will ensure the user is authenticated; otherwise, it redirects them to the sign-in page. Since there is no page for the root route, the middleware redirects to the dashboard. The current code can be found on the "step/4" branch
- https://clumsy-humor-894.notion.site/7a-Implementation-fa49f6ecd0574c6197796dfec3cbeb45
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
20. Non-Form Server Actions
Scott discusses use cases for server actions that don't involve forms. Server actions can be integrated into other parts of an application, such as event handlers and React hooks. This allows for dynamic server-side operations responding to user interactions or lifecycle events.
- https://clumsy-humor-894.notion.site/8-Non-form-Server-Actions-be544d2769424bed85fc0f190f16cf38
#lesson
Scott discusses use cases for server actions that don't involve forms. Server actions can be integrated into other parts of an application, such as event handlers and React hooks. This allows for dynamic server-side operations responding to user interactions or lifecycle events.
- https://clumsy-humor-894.notion.site/8-Non-form-Server-Actions-be544d2769424bed85fc0f190f16cf38
#lesson
Media is too big
VIEW IN TELEGRAM
21. useTransition & Non-Blocking Updates
Scott codes a server action to create a new event. However, since the data is cached, a hard reload is required to view the newly created event. To fix this, the revalidateTag method is called to clear the events cache and immediately display the event. The current code can be found on the "step/5" branch
- https://clumsy-humor-894.notion.site/8a-Implementation-a415196d4d51459bb0185b769012b585
#lesson
Scott codes a server action to create a new event. However, since the data is cached, a hard reload is required to view the newly created event. To fix this, the revalidateTag method is called to clear the events cache and immediately display the event. The current code can be found on the "step/5" branch
- https://clumsy-humor-894.notion.site/8a-Implementation-a415196d4d51459bb0185b769012b585
#lesson
Media is too big
VIEW IN TELEGRAM
22. Server Actions Q&A
Scott spends a few minutes answering questions about server actions. Questions include mixing tRPC and server actions and suspense vs. useTransition in React 19.
#lesson
Scott spends a few minutes answering questions about server actions. Questions include mixing tRPC and server actions and suspense vs. useTransition in React 19.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
23. Cache & Revalidation Strategies
Scott discusses additional strategies for revalidating cache manually and some of the ways Next.js will revalidate the cache for you.
- https://clumsy-humor-894.notion.site/9-Cache-Revalidation-e138317ab91440a1be6acd2ce52a6c50
#lesson
Scott discusses additional strategies for revalidating cache manually and some of the ways Next.js will revalidate the cache for you.
- https://clumsy-humor-894.notion.site/9-Cache-Revalidation-e138317ab91440a1be6acd2ce52a6c50
#lesson
Media is too big
VIEW IN TELEGRAM
24. Events Page
Scott implements the events page and creates a route to display an event by ID. The individual event page uses the params property to access the idea and load the details for the event. The behavior of the loading component with nested routes is also demonstrated in this lesson. The final code can be found on the "step/6" branch.
- https://clumsy-humor-894.notion.site/10-Finish-the-app-a8ee0401c6cc440f83ac4a5c29e9e863
#lesson
Scott implements the events page and creates a route to display an event by ID. The individual event page uses the params property to access the idea and load the details for the event. The behavior of the loading component with nested routes is also demonstrated in this lesson. The final code can be found on the "step/6" branch.
- https://clumsy-humor-894.notion.site/10-Finish-the-app-a8ee0401c6cc440f83ac4a5c29e9e863
#lesson
Media is too big
VIEW IN TELEGRAM
25. Wrapping Up
Scott wraps up the course by sharing some best practices and answering a question about strategies for limiting bundle size. He also shares some next steps and tips for getting better at building with Next.js.
#lesson
Scott wraps up the course by sharing some best practices and answering a question about strategies for limiting bundle size. He also shares some next steps and tips for getting better at building with Next.js.
#lesson
Title: Professional JS: Features You Need to Know
Description: Upgrade your JavaScript knowledge with post-ES6 features. Learn modern syntax, async programming, and advanced JavaScript features.
Link: https://frontendmasters.com/courses/pro-js-features/
Time: 4 hours, 33 minutes
Lessons: 40 / 40
Tags: #course #frontendmasters #720p
Description: Upgrade your JavaScript knowledge with post-ES6 features. Learn modern syntax, async programming, and advanced JavaScript features.
Link: https://frontendmasters.com/courses/pro-js-features/
Time: 4 hours, 33 minutes
Lessons: 40 / 40
Tags: #course #frontendmasters #720p
Frontendmasters
Advanced JavaScript: ES6+ Features, Async Programming & Modern Techniques
Upgrade your JavaScript knowledge with post-ES6 features. Learn modern syntax, async programming, and advanced JavaScript features.
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Maximiliano Firtman introduces the course by explaining that the course will cover the latest version of ECMAScript, and will provide a recap of ECMAScript 6 (ES6). The course will also dive into new features and enhancements in JavaScript, organized by categories such as language enhancement, array and collections, async programming, and advanced techniques.
- https://firtman.github.io/projs/
- https://firtman.github.io/projs/slides.pdf
#lesson
Maximiliano Firtman introduces the course by explaining that the course will cover the latest version of ECMAScript, and will provide a recap of ECMAScript 6 (ES6). The course will also dive into new features and enhancements in JavaScript, organized by categories such as language enhancement, array and collections, async programming, and advanced techniques.
- https://firtman.github.io/projs/
- https://firtman.github.io/projs/slides.pdf
#lesson
❤1
Media is too big
VIEW IN TELEGRAM
2. History of JavaScript
Maximiliano discusses the concept of JavaScript versions and how they differ from other programming languages. He provides a brief history of JavaScript and its evolution, including the introduction of ECMAScript and the release of different versions over the years.
#lesson
Maximiliano discusses the concept of JavaScript versions and how they differ from other programming languages. He provides a brief history of JavaScript and its evolution, including the introduction of ECMAScript and the release of different versions over the years.
#lesson
Media is too big
VIEW IN TELEGRAM
3. ECMAScript & New Features
Maximiliano explains the relationship between ECMAScript and JavaScript and discusses how different engines, such as browsers and Node, determine which version of ECMAScript to execute. He also provides resources to check ECMAScript compatibility with browsers and Node.
- https://firtman.github.io/projs/slides.pdf
- https://firtman.github.io/projs/
#lesson
Maximiliano explains the relationship between ECMAScript and JavaScript and discusses how different engines, such as browsers and Node, determine which version of ECMAScript to execute. He also provides resources to check ECMAScript compatibility with browsers and Node.
- https://firtman.github.io/projs/slides.pdf
- https://firtman.github.io/projs/
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
4. Technical Committee 39 Process
Maximiliano explains the process of proposing and implementing changes to the JavaScript language. He discusses the stages of the Technical Committee process, from the initial proposal (stage 0) to the final approval and inclusion in a new version of ECMAScript (stage 4).
#lesson
Maximiliano explains the process of proposing and implementing changes to the JavaScript language. He discusses the stages of the Technical Committee process, from the initial proposal (stage 0) to the final approval and inclusion in a new version of ECMAScript (stage 4).
#lesson
Media is too big
VIEW IN TELEGRAM
5. Using Modern JavaScript Features
Maximiliano discusses how the language versions are named and how they differ from platform APIs. He also introduces the concepts of polyfills and transpilers, explaining how they can be used to write modern JavaScript code and ensure compatibility with older versions of the language.
#lesson
Maximiliano discusses how the language versions are named and how they differ from platform APIs. He also introduces the concepts of polyfills and transpilers, explaining how they can be used to write modern JavaScript code and ensure compatibility with older versions of the language.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
6. JavaScript Features Q&A
Maximiliano answers student questions regarding the relationship between ECMAScript and TypeScript and how quickly TypeScript implements new features introduced by ECMAScript. He also addresses questions of whether TypeScript will become the standard for web development and the decision-making process for choosing the target version of ECMAScript when transpiling code.
#lesson
Maximiliano answers student questions regarding the relationship between ECMAScript and TypeScript and how quickly TypeScript implements new features introduced by ECMAScript. He also addresses questions of whether TypeScript will become the standard for web development and the decision-making process for choosing the target version of ECMAScript when transpiling code.
#lesson
Media is too big
VIEW IN TELEGRAM
7. ES Modules
Maximiliano provides a recap of ES6 features, including the class syntax, block code variable definitions, ES modules, arrow functions, promises, and more. He also discusses how modules work as isolated containers, how to import and export items from modules, and how to enable modules in different platforms such as the browser and Node.js.
- https://firtman.github.io/projs/
- https://firtman.github.io/projs/slides.pdf
#lesson
Maximiliano provides a recap of ES6 features, including the class syntax, block code variable definitions, ES modules, arrow functions, promises, and more. He also discusses how modules work as isolated containers, how to import and export items from modules, and how to enable modules in different platforms such as the browser and Node.js.
- https://firtman.github.io/projs/
- https://firtman.github.io/projs/slides.pdf
#lesson
Media is too big
VIEW IN TELEGRAM
8. ES Modules Import Tree
Maximiliano creates a simple example where he imports three modules, and each module logs a message to the console. He explains the concept of module execution order and how modules are only executed once, even if they are imported multiple times.
#lesson
Maximiliano creates a simple example where he imports three modules, and each module logs a message to the console. He explains the concept of module execution order and how modules are only executed once, even if they are imported multiple times.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
9. var, let & const Scope
Maximiliano demonstrates how to use variables and scoping in JavaScript using the provided editor. He explains the differences between global scope, function scope, and block scope, and shows how to declare variables using the `var`, `let`, and `const` keywords.
- https://firtman.github.io/projs/
#lesson
Maximiliano demonstrates how to use variables and scoping in JavaScript using the provided editor. He explains the differences between global scope, function scope, and block scope, and shows how to declare variables using the `var`, `let`, and `const` keywords.
- https://firtman.github.io/projs/
#lesson