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
Media is too big
VIEW IN TELEGRAM
26. Using the Markdown Plugin
Steve explores the capabilities of Vite plugins and demonstrates how they can be used to manipulate and transform different file types. They show an example of converting a markdown file into JavaScript using a Vite plugin and discuss how plugins can be used to strip out certain attributes or perform other custom transformations during the build process.
#lesson
Steve explores the capabilities of Vite plugins and demonstrates how they can be used to manipulate and transform different file types. They show an example of converting a markdown file into JavaScript using a Vite plugin and discuss how plugins can be used to strip out certain attributes or perform other custom transformations during the build process.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Wrapping Up
Steve wraps up the course by explaining the concept of returning null in JavaScript, discussing the maintainability of writing your own plugins, differentiating between micro front ends and module federation, and highlighting the benefits of using Vite as a build tool. They also share their thoughts on investing in learning the lower-level functionality of Rollup and provide closing remarks.
#lesson
Steve wraps up the course by explaining the concept of returning null in JavaScript, discussing the maintainability of writing your own plugins, differentiating between micro front ends and module federation, and highlighting the benefits of using Vite as a build tool. They also share their thoughts on investing in learning the lower-level functionality of Rollup and provide closing remarks.
#lesson
Title: Enterprise TypeScript
Description: Configure your TypeScript codebases for scalability, empowering large teams to collaborate more effectively! Learn how to set up, maintain, and evolve TypeScript libraries, manage migrations from JavaScript, and stay updated with TypeScript compiler versions. Utilize Yarn workspaces, TypeScript strictness settings, runtime type checking, and testing strategies for types.
Link: https://frontendmasters.com/courses/enterprise-typescript/
Time: 5 hours, 10 minutes
Lessons: 26 / 26
Tags: #course #frontendmasters #720p
Description: Configure your TypeScript codebases for scalability, empowering large teams to collaborate more effectively! Learn how to set up, maintain, and evolve TypeScript libraries, manage migrations from JavaScript, and stay updated with TypeScript compiler versions. Utilize Yarn workspaces, TypeScript strictness settings, runtime type checking, and testing strategies for types.
Link: https://frontendmasters.com/courses/enterprise-typescript/
Time: 5 hours, 10 minutes
Lessons: 26 / 26
Tags: #course #frontendmasters #720p
Frontendmasters
Enterprise TypeScript: Managing Large Codebases and Teams with Advanced TypeScript Techniques
Configure your TypeScript codebases for scalability, empowering large teams to collaborate more effectively! Learn how to set up, maintain, and evolve TypeScript libraries, manage migrations from JavaScript, and implement testing strategies for types.
❤1
Media is too big
VIEW IN TELEGRAM
1. Introduction
Mike North begins the course by explaining that enterprise development means addressing the challenges and indicators of working on a sizable codebase and multiple teams. The goals of the course include creating a library from scratch, migrating a JavaScript codebase to TypeScript, keeping pace with TypeScript compiler versions, understanding strictness, and using Yarn's built-in support for workspaces.
- https://www.typescript-training.com/course/enterprise-v2
#lesson
Mike North begins the course by explaining that enterprise development means addressing the challenges and indicators of working on a sizable codebase and multiple teams. The goals of the course include creating a library from scratch, migrating a JavaScript codebase to TypeScript, keeping pace with TypeScript compiler versions, understanding strictness, and using Yarn's built-in support for workspaces.
- https://www.typescript-training.com/course/enterprise-v2
#lesson
Media is too big
VIEW IN TELEGRAM
2. Setup & Course Project
Mike explains the process of installing Volta and provides instructions on cloning the workshop repository and installing the necessary dependencies using Yarn. The Slack-style project application is introduced, and the project's file structure is explained.
- https://github.com/mike-north/typescript-courses
#lesson
Mike explains the process of installing Volta and provides instructions on cloning the workshop repository and installing the necessary dependencies using Yarn. The Slack-style project application is introduced, and the project's file structure is explained.
- https://github.com/mike-north/typescript-courses
#lesson
Media is too big
VIEW IN TELEGRAM
3. .gitignore & package.json
Mike walks through setting up a TypeScript library within a project. Volta is installed, a package.json file is created, and versions for node and yarn are pinned. Mike emphasizes the importance of using the latest LTS node version and avoiding big changes that can disrupt the project.
- https://www.typescript-training.com/course/enterprise-v2/02-ts-library-zero-to-one/
#lesson
Mike walks through setting up a TypeScript library within a project. Volta is installed, a package.json file is created, and versions for node and yarn are pinned. Mike emphasizes the importance of using the latest LTS node version and avoiding big changes that can disrupt the project.
- https://www.typescript-training.com/course/enterprise-v2/02-ts-library-zero-to-one/
#lesson
Media is too big
VIEW IN TELEGRAM
4. Install TypeScript & Configure tsconfig.json
Mike installs the TypeScript compiler and creates a tsconfig.json file. The available configuration options are examined and TypeScript is configured for all files in the src directory and the .eslintrc.js file.
#lesson
Mike installs the TypeScript compiler and creates a tsconfig.json file. The available configuration options are examined and TypeScript is configured for all files in the src directory and the .eslintrc.js file.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Install ESLint
Mike installs ESLint in the project. An index.ts file is added with some default code and build command is created to generate the dist folder. ESLint is initialized in the project using the CLI.
#lesson
Mike installs ESLint in the project. An index.ts file is added with some default code and build command is created to generate the dist folder. ESLint is initialized in the project using the CLI.
#lesson