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
Media is too big
VIEW IN TELEGRAM
16. Customizing the Application Window
Steve demonstrates how to customize the application's window, including setting minimum and maximum dimensions, the ability to minimize or maximize the application, and setting a custom menu bar.
#lesson
Steve demonstrates how to customize the application's window, including setting minimum and maximum dimensions, the ability to minimize or maximize the application, and setting a custom menu bar.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Reading from the Clipboard
Steve utilizes the Electron clipboard module to implement the ability to read text from the system clipboard.
#lesson
Steve utilizes the Electron clipboard module to implement the ability to read text from the system clipboard.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Writing to Clipboard Exercise
Students are instructed to implement the ability to write data to the system clipboard from the Clipmaster application.
#lesson
Students are instructed to implement the ability to write data to the system clipboard from the Clipmaster application.
#lesson
Media is too big
VIEW IN TELEGRAM
19. Global & Keyboard Shortcuts
Steve walks through implementing keyboard shortcuts that can access the Clipmaster application regardless of whether the app is currently in focus.
#lesson
Steve walks through implementing keyboard shortcuts that can access the Clipmaster application regardless of whether the app is currently in focus.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Triggering Notifications
Steve demonstrates how to create and trigger OS desktop notifications by utilizing the Notification module.
#lesson
Steve demonstrates how to create and trigger OS desktop notifications by utilizing the Notification module.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Menubar & System Tray Apps
Steve walks through how to display an application icon in the menubar and system tray. How to add a context menu to the menubar icon is also covered in this segment.
#lesson
Steve walks through how to display an application icon in the menubar and system tray. How to add a context menu to the menubar icon is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Making a Menubar Application
Steve demonstrates utilizing the "electron-positioner" library to show and hide the Clipmaster application similar to those of a menubar app.
#lesson
Steve demonstrates utilizing the "electron-positioner" library to show and hide the Clipmaster application similar to those of a menubar app.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Persisting Data
Steve discusses persisting data with SQLite and utilizing the built-in abstraction app.getPath() to store user data in an OS appropriate file location.
- https://github.com/stevekinney/not-done
#lesson
Steve discusses persisting data with SQLite and utilizing the built-in abstraction app.getPath() to store user data in an OS appropriate file location.
- https://github.com/stevekinney/not-done
#lesson
Media is too big
VIEW IN TELEGRAM
24. Performance Considerations
Steve discusses performance considerations when combining web technologies with native desktop capabilities in Electron applications.
#lesson
Steve discusses performance considerations when combining web technologies with native desktop capabilities in Electron applications.
#lesson