Electron learning
![](Electron-1_1.png)
1. Electron for Desktop Apps The Complete Developer's Guide
![](ElectronA_1.png)
- 01 - Basics of Electron
- 001 How to Get Help
- 002 Course Resources.html
- 002 diagrams.zip
- 003 Join Our Community!.html
- 004 Why Does Electron Exist
- 005 How Does Electron Work
- 006 History of Electron
- 02 - Handling Electron Projects
- 001 App Overview
- 002 Getting Started
- 003 Starting and Stopping Electron
- 004 Loading HTML Docs
- 005 Selecting Videos
- 006 Sample Video - Download Me!.html
- 007 Reading File Details
- 008 Introduction to FFMPEG
- 009 OSX FFMPEG Installation
- 010 Windows FFMPEG Setup.html
- 011 Require Statements in the Browser
- 012 IPC Communication
- 013 Video Duration with FFProbe
- 014 Receiving IPC Events
- 015 Wrapup
- 03 - Handling Menu Bars
- 001 App Overview
- 002 App Boilerplate
- 003 Creating the MainWindow
- 004 Constructing Menu Bars
- 005 Menu Bar Gotchas
- 006 On Menu Click Functionality
- 007 Cross Platform Hotkeys
- 008 Creating Separate Windows
- 009 Another Electron Gotcha
- 010 Adding Polish to Electron
- 011 Restoring Developer Tools
- 012 IPC Between Windows
- 013 Garbage Collection with Electron
- 014 Role Shortcuts
- 015 Your Turn - Clearing Lists
- 016 Solution and Wrapup
- 04 - Status Tray Applications
- 001 App Boilerplate
- 002 What's This React Code
- 003 BrowserWindow vs Tray
- 004 BrowserWindow Config
- 005 Creating Tray Icons
- 006 Toggling BrowserWindow Visibility
- 007 Detecting Visibility
- 008 The Positioning Bounds System
- 009 Setting Position with Bounds
- 010 Positioning of Windows
- 011 Object Oriented Programming with Electron
- 012 Basics of ES6 Classes
- 013 Subclassing
- 014 The TimerTray Subclass
- 015 Finishing TimerTray Refactor
- 016 Setting Tooltips
- 017 More on Garbage Collection
- 018 Building Context Menus
- 019 Controlling Window Focus
- 020 Hiding Dock Icons
- 021 MainWindow Class
- 022 IPC Between React and Electron
- 023 Displaying Text on the Tray
- 024 Background Throttling
- 05 - Combining Electron with React and Redux
- 001 App Overview
- 002 App Challenges
- 003 BrowserWindow Creation
- 004 Starting up Electron with Webpack
- 005 Overview of React and Redux
- 006 Receiving a List of Videos
- 007 Video Metadata
- 008 Handling Async Bulk Operations with Promises
- 009 Fetching Metadata in Promises
- 010 Refactoring for Multiple Videos
- 011 Wrapup on Metadata
- 012 Output Paths
- 013 Batch Video Conversion
- 014 Handling Conversion Completion
- 015 Detecting Conversion Progress
- 016 Opening Folders with Shell
- 017 Wrapup
- 06 - Extras
![](ElectronA0_1.png)
![](ElectronA1_1.png)
![](ElectronA2_1.png)
![](ElectronA3_1.png)
![](ElectronA4_1.png)
![](ElectronA5_1.png)
![](ElectronA6_1.png)
![](ElectronA7_1.png)
![](ElectronA8_1.png)
![](ElectronA9_1.png)
![](ElectronA10_1.png)
![](ElectronA11_1.png)
![](ElectronA12_1.png)
![](ElectronA13_1.png)
![](ElectronA14_1.png)
![](ElectronA15_1.png)
![](ElectronA16_1.png)
![](ElectronA17_1.png)
![](ElectronA18_1.png)
![](ElectronA19_1.png)
![](ElectronA20_1.png)
![](ElectronA21_1.png)
![](ElectronA22_1.png)
![](ElectronA23_1.png)
![](ElectronA24_1.png)
![](ElectronA25_1.png)
![](ElectronA26_1.png)
![](ElectronA27_1.png)
![](ElectronA28_1.png)
![](ElectronA29_1.png)
![](ElectronA30_1.png)
![](ElectronA31_1.png)
![](ElectronA32_1.png)
![](ElectronA33_1.png)
![](ElectronA34_1.png)
![](ElectronA35_1.png)
![](ElectronA36_1.png)
![](ElectronA37_1.png)
![](ElectronA38_1.png)
![](ElectronA39_1.png)
![](ElectronA40_1.png)
![](ElectronA41_1.png)
![](ElectronA42_1.png)
![](ElectronA43_1.png)
![](ElectronA44_1.png)
![](ElectronA45_1.png)
![](ElectronA46_1.png)
![](ElectronA47_1.png)
![](ElectronA48_1.png)
![](ElectronA49_1.png)
![](ElectronA50_1.png)
![](ElectronA51_1.png)
![](ElectronA52_1.png)
![](ElectronA53_1.png)
![](ElectronA54_1.png)
![](ElectronA55_1.png)
![](ElectronA56_1.png)
![](ElectronA57_1.png)
![](ElectronA58_1.png)
![](ElectronA59_1.png)
![](ElectronA60_1.png)
![](ElectronA61_1.png)
![](ElectronA62_1.png)
![](ElectronA63_1.png)
![](ElectronA64_1.png)
![](ElectronA65_1.png)
![](ElectronA66_1.png)
![](ElectronA67_1.png)
![](ElectronA68_1.png)
![](ElectronA69_1.png)
![](ElectronA70_1.png)
![](ElectronA71_1.png)
![](ElectronA72_1.png)
![](ElectronA73_1.png)
2. Electron From Scratch
![](ElectronB1_1.png)
- 001. welcome-to-the-course
- 002. electron-what-why
- 003. how-electron-works
- 004. environment-code-repo
- 005. project-intro
- 006. setup-browserwindow
- 007. loading-a-window-file-adding-an-icon
- 008. environment-platform-check
- 009. using-nodemon-with-electron
- 010. creating-a-menu-template
- 011. menu-global-shortcuts
- 012. menu-roles
- 013. open-window-from-menu
- 014. creating-the-interface
- 015. renderer-node-integration
- 016. ipc-communication
- 017. implementing-imagemin-plugins
- 018. send-events-to-renderer
- 019. creating-log-files
- 020. package-test-our-app
- 021. project-intro
- 022. boilerplate-setup
- 023. template-assets-setup
- 024. creating-the-interface
- 025. static-system-stats
- 026. interval-dynamic-system-stats
- 027. progress-bar-cpu-overload
- 028. notifications-api
- 029. notification-timing
- 030. creating-a-store
- 031. set-default-settings-to-renderer
- 032. saving-data-to-our-store-file
- 033. use-settings-data-in-monitor
- 034. creating-a-tray-icon
- 035. tray-context-menu
- 036. nav-toggle-menu-item
- 037. mainwindow-class
- 038. apptray-class
- 039. package-test-our-app
- 040. project-intro
- 041. react-electron-boilerplate-setup
- 042. log-state-table
- 043. logitem-component
- 044. formatting-dates-with-moment
- 045. addlogitem-component
- 046. adding-a-log-ui-only
- 047. displaying-alerts
- 048. deleting-a-log-ui-only
- 049. setup-mongodb-atlas
- 050. connect-to-database-with-mongoose
- 051. create-log-model
- 052. get-logs-from-database
- 053. add-log-to-database
- 054. delete-logs-from-database
- 055. clear-logs-menu-item
- 056. package-test-our-app
- 057. custom-icon
![](ElectronB2_1.png)
![](ElectronB3_1.png)
![](ElectronB4_1.png)
![](ElectronB5_1.png)
![](ElectronB6_1.png)
![](ElectronB7_1.png)
![](ElectronB8_1.png)
![](ElectronB9_1.png)
![](ElectronB10_1.png)
![](ElectronB11_1.png)
![](ElectronB12_1.png)
![](ElectronB13_1.png)
![](ElectronB14_1.png)
![](ElectronB15_1.png)
![](ElectronB16_1.png)
![](ElectronB17_1.png)
![](ElectronB18_1.png)
![](ElectronB19_1.png)
![](ElectronB20_1.png)
![](ElectronB21_1.png)
![](ElectronB22_1.png)
![](ElectronB23_1.png)
![](ElectronB24_1.png)
![](ElectronB25_1.png)
![](ElectronB26_1.png)
![](ElectronB27_1.png)
![](ElectronB28_1.png)
![](ElectronB29_1.png)
![](ElectronB30_1.png)
![](ElectronB31_1.png)
![](ElectronB32_1.png)
![](ElectronB33_1.png)
![](ElectronB34_1.png)
![](ElectronB35_1.png)
![](ElectronB36_1.png)
![](ElectronB37_1.png)
![](ElectronB38_1.png)
![](ElectronB39_1.png)
![](ElectronB40_1.png)
![](ElectronB41_1.png)
![](ElectronB42_1.png)
![](ElectronB43_1.png)
![](ElectronB44_1.png)
![](ElectronB45_1.png)
![](ElectronB46_1.png)
![](ElectronB47_1.png)
![](ElectronB48_1.png)
![](ElectronB49_1.png)
![](ElectronB50_1.png)
![](ElectronB51_1.png)
![](ElectronB52_1.png)
![](ElectronB53_1.png)
![](ElectronB54_1.png)
![](ElectronB55_1.png)
![](ElectronB56_1.png)
![](ElectronB57_1.png)
![](ElectronB58_1.png)
3. Learning Electron Build Desktop Apps using JS+HTML+CSS
- 1. Getting Started with Electron
- 1. Hello world in Electron
- 2. Loading Html file in Electron MainBrowserWindow
- 3. Generate file path to display web page
- 4. Load Content on BrowserWindow after rendering web page
- 5. BrowserWindow Properties
- 6. BrowserWindow title and alwaysOnTop property
- 7. Create Frameless window to Remove title and toolbar
- 8. Create Transparent Window
- 2. Custom Menu in Electron
- 1. Create Custom Menu
- 2. Define Keyboard Shortcuts and MenuItem Roles
- 3. Add Styling to Fix background text color warning
- 4. Types of MeuItem
- 5. Build MacOS Application Menu
- 6. Reload app on file changes using electron-reload
- 7. Create a View Menu Item
- 8. Create a window Menu Item
- 9. Create a Custom Menu
- 3. Inter Process Communication(IPC)
- 1. Communicate synchronously between main and renderer process
- 2. Communicate Asynchronously between main and renderer process
- 4. Working with Dialog Module
- 1. Open File Dialog to select files and directories
- 2. Add additional options for FileDialog
- 3. Open the File in NodeJs using fs.open()
- 4. Reading Writing and deleting the File
- 5. Watch for changes on file
- 6. Creating, Reading and Deleting Directory
- 7. Choose a File from PC using File Save Dialog
- 8. MessageBox Dialog
- 9. Adding custom Icons in showMessageBox Dialog
- 5. WebContents, Capture Screen, Print Pdf
- 1. Understanding webContents API
- 2. Capture the snapshot of the BrowserWindow and save as a PNG File
- 3. Prints window's web page as PDF
- 6. Dock Icon on MacOs
- 1. Update Image associated with Dock Icon
- 2. Make Dock Icon Bounce
- 3. Change Dock Icon and set badge
- 4. Make System Alert sound using shell module
- 5. Open Files in Finder and External Browser
- 7. Detect Online and Offline Status
- 1. Detect online and offline inside rendererjs
- 3. Detect online or offline status using electron-online
- 8. Todo App with Electron, HTML, CSS and Javascript
- 1. Getting setup with Main Window
- 2. Adding Bootstrap in Electron Application
- 3. File Structure for Todo App
- 4. Setup DataStore
- 5. Iterate all Todos and display them in MainBrowserWindow
- 6. Create new Menu Item and open a new Browser Window
- 7. Save new Record in DataStore
- 8. Delete Record from DataStore
- 9. Debugging Electron Application
- 1. Create Menu Item to debug Electron Application
- 2. Debug Electron Main process in Vs Code
- 3. Debug Electron app using Devtron
- 10. Testing Electron Application with Spectron, Mocha, and Chai
- 1. Testing setup with Spectron, Mocha, and Chai
- 2. Testing Spectron BrowserWindow Api
- 3. Testing BrowserWindow size
- 4. Testing inter process communication with main process and renderer process
- 11. Bonus Vue.js Basics
- 1. Getting started with Vue
- 2. Create template as the markup for the Vue Instance
- 3. Bind properties of vue instance using data
- 4. Create method to interacts with Vue app
- 5. Use computed properties to cache calculations
- 6. Execute Javascript expressions in Template Bindings
- 7. Conditional rendering using v-show directive
- 8. Conditional rendering using v-if, v-else, and v-else-if directive
- 9. Mapping an Array to Elements with v-for
- 10. Array Change detection
- 11. Using Vue.set and splice method to replace an Item from Array
- 12. Using v-for to iterate properties of an Object
- 13. Computed properties in vue
- 15. Watch a property of data object through watcher
- 16. Watching properties of Objects in the Data object
- 17. Handling click event using v-onclick
- 18. Passing Arguments to Event Handler
- 19. Event Modifiers and Key Modifiers
- 20. Form Input Bindings
![](ElectronC1_1.png)
![](ElectronC2_1.png)
![](ElectronC3_1.png)
![](ElectronC4_1.png)
![](ElectronC5_1.png)
![](ElectronC6_1.png)
![](ElectronC7_1.png)
![](ElectronC8_1.png)
![](ElectronC9_1.png)
![](ElectronC10_1.png)
![](ElectronC11_1.png)
![](ElectronC12_1.png)
![](ElectronC13_1.png)
![](ElectronC14_1.png)
![](ElectronC15_1.png)
![](ElectronC16_1.png)
![](ElectronC17_1.png)
![](ElectronC18_1.png)
![](ElectronC19_1.png)
![](ElectronC20_1.png)
![](ElectronC21_1.png)
![](ElectronC22_1.png)
![](ElectronC23_1.png)
![](ElectronC24_1.png)
![](ElectronC25_1.png)
![](ElectronC26_1.png)
![](ElectronC27_1.png)
![](ElectronC28_1.png)
![](ElectronC29_1.png)
![](ElectronC30_1.png)
![](ElectronC31_1.png)
![](ElectronC32_1.png)
![](ElectronC33_1.png)
![](ElectronC34_1.png)
![](ElectronC35_1.png)
![](ElectronC36_1.png)
![](ElectronC37_1.png)
![](ElectronC38_1.png)
![](ElectronC39_1.png)
![](ElectronC40_1.png)
![](ElectronC41_1.png)
![](ElectronC42_1.png)
![](ElectronC43_1.png)
![](ElectronC44_1.png)
![](ElectronC45_1.png)
![](ElectronC46_1.png)
![](ElectronC47_1.png)
![](ElectronC48_1.png)
![](ElectronC49_1.png)
![](ElectronC50_1.png)
![](ElectronC51_1.png)
![](ElectronC52_1.png)
![](ElectronC53_1.png)
![](ElectronC54_1.png)
![](ElectronC55_1.png)
![](ElectronC56_1.png)
![](ElectronC57_1.png)
![](ElectronC58_1.png)
![](ElectronC59_1.png)
![](ElectronC60_1.png)
![](ElectronC61_1.png)
![](ElectronC62_1.png)
![](ElectronC63_1.png)
![](ElectronC64_1.png)
![](ElectronC65_1.png)
![](ElectronC66_1.png)
![](ElectronC67_1.png)
![](ElectronC68_1.png)
![](ElectronC69_1.png)
![](ElectronC70_1.png)
![](ElectronC71_1.png)
![](ElectronC72_1.png)
4. Master Electron Framework And Build 5 Advanced Desktop Apps
- 1. Introduction
- 2. Setup
- 1. What is Node JS
- 2. Installing Node JS on macOS and Linux
- 3. Installing Node JS on Windows
- 4. Summary
- 3. Project 1 Electro Editor
- 1. Demo of Electro Editor
- 2. Installing Electron v5 With npm
- 3. Main.js And Running Electron
- 4. Adding our Renderer Process
- 5. Introduction to Photon UI Kit
- 6. Building Renderer With Photon Kit
- 7. Building Renderer With Photon Kit (Continuation)
- 8. Increasing and Decreasing The Font Size
- 9. Getting The Text Logged
- 10. All About Inter Process Communication (IPC)
- 11. Sending Data to The Main Process
- 12. Node Integration - Watch Out!!!
- 13. Writing Content to File
- 14. Adding The Save Dialog
- 15. Showing The Save Dialog First Time Only
- 16. Sending Data Back to The Renderer Process
- 17. Adding a Save Status Alert to Renderer
- 18. Native Menu in Electron - The Template
- 19. Making Menu Compatible with macOS
- 20. Finishing Up Our Menu
- 21. Adding Menu Keyboard Shortcut
- 22. Wrap Up With Electro Editor Desktop App
- 4. Project 2 Music Player
- 1. Demo of Electron Music Player
- 2. Init npm And Install Electron v5
- 3. Setup Main and Renderer Process
- 4. Building The Renderer
- 5. Button Click to Choose Songs
- 6. Get Songs and Intro to mm Package
- 7. Using The mm Package to Get Data From Songs
- 8. Displaying All Songs in Our Renderer Process
- 9. Playing The Song
- 10. Showing Current Playing Song Title
- 11. Making Our Play-Pause Button Work
- 12. The Previous And Next Song Buttons
- 13. Showing The Current Song Time and Total Duration
- 14. Let's Clear The Playlist
- 15. Wrap Up With Music Player
- 16. NEW!!! Adding Volume Control
- 17. NEW!!! Style Your App Challenge
- 5. Project 3 Tray Player
- 1. Introduction To Tray Applications
- 2. Demo of Tray Player
- 3. Tray in The Docs and Setup
- 4. Adding The Tray Icon
- 5. Fix Disappearing Icon and Remove App Frame
- 6. Hide App on Blur and Remove From Dock
- 7. Icon And Application Bounds
- 8. Adding a Context Menu and Tooltip
- 9. We're Almost There
- 10. DESKTOP NOTIFICATIONS!!! - Adding notification to our App
- 6. Project 4 Electro News
- 1. Demo of Electro News App
- 2. npm Init and Install Electron
- 3. Starting The Electron Process
- 4. Building The Renderer Process
- 5. Intro and Installing NewsAPI
- 6. Getting Top Headlines From NewsAPI
- 7. Showing All News In Renderer
- 8. Reading Articles
- 9. Let's Add News Categories
- 10. Some Highlight to The Active Category
- 11. Let's Not Forget The News Search
- 12. Wrap Up With Electro News App
- 7. Project 5 Electro Radio
- 1. Demo of Electro Radio
- 2. Let's Setup
- 3. Main and Renderer Process
- 4. Finish Renderer and Intro to FM API
- 5. Getting All Radio Stations
- 6. Showing all Stations in the Renderer
- 7. Streaming The Radio Stations
- 8. Some Highlight to Current Station
- 9. Wrap Up With Electro Radio App
- 8. Packaging Electron Apps
- 1. Let's Package Our Music Player
- 2. Requirements for Windows Operating System
- 3. Requirements for macOS and Linux
- 4. Packaging Electron Apps for Windows Operating System
- 5. Packaging Electron Apps for macOS
- 6. Packaging Electron Apps for Linux
- 7. Shortcuts to Make Everything Simpler
- 9. Outro (Bonus)
![](ElectronD1_1.png)
![](ElectronD2_1.png)
![](ElectronD3_1.png)
![](ElectronD4_1.png)
![](ElectronD5_1.png)
![](ElectronD6_1.png)
![](ElectronD7_1.png)
![](ElectronD8_1.png)
![](ElectronD9_1.png)
![](ElectronD10_1.png)
![](ElectronD11_1.png)
![](ElectronD12_1.png)
![](ElectronD13_1.png)
![](ElectronD14_1.png)
![](ElectronD15_1.png)
![](ElectronD16_1.png)
![](ElectronD17_1.png)
![](ElectronD18_1.png)
![](ElectronD19_1.png)
![](ElectronD20_1.png)
![](ElectronD21_1.png)
![](ElectronD22_1.png)
![](ElectronD23_1.png)
![](ElectronD24_1.png)
![](ElectronD25_1.png)
![](ElectronD26_1.png)
![](ElectronD27_1.png)
![](ElectronD28_1.png)
![](ElectronD29_1.png)
![](ElectronD30_1.png)
![](ElectronD31_1.png)
![](ElectronD32_1.png)
![](ElectronD33_1.png)
![](ElectronD34_1.png)
![](ElectronD35_1.png)
![](ElectronD36_1.png)
![](ElectronD37_1.png)
![](ElectronD38_1.png)
![](ElectronD39_1.png)
![](ElectronD40_1.png)
![](ElectronD41_1.png)
![](ElectronD42_1.png)
![](ElectronD43_1.png)
![](ElectronD44_1.png)
![](ElectronD45_1.png)
![](ElectronD46_1.png)
![](ElectronD47_1.png)
![](ElectronD48_1.png)
![](ElectronD49_1.png)
![](ElectronD50_1.png)
![](ElectronD51_1.png)
![](ElectronD52_1.png)
![](ElectronD53_1.png)
![](ElectronD54_1.png)
![](ElectronD55_1.png)
![](ElectronD56_1.png)
![](ElectronD57_1.png)
![](ElectronD58_1.png)
![](ElectronD59_1.png)
![](ElectronD60_1.png)
![](ElectronD61_1.png)
![](ElectronD62_1.png)
![](ElectronD63_1.png)
![](ElectronD64_1.png)
![](ElectronD65_1.png)
![](ElectronD66_1.png)
![](ElectronD67_1.png)
![](ElectronD68_1.png)
![](ElectronD69_1.png)
![](ElectronD70_1.png)
![](ElectronD71_1.png)
![](ElectronD72_1.png)
![](ElectronD73_1.png)
![](ElectronD74_1.png)
![](ElectronD75_1.png)
![](ElectronD76_1.png)
![](ElectronD77_1.png)
![](ElectronD78_1.png)
![](ElectronD79_1.png)
![](ElectronD80_1.png)
![](ElectronD81_1.png)
![](ElectronD82_1.png)
![](ElectronD83_1.png)
![](ElectronD84_1.png)
![](ElectronD85_1.png)
5. Yoris A. Getting started with Electron.js 2022
![](/ModernJsBooks/Yoris A. Getting started with Electron.js 2022.png)
Related page:
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
Comments (
)
![](http://forum.vb-net.com/GetTopicCount.png?id=3bbee834-b7e9-4dcd-9b3b-c70a3cd9ac0a)
<00>
<01>
<02>
<03>
<04>
<05>
<06>
<07>
<08>
<09>
<10>
<11>
<12>
<13>
<14>
<15>
<16>
<17>
<18>
<19>
<20>
<21>
<22>
<23>
Link to this page:
http://www.vb-net.com/ElectronLearning/Index.htm
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |