diff --git a/docs/tutorial/asar-archives.md b/docs/tutorial/asar-archives.md index 0474d8d871..8537e80b2e 100644 --- a/docs/tutorial/asar-archives.md +++ b/docs/tutorial/asar-archives.md @@ -6,7 +6,7 @@ hide_title: false --- After creating an [application distribution](application-distribution.md), the -app's source code are usually bundled into an [ASAR archive](https://github.com/electron/asar), +app's source code is usually bundled into an [ASAR archive](https://github.com/electron/asar), which is a simple extensive archive format designed for Electron apps. By bundling the app we can mitigate issues around long path names on Windows, speed up `require` and conceal your source code from cursory inspection. @@ -134,7 +134,7 @@ underlying system calls, Electron will extract the needed file into a temporary file and pass the path of the temporary file to the APIs to make them work. This adds a little overhead for those APIs. -APIs that requires extra unpacking are: +APIs that require extra unpacking are: * `child_process.execFile` * `child_process.execFileSync` diff --git a/docs/tutorial/asar-integrity.md b/docs/tutorial/asar-integrity.md index f1067eea9e..22ef79f5d1 100644 --- a/docs/tutorial/asar-integrity.md +++ b/docs/tutorial/asar-integrity.md @@ -24,7 +24,7 @@ All versions of `@electron/asar` support ASAR integrity. ## How it works Each ASAR archive contains a JSON string header. The header format includes an `integrity` object -that contain a hex encoded hash of the entire archive as well as an array of hex encoded hashes for each +that contains a hex encoded hash of the entire archive as well as an array of hex encoded hashes for each block of `blockSize` bytes. ```json diff --git a/docs/tutorial/automated-testing.md b/docs/tutorial/automated-testing.md index 053490dbb5..740f79c393 100644 --- a/docs/tutorial/automated-testing.md +++ b/docs/tutorial/automated-testing.md @@ -203,7 +203,7 @@ test('launch app', async () => { }) ``` -After that, you will access to an instance of Playwright's `ElectronApp` class. This +After that, you will have access to an instance of Playwright's `ElectronApp` class. This is a powerful class that has access to main process modules for example: ```js {5-10} @ts-nocheck @@ -237,7 +237,7 @@ test('save screenshot', async () => { }) ``` -Putting all this together using the Playwright test-runner, let's create a `example.spec.js` +Putting all this together using the Playwright test-runner, let's create an `example.spec.js` test file with a single test and assertion: ```js title='example.spec.js' @ts-nocheck @@ -377,7 +377,7 @@ class TestDriver { module.exports = { TestDriver } ``` -In your app code, can then write a simple handler to receive RPC calls: +In your app code, you can then write a simple handler to receive RPC calls: ```js title='main.js' const METHODS = { diff --git a/docs/tutorial/code-signing.md b/docs/tutorial/code-signing.md index a51db39acf..3031f1b33a 100644 --- a/docs/tutorial/code-signing.md +++ b/docs/tutorial/code-signing.md @@ -17,7 +17,7 @@ run them, users need to go through multiple advanced and manual steps. If you are building an Electron app that you intend to package and distribute, it should be code signed. The Electron ecosystem tooling makes codesigning your -apps straightforward - this documentation explains how sign your apps on both +apps straightforward - this documentation explains how to sign your apps on both Windows and macOS. ## Signing & notarizing macOS builds @@ -210,7 +210,7 @@ const msiCreator = new MSICreator({ const supportBinaries = await msiCreator.create() // 🆕 Step 2a: optionally sign support binaries if you -// sign you binaries as part of of your packaging script +// sign your binaries as part of your packaging script for (const binary of supportBinaries) { // Binaries are the new stub executable and optionally // the Squirrel auto updater. diff --git a/docs/tutorial/custom-title-bar.md b/docs/tutorial/custom-title-bar.md index 5c2b2a8144..014068f46b 100644 --- a/docs/tutorial/custom-title-bar.md +++ b/docs/tutorial/custom-title-bar.md @@ -110,7 +110,7 @@ const win = new BrowserWindow({ #### Show and hide the traffic lights programmatically _macOS_ You can also show and hide the traffic lights programmatically from the main process. -The `win.setWindowButtonVisibility` forces traffic lights to be show or hidden depending +The `win.setWindowButtonVisibility` forces traffic lights to be shown or hidden depending on the value of its boolean parameter. ```js title='main.js' diff --git a/docs/tutorial/custom-window-interactions.md b/docs/tutorial/custom-window-interactions.md index 7565ecaa73..2d9a656e58 100644 --- a/docs/tutorial/custom-window-interactions.md +++ b/docs/tutorial/custom-window-interactions.md @@ -5,12 +5,12 @@ By default, windows are dragged using the title bar provided by the OS chrome. Apps that remove the default title bar need to use the `app-region` CSS property to define specific areas that can be used to drag the window. Setting `app-region: drag` marks -a rectagular area as draggable. +a rectangular area as draggable. It is important to note that draggable areas ignore all pointer events. For example, a button element that overlaps a draggable region will not emit mouse clicks or mouse enter/exit events within that overlapping area. Setting `app-region: no-drag` reenables -pointer events by excluding a rectagular area from a draggable region. +pointer events by excluding a rectangular area from a draggable region. To make the whole window draggable, you can add `app-region: drag` as `body`'s style: diff --git a/docs/tutorial/dark-mode.md b/docs/tutorial/dark-mode.md index 6ed30beafa..b44ff5b90c 100644 --- a/docs/tutorial/dark-mode.md +++ b/docs/tutorial/dark-mode.md @@ -29,7 +29,7 @@ be updated accordingly. In macOS 10.14 Mojave, Apple introduced a new [system-wide dark mode][system-wide-dark-mode] for all macOS computers. If your Electron app has a dark mode, you can make it follow the system-wide dark mode setting using -[the `nativeTheme` api](../api/native-theme.md). +[the `nativeTheme` API](../api/native-theme.md). In macOS 10.15 Catalina, Apple introduced a new "automatic" dark mode option for all macOS computers. In order for the `nativeTheme.shouldUseDarkColors` and diff --git a/docs/tutorial/ipc.md b/docs/tutorial/ipc.md index 00d21ff341..9068242892 100644 --- a/docs/tutorial/ipc.md +++ b/docs/tutorial/ipc.md @@ -171,7 +171,7 @@ sections. In the main process, we'll be creating a `handleFileOpen()` function that calls `dialog.showOpenDialog` and returns the value of the file path selected by the user. This function -is used as a callback whenever an `ipcRender.invoke` message is sent through the `dialog:openFile` +is used as a callback whenever an `ipcRenderer.invoke` message is sent through the `dialog:openFile` channel from the renderer process. The return value is then returned as a Promise to the original `invoke` call. @@ -446,7 +446,7 @@ After loading the preload script, your renderer process should have access to th We don't directly expose the whole `ipcRenderer.on` API for [security reasons][]. Make sure to limit the renderer's access to Electron APIs as much as possible. Also don't just pass the callback to `ipcRenderer.on` as this will leak `ipcRenderer` via `event.sender`. -Use a custom handler that invoke the `callback` only with the desired arguments. +Use a custom handler that invokes the `callback` only with the desired arguments. ::: :::info diff --git a/docs/tutorial/keyboard-shortcuts.md b/docs/tutorial/keyboard-shortcuts.md index e757b3aa80..eeb613410c 100644 --- a/docs/tutorial/keyboard-shortcuts.md +++ b/docs/tutorial/keyboard-shortcuts.md @@ -10,7 +10,7 @@ hide_title: false ## Accelerators Accelerators are strings that can be used to represent keyboard shortcuts throughout your Electron. -These strings can contain multiple modifiers keys and a single key code joined by the `+` character. +These strings can contain multiple modifier keys and a single key code joined by the `+` character. > [!NOTE] > Accelerators are **case-insensitive**. diff --git a/docs/tutorial/launch-app-from-url-in-another-app.md b/docs/tutorial/launch-app-from-url-in-another-app.md index 8e1c994c9b..7e7d76cff4 100644 --- a/docs/tutorial/launch-app-from-url-in-another-app.md +++ b/docs/tutorial/launch-app-from-url-in-another-app.md @@ -62,9 +62,9 @@ const createWindow = () => { } ``` -In this next step, we will create our `BrowserWindow` and tell our application how to handle an event in which an external protocol is clicked. +In this next step, we will create our `BrowserWindow` and tell our application how to handle an event in which an external protocol is clicked. -This code will be different in Windows and Linux compared to MacOS. This is due to both platforms emitting the `second-instance` event rather than the `open-url` event and Windows requiring additional code in order to open the contents of the protocol link within the same Electron instance. Read more about this [here](../api/app.md#apprequestsingleinstancelockadditionaldata). +This code will be different in Windows and Linux compared to macOS. This is due to both platforms emitting the `second-instance` event rather than the `open-url` event and Windows requiring additional code in order to open the contents of the protocol link within the same Electron instance. Read more about this [here](../api/app.md#apprequestsingleinstancelockadditionaldata). #### Windows and Linux code: @@ -91,7 +91,7 @@ if (!gotTheLock) { } ``` -#### MacOS code: +#### macOS code: ```js @ts-type={createWindow:()=>void} // This method will be called when Electron has finished diff --git a/docs/tutorial/mac-app-store-submission-guide.md b/docs/tutorial/mac-app-store-submission-guide.md index 53797485c4..739b2a4d46 100644 --- a/docs/tutorial/mac-app-store-submission-guide.md +++ b/docs/tutorial/mac-app-store-submission-guide.md @@ -65,7 +65,7 @@ The full list of certificate types can be found Apps signed with "Apple Development" and "Apple Distribution" certificates can only run under [App Sandbox][app-sandboxing], so they must use the MAS build of Electron. However, the "Developer ID Application" certificate does not have this -restrictions, so apps signed with it can use either the normal build or the MAS +restriction, so apps signed with it can use either the normal build or the MAS build of Electron. #### Legacy certificate names @@ -208,7 +208,7 @@ signAsync({ After signing the app with the "Apple Distribution" certificate, you can continue to submit it to Mac App Store. -However, this guide do not ensure your app will be approved by Apple; you +However, this guide does not ensure your app will be approved by Apple; you still need to read Apple's [Submitting Your App][submitting-your-app] guide on how to meet the Mac App Store requirements. diff --git a/docs/tutorial/macos-dock.md b/docs/tutorial/macos-dock.md index c76e778b71..05757d476a 100644 --- a/docs/tutorial/macos-dock.md +++ b/docs/tutorial/macos-dock.md @@ -25,7 +25,7 @@ Electron application, and this property only exists on macOS. One of the main uses for your app's Dock icon is to expose additional app menus. The Dock menu is triggered by right-clicking or Ctrl-clicking the app icon. By default, the app's Dock menu will come with system-provided window management utilities, including the ability to show all windows, -hide the app, and switch betweeen different open windows. +hide the app, and switch between different open windows. To set an app-defined custom Dock menu, pass any [Menu](../api/menu.md) instance into the [`dock.setMenu`](../api/dock.md#docksetmenumenu-macos) API. diff --git a/docs/tutorial/native-code-and-electron-cpp-linux.md b/docs/tutorial/native-code-and-electron-cpp-linux.md index b40fa8f6b4..6abf021272 100644 --- a/docs/tutorial/native-code-and-electron-cpp-linux.md +++ b/docs/tutorial/native-code-and-electron-cpp-linux.md @@ -1339,7 +1339,7 @@ For developers wanting to learn more, you can refer to the [official N-API docum ### Putting `cpp_addon.cc` together -We've now finished the bridge part our addon - that is, the code that's most concerned with being the bridge between your JavaScript and C++ code (and by contrast, less so actually interacting with the operating system or GTK). After adding all the sections above, your `src/cpp_addon.cc` should look like this: +We've now finished the bridge part of our addon - that is, the code that's most concerned with being the bridge between your JavaScript and C++ code (and by contrast, less so actually interacting with the operating system or GTK). After adding all the sections above, your `src/cpp_addon.cc` should look like this: ```cpp title='src/cpp_addon.cc' #include diff --git a/docs/tutorial/native-code-and-electron-cpp-win32.md b/docs/tutorial/native-code-and-electron-cpp-win32.md index 3d7fab89b9..8c063edc88 100644 --- a/docs/tutorial/native-code-and-electron-cpp-win32.md +++ b/docs/tutorial/native-code-and-electron-cpp-win32.md @@ -4,13 +4,13 @@ This tutorial builds on the [general introduction to Native Code and Electron](. Specifically, we'll be integrating with two commonly used native Windows libraries: -* `comctl32.lib`, which contains common controls and user interface components. It provides various UI elements like buttons, scrollbars, toolbars, status bars, progress bars, and tree views. As far as GUI development on Windows goes, this library is very low-level and basic - more modern frameworks like WinUI or WPF are advanced and alternatives but require a lot more C++ and Windows version considerations than are useful for this tutorial. This way, we can avoid the many perils of building native interfaces for multiple Windows versions! +* `comctl32.lib`, which contains common controls and user interface components. It provides various UI elements like buttons, scrollbars, toolbars, status bars, progress bars, and tree views. As far as GUI development on Windows goes, this library is very low-level and basic - more modern frameworks like WinUI or WPF are more advanced alternatives but require a lot more C++ and Windows version considerations than are useful for this tutorial. This way, we can avoid the many perils of building native interfaces for multiple Windows versions! * `shcore.lib`, a library that provides high-DPI awareness functionality and other Shell-related features around managing displays and UI elements. This tutorial will be most useful to those who already have some familiarity with native C++ GUI development on Windows. You should have experience with basic window classes and procedures, like `WNDCLASSEXW` and `WindowProc` functions. You should also be familiar with the Windows message loop, which is the heart of any native application - our code will be using `GetMessage`, `TranslateMessage`, and `DispatchMessage` to handle messages. Lastly, we'll be using (but not explaining) standard Win32 controls like `WC_EDITW` or `WC_BUTTONW`. > [!NOTE] -> If you're not familiar with C++ GUI development on Windows, we recommend Microsoft's excellent documentation and guides, particular for beginners. "[Get Started with Win32 and C++](https://learn.microsoft.com/en-us/windows/win32/learnwin32/learn-to-program-for-windows)" is a great introduction. +> If you're not familiar with C++ GUI development on Windows, we recommend Microsoft's excellent documentation and guides, particularly for beginners. "[Get Started with Win32 and C++](https://learn.microsoft.com/en-us/windows/win32/learnwin32/learn-to-program-for-windows)" is a great introduction. ## Requirements @@ -1333,7 +1333,7 @@ npm run build ## Conclusion -You've now built a complete native Node.js addon for Windows using C++ and the Win32 API. Some of things we've done here are: +You've now built a complete native Node.js addon for Windows using C++ and the Win32 API. Some of the things we've done here are: 1. Creating a native Windows GUI from C++ 2. Implementing a Todo list application with Add, Edit, and Delete functionality diff --git a/docs/tutorial/native-code-and-electron-swift-macos.md b/docs/tutorial/native-code-and-electron-swift-macos.md index 1351e13f15..228260652f 100644 --- a/docs/tutorial/native-code-and-electron-swift-macos.md +++ b/docs/tutorial/native-code-and-electron-swift-macos.md @@ -1167,7 +1167,7 @@ The approach demonstrated here allows you to: * Setting up bidirectional communication using callbacks and events * Configuring a custom build process to compile Swift code -For more information on developing with Swift and Swift, refer to Apple's developer documentation: +For more information on developing with Swift and SwiftUI, refer to Apple's developer documentation: * [Swift Programming Language](https://developer.apple.com/swift/) * [SwiftUI Framework](https://developer.apple.com/documentation/swiftui) diff --git a/docs/tutorial/offscreen-rendering.md b/docs/tutorial/offscreen-rendering.md index 5decbaf822..367c1e151c 100644 --- a/docs/tutorial/offscreen-rendering.md +++ b/docs/tutorial/offscreen-rendering.md @@ -36,7 +36,7 @@ setting. This is an advanced feature requiring a native node module to work with your own code. The frames are directly copied in GPU textures, thus this mode is very fast because there's no CPU-GPU memory copies overhead, and you can directly import the shared - texture to your own rendering program. You can read more details at + texture to your own rendering program. You can read more details [here](https://github.com/electron/electron/blob/main/shell/browser/osr/README.md). 2. Use CPU shared memory bitmap diff --git a/docs/tutorial/performance.md b/docs/tutorial/performance.md index bc470fc350..761060b501 100644 --- a/docs/tutorial/performance.md +++ b/docs/tutorial/performance.md @@ -294,7 +294,7 @@ particularly useful if users complain about your app sometimes "stuttering". Generally speaking, all advice for building performant web apps for modern browsers apply to Electron's renderers, too. The two primary tools at your -disposal are currently `requestIdleCallback()` for small operations and +disposal are currently `requestIdleCallback()` for small operations and `Web Workers` for long-running operations. _`requestIdleCallback()`_ allows developers to queue up a function to be @@ -360,7 +360,7 @@ turning into a desktop application. As web developers, we are used to loading resources from a variety of content delivery networks. Now that you are shipping a proper desktop application, attempt to "cut the cord" where possible and avoid letting your users wait for resources that never change and could -easily be included in your app. +easily be included in your app. A typical example is Google Fonts. Many developers make use of Google's impressive collection of free fonts, which comes with a content delivery diff --git a/docs/tutorial/process-model.md b/docs/tutorial/process-model.md index e8d4d82a35..b2e0451a48 100644 --- a/docs/tutorial/process-model.md +++ b/docs/tutorial/process-model.md @@ -113,7 +113,7 @@ For a full list of Electron's main process modules, check out our API documentat Each Electron app spawns a separate renderer process for each open `BrowserWindow` (and each web embed). As its name implies, a renderer is responsible for -_rendering_ web content. For all intents and purposes, code ran in renderer processes +_rendering_ web content. For all intents and purposes, code run in renderer processes should behave according to web standards (insofar as Chromium does, at least). Therefore, all user interfaces and app functionality within a single browser diff --git a/docs/tutorial/security.md b/docs/tutorial/security.md index 1f23cf5140..04e800d84a 100644 --- a/docs/tutorial/security.md +++ b/docs/tutorial/security.md @@ -767,7 +767,7 @@ ipcMain.handle('get-secrets', (e) => { }) function validateSender (frame) { - // Value the host of the URL using an actual URL parser and an allowlist + // Validate the host of the URL using an actual URL parser and an allowlist if ((new URL(frame.url)).host === 'electronjs.org') return true return false } diff --git a/docs/tutorial/testing-on-headless-ci.md b/docs/tutorial/testing-on-headless-ci.md index 56cdf4d819..a49f2d114e 100644 --- a/docs/tutorial/testing-on-headless-ci.md +++ b/docs/tutorial/testing-on-headless-ci.md @@ -2,8 +2,8 @@ Being based on Chromium, Electron requires a display driver to function. If Chromium can't find a display driver, Electron will fail to launch - -and therefore not executing any of your tests, regardless of how you are running -them. Testing Electron-based apps on Travis, CircleCI, Jenkins or similar Systems +and therefore not execute any of your tests, regardless of how you are running +them. Testing Electron-based apps on Travis, CircleCI, Jenkins or similar systems requires therefore a little bit of configuration. In essence, we need to use a virtual display driver. diff --git a/docs/tutorial/updates.md b/docs/tutorial/updates.md index 0f7cd62717..3afa6229c4 100644 --- a/docs/tutorial/updates.md +++ b/docs/tutorial/updates.md @@ -44,7 +44,7 @@ following JSON format: "updateTo": { "version": "1.2.1", "pub_date": "2023-09-18T12:29:53+01:00", - "notes": "Theses are some release notes innit", + "notes": "These are some release notes innit", "name": "1.2.1", "url": "https://mycompany.example.com/myapp/releases/myrelease" } @@ -54,7 +54,7 @@ following JSON format: "updateTo": { "version": "1.2.3", "pub_date": "2024-09-18T12:29:53+01:00", - "notes": "Theses are some more release notes innit", + "notes": "These are some more release notes innit", "name": "1.2.3", "url": "https://mycompany.example.com/myapp/releases/myrelease3" } @@ -307,7 +307,7 @@ app update. All other properties in the object are optional. { "url": "https://your-static.storage/your-app-1.2.3-darwin.zip", "name": "1.2.3", - "notes": "Theses are some release notes innit", + "notes": "These are some release notes innit", "pub_date": "2024-09-18T12:29:53+01:00" } ``` diff --git a/docs/tutorial/using-native-node-modules.md b/docs/tutorial/using-native-node-modules.md index e86580ed49..51a983b0ec 100644 --- a/docs/tutorial/using-native-node-modules.md +++ b/docs/tutorial/using-native-node-modules.md @@ -149,7 +149,7 @@ for an example delay-load hook if you're implementing your own. native Node modules with prebuilt binaries for multiple versions of Node and Electron. -If the `prebuild`-powered module provide binaries for the usage in Electron, +If the `prebuild`-powered module provides binaries for the usage in Electron, make sure to omit `--build-from-source` and the `npm_config_build_from_source` environment variable in order to take full advantage of the prebuilt binaries. diff --git a/docs/tutorial/windows-arm.md b/docs/tutorial/windows-arm.md index 9fef58d829..3ad0824daf 100644 --- a/docs/tutorial/windows-arm.md +++ b/docs/tutorial/windows-arm.md @@ -38,7 +38,7 @@ To test your app, use a Windows on Arm device running Windows 10 (version 1903 o ### Node.js/node-gyp -[Node.js v12.9.0 or later is recommended.](https://nodejs.org/en/) If updating to a new version of Node is undesirable, you can instead [update npm's copy of node-gyp manually](https://github.com/nodejs/node-gyp/wiki/Updating-npm's-bundled-node-gyp) to version 5.0.2 or later, which contains the required changes to compile native modules for Arm. +[Node.js v12.9.0 or later is recommended.](https://nodejs.org/en/) If updating to a new version of Node is undesirable, you can instead [update npm's copy of node-gyp manually](https://github.com/nodejs/node-gyp/wiki/Updating-npm's-bundled-node-gyp) to version 5.0.2 or later, which contains the required changes to compile native modules for Arm. ### Visual Studio 2017 diff --git a/docs/tutorial/windows-store-guide.md b/docs/tutorial/windows-store-guide.md index 9a523a37f4..64a81c07e6 100644 --- a/docs/tutorial/windows-store-guide.md +++ b/docs/tutorial/windows-store-guide.md @@ -134,7 +134,7 @@ system. Before running the CLI for the first time, you will have to setup the "Windows Desktop App Converter". This will take a few minutes, but don't worry - you only have to do -this once. Download and Desktop App Converter from [here][app-converter]. +this once. Download the Desktop App Converter from [here][app-converter]. You will receive two files: `DesktopAppConverter.zip` and `BaseImage-14316.wim`. 1. Unzip `DesktopAppConverter.zip`. From an elevated PowerShell (opened with