Media is too big
VIEW IN TELEGRAM
38. Starting the Planning Process
Brian shares tips for starting the planning process. Starting by getting ideas on paper helps with the writing process. Not all ideas need to come from a product manager. Projects should also be completable and have tangible milestones if there is a long timeline.
#lesson
Brian shares tips for starting the planning process. Starting by getting ideas on paper helps with the writing process. Not all ideas need to come from a product manager. Projects should also be completable and have tangible milestones if there is a long timeline.
#lesson
Media is too big
VIEW IN TELEGRAM
39. Cutlines & Roadmaps
Brian recommends defining a cutline that defines additional work that could be performed given more resources. Also, product features should not be added to a roadmap unless a product spec is created and it has been researched.
#lesson
Brian recommends defining a cutline that defines additional work that could be performed given more resources. Also, product features should not be added to a roadmap unless a product spec is created and it has been researched.
#lesson
Media is too big
VIEW IN TELEGRAM
40. Prioritizing
Brian provides two tools that are helpful when prioritizing projects. Comparing the complexity to business value splits the risk into effort and impact. The RICE method takes a more scientific approach, allowing product managers to associate a score with each task.
#lesson
Brian provides two tools that are helpful when prioritizing projects. Comparing the complexity to business value splits the risk into effort and impact. The RICE method takes a more scientific approach, allowing product managers to associate a score with each task.
#lesson
Media is too big
VIEW IN TELEGRAM
41. Planning Exercise
Students are instructed to create a prioritized roadmap for the proposed tasks along with a cutline for additional features.
- https://pm.holt.courses/lessons/planning/exercise
#lesson
Students are instructed to create a prioritized roadmap for the proposed tasks along with a cutline for additional features.
- https://pm.holt.courses/lessons/planning/exercise
#lesson
Media is too big
VIEW IN TELEGRAM
42. Wrapping Up
Brian wraps up the course with some tips for applying the product management skills learned throughout this course.
#lesson
Brian wraps up the course with some tips for applying the product management skills learned throughout this course.
#lesson
Title: Electron, v3
Description: Use Electron to build native, cross-platform desktop applications using web technologies (e.g. HTML, CSS, and JavaScript). Learn inter-process communication, UI customization, native features, and performance optimization.
Link: https://frontendmasters.com/courses/electron-v3/
Time: 3 hours, 53 minutes
Lessons: 25 / 25
Tags: #course #frontendmasters #720p
Description: Use Electron to build native, cross-platform desktop applications using web technologies (e.g. HTML, CSS, and JavaScript). Learn inter-process communication, UI customization, native features, and performance optimization.
Link: https://frontendmasters.com/courses/electron-v3/
Time: 3 hours, 53 minutes
Lessons: 25 / 25
Tags: #course #frontendmasters #720p
Frontendmasters
Build Cross-Platform Desktop Apps | Learn Electron Development
Use Electron to build native, cross-platform desktop applications using web technologies (e.g. HTML, CSS, and JavaScript). Learn inter-process communication, UI customization, native features, and performance optimization.
Media is too big
VIEW IN TELEGRAM
1. Introduction
Steve Kinney introduces the course by discussing Electron as a combination of a full Node.js and Chromium runtime. An overview of the course projects and material is also provided in this segment.
- Course setup: https://gist.github.com/stevekinney/46d6e96eb31ddb9db2b28af114d03679
- Course notes: https://gist.github.com/stevekinney/837ce9b2fa05ed88f6bc76d7d6e22efd
- Slides: https://static.frontendmasters.com/resources/2023-08-18-electron-v3/electron-v3.pdf
#lesson
Steve Kinney introduces the course by discussing Electron as a combination of a full Node.js and Chromium runtime. An overview of the course projects and material is also provided in this segment.
- Course setup: https://gist.github.com/stevekinney/46d6e96eb31ddb9db2b28af114d03679
- Course notes: https://gist.github.com/stevekinney/837ce9b2fa05ed88f6bc76d7d6e22efd
- Slides: https://static.frontendmasters.com/resources/2023-08-18-electron-v3/electron-v3.pdf
#lesson
Media is too big
VIEW IN TELEGRAM
2. Main Process & Renderer Overview
Steve discusses handling communication between the main and renderer processes. Newer versions of Node.js security differences and preload scripts are also covered in this segment.
#lesson
Steve discusses handling communication between the main and renderer processes. Newer versions of Node.js security differences and preload scripts are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Electron Code Overview
Steve discusses the Electron Fiddle tool and walks through the contents of a simple app boilerplate. Multi-platform functionality should be kept in mind, as Electron is compatible with macOS, Windows, and Linux.
#lesson
Steve discusses the Electron Fiddle tool and walks through the contents of a simple app boilerplate. Multi-platform functionality should be kept in mind, as Electron is compatible with macOS, Windows, and Linux.
#lesson
Media is too big
VIEW IN TELEGRAM
4. Project Setup
Steve walks through the contents of the Firesale app's index.ts file. Updating the index.ts to not show the application window until it's fully loaded and where the dev tools should be shown is also demonstrated in this segment.
- https://gist.github.com/stevekinney/46d6e96eb31ddb9db2b28af114d03679
#lesson
Steve walks through the contents of the Firesale app's index.ts file. Updating the index.ts to not show the application window until it's fully loaded and where the dev tools should be shown is also demonstrated in this segment.
- https://gist.github.com/stevekinney/46d6e96eb31ddb9db2b28af114d03679
#lesson
Media is too big
VIEW IN TELEGRAM
5. File System Dialog & Reading Files
Steve demonstrates triggering a file system dialog by utilizing Electron's dialog module. How to restrict the allowed file types and reading files using fs/promises is also covered in this segment.
#lesson
Steve demonstrates triggering a file system dialog by utilizing Electron's dialog module. How to restrict the allowed file types and reading files using fs/promises is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Sending File to the Renderer
Steve walks through connecting the main process to the renderer processes to allow the chosen markdown file to be rendered to the DOM. The ipcRenderer module is used to send synchronous and asynchronous messages from the render process to the main process.
#lesson
Steve walks through connecting the main process to the renderer processes to allow the chosen markdown file to be rendered to the DOM. The ipcRenderer module is used to send synchronous and asynchronous messages from the render process to the main process.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Sending Message to the Main Process
Steve implements the ability to send a message from the renderer process to the main process using the contextBridge renderer process module. Function values bound through the contextBridge are proxied through Electron to ensure that contexts remain isolated.
#lesson
Steve implements the ability to send a message from the renderer process to the main process using the contextBridge renderer process module. Function values bound through the contextBridge are proxied through Electron to ensure that contexts remain isolated.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Exporting the HTML Exercise
Students are instructed to implement the button that exports HTML and to trigger a save dialog that is scoped to allow only HTML files. A student's question regarding the use of ipcRender in the preload script and a walk through of the exporting HTML exercise solution are also covered in this segment.
#lesson
Students are instructed to implement the button that exports HTML and to trigger a save dialog that is scoped to allow only HTML files. A student's question regarding the use of ipcRender in the preload script and a walk through of the exporting HTML exercise solution are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Save File to the File System
Steve demonstrates other applications with UI nuances involving saving files. Implementing the ability to save a file and connecting to the save file button is also covered in this segment.
#lesson
Steve demonstrates other applications with UI nuances involving saving files. Implementing the ability to save a file and connecting to the save file button is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Keeping Track of the Current File
Steve discusses getting and setting the currently accessed file to allow the implementation of UI features for a more natural OS experience. Utilizing the current file to display the pathname and icon of the file in the window's title bar is also demonstrated in this segment.
#lesson
Steve discusses getting and setting the currently accessed file to allow the implementation of UI features for a more natural OS experience. Utilizing the current file to display the pathname and icon of the file in the window's title bar is also demonstrated in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Saving Unsaved File Changes
Steve walks through comparing the current file to the previously saved file to detect if there are unsaved changes. The save status of the file can then be utilized for other UI features, such as triggering a save dialog when a user closes the window.
#lesson
Steve walks through comparing the current file to the previously saved file to detect if there are unsaved changes. The save status of the file can then be utilized for other UI features, such as triggering a save dialog when a user closes the window.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Open in File System & Default Applications
Steve demonstrates utilizing Electron's shell library to open a file in its default application and show the file in the operating system's file manager.
#lesson
Steve demonstrates utilizing Electron's shell library to open a file in its default application and show the file in the operating system's file manager.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Custom Application Menus
Steve walks through utilizing the Menu module to create custom application menus. Menu items can be defined individually or pulled from a template array using Menu.buildFromTemplate().
#lesson
Steve walks through utilizing the Menu module to create custom application menus. Menu items can be defined individually or pulled from a template array using Menu.buildFromTemplate().
#lesson
Media is too big
VIEW IN TELEGRAM
14. Edit Menu Exercise
Students are instructed to explore Electron's available menu roles and enable an Edit menu. Creating keyboard shortcuts by adding an accelerator to the menu item is also covered in this segment.
#lesson
Students are instructed to explore Electron's available menu roles and enable an Edit menu. Creating keyboard shortcuts by adding an accelerator to the menu item is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Clipmaster Overview
Steve discusses configuring Electron applications to support other frameworks such as React.js and walks through the starting content of the Clipmaster repo.
- https://github.com/stevekinney/clipmaster-v3
#lesson
Steve discusses configuring Electron applications to support other frameworks such as React.js and walks through the starting content of the Clipmaster repo.
- https://github.com/stevekinney/clipmaster-v3
#lesson