Media is too big
VIEW IN TELEGRAM
5. Import CSS & CSS Modules
Steve discusses different options for pulling in CSS in a Vite project and how Vite resolves relative paths and bundles the CSS. They also demonstrate how to import CSS in JavaScript and explain how it can be useful for splitting out stylesheets. CSS modules and how to use them to scope styles to specific files is also covered in this segment.
- https://vite-workshop.vercel.app/css
#lesson
Steve discusses different options for pulling in CSS in a Vite project and how Vite resolves relative paths and bundles the CSS. They also demonstrate how to import CSS in JavaScript and explain how it can be useful for splitting out stylesheets. CSS modules and how to use them to scope styles to specific files is also covered in this segment.
- https://vite-workshop.vercel.app/css
#lesson
Media is too big
VIEW IN TELEGRAM
6. Build CSS Modules Exercise
Steve guides students through the process of creating a dynamically loaded banner using CSS modules. Students are encouraged to experiment with different approaches, such as using dynamic imports and different file extensions, to observe the impact on the build process and network tab. The goal is to develop an intuitive understanding of how code structure affects performance and to follow coding standards that result in performant JavaScript.
#lesson
Steve guides students through the process of creating a dynamically loaded banner using CSS modules. Students are encouraged to experiment with different approaches, such as using dynamic imports and different file extensions, to observe the impact on the build process and network tab. The goal is to develop an intuitive understanding of how code structure affects performance and to follow coding standards that result in performant JavaScript.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Configure PostCSS & CSS Preprocessors
Steve discusses various ways to process CSS using post-CSS. They demonstrate how to set up post-CSS and configure it by adding plugins such as Tailwind, CSS Nano, and Auto Prefixer. They also show how to use SASS or SCSS in a Vite project by simply installing the SASS dependency.
- https://vite-workshop.vercel.app/postcss
#lesson
Steve discusses various ways to process CSS using post-CSS. They demonstrate how to set up post-CSS and configure it by adding plugins such as Tailwind, CSS Nano, and Auto Prefixer. They also show how to use SASS or SCSS in a Vite project by simply installing the SASS dependency.
- https://vite-workshop.vercel.app/postcss
#lesson
Media is too big
VIEW IN TELEGRAM
8. Configure TypeScript
Steve explains that TypeScript is natively supported in Vite by simply changing the file extension to .ts. They also mention that Vite does not perform type checking, but tools like VS Code can handle that in the editor. They recommend running the TypeScript compiler separately before building to catch any compilation errors.
- https://vite-workshop.vercel.app/typescript
#lesson
Steve explains that TypeScript is natively supported in Vite by simply changing the file extension to .ts. They also mention that Vite does not perform type checking, but tools like VS Code can handle that in the editor. They recommend running the TypeScript compiler separately before building to catch any compilation errors.
- https://vite-workshop.vercel.app/typescript
#lesson
Media is too big
VIEW IN TELEGRAM
9. Vite Templates & Setup React
Steve demonstrates how to use templates in Vite to quickly set up a project with a specific framework, such as React. They explain how to configure Vite to support React by adding the "plugin-react" plugin and also mention other available plugins and resources for using Vite with different frameworks and tools.
#lesson
Steve demonstrates how to use templates in Vite to quickly set up a project with a specific framework, such as React. They explain how to configure Vite to support React by adding the "plugin-react" plugin and also mention other available plugins and resources for using Vite with different frameworks and tools.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Static Assets
Steve discusses how to handle static assets in Vite, By default, anything in the public directory is copied over as is, while anything in the source directory can be accessed. They demonstrate how to import an image from the source directory and how Vite automatically adds a hash to the image URL to bust the cache if the image changes.
- https://vite-workshop.vercel.app/static-assets
#lesson
Steve discusses how to handle static assets in Vite, By default, anything in the public directory is copied over as is, while anything in the source directory can be accessed. They demonstrate how to import an image from the source directory and how Vite automatically adds a hash to the image URL to bust the cache if the image changes.
- https://vite-workshop.vercel.app/static-assets
#lesson
Media is too big
VIEW IN TELEGRAM
11. Image Loading Exercise
Steve asks students to grab a small image (favicon) and a large image and import them into their project. The learner is then asked to observe the differences in how Vite handles the two images. Vite will inline the small image, converting it into a base64 encoded image and including it directly in the file, while the large image will be split, hashed, and cached automatically.
#lesson
Steve asks students to grab a small image (favicon) and a large image and import them into their project. The learner is then asked to observe the differences in how Vite handles the two images. Vite will inline the small image, converting it into a base64 encoded image and including it directly in the file, while the large image will be split, hashed, and cached automatically.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Vite Image Tools
Steve introduces Vite Image Tools and guides the students through the initial setup process, including installing the Vite Image Tools plugin and creating a configuration file. They also mention that there might be some issues with M1 MacBook users and provide a command to fix it if necessary.
- https://vite-workshop.vercel.app/image-tools
#lesson
Steve introduces Vite Image Tools and guides the students through the initial setup process, including installing the Vite Image Tools plugin and creating a configuration file. They also mention that there might be some issues with M1 MacBook users and provide a command to fix it if necessary.
- https://vite-workshop.vercel.app/image-tools
#lesson
Media is too big
VIEW IN TELEGRAM
13. Directives
Steve demonstrates the ability to resize images, change file formats, and access image metadata using various image tool directives. They also mention other query parameters available in Vite, such as importing raw text or CSS files. The lesson concludes by discussing the limitations of dynamic sources in Vite and mentioning a plugin that can provide more flexibility.
#lesson
Steve demonstrates the ability to resize images, change file formats, and access image metadata using various image tool directives. They also mention other query parameters available in Vite, such as importing raw text or CSS files. The lesson concludes by discussing the limitations of dynamic sources in Vite and mentioning a plugin that can provide more flexibility.
#lesson
Media is too big
VIEW IN TELEGRAM
14. import.iss.oneta
Steve discusses how import.iss.oneta can be used to access environment variables and provides examples of how to use them in development and production environments. They also demonstrate how to add environment files and customize environment variables in Vite. Additionally, they address how to handle import.iss.oneta in TypeScript and provide a solution for accessing environment variables in a TypeScript project.
#lesson
Steve discusses how import.iss.oneta can be used to access environment variables and provides examples of how to use them in development and production environments. They also demonstrate how to add environment files and customize environment variables in Vite. Additionally, they address how to handle import.iss.oneta in TypeScript and provide a solution for accessing environment variables in a TypeScript project.
#lesson
Media is too big
VIEW IN TELEGRAM
15. JSON Named Exports
Steve explains how Vite allows developers to import JSON files in Node and treat them like JavaScript objects. They discuss the limitations of using common JS and how Vite solves the problem by enabling tree shaking, which allows developers to selectively import only the necessary fields from a JSON file, reducing the bundle size.
#lesson
Steve explains how Vite allows developers to import JSON files in Node and treat them like JavaScript objects. They discuss the limitations of using common JS and how Vite solves the problem by enabling tree shaking, which allows developers to selectively import only the necessary fields from a JSON file, reducing the bundle size.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Glob Imports
Steve demonstrates how to use glob imports to match and import multiple files that match a specific pattern, such as importing all SVG files from a folder. They also show how to use eager loading to resolve all the promises at once, making it easier to work with the imported files.
- https://vite-workshop.vercel.app/glob-import
#lesson
Steve demonstrates how to use glob imports to match and import multiple files that match a specific pattern, such as importing all SVG files from a folder. They also show how to use eager loading to resolve all the promises at once, making it easier to work with the imported files.
- https://vite-workshop.vercel.app/glob-import
#lesson
Media is too big
VIEW IN TELEGRAM
17. Glob Imports Exercise
Steve explains how to use the import.iss.oneta.glob function to import and iterate over JSON files in a directory. The goal is to generate tests based on the JSON data and ensure that the snapshots match. Various use cases for import.iss.oneta.glob, such as using it for fixture data or iterating over files based on the file system are also discussed in this segment.
#lesson
Steve explains how to use the import.iss.oneta.glob function to import and iterate over JSON files in a directory. The goal is to generate tests based on the JSON data and ensure that the snapshots match. Various use cases for import.iss.oneta.glob, such as using it for fixture data or iterating over files based on the file system are also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Library Mode
Steve explains that Vite is great for creating open-source libraries, especially if you're working with TypeScript or different file types. How to configure Vite to build a library, including specifying the entry point, setting the library name, and configuring external dependencies, is demonstrated. They also show how to optimize the library build by excluding unnecessary dependencies like React.
- https://vite-workshop.vercel.app/library-mode
#lesson
Steve explains that Vite is great for creating open-source libraries, especially if you're working with TypeScript or different file types. How to configure Vite to build a library, including specifying the entry point, setting the library name, and configuring external dependencies, is demonstrated. They also show how to optimize the library build by excluding unnecessary dependencies like React.
- https://vite-workshop.vercel.app/library-mode
#lesson
Media is too big
VIEW IN TELEGRAM
19. Generating Declaration Files
Steve explains how to use vite-plugin-dts to generate declaration files for a TypeScript library. They discuss various options available with the plugin and show how to configure the Vite build options to exclude unnecessary files from the library build. Additionally, they mention the possibility of having multiple Vite configurations for different projects.
#lesson
Steve explains how to use vite-plugin-dts to generate declaration files for a TypeScript library. They discuss various options available with the plugin and show how to configure the Vite build options to exclude unnecessary files from the library build. Additionally, they mention the possibility of having multiple Vite configurations for different projects.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Injecting CSS
Steve explains how to inline CSS styles in a Vite project using a Vite plugin called "vite-plugin-lib-inject-css". They demonstrate how to install the plugin and import it into the project. By doing this, the CSS styles will be bundled together with the module, allowing users to easily import the module and automatically get the associated styles without any additional setup.
#lesson
Steve explains how to inline CSS styles in a Vite project using a Vite plugin called "vite-plugin-lib-inject-css". They demonstrate how to install the plugin and import it into the project. By doing this, the CSS styles will be bundled together with the module, allowing users to easily import the module and automatically get the associated styles without any additional setup.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Using the Library
Steve walks through the process of adding additional information to the package.json file, including specifying the main file for CommonJS and ES modules, and pointing to the location of the types. They also discuss how to use the library in another Vite application.
#lesson
Steve walks through the process of adding additional information to the package.json file, including specifying the main file for CommonJS and ES modules, and pointing to the location of the types. They also discuss how to use the library in another Vite application.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Module Federation
Steve delves into the implementation of Module Federation using Vite. The process of building a library, hosting it on the internet, and allowing consuming apps to fetch and use the module at runtime is covered in this segment.
- https://vite-workshop.vercel.app/module-federation
#lesson
Steve delves into the implementation of Module Federation using Vite. The process of building a library, hosting it on the internet, and allowing consuming apps to fetch and use the module at runtime is covered in this segment.
- https://vite-workshop.vercel.app/module-federation
#lesson
Media is too big
VIEW IN TELEGRAM
23. Module Federation Q&A
Steve explores the use of module federation, discussing the possibility of assigning a function to the exposed object and experimenting with programmatic manipulation. Practical demonstrations and addressing TypeScript-related issues are also covered in this segment.
#lesson
Steve explores the use of module federation, discussing the possibility of assigning a function to the exposed object and experimenting with programmatic manipulation. Practical demonstrations and addressing TypeScript-related issues are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Virtual Modules
Steve discusses that a Vite plugin is essentially a function that conforms to a specific shape and can be used to modify the code during the build process. They also mention that there are various hooks available in the plugin development process and provide examples of how plugins can be used to perform specific tasks, such as parsing YAML files or creating virtual modules.
- https://vite-workshop.vercel.app/plugins
#lesson
Steve discusses that a Vite plugin is essentially a function that conforms to a specific shape and can be used to modify the code during the build process. They also mention that there are various hooks available in the plugin development process and provide examples of how plugins can be used to perform specific tasks, such as parsing YAML files or creating virtual modules.
- https://vite-workshop.vercel.app/plugins
#lesson
Media is too big
VIEW IN TELEGRAM
25. Building a Markdown Plugin
Steve demonstrates how to create a Vite plugin that transforms Markdown files into HTML. They install the "markdown-it" package, create a helper function to read and render Markdown files, and then create the plugin function that intercepts the loading of Markdown files and returns the transformed HTML. They also mention that this technique can be extended to perform other custom transformations on files.
#lesson
Steve demonstrates how to create a Vite plugin that transforms Markdown files into HTML. They install the "markdown-it" package, create a helper function to read and render Markdown files, and then create the plugin function that intercepts the loading of Markdown files and returns the transformed HTML. They also mention that this technique can be extended to perform other custom transformations on files.
#lesson