Media is too big
VIEW IN TELEGRAM
12. Integration with Notion
Jason creates a Notion integration which will allow the Slack application to send data to a Notion database. An example database is provided and can be duplicated into individual Notion accounts. A notionAPI helper method is also created.
#lesson
Jason creates a Notion integration which will allow the Slack application to send data to a Notion database. An example database is provided and can be duplicated into individual Notion accounts. A notionAPI helper method is also created.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Getting Items from Notion
Jason creates a helper method to retrieve a list of items from the Notion database. It filters based on the status of "new" so items already in progress or completed are not returned.
#lesson
Jason creates a helper method to retrieve a list of items from the Notion database. It filters based on the status of "new" so items already in progress or completed are not returned.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Saving Items to Notion
Jason creates a helper method to save items to the Notion database. The saveItem method will get called any time a new food fight message is submitted from the modal in Slack.
#lesson
Jason creates a helper method to save items to the Notion database. The saveItem method will get called any time a new food fight message is submitted from the modal in Slack.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Creating a Reminder
Jason creates a cron job to run at a set interval and posts a list of unaddressed items to the slack channel.
#lesson
Jason creates a cron job to run at a set interval and posts a list of unaddressed items to the slack channel.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Deploying to Netlify
The application code and cron job are committed and pushed to the remote GitHub repo. Netlify is configured to deploy the application from a specific branch.
#lesson
The application code and cron job are committed and pushed to the remote GitHub repo. Netlify is configured to deploy the application from a specific branch.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Wrapping Up
Jason wraps up the course by sharing some additional application ideas for ChatBot applications.
#lesson
Jason wraps up the course by sharing some additional application ideas for ChatBot applications.
#lesson
Title: Astro for Fast Website Development
Description: Use Astro, a modern web framework emphasizing minimal JavaScript, partial hydration, and UI-framework-agnostic development. Gain practical skills in state management, API usage, and server-side rendering while building a complete web application!
Link: https://frontendmasters.com/courses/astro/
Time: 3 hours, 37 minutes
Lessons: 21 / 21
Tags: #course #frontendmasters #720p
Description: Use Astro, a modern web framework emphasizing minimal JavaScript, partial hydration, and UI-framework-agnostic development. Gain practical skills in state management, API usage, and server-side rendering while building a complete web application!
Link: https://frontendmasters.com/courses/astro/
Time: 3 hours, 37 minutes
Lessons: 21 / 21
Tags: #course #frontendmasters #720p
Frontendmasters
Astro for Fast, Modern Web Development | Learn Zero-JavaScript, Partial Hydration, and UI Framework-Agnostic Dev
Use Astro, a modern web framework emphasizing minimal JavaScript, partial hydration, and UI-framework-agnostic development. Gain practical skills in state management, API usage, and server-side rendering while building a complete web application!
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jason Lengstorf begins the course by introducing key aspects of Astro, a web framework that features zero JavaScript by default, incorporates partial hydration, and maintains a UI-agnostic approach. This course is compatible with Astro versions 2.x and 3.x.
- https://github.com/learnwithjason/astro-frontend-masters
#lesson
Jason Lengstorf begins the course by introducing key aspects of Astro, a web framework that features zero JavaScript by default, incorporates partial hydration, and maintains a UI-agnostic approach. This course is compatible with Astro versions 2.x and 3.x.
- https://github.com/learnwithjason/astro-frontend-masters
#lesson
Media is too big
VIEW IN TELEGRAM
2. Astro Adoption
Jason highlights the advantages of adopting Astro, which encompass a content-focused approach, streamlined maintenance, and decreased bundle sizes. This section also includes instances of websites that have utilized the Astro framework.
#lesson
Jason highlights the advantages of adopting Astro, which encompass a content-focused approach, streamlined maintenance, and decreased bundle sizes. This section also includes instances of websites that have utilized the Astro framework.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Astro Project Setup
Jason outlines the course objectives, the tools employed, and the prerequisites for participants. Additionally, the process of creating a new Astro project is part of this segment.
#lesson
Jason outlines the course objectives, the tools employed, and the prerequisites for participants. Additionally, the process of creating a new Astro project is part of this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
4. Create an Astro Page & Layout
Jason explores Astro's approach to generating new routes and creates an "about" page using Markdown. The creation of templates, using slots as convenient placeholders for incorporating external HTML content, is also discussed in this part of the course.
#lesson
Jason explores Astro's approach to generating new routes and creates an "about" page using Markdown. The creation of templates, using slots as convenient placeholders for incorporating external HTML content, is also discussed in this part of the course.
#lesson
Media is too big
VIEW IN TELEGRAM
5. CSS Styles & Navigation
Jason demonstrates utilizing the <style> tag with or without the is:global attribute to implement global and scoped styling in Astro. Adding navigation by mapping over an array of navItems in Frontmatter is also covered in this segment.
#lesson
Jason demonstrates utilizing the <style> tag with or without the is:global attribute to implement global and scoped styling in Astro. Adding navigation by mapping over an array of navItems in Frontmatter is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Homepage Hero & Images
Jason discusses various techniques used to manage images and demonstrates importing an image from the source directory. Image optimization strategies and Astro's experimental asset support, which is currently experimental, are also discussed in this segment.
#lesson
Jason discusses various techniques used to manage images and demonstrates importing an image from the source directory. Image optimization strategies and Astro's experimental asset support, which is currently experimental, are also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
7. 404 Page & noscript tag
Jason walks through nesting layouts to enhance styling control and illustrates how to customize the 404 page. The use of the `<noscript>` tag to render HTML content in cases where JavaScript is disabled is also covered in this segment.
#lesson
Jason walks through nesting layouts to enhance styling control and illustrates how to customize the 404 page. The use of the `<noscript>` tag to render HTML content in cases where JavaScript is disabled is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Fetching & Rendering Data
Jason demonstrates the process of fetching shop item data from an API and rendering the received JSON object on the DOM. Astro components can leverage the `fetch()` function to initiate HTTP requests to APIs, utilizing the complete URL for data retrieval.
#lesson
Jason demonstrates the process of fetching shop item data from an API and rendering the received JSON object on the DOM. Astro components can leverage the `fetch()` function to initiate HTTP requests to APIs, utilizing the complete URL for data retrieval.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Sharing State with nanostores
Jason incorporates the functionality to add and remove items from the cart by employing nanostores to handle state management. Additionally, the process of tracking the cart's subtotal is demonstrated in this segment.
#lesson
Jason incorporates the functionality to add and remove items from the cart by employing nanostores to handle state management. Additionally, the process of tracking the cart's subtotal is demonstrated in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Adding React & Solid Support
Jason demonstrates implementing support for the React and Solid frameworks in Astro. Styling Solid components using CSS modules and setting up the cart.tsx file is also covered in this segment.
#lesson
Jason demonstrates implementing support for the React and Solid frameworks in Astro. Styling Solid components using CSS modules and setting up the cart.tsx file is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Implementing the Cart
Jason walks through implementing some shopping cart functionality. Displaying cart items, subtotal, total, and implementing the ability to remove items from the cart are covered in this segment.
#lesson
Jason walks through implementing some shopping cart functionality. Displaying cart items, subtotal, total, and implementing the ability to remove items from the cart are covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Microfrontend Cart Using Islands
Jason develops a React component for adding items to the cart and illustrates the concept of selective hydration using client directives. A student's question about utilizing nanostores to sustain state across multiple pages is also covered within this segment.
#lesson
Jason develops a React component for adding items to the cart and illustrates the concept of selective hydration using client directives. A student's question about utilizing nanostores to sustain state across multiple pages is also covered within this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Homepage Product Preview
Jason walks through the process of showcasing a preview of shop products on the homepage. This involves modifying the output of a previously constructed component by adding props.
#lesson
Jason walks through the process of showcasing a preview of shop products on the homepage. This involves modifying the output of a previously constructed component by adding props.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Content Collections
Jason illustrates the creation of a blog page while discussing topics like structuring, validating, and ensuring type-safety for Markdown content. This is accomplished through the utilization of content collections.
#lesson
Jason illustrates the creation of a blog page while discussing topics like structuring, validating, and ensuring type-safety for Markdown content. This is accomplished through the utilization of content collections.
#lesson