No history yet

Introduction to Electron

Desktop Apps, Web Code

What if you could build a desktop application for Windows, macOS, and Linux using the same technologies you use to build websites? That's the core idea behind Electron. It's an open-source framework that lets developers create native-feeling desktop apps with HTML, CSS, and JavaScript.

This means a web developer can use their existing skills to create an app that runs directly on a computer, complete with its own icon in the dock or taskbar. Instead of learning platform-specific languages like C# for Windows or Swift for macOS, they can stick with the tools of the web.

How It Works

Electron pulls this off by bundling two powerful open-source projects into a single package: Chromium and Node.js.

Think of it as a tiny, customized web browser that runs your app's interface, combined with a powerful engine that can interact with the computer's operating system.

Here’s how the pieces fit together:

  • Chromium is the open-source browser project that powers Google Chrome. Electron uses it to render your application's user interface. This is the part that understands your HTML, styles it with CSS, and makes it interactive with JavaScript. Each window in your app is essentially a web page.

  • Node.js is a JavaScript runtime that lets you run JavaScript on a server or, in this case, on a desktop. Electron uses Node.js to handle the application's backend logic. This gives your app access to the computer's file system, network, and other native features that are normally off-limits to a regular website.

` tag that says 'Hello World!'."},$R[125]={speaker:"Beau",text:"The classic 'Hello World'. Can't start a programming journey without it. Okay, done. Now how do we fire this thing up?"},$R[126]={speaker:"Jo",text:"In your terminal, in the project directory, you just run `npm start`. Remember when we set up the `package.json` file, we made sure the 'start' script points to 'electron .'. That tells npm to run Electron in the current directory."},$R[127]={speaker:"Beau",text:"Okay, typing... `npm start`... and... whoa. There it is! A window popped up, it's 800 by 600, and it says 'Hello World!'. That feels like magic."},$R[128]={speaker:"Jo",text:"It's a great feeling, isn't it? And this is the perfect moment to talk about the other half of the puzzle. We've talked about the main process—the director. But what's running inside that window, displaying our `index.html`?"},$R[129]={speaker:"Beau",text:"The actors on the stage?"},$R[130]={speaker:"Jo",text:"Perfect analogy. That's what Electron calls the 'renderer process'. Each `BrowserWindow` you create runs its own, separate renderer process. It's essentially a Chromium browser environment. It can't touch the file system or create new windows directly, that's the main process's job. Its job is to... well, render the content."},$R[131]={speaker:"Beau",text:"So `main.js` is the main process, running Node.js with all the power. And `index.html`, and any JavaScript I link to it, that's the renderer process, living inside its own little sandboxed browser world."},$R[132]={speaker:"Jo",text:"That is the fundamental concept of every single Electron app. The main process is the application's backend, and the renderer process is the frontend. They're separate, and later on we'll learn how they can communicate with each other, but for now, just understanding that separation is the key."},$R[133]={speaker:"Beau",text:"So if I wanted a button in my app that saves a file, the button itself would be in `index.html`—the renderer. But when I click it, it would have to send a message to the main process to actually do the file saving."},$R[134]={speaker:"Jo",text:"You've jumped ahead but you are one hundred percent correct. The renderer can't save files, but it can ask the main process to do it. That's how you build secure and stable applications."},$R[135]={speaker:"Beau",text:"Wow. Okay, so we wrote maybe ten lines of code, and we have a native desktop application running. The separation between main and renderer makes a lot of sense. It's like a brain and a face. One does the thinking, the other does the showing."},$R[136]={speaker:"Jo",text:"I like that one. The brain and the face. That's a really good way to think about it. And we just taught our app to say its first words."}]},$R[137]={type:"podcast",title:"Understanding Electron's Architecture",nodeId:"166edtv",audioUrl:"https://oboe-storage.s3.amazonaws.com/dev/podcasts/v1/node-514642/a6c05709-f76f-4504-8dac-cb292d596fa9.mp3",episodeVariant:"full",fileSizeBytes:2309033,durationMs:288601,scriptParts:$R[138]=[$R[139]={speaker:"Beau",text:"Okay, so last time we got that 'Hello World' window to pop up. And it was cool, it worked, but I have to admit, it felt a bit like a magic trick. We wrote some JavaScript in one file, and then this... this whole separate window with a web page in it just appeared."},$R[140]={speaker:"Jo",text:"It's a very good magic trick, but it's not magic. It's architecture. And understanding that architecture is probably the most important part of getting good at Electron. What you were seeing wasn't one program, but two different kinds of programs working together."},$R[141]={speaker:"Beau",text:"Two? I only saw one window."},$R[142]={speaker:"Jo",text:"Right, but behind the scenes, Electron uses what's called a multi-process model. It gets this from Chromium, the open-source browser that Google Chrome is built on. You have one 'main' process, and then you have one or more 'renderer' processes."},$R[143]={speaker:"Beau",text:"Okay, 'main' and 'renderer'. Let me guess... the main one is the important one?"},$R[144]={speaker:"Jo",text:"They're both important, but for different things. Think of the main process as the director of a play. It's the only one that can turn the lights on, open the curtains, and decide when the show is over. It manages the entire application's lifecycle."},$R[145]={speaker:"Beau",text:"So in our 'Hello World' app, that 'main.js' file we wrote... that was the main process? It was the script that actually created the window."},$R[146]={speaker:"Jo",text:"Exactly. The main process is responsible for creating and managing browser windows. It's also the only process that can talk directly to the computer's operating system to do things like create menus, show file dialogs, or change the icon in the dock."},$R[147]={speaker:"Beau",text:"Okay, so the main process is the director. What's the renderer process then? The actors?"},$R[148]={speaker:"Jo",text:"Perfect analogy. Each browser window you create runs its own, separate renderer process. Its only job is to 'render' the web page—the HTML, the CSS, the JavaScript—that goes inside that window. It's what the user actually sees and interacts with."},$R[149]={speaker:"Beau",text:"So our 'index.html' file was running in a renderer process. And if I had two windows open in my app, I'd have... one main process and two renderer processes?"},$R[150]={speaker:"Jo",text:"You got it. And that separation is powerful. If one of your windows—one renderer process—crashes for some reason, it doesn't take down the entire application. The director, the main process, is still running and can decide to, say, reload that window or just close it gracefully."},$R[151]={speaker:"Beau",text:"Ah, like when one tab in a web browser crashes but the other tabs are fine. Same idea."},$R[152]={speaker:"Jo",text:"Exactly the same idea. It's a core benefit of that Chromium architecture."},$R[153]={speaker:"Beau",text:"Okay, so here's the question then. If the renderer process is just a web page in a window, and the main process is this separate 'director'... how does the web page tell the director to do something? Like, what if I have a button in my HTML that needs to save a file?"},$R[154]={speaker:"Jo",text:"Excellent question. The renderer can't do that directly. For security reasons, the renderer process is sandboxed. It can't just access the computer's file system willy-nilly. It has to ask the main process for permission and to do the work."},$R[155]={speaker:"Beau",text:"And how does it ask? It sends a text?"},$R[156]={speaker:"Jo",text:"Close enough! They use something called Inter-Process Communication, or IPC. It's basically a system for sending messages. The renderer process can send a message on a specific 'channel'—let's call it 'save-file'—and include some data, like the text it wants to save."},$R[157]={speaker:"Jo",text:"Meanwhile, the main process is listening for messages on that 'save-file' channel. When it gets one, it runs its code to open the save dialog, write the file to the disk, and then... this is the important part... it can send a message back to the renderer, maybe on a 'save-complete' channel, to say 'Hey, I'm done.'"},$R[158]={speaker:"Beau",text:"So it's like a walkie-talkie system. The actor in the window presses the button and says, 'Director, I need to save this file, over.' The director hears it, does the saving, and then radios back, 'File saved successfully, over.'"},$R[159]={speaker:"Jo",text:"That is a perfect mental movie for it. This IPC mechanism is the backbone of almost every complex Electron app. It's how you bridge the gap between your user interface, which lives in the renderer, and the powerful, native capabilities that only the main process has access to."},$R[160]={speaker:"Beau",text:"And you mentioned security. I get why you wouldn't want the web page part to just be able to delete files. Is that the main concern?"},$R[161]={speaker:"Jo",text:"That's a huge part of it. By default, Electron tries to keep these worlds separate with something called 'context isolation.' It means the JavaScript running on your web page can't directly access the internal Electron or Node.js APIs. Your IPC setup acts as a carefully controlled bridge between those two isolated worlds."},$R[162]={speaker:"Beau",text:"So you're not just opening a door between them, you're building a little security checkpoint where only specific, pre-approved messages can get through."},$R[163]={speaker:"Jo",text:"Exactly. You, the developer, get to define what messages are allowed. You don't just give your renderer process the keys to the kingdom. You give it a phone number to call for very specific requests."},$R[164]={speaker:"Beau",text:"Okay, that makes a lot more sense now. It's not one thing, it's a team. A director in the background and actors on the stage, all talking over secure walkie-talkies. That... that I can work with."},$R[165]={speaker:"Jo",text:"And that's the core concept. Once you have that director-and-actor relationship in your head, everything else you build in Electron just becomes a new scene in the play."}]},$R[166]={type:"podcast",title:"Enhancing Application Functionality",nodeId:"1ji7c8a",audioUrl:"https://oboe-storage.s3.amazonaws.com/dev/podcasts/v1/node-514644/f9276efc-639a-4b57-bfcb-954fff02f814.mp3",episodeVariant:"full",fileSizeBytes:2816018,durationMs:351974,scriptParts:$R[167]=[$R[168]={speaker:"Beau",text:"Okay, Jo. So, we've got our basic Electron app running. It's... a window. A very nice window, but it's just a box with my 'Hello World' text in it. It doesn't feel like a real application, you know?"},$R[169]={speaker:"Jo",text:"I get it completely. It's like building a car and only having the frame and the engine. It runs, but you can't really... do anything with it yet. We're missing the steering wheel, the dashboard, the doors."},$R[170]={speaker:"Beau",text:"Exactly! So what's the first piece of the dashboard we should build? Like, where do we even start?"},$R[171]={speaker:"Jo",text:"The most classic, universal piece of any desktop app: the top menu bar. You know, 'File', 'Edit', 'View', 'Help'..."},$R[172]={speaker:"Beau",text:"Oh, right. Okay, so... do I have to build that with HTML and CSS and try to make it stick to the top of the window? That sounds... fragile."},$R[173]={speaker:"Jo",text:"And that's the magic of Electron. You don't. Electron has a built-in module called 'Menu' that lets you create native OS menus. So on a Mac, it'll look and feel like a Mac menu. On Windows, it'll be a Windows menu. No CSS required."},$R[174]={speaker:"Beau",text:"Okay, that is a huge relief. So how does it work? Is it complicated?"},$R[175]={speaker:"Jo",text:"Not at all. You basically create a template, which is just an array of objects in your main process file, your 'main.js'. Each object represents a top-level menu item."},$R[176]={speaker:"Beau",text:"Okay, so like one object for 'File', one for 'Edit', and so on."},$R[177]={speaker:"Jo",text:"Exactly. And each of those objects has a 'label' property—that's the text you see, like 'File'. Then it has a 'submenu' property, which is another array of objects for the dropdown items."},$R[178]={speaker:"Beau",text:"So, for the 'File' menu, the submenu would have objects for 'Open', 'Save', 'Quit'..."},$R[179]={speaker:"Jo",text:"You got it. And the most important property on those submenu items is 'click'. This is a function that runs when the user clicks that menu item. For 'Quit', the click function would just call `app.quit()`."},$R[180]={speaker:"Beau",text:"That makes sense. It's just a structured data object that Electron turns into a real UI element. But what about... what if I'm typing in a text box and I want to right-click to get 'Copy' and 'Paste'? That's a menu, too, right?"},$R[181]={speaker:"Jo",text:"Right, a context menu. It's almost the exact same process. You build the menu from a template in the main process, but instead of setting it as the application menu, you listen for a right-click event in your renderer process—in your web page—and use IPC to tell the main process, 'Hey, the user right-clicked here. Show them this menu'."},$R[182]={speaker:"Beau",text:"Ah, okay, so that's where the IPC we talked about before comes in. The webpage side tells the main application side to do something native. Cool. Okay, so I've got a 'Quit' button in my menu. But what if... what if I've been typing something important and haven't saved? A good app would warn me."},$R[183]={speaker:"Jo",text:"Perfect transition. For that, you need a dialog box. And just like with the menu, Electron has a 'dialog' module to create native OS dialogs."},$R[184]={speaker:"Beau",text:"Let me guess: I don't have to build a popup with a div and some CSS?"},$R[185]={speaker:"Jo",text:"You are learning! No, you just call a function, like `dialog.showMessageBox()`. You pass it some options, and it handles the rest."},$R[186]={speaker:"Beau",text:"What kind of options?"},$R[187]={speaker:"Jo",text:"Things you'd expect. A 'message', which is the main text like 'You have unsaved changes.' A 'detail' for smaller text. And importantly, 'buttons', which is an array of strings like ['Save', 'Don't Save', 'Cancel']."},$R[188]={speaker:"Beau",text:"And the function returns which button I clicked?"},$R[189]={speaker:"Jo",text:"Exactly. It returns a promise that resolves with an object containing the index of the button that was clicked. So if the user clicks 'Save', which is the first button, it returns index 0. Then your code can decide what to do next based on that choice."},$R[190]={speaker:"Beau",text:"Okay, so the `dialog` module is for talking *to* the user. What about getting a file *from* them? Like an 'Open File' dialog."},$R[191]={speaker:"Jo",text:"Same module, different function: `dialog.showOpenDialog()`. This pops up the native file explorer. You can give it options to filter for certain file types, like only showing '.txt' and '.md' files, or allowing the user to select directories instead of files."},$R[192]={speaker:"Beau",text:"This is really cool. We're essentially just describing what we want in JavaScript, and Electron is doing the heavy lifting of creating the actual native interface components for us."},$R[193]={speaker:"Jo",text:"That's the core value proposition right there. Now, let's talk about one more thing that really makes an app feel integrated into the OS: the system tray."},$R[194]={speaker:"Beau",text:"You mean the little icons down by the clock? On Windows it's the bottom right, on Mac it's the top right."},$R[195]={speaker:"Jo",text:"Yep. That area is great for applications that need to run in the background. Think about something like a music player or a file-syncing app. You might close the main window, but you don't want the app to actually quit."},$R[196]={speaker:"Beau",text:"Right, you want it to just minimize to the tray."},$R[197]={speaker:"Jo",text:"Exactly. And for this, there's a 'Tray' module. You create a new Tray instance, give it an icon image, and you're good to go. The tray icon can even have its own context menu, built the same way we just discussed, so you can right-click it to get options like 'Show Window' or 'Quit'."},$R[198]={speaker:"Beau",text:"So, let's trace the user interaction. The user clicks the 'X' to close the window. Instead of quitting the app, I would just call `window.hide()` and the tray icon I created would still be there, running in the background."},$R[199]={speaker:"Jo",text:"Precisely. You'd listen for the window's 'close' event, prevent the default action which is to quit, and then just hide the window. Then, if the user clicks your tray icon, you'd listen for that 'click' event and call `window.show()` to bring it back."},$R[200]={speaker:"Beau",text:"It's really all about listening for events and then calling the right Electron API function in response. It feels a lot less like smoke-and-mirrors now."},$R[201]={speaker:"Jo",text:"That's the whole game. An application is really just a loop: wait for user input, process it, and update the display. With Electron, the 'user input' can be a click on a native menu, a choice in a dialog, or a click on a tray icon, not just a button on a webpage."},$R[202]={speaker:"Beau",text:"So now our app doesn't just look like a box. It has a proper menu, it can talk to me, and it can live down by the clock. It's... a real app."},$R[203]={speaker:"Jo",text:"It's a real app. And you built the whole thing without ever leaving the comfort of JavaScript."}]},$R[204]={type:"podcast",title:"Packaging and Distributing Applications",nodeId:"wcy2xd",audioUrl:"https://oboe-storage.s3.amazonaws.com/dev/podcasts/v1/node-514646/4e4561c5-6a7e-4ef0-ba18-c7e5754efd5f.mp3",episodeVariant:"full",fileSizeBytes:1915524,durationMs:239412,scriptParts:$R[205]=[$R[206]={speaker:"Beau",text:"Alright, Jo, so we've built this neat little desktop app. It works great... on my machine. But right now it's just a folder full of code. How do I, you know, turn this into a real thing that I can just send to my friend and they can double-click it?"},$R[207]={speaker:"Jo",text:"That is the million-dollar question, isn't it? And that whole process is called 'packaging' or 'distributing.' You're essentially bundling up all your HTML, CSS, JavaScript, and the entire Electron framework itself into a neat, single, executable file."},$R[208]={speaker:"Beau",text:"So it's like... zipping everything up, but way smarter?"},$R[209]={speaker:"Jo",text:"Exactly. Much smarter. And the go-to tool for this in the Electron world is Electron Forge. It's... it's like a Swiss Army knife. It handles packaging the app, creating the installers, everything, pretty much with a few simple commands."},$R[210]={speaker:"Beau",text:"Okay, Electron Forge. So I run a command and it just... poof, makes a .exe file for my Windows friend?"},$R[211]={speaker:"Jo",text:"Pretty much. You'd typically run something like 'npm run make', and Electron Forge looks at your project, figures out what operating system you're on, and builds the distributable for that platform. So if you're on Windows, you'll get that .exe inside an installer. If you're on a Mac, you'll get a .dmg file."},$R[212]={speaker:"Beau",text:"Wait, so if I want to make a Mac version, I have to be on a Mac? I can't just build all three versions—Windows, Mac, Linux—from my one Windows machine?"},$R[213]={speaker:"Jo",text:"That's the tricky part, especially for macOS. To build and properly sign a Mac application, you really need to be on macOS. For Linux and Windows, you have a bit more flexibility with cross-compiling, but for a smooth, reliable process, it's best practice to build for a platform on that same platform."},$R[214]={speaker:"Beau",text:"Okay, so that's what build servers in the cloud are for, I guess. So, we've run 'npm run make' and we have our installer file. But... I've seen those scary warnings before. When you download something and your computer says, 'Warning! Unidentified developer!' How do we avoid that?"},$R[215]={speaker:"Jo",text:"You are talking about code signing. And that is absolutely critical if you want users to trust your application. It's essentially a way for you, the developer, to digitally sign your app, proving that it came from you and hasn't been tampered with since you created it."},$R[216]={speaker:"Beau",text:"So it's like a wax seal on a letter in old movies? It proves it's from the king and nobody opened it along the way."},$R[217]={speaker:"Jo",text:"That is a perfect analogy. To get this 'digital wax seal', you need to obtain a certificate from a recognized Certificate Authority. For Windows, it's often called an Authenticode certificate, and for macOS, you get it through the Apple Developer Program."},$R[218]={speaker:"Beau",text:"And I'm guessing this isn't free."},$R[219]={speaker:"Jo",text:"Generally, no. The Apple Developer Program has an annual fee, and code signing certificates for Windows also have a yearly cost. It's one of those costs of doing business if you're distributing software professionally. But once you have that certificate, you configure Electron Forge to use it during the build process, and those scary warnings disappear."},$R[220]={speaker:"Beau",text:"Okay, that makes sense. It's about establishing trust. So... my friend has my app, version 1.0. It's signed, it's beautiful. A week later, I fix a bug and have version 1.1 ready. Do I just... email them again and say, 'Hey, delete the old one, install this one'?"},$R[221]={speaker:"Jo",text:"You could, but that's not a great user experience. A much better way is to build an update mechanism right into the app. Electron has built-in modules, like 'autoUpdater', that can handle this."},$R[222]={speaker:"Beau",text:"Oh, like when an app I use pops up a little message saying, 'A new version is available, restart to update'?"},$R[223]={speaker:"Jo",text:"Precisely. You configure your app to periodically check a server where you host your new releases. If it finds a newer version, it can download it in the background. Then, you can prompt the user to restart the app to apply the update. It’s a seamless way to make sure your users always have the latest and greatest version."},$R[224]={speaker:"Beau",text:"So, Electron Forge packages it, code signing makes it trustworthy, and the autoUpdater keeps it fresh. That covers the whole lifecycle, from my code to their computer."},$R[225]={speaker:"Jo",text:"You've got it. It seems like a lot of steps, but tools like Forge really streamline the process. You set up the configuration once—your signing certificates, your update server—and then every time you want to release, it's just that one 'npm run make' command to kick it all off."},$R[226]={speaker:"Beau",text:"That's actually pretty powerful. You're not just writing code, you're building a whole delivery pipeline. It feels much more... real, somehow."}]},$R[227]={type:"podcast",title:"Performance Optimization",nodeId:"7h44jq",audioUrl:"https://oboe-storage.s3.amazonaws.com/dev/podcasts/v1/node-514648/f9e8bcc2-e7aa-4e3a-8bcb-6a24fdb8cd4d.mp3",episodeVariant:"full",fileSizeBytes:2560227,durationMs:320000,scriptParts:$R[228]=[$R[229]={speaker:"Beau",text:"Okay, Jo, can we talk about the elephant in the room with Electron apps? You know the one."},$R[230]={speaker:"Jo",text:"I have a feeling you mean the one labeled 'performance'?"},$R[231]={speaker:"Beau",text:"Exactly! The reputation that they're all... slow. Bloated. That you click to open one and your laptop fan immediately prepares for takeoff."},$R[232]={speaker:"Jo",text:"It's a fair critique, or at least a common one. But it's not an inherent flaw in Electron itself, so much as a... a side effect of not being careful. Because you're given all this power of a web browser and Node.js, it's really easy to build something that's not optimized."},$R[233]={speaker:"Beau",text:"So it's on us, the developers, to fix it. Okay, so where do we even start? For me, the first impression is startup time. Sometimes it feels like you click the icon and... wait."},$R[234]={speaker:"Jo",text:"That's the perfect place to start. A lot of that initial lag comes from loading everything you *might* need right at the very beginning. Think of it like packing for a trip. You don't dump your entire wardrobe into the suitcase on day one. You pack what you need to get started."},$R[235]={speaker:"Beau",text:"Okay, so... lazy loading? Only load a feature when the user actually clicks on the button for it?"},$R[236]={speaker:"Jo",text:"Exactly. Instead of having a bunch of `require` statements at the top of your `main.js` file for every single module, you move that `require` statement inside the function that actually needs it. So the code for, say, exporting a PDF isn't loaded until someone clicks 'Export as PDF'."},$R[237]={speaker:"Beau",text:"That makes sense. It seems... almost too simple. Does it really make that big of a difference?"},$R[238]={speaker:"Jo",text:"On a small app, maybe not. But on a large application like VS Code or Slack, where you have hundreds of dependencies, it adds up to seconds of saved startup time. And speaking of dependencies, using a bundler like Webpack or Rollup is huge. It can take all your separate JavaScript files and smoosh them into one smaller, optimized file, which is much faster for the app to parse."},$R[239]={speaker:"Beau",text:"Right, so faster startup is one thing. But what about once the app is running? The other big complaint is memory usage. The dreaded RAM hog."},$R[240]={speaker:"Jo",text:"Ah yes, memory management. This is where you have to remember that you're working with two different environments: the main process, which is Node.js, and the renderer processes, which are basically Chrome browser windows."},$R[241]={speaker:"Beau",text:"We covered that before, the whole multi-process architecture."},$R[242]={speaker:"Jo",text:"Exactly. And a common source of memory leaks is creating objects in the main process, passing them to a renderer, and then never cleaning them up. For example, when you close a window, you need to make sure you're explicitly setting its variable to `null`."},$R[243]={speaker:"Beau",text:"So... like `let myWindow = new BrowserWindow()`, and then when the window's 'closed' event fires, you just... do `myWindow = null`?"},$R[244]={speaker:"Jo",text:"That's exactly it. It sounds trivial, but what you're doing is removing your code's reference to that window object. Once there are no more references to it, JavaScript's garbage collector can swoop in and free up that memory. If you forget, that closed window object just sits in memory forever, doing nothing but taking up space."},$R[245]={speaker:"Beau",text:"Okay, so be a tidy developer. Clean up after yourself. What about... what about just the general responsiveness? Sometimes an app will just freeze for a second when you click something. The dreaded spinner."},$R[246]={speaker:"Jo",text:"That's a classic case of doing too much work on the UI thread. The renderer process, the one that shows your HTML and CSS, has one main thread. That thread is responsible for everything: running your JavaScript, painting the screen, responding to clicks. If you give it a huge task, like reading a massive file or doing complex calculations, everything else stops."},$R[247]={speaker:"Beau",text:"The spinner. So how do you avoid that?"},$R[248]={speaker:"Jo",text:"You offload the work. You can use something called a Web Worker, which is like a background thread for your renderer process. Or, even better, you can send a message to the main process using IPC and have Node.js do the heavy lifting. Since Node runs in a separate process, it won't block your UI. Once it's done, it just sends a message back with the result."},$R[249]={speaker:"Beau",text:"So if I'm building, say, a video converter app. I wouldn't run the conversion code in the renderer process where the 'Convert' button is. I'd send the file path to the main process, let it do the conversion, and it would tell me when it's done."},$R[250]={speaker:"Jo",text:"Perfect example. And while the main process is busy converting, the UI in the renderer is still totally responsive. The user can click other buttons, move the window, see a progress bar update... no freezing."},$R[251]={speaker:"Beau",text:"Okay, this is all great in theory. But how do you find these problems? It's not always obvious what's slow or what's leaking memory. Do you just... guess?"},$R[252]={speaker:"Jo",text:"Definitely not. You use profiling tools. And the best part is, if you've done any web development, you already know the main one: the Chrome DevTools. You can open them right inside your Electron app."},$R[253]={speaker:"Beau",text:"Oh, right! The Performance and Memory tabs."},$R[254]={speaker:"Jo",text:"Exactly. You can use the Performance tab to record your app while you perform an action, like clicking a button. It will generate this... this incredibly detailed graph, they call it a flame graph, showing you every single function that was called and exactly how long each one took, down to the millisecond."},$R[255]={speaker:"Beau",text:"And you just look for the widest parts of the graph, right? The functions that are taking up the most time."},$R[256]={speaker:"Jo",text:"Yep. It points you directly to your bottlenecks. And for memory leaks, you use the Memory tab. You can take a 'heap snapshot', which is like a photo of everything currently in memory. You perform an action, like opening and closing a new window, and then take another snapshot. If you see that the number of window objects has increased, even though you closed it... you've found a leak."},$R[257]={speaker:"Beau",text:"So it's not magic, it's just being a detective. Lazy load your code, offload heavy tasks, clean up your objects, and when in doubt, profile it."},$R[258]={speaker:"Jo",text:"You've got it. An un-optimized Electron app is just a first draft. Performance is a feature you build in, just like any other."}]},$R[259]={type:"podcast",title:"Security Best Practices",nodeId:"nstbe9",audioUrl:"https://oboe-storage.s3.amazonaws.com/dev/podcasts/v1/node-514650/d2263137-9f5e-451c-868a-03c383ad1e05.mp3",episodeVariant:"full",fileSizeBytes:2256788,durationMs:282070,scriptParts:$R[260]=[$R[261]={speaker:"Beau",text:"Okay, so we've built our app, we've packaged it, we even made it super fast. We're done, right? Time to ship it and become desktop app tycoons."},$R[262]={speaker:"Jo",text:"Almost. We built the car, tuned the engine, and gave it a great paint job. But we forgot to install locks on the doors and a good alarm system."},$R[263]={speaker:"Beau",text:"Security. Right. I always forget about that part. But I mean, it's basically just a website in a little box, isn't it? Can't we just use the same security stuff we use for a normal website?"},$R[264]={speaker:"Jo",text:"That's the trap everyone falls into. It's so much more than a website in a box. Because of that Node.js integration we talked about, your app doesn't just run in a browser sandbox. It has access... to the user's entire computer. The file system, the network, everything."},$R[265]={speaker:"Beau",text:"Oh. Right. The whole main process and renderer process thing. The main process has all the power."},$R[266]={speaker:"Jo",text:"Exactly. Think of it like this: a regular website is a guest in your home. It stays in the living room, it can't go opening your filing cabinets. But an Electron app? You've basically handed it the keys to the entire house. If that app is compromised, the attacker isn't just in the living room anymore. They're everywhere."},$R[267]={speaker:"Beau",text:"Okay, that's a terrifyingly clear analogy. I am now officially concerned. So... what's the first thing a bad guy with house keys tries to do?"},$R[268]={speaker:"Jo",text:"Often, they try something called Cross-Site Scripting, or XSS. It's a classic web attack, but in Electron, it's on steroids. It's where an attacker manages to inject malicious code into your app, and your app mistakenly runs it as if it were its own code."},$R[269]={speaker:"Beau",text:"How... how would they do that? Through a text box?"},$R[270]={speaker:"Jo",text:"That's a perfect example. Let's say your app has a feature where you enter your name, and it shows a 'Welcome, Beau!' message. If someone typed in a script tag instead of their name, and your app just blindly sticks that into the HTML... well, that script now runs. And since it's running inside your app, it could potentially do anything Node.js can do. Like... reading files from the disk."},$R[271]={speaker:"Beau",text:"So my friendly welcome message could... steal my tax returns. That's... not great. How do we stop that?"},$R[272]={speaker:"Jo",text:"The first, and most important rule, is something called 'context isolation'. By default, the code running in your renderer process—the webpage part—can directly talk to the main process, the part with all the power. Context isolation builds a wall between them."},$R[273]={speaker:"Beau",text:"A wall. Okay. So the webpage part can't just shout commands at the super-powerful Node.js part anymore?"},$R[274]={speaker:"Jo",text:"Exactly. Instead, you create what's called a 'preload' script. It's like a secure messenger that can cross the wall. You very carefully define only the specific, safe commands the renderer is allowed to send. So instead of giving it the whole toolkit, you just give it one specific screwdriver it's allowed to use."},$R[275]={speaker:"Beau",text:"So the malicious script might get in, but all it can do is ask my special messenger to... I dunno, change the welcome message text. It can't ask it to read my files because we never gave the messenger that ability."},$R[276]={speaker:"Jo",text:"You've got it. It limits the blast radius. The other big tool is a Content Security Policy, or CSP."},$R[277]={speaker:"Beau",text:"CSP... that sounds familiar from web development."},$R[278]={speaker:"Jo",text:"It is. It's essentially a whitelist of where your app is allowed to load resources from. You can tell it, 'Hey, you are only allowed to run scripts that are already in my app's files. Do not run any inline scripts or scripts from some random website'. It's another layer of defense."},$R[279]={speaker:"Beau",text:"So even if the attacker injects a script tag pointing to evil-hacker-dot-com, the CSP will just block it."},$R[280]={speaker:"Jo",text:"Right. It never even gets a chance to run. But there's one more thing that's less about code and more about... maintenance."},$R[281]={speaker:"Beau",text:"Oh no. You're going to tell me I have to do updates."},$R[282]={speaker:"Jo",text:"You have to do updates. Electron itself, Chromium, Node.js... they are massive, complex projects. People are finding new security holes in them all the time. The Electron team is constantly releasing patches for those holes."},$R[283]={speaker:"Beau",text:"So if I build my app on an old version of Electron, I'm basically shipping an app with a bunch of known, publicly documented vulnerabilities. I'm leaving the front door wide open."},$R[284]={speaker:"Jo",text:"And posting a sign that says 'the key is under the mat'. Keeping your dependencies up to date is probably the single most effective security practice you can have. Just run 'npm audit' every now and then to see if any of your packages have known issues."},$R[285]={speaker:"Beau",text:"Okay. So, to recap: One, use context isolation so the webpage part can't boss around the powerful Node part. Two, use a Content Security Policy to whitelist where code can come from. And three, don't be lazy, keep Electron updated."},$R[286]={speaker:"Jo",text:"That's a fantastic summary. It's not about making your app an impenetrable fortress, because nothing is. It's about making it a difficult, annoying target. Most attackers are looking for the easy win, the open door."},$R[287]={speaker:"Beau",text:"So we're not building Fort Knox, we're just making sure we're not the house with the sign that says 'key under the mat'."},$R[288]={speaker:"Jo",text:"Precisely. Just by following those few best practices, you're already ahead of a huge number of apps out there."}]}],songs:$R[289]=[],exams:$R[290]=[],guides:$R[291]=[],worksheets:$R[292]=[],flashcards:$R[293]=[],diagrams:$R[294]=[],documents:$R[295]=[],chapters:$R[296]=[$R[297]={uuid:"0",title:"Introduction to Electron",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[298]=[$R[299]={content:$R[300]={type:"header",text:"Desktop Apps, Web Code"},uuid:"0|0"},$R[301]={content:$R[302]={type:"text",text:"What if you could build a desktop application for Windows, macOS, and Linux using the same technologies you use to build websites? That's the core idea behind Electron. It's an open-source framework that lets developers create native-feeling desktop apps with HTML, CSS, and JavaScript."},uuid:"0|1"},$R[303]={content:$R[304]={type:"text",text:"This means a web developer can use their existing skills to create an app that runs directly on a computer, complete with its own icon in the dock or taskbar. Instead of learning platform-specific languages like C# for Windows or Swift for macOS, they can stick with the tools of the web."},uuid:"0|2"},$R[305]={content:$R[306]={type:"header",text:"How It Works"},uuid:"0|3"},$R[307]={content:$R[308]={type:"text",text:"Electron pulls this off by bundling two powerful open-source projects into a single package: Chromium and Node.js."},uuid:"0|4"},$R[309]={content:$R[310]={type:"blockquote",text:"Think of it as a tiny, customized web browser that runs your app's interface, combined with a powerful engine that can interact with the computer's operating system."},uuid:"0|5"},$R[311]={content:$R[312]={type:"text",text:"Here’s how the pieces fit together:\n\n* **Chromium** is the open-source browser project that powers Google Chrome. Electron uses it to render your application's user interface. This is the part that understands your HTML, styles it with CSS, and makes it interactive with JavaScript. Each window in your app is essentially a web page.\n\n* **Node.js** is a JavaScript runtime that lets you run JavaScript on a server or, in this case, on a desktop. Electron uses Node.js to handle the application's backend logic. This gives your app access to the computer's file system, network, and other native features that are normally off-limits to a regular website."},uuid:"0|6"},$R[313]={content:$R[314]={svgMarkup:"\x3C?xml version='1.0' encoding='UTF-8'?>\n\x3C!-- This file was generated by dvisvgm 2.11.1 -->\n\x3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='226.771653pt' height='172.071867pt' viewBox='123.492953 139.894202 226.771653 172.071867'>\n\x3Cdefs>\n\x3Cpath id='g0-79' d='M7.85056-4.423412C7.85056-6.057285 6.834371-7.023661 5.579078-7.023661C3.536737-7.023661 1.474471-4.662516 1.474471-2.351183C1.474471-.846824 2.410959 .219178 3.765878 .219178C5.758406 .219178 7.85056-2.022416 7.85056-4.423412ZM3.835616-.039851C2.929016-.039851 2.371108-.856787 2.371108-2.042341C2.371108-2.500623 2.510585-3.895392 3.20797-5.110834C3.73599-6.047323 4.64259-6.774595 5.50934-6.774595C6.286426-6.774595 7.003736-6.176837 7.003736-4.841843C7.003736-3.965131 6.645081-2.6401 6.117061-1.733499C5.469489-.627646 4.582814-.039851 3.835616-.039851Z'/>\n\x3Cpath id='g0-83' d='M6.276463-6.784558C6.286426-6.824408 6.296389-6.884184 6.296389-6.924035C6.296389-6.94396 6.286426-7.023661 6.1868-7.023661C6.136986-7.023661 6.127024-7.013699 6.03736-6.90411L5.589041-6.346202C5.200498-7.013699 4.493151-7.023661 4.293898-7.023661C3.068493-7.023661 1.982565-5.798257 1.982565-4.652553C1.982565-4.134496 2.201743-3.606476 2.779577-3.337484C2.839352-3.307597 3.058531-3.247821 3.20797-3.20797L3.696139-3.068493C4.214197-2.919054 4.293898-2.889166 4.463263-2.709838C4.572852-2.570361 4.682441-2.351183 4.682441-1.992528C4.682441-1.085928 3.905355-.089664 3.01868-.089664C2.271482-.089664 1.524284-.448319 1.524284-1.484433C1.524284-1.713574 1.574097-1.982565 1.603985-2.092154C1.603985-2.11208 1.613948-2.132005 1.613948-2.15193C1.613948-2.261519 1.524284-2.261519 1.464508-2.261519C1.344956-2.261519 1.325031-2.241594 1.285181-2.092154L.767123-.009963C.747198 .059776 .737235 .089664 .737235 .119552C.737235 .179328 .787049 .219178 .846824 .219178C.916563 .219178 .926526 .199253 1.006227 .099626C1.115816-.019925 1.374844-.33873 1.474471-.468244C1.843088 .069738 2.480697 .219178 2.998755 .219178C4.254047 .219178 5.3599-1.115816 5.3599-2.371108C5.3599-2.660025 5.290162-3.068493 5.031133-3.387298C4.782067-3.696139 4.662516-3.726027 3.716065-4.004981C3.526775-4.054795 3.217933-4.144458 3.16812-4.164384C2.82939-4.313823 2.660025-4.632628 2.660025-5.041096C2.660025-5.858032 3.427148-6.744707 4.273973-6.744707C5.210461-6.744707 5.489415-6.067248 5.489415-5.330012C5.489415-5.070984 5.479452-5.001245 5.439601-4.782067L5.429639-4.64259C5.429639-4.542964 5.529265-4.542964 5.579078-4.542964C5.688667-4.542964 5.718555-4.552927 5.758406-4.722291L6.276463-6.784558Z'/>\n\x3Cpath id='g0-97' d='M3.476961-.587796C3.58655-.099626 3.955168 .109589 4.303861 .109589C4.672478 .109589 4.881694-.139477 5.031133-.448319C5.210461-.826899 5.330012-1.404732 5.330012-1.424658C5.330012-1.524284 5.250311-1.524284 5.180573-1.524284C5.061021-1.524284 5.051059-1.514321 4.991283-1.295143C4.851806-.737235 4.662516-.109589 4.323786-.109589C4.064757-.109589 4.064757-.37858 4.064757-.518057C4.064757-.587796 4.064757-.747198 4.134496-1.026152L4.811955-3.73599C4.851806-3.875467 4.851806-3.895392 4.851806-3.945205C4.851806-4.154421 4.682441-4.204234 4.582814-4.204234C4.26401-4.204234 4.194271-3.865504 4.184309-3.815691C3.995019-4.244085 3.676214-4.403487 3.35741-4.403487C2.251557-4.403487 1.075965-2.889166 1.075965-1.43462C1.075965-.587796 1.534247 .109589 2.281445 .109589C2.6401 .109589 3.078456-.099626 3.476961-.587796ZM4.014944-3.118306L3.5467-1.235367C3.466999-.916563 2.849315-.109589 2.30137-.109589C1.833126-.109589 1.753425-.697385 1.753425-.996264C1.753425-1.494396 2.062267-2.660025 2.241594-3.078456C2.49066-3.686177 2.948941-4.184309 3.35741-4.184309C3.795766-4.184309 4.044832-3.666252 4.044832-3.247821C4.044832-3.227895 4.034869-3.178082 4.014944-3.118306Z'/>\n\x3Cpath id='g0-101' d='M2.381071-2.30137C2.67995-2.30137 3.347447-2.331258 3.825654-2.520548C4.612702-2.839352 4.612702-3.486924 4.612702-3.556663C4.612702-4.014944 4.244085-4.403487 3.606476-4.403487C2.560399-4.403487 1.135741-3.39726 1.135741-1.633873C1.135741-.737235 1.613948 .109589 2.560399 .109589C3.835616 .109589 4.662516-.886675 4.662516-1.036115C4.662516-1.085928 4.582814-1.195517 4.503113-1.195517C4.463263-1.195517 4.4533-1.185554 4.373599-1.085928C3.636364-.14944 2.749689-.109589 2.580324-.109589C1.932752-.109589 1.823163-.816936 1.823163-1.205479C1.823163-1.58406 1.92279-2.032379 1.992528-2.30137H2.381071ZM2.052304-2.520548C2.480697-4.154421 3.506849-4.184309 3.606476-4.184309C4.004981-4.184309 4.234122-3.915318 4.234122-3.576588C4.234122-2.520548 2.590286-2.520548 2.261519-2.520548H2.052304Z'/>\n\x3Cpath id='g0-103' d='M3.367372-.52802L3.158157 .308842C3.038605 .806974 2.978829 1.016189 2.699875 1.354919C2.30137 1.823163 1.902864 1.823163 1.753425 1.823163C1.62391 1.823163 1.315068 1.823163 1.046077 1.713574C1.24533 1.633873 1.364882 1.424658 1.364882 1.255293C1.364882 1.125778 1.275218 .936488 1.016189 .936488C.836862 .936488 .52802 1.075965 .52802 1.464508C.52802 1.863014 .896638 2.042341 1.733499 2.042341C2.779577 2.042341 3.536737 1.384807 3.726027 .627646L4.811955-3.73599C4.851806-3.88543 4.851806-3.905355 4.851806-3.945205C4.851806-4.154421 4.682441-4.204234 4.582814-4.204234C4.463263-4.204234 4.234122-4.124533 4.194271-3.835616C4.054795-4.124533 3.785803-4.403487 3.35741-4.403487C2.241594-4.403487 1.09589-2.929016 1.09589-1.524284C1.09589-.67746 1.564134 0 2.311333 0C2.819427 0 3.247821-.408468 3.367372-.52802ZM4.014944-3.128269L3.566625-1.315068C3.486924-.996264 2.879203-.219178 2.331258-.219178C1.793275-.219178 1.77335-.976339 1.77335-1.085928C1.77335-1.564134 2.072229-2.729763 2.281445-3.198007C2.530511-3.73599 2.968867-4.184309 3.35741-4.184309C3.955168-4.184309 4.044832-3.347447 4.044832-3.267746L4.014944-3.128269Z'/>\n\x3Cpath id='g0-105' d='M3.297634-1.424658C3.297634-1.524284 3.217933-1.524284 3.148194-1.524284C3.01868-1.524284 3.01868-1.504359 2.978829-1.354919C2.899128-1.066002 2.630137-.109589 2.052304-.109589C1.972603-.109589 1.833126-.119552 1.833126-.388543C1.833126-.647572 1.96264-.976339 2.092154-1.344956L2.729763-3.048568C2.82939-3.337484 2.849315-3.417186 2.849315-3.606476C2.849315-4.154421 2.470735-4.403487 2.102117-4.403487C1.165629-4.403487 .826899-2.919054 .826899-2.86924C.826899-2.769614 .926526-2.769614 .976339-2.769614C1.105853-2.769614 1.115816-2.789539 1.155666-2.929016C1.24533-3.257783 1.504359-4.184309 2.082192-4.184309C2.191781-4.184309 2.30137-4.134496 2.30137-3.905355C2.30137-3.666252 2.191781-3.377335 2.122042-3.188045L1.823163-2.361146C1.693649-2.032379 1.574097-1.703611 1.454545-1.374844C1.315068-.996264 1.275218-.886675 1.275218-.687422C1.275218-.298879 1.514321 .109589 2.032379 .109589C2.968867 .109589 3.297634-1.384807 3.297634-1.424658ZM3.247821-6.206725C3.247821-6.455791 3.048568-6.535492 2.909091-6.535492C2.699875-6.535492 2.430884-6.336239 2.430884-6.057285C2.430884-5.808219 2.630137-5.728518 2.769614-5.728518C2.968867-5.728518 3.247821-5.917808 3.247821-6.206725Z'/>\n\x3Cpath id='g0-109' d='M2.291407-1.743462C2.34122-1.96264 2.400996-2.171856 2.450809-2.391034C2.580324-2.879203 2.580324-2.899128 2.699875-3.108344C2.988792-3.606476 3.417186-4.184309 4.104608-4.184309C4.562889-4.184309 4.562889-3.676214 4.562889-3.526775C4.562889-3.257783 4.493151-2.968867 4.473225-2.879203L3.825654-.288917C3.805729-.229141 3.795766-.179328 3.795766-.14944C3.795766-.039851 3.875467 .109589 4.07472 .109589C4.194271 .109589 4.363636 .039851 4.433375-.14944L4.83188-1.743462C4.881694-1.96264 4.941469-2.171856 4.991283-2.391034C5.120797-2.879203 5.120797-2.899128 5.240349-3.108344C5.529265-3.606476 5.957659-4.184309 6.645081-4.184309C7.103362-4.184309 7.103362-3.676214 7.103362-3.526775C7.103362-2.909091 6.665006-1.723537 6.525529-1.325031C6.396015-.986301 6.366127-.896638 6.366127-.687422C6.366127-.249066 6.645081 .109589 7.123288 .109589C8.049813 .109589 8.388543-1.374844 8.388543-1.424658C8.388543-1.524284 8.308842-1.524284 8.239103-1.524284C8.109589-1.524284 8.109589-1.504359 8.069738-1.354919C7.990037-1.085928 7.721046-.109589 7.143213-.109589C6.933998-.109589 6.924035-.259029 6.924035-.398506C6.924035-.647572 7.023661-.9066 7.103362-1.145704C7.302615-1.673724 7.711083-2.789539 7.711083-3.367372C7.711083-4.204234 7.13325-4.403487 6.665006-4.403487C5.967621-4.403487 5.469489-3.965131 5.17061-3.526775C5.090909-4.214197 4.572852-4.403487 4.124533-4.403487C3.526775-4.403487 3.038605-4.07472 2.699875-3.616438C2.630137-4.104608 2.291407-4.403487 1.863014-4.403487C1.504359-4.403487 1.305106-4.174346 1.145704-3.875467C.956413-3.476961 .826899-2.889166 .826899-2.86924C.826899-2.769614 .926526-2.769614 .976339-2.769614C1.105853-2.769614 1.115816-2.779577 1.165629-2.998755C1.344956-3.696139 1.534247-4.184309 1.843088-4.184309C2.102117-4.184309 2.102117-3.895392 2.102117-3.785803C2.102117-3.626401 2.072229-3.437111 2.032379-3.277709L1.285181-.288917C1.265255-.229141 1.255293-.179328 1.255293-.14944C1.255293-.039851 1.334994 .109589 1.534247 .109589C1.653798 .109589 1.823163 .039851 1.892902-.14944L2.291407-1.743462Z'/>\n\x3Cpath id='g0-110' d='M2.291407-1.743462C2.34122-1.96264 2.400996-2.171856 2.450809-2.391034C2.580324-2.899128 2.580324-2.909091 2.749689-3.198007C2.889166-3.437111 3.337484-4.184309 4.094645-4.184309C4.533001-4.184309 4.552927-3.73599 4.552927-3.526775C4.552927-2.909091 4.11457-1.723537 3.975093-1.325031C3.845579-.986301 3.815691-.896638 3.815691-.687422C3.815691-.249066 4.094645 .109589 4.572852 .109589C5.499377 .109589 5.838107-1.374844 5.838107-1.424658C5.838107-1.524284 5.758406-1.524284 5.688667-1.524284C5.559153-1.524284 5.559153-1.504359 5.519303-1.354919C5.439601-1.085928 5.17061-.109589 4.592777-.109589C4.383562-.109589 4.373599-.259029 4.373599-.398506C4.373599-.647572 4.473225-.9066 4.552927-1.145704C4.752179-1.673724 5.160648-2.789539 5.160648-3.367372C5.160648-4.184309 4.612702-4.403487 4.124533-4.403487C3.307597-4.403487 2.82939-3.805729 2.699875-3.616438C2.630137-4.104608 2.291407-4.403487 1.863014-4.403487C1.504359-4.403487 1.305106-4.174346 1.145704-3.875467C.956413-3.476961 .826899-2.889166 .826899-2.86924C.826899-2.769614 .926526-2.769614 .976339-2.769614C1.105853-2.769614 1.115816-2.779577 1.165629-2.998755C1.344956-3.696139 1.534247-4.184309 1.843088-4.184309C2.102117-4.184309 2.102117-3.895392 2.102117-3.785803C2.102117-3.626401 2.072229-3.437111 2.032379-3.277709L1.285181-.288917C1.265255-.229141 1.255293-.179328 1.255293-.14944C1.255293-.039851 1.334994 .109589 1.534247 .109589C1.653798 .109589 1.823163 .039851 1.892902-.14944L2.291407-1.743462Z'/>\n\x3Cpath id='g0-112' d='M.896638 1.275218C.816936 1.58406 .737235 1.613948 .348692 1.62391C.259029 1.62391 .139477 1.62391 .139477 1.8132C.139477 1.882939 .18929 1.932752 .259029 1.932752C.52802 1.932752 .816936 1.902864 1.09589 1.902864C1.414695 1.902864 1.753425 1.932752 2.062267 1.932752C2.122042 1.932752 2.251557 1.932752 2.251557 1.743462C2.251557 1.62391 2.15193 1.62391 2.012453 1.62391C1.504359 1.62391 1.504359 1.564134 1.504359 1.464508C1.504359 1.404732 1.574097 1.145704 1.613948 .986301L1.972603-.468244C2.042341-.298879 2.291407 .109589 2.809465 .109589C3.895392 .109589 5.080946-1.364882 5.080946-2.849315C5.080946-3.915318 4.483188-4.403487 3.88543-4.403487C3.39726-4.403487 2.968867-4.044832 2.67995-3.706102C2.560399-4.283935 2.11208-4.403487 1.863014-4.403487C1.504359-4.403487 1.305106-4.174346 1.145704-3.875467C.956413-3.476961 .826899-2.889166 .826899-2.86924C.826899-2.769614 .926526-2.769614 .976339-2.769614C1.105853-2.769614 1.115816-2.779577 1.165629-2.998755C1.344956-3.696139 1.534247-4.184309 1.843088-4.184309C2.102117-4.184309 2.102117-3.895392 2.102117-3.785803C2.102117-3.726027 2.102117-3.566625 2.032379-3.287671L.896638 1.275218ZM2.620174-3.058531C2.699875-3.39726 3.317559-4.184309 3.865504-4.184309C4.313823-4.184309 4.41345-3.616438 4.41345-3.297634C4.41345-2.879203 4.144458-1.693649 3.855542-1.05604C3.73599-.806974 3.307597-.109589 2.799502-.109589C2.221669-.109589 2.122042-.956413 2.122042-1.036115C2.122042-1.066002 2.132005-1.09589 2.15193-1.175592L2.620174-3.058531Z'/>\n\x3Cpath id='g0-114' d='M2.570361-2.86924C2.580324-2.899128 3.028643-4.184309 3.88543-4.184309C3.935243-4.184309 4.214197-4.184309 4.41345-4.044832C4.064757-3.935243 4.034869-3.616438 4.034869-3.566625C4.034869-3.437111 4.124533-3.247821 4.383562-3.247821C4.562889-3.247821 4.871731-3.387298 4.871731-3.775841C4.871731-4.293898 4.224159-4.403487 3.895392-4.403487C3.20797-4.403487 2.849315-3.905355 2.689913-3.686177C2.580324-4.214197 2.191781-4.403487 1.863014-4.403487C1.504359-4.403487 1.305106-4.174346 1.145704-3.875467C.956413-3.476961 .826899-2.889166 .826899-2.86924C.826899-2.769614 .926526-2.769614 .976339-2.769614C1.105853-2.769614 1.115816-2.779577 1.165629-2.998755C1.344956-3.696139 1.534247-4.184309 1.843088-4.184309C2.102117-4.184309 2.102117-3.895392 2.102117-3.785803C2.102117-3.626401 2.072229-3.437111 2.032379-3.277709L1.285181-.288917C1.265255-.229141 1.255293-.179328 1.255293-.14944C1.255293-.039851 1.334994 .109589 1.534247 .109589C1.833126 .109589 1.902864-.179328 1.92279-.259029L2.570361-2.86924Z'/>\n\x3Cpath id='g0-115' d='M2.460772-1.96264C2.899128-1.863014 3.347447-1.763387 3.347447-1.225405C3.347447-.9066 3.078456-.109589 2.052304-.109589C1.833126-.109589 1.255293-.159402 1.09589-.667497C1.603985-.71731 1.603985-1.135741 1.603985-1.155666C1.603985-1.344956 1.474471-1.474471 1.265255-1.474471C1.036115-1.474471 .757161-1.305106 .757161-.856787C.757161-.249066 1.334994 .109589 2.042341 .109589C3.536737 .109589 3.915318-1.105853 3.915318-1.564134C3.915318-2.430884 3.138232-2.610212 2.729763-2.699875C2.450809-2.759651 2.092154-2.839352 2.092154-3.267746C2.092154-3.506849 2.30137-4.184309 3.098381-4.184309C3.367372-4.184309 3.73599-4.084682 3.845579-3.696139C3.526775-3.656289 3.447073-3.387298 3.447073-3.287671C3.447073-3.178082 3.506849-3.008717 3.745953-3.008717C3.915318-3.008717 4.174346-3.128269 4.174346-3.556663C4.174346-4.014944 3.765878-4.403487 3.108344-4.403487C1.942715-4.403487 1.534247-3.447073 1.534247-2.929016C1.534247-2.161893 2.181818-2.022416 2.460772-1.96264Z'/>\n\x3Cpath id='g0-116' d='M2.590286-3.985056H3.437111C3.606476-3.985056 3.716065-3.985056 3.716065-4.174346C3.716065-4.293898 3.626401-4.293898 3.466999-4.293898H2.669988L3.038605-5.768369C3.078456-5.907846 3.078456-5.927771 3.078456-5.977584C3.078456-6.1868 2.909091-6.236613 2.809465-6.236613C2.560399-6.236613 2.460772-6.027397 2.420922-5.877958L2.032379-4.293898H1.185554C1.016189-4.293898 .9066-4.293898 .9066-4.104608C.9066-3.985056 .996264-3.985056 1.155666-3.985056H1.952677L1.235367-1.125778C1.225405-1.085928 1.185554-.926526 1.185554-.787049C1.185554-.288917 1.514321 .109589 2.032379 .109589C3.038605 .109589 3.5467-1.374844 3.5467-1.424658C3.5467-1.524284 3.466999-1.524284 3.39726-1.524284C3.277709-1.524284 3.277709-1.514321 3.198007-1.334994C3.01868-.856787 2.620174-.109589 2.052304-.109589C1.783313-.109589 1.783313-.358655 1.783313-.518057C1.783313-.587796 1.783313-.747198 1.853051-1.026152L2.590286-3.985056Z'/>\n\x3Cpath id='g0-121' d='M3.556663-.259029C3.178082 1.384807 2.440847 1.823163 1.942715 1.823163C1.464508 1.823163 1.325031 1.444583 1.325031 1.39477C1.325031 1.384807 1.334994 1.374844 1.404732 1.364882C1.713574 1.315068 1.833126 1.046077 1.833126 .886675C1.833126 .67746 1.673724 .56787 1.494396 .56787C1.374844 .56787 .986301 .627646 .986301 1.185554C.986301 1.703611 1.39477 2.042341 1.942715 2.042341C2.978829 2.042341 3.88543 1.016189 4.134496 .029888L5.110834-3.895392C5.120797-3.955168 5.140722-4.004981 5.140722-4.034869C5.140722-4.144458 5.061021-4.293898 4.861768-4.293898C4.562889-4.293898 4.493151-4.004981 4.473225-3.92528L3.745953-.996264C3.676214-.707347 3.277709-.109589 2.689913-.109589C2.241594-.109589 2.15193-.547945 2.15193-.876712C2.15193-1.484433 2.480697-2.381071 2.729763-3.058531C2.809465-3.267746 2.859278-3.407223 2.859278-3.596513C2.859278-4.094645 2.530511-4.403487 2.102117-4.403487C1.175592-4.403487 .826899-2.929016 .826899-2.86924C.826899-2.769614 .926526-2.769614 .976339-2.769614C1.105853-2.769614 1.115816-2.789539 1.155666-2.929016C1.235367-3.237858 1.504359-4.184309 2.082192-4.184309C2.191781-4.184309 2.30137-4.154421 2.30137-3.895392C2.30137-3.656289 2.201743-3.387298 2.062267-2.998755C1.803238-2.30137 1.544209-1.564134 1.544209-1.046077C1.544209-.179328 2.122042 .109589 2.660025 .109589C3.118306 .109589 3.427148-.129514 3.556663-.259029Z'/>\n\x3Cpath id='g4-65' d='M3.965131-6.933998C3.915318-7.063512 3.895392-7.13325 3.73599-7.13325S3.5467-7.073474 3.496887-6.933998L1.43462-.976339C1.255293-.468244 .856787-.318804 .318804-.308842V0C.547945-.009963 .976339-.029888 1.334994-.029888C1.643836-.029888 2.161893-.009963 2.480697 0V-.308842C1.982565-.308842 1.733499-.557908 1.733499-.816936C1.733499-.846824 1.743462-.946451 1.753425-.966376L2.211706-2.271482H4.672478L5.200498-.747198C5.210461-.707347 5.230386-.647572 5.230386-.607721C5.230386-.308842 4.672478-.308842 4.403487-.308842V0C4.762142-.029888 5.459527-.029888 5.838107-.029888C6.266501-.029888 6.724782-.019925 7.143213 0V-.308842H6.963885C6.366127-.308842 6.22665-.37858 6.117061-.707347L3.965131-6.933998ZM3.437111-5.818182L4.562889-2.580324H2.321295L3.437111-5.818182Z'/>\n\x3Cpath id='g4-70' d='M5.798257-6.774595H.328767V-6.465753H.56787C1.334994-6.465753 1.354919-6.356164 1.354919-5.997509V-.777086C1.354919-.418431 1.334994-.308842 .56787-.308842H.328767V0C.67746-.029888 1.454545-.029888 1.843088-.029888C2.251557-.029888 3.158157-.029888 3.516812 0V-.308842H3.188045C2.241594-.308842 2.241594-.438356 2.241594-.787049V-3.237858H3.098381C4.054795-3.237858 4.154421-2.919054 4.154421-2.072229H4.403487V-4.712329H4.154421C4.154421-3.875467 4.054795-3.5467 3.098381-3.5467H2.241594V-6.067248C2.241594-6.396015 2.261519-6.465753 2.729763-6.465753H3.92528C5.419676-6.465753 5.668742-5.907846 5.828144-4.533001H6.07721L5.798257-6.774595Z'/>\n\x3Cpath id='g4-73' d='M2.241594-6.027397C2.241594-6.386052 2.271482-6.495641 3.058531-6.495641H3.317559V-6.804483C2.968867-6.774595 2.181818-6.774595 1.803238-6.774595C1.414695-6.774595 .627646-6.774595 .278954-6.804483V-6.495641H.537983C1.325031-6.495641 1.354919-6.386052 1.354919-6.027397V-.777086C1.354919-.418431 1.325031-.308842 .537983-.308842H.278954V0C.627646-.029888 1.414695-.029888 1.793275-.029888C2.181818-.029888 2.968867-.029888 3.317559 0V-.308842H3.058531C2.271482-.308842 2.241594-.418431 2.241594-.777086V-6.027397Z'/>\n\x3Cpath id='g4-78' d='M2.311333-6.674969C2.221669-6.794521 2.211706-6.804483 2.022416-6.804483H.328767V-6.495641H.617684C.767123-6.495641 .966376-6.485679 1.115816-6.475716C1.344956-6.445828 1.354919-6.435866 1.354919-6.246575V-1.046077C1.354919-.777086 1.354919-.308842 .328767-.308842V0C.67746-.009963 1.165629-.029888 1.494396-.029888S2.311333-.009963 2.660025 0V-.308842C1.633873-.308842 1.633873-.777086 1.633873-1.046077V-6.22665C1.683686-6.176837 1.693649-6.166874 1.733499-6.107098L5.798257-.129514C5.88792-.009963 5.897883 0 5.967621 0C6.107098 0 6.107098-.069738 6.107098-.259029V-5.758406C6.107098-6.027397 6.107098-6.495641 7.13325-6.495641V-6.804483C6.784558-6.794521 6.296389-6.774595 5.967621-6.774595S5.150685-6.794521 4.801993-6.804483V-6.495641C5.828144-6.495641 5.828144-6.027397 5.828144-5.758406V-1.504359L2.311333-6.674969Z'/>\n\x3Cpath id='g4-79' d='M7.183064-3.377335C7.183064-5.409714 5.678705-7.023661 3.865504-7.023661C2.082192-7.023661 .557908-5.429639 .557908-3.377335C.557908-1.334994 2.092154 .219178 3.865504 .219178C5.678705 .219178 7.183064-1.364882 7.183064-3.377335ZM3.875467-.039851C2.919054-.039851 1.58406-.916563 1.58406-3.516812C1.58406-6.097136 3.038605-6.774595 3.865504-6.774595C4.732254-6.774595 6.156912-6.067248 6.156912-3.516812C6.156912-.876712 4.79203-.039851 3.875467-.039851Z'/>\n\x3Cpath id='g4-80' d='M2.261519-3.148194H3.945205C5.140722-3.148194 6.216687-3.955168 6.216687-4.951432C6.216687-5.927771 5.230386-6.804483 3.865504-6.804483H.348692V-6.495641H.587796C1.354919-6.495641 1.374844-6.386052 1.374844-6.027397V-.777086C1.374844-.418431 1.354919-.308842 .587796-.308842H.348692V0C.697385-.029888 1.43462-.029888 1.8132-.029888S2.938979-.029888 3.287671 0V-.308842H3.048568C2.281445-.308842 2.261519-.418431 2.261519-.777086V-3.148194ZM2.231631-3.407223V-6.097136C2.231631-6.425903 2.251557-6.495641 2.719801-6.495641H3.606476C5.190535-6.495641 5.190535-5.439601 5.190535-4.951432C5.190535-4.483188 5.190535-3.407223 3.606476-3.407223H2.231631Z'/>\n\x3Cpath id='g4-83' d='M3.476961-3.865504L2.201743-4.174346C1.58406-4.323786 1.195517-4.861768 1.195517-5.439601C1.195517-6.136986 1.733499-6.744707 2.510585-6.744707C4.174346-6.744707 4.393524-5.110834 4.4533-4.662516C4.463263-4.60274 4.463263-4.542964 4.572852-4.542964C4.702366-4.542964 4.702366-4.592777 4.702366-4.782067V-6.784558C4.702366-6.953923 4.702366-7.023661 4.592777-7.023661C4.523039-7.023661 4.513076-7.013699 4.443337-6.894147L4.094645-6.326276C3.795766-6.615193 3.387298-7.023661 2.500623-7.023661C1.39477-7.023661 .557908-6.146949 .557908-5.090909C.557908-4.26401 1.085928-3.536737 1.863014-3.267746C1.972603-3.227895 2.480697-3.108344 3.178082-2.938979C3.447073-2.86924 3.745953-2.799502 4.024907-2.430884C4.234122-2.171856 4.333748-1.843088 4.333748-1.514321C4.333748-.806974 3.835616-.089664 2.998755-.089664C2.709838-.089664 1.952677-.139477 1.424658-.627646C.846824-1.165629 .816936-1.803238 .806974-2.161893C.797011-2.261519 .71731-2.261519 .687422-2.261519C.557908-2.261519 .557908-2.191781 .557908-2.012453V-.019925C.557908 .14944 .557908 .219178 .667497 .219178C.737235 .219178 .747198 .199253 .816936 .089664C.816936 .079701 .846824 .049813 1.175592-.478207C1.484433-.139477 2.122042 .219178 3.008717 .219178C4.174346 .219178 4.971357-.757161 4.971357-1.853051C4.971357-2.849315 4.313823-3.666252 3.476961-3.865504Z'/>\n\x3Cpath id='g4-101' d='M1.115816-2.510585C1.175592-3.995019 2.012453-4.244085 2.351183-4.244085C3.377335-4.244085 3.476961-2.899128 3.476961-2.510585H1.115816ZM1.105853-2.30137H3.88543C4.104608-2.30137 4.134496-2.30137 4.134496-2.510585C4.134496-3.496887 3.596513-4.463263 2.351183-4.463263C1.195517-4.463263 .278954-3.437111 .278954-2.191781C.278954-.856787 1.325031 .109589 2.470735 .109589C3.686177 .109589 4.134496-.996264 4.134496-1.185554C4.134496-1.285181 4.054795-1.305106 4.004981-1.305106C3.915318-1.305106 3.895392-1.24533 3.875467-1.165629C3.526775-.139477 2.630137-.139477 2.530511-.139477C2.032379-.139477 1.633873-.438356 1.404732-.806974C1.105853-1.285181 1.105853-1.942715 1.105853-2.30137Z'/>\n\x3Cpath id='g4-105' d='M1.763387-4.403487L.368618-4.293898V-3.985056C1.016189-3.985056 1.105853-3.92528 1.105853-3.437111V-.757161C1.105853-.308842 .996264-.308842 .328767-.308842V0C.647572-.009963 1.185554-.029888 1.424658-.029888C1.77335-.029888 2.122042-.009963 2.460772 0V-.308842C1.803238-.308842 1.763387-.358655 1.763387-.747198V-4.403487ZM1.803238-6.136986C1.803238-6.455791 1.554172-6.665006 1.275218-6.665006C.966376-6.665006 .747198-6.396015 .747198-6.136986C.747198-5.867995 .966376-5.608966 1.275218-5.608966C1.554172-5.608966 1.803238-5.818182 1.803238-6.136986Z'/>\n\x3Cpath id='g4-107' d='M1.05604-.757161C1.05604-.308842 .946451-.308842 .278954-.308842V0C.607721-.009963 1.075965-.029888 1.364882-.029888C1.663761-.029888 2.062267-.019925 2.460772 0V-.308842C1.793275-.308842 1.683686-.308842 1.683686-.757161V-1.783313L2.321295-2.331258C3.088418-1.275218 3.506849-.71731 3.506849-.537983C3.506849-.348692 3.337484-.308842 3.148194-.308842V0C3.427148-.009963 4.014944-.029888 4.224159-.029888C4.513076-.029888 4.801993-.019925 5.090909 0V-.308842C4.722291-.308842 4.503113-.308842 4.124533-.836862L2.859278-2.620174C2.849315-2.6401 2.799502-2.699875 2.799502-2.729763C2.799502-2.769614 3.506849-3.367372 3.606476-3.447073C4.234122-3.955168 4.652553-3.975093 4.861768-3.985056V-4.293898C4.572852-4.26401 4.443337-4.26401 4.164384-4.26401C3.805729-4.26401 3.188045-4.283935 3.048568-4.293898V-3.985056C3.237858-3.975093 3.337484-3.865504 3.337484-3.73599C3.337484-3.536737 3.198007-3.417186 3.118306-3.347447L1.713574-2.132005V-6.914072L.278954-6.804483V-6.495641C.976339-6.495641 1.05604-6.425903 1.05604-5.937733V-.757161Z'/>\n\x3Cpath id='g4-108' d='M1.763387-6.914072L.328767-6.804483V-6.495641C1.026152-6.495641 1.105853-6.425903 1.105853-5.937733V-.757161C1.105853-.308842 .996264-.308842 .328767-.308842V0C.657534-.009963 1.185554-.029888 1.43462-.029888S2.171856-.009963 2.540473 0V-.308842C1.872976-.308842 1.763387-.308842 1.763387-.757161V-6.914072Z'/>\n\x3Cpath id='g4-109' d='M1.09589-3.427148V-.757161C1.09589-.308842 .986301-.308842 .318804-.308842V0C.667497-.009963 1.175592-.029888 1.444583-.029888C1.703611-.029888 2.221669-.009963 2.560399 0V-.308842C1.892902-.308842 1.783313-.308842 1.783313-.757161V-2.590286C1.783313-3.626401 2.49066-4.184309 3.128269-4.184309C3.755915-4.184309 3.865504-3.646326 3.865504-3.078456V-.757161C3.865504-.308842 3.755915-.308842 3.088418-.308842V0C3.437111-.009963 3.945205-.029888 4.214197-.029888C4.473225-.029888 4.991283-.009963 5.330012 0V-.308842C4.662516-.308842 4.552927-.308842 4.552927-.757161V-2.590286C4.552927-3.626401 5.260274-4.184309 5.897883-4.184309C6.525529-4.184309 6.635118-3.646326 6.635118-3.078456V-.757161C6.635118-.308842 6.525529-.308842 5.858032-.308842V0C6.206725-.009963 6.714819-.029888 6.983811-.029888C7.242839-.029888 7.760897-.009963 8.099626 0V-.308842C7.581569-.308842 7.332503-.308842 7.32254-.607721V-2.510585C7.32254-3.367372 7.32254-3.676214 7.013699-4.034869C6.874222-4.204234 6.545455-4.403487 5.967621-4.403487C5.13076-4.403487 4.692403-3.805729 4.523039-3.427148C4.383562-4.293898 3.646326-4.403487 3.198007-4.403487C2.470735-4.403487 2.002491-3.975093 1.723537-3.35741V-4.403487L.318804-4.293898V-3.985056C1.016189-3.985056 1.09589-3.915318 1.09589-3.427148Z'/>\n\x3Cpath id='g4-111' d='M4.692403-2.132005C4.692403-3.407223 3.696139-4.463263 2.49066-4.463263C1.24533-4.463263 .278954-3.377335 .278954-2.132005C.278954-.846824 1.315068 .109589 2.480697 .109589C3.686177 .109589 4.692403-.86675 4.692403-2.132005ZM2.49066-.139477C2.062267-.139477 1.62391-.348692 1.354919-.806974C1.105853-1.24533 1.105853-1.853051 1.105853-2.211706C1.105853-2.600249 1.105853-3.138232 1.344956-3.576588C1.613948-4.034869 2.082192-4.244085 2.480697-4.244085C2.919054-4.244085 3.347447-4.024907 3.606476-3.596513S3.865504-2.590286 3.865504-2.211706C3.865504-1.853051 3.865504-1.315068 3.646326-.876712C3.427148-.428394 2.988792-.139477 2.49066-.139477Z'/>\n\x3Cpath id='g4-114' d='M1.663761-3.307597V-4.403487L.278954-4.293898V-3.985056C.976339-3.985056 1.05604-3.915318 1.05604-3.427148V-.757161C1.05604-.308842 .946451-.308842 .278954-.308842V0C.667497-.009963 1.135741-.029888 1.414695-.029888C1.8132-.029888 2.281445-.029888 2.67995 0V-.308842H2.470735C1.733499-.308842 1.713574-.418431 1.713574-.777086V-2.311333C1.713574-3.297634 2.132005-4.184309 2.889166-4.184309C2.958904-4.184309 2.978829-4.184309 2.998755-4.174346C2.968867-4.164384 2.769614-4.044832 2.769614-3.785803C2.769614-3.506849 2.978829-3.35741 3.198007-3.35741C3.377335-3.35741 3.626401-3.476961 3.626401-3.795766S3.317559-4.403487 2.889166-4.403487C2.161893-4.403487 1.803238-3.73599 1.663761-3.307597Z'/>\n\x3Cpath id='g4-115' d='M2.072229-1.932752C2.291407-1.892902 3.108344-1.733499 3.108344-1.016189C3.108344-.508095 2.759651-.109589 1.982565-.109589C1.145704-.109589 .787049-.67746 .597758-1.524284C.56787-1.653798 .557908-1.693649 .458281-1.693649C.328767-1.693649 .328767-1.62391 .328767-1.444583V-.129514C.328767 .039851 .328767 .109589 .438356 .109589C.488169 .109589 .498132 .099626 .687422-.089664C.707347-.109589 .707347-.129514 .886675-.318804C1.325031 .099626 1.77335 .109589 1.982565 .109589C3.128269 .109589 3.58655-.557908 3.58655-1.275218C3.58655-1.803238 3.287671-2.102117 3.16812-2.221669C2.839352-2.540473 2.450809-2.620174 2.032379-2.699875C1.474471-2.809465 .806974-2.938979 .806974-3.516812C.806974-3.865504 1.066002-4.273973 1.92279-4.273973C3.01868-4.273973 3.068493-3.377335 3.088418-3.068493C3.098381-2.978829 3.188045-2.978829 3.20797-2.978829C3.337484-2.978829 3.337484-3.028643 3.337484-3.217933V-4.224159C3.337484-4.393524 3.337484-4.463263 3.227895-4.463263C3.178082-4.463263 3.158157-4.463263 3.028643-4.343711C2.998755-4.303861 2.899128-4.214197 2.859278-4.184309C2.480697-4.463263 2.072229-4.463263 1.92279-4.463263C.707347-4.463263 .328767-3.795766 .328767-3.237858C.328767-2.889166 .488169-2.610212 .757161-2.391034C1.075965-2.132005 1.354919-2.072229 2.072229-1.932752Z'/>\n\x3Cpath id='g4-116' d='M1.723537-3.985056H3.148194V-4.293898H1.723537V-6.127024H1.474471C1.464508-5.310087 1.165629-4.244085 .18929-4.204234V-3.985056H1.036115V-1.235367C1.036115-.009963 1.96264 .109589 2.321295 .109589C3.028643 .109589 3.307597-.597758 3.307597-1.235367V-1.803238H3.058531V-1.255293C3.058531-.518057 2.759651-.139477 2.391034-.139477C1.723537-.139477 1.723537-1.046077 1.723537-1.215442V-3.985056Z'/>\n\x3Cpath id='g4-119' d='M6.166874-3.347447C6.346202-3.845579 6.655044-3.975093 7.003736-3.985056V-4.293898C6.784558-4.273973 6.495641-4.26401 6.276463-4.26401C5.987547-4.26401 5.539228-4.283935 5.349938-4.293898V-3.985056C5.708593-3.975093 5.927771-3.795766 5.927771-3.506849C5.927771-3.447073 5.927771-3.427148 5.877958-3.297634L4.971357-.747198L3.985056-3.526775C3.945205-3.646326 3.935243-3.666252 3.935243-3.716065C3.935243-3.985056 4.323786-3.985056 4.523039-3.985056V-4.293898C4.234122-4.283935 3.726027-4.26401 3.486924-4.26401C3.188045-4.26401 2.899128-4.273973 2.600249-4.293898V-3.985056C2.968867-3.985056 3.128269-3.965131 3.227895-3.835616C3.277709-3.775841 3.387298-3.476961 3.457036-3.287671L2.600249-.876712L1.653798-3.536737C1.603985-3.656289 1.603985-3.676214 1.603985-3.716065C1.603985-3.985056 1.992528-3.985056 2.191781-3.985056V-4.293898C1.892902-4.283935 1.334994-4.26401 1.105853-4.26401C1.066002-4.26401 .537983-4.273973 .179328-4.293898V-3.985056C.67746-3.985056 .797011-3.955168 .916563-3.636364L2.171856-.109589C2.221669 .029888 2.251557 .109589 2.381071 .109589S2.530511 .049813 2.580324-.089664L3.58655-2.909091L4.60274-.079701C4.64259 .029888 4.672478 .109589 4.801993 .109589S4.961395 .019925 5.001245-.079701L6.166874-3.347447Z'/>\n\x3Cpath id='g4-121' d='M4.134496-3.347447C4.393524-3.975093 4.901619-3.985056 5.061021-3.985056V-4.293898C4.83188-4.273973 4.542964-4.26401 4.313823-4.26401C4.134496-4.26401 3.666252-4.283935 3.447073-4.293898V-3.985056C3.755915-3.975093 3.915318-3.805729 3.915318-3.556663C3.915318-3.457036 3.905355-3.437111 3.855542-3.317559L2.849315-.86675L1.743462-3.5467C1.703611-3.646326 1.683686-3.686177 1.683686-3.726027C1.683686-3.985056 2.052304-3.985056 2.241594-3.985056V-4.293898C1.982565-4.283935 1.325031-4.26401 1.155666-4.26401C.886675-4.26401 .488169-4.273973 .18929-4.293898V-3.985056C.667497-3.985056 .856787-3.985056 .996264-3.636364L2.49066 0C2.440847 .129514 2.30137 .458281 2.241594 .587796C2.022416 1.135741 1.743462 1.823163 1.105853 1.823163C1.05604 1.823163 .826899 1.823163 .637609 1.643836C.946451 1.603985 1.026152 1.384807 1.026152 1.225405C1.026152 .966376 .836862 .806974 .607721 .806974C.408468 .806974 .18929 .936488 .18929 1.235367C.18929 1.683686 .607721 2.042341 1.105853 2.042341C1.733499 2.042341 2.141968 1.474471 2.381071 .9066L4.134496-3.347447Z'/>\n\x3Cpath id='g5-40' d='M2.475716-5.230386C1.150685-4.29589 .801993-2.817435 .801993-1.750436C.801993-.767123 1.094894 .760149 2.475716 1.736488C2.531507 1.736488 2.615193 1.736488 2.615193 1.652802C2.615193 1.610959 2.594271 1.597011 2.545455 1.548194C1.617933 .711333 1.276214-.474222 1.276214-1.743462C1.276214-3.626401 1.994521-4.546949 2.566376-5.063014C2.594271-5.090909 2.615193-5.111831 2.615193-5.1467C2.615193-5.230386 2.531507-5.230386 2.475716-5.230386Z'/>\n\x3Cpath id='g5-41' d='M.627646-5.230386C.578829-5.230386 .495143-5.230386 .495143-5.1467C.495143-5.111831 .516065-5.090909 .557908-5.042092C1.157659-4.491158 1.827148-3.549689 1.827148-1.750436C1.827148-.292902 1.373848 .808966 .620672 1.492403C.502117 1.610959 .495143 1.617933 .495143 1.652802S.516065 1.736488 .585803 1.736488C.669489 1.736488 1.332005 1.276214 1.792279 .404483C2.099128-.174346 2.30137-.927522 2.30137-1.743462C2.30137-2.726775 2.008468-4.254047 .627646-5.230386Z'/>\n\x3Cpath id='g5-45' d='M2.189788-1.262267V-1.736488H.139477V-1.262267H2.189788Z'/>\n\x3Cpath id='g5-67' d='M5.188543-4.721295C5.188543-4.839851 5.188543-4.902615 5.090909-4.902615C5.063014-4.902615 5.028144-4.902615 4.972354-4.818929L4.60274-4.288917C4.309838-4.581818 3.828643-4.902615 3.159153-4.902615C1.694645-4.902615 .488169-3.772852 .488169-2.385056C.488169-.969365 1.715567 .139477 3.159153 .139477C4.393524 .139477 5.188543-.781071 5.188543-1.63188C5.188543-1.708593 5.181569-1.764384 5.069988-1.764384C5.028144-1.764384 4.958406-1.764384 4.951432-1.673724C4.895641-.550934 3.947198-.111582 3.256787-.111582C2.510585-.111582 1.234371-.564882 1.234371-2.378082C1.234371-4.267995 2.587298-4.651557 3.242839-4.651557C3.93325-4.651557 4.756164-4.191283 4.937484-2.991781C4.951432-2.908095 5.014197-2.908095 5.063014-2.908095C5.188543-2.908095 5.188543-2.949938 5.188543-3.089415V-4.721295Z'/>\n\x3Cpath id='g5-73' d='M1.771357-4.191283C1.771357-4.428394 1.771357-4.51208 2.343213-4.51208H2.524533V-4.763138C2.468742-4.763138 1.715567-4.735243 1.443587-4.735243C1.164633-4.735243 .397509-4.763138 .355666-4.763138V-4.51208H.536986C1.108842-4.51208 1.108842-4.428394 1.108842-4.191283V-.571856C1.108842-.334745 1.108842-.251059 .536986-.251059H.355666V0C.411457 0 1.164633-.027895 1.436613-.027895C1.715567-.027895 2.48269 0 2.524533 0V-.251059H2.343213C1.771357-.251059 1.771357-.334745 1.771357-.571856V-4.191283Z'/>\n\x3Cpath id='g5-80' d='M1.785305-2.161893H3.054545C4.065753-2.161893 4.860772-2.747696 4.860772-3.452055C4.860772-4.142466 4.079701-4.763138 3.054545-4.763138H.404483V-4.51208H.571856C1.108842-4.51208 1.12279-4.442341 1.12279-4.198257V-.564882C1.12279-.327771 1.108842-.251059 .571856-.251059H.404483V0C.753176-.013948 1.199502-.027895 1.45056-.027895C1.708593-.027895 2.154919-.013948 2.503611 0V-.251059H2.336239C1.799253-.251059 1.785305-.320797 1.785305-.564882V-2.161893ZM2.880199-4.51208C4.044832-4.51208 4.11457-3.856538 4.11457-3.452055C4.11457-3.145205 4.11457-2.385056 2.880199-2.385056H1.75741V-4.2401C1.75741-4.456289 1.764384-4.51208 2.092154-4.51208H2.880199Z'/>\n\x3Cpath id='g5-97' d='M3.110336-1.868991C3.110336-2.238605 3.110336-2.503611 2.789539-2.761644C2.503611-2.998755 2.168867-3.110336 1.75741-3.110336C1.094894-3.110336 .627646-2.859278 .627646-2.433873C.627646-2.21071 .781071-2.092154 .962391-2.092154C1.150685-2.092154 1.290162-2.231631 1.290162-2.419925C1.290162-2.538481 1.234371-2.684932 1.046077-2.740722C1.297136-2.915068 1.701619-2.915068 1.743462-2.915068C2.133998-2.915068 2.559402-2.657036 2.559402-2.071233V-1.855044C2.175841-1.841096 1.715567-1.820174 1.206476-1.63188C.578829-1.401743 .383562-1.018182 .383562-.704359C.383562-.104608 1.108842 .069738 1.603985 .069738C2.161893 .069738 2.489664-.244085 2.636115-.516065C2.66401-.230137 2.852304 .034869 3.173101 .034869C3.187049 .034869 3.863512 .034869 3.863512-.627646V-1.011208H3.626401V-.63462C3.626401-.564882 3.626401-.230137 3.368369-.230137S3.110336-.557908 3.110336-.648568V-1.868991ZM2.559402-.983313C2.559402-.313823 1.973599-.125529 1.659776-.125529C1.30411-.125529 .969365-.36264 .969365-.704359C.969365-1.08792 1.30411-1.624907 2.559402-1.673724V-.983313Z'/>\n\x3Cpath id='g5-99' d='M2.712827-2.782565C2.587298-2.726775 2.517559-2.615193 2.517559-2.475716C2.517559-2.287422 2.650062-2.147945 2.84533-2.147945C3.033624-2.147945 3.180075-2.266501 3.180075-2.489664C3.180075-3.110336 2.21071-3.110336 2.015442-3.110336C.969365-3.110336 .320797-2.308344 .320797-1.506351C.320797-.627646 1.066999 .069738 1.980573 .069738C3.019676 .069738 3.263761-.753176 3.263761-.836862S3.173101-.920548 3.145205-.920548C3.054545-.920548 3.047572-.899626 3.012702-.801993C2.859278-.369614 2.489664-.153425 2.064259-.153425C1.583064-.153425 .955417-.509091 .955417-1.513325C.955417-2.399004 1.387796-2.887173 2.036364-2.887173C2.127024-2.887173 2.461768-2.887173 2.712827-2.782565Z'/>\n\x3Cpath id='g5-101' d='M3.068493-1.590037C3.214944-1.590037 3.263761-1.590037 3.263761-1.743462C3.263761-2.357161 2.922042-3.110336 1.882939-3.110336C.969365-3.110336 .27198-2.385056 .27198-1.527273C.27198-.641594 1.046077 .069738 1.973599 .069738C2.915068 .069738 3.263761-.683437 3.263761-.836862C3.263761-.864757 3.249813-.934496 3.145205-.934496C3.054545-.934496 3.040598-.892653 3.019676-.822914C2.803487-.258032 2.273474-.153425 2.022416-.153425C1.694645-.153425 1.380822-.299875 1.171606-.564882C.913574-.892653 .9066-1.318057 .9066-1.590037H3.068493ZM.913574-1.771357C.990286-2.75467 1.617933-2.915068 1.882939-2.915068C2.740722-2.915068 2.768618-1.945704 2.775592-1.771357H.913574Z'/>\n\x3Cpath id='g5-105' d='M1.471482-4.302864C1.471482-4.505106 1.30411-4.700374 1.066999-4.700374C.857783-4.700374 .669489-4.533001 .669489-4.302864C.669489-4.051806 .871731-3.898381 1.066999-3.898381C1.290162-3.898381 1.471482-4.072727 1.471482-4.302864ZM.411457-2.998755V-2.747696C.850809-2.747696 .913574-2.705853 .913574-2.364134V-.550934C.913574-.251059 .843836-.251059 .390535-.251059V0C.404483 0 .892653-.027895 1.171606-.027895C1.415691-.027895 1.66675-.020922 1.910834 0V-.251059C1.506351-.251059 1.436613-.251059 1.436613-.54396V-3.075467L.411457-2.998755Z'/>\n\x3Cpath id='g5-109' d='M5.732503-2.113076C5.732503-2.719801 5.432628-3.075467 4.686426-3.075467C4.135492-3.075467 3.758904-2.775592 3.57061-2.426899C3.431133-2.922042 3.054545-3.075467 2.545455-3.075467C1.973599-3.075467 1.603985-2.761644 1.408717-2.399004H1.401743V-3.075467L.376588-2.998755V-2.747696C.843836-2.747696 .899626-2.698879 .899626-2.357161V-.550934C.899626-.251059 .829888-.251059 .376588-.251059V0C.390535 0 .878705-.027895 1.171606-.027895C1.429639-.027895 1.910834-.006974 1.973599 0V-.251059C1.520299-.251059 1.45056-.251059 1.45056-.550934V-1.806227C1.45056-2.538481 2.02939-2.880199 2.489664-2.880199C2.977833-2.880199 3.040598-2.496638 3.040598-2.140971V-.550934C3.040598-.251059 2.970859-.251059 2.517559-.251059V0C2.531507 0 3.019676-.027895 3.312578-.027895C3.57061-.027895 4.051806-.006974 4.11457 0V-.251059C3.66127-.251059 3.591532-.251059 3.591532-.550934V-1.806227C3.591532-2.538481 4.170361-2.880199 4.630635-2.880199C5.118804-2.880199 5.181569-2.496638 5.181569-2.140971V-.550934C5.181569-.251059 5.111831-.251059 4.658531-.251059V0C4.672478 0 5.160648-.027895 5.453549-.027895C5.711582-.027895 6.192777-.006974 6.255542 0V-.251059C5.802242-.251059 5.732503-.251059 5.732503-.550934V-2.113076Z'/>\n\x3Cpath id='g5-110' d='M3.591532-2.113076C3.591532-2.719801 3.291656-3.075467 2.545455-3.075467C1.973599-3.075467 1.603985-2.761644 1.408717-2.399004H1.401743V-3.075467L.376588-2.998755V-2.747696C.843836-2.747696 .899626-2.698879 .899626-2.357161V-.550934C.899626-.251059 .829888-.251059 .376588-.251059V0C.390535 0 .878705-.027895 1.171606-.027895C1.429639-.027895 1.910834-.006974 1.973599 0V-.251059C1.520299-.251059 1.45056-.251059 1.45056-.550934V-1.806227C1.45056-2.538481 2.02939-2.880199 2.489664-2.880199C2.977833-2.880199 3.040598-2.496638 3.040598-2.140971V-.550934C3.040598-.251059 2.970859-.251059 2.517559-.251059V0C2.531507 0 3.019676-.027895 3.312578-.027895C3.57061-.027895 4.051806-.006974 4.11457 0V-.251059C3.66127-.251059 3.591532-.251059 3.591532-.550934V-2.113076Z'/>\n\x3Cpath id='g5-111' d='M3.689166-1.48543C3.689166-2.357161 2.942964-3.110336 1.980573-3.110336S.27198-2.357161 .27198-1.48543C.27198-.620672 1.039103 .069738 1.980573 .069738S3.689166-.620672 3.689166-1.48543ZM1.980573-.153425C1.72254-.153425 1.345953-.237111 1.115816-.578829C.927522-.864757 .9066-1.227397 .9066-1.548194C.9066-1.84807 .913574-2.259527 1.157659-2.559402C1.332005-2.761644 1.624907-2.915068 1.980573-2.915068C2.39203-2.915068 2.684932-2.719801 2.838356-2.503611C3.033624-2.231631 3.054545-1.882939 3.054545-1.548194S3.033624-.843836 2.831382-.557908C2.643088-.292902 2.322291-.153425 1.980573-.153425Z'/>\n\x3Cpath id='g5-114' d='M1.387796-1.590037C1.387796-2.175841 1.659776-2.880199 2.322291-2.880199C2.259527-2.831382 2.203736-2.740722 2.203736-2.629141C2.203736-2.399004 2.385056-2.308344 2.517559-2.308344C2.684932-2.308344 2.838356-2.419925 2.838356-2.629141C2.838356-2.866252 2.615193-3.075467 2.287422-3.075467C1.93873-3.075467 1.555168-2.859278 1.345953-2.329265H1.338979V-3.075467L.341719-2.998755V-2.747696C.808966-2.747696 .864757-2.698879 .864757-2.357161V-.550934C.864757-.251059 .795019-.251059 .341719-.251059V0C.376588 0 .850809-.027895 1.136737-.027895C1.436613-.027895 1.743462-.013948 2.043337 0V-.251059H1.903861C1.387796-.251059 1.387796-.327771 1.387796-.564882V-1.590037Z'/>\n\x3Cpath id='g5-115' d='M2.643088-2.929016C2.643088-3.047572 2.643088-3.110336 2.545455-3.110336C2.510585-3.110336 2.496638-3.110336 2.405978-3.02665C2.39203-3.019676 2.322291-2.956912 2.280448-2.922042C2.071233-3.068493 1.806227-3.110336 1.548194-3.110336C.550934-3.110336 .313823-2.587298 .313823-2.238605C.313823-2.015442 .411457-1.834122 .578829-1.694645C.843836-1.464508 1.108842-1.415691 1.54122-1.345953C1.889913-1.283188 2.454795-1.185554 2.454795-.718306C2.454795-.446326 2.266501-.125529 1.597011-.125529S.683437-.564882 .557908-1.039103C.536986-1.129763 .530012-1.157659 .432379-1.157659C.313823-1.157659 .313823-1.108842 .313823-.969365V-.111582C.313823 .006974 .313823 .069738 .411457 .069738C.474222 .069738 .606725-.076712 .746202-.230137C1.053051 .055791 1.429639 .069738 1.597011 .069738C2.503611 .069738 2.838356-.418431 2.838356-.913574C2.838356-1.17858 2.719801-1.387796 2.538481-1.555168C2.273474-1.799253 1.952677-1.855044 1.708593-1.896887C1.150685-1.994521 .697385-2.078207 .697385-2.447821C.697385-2.670984 .885679-2.942964 1.548194-2.942964C2.357161-2.942964 2.39203-2.378082 2.405978-2.175841C2.412951-2.099128 2.496638-2.099128 2.524533-2.099128C2.643088-2.099128 2.643088-2.147945 2.643088-2.280448V-2.929016Z'/>\n\x3Cpath id='g5-116' d='M1.401743-2.75467H2.489664V-3.005729H1.401743V-4.288917H1.164633C1.157659-3.66127 .871731-2.970859 .202242-2.949938V-2.75467H.850809V-.871731C.850809-.09066 1.436613 .069738 1.827148 .069738C2.294396 .069738 2.615193-.327771 2.615193-.878705V-1.262267H2.378082V-.885679C2.378082-.411457 2.154919-.153425 1.882939-.153425C1.401743-.153425 1.401743-.739228 1.401743-.864757V-2.75467Z'/>\n\x3Cpath id='g5-117' d='M2.517559-2.998755V-2.747696C2.984807-2.747696 3.040598-2.698879 3.040598-2.357161V-1.164633C3.040598-.550934 2.643088-.125529 2.113076-.125529C1.478456-.125529 1.45056-.425405 1.45056-.781071V-3.075467L.376588-2.998755V-2.747696C.899626-2.747696 .899626-2.726775 .899626-2.106102V-1.060025C.899626-.578829 .899626 .069738 2.064259 .069738C2.217684 .069738 2.726775 .069738 3.061519-.516065H3.068493V.069738L4.11457 0V-.251059C3.647323-.251059 3.591532-.299875 3.591532-.641594V-3.075467L2.517559-2.998755Z'/>\n\x3Cpath id='g1-67' d='M5.634869-5.403736C5.634869-5.531258 5.634869-5.610959 5.531258-5.610959C5.475467-5.610959 5.467497-5.602989 5.395766-5.499377L4.98929-4.909589C4.702366-5.220423 4.176339-5.610959 3.411208-5.610959C1.809215-5.610959 .470237-4.327771 .470237-2.725778C.470237-1.115816 1.801245 .167372 3.419178 .167372C4.758157 .167372 5.634869-.892653 5.634869-1.865006C5.634869-1.944707 5.634869-2.016438 5.507347-2.016438C5.419676-2.016438 5.395766-1.976588 5.387796-1.896887C5.324035-.669489 4.335741-.095641 3.490909-.095641C2.81345-.095641 1.299128-.510087 1.299128-2.725778C1.299128-4.869738 2.733748-5.347945 3.490909-5.347945C4.2401-5.347945 5.164633-4.813948 5.371856-3.443088C5.379826-3.379328 5.387796-3.323537 5.499377-3.323537C5.634869-3.323537 5.634869-3.379328 5.634869-3.53076V-5.403736Z'/>\n\x3Cpath id='g1-72' d='M5.180573-4.798007C5.180573-5.092902 5.196513-5.180573 5.810212-5.180573H5.985554V-5.443587C5.308095-5.419676 5.292154-5.419676 4.813948-5.419676S4.319801-5.419676 3.642341-5.443587V-5.180573H3.817684C4.431382-5.180573 4.447323-5.092902 4.447323-4.798007V-2.964882H1.888917V-4.798007C1.888917-5.092902 1.904857-5.180573 2.518555-5.180573H2.693898V-5.443587C2.016438-5.419676 2.000498-5.419676 1.522291-5.419676S1.028144-5.419676 .350685-5.443587V-5.180573H.526027C1.139726-5.180573 1.155666-5.092902 1.155666-4.798007V-.645579C1.155666-.350685 1.139726-.263014 .526027-.263014H.350685V0C1.028144-.02391 1.044085-.02391 1.522291-.02391S2.016438-.02391 2.693898 0V-.263014H2.518555C1.904857-.263014 1.888917-.350685 1.888917-.645579V-2.701868H4.447323V-.645579C4.447323-.350685 4.431382-.263014 3.817684-.263014H3.642341V0C4.319801-.02391 4.335741-.02391 4.813948-.02391S5.308095-.02391 5.985554 0V-.263014H5.810212C5.196513-.263014 5.180573-.350685 5.180573-.645579V-4.798007Z'/>\n\x3Cpath id='g1-74' d='M3.283686-4.821918C3.283686-5.180573 3.379328-5.180573 3.889415-5.180573V-5.443587C3.482939-5.419676 3.259776-5.419676 2.81345-5.419676C2.462765-5.419676 1.857036-5.419676 1.530262-5.443587V-5.180573H1.801245C2.550436-5.180573 2.574346-5.084932 2.574346-4.790037V-1.187547C2.574346-.454296 2.14396-.055791 1.721544-.055791C1.378829-.055791 1.012204-.215193 .828892-.462267C1.052055-.470237 1.291158-.605729 1.291158-.908593C1.291158-1.187547 1.075965-1.346949 .852802-1.346949C.68543-1.346949 .414446-1.235367 .414446-.892653C.414446-.302864 .996264 .167372 1.745455 .167372C2.478705 .167372 3.283686-.310834 3.283686-1.187547V-4.821918Z'/>\n\x3Cpath id='g1-76' d='M4.933499-2.072229H4.686426C4.590785-1.243337 4.471233-.263014 3.012702-.263014H2.271482C1.904857-.263014 1.888917-.318804 1.888917-.589788V-4.790037C1.888917-5.068991 1.888917-5.180573 2.638107-5.180573H2.893151V-5.443587C2.534496-5.419676 1.952677-5.419676 1.578082-5.419676C1.044085-5.419676 1.028144-5.419676 .350685-5.443587V-5.180573H.526027C1.139726-5.180573 1.155666-5.092902 1.155666-4.798007V-.645579C1.155666-.350685 1.139726-.263014 .526027-.263014H.350685V0H4.702366L4.933499-2.072229Z'/>\n\x3Cpath id='g1-77' d='M2.024408-5.260274C1.960648-5.419676 1.952677-5.443587 1.729514-5.443587H.390535V-5.180573H.565878C1.179577-5.180573 1.195517-5.092902 1.195517-4.798007V-.852802C1.195517-.645579 1.195517-.263014 .390535-.263014V0C.749191-.02391 1.123786-.02391 1.331009-.02391S1.912827-.02391 2.271482 0V-.263014C1.466501-.263014 1.466501-.645579 1.466501-.852802V-5.084932L1.474471-5.092902L3.482939-.191283C3.53076-.087671 3.56264 0 3.674222 0C3.777833 0 3.817684-.095641 3.857534-.191283L5.889913-5.156663L5.897883-5.148692V-.645579C5.897883-.350685 5.881943-.263014 5.268244-.263014H5.092902V0C5.72254-.02391 5.738481-.02391 6.224658-.02391S6.726775-.02391 7.356413 0V-.263014H7.181071C6.567372-.263014 6.551432-.350685 6.551432-.645579V-4.798007C6.551432-5.092902 6.567372-5.180573 7.181071-5.180573H7.356413V-5.443587H6.009465C5.794271-5.443587 5.778331-5.419676 5.72254-5.276214L3.873474-.757161L2.024408-5.260274Z'/>\n\x3Cpath id='g1-83' d='M1.857036-3.323537C1.346949-3.443088 .972354-3.849564 .972354-4.335741C.972354-4.869738 1.43462-5.371856 2.12802-5.371856C3.506849-5.371856 3.690162-4.080697 3.730012-3.777833C3.745953-3.690162 3.753923-3.634371 3.857534-3.634371C3.985056-3.634371 3.985056-3.690162 3.985056-3.841594V-5.403736C3.985056-5.531258 3.985056-5.610959 3.881445-5.610959C3.817684-5.610959 3.801743-5.587049 3.745953-5.499377L3.466999-5.053051C3.068493-5.491407 2.558406-5.610959 2.12005-5.610959C1.171606-5.610959 .470237-4.893649 .470237-4.080697C.470237-3.474969 .812951-3.140224 .964384-2.988792C1.251308-2.701868 1.514321-2.638107 2.375093-2.438854C3.060523-2.279452 3.180075-2.255542 3.443088-1.976588C3.52279-1.888917 3.722042-1.617933 3.722042-1.227397C3.722042-.67746 3.299626-.095641 2.550436-.095641C1.673724-.095641 .765131-.518057 .71731-1.625903C.70934-1.753425 .70934-1.809215 .597758-1.809215C.470237-1.809215 .470237-1.745455 .470237-1.594022V-.039851C.470237 .087671 .470237 .167372 .573848 .167372C.637609 .167372 .645579 .151432 .70137 .071731C.73325 .02391 .765131-.047821 .988294-.382565C1.490411 .063761 2.080199 .167372 2.558406 .167372C3.55467 .167372 4.224159-.621669 4.224159-1.474471C4.224159-2.16787 3.769863-2.87721 2.956912-3.068493L1.857036-3.323537Z'/>\n\x3Cpath id='g1-84' d='M5.642839-5.387796H.462267L.302864-3.57858H.549938C.661519-4.925529 .844832-5.124782 2.064259-5.124782C2.215691-5.124782 2.462765-5.124782 2.526526-5.108842C2.677958-5.076961 2.685928-4.99726 2.685928-4.798007V-.653549C2.685928-.374595 2.685928-.263014 1.857036-.263014H1.554172V0C1.849066-.02391 2.709838-.02391 3.052553-.02391S4.25604-.02391 4.550934 0V-.263014H4.24807C3.419178-.263014 3.419178-.374595 3.419178-.653549V-4.798007C3.419178-4.98132 3.419178-5.076961 3.58655-5.108842C3.658281-5.124782 3.889415-5.124782 4.040847-5.124782C5.260274-5.124782 5.443587-4.925529 5.555168-3.57858H5.802242L5.642839-5.387796Z'/>\n\x3Cpath id='g1-97' d='M3.347447-2.375093C3.347447-3.156164 2.590286-3.55467 1.865006-3.55467C1.203487-3.55467 .613699-3.299626 .613699-2.773599C.613699-2.534496 .781071-2.391034 .988294-2.391034C1.211457-2.391034 1.362889-2.550436 1.362889-2.765629C1.362889-2.956912 1.243337-3.092403 1.067995-3.132254C1.362889-3.331507 1.793275-3.331507 1.849066-3.331507C2.295392-3.331507 2.741719-3.020672 2.741719-2.367123V-2.12005C2.279452-2.096139 1.745455-2.072229 1.187547-1.841096C.486177-1.538232 .350685-1.075965 .350685-.812951C.350685-.127522 1.155666 .079701 1.705604 .079701C2.287422 .079701 2.646077-.247073 2.82142-.565878C2.86127-.263014 3.068493 .039851 3.419178 .039851C3.498879 .039851 4.176339 .00797 4.176339-.71731V-1.155666H3.929265V-.71731C3.929265-.390535 3.809714-.263014 3.642341-.263014C3.347447-.263014 3.347447-.629639 3.347447-.71731V-2.375093ZM2.741719-1.123786C2.741719-.350685 2.088169-.143462 1.769365-.143462C1.354919-.143462 1.004234-.422416 1.004234-.804981C1.004234-1.331009 1.498381-1.872976 2.741719-1.912827V-1.123786Z'/>\n\x3Cpath id='g1-99' d='M2.933001-3.164134C2.709838-3.092403 2.677958-2.909091 2.677958-2.81345C2.677958-2.598257 2.82939-2.438854 3.052553-2.438854C3.259776-2.438854 3.427148-2.582316 3.427148-2.82142C3.427148-3.315567 2.885181-3.55467 2.13599-3.55467C1.028144-3.55467 .278954-2.669988 .278954-1.721544C.278954-.70934 1.107846 .079701 2.11208 .079701C3.235866 .079701 3.514819-.860772 3.514819-.956413S3.411208-1.052055 3.387298-1.052055C3.331507-1.052055 3.291656-1.044085 3.267746-.964384C3.211955-.797011 2.988792-.167372 2.191781-.167372C1.697634-.167372 .988294-.549938 .988294-1.729514C.988294-2.87721 1.578082-3.307597 2.1599-3.307597C2.231631-3.307597 2.654047-3.307597 2.933001-3.164134Z'/>\n\x3Cpath id='g1-105' d='M1.554172-4.909589C1.554172-5.140722 1.370859-5.355915 1.107846-5.355915C.876712-5.355915 .669489-5.172603 .669489-4.917559C.669489-4.638605 .900623-4.471233 1.107846-4.471233C1.3868-4.471233 1.554172-4.702366 1.554172-4.909589ZM.358655-3.427148V-3.164134C.868742-3.164134 .940473-3.116314 .940473-2.725778V-.621669C.940473-.263014 .844832-.263014 .334745-.263014V0C.645579-.02391 1.091905-.02391 1.211457-.02391C1.315068-.02391 1.793275-.02391 2.072229 0V-.263014C1.554172-.263014 1.522291-.302864 1.522291-.613699V-3.514819L.358655-3.427148Z'/>\n\x3Cpath id='g1-112' d='M2.096139 1.283188C1.586052 1.283188 1.490411 1.283188 1.490411 .924533V-.390535C1.865006 .01594 2.271482 .079701 2.526526 .079701C3.53873 .079701 4.415442-.70137 4.415442-1.721544C4.415442-2.717808 3.610461-3.514819 2.646077-3.514819C2.335243-3.514819 1.872976-3.435118 1.466501-3.020672V-3.514819L.278954-3.427148V-3.164134C.844832-3.164134 .884682-3.116314 .884682-2.781569V.924533C.884682 1.283188 .789041 1.283188 .278954 1.283188V1.546202C.621669 1.522291 .972354 1.522291 1.187547 1.522291C1.41868 1.522291 1.753425 1.522291 2.096139 1.546202V1.283188ZM1.490411-2.654047C1.673724-2.972852 2.072229-3.267746 2.574346-3.267746C3.188045-3.267746 3.706102-2.590286 3.706102-1.721544C3.706102-.804981 3.132254-.143462 2.486675-.143462C2.207721-.143462 1.841096-.263014 1.586052-.661519C1.490411-.797011 1.490411-.804981 1.490411-.956413V-2.654047Z'/>\n\x3Cpath id='g1-114' d='M1.466501-1.817186C1.466501-2.414944 1.713574-3.275716 2.478705-3.291656C2.430884-3.259776 2.351183-3.196015 2.351183-3.012702C2.351183-2.765629 2.542466-2.654047 2.701868-2.654047C2.893151-2.654047 3.060523-2.781569 3.060523-3.012702C3.060523-3.291656 2.805479-3.514819 2.454795-3.514819C1.936737-3.514819 1.586052-3.124284 1.41868-2.677958H1.41071V-3.514819L.278954-3.427148V-3.164134C.820922-3.164134 .884682-3.108344 .884682-2.717808V-.621669C.884682-.263014 .789041-.263014 .278954-.263014V0C.589788-.02391 1.028144-.02391 1.219427-.02391C1.689664-.02391 1.705604-.02391 2.223661 0V-.263014H2.064259C1.482441-.263014 1.466501-.350685 1.466501-.637609V-1.817186Z'/>\n\x3Cpath id='g1-116' d='M1.482441-3.172105H2.669988V-3.435118H1.482441V-4.901619H1.235367C1.227397-4.176339 .900623-3.419178 .159402-3.395268V-3.172105H.876712V-.996264C.876712-.063761 1.594022 .079701 1.960648 .079701C2.494645 .079701 2.81345-.398506 2.81345-.996264V-1.44259H2.566376V-1.012204C2.566376-.462267 2.319303-.167372 2.016438-.167372C1.482441-.167372 1.482441-.852802 1.482441-.980324V-3.172105Z'/>\n\x3Cpath id='g1-118' d='M3.53076-2.614197C3.722042-3.060523 3.993026-3.164134 4.28792-3.172105V-3.435118C4.008966-3.411208 3.993026-3.411208 3.666252-3.411208C3.594521-3.411208 3.219925-3.411208 2.972852-3.435118V-3.172105C3.251806-3.156164 3.323537-2.980822 3.323537-2.84533C3.323537-2.765629 3.307597-2.725778 3.275716-2.654047L2.414944-.645579L1.474471-2.805479C1.42665-2.909091 1.42665-2.956912 1.42665-2.972852C1.42665-3.172105 1.713574-3.172105 1.849066-3.172105V-3.435118C1.506351-3.411208 1.131756-3.411208 .980324-3.411208C.812951-3.411208 .430386-3.411208 .175342-3.435118V-3.172105C.661519-3.172105 .70137-3.124284 .820922-2.8533L2.016438-.095641C2.072229 .02391 2.12005 .079701 2.231631 .079701S2.399004 .01594 2.438854-.079701L3.53076-2.614197Z'/>\n\x3Cpath id='g2-40' d='M3.057534 2.133998C3.057534 2.089166 3.030635 2.062267 2.976837 1.999502C1.820174 .941469 1.470486-.672478 1.470486-2.241594C1.470486-3.631382 1.739477-5.317061 3.003736-6.518555C3.039601-6.554421 3.057534-6.58132 3.057534-6.626152C3.057534-6.688917 3.012702-6.724782 2.949938-6.724782C2.842341-6.724782 2.035367-6.079203 1.551183-5.101868C1.120797-4.241096 .905604-3.317559 .905604-2.25056C.905604-1.604981 .986301-.582814 1.479452 .475218C2.008468 1.578082 2.842341 2.232628 2.949938 2.232628C3.012702 2.232628 3.057534 2.196762 3.057534 2.133998Z'/>\n\x3Cpath id='g2-41' d='M2.67198-2.25056C2.67198-2.985803 2.564384-3.972105 2.098132-4.967372C1.569116-6.070237 .735243-6.724782 .627646-6.724782C.537983-6.724782 .52005-6.653051 .52005-6.626152C.52005-6.58132 .537983-6.554421 .600747-6.491656C1.120797-6.025405 2.107098-4.805978 2.107098-2.25056C2.107098-.968369 1.873973 .81594 .573848 2.026401C.555915 2.0533 .52005 2.089166 .52005 2.133998C.52005 2.160897 .537983 2.232628 .627646 2.232628C.735243 2.232628 1.542217 1.587049 2.026401 .609714C2.456787-.251059 2.67198-1.174595 2.67198-2.25056Z'/>\n\x3Cpath id='g2-46' d='M1.75741-.484184C1.75741-.744209 1.542217-.968369 1.273225-.968369S.789041-.744209 .789041-.484184C.789041-.215193 1.004234 0 1.273225 0S1.75741-.215193 1.75741-.484184Z'/>\n\x3Cpath id='g2-67' d='M5.424658-5.54122C5.137733-5.819178 4.62665-6.321295 3.721046-6.321295C1.981569-6.321295 .511083-4.877709 .511083-3.066501C.511083-1.219427 1.999502 .19726 3.721046 .19726C5.209465 .19726 6.133001-1.031133 6.133001-2.080199C6.133001-2.169863 6.133001-2.25056 6.007472-2.25056C5.890909-2.25056 5.890909-2.187796 5.881943-2.107098C5.810212-.744209 4.734247-.080697 3.81071-.080697C3.048568-.080697 1.425654-.555915 1.425654-3.066501C1.425654-5.56812 3.057534-6.043337 3.801743-6.043337C4.689415-6.043337 5.630884-5.370859 5.846077-3.918306C5.86401-3.801743 5.872976-3.756912 5.989539-3.756912C6.133001-3.756912 6.133001-3.801743 6.133001-3.990037V-6.088169C6.133001-6.240598 6.133001-6.321295 6.025405-6.321295C5.96264-6.321295 5.935741-6.294396 5.881943-6.213699L5.424658-5.54122Z'/>\n\x3Cpath id='g2-78' d='M2.116065-6.016438C2.044334-6.124035 2.017435-6.124035 1.847073-6.124035H.340722V-5.846077H.591781C1.022167-5.846077 1.246326-5.783313 1.255293-5.783313V-.950436C1.255293-.708344 1.255293-.277958 .340722-.277958V0C.833873-.017933 .959402-.026899 1.398755-.026899C1.829141-.026899 1.963636-.017933 2.447821 0V-.277958C1.53325-.277958 1.53325-.708344 1.53325-.950436V-5.577086L5.34396-.107597C5.415691 0 5.460523 0 5.505355 0C5.648817 0 5.648817-.071731 5.648817-.242092V-5.173599C5.648817-5.415691 5.648817-5.846077 6.563387-5.846077V-6.124035C6.079203-6.106102 5.944707-6.097136 5.514321-6.097136C5.074969-6.097136 4.958406-6.106102 4.456289-6.124035V-5.846077C5.370859-5.846077 5.370859-5.415691 5.370859-5.173599V-1.344956L2.116065-6.016438Z'/>\n\x3Cpath id='g2-100' d='M3.48792-1.075965C3.48792-.91457 3.48792-.887671 3.353425-.699377C3.075467-.29589 2.663014-.125529 2.304359-.125529C1.918804-.125529 1.560149-.340722 1.327024-.71731C1.093898-1.102864 1.075965-1.63188 1.075965-1.918804C1.075965-2.340224 1.129763-2.815442 1.362889-3.174097C1.560149-3.461021 1.927771-3.738979 2.402989-3.738979C2.779577-3.738979 3.138232-3.550685 3.380324-3.209963C3.48792-3.066501 3.48792-3.057534 3.48792-2.887173V-1.075965ZM3.514819-3.434122C3.469988-3.48792 3.066501-3.963138 2.367123-3.963138C1.264259-3.963138 .304857-3.084433 .304857-1.927771C.304857-.806974 1.201494 .09863 2.268493 .09863C2.923039 .09863 3.326526-.286924 3.48792-.475218V.09863L4.841843 0V-.277958C4.23213-.277958 4.151432-.340722 4.151432-.780075V-6.222665L2.824408-6.124035V-5.846077C3.434122-5.846077 3.514819-5.783313 3.514819-5.34396V-3.434122Z'/>\n\x3Cpath id='g2-101' d='M3.58655-2.0533C3.783811-2.0533 3.828643-2.0533 3.828643-2.241594C3.828643-3.165131 3.326526-4.016936 2.178829-4.016936C1.102864-4.016936 .260025-3.084433 .260025-1.972603C.260025-.798007 1.201494 .09863 2.295392 .09863S3.828643-.860772 3.828643-1.066999C3.828643-1.129763 3.783811-1.183562 3.703113-1.183562C3.61345-1.183562 3.58655-1.120797 3.577584-1.084932C3.272727-.170361 2.47472-.152428 2.340224-.152428C1.909838-.152428 1.542217-.394521 1.33599-.699377C1.0401-1.13873 1.031133-1.676712 1.031133-2.0533H3.58655ZM1.0401-2.268493C1.120797-3.649315 1.927771-3.792777 2.178829-3.792777C2.67198-3.792777 3.209963-3.416189 3.218929-2.268493H1.0401Z'/>\n\x3Cpath id='g2-104' d='M1.640847-6.222665L.313823-6.124035V-5.846077C.923537-5.846077 1.004234-5.783313 1.004234-5.34396V-.690411C1.004234-.277958 .905604-.277958 .313823-.277958V0C.735243-.017933 .905604-.026899 1.33599-.026899S1.882939-.017933 2.358157 0V-.277958C1.766376-.277958 1.667746-.277958 1.667746-.690411V-2.322291C1.667746-3.272727 2.340224-3.738979 2.905106-3.738979C3.434122-3.738979 3.550685-3.299626 3.550685-2.761644V-.690411C3.550685-.277958 3.452055-.277958 2.860274-.277958V0C3.281694-.017933 3.452055-.026899 3.882441-.026899S4.42939-.017933 4.904608 0V-.277958C4.447323-.277958 4.223163-.277958 4.214197-.555915V-2.27746C4.214197-3.021669 4.214197-3.281694 3.963138-3.595517C3.756912-3.846575 3.416189-3.963138 2.96787-3.963138C2.367123-3.963138 1.927771-3.649315 1.649813-3.147198H1.640847V-6.222665Z'/>\n\x3Cpath id='g2-105' d='M1.649813-3.963138L.358655-3.864508V-3.58655C.932503-3.58655 1.0132-3.532752 1.0132-3.0934V-.690411C1.0132-.277958 .91457-.277958 .32279-.277958V0C.726276-.017933 .91457-.026899 1.309091-.026899C1.452553-.026899 1.829141-.026899 2.268493 0V-.277958C1.685679-.277958 1.649813-.32279 1.649813-.672478V-3.963138ZM1.676712-5.523288C1.676712-5.792279 1.461519-6.007472 1.192528-6.007472C.91457-6.007472 .708344-5.783313 .708344-5.523288S.91457-5.039103 1.192528-5.039103C1.461519-5.039103 1.676712-5.254296 1.676712-5.523288Z'/>\n\x3Cpath id='g2-106' d='M1.95467-3.963138L.555915-3.864508V-3.58655C1.23736-3.58655 1.318057-3.523786 1.318057-3.084433V.457285C1.318057 .71731 1.282192 1.613948 .672478 1.613948C.645579 1.613948 .412453 1.613948 .19726 1.506351C.484184 1.416687 .484184 1.165629 .484184 1.111831C.484184 .878705 .313823 .699377 .071731 .699377C-.188294 .699377-.349689 .878705-.349689 1.120797C-.349689 1.587049 .170361 1.838107 .681445 1.838107C1.389788 1.838107 1.95467 1.255293 1.95467 .430386V-3.963138ZM1.95467-5.523288C1.95467-5.792279 1.739477-6.007472 1.470486-6.007472S.986301-5.792279 .986301-5.523288S1.201494-5.039103 1.470486-5.039103S1.95467-5.254296 1.95467-5.523288Z'/>\n\x3Cpath id='g2-109' d='M1.667746-2.322291C1.667746-3.29066 2.367123-3.738979 2.905106-3.738979C3.398257-3.738979 3.559651-3.38929 3.559651-2.761644V-.690411C3.559651-.277958 3.461021-.277958 2.86924-.277958V0C3.29066-.017933 3.461021-.026899 3.891407-.026899S4.438356-.017933 4.913574 0V-.277958C4.321793-.277958 4.223163-.277958 4.223163-.690411V-2.322291C4.223163-3.29066 4.92254-3.738979 5.460523-3.738979C5.953674-3.738979 6.115068-3.38929 6.115068-2.761644V-.690411C6.115068-.277958 6.016438-.277958 5.424658-.277958V0C5.846077-.017933 6.016438-.026899 6.446824-.026899S6.993773-.017933 7.468991 0V-.277958C7.011706-.277958 6.787547-.277958 6.77858-.555915V-2.27746C6.77858-3.057534 6.77858-3.308593 6.48269-3.640349C6.294396-3.855542 5.935741-3.963138 5.523288-3.963138C4.877709-3.963138 4.438356-3.58655 4.187298-3.111333C4.079701-3.640349 3.721046-3.963138 2.96787-3.963138C2.25056-3.963138 1.811208-3.496887 1.622914-3.084433H1.613948V-3.963138L.313823-3.864508V-3.58655C.923537-3.58655 1.004234-3.523786 1.004234-3.084433V-.690411C1.004234-.277958 .905604-.277958 .313823-.277958V0C.735243-.017933 .905604-.026899 1.33599-.026899S1.882939-.017933 2.358157 0V-.277958C1.766376-.277958 1.667746-.277958 1.667746-.690411V-2.322291Z'/>\n\x3Cpath id='g2-111' d='M4.339726-1.909838C4.339726-3.084433 3.407223-4.016936 2.304359-4.016936C1.165629-4.016936 .260025-3.057534 .260025-1.909838C.260025-.789041 1.192528 .09863 2.295392 .09863C3.434122 .09863 4.339726-.806974 4.339726-1.909838ZM2.304359-.152428C1.85604-.152428 1.479452-.376588 1.273225-.726276C1.0401-1.102864 1.031133-1.578082 1.031133-1.990535C1.031133-2.322291 1.031133-2.833375 1.255293-3.200996C1.524284-3.658281 1.972603-3.792777 2.295392-3.792777C2.806476-3.792777 3.174097-3.505853 3.353425-3.200996C3.559651-2.824408 3.568618-2.367123 3.568618-1.990535C3.568618-1.65878 3.568618-1.13873 3.344458-.744209C3.0934-.331756 2.680946-.152428 2.304359-.152428Z'/>\n\x3Cpath id='g2-114' d='M1.596015-2.0533C1.596015-2.420922 1.694645-3.738979 2.716812-3.738979V-3.730012C2.698879-3.721046 2.555417-3.61345 2.555417-3.398257C2.555417-3.156164 2.743711-3.003736 2.949938-3.003736C3.138232-3.003736 3.344458-3.138232 3.344458-3.407223C3.344458-3.694147 3.075467-3.963138 2.67198-3.963138C2.133998-3.963138 1.75741-3.58655 1.551183-3.030635H1.542217V-3.963138L.268991-3.864508V-3.58655C.878705-3.58655 .959402-3.523786 .959402-3.084433V-.690411C.959402-.277958 .860772-.277958 .268991-.277958V0C.744209-.017933 .860772-.026899 1.318057-.026899C1.676712-.026899 1.891905-.017933 2.456787 0V-.277958H2.27746C1.622914-.277958 1.596015-.376588 1.596015-.708344V-2.0533Z'/>\n\x3Cpath id='g2-115' d='M3.084433-3.783811C3.084433-3.936239 3.084433-4.016936 2.976837-4.016936C2.932005-4.016936 2.914072-4.016936 2.797509-3.90934C2.779577-3.891407 2.698879-3.81071 2.645081-3.765878C2.367123-3.963138 2.089166-4.016936 1.784309-4.016936C.600747-4.016936 .304857-3.362391 .304857-2.905106C.304857-2.618182 .430386-2.385056 .636613-2.187796C.941469-1.909838 1.282192-1.847073 1.739477-1.766376C2.196762-1.676712 2.349191-1.649813 2.546451-1.497385C2.636115-1.425654 2.860274-1.255293 2.860274-.91457C2.860274-.125529 1.95467-.125529 1.829141-.125529C.91457-.125529 .681445-.887671 .573848-1.371856C.546949-1.461519 .537983-1.515318 .430386-1.515318C.304857-1.515318 .304857-1.443587 .304857-1.282192V-.134496C.304857 .017933 .304857 .09863 .412453 .09863C.466252 .09863 .475218 .089664 .636613-.080697C.672478-.134496 .771108-.251059 .81594-.29589C1.192528 .071731 1.604981 .09863 1.829141 .09863C2.932005 .09863 3.317559-.546949 3.317559-1.147696C3.317559-1.551183 3.138232-1.793275 2.940971-1.999502C2.636115-2.295392 2.313325-2.358157 1.649813-2.483686C1.416687-2.528518 .762142-2.645081 .762142-3.156164C.762142-3.443088 .968369-3.819676 1.784309-3.819676C2.752677-3.819676 2.815442-3.075467 2.833375-2.851308C2.842341-2.743711 2.842341-2.689913 2.958904-2.689913C3.084433-2.689913 3.084433-2.752677 3.084433-2.923039V-3.783811Z'/>\n\x3Cpath id='g2-117' d='M3.550685-1.497385C3.550685-.699377 3.102366-.125529 2.456787-.125529C1.712578-.125529 1.667746-.511083 1.667746-.995268V-3.963138L.313823-3.864508V-3.58655C1.004234-3.58655 1.004234-3.559651 1.004234-2.761644V-1.416687C1.004234-.833873 1.004234-.457285 1.416687-.143462C1.676712 .035866 2.044334 .09863 2.402989 .09863C2.86924 .09863 3.308593-.107597 3.568618-.645579H3.577584V.09863L4.904608 0V-.277958C4.294894-.277958 4.214197-.340722 4.214197-.780075V-3.963138L2.860274-3.864508V-3.58655C3.469988-3.58655 3.550685-3.523786 3.550685-3.084433V-1.497385Z'/>\n\x3Cpath id='g3-65' d='M4.722291-6.694894C4.612702-6.953923 4.493151-6.953923 4.323786-6.953923C4.044832-6.953923 4.004981-6.874222 3.935243-6.694894L1.464508-.697385C1.404732-.547945 1.374844-.468244 .617684-.468244H.408468V0C.787049-.009963 1.265255-.029888 1.574097-.029888C1.96264-.029888 2.520548-.029888 2.889166 0V-.468244C2.86924-.468244 2.002491-.468244 2.002491-.597758C2.002491-.607721 2.032379-.707347 2.042341-.71731L2.540473-1.92279H5.210461L5.808219-.468244H4.861768V0C5.240349-.029888 6.1868-.029888 6.615193-.029888C7.013699-.029888 7.890411-.029888 8.239103 0V-.468244H7.272727L4.722291-6.694894ZM3.875467-5.160648L5.011208-2.391034H2.739726L3.875467-5.160648Z'/>\n\x3Cpath id='g3-67' d='M7.631382-6.665006C7.631382-6.854296 7.631382-6.94396 7.452055-6.94396C7.362391-6.94396 7.342466-6.924035 7.262765-6.854296L6.60523-6.266501C5.987547-6.764633 5.32005-6.94396 4.64259-6.94396C2.161893-6.94396 .637609-5.459527 .637609-3.417186S2.161893 .1",type:"svgGraphic"},uuid:"0|7"},$R[315]={content:$R[316]={type:"text",text:"These two parts—the Main process (Node.js) and the Renderer process (Chromium)—communicate with each other. The user interface can send messages to the main process to perform tasks like saving a file, and the main process can send data back to the UI to be displayed."},uuid:"0|8"},$R[317]={content:$R[318]={type:"header",text:"Familiar Faces"},uuid:"0|9"},$R[319]={content:$R[320]={type:"text",text:"Electron isn't just for small projects. Some of the most popular desktop applications you might use every day are built with it. This demonstrates how capable the framework is for creating complex, feature-rich software."},uuid:"0|10"},$R[321]={content:$R[322]={type:"realImage",url:"https://oboe-storage.s3.amazonaws.com/dev/imagesReal/v1/course-3280/22b01084-1743-4f52-a7af-7f10aff6d5a9.png",attributionUrl:"https://commons.wikimedia.org/wiki/File:Visual_studio_code_updated.png",caption:"Visual Studio Code is a popular code editor built entirely using Electron."},uuid:"0|11"},$R[323]={content:$R[324]={type:"text",text:"Other well-known examples include:\n\n* **Slack:** The team communication app uses Electron to deliver a consistent experience across different operating systems.\n* **Discord:** This chat service for gamers and communities relies on Electron for its desktop client.\n* **Figma:** A portion of the design tool's desktop app leverages Electron.\n* **Trello:** The project management tool's desktop version is an Electron app."},uuid:"0|12"},$R[325]={content:$R[326]={type:"blockquote",text:"The main advantage is clear: a single team of web developers can build and maintain one application that works for everyone, regardless of their operating system. This saves an enormous amount of time and money."},uuid:"0|13"},$R[327]={content:$R[328]={type:"text",text:"By using web technologies for desktop development, Electron provides a powerful and accessible way to create cross-platform applications."},uuid:"0|14"}]},$R[329]={uuid:"1",title:"Setting Up the Development Environment",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[330]=[$R[331]={content:$R[332]={type:"header",text:"Setting Up Your Workspace"},uuid:"1|0"},$R[333]={content:$R[334]={type:"text",text:"Before you can build an Electron app, you need the right tools. Since Electron is built on top of Node.js, the first step is to install it. Node.js lets you run JavaScript on your computer, outside of a web browser. It also comes with npm, the Node Package Manager, which is essential for installing Electron and other project dependencies."},uuid:"1|1"},$R[335]={content:$R[336]={type:"text",text:"If you don't have Node.js and npm installed, you can download them from the official [Node.js website](https://nodejs.org/). We recommend installing the LTS (Long-Term Support) version, as it's the most stable."},uuid:"1|2"},$R[337]={content:$R[338]={type:"header",text:"Initializing Your Project"},uuid:"1|3"},$R[339]={content:$R[340]={type:"text",text:"Once Node.js is ready, create a new folder for your project. You can name it whatever you like—let's call it `my-electron-app`. Open your terminal or command prompt, navigate into this new folder, and run the following command to initialize a new Node.js project:"},uuid:"1|4"},$R[341]={content:$R[342]={type:"code",markdown:"```\nnpm init -y\n```"},uuid:"1|5"},$R[343]={content:$R[344]={type:"text",text:"This command creates a `package.json` file in your folder. The `-y` flag tells npm to use the default settings, which is fine for now. This file acts as the blueprint for your project, keeping track of its name, version, and dependencies."},uuid:"1|6"},$R[345]={content:$R[346]={type:"blockquote",text:"The `package.json` file is crucial. It lists all the external code libraries (dependencies) your project needs to run and defines scripts to automate tasks like starting your app."},uuid:"1|7"},$R[347]={content:$R[348]={type:"text",text:"Now, it's time to install Electron itself. Run this command in your terminal:"},uuid:"1|8"},$R[349]={content:$R[350]={type:"code",markdown:"```\nnpm install electron --save-dev\n```"},uuid:"1|9"},$R[351]={content:$R[352]={type:"text",text:"Let's break that down. `npm install electron` downloads the Electron package. The `--save-dev` flag tells npm that Electron is a \"development dependency.\" This means it's a tool needed for building the app, but not for running the final, packaged version. After this command finishes, you'll see Electron listed in your `package.json` file and a new `node_modules` folder where all the downloaded code lives."},uuid:"1|10"},$R[353]={content:$R[354]={type:"header",text:"Creating the Core Files"},uuid:"1|11"},$R[355]={content:$R[356]={type:"text",text:"An Electron app needs at least two files to start: a JavaScript file to run the main process and an HTML file for the user interface. Your project structure should look like this:"},uuid:"1|12"},$R[357]={content:$R[358]={svgMarkup:"\x3C?xml version='1.0' encoding='UTF-8'?>\n\x3C!-- This file was generated by dvisvgm 2.11.1 -->\n\x3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='117.978972pt' height='226.771653pt' viewBox='56.659449 58.549615 117.978972 226.771653'>\n\x3Cdefs>\n\x3Cpath id='g0-45' d='M2.749689-1.863014V-2.440847H.109589V-1.863014H2.749689Z'/>\n\x3Cpath id='g0-46' d='M1.912827-.52802C1.912827-.816936 1.673724-1.05604 1.384807-1.05604S.856787-.816936 .856787-.52802S1.09589 0 1.384807 0S1.912827-.239103 1.912827-.52802Z'/>\n\x3Cpath id='g0-97' d='M3.317559-.757161C3.35741-.358655 3.626401 .059776 4.094645 .059776C4.303861 .059776 4.911582-.079701 4.911582-.886675V-1.444583H4.662516V-.886675C4.662516-.308842 4.41345-.249066 4.303861-.249066C3.975093-.249066 3.935243-.697385 3.935243-.747198V-2.739726C3.935243-3.158157 3.935243-3.5467 3.576588-3.915318C3.188045-4.303861 2.689913-4.463263 2.211706-4.463263C1.39477-4.463263 .707347-3.995019 .707347-3.337484C.707347-3.038605 .9066-2.86924 1.165629-2.86924C1.444583-2.86924 1.62391-3.068493 1.62391-3.327522C1.62391-3.447073 1.574097-3.775841 1.115816-3.785803C1.384807-4.134496 1.872976-4.244085 2.191781-4.244085C2.67995-4.244085 3.247821-3.855542 3.247821-2.968867V-2.600249C2.739726-2.570361 2.042341-2.540473 1.414695-2.241594C.667497-1.902864 .418431-1.384807 .418431-.946451C.418431-.139477 1.384807 .109589 2.012453 .109589C2.669988 .109589 3.128269-.288917 3.317559-.757161ZM3.247821-2.391034V-1.39477C3.247821-.448319 2.530511-.109589 2.082192-.109589C1.594022-.109589 1.185554-.458281 1.185554-.956413C1.185554-1.504359 1.603985-2.331258 3.247821-2.391034Z'/>\n\x3Cpath id='g0-99' d='M1.165629-2.171856C1.165629-3.795766 1.982565-4.214197 2.510585-4.214197C2.600249-4.214197 3.227895-4.204234 3.576588-3.845579C3.16812-3.815691 3.108344-3.516812 3.108344-3.387298C3.108344-3.128269 3.287671-2.929016 3.566625-2.929016C3.825654-2.929016 4.024907-3.098381 4.024907-3.39726C4.024907-4.07472 3.267746-4.463263 2.500623-4.463263C1.255293-4.463263 .33873-3.387298 .33873-2.15193C.33873-.876712 1.325031 .109589 2.480697 .109589C3.815691 .109589 4.134496-1.085928 4.134496-1.185554S4.034869-1.285181 4.004981-1.285181C3.915318-1.285181 3.895392-1.24533 3.875467-1.185554C3.58655-.259029 2.938979-.139477 2.570361-.139477C2.042341-.139477 1.165629-.56787 1.165629-2.171856Z'/>\n\x3Cpath id='g0-100' d='M3.785803-.547945V.109589L5.250311 0V-.308842C4.552927-.308842 4.473225-.37858 4.473225-.86675V-6.914072L3.038605-6.804483V-6.495641C3.73599-6.495641 3.815691-6.425903 3.815691-5.937733V-3.785803C3.526775-4.144458 3.098381-4.403487 2.560399-4.403487C1.384807-4.403487 .33873-3.427148 .33873-2.141968C.33873-.876712 1.315068 .109589 2.450809 .109589C3.088418 .109589 3.536737-.229141 3.785803-.547945ZM3.785803-3.217933V-1.175592C3.785803-.996264 3.785803-.976339 3.676214-.806974C3.377335-.328767 2.929016-.109589 2.500623-.109589C2.052304-.109589 1.693649-.368618 1.454545-.747198C1.195517-1.155666 1.165629-1.723537 1.165629-2.132005C1.165629-2.500623 1.185554-3.098381 1.474471-3.5467C1.683686-3.855542 2.062267-4.184309 2.600249-4.184309C2.948941-4.184309 3.367372-4.034869 3.676214-3.58655C3.785803-3.417186 3.785803-3.39726 3.785803-3.217933Z'/>\n\x3Cpath id='g0-101' d='M1.115816-2.510585C1.175592-3.995019 2.012453-4.244085 2.351183-4.244085C3.377335-4.244085 3.476961-2.899128 3.476961-2.510585H1.115816ZM1.105853-2.30137H3.88543C4.104608-2.30137 4.134496-2.30137 4.134496-2.510585C4.134496-3.496887 3.596513-4.463263 2.351183-4.463263C1.195517-4.463263 .278954-3.437111 .278954-2.191781C.278954-.856787 1.325031 .109589 2.470735 .109589C3.686177 .109589 4.134496-.996264 4.134496-1.185554C4.134496-1.285181 4.054795-1.305106 4.004981-1.305106C3.915318-1.305106 3.895392-1.24533 3.875467-1.165629C3.526775-.139477 2.630137-.139477 2.530511-.139477C2.032379-.139477 1.633873-.438356 1.404732-.806974C1.105853-1.285181 1.105853-1.942715 1.105853-2.30137Z'/>\n\x3Cpath id='g0-103' d='M2.211706-1.713574C1.344956-1.713574 1.344956-2.709838 1.344956-2.938979C1.344956-3.20797 1.354919-3.526775 1.504359-3.775841C1.58406-3.895392 1.8132-4.174346 2.211706-4.174346C3.078456-4.174346 3.078456-3.178082 3.078456-2.948941C3.078456-2.67995 3.068493-2.361146 2.919054-2.11208C2.839352-1.992528 2.610212-1.713574 2.211706-1.713574ZM1.05604-1.325031C1.05604-1.364882 1.05604-1.594022 1.225405-1.793275C1.613948-1.514321 2.022416-1.484433 2.211706-1.484433C3.138232-1.484433 3.825654-2.171856 3.825654-2.938979C3.825654-3.307597 3.666252-3.676214 3.417186-3.905355C3.775841-4.244085 4.134496-4.293898 4.313823-4.293898C4.333748-4.293898 4.383562-4.293898 4.41345-4.283935C4.303861-4.244085 4.254047-4.134496 4.254047-4.014944C4.254047-3.845579 4.383562-3.726027 4.542964-3.726027C4.64259-3.726027 4.83188-3.795766 4.83188-4.024907C4.83188-4.194271 4.712329-4.513076 4.323786-4.513076C4.124533-4.513076 3.686177-4.4533 3.267746-4.044832C2.849315-4.373599 2.430884-4.403487 2.211706-4.403487C1.285181-4.403487 .597758-3.716065 .597758-2.948941C.597758-2.510585 .816936-2.132005 1.066002-1.92279C.936488-1.77335 .757161-1.444583 .757161-1.09589C.757161-.787049 .886675-.408468 1.195517-.209215C.597758-.039851 .278954 .388543 .278954 .787049C.278954 1.504359 1.265255 2.052304 2.480697 2.052304C3.656289 2.052304 4.692403 1.544209 4.692403 .767123C4.692403 .418431 4.552927-.089664 4.044832-.368618C3.516812-.647572 2.938979-.647572 2.331258-.647572C2.082192-.647572 1.653798-.647572 1.58406-.657534C1.265255-.697385 1.05604-1.006227 1.05604-1.325031ZM2.49066 1.823163C1.484433 1.823163 .797011 1.315068 .797011 .787049C.797011 .328767 1.175592-.039851 1.613948-.069738H2.201743C3.058531-.069738 4.174346-.069738 4.174346 .787049C4.174346 1.325031 3.466999 1.823163 2.49066 1.823163Z'/>\n\x3Cpath id='g0-104' d='M1.09589-.757161C1.09589-.308842 .986301-.308842 .318804-.308842V0C.667497-.009963 1.175592-.029888 1.444583-.029888C1.703611-.029888 2.221669-.009963 2.560399 0V-.308842C1.892902-.308842 1.783313-.308842 1.783313-.757161V-2.590286C1.783313-3.626401 2.49066-4.184309 3.128269-4.184309C3.755915-4.184309 3.865504-3.646326 3.865504-3.078456V-.757161C3.865504-.308842 3.755915-.308842 3.088418-.308842V0C3.437111-.009963 3.945205-.029888 4.214197-.029888C4.473225-.029888 4.991283-.009963 5.330012 0V-.308842C4.811955-.308842 4.562889-.308842 4.552927-.607721V-2.510585C4.552927-3.367372 4.552927-3.676214 4.244085-4.034869C4.104608-4.204234 3.775841-4.403487 3.198007-4.403487C2.361146-4.403487 1.92279-3.805729 1.753425-3.427148V-6.914072L.318804-6.804483V-6.495641C1.016189-6.495641 1.09589-6.425903 1.09589-5.937733V-.757161Z'/>\n\x3Cpath id='g0-105' d='M1.763387-4.403487L.368618-4.293898V-3.985056C1.016189-3.985056 1.105853-3.92528 1.105853-3.437111V-.757161C1.105853-.308842 .996264-.308842 .328767-.308842V0C.647572-.009963 1.185554-.029888 1.424658-.029888C1.77335-.029888 2.122042-.009963 2.460772 0V-.308842C1.803238-.308842 1.763387-.358655 1.763387-.747198V-4.403487ZM1.803238-6.136986C1.803238-6.455791 1.554172-6.665006 1.275218-6.665006C.966376-6.665006 .747198-6.396015 .747198-6.136986C.747198-5.867995 .966376-5.608966 1.275218-5.608966C1.554172-5.608966 1.803238-5.818182 1.803238-6.136986Z'/>\n\x3Cpath id='g0-106' d='M2.092154-4.403487L.577833-4.293898V-3.985056C1.344956-3.985056 1.43462-3.915318 1.43462-3.427148V.518057C1.43462 .966376 1.344956 1.823163 .707347 1.823163C.657534 1.823163 .428394 1.823163 .169365 1.693649C.318804 1.653798 .518057 1.514321 .518057 1.24533C.518057 .986301 .33873 .787049 .059776 .787049S-.398506 .986301-.398506 1.24533C-.398506 1.763387 .159402 2.042341 .727273 2.042341C1.474471 2.042341 2.092154 1.404732 2.092154 .498132V-4.403487ZM2.092154-6.136986C2.092154-6.425903 1.853051-6.665006 1.564134-6.665006S1.036115-6.425903 1.036115-6.136986S1.275218-5.608966 1.564134-5.608966S2.092154-5.84807 2.092154-6.136986Z'/>\n\x3Cpath id='g0-107' d='M1.05604-.757161C1.05604-.308842 .946451-.308842 .278954-.308842V0C.607721-.009963 1.075965-.029888 1.364882-.029888C1.663761-.029888 2.062267-.019925 2.460772 0V-.308842C1.793275-.308842 1.683686-.308842 1.683686-.757161V-1.783313L2.321295-2.331258C3.088418-1.275218 3.506849-.71731 3.506849-.537983C3.506849-.348692 3.337484-.308842 3.148194-.308842V0C3.427148-.009963 4.014944-.029888 4.224159-.029888C4.513076-.029888 4.801993-.019925 5.090909 0V-.308842C4.722291-.308842 4.503113-.308842 4.124533-.836862L2.859278-2.620174C2.849315-2.6401 2.799502-2.699875 2.799502-2.729763C2.799502-2.769614 3.506849-3.367372 3.606476-3.447073C4.234122-3.955168 4.652553-3.975093 4.861768-3.985056V-4.293898C4.572852-4.26401 4.443337-4.26401 4.164384-4.26401C3.805729-4.26401 3.188045-4.283935 3.048568-4.293898V-3.985056C3.237858-3.975093 3.337484-3.865504 3.337484-3.73599C3.337484-3.536737 3.198007-3.417186 3.118306-3.347447L1.713574-2.132005V-6.914072L.278954-6.804483V-6.495641C.976339-6.495641 1.05604-6.425903 1.05604-5.937733V-.757161Z'/>\n\x3Cpath id='g0-108' d='M1.763387-6.914072L.328767-6.804483V-6.495641C1.026152-6.495641 1.105853-6.425903 1.105853-5.937733V-.757161C1.105853-.308842 .996264-.308842 .328767-.308842V0C.657534-.009963 1.185554-.029888 1.43462-.029888S2.171856-.009963 2.540473 0V-.308842C1.872976-.308842 1.763387-.308842 1.763387-.757161V-6.914072Z'/>\n\x3Cpath id='g0-109' d='M1.09589-3.427148V-.757161C1.09589-.308842 .986301-.308842 .318804-.308842V0C.667497-.009963 1.175592-.029888 1.444583-.029888C1.703611-.029888 2.221669-.009963 2.560399 0V-.308842C1.892902-.308842 1.783313-.308842 1.783313-.757161V-2.590286C1.783313-3.626401 2.49066-4.184309 3.128269-4.184309C3.755915-4.184309 3.865504-3.646326 3.865504-3.078456V-.757161C3.865504-.308842 3.755915-.308842 3.088418-.308842V0C3.437111-.009963 3.945205-.029888 4.214197-.029888C4.473225-.029888 4.991283-.009963 5.330012 0V-.308842C4.662516-.308842 4.552927-.308842 4.552927-.757161V-2.590286C4.552927-3.626401 5.260274-4.184309 5.897883-4.184309C6.525529-4.184309 6.635118-3.646326 6.635118-3.078456V-.757161C6.635118-.308842 6.525529-.308842 5.858032-.308842V0C6.206725-.009963 6.714819-.029888 6.983811-.029888C7.242839-.029888 7.760897-.009963 8.099626 0V-.308842C7.581569-.308842 7.332503-.308842 7.32254-.607721V-2.510585C7.32254-3.367372 7.32254-3.676214 7.013699-4.034869C6.874222-4.204234 6.545455-4.403487 5.967621-4.403487C5.13076-4.403487 4.692403-3.805729 4.523039-3.427148C4.383562-4.293898 3.646326-4.403487 3.198007-4.403487C2.470735-4.403487 2.002491-3.975093 1.723537-3.35741V-4.403487L.318804-4.293898V-3.985056C1.016189-3.985056 1.09589-3.915318 1.09589-3.427148Z'/>\n\x3Cpath id='g0-110' d='M1.09589-3.427148V-.757161C1.09589-.308842 .986301-.308842 .318804-.308842V0C.667497-.009963 1.175592-.029888 1.444583-.029888C1.703611-.029888 2.221669-.009963 2.560399 0V-.308842C1.892902-.308842 1.783313-.308842 1.783313-.757161V-2.590286C1.783313-3.626401 2.49066-4.184309 3.128269-4.184309C3.755915-4.184309 3.865504-3.646326 3.865504-3.078456V-.757161C3.865504-.308842 3.755915-.308842 3.088418-.308842V0C3.437111-.009963 3.945205-.029888 4.214197-.029888C4.473225-.029888 4.991283-.009963 5.330012 0V-.308842C4.811955-.308842 4.562889-.308842 4.552927-.607721V-2.510585C4.552927-3.367372 4.552927-3.676214 4.244085-4.034869C4.104608-4.204234 3.775841-4.403487 3.198007-4.403487C2.470735-4.403487 2.002491-3.975093 1.723537-3.35741V-4.403487L.318804-4.293898V-3.985056C1.016189-3.985056 1.09589-3.915318 1.09589-3.427148Z'/>\n\x3Cpath id='g0-111' d='M4.692403-2.132005C4.692403-3.407223 3.696139-4.463263 2.49066-4.463263C1.24533-4.463263 .278954-3.377335 .278954-2.132005C.278954-.846824 1.315068 .109589 2.480697 .109589C3.686177 .109589 4.692403-.86675 4.692403-2.132005ZM2.49066-.139477C2.062267-.139477 1.62391-.348692 1.354919-.806974C1.105853-1.24533 1.105853-1.853051 1.105853-2.211706C1.105853-2.600249 1.105853-3.138232 1.344956-3.576588C1.613948-4.034869 2.082192-4.244085 2.480697-4.244085C2.919054-4.244085 3.347447-4.024907 3.606476-3.596513S3.865504-2.590286 3.865504-2.211706C3.865504-1.853051 3.865504-1.315068 3.646326-.876712C3.427148-.428394 2.988792-.139477 2.49066-.139477Z'/>\n\x3Cpath id='g0-112' d='M1.713574-3.745953V-4.403487L.278954-4.293898V-3.985056C.986301-3.985056 1.05604-3.92528 1.05604-3.486924V1.175592C1.05604 1.62391 .946451 1.62391 .278954 1.62391V1.932752C.617684 1.92279 1.135741 1.902864 1.39477 1.902864C1.663761 1.902864 2.171856 1.92279 2.520548 1.932752V1.62391C1.853051 1.62391 1.743462 1.62391 1.743462 1.175592V-.498132V-.587796C1.793275-.428394 2.211706 .109589 2.968867 .109589C4.154421 .109589 5.190535-.86675 5.190535-2.15193C5.190535-3.417186 4.224159-4.403487 3.108344-4.403487C2.331258-4.403487 1.912827-3.965131 1.713574-3.745953ZM1.743462-1.135741V-3.35741C2.032379-3.865504 2.520548-4.154421 3.028643-4.154421C3.755915-4.154421 4.363636-3.277709 4.363636-2.15193C4.363636-.946451 3.666252-.109589 2.929016-.109589C2.530511-.109589 2.15193-.308842 1.882939-.71731C1.743462-.926526 1.743462-.936488 1.743462-1.135741Z'/>\n\x3Cpath id='g0-114' d='M1.663761-3.307597V-4.403487L.278954-4.293898V-3.985056C.976339-3.985056 1.05604-3.915318 1.05604-3.427148V-.757161C1.05604-.308842 .946451-.308842 .278954-.308842V0C.667497-.009963 1.135741-.029888 1.414695-.029888C1.8132-.029888 2.281445-.029888 2.67995 0V-.308842H2.470735C1.733499-.308842 1.713574-.418431 1.713574-.777086V-2.311333C1.713574-3.297634 2.132005-4.184309 2.889166-4.184309C2.958904-4.184309 2.978829-4.184309 2.998755-4.174346C2.968867-4.164384 2.769614-4.044832 2.769614-3.785803C2.769614-3.506849 2.978829-3.35741 3.198007-3.35741C3.377335-3.35741 3.626401-3.476961 3.626401-3.795766S3.317559-4.403487 2.889166-4.403487C2.161893-4.403487 1.803238-3.73599 1.663761-3.307597Z'/>\n\x3Cpath id='g0-115' d='M2.072229-1.932752C2.291407-1.892902 3.108344-1.733499 3.108344-1.016189C3.108344-.508095 2.759651-.109589 1.982565-.109589C1.145704-.109589 .787049-.67746 .597758-1.524284C.56787-1.653798 .557908-1.693649 .458281-1.693649C.328767-1.693649 .328767-1.62391 .328767-1.444583V-.129514C.328767 .039851 .328767 .109589 .438356 .109589C.488169 .109589 .498132 .099626 .687422-.089664C.707347-.109589 .707347-.129514 .886675-.318804C1.325031 .099626 1.77335 .109589 1.982565 .109589C3.128269 .109589 3.58655-.557908 3.58655-1.275218C3.58655-1.803238 3.287671-2.102117 3.16812-2.221669C2.839352-2.540473 2.450809-2.620174 2.032379-2.699875C1.474471-2.809465 .806974-2.938979 .806974-3.516812C.806974-3.865504 1.066002-4.273973 1.92279-4.273973C3.01868-4.273973 3.068493-3.377335 3.088418-3.068493C3.098381-2.978829 3.188045-2.978829 3.20797-2.978829C3.337484-2.978829 3.337484-3.028643 3.337484-3.217933V-4.224159C3.337484-4.393524 3.337484-4.463263 3.227895-4.463263C3.178082-4.463263 3.158157-4.463263 3.028643-4.343711C2.998755-4.303861 2.899128-4.214197 2.859278-4.184309C2.480697-4.463263 2.072229-4.463263 1.92279-4.463263C.707347-4.463263 .328767-3.795766 .328767-3.237858C.328767-2.889166 .488169-2.610212 .757161-2.391034C1.075965-2.132005 1.354919-2.072229 2.072229-1.932752Z'/>\n\x3Cpath id='g0-116' d='M1.723537-3.985056H3.148194V-4.293898H1.723537V-6.127024H1.474471C1.464508-5.310087 1.165629-4.244085 .18929-4.204234V-3.985056H1.036115V-1.235367C1.036115-.009963 1.96264 .109589 2.321295 .109589C3.028643 .109589 3.307597-.597758 3.307597-1.235367V-1.803238H3.058531V-1.255293C3.058531-.518057 2.759651-.139477 2.391034-.139477C1.723537-.139477 1.723537-1.046077 1.723537-1.215442V-3.985056Z'/>\n\x3Cpath id='g0-117' d='M3.895392-.787049V.109589L5.330012 0V-.308842C4.632628-.308842 4.552927-.37858 4.552927-.86675V-4.403487L3.088418-4.293898V-3.985056C3.785803-3.985056 3.865504-3.915318 3.865504-3.427148V-1.653798C3.865504-.787049 3.387298-.109589 2.660025-.109589C1.823163-.109589 1.783313-.577833 1.783313-1.09589V-4.403487L.318804-4.293898V-3.985056C1.09589-3.985056 1.09589-3.955168 1.09589-3.068493V-1.574097C1.09589-.797011 1.09589 .109589 2.610212 .109589C3.16812 .109589 3.606476-.169365 3.895392-.787049Z'/>\n\x3Cpath id='g0-120' d='M2.859278-2.34122C3.158157-2.719801 3.536737-3.20797 3.775841-3.466999C4.084682-3.825654 4.493151-3.975093 4.961395-3.985056V-4.293898C4.702366-4.273973 4.403487-4.26401 4.144458-4.26401C3.845579-4.26401 3.317559-4.283935 3.188045-4.293898V-3.985056C3.39726-3.965131 3.476961-3.835616 3.476961-3.676214S3.377335-3.387298 3.327522-3.327522L2.709838-2.550436L1.932752-3.556663C1.843088-3.656289 1.843088-3.676214 1.843088-3.73599C1.843088-3.88543 1.992528-3.975093 2.191781-3.985056V-4.293898C1.932752-4.283935 1.275218-4.26401 1.115816-4.26401C.9066-4.26401 .438356-4.273973 .169365-4.293898V-3.985056C.86675-3.985056 .876712-3.975093 1.344956-3.377335L2.331258-2.092154L1.39477-.9066C.916563-.328767 .328767-.308842 .119552-.308842V0C.37858-.019925 .687422-.029888 .946451-.029888C1.235367-.029888 1.653798-.009963 1.892902 0V-.308842C1.673724-.33873 1.603985-.468244 1.603985-.617684C1.603985-.836862 1.892902-1.165629 2.500623-1.882939L3.257783-.886675C3.337484-.777086 3.466999-.617684 3.466999-.557908C3.466999-.468244 3.377335-.318804 3.108344-.308842V0C3.407223-.009963 3.965131-.029888 4.184309-.029888C4.4533-.029888 4.841843-.019925 5.140722 0V-.308842C4.60274-.308842 4.423412-.328767 4.194271-.617684L2.859278-2.34122Z'/>\n\x3Cpath id='g0-121' d='M4.134496-3.347447C4.393524-3.975093 4.901619-3.985056 5.061021-3.985056V-4.293898C4.83188-4.273973 4.542964-4.26401 4.313823-4.26401C4.134496-4.26401 3.666252-4.283935 3.447073-4.293898V-3.985056C3.755915-3.975093 3.915318-3.805729 3.915318-3.556663C3.915318-3.457036 3.905355-3.437111 3.855542-3.317559L2.849315-.86675L1.743462-3.5467C1.703611-3.646326 1.683686-3.686177 1.683686-3.726027C1.683686-3.985056 2.052304-3.985056 2.241594-3.985056V-4.293898C1.982565-4.283935 1.325031-4.26401 1.155666-4.26401C.886675-4.26401 .488169-4.273973 .18929-4.293898V-3.985056C.667497-3.985056 .856787-3.985056 .996264-3.636364L2.49066 0C2.440847 .129514 2.30137 .458281 2.241594 .587796C2.022416 1.135741 1.743462 1.823163 1.105853 1.823163C1.05604 1.823163 .826899 1.823163 .637609 1.643836C.946451 1.603985 1.026152 1.384807 1.026152 1.225405C1.026152 .966376 .836862 .806974 .607721 .806974C.408468 .806974 .18929 .936488 .18929 1.235367C.18929 1.683686 .607721 2.042341 1.105853 2.042341C1.733499 2.042341 2.141968 1.474471 2.381071 .9066L4.134496-3.347447Z'/>\n\x3C/defs>\n\x3Cg id='page1'>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 9.16694 22.5409L 9.16694 174.113' fill='none' stroke='#999999' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.8'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 9.16694 58.205L 18.0829 58.205' fill='none' stroke='#999999' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.8'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 9.16694 102.785L 18.0829 102.785' fill='none' stroke='#999999' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.8'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 9.16694 147.365L 18.0829 147.365' fill='none' stroke='#999999' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.8'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 9.16694 191.945L 18.0829 191.945' fill='none' stroke='#999999' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.8'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 0.250937 0.250937L 9.16694 0.250937L 11.3959 4.70894L 22.5409 4.70894L 22.5409 18.0829L 0.250937 18.0829L 0.250937 0.250937Z' fill='#00c0c0' opacity='0.2'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 0.250937 0.250937L 9.16694 0.250937L 11.3959 4.70894L 22.5409 4.70894L 22.5409 18.0829L 0.250937 18.0829L 0.250937 0.250937Z' fill='none' stroke='#00c0c0' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cg fill='#00bfbf'>\n\x3Cuse x='91.042228' y='72.333607' xlink:href='#g0-109'/>\n\x3Cuse x='99.067705' y='72.333607' xlink:href='#g0-121'/>\n\x3Cuse x='104.325793' y='72.333607' xlink:href='#g0-45'/>\n\x3Cuse x='107.646679' y='72.333607' xlink:href='#g0-101'/>\n\x3Cuse x='112.074531' y='72.333607' xlink:href='#g0-108'/>\n\x3Cuse x='114.841939' y='72.333607' xlink:href='#g0-101'/>\n\x3Cuse x='119.269791' y='72.333607' xlink:href='#g0-99'/>\n\x3Cuse x='123.697642' y='72.333607' xlink:href='#g0-116'/>\n\x3Cuse x='127.572016' y='72.333607' xlink:href='#g0-114'/>\n\x3Cuse x='131.474067' y='72.333607' xlink:href='#g0-111'/>\n\x3Cuse x='136.455406' y='72.333607' xlink:href='#g0-110'/>\n\x3Cuse x='141.990223' y='72.333607' xlink:href='#g0-45'/>\n\x3Cuse x='145.311109' y='72.333607' xlink:href='#g0-97'/>\n\x3Cuse x='150.292448' y='72.333607' xlink:href='#g0-112'/>\n\x3Cuse x='155.827265' y='72.333607' xlink:href='#g0-112'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 44.831L 31.457 44.831L 33.686 49.289L 44.831 49.289L 44.831 62.663L 22.5409 62.663L 22.5409 44.831Z' fill='#00c0c0' opacity='0.2'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 44.831L 31.457 44.831L 33.686 49.289L 44.831 49.289L 44.831 62.663L 22.5409 62.663L 22.5409 44.831Z' fill='none' stroke='#00c0c0' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cg fill='#00bfbf'>\n\x3Cuse x='113.248977' y='117.715671' xlink:href='#g0-110'/>\n\x3Cuse x='118.783794' y='117.715671' xlink:href='#g0-111'/>\n\x3Cuse x='124.041881' y='117.715671' xlink:href='#g0-100'/>\n\x3Cuse x='129.576698' y='117.715671' xlink:href='#g0-101'/>\n\x3Crect x='134.602284' y='117.317171' height='.3985' width='2.988822'/>\n\x3Cuse x='137.591106' y='117.715671' xlink:href='#g0-109'/>\n\x3Cuse x='145.893332' y='117.715671' xlink:href='#g0-111'/>\n\x3Cuse x='151.151419' y='117.715671' xlink:href='#g0-100'/>\n\x3Cuse x='156.686236' y='117.715671' xlink:href='#g0-117'/>\n\x3Cuse x='162.221053' y='117.715671' xlink:href='#g0-108'/>\n\x3Cuse x='164.988461' y='117.715671' xlink:href='#g0-101'/>\n\x3Cuse x='169.416313' y='117.715671' xlink:href='#g0-115'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 93.869L 33.686 93.869L 38.144 98.327L 38.144 113.93L 22.5409 113.93L 22.5409 93.869Z' fill='#ffffff'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 93.869L 33.686 93.869L 38.144 98.327L 38.144 113.93L 22.5409 113.93L 22.5409 93.869Z' fill='none' stroke='#666666' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 33.686 93.869L 33.686 98.327L 38.144 98.327' fill='none' stroke='#666666' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='106.586948' y='164.491555' xlink:href='#g0-112'/>\n\x3Cuse x='112.121764' y='164.491555' xlink:href='#g0-97'/>\n\x3Cuse x='117.103104' y='164.491555' xlink:href='#g0-99'/>\n\x3Cuse x='121.254207' y='164.491555' xlink:href='#g0-107'/>\n\x3Cuse x='125.958813' y='164.491555' xlink:href='#g0-97'/>\n\x3Cuse x='130.940152' y='164.491555' xlink:href='#g0-103'/>\n\x3Cuse x='135.921491' y='164.491555' xlink:href='#g0-101'/>\n\x3Cuse x='140.349342' y='164.491555' xlink:href='#g0-46'/>\n\x3Cuse x='143.116751' y='164.491555' xlink:href='#g0-106'/>\n\x3Cuse x='146.160908' y='164.491555' xlink:href='#g0-115'/>\n\x3Cuse x='150.090625' y='164.491555' xlink:href='#g0-111'/>\n\x3Cuse x='155.071964' y='164.491555' xlink:href='#g0-110'/>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 138.449L 33.686 138.449L 38.144 142.907L 38.144 158.51L 22.5409 158.51L 22.5409 138.449Z' fill='#ffffff'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 138.449L 33.686 138.449L 38.144 142.907L 38.144 158.51L 22.5409 158.51L 22.5409 138.449Z' fill='none' stroke='#666666' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 33.686 138.449L 33.686 142.907L 38.144 142.907' fill='none' stroke='#666666' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='106.586948' y='208.772599' xlink:href='#g0-109'/>\n\x3Cuse x='114.889173' y='208.772599' xlink:href='#g0-97'/>\n\x3Cuse x='119.870512' y='208.772599' xlink:href='#g0-105'/>\n\x3Cuse x='122.63792' y='208.772599' xlink:href='#g0-110'/>\n\x3Cuse x='128.172737' y='208.772599' xlink:href='#g0-46'/>\n\x3Cuse x='130.940146' y='208.772599' xlink:href='#g0-106'/>\n\x3Cuse x='133.984303' y='208.772599' xlink:href='#g0-115'/>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 183.029L 33.686 183.029L 38.144 187.487L 38.144 203.09L 22.5409 203.09L 22.5409 183.029Z' fill='#ffffff'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 22.5409 183.029L 33.686 183.029L 38.144 187.487L 38.144 203.09L 22.5409 203.09L 22.5409 183.029Z' fill='none' stroke='#666666' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cg transform='translate(56.6594 58.5496)scale(.996264)'>\n\x3Cpath d='M 33.686 183.029L 33.686 187.487L 38.144 187.487' fill='none' stroke='#666666' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='106.586948' y='254.287085' xlink:href='#g0-105'/>\n\x3Cuse x='109.354356' y='254.287085' xlink:href='#g0-110'/>\n\x3Cuse x='114.889173' y='254.287085' xlink:href='#g0-100'/>\n\x3Cuse x='120.42399' y='254.287085' xlink:href='#g0-101'/>\n\x3Cuse x='124.851842' y='254.287085' xlink:href='#g0-120'/>\n\x3Cuse x='130.109929' y='254.287085' xlink:href='#g0-46'/>\n\x3Cuse x='132.877338' y='254.287085' xlink:href='#g0-104'/>\n\x3Cuse x='138.135406' y='254.287085' xlink:href='#g0-116'/>\n\x3Cuse x='142.00978' y='254.287085' xlink:href='#g0-109'/>\n\x3Cuse x='150.312005' y='254.287085' xlink:href='#g0-108'/>\n\x3C/g>\n\x3C/svg>",type:"svgGraphic"},uuid:"1|13"},$R[359]={content:$R[360]={type:"text",text:"First, create a file named `main.js`. This is the entry point of your application and will run the main process. Its job is to manage the application's lifecycle and create browser windows to display your UI."},uuid:"1|14"},$R[361]={content:$R[362]={type:"code",markdown:"```\n// main.js\nconst { app, BrowserWindow } = require('electron');\n\nfunction createWindow() {\n // Create the browser window.\n const win = new BrowserWindow({\n width: 800,\n height: 600\n });\n\n // and load the index.html of the app.\n win.loadFile('index.html');\n}\n\napp.whenReady().then(createWindow);\n```"},uuid:"1|15"},$R[363]={content:$R[364]={type:"text",text:"Next, create `index.html`. This is a standard web page that will be rendered inside the browser window you just defined. It's the user interface of your application."},uuid:"1|16"},$R[365]={content:$R[366]={type:"code",markdown:"```\n\x3C!-- index.html -->\n\x3C!DOCTYPE html>\n\x3Chtml>\n\x3Chead>\n \x3Cmeta charset=\"UTF-8\">\n \x3Ctitle>Hello World!\x3C/title>\n\x3C/head>\n\x3Cbody>\n \x3Ch1>Hello from Electron!\x3C/h1>\n\x3C/body>\n\x3C/html>\n```"},uuid:"1|17"},$R[367]={content:$R[368]={type:"text",text:"Finally, you need to tell Electron where to find your main script. Open your `package.json` file and modify it to look like this. The key changes are setting `\"main\": \"main.js\"` and adding a `start` script."},uuid:"1|18"},$R[369]={content:$R[370]={type:"code",markdown:"```\n{\n \"name\": \"my-electron-app\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"main.js\",\n \"scripts\": {\n \"start\": \"electron .\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"electron\": \"^28.0.0\" \n }\n}\n```"},uuid:"1|19"},$R[371]={content:$R[372]={type:"text",text:"The `\"start\": \"electron .\"` line creates a shortcut. Now, instead of a complex command, you can just run `npm start` in your terminal to launch the application. Your development environment is now fully set up."},uuid:"1|20"},$R[373]={content:$R[374]={type:"text",text:"Ready to test your knowledge? Let's review what you've learned."},uuid:"1|21"},$R[375]={content:$R[376]={type:"quiz",questions:$R[377]=[$R[378]={text:"What is the first and most essential tool you need to install before you can start building an Electron application?",options:$R[379]=[$R[380]={text:"A text editor like VS Code",followup:"While a good text editor is important, it's not the core prerequisite. You need the underlying runtime environment first.",isRightAnswer:!1},$R[381]={text:"The Electron framework",followup:"This is a bit of a chicken-and-egg problem. You need Node.js and npm installed before you can install the Electron framework itself.",isRightAnswer:!1},$R[382]={text:"Git version control",followup:"Using Git is a best practice for any software project, but it's not a technical requirement to get an Electron app running.",isRightAnswer:!1},$R[383]={text:"Node.js and npm",followup:"Correct! Electron is built on Node.js, and you need npm (Node Package Manager) to install Electron and other dependencies.",isRightAnswer:!0}]},$R[384]={text:"Which command correctly initializes a new Node.js project by creating a `package.json` file with default settings?",options:$R[385]=[$R[386]={text:"```\nnpm create package\n```",followup:"Incorrect. The standard command to initialize a project is `npm init`.",isRightAnswer:!1},$R[387]={text:"```\nelectron new-project\n```",followup:"While some frameworks have commands like this, Electron relies on the standard Node.js initialization process.",isRightAnswer:!1},$R[388]={text:"```\nnode start --init\n```",followup:"Incorrect. This command is not a standard way to initialize a Node.js project.",isRightAnswer:!1},$R[389]={text:"```\nnpm init -y\n```",followup:"That's right! `npm init` creates the `package.json` file, and the `-y` flag accepts all the default prompts.",isRightAnswer:!0}]},$R[390]={text:"In the command `npm install electron --save-dev`, what is the purpose of the `--save-dev` flag?",options:$R[391]=[$R[392]={text:"It installs a special version of Electron with extra debugging tools.",followup:"Not quite. The flag doesn't change the version of the package being installed.",isRightAnswer:!1},$R[393]={text:"It marks Electron as a tool needed for development, not for the final packaged application.",followup:"Exactly! It's a 'development dependency,' meaning it's required to build the app but isn't bundled with the final product that users run.",isRightAnswer:!0},$R[394]={text:"It installs Electron globally on your computer for all projects to use.",followup:"Incorrect. The flag for global installation is `-g`, not `--save-dev`.",isRightAnswer:!1},$R[395]={text:"It saves the package for offline development.",followup:"This flag doesn't control offline capabilities. It's about how the dependency is categorized in your project.",isRightAnswer:!1}]},$R[396]={text:"The role of `main.js` is to manage the application's lifecycle and create windows, while `index.html` provides the user interface for those windows.",options:$R[397]=[$R[398]={text:"True",followup:"Correct! `main.js` runs the main process (the backend), and `index.html` is the frontend that users see and interact with.",isRightAnswer:!0},$R[399]={text:"False",followup:"Incorrect. This statement accurately describes the distinct roles of the `main.js` and `index.html` files in a basic Electron app.",isRightAnswer:!1}]},$R[400]={text:"After setting up your `package.json` with a 'start' script pointing to 'electron .', what command do you run in the terminal to launch your application?",options:$R[401]=[$R[402]={text:"```\nnpm start\n```",followup:"Correct! This command looks for the 'start' script in your `package.json` and executes the command defined there, which is `electron .`.",isRightAnswer:!0},$R[403]={text:"```\nelectron .\n```",followup:"This command works, but the purpose of the 'start' script is to create a simpler alias for it.",isRightAnswer:!1},$R[404]={text:"```\nnode main.js\n```",followup:"While this might work in some Node.js applications, it doesn't launch the application through the Electron runtime.",isRightAnswer:!1}]}]},uuid:"1|22"}]},$R[405]={uuid:"2",title:"Building Your First Electron Application",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[406]=[$R[407]={content:$R[408]={type:"header",text:"Creating Your First App"},uuid:"2|0"},$R[409]={content:$R[410]={type:"text",text:"With your project set up, it's time to write the code. You'll be working with two key files you created earlier: `main.js` and `index.html`. These files represent the two fundamental process types in any Electron application: the main process and the renderer process."},uuid:"2|1"},$R[411]={content:$R[412]={type:"blockquote",text:"Think of the main process as the director of a play, managing the stage and deciding when the curtains open. The renderer processes are the actors on stage, each performing within their own scene (or window)."},uuid:"2|2"},$R[413]={content:$R[414]={type:"text",text:"Every Electron app has exactly one main process, but it can have one, many, or no renderer processes. Let's start with the director, the main process."},uuid:"2|3"},$R[415]={content:$R[416]={type:"header",text:"The Main Process"},uuid:"2|4"},$R[417]={content:$R[418]={type:"text",text:"The `main.js` file is the heart of your application. It's the script that runs in the main process. This process has access to Node.js APIs and is responsible for managing the application's lifecycle, creating native browser windows, and handling system events."},uuid:"2|5"},$R[419]={content:$R[420]={type:"text",text:"Open your `main.js` file and add the following code. This script will create a new browser window and load your `index.html` file into it."},uuid:"2|6"},$R[421]={content:$R[422]={type:"code",markdown:"```\nconst { app, BrowserWindow } = require('electron');\nconst path = require('path');\n\nconst createWindow = () => {\n const win = new BrowserWindow({\n width: 800,\n height: 600\n });\n\n win.loadFile('index.html');\n};\n\napp.whenReady().then(() => {\n createWindow();\n});\n\napp.on('window-all-closed', () => {\n if (process.platform !== 'darwin') {\n app.quit();\n }\n});\n```"},uuid:"2|7"},$R[423]={content:$R[424]={type:"text",text:"Let's break this down:\n\n* `app` and `BrowserWindow` are modules imported from Electron. `app` controls your application's event lifecycle, while `BrowserWindow` creates and manages application windows.\n* The `createWindow()` function creates a new browser window with a specified width and height.\n* `win.loadFile('index.html')` loads the `index.html` file into this new window.\n* `app.whenReady().then(...)` waits until Electron has finished initializing and then calls `createWindow()`.\n* The final block quits the application when all windows are closed, which is standard behavior on Windows and Linux (but not macOS)."},uuid:"2|8"},$R[425]={content:$R[426]={type:"header",text:"The Renderer Process"},uuid:"2|9"},$R[427]={content:$R[428]={type:"text",text:"The renderer process is responsible for displaying the content in your application's windows. This is your user interface. You'll write this content using standard web technologies like HTML and CSS. The `index.html` file runs in a renderer process."},uuid:"2|10"},$R[429]={content:$R[430]={type:"text",text:"Unlike the main process, the renderer process doesn't have direct access to Node.js or native system resources for security reasons. It's essentially a Chromium browser window.\n\nOpen `index.html` and add this simple markup:"},uuid:"2|11"},$R[431]={content:$R[432]={type:"code",markdown:"```\n\x3C!DOCTYPE html>\n\x3Chtml>\n\x3Chead>\n \x3Cmeta charset=\"UTF-8\">\n \x3Ctitle>Hello World!\x3C/title>\n\x3C/head>\n\x3Cbody>\n \x3Ch1>Hello World!\x3C/h1>\n \x3Cp>Welcome to your first Electron app.\x3C/p>\n\x3C/body>\n\x3C/html>\n```"},uuid:"2|12"},$R[433]={content:$R[434]={type:"text",text:"This is all you need for the user interface right now. The main process script we wrote earlier will load this file and display it."},uuid:"2|13"},$R[435]={content:$R[436]={type:"header",text:"Running the Application"},uuid:"2|15"},$R[437]={content:$R[438]={type:"text",text:"To run your app, you need to tell npm how to start it. Open your `package.json` file. You should see a `\"scripts\"` section. Modify the `\"start\"` script to run Electron."},uuid:"2|16"},$R[439]={content:$R[440]={type:"code",markdown:"```\n// In package.json\n\n\"scripts\": {\n \"start\": \"electron .\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},\n```"},uuid:"2|17"},$R[441]={content:$R[442]={type:"text",text:"The command `electron .` tells Electron to run in the current directory. Electron will automatically look for the `main` script specified in your `package.json`, which is `main.js`.\n\nNow, save your files and run this command in your terminal from the project's root directory:"},uuid:"2|18"},$R[443]={content:$R[444]={type:"code",markdown:"```\nnpm start\n```"},uuid:"2|19"},$R[445]={content:$R[446]={type:"text",text:"A new window should appear on your desktop with the \"Hello World!\" message. You've just built and run your first cross-platform desktop application!"},uuid:"2|20"},$R[447]={content:$R[448]={type:"text",text:"Now let's review what you've learned about Electron's core concepts."},uuid:"2|21"},$R[449]={content:$R[450]={type:"quiz",questions:$R[451]=[$R[452]={text:"What is the primary responsibility of the main process in an Electron application?",options:$R[453]=[$R[454]={text:"Executing front-end JavaScript to handle user interactions within a window.",followup:"This is handled by the renderer process, which runs the web page's code.",isRightAnswer:!1},$R[455]={text:"Managing the application's lifecycle and creating native browser windows.",followup:"Correct! The main process acts as the entry point and manager for the entire application.",isRightAnswer:!0},$R[456]={text:"Styling the application's user interface with CSS.",followup:"Styling is part of the renderer process, which is responsible for displaying the UI.",isRightAnswer:!1},$R[457]={text:"Rendering the user interface using HTML and CSS.",followup:"This is the role of the renderer process, not the main process.",isRightAnswer:!1}]},$R[458]={text:"True or False: An Electron application can have multiple main processes.",options:$R[459]=[$R[460]={text:"True",followup:"Incorrect. Every Electron application has exactly one main process that manages all other processes.",isRightAnswer:!1},$R[461]={text:"False",followup:"Correct. An Electron application has exactly one main process but can have many renderer processes.",isRightAnswer:!0}]},$R[462]={text:"Which Electron module is used to create and manage application windows?",options:$R[463]=[$R[464]={text:"ipcMain",followup:"`ipcMain` is used for communication between the main and renderer processes, not for creating windows.",isRightAnswer:!1},$R[465]={text:"BrowserWindow",followup:"Correct! The `BrowserWindow` class is imported from Electron to create new windows.",isRightAnswer:!0},$R[466]={text:"app",followup:"The `app` module controls the application's event lifecycle, but `BrowserWindow` is what creates the actual windows.",isRightAnswer:!1},$R[467]={text:"process",followup:"This is a Node.js module, but it's not the specific Electron module for creating windows.",isRightAnswer:!1}]},$R[468]={text:"For security reasons, the renderer process does not have direct access to _______.",options:$R[469]=[$R[470]={text:"CSS",followup:"Incorrect. The renderer process uses CSS to style the user interface.",isRightAnswer:!1},$R[471]={text:"The DOM",followup:"Incorrect. The renderer process directly interacts with the Document Object Model (DOM) of the page.",isRightAnswer:!1},$R[472]={text:"Node.js APIs",followup:"Correct. By default, the renderer process is sandboxed and cannot directly access Node.js APIs or the file system for security.",isRightAnswer:!0},$R[473]={text:"HTML",followup:"Incorrect. The renderer process is responsible for displaying HTML content.",isRightAnswer:!1}]},$R[474]={text:"What command, by convention, is configured in `package.json` to launch the Electron application?",options:$R[475]=[$R[476]={text:"`npm start`",followup:"Correct! The `start` script is typically configured to run `electron .`, which starts the application in the current directory.",isRightAnswer:!0},$R[477]={text:"`npm run electron`",followup:"While you could configure a script named `electron`, the standard convention for the primary run command is `start`.",isRightAnswer:!1},$R[478]={text:"`npm build`",followup:"The `build` command is typically used for packaging the application for distribution, not for running it during development.",isRightAnswer:!1},$R[479]={text:"`npm test`",followup:"The `test` command is used for running automated tests for the application.",isRightAnswer:!1}]}]},uuid:"2|22"},$R[480]={content:$R[481]={type:"text",text:"Understanding the distinction between the main and renderer processes is the key to building any Electron app. With this foundation, you're ready to start adding more complex features."},uuid:"2|23"}]},$R[482]={uuid:"3",title:"Understanding Electron's Architecture",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[483]=[$R[484]={content:$R[485]={type:"header",text:"Two Processes, One Application"},uuid:"3|0"},$R[486]={content:$R[487]={type:"text",text:"At its heart, an Electron application isn't a single, monolithic program. It's a team of specialized processes working together. This design is inherited from Google's Chromium browser, the foundation Electron is built on. Every Electron app has exactly one **main process** and one or more **renderer processes**."},uuid:"3|1"},$R[488]={content:$R[489]={type:"text",text:"Think of the main process as the application's brain or manager. It’s the entry point of your app and the only process that can communicate directly with the operating system. Renderer processes are responsible for displaying the user interface. Each browser window you create in your app gets its own dedicated renderer process."},uuid:"3|2"},$R[490]={content:$R[491]={type:"header",text:"The Main Process"},uuid:"3|4"},$R[492]={content:$R[493]={type:"text",text:"The main process is the backbone of your application. It runs the `main.js` script you created earlier and is responsible for managing the application's entire lifecycle, from opening to quitting. Its key jobs include:\n\n* **Creating and managing application windows:** Using the `BrowserWindow` module, the main process constructs the windows that your users will see and interact with.\n* **Handling native OS events:** It controls things like creating a native application menu, showing file open/save dialogs, and managing notifications.\n* **Accessing all Node.js APIs:** This is a crucial point. The main process has full access to Node.js modules like `fs` for file system access or `child_process` to run external programs. It's your gateway to the underlying computer."},uuid:"3|5"},$R[494]={content:$R[495]={type:"blockquote",text:"The main process is unique. There's only one, it's invisible to the user, and it orchestrates the entire application."},uuid:"3|6"},$R[496]={content:$R[497]={type:"header",text:"Renderer Processes"},uuid:"3|7"},$R[498]={content:$R[499]={type:"text",text:"If the main process is the manager, a renderer process is a specialist hired to do one thing: render a web page. Every `BrowserWindow` instance runs its web page content in its own renderer process. This isolation is a major feature."},uuid:"3|8"},$R[500]={content:$R[501]={type:"text",text:"Because renderer processes are based on web browsers, they have access to standard browser APIs like `window` and `document`. However, for security reasons, they are sandboxed. They cannot directly access Node.js APIs or make direct calls to the operating system. This is a deliberate security boundary. If a renderer process could freely access the file system, any malicious code running in your web content could potentially harm the user's computer."},uuid:"3|9"},$R[502]={content:$R[503]={type:"header",text:"Inter-Process Communication (IPC)"},uuid:"3|10"},$R[504]={content:$R[505]={type:"text",text:"Since the processes are isolated, how do they talk to each other? For example, how does a button click in a renderer process (the UI) trigger a file to be saved by the main process (the Node.js part)?\n\nThe answer is Inter-Process Communication, or IPC. Electron provides modules, `ipcMain` and `ipcRenderer`, that act like a postal service between processes. You send messages on named \"channels\" and set up listeners to receive and act on those messages."},uuid:"3|11"},$R[506]={content:$R[507]={type:"text",text:"Here’s how a renderer can send a message to the main process."},uuid:"3|12"},$R[508]={content:$R[509]={type:"code",markdown:"```\n// In a renderer process (e.g., loaded by index.html)\nconst { ipcRenderer } = require('electron');\n\n// Send a message to the main process on the 'do-something' channel\nipcRenderer.send('do-something', 'Here is my data!');\n```"},uuid:"3|13"},$R[510]={content:$R[511]={type:"text",text:"And here’s how the main process would listen for that message."},uuid:"3|14"},$R[512]={content:$R[513]={type:"code",markdown:"```\n// In the main process (main.js)\nconst { ipcMain } = require('electron');\n\n// Listen for messages on the 'do-something' channel\nipcMain.on('do-something', (event, data) => {\n console.log(data); // Prints 'Here is my data!'\n\n // Optionally, reply to the renderer process that sent the message\n event.reply('something-done', 'I got your data.');\n});\n```"},uuid:"3|15"},$R[514]={content:$R[515]={type:"text",text:"This messaging system is fundamental to building any non-trivial Electron app. It allows your secure, sandboxed UI to safely request powerful operations from the main process.\n\nTo bridge this gap more securely and expose specific Node.js functions to the renderer, developers often use a special script called a **preload script**. This script runs in the renderer process but has access to Node.js APIs, acting as a controlled bridge between the two worlds."},uuid:"3|16"},$R[516]={content:$R[517]={type:"quiz",questions:$R[518]=[$R[519]={text:"What is the primary role of the main process in an Electron application?",options:$R[520]=[$R[521]={text:"To solely handle communication between different renderer processes.",followup:"The main process facilitates Inter-Process Communication (IPC), but its responsibilities are far more extensive, including window creation and lifecycle management.",isRightAnswer:!1},$R[522]={text:"To execute preload scripts and bridge the gap between the web content and the OS.",followup:"While related, the main process's primary role is much broader. Preload scripts are a specific tool for securely exposing Node.js APIs to the renderer.",isRightAnswer:!1},$R[523]={text:"To manage the application's lifecycle and interact with the native operating system.",followup:"Correct! The main process is the application's entry point and handles tasks like creating windows and accessing native OS features.",isRightAnswer:!0},$R[524]={text:"To render the user interface and display web content.",followup:"This is the role of the renderer process. The main process acts as the application's manager.",isRightAnswer:!1}]},$R[525]={text:"For security reasons, renderer processes are sandboxed and cannot directly access Node.js APIs.",options:$R[526]=[$R[527]={text:"True",followup:"Correct. This security boundary prevents malicious code in web content from harming the user's computer. Communication with Node.js APIs must go through the main process via IPC or a preload script.",isRightAnswer:!0},$R[528]={text:"False",followup:"Incorrect. Renderer processes are deliberately sandboxed for security. They have access to browser APIs like `document` and `window`, but not direct access to Node.js modules like `fs`.",isRightAnswer:!1}]},$R[529]={text:"A user clicks a button in your app's interface to save a file. How is this typically handled?",options:$R[530]=[$R[531]={text:"The renderer process directly calls the Node.js `fs` module to open a save dialog.",followup:"Incorrect. The renderer process is sandboxed and cannot directly access the `fs` module for security.",isRightAnswer:!1},$R[532]={text:"The renderer process sends an IPC message to the main process, which then opens the native save dialog.",followup:"That's the right way! The UI (renderer) sends a request, and the powerful main process performs the OS-level action.",isRightAnswer:!0},$R[533]={text:"The main process constantly polls the renderer process for button clicks.",followup:"This would be very inefficient. Electron uses an event-based messaging system (IPC) instead of polling.",isRightAnswer:!1}]},$R[534]={text:"Which statement accurately describes the number of processes in a typical Electron app?",options:$R[535]=[$R[536]={text:"One main process and exactly one renderer process.",followup:"Not quite. An app always has one main process, but it can have one *or more* renderer processes, one for each window.",isRightAnswer:!1},$R[537]={text:"Multiple main processes for redundancy and one renderer process.",followup:"Incorrect. Every Electron app has exactly one main process.",isRightAnswer:!1},$R[538]={text:"Exactly one main process and one or more renderer processes.",followup:"Correct! There is a single manager (the main process) and at least one UI renderer. New windows will spawn new renderer processes.",isRightAnswer:!0},$R[539]={text:"As many main processes as there are CPU cores.",followup:"Incorrect. The architecture is fixed at one main process, regardless of the hardware.",isRightAnswer:!1}]},$R[540]={text:"The mechanism that allows the sandboxed renderer process to safely request actions from the main process is called __________.",options:$R[541]=[$R[542]={text:"System Call Forwarding",followup:"This is too specific. IPC is a more general messaging system, not just for system calls.",isRightAnswer:!1},$R[543]={text:"Native Module Linking",followup:"This term relates more to compiling native code for Node.js, not the communication between Electron's processes.",isRightAnswer:!1},$R[544]={text:"Inter-Process Communication (IPC)",followup:"Correct! Electron provides the `ipcMain` and `ipcRenderer` modules to facilitate this messaging.",isRightAnswer:!0},$R[545]={text:"Process Bridging",followup:"While descriptive, the official term in Electron is Inter-Process Communication (IPC).",isRightAnswer:!1}]}]},uuid:"3|17"}]},$R[546]={uuid:"4",title:"Enhancing Application Functionality",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[547]=[$R[548]={content:$R[549]={type:"header",text:"Beyond the Basic Window"},uuid:"4|0"},$R[550]={content:$R[551]={type:"text",text:"Your Electron app now has a window and can display content, which is a great start. But a real desktop application feels integrated with the operating system. It has menus at the top of the screen, responds to right-clicks, and can show native dialog boxes for opening files or displaying alerts.\n\nThese native UI elements make your application feel professional and intuitive to users. Electron provides simple APIs to create these features, allowing your web-based app to behave like a traditional desktop program. Let's explore how to add these essential functionalities."},uuid:"4|1"},$R[552]={content:$R[553]={type:"header",text:"Crafting Custom Menus"},uuid:"4|2"},$R[554]={content:$R[555]={type:"text",text:"Most desktop applications have a menu bar at the top (or on the macOS menu bar) for common actions. Electron allows you to build this menu from scratch using the `Menu` and `MenuItem` modules from the main process."},uuid:"4|3"},$R[556]={content:$R[557]={type:"blockquote",text:"You can define a menu structure as an array of objects. Each object represents a menu item, which can have a label, a role (like 'quit' or 'copy'), a keyboard shortcut, or a custom click function."},uuid:"4|4"},$R[558]={content:$R[559]={type:"text",text:"Here's how you can create a simple application menu in your `main.js` file."},uuid:"4|5"},$R[560]={content:$R[561]={type:"code",markdown:"```\nconst { app, Menu, BrowserWindow } = require('electron');\n\n// A template for our menu\nconst menuTemplate = [\n {\n label: 'File',\n submenu: [\n {\n label: 'Quit',\n accelerator: 'CmdOrCtrl+Q', // Keyboard shortcut\n click() {\n app.quit(); // Action to perform on click\n }\n }\n ]\n },\n {\n label: 'Edit',\n submenu: [\n { role: 'undo' },\n { role: 'redo' },\n { type: 'separator' },\n { role: 'cut' },\n { role: 'copy' },\n { role: 'paste' }\n ]\n }\n];\n\napp.on('ready', () => {\n const mainWindow = new BrowserWindow();\n // Build menu from the template\n const menu = Menu.buildFromTemplate(menuTemplate);\n // Set it as the application menu\n Menu.setApplicationMenu(menu);\n});\n```"},uuid:"4|6"},$R[562]={content:$R[563]={type:"text",text:"Context menus, which appear when a user right-clicks, are just as important. Since user interaction happens in the renderer process (your HTML/JS files), you'll need to use Inter-Process Communication (IPC) to ask the main process to show a context menu. We covered the basics of IPC previously.\n\nFirst, in your renderer process (e.g., `renderer.js`), you would listen for a right-click event and send a message to the main process."},uuid:"4|7"},$R[564]={content:$R[565]={type:"code",markdown:"```\n// In renderer.js\nconst { ipcRenderer } = require('electron');\n\nwindow.addEventListener('contextmenu', (e) => {\n e.preventDefault(); // Prevent the default browser menu\n ipcRenderer.send('show-context-menu');\n});\n```"},uuid:"4|8"},$R[566]={content:$R[567]={type:"text",text:"Then, in your `main.js` file, you'd listen for that message and display the menu."},uuid:"4|9"},$R[568]={content:$R[569]={type:"code",markdown:"```\n// In main.js\nconst { ipcMain } = require('electron');\n\nconst contextMenuTemplate = [\n { role: 'copy' },\n { role: 'paste' },\n { role: 'selectAll' }\n];\n\nipcMain.on('show-context-menu', (event) => {\n const menu = Menu.buildFromTemplate(contextMenuTemplate);\n // The menu will pop up wherever the user clicked\n menu.popup({ window: BrowserWindow.fromWebContents(event.sender) });\n});\n```"},uuid:"4|10"},$R[570]={content:$R[571]={type:"header",text:"Engaging with Dialogs"},uuid:"4|11"},$R[572]={content:$R[573]={type:"text",text:"Dialogs are pop-up windows that prompt the user for action. They're essential for things like opening files, saving work, or showing important messages. Electron's `dialog` module lets you create native OS dialogs, which is much better than using a web-based modal.\n\nFor instance, showing an informational message is straightforward. Since dialogs are managed by the main process, you might call this from an IPC event handler."},uuid:"4|12"},$R[574]={content:$R[575]={type:"code",markdown:"```\nconst { dialog } = require('electron');\n\n// Example of showing a message box\ndialog.showMessageBox({\n type: 'info',\n title: 'Update Available',\n message: 'A new version of the app is ready to install.',\n buttons: ['OK', 'Later']\n}).then(result => {\n // result.response is the index of the clicked button (0 for 'OK')\n console.log(`User clicked button index: ${result.response}`);\n});\n```"},uuid:"4|13"},$R[576]={content:$R[577]={type:"text",text:"Another common use case is prompting the user to select a file. The `showOpenDialog` method handles this, returning a promise that resolves with the selected file paths."},uuid:"4|14"},$R[578]={content:$R[579]={type:"code",markdown:"```\n// Example of an open file dialog\ndialog.showOpenDialog({\n title: 'Select a Photo',\n properties: ['openFile'],\n filters: [\n { name: 'Images', extensions: ['jpg', 'png', 'gif'] },\n { name: 'All Files', extensions: ['*'] }\n ]\n}).then(result => {\n if (!result.canceled) {\n // result.filePaths is an array of selected file paths\n console.log('Selected files:', result.filePaths);\n }\n}).catch(err => {\n console.log(err);\n});\n```"},uuid:"4|15"},$R[580]={content:$R[581]={type:"blockquote",text:"The `dialog` module also includes `showSaveDialog` for saving files and `showErrorBox` for displaying errors. Using these native dialogs ensures your app's user experience is consistent with the operating system."},uuid:"4|16"},$R[582]={content:$R[583]={type:"header",text:"Living in the System Tray"},uuid:"4|17"},$R[584]={content:$R[585]={type:"text",text:"For applications that run in the background, like a chat app or a system monitor, having an icon in the system tray (on Windows) or menu bar (on macOS) is standard. This lets the user interact with your app without keeping its main window open.\n\nCreating a tray icon is done with the `Tray` module. You'll need to provide an icon image and can attach a context menu to it for quick actions."},uuid:"4|18"},$R[586]={content:$R[587]={type:"realImage",url:"https://oboe-storage.s3.amazonaws.com/dev/imagesReal/v1/97c26c3e-e73e-4809-bd99-39bfe075ccb8.png",attributionUrl:"https://commons.wikimedia.org/wiki/File:Sample_QT_preview_window.png",caption:"Electron allows you to create applications with a wide range of standard UI elements."},uuid:"4|19"},$R[588]={content:$R[589]={type:"text",text:"Here’s how to set up a basic tray icon in `main.js`."},uuid:"4|20"},$R[590]={content:$R[591]={type:"code",markdown:"```\nconst { Tray, Menu } = require('electron');\nconst path = require('path');\n\nlet tray = null;\n\napp.whenReady().then(() => {\n // It's important to use an absolute path to the icon\n const iconPath = path.join(__dirname, 'icon.png');\n tray = new Tray(iconPath);\n\n const contextMenu = Menu.buildFromTemplate([\n { label: 'Show App', click: () => { mainWindow.show(); } },\n { label: 'Quit', click: () => { app.quit(); } }\n ]);\n\n tray.setToolTip('My Awesome App');\n tray.setContextMenu(contextMenu);\n});\n```"},uuid:"4|21"},$R[592]={content:$R[593]={type:"text",text:"In this example, we create a `Tray` instance, build a context menu just like before, and then attach it. Now, users can right-click the tray icon to quickly show the app or quit. You can also listen for other events on the tray icon, such as a regular left-click, to perform a default action like toggling the main window's visibility."},uuid:"4|22"},$R[594]={content:$R[595]={type:"text",text:"Ready to test your knowledge on these new features?"},uuid:"4|23"},$R[596]={content:$R[597]={type:"quiz",questions:$R[598]=[$R[599]={text:"In an Electron application, where are the main application menus (like \"File\", \"Edit\", \"View\") typically created?",options:$R[600]=[$R[601]={text:"In the main process, using the `Menu` and `MenuItem` modules.",followup:"Correct! The main process has access to native GUI modules, making it the right place to define the application's top-level menu.",isRightAnswer:!0},$R[602]={text:"Directly in the `package.json` file under a `menu` key.",followup:"Incorrect. The `package.json` file is for metadata and dependencies, not for defining application UI structures like menus.",isRightAnswer:!1},$R[603]={text:"In the renderer process, using the `Menu` and `MenuItem` modules.",followup:"Incorrect. While the renderer process handles UI rendering, native OS elements like the main application menu must be managed by the main process.",isRightAnswer:!1},$R[604]={text:"In a separate CSS file that styles the menu bar.",followup:"Incorrect. Electron uses native OS menu components, not HTML/CSS, to create the main application menu bar.",isRightAnswer:!1}]},$R[605]={text:"To show a context menu when a user right-clicks in a window, what is the correct sequence of events?",options:$R[606]=[$R[607]={text:"The renderer process listens for a right-click, then uses IPC to ask the main process to show a predefined menu.",followup:"That's right! The renderer process handles the user event and uses IPC to request the main process, which controls native UI, to display the context menu.",isRightAnswer:!0},$R[608]={text:"The main process detects the click and tells the renderer process what menu items to display using HTML.",followup:"Incorrect. User interaction events like clicks are captured in the renderer process first.",isRightAnswer:!1},$R[609]={text:"The renderer process creates and displays the context menu directly using the `Tray` module.",followup:"Incorrect. The `Tray` module is for the system tray icon, not in-window context menus, which must be shown by the main process.",isRightAnswer:!1},$R[610]={text:"The main process continuously polls the renderer process for right-click events.",followup:"Incorrect. An event-driven approach using IPC is much more efficient than polling.",isRightAnswer:!1}]},$R[611]={text:"Which module and method would you use to create a native dialog box that allows a user to select a file from their computer?",options:$R[612]=[$R[613]={text:"`window.open('file://')`",followup:"Incorrect. This is a browser API for opening new windows and doesn't create a native OS file selection dialog.",isRightAnswer:!1},$R[614]={text:"`Menu.createFilePicker()`",followup:"Incorrect. The `Menu` module is for creating application and context menus, not dialog boxes.",isRightAnswer:!1},$R[615]={text:"`dialog.showOpenDialog()`",followup:"Correct! The `dialog` module's `showOpenDialog()` method is specifically for creating native file selection dialogs.",isRightAnswer:!0},$R[616]={text:"`dialog.showMessageBox()`",followup:"Incorrect. `showMessageBox()` is used for displaying informational alerts or confirmations, not for file selection.",isRightAnswer:!1}]},$R[617]={text:"The `Tray` module is used to create an icon in the system tray (Windows) or menu bar (macOS) that can provide quick access to application functions.",options:$R[618]=[$R[619]={text:"True",followup:"Correct. The `Tray` module allows your application to have a persistent icon outside of the main application window, which is ideal for background apps.",isRightAnswer:!0},$R[620]={text:"False",followup:"Incorrect. This statement accurately describes the purpose of the `Tray` module in Electron.",isRightAnswer:!1}]}]},uuid:"4|24"},$R[621]={content:$R[622]={type:"text",text:"By adding menus, dialogs, and tray support, your application moves from being a simple web page in a container to a full-fledged desktop citizen."},uuid:"4|25"}]},$R[623]={uuid:"5",title:"Packaging and Distributing Applications",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[624]=[$R[625]={content:$R[626]={type:"header",text:"Packaging Your App"},uuid:"5|0"},$R[627]={content:$R[628]={type:"text",text:"You’ve built your application. The code is written, the features work, and it runs perfectly on your development machine. Now it's time to get it into the hands of users. This means packaging your project files into a single, executable application that anyone can run."},uuid:"5|1"},$R[629]={content:$R[630]={type:"text",text:"The most common tool for this job in the Electron ecosystem is Electron Forge. It's an all-in-one command-line interface that handles the complex steps of bundling your app for different operating systems. With a single command, you can transform your source code into a distributable package."},uuid:"5|2"},$R[631]={content:$R[632]={type:"code",markdown:"```\n# In your project's terminal\nnpm run make\n```"},uuid:"5|3"},$R[633]={content:$R[634]={type:"text",text:"This command tells Electron Forge to find your application's entry point, bundle all the necessary files (your HTML, CSS, JavaScript, and Node modules), and combine them with the Electron runtime. The result is a folder containing a native executable file, like `.exe` on Windows or `.app` on macOS. This is the core of your distributable application."},uuid:"5|4"},$R[635]={content:$R[636]={type:"header",text:"Creating Installers"},uuid:"5|5"},$R[637]={content:$R[638]={type:"text",text:"A standalone executable is a good start, but most users expect a familiar installation process. They want an installer that guides them through setup, creates desktop shortcuts, and allows for clean uninstallation. Electron Forge handles this, too."},uuid:"5|6"},$R[639]={content:$R[640]={type:"text",text:"These installers, or \"makers\" in Forge terminology, are specific to each operating system. You configure which installers you want to create in your project's `package.json` file."},uuid:"5|7"},$R[641]={content:$R[642]={type:"table",markdown:"| Operating System | Common Installer Format |\n| --- | --- |\n| Windows | `.exe` (Squirrel or NSIS) |\n| macOS | `.dmg` |\n| Linux | `.deb` (for Debian/Ubuntu), `.rpm` (for Fedora) |"},uuid:"5|8"},$R[643]={content:$R[644]={type:"text",text:"To tell Electron Forge which installers to build, you add a `config` section to your `package.json`. This configuration specifies the makers for each platform."},uuid:"5|9"},$R[645]={content:$R[646]={type:"code",markdown:"```\n// In package.json\n\"config\": {\n \"forge\": {\n \"makers\": [\n {\n \"name\": \"@electron-forge/maker-squirrel\",\n \"config\": {},\n \"platforms\": [\"win32\"]\n },\n {\n \"name\": \"@electron-forge/maker-dmg\",\n \"config\": {},\n \"platforms\": [\"darwin\"]\n },\n {\n \"name\": \"@electron-forge/maker-deb\",\n \"config\": {},\n \"platforms\": [\"linux\"]\n }\n ]\n }\n}\n```"},uuid:"5|10"},$R[647]={content:$R[648]={type:"header",text:"Code Signing and Security"},uuid:"5|11"},$R[649]={content:$R[650]={type:"text",text:"When a user downloads an application from the internet, their operating system acts as a gatekeeper. It wants to know if the software is trustworthy. Unsigned applications trigger security warnings that can scare users away, suggesting the app might be malicious."},uuid:"5|12"},$R[651]={content:$R[652]={type:"blockquote",text:"Code signing is the process of digitally signing your application with a certificate. This certificate acts like a digital ID, verifying that you are the developer and that the code hasn't been altered since you signed it."},uuid:"5|13"},$R[653]={content:$R[654]={type:"text",text:"Both Windows (via Authenticode) and macOS (via Gatekeeper) have strict code signing requirements. To distribute your app smoothly, you'll need to obtain a signing certificate from a Certificate Authority. Once you have a certificate, you can configure Electron Forge to automatically sign your application during the packaging process. This step is crucial for building user trust and ensuring your app can be installed without friction."},uuid:"5|14"},$R[655]={content:$R[656]={type:"header",text:"Updates and Versioning"},uuid:"5|15"},$R[657]={content:$R[658]={type:"text",text:"Your work isn't finished once the first version is released. As you fix bugs and add new features, you'll need a way to deliver updates to your users. Manually asking users to re-download and re-install the app for every update is a poor experience."},uuid:"5|16"},$R[659]={content:$R[660]={type:"text",text:"Electron provides tools to build an auto-update mechanism into your application. The `autoUpdater` module can periodically check a server for new versions. If one is found, it can download the update in the background and prompt the user to restart the app to apply it."},uuid:"5|17"},$R[661]={content:$R[662]={svgMarkup:"\x3C?xml version='1.0' encoding='UTF-8'?>\n\x3C!-- This file was generated by dvisvgm 2.11.1 -->\n\x3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='142.539947pt' height='226.771653pt' viewBox='127.679423 194.995181 142.539947 226.771653'>\n\x3Cdefs>\n\x3Cpath id='g0-40' d='M3.297634 2.391034C3.297634 2.361146 3.297634 2.34122 3.128269 2.171856C1.882939 .916563 1.564134-.966376 1.564134-2.49066C1.564134-4.224159 1.942715-5.957659 3.16812-7.202989C3.297634-7.32254 3.297634-7.342466 3.297634-7.372354C3.297634-7.442092 3.257783-7.47198 3.198007-7.47198C3.098381-7.47198 2.201743-6.794521 1.613948-5.529265C1.105853-4.433375 .986301-3.327522 .986301-2.49066C.986301-1.713574 1.09589-.508095 1.643836 .617684C2.241594 1.843088 3.098381 2.49066 3.198007 2.49066C3.257783 2.49066 3.297634 2.460772 3.297634 2.391034Z'/>\n\x3Cpath id='g0-41' d='M2.879203-2.49066C2.879203-3.267746 2.769614-4.473225 2.221669-5.599004C1.62391-6.824408 .767123-7.47198 .667497-7.47198C.607721-7.47198 .56787-7.43213 .56787-7.372354C.56787-7.342466 .56787-7.32254 .757161-7.143213C1.733499-6.156912 2.30137-4.572852 2.30137-2.49066C2.30137-.787049 1.932752 .966376 .697385 2.221669C.56787 2.34122 .56787 2.361146 .56787 2.391034C.56787 2.450809 .607721 2.49066 .667497 2.49066C.767123 2.49066 1.663761 1.8132 2.251557 .547945C2.759651-.547945 2.879203-1.653798 2.879203-2.49066Z'/>\n\x3Cpath id='g0-45' d='M2.749689-1.863014V-2.440847H.109589V-1.863014H2.749689Z'/>\n\x3Cpath id='g0-46' d='M1.912827-.52802C1.912827-.816936 1.673724-1.05604 1.384807-1.05604S.856787-.816936 .856787-.52802S1.09589 0 1.384807 0S1.912827-.239103 1.912827-.52802Z'/>\n\x3Cpath id='g0-65' d='M3.965131-6.933998C3.915318-7.063512 3.895392-7.13325 3.73599-7.13325S3.5467-7.073474 3.496887-6.933998L1.43462-.976339C1.255293-.468244 .856787-.318804 .318804-.308842V0C.547945-.009963 .976339-.029888 1.334994-.029888C1.643836-.029888 2.161893-.009963 2.480697 0V-.308842C1.982565-.308842 1.733499-.557908 1.733499-.816936C1.733499-.846824 1.743462-.946451 1.753425-.966376L2.211706-2.271482H4.672478L5.200498-.747198C5.210461-.707347 5.230386-.647572 5.230386-.607721C5.230386-.308842 4.672478-.308842 4.403487-.308842V0C4.762142-.029888 5.459527-.029888 5.838107-.029888C6.266501-.029888 6.724782-.019925 7.143213 0V-.308842H6.963885C6.366127-.308842 6.22665-.37858 6.117061-.707347L3.965131-6.933998ZM3.437111-5.818182L4.562889-2.580324H2.321295L3.437111-5.818182Z'/>\n\x3Cpath id='g0-70' d='M5.798257-6.774595H.328767V-6.465753H.56787C1.334994-6.465753 1.354919-6.356164 1.354919-5.997509V-.777086C1.354919-.418431 1.334994-.308842 .56787-.308842H.328767V0C.67746-.029888 1.454545-.029888 1.843088-.029888C2.251557-.029888 3.158157-.029888 3.516812 0V-.308842H3.188045C2.241594-.308842 2.241594-.438356 2.241594-.787049V-3.237858H3.098381C4.054795-3.237858 4.154421-2.919054 4.154421-2.072229H4.403487V-4.712329H4.154421C4.154421-3.875467 4.054795-3.5467 3.098381-3.5467H2.241594V-6.067248C2.241594-6.396015 2.261519-6.465753 2.729763-6.465753H3.92528C5.419676-6.465753 5.668742-5.907846 5.828144-4.533001H6.07721L5.798257-6.774595Z'/>\n\x3Cpath id='g0-78' d='M2.311333-6.674969C2.221669-6.794521 2.211706-6.804483 2.022416-6.804483H.328767V-6.495641H.617684C.767123-6.495641 .966376-6.485679 1.115816-6.475716C1.344956-6.445828 1.354919-6.435866 1.354919-6.246575V-1.046077C1.354919-.777086 1.354919-.308842 .328767-.308842V0C.67746-.009963 1.165629-.029888 1.494396-.029888S2.311333-.009963 2.660025 0V-.308842C1.633873-.308842 1.633873-.777086 1.633873-1.046077V-6.22665C1.683686-6.176837 1.693649-6.166874 1.733499-6.107098L5.798257-.129514C5.88792-.009963 5.897883 0 5.967621 0C6.107098 0 6.107098-.069738 6.107098-.259029V-5.758406C6.107098-6.027397 6.107098-6.495641 7.13325-6.495641V-6.804483C6.784558-6.794521 6.296389-6.774595 5.967621-6.774595S5.150685-6.794521 4.801993-6.804483V-6.495641C5.828144-6.495641 5.828144-6.027397 5.828144-5.758406V-1.504359L2.311333-6.674969Z'/>\n\x3Cpath id='g0-79' d='M7.183064-3.377335C7.183064-5.409714 5.678705-7.023661 3.865504-7.023661C2.082192-7.023661 .557908-5.429639 .557908-3.377335C.557908-1.334994 2.092154 .219178 3.865504 .219178C5.678705 .219178 7.183064-1.364882 7.183064-3.377335ZM3.875467-.039851C2.919054-.039851 1.58406-.916563 1.58406-3.516812C1.58406-6.097136 3.038605-6.774595 3.865504-6.774595C4.732254-6.774595 6.156912-6.067248 6.156912-3.516812C6.156912-.876712 4.79203-.039851 3.875467-.039851Z'/>\n\x3Cpath id='g0-85' d='M5.798257-2.30137C5.798257-.886675 4.83188-.089664 3.88543-.089664C3.417186-.089664 2.241594-.33873 2.241594-2.231631V-6.027397C2.241594-6.386052 2.261519-6.495641 3.028643-6.495641H3.267746V-6.804483C2.919054-6.774595 2.181818-6.774595 1.803238-6.774595S.67746-6.774595 .328767-6.804483V-6.495641H.56787C1.334994-6.495641 1.354919-6.386052 1.354919-6.027397V-2.271482C1.354919-.86675 2.510585 .219178 3.865504 .219178C5.011208 .219178 5.907846-.707347 6.07721-1.843088C6.107098-2.042341 6.107098-2.132005 6.107098-2.530511V-5.718555C6.107098-6.047323 6.107098-6.495641 7.13325-6.495641V-6.804483C6.774595-6.794521 6.296389-6.774595 5.957659-6.774595C5.608966-6.774595 5.13076-6.794521 4.772105-6.804483V-6.495641C5.798257-6.495641 5.798257-6.027397 5.798257-5.758406V-2.30137Z'/>\n\x3Cpath id='g0-86' d='M6.1868-5.828144C6.326276-6.196762 6.595268-6.485679 7.272727-6.495641V-6.804483C6.963885-6.784558 6.56538-6.774595 6.306351-6.774595C6.007472-6.774595 5.429639-6.794521 5.17061-6.804483V-6.495641C5.688667-6.485679 5.897883-6.22665 5.897883-5.997509C5.897883-5.917808 5.867995-5.858032 5.84807-5.798257L4.024907-.996264L2.122042-6.027397C2.062267-6.166874 2.062267-6.1868 2.062267-6.206725C2.062267-6.495641 2.630137-6.495641 2.879203-6.495641V-6.804483C2.520548-6.774595 1.833126-6.774595 1.454545-6.774595C.976339-6.774595 .547945-6.794521 .18929-6.804483V-6.495641C.836862-6.495641 1.026152-6.495641 1.165629-6.117061L3.476961 0C3.5467 .18929 3.596513 .219178 3.726027 .219178C3.895392 .219178 3.915318 .169365 3.965131 .029888L6.1868-5.828144Z'/>\n\x3Cpath id='g0-97' d='M3.317559-.757161C3.35741-.358655 3.626401 .059776 4.094645 .059776C4.303861 .059776 4.911582-.079701 4.911582-.886675V-1.444583H4.662516V-.886675C4.662516-.308842 4.41345-.249066 4.303861-.249066C3.975093-.249066 3.935243-.697385 3.935243-.747198V-2.739726C3.935243-3.158157 3.935243-3.5467 3.576588-3.915318C3.188045-4.303861 2.689913-4.463263 2.211706-4.463263C1.39477-4.463263 .707347-3.995019 .707347-3.337484C.707347-3.038605 .9066-2.86924 1.165629-2.86924C1.444583-2.86924 1.62391-3.068493 1.62391-3.327522C1.62391-3.447073 1.574097-3.775841 1.115816-3.785803C1.384807-4.134496 1.872976-4.244085 2.191781-4.244085C2.67995-4.244085 3.247821-3.855542 3.247821-2.968867V-2.600249C2.739726-2.570361 2.042341-2.540473 1.414695-2.241594C.667497-1.902864 .418431-1.384807 .418431-.946451C.418431-.139477 1.384807 .109589 2.012453 .109589C2.669988 .109589 3.128269-.288917 3.317559-.757161ZM3.247821-2.391034V-1.39477C3.247821-.448319 2.530511-.109589 2.082192-.109589C1.594022-.109589 1.185554-.458281 1.185554-.956413C1.185554-1.504359 1.603985-2.331258 3.247821-2.391034Z'/>\n\x3Cpath id='g0-99' d='M1.165629-2.171856C1.165629-3.795766 1.982565-4.214197 2.510585-4.214197C2.600249-4.214197 3.227895-4.204234 3.576588-3.845579C3.16812-3.815691 3.108344-3.516812 3.108344-3.387298C3.108344-3.128269 3.287671-2.929016 3.566625-2.929016C3.825654-2.929016 4.024907-3.098381 4.024907-3.39726C4.024907-4.07472 3.267746-4.463263 2.500623-4.463263C1.255293-4.463263 .33873-3.387298 .33873-2.15193C.33873-.876712 1.325031 .109589 2.480697 .109589C3.815691 .109589 4.134496-1.085928 4.134496-1.185554S4.034869-1.285181 4.004981-1.285181C3.915318-1.285181 3.895392-1.24533 3.875467-1.185554C3.58655-.259029 2.938979-.139477 2.570361-.139477C2.042341-.139477 1.165629-.56787 1.165629-2.171856Z'/>\n\x3Cpath id='g0-100' d='M3.785803-.547945V.109589L5.250311 0V-.308842C4.552927-.308842 4.473225-.37858 4.473225-.86675V-6.914072L3.038605-6.804483V-6.495641C3.73599-6.495641 3.815691-6.425903 3.815691-5.937733V-3.785803C3.526775-4.144458 3.098381-4.403487 2.560399-4.403487C1.384807-4.403487 .33873-3.427148 .33873-2.141968C.33873-.876712 1.315068 .109589 2.450809 .109589C3.088418 .109589 3.536737-.229141 3.785803-.547945ZM3.785803-3.217933V-1.175592C3.785803-.996264 3.785803-.976339 3.676214-.806974C3.377335-.328767 2.929016-.109589 2.500623-.109589C2.052304-.109589 1.693649-.368618 1.454545-.747198C1.195517-1.155666 1.165629-1.723537 1.165629-2.132005C1.165629-2.500623 1.185554-3.098381 1.474471-3.5467C1.683686-3.855542 2.062267-4.184309 2.600249-4.184309C2.948941-4.184309 3.367372-4.034869 3.676214-3.58655C3.785803-3.417186 3.785803-3.39726 3.785803-3.217933Z'/>\n\x3Cpath id='g0-101' d='M1.115816-2.510585C1.175592-3.995019 2.012453-4.244085 2.351183-4.244085C3.377335-4.244085 3.476961-2.899128 3.476961-2.510585H1.115816ZM1.105853-2.30137H3.88543C4.104608-2.30137 4.134496-2.30137 4.134496-2.510585C4.134496-3.496887 3.596513-4.463263 2.351183-4.463263C1.195517-4.463263 .278954-3.437111 .278954-2.191781C.278954-.856787 1.325031 .109589 2.470735 .109589C3.686177 .109589 4.134496-.996264 4.134496-1.185554C4.134496-1.285181 4.054795-1.305106 4.004981-1.305106C3.915318-1.305106 3.895392-1.24533 3.875467-1.165629C3.526775-.139477 2.630137-.139477 2.530511-.139477C2.032379-.139477 1.633873-.438356 1.404732-.806974C1.105853-1.285181 1.105853-1.942715 1.105853-2.30137Z'/>\n\x3Cpath id='g0-102' d='M1.743462-4.293898V-5.449564C1.743462-6.326276 2.221669-6.804483 2.660025-6.804483C2.689913-6.804483 2.839352-6.804483 2.988792-6.734745C2.86924-6.694894 2.689913-6.56538 2.689913-6.316314C2.689913-6.087173 2.849315-5.88792 3.118306-5.88792C3.407223-5.88792 3.556663-6.087173 3.556663-6.326276C3.556663-6.694894 3.188045-7.023661 2.660025-7.023661C1.96264-7.023661 1.115816-6.495641 1.115816-5.439601V-4.293898H.328767V-3.985056H1.115816V-.757161C1.115816-.308842 1.006227-.308842 .33873-.308842V0C.727273-.009963 1.195517-.029888 1.474471-.029888C1.872976-.029888 2.34122-.029888 2.739726 0V-.308842H2.530511C1.793275-.308842 1.77335-.418431 1.77335-.777086V-3.985056H2.909091V-4.293898H1.743462Z'/>\n\x3Cpath id='g0-104' d='M1.09589-.757161C1.09589-.308842 .986301-.308842 .318804-.308842V0C.667497-.009963 1.175592-.029888 1.444583-.029888C1.703611-.029888 2.221669-.009963 2.560399 0V-.308842C1.892902-.308842 1.783313-.308842 1.783313-.757161V-2.590286C1.783313-3.626401 2.49066-4.184309 3.128269-4.184309C3.755915-4.184309 3.865504-3.646326 3.865504-3.078456V-.757161C3.865504-.308842 3.755915-.308842 3.088418-.308842V0C3.437111-.009963 3.945205-.029888 4.214197-.029888C4.473225-.029888 4.991283-.009963 5.330012 0V-.308842C4.811955-.308842 4.562889-.308842 4.552927-.607721V-2.510585C4.552927-3.367372 4.552927-3.676214 4.244085-4.034869C4.104608-4.204234 3.775841-4.403487 3.198007-4.403487C2.361146-4.403487 1.92279-3.805729 1.753425-3.427148V-6.914072L.318804-6.804483V-6.495641C1.016189-6.495641 1.09589-6.425903 1.09589-5.937733V-.757161Z'/>\n\x3Cpath id='g0-105' d='M1.763387-4.403487L.368618-4.293898V-3.985056C1.016189-3.985056 1.105853-3.92528 1.105853-3.437111V-.757161C1.105853-.308842 .996264-.308842 .328767-.308842V0C.647572-.009963 1.185554-.029888 1.424658-.029888C1.77335-.029888 2.122042-.009963 2.460772 0V-.308842C1.803238-.308842 1.763387-.358655 1.763387-.747198V-4.403487ZM1.803238-6.136986C1.803238-6.455791 1.554172-6.665006 1.275218-6.665006C.966376-6.665006 .747198-6.396015 .747198-6.136986C.747198-5.867995 .966376-5.608966 1.275218-5.608966C1.554172-5.608966 1.803238-5.818182 1.803238-6.136986Z'/>\n\x3Cpath id='g0-107' d='M1.05604-.757161C1.05604-.308842 .946451-.308842 .278954-.308842V0C.607721-.009963 1.075965-.029888 1.364882-.029888C1.663761-.029888 2.062267-.019925 2.460772 0V-.308842C1.793275-.308842 1.683686-.308842 1.683686-.757161V-1.783313L2.321295-2.331258C3.088418-1.275218 3.506849-.71731 3.506849-.537983C3.506849-.348692 3.337484-.308842 3.148194-.308842V0C3.427148-.009963 4.014944-.029888 4.224159-.029888C4.513076-.029888 4.801993-.019925 5.090909 0V-.308842C4.722291-.308842 4.503113-.308842 4.124533-.836862L2.859278-2.620174C2.849315-2.6401 2.799502-2.699875 2.799502-2.729763C2.799502-2.769614 3.506849-3.367372 3.606476-3.447073C4.234122-3.955168 4.652553-3.975093 4.861768-3.985056V-4.293898C4.572852-4.26401 4.443337-4.26401 4.164384-4.26401C3.805729-4.26401 3.188045-4.283935 3.048568-4.293898V-3.985056C3.237858-3.975093 3.337484-3.865504 3.337484-3.73599C3.337484-3.536737 3.198007-3.417186 3.118306-3.347447L1.713574-2.132005V-6.914072L.278954-6.804483V-6.495641C.976339-6.495641 1.05604-6.425903 1.05604-5.937733V-.757161Z'/>\n\x3Cpath id='g0-108' d='M1.763387-6.914072L.328767-6.804483V-6.495641C1.026152-6.495641 1.105853-6.425903 1.105853-5.937733V-.757161C1.105853-.308842 .996264-.308842 .328767-.308842V0C.657534-.009963 1.185554-.029888 1.43462-.029888S2.171856-.009963 2.540473 0V-.308842C1.872976-.308842 1.763387-.308842 1.763387-.757161V-6.914072Z'/>\n\x3Cpath id='g0-109' d='M1.09589-3.427148V-.757161C1.09589-.308842 .986301-.308842 .318804-.308842V0C.667497-.009963 1.175592-.029888 1.444583-.029888C1.703611-.029888 2.221669-.009963 2.560399 0V-.308842C1.892902-.308842 1.783313-.308842 1.783313-.757161V-2.590286C1.783313-3.626401 2.49066-4.184309 3.128269-4.184309C3.755915-4.184309 3.865504-3.646326 3.865504-3.078456V-.757161C3.865504-.308842 3.755915-.308842 3.088418-.308842V0C3.437111-.009963 3.945205-.029888 4.214197-.029888C4.473225-.029888 4.991283-.009963 5.330012 0V-.308842C4.662516-.308842 4.552927-.308842 4.552927-.757161V-2.590286C4.552927-3.626401 5.260274-4.184309 5.897883-4.184309C6.525529-4.184309 6.635118-3.646326 6.635118-3.078456V-.757161C6.635118-.308842 6.525529-.308842 5.858032-.308842V0C6.206725-.009963 6.714819-.029888 6.983811-.029888C7.242839-.029888 7.760897-.009963 8.099626 0V-.308842C7.581569-.308842 7.332503-.308842 7.32254-.607721V-2.510585C7.32254-3.367372 7.32254-3.676214 7.013699-4.034869C6.874222-4.204234 6.545455-4.403487 5.967621-4.403487C5.13076-4.403487 4.692403-3.805729 4.523039-3.427148C4.383562-4.293898 3.646326-4.403487 3.198007-4.403487C2.470735-4.403487 2.002491-3.975093 1.723537-3.35741V-4.403487L.318804-4.293898V-3.985056C1.016189-3.985056 1.09589-3.915318 1.09589-3.427148Z'/>\n\x3Cpath id='g0-110' d='M1.09589-3.427148V-.757161C1.09589-.308842 .986301-.308842 .318804-.308842V0C.667497-.009963 1.175592-.029888 1.444583-.029888C1.703611-.029888 2.221669-.009963 2.560399 0V-.308842C1.892902-.308842 1.783313-.308842 1.783313-.757161V-2.590286C1.783313-3.626401 2.49066-4.184309 3.128269-4.184309C3.755915-4.184309 3.865504-3.646326 3.865504-3.078456V-.757161C3.865504-.308842 3.755915-.308842 3.088418-.308842V0C3.437111-.009963 3.945205-.029888 4.214197-.029888C4.473225-.029888 4.991283-.009963 5.330012 0V-.308842C4.811955-.308842 4.562889-.308842 4.552927-.607721V-2.510585C4.552927-3.367372 4.552927-3.676214 4.244085-4.034869C4.104608-4.204234 3.775841-4.403487 3.198007-4.403487C2.470735-4.403487 2.002491-3.975093 1.723537-3.35741V-4.403487L.318804-4.293898V-3.985056C1.016189-3.985056 1.09589-3.915318 1.09589-3.427148Z'/>\n\x3Cpath id='g0-111' d='M4.692403-2.132005C4.692403-3.407223 3.696139-4.463263 2.49066-4.463263C1.24533-4.463263 .278954-3.377335 .278954-2.132005C.278954-.846824 1.315068 .109589 2.480697 .109589C3.686177 .109589 4.692403-.86675 4.692403-2.132005ZM2.49066-.139477C2.062267-.139477 1.62391-.348692 1.354919-.806974C1.105853-1.24533 1.105853-1.853051 1.105853-2.211706C1.105853-2.600249 1.105853-3.138232 1.344956-3.576588C1.613948-4.034869 2.082192-4.244085 2.480697-4.244085C2.919054-4.244085 3.347447-4.024907 3.606476-3.596513S3.865504-2.590286 3.865504-2.211706C3.865504-1.853051 3.865504-1.315068 3.646326-.876712C3.427148-.428394 2.988792-.139477 2.49066-.139477Z'/>\n\x3Cpath id='g0-112' d='M1.713574-3.745953V-4.403487L.278954-4.293898V-3.985056C.986301-3.985056 1.05604-3.92528 1.05604-3.486924V1.175592C1.05604 1.62391 .946451 1.62391 .278954 1.62391V1.932752C.617684 1.92279 1.135741 1.902864 1.39477 1.902864C1.663761 1.902864 2.171856 1.92279 2.520548 1.932752V1.62391C1.853051 1.62391 1.743462 1.62391 1.743462 1.175592V-.498132V-.587796C1.793275-.428394 2.211706 .109589 2.968867 .109589C4.154421 .109589 5.190535-.86675 5.190535-2.15193C5.190535-3.417186 4.224159-4.403487 3.108344-4.403487C2.331258-4.403487 1.912827-3.965131 1.713574-3.745953ZM1.743462-1.135741V-3.35741C2.032379-3.865504 2.520548-4.154421 3.028643-4.154421C3.755915-4.154421 4.363636-3.277709 4.363636-2.15193C4.363636-.946451 3.666252-.109589 2.929016-.109589C2.530511-.109589 2.15193-.308842 1.882939-.71731C1.743462-.926526 1.743462-.936488 1.743462-1.135741Z'/>\n\x3Cpath id='g0-114' d='M1.663761-3.307597V-4.403487L.278954-4.293898V-3.985056C.976339-3.985056 1.05604-3.915318 1.05604-3.427148V-.757161C1.05604-.308842 .946451-.308842 .278954-.308842V0C.667497-.009963 1.135741-.029888 1.414695-.029888C1.8132-.029888 2.281445-.029888 2.67995 0V-.308842H2.470735C1.733499-.308842 1.713574-.418431 1.713574-.777086V-2.311333C1.713574-3.297634 2.132005-4.184309 2.889166-4.184309C2.958904-4.184309 2.978829-4.184309 2.998755-4.174346C2.968867-4.164384 2.769614-4.044832 2.769614-3.785803C2.769614-3.506849 2.978829-3.35741 3.198007-3.35741C3.377335-3.35741 3.626401-3.476961 3.626401-3.795766S3.317559-4.403487 2.889166-4.403487C2.161893-4.403487 1.803238-3.73599 1.663761-3.307597Z'/>\n\x3Cpath id='g0-115' d='M2.072229-1.932752C2.291407-1.892902 3.108344-1.733499 3.108344-1.016189C3.108344-.508095 2.759651-.109589 1.982565-.109589C1.145704-.109589 .787049-.67746 .597758-1.524284C.56787-1.653798 .557908-1.693649 .458281-1.693649C.328767-1.693649 .328767-1.62391 .328767-1.444583V-.129514C.328767 .039851 .328767 .109589 .438356 .109589C.488169 .109589 .498132 .099626 .687422-.089664C.707347-.109589 .707347-.129514 .886675-.318804C1.325031 .099626 1.77335 .109589 1.982565 .109589C3.128269 .109589 3.58655-.557908 3.58655-1.275218C3.58655-1.803238 3.287671-2.102117 3.16812-2.221669C2.839352-2.540473 2.450809-2.620174 2.032379-2.699875C1.474471-2.809465 .806974-2.938979 .806974-3.516812C.806974-3.865504 1.066002-4.273973 1.92279-4.273973C3.01868-4.273973 3.068493-3.377335 3.088418-3.068493C3.098381-2.978829 3.188045-2.978829 3.20797-2.978829C3.337484-2.978829 3.337484-3.028643 3.337484-3.217933V-4.224159C3.337484-4.393524 3.337484-4.463263 3.227895-4.463263C3.178082-4.463263 3.158157-4.463263 3.028643-4.343711C2.998755-4.303861 2.899128-4.214197 2.859278-4.184309C2.480697-4.463263 2.072229-4.463263 1.92279-4.463263C.707347-4.463263 .328767-3.795766 .328767-3.237858C.328767-2.889166 .488169-2.610212 .757161-2.391034C1.075965-2.132005 1.354919-2.072229 2.072229-1.932752Z'/>\n\x3Cpath id='g0-116' d='M1.723537-3.985056H3.148194V-4.293898H1.723537V-6.127024H1.474471C1.464508-5.310087 1.165629-4.244085 .18929-4.204234V-3.985056H1.036115V-1.235367C1.036115-.009963 1.96264 .109589 2.321295 .109589C3.028643 .109589 3.307597-.597758 3.307597-1.235367V-1.803238H3.058531V-1.255293C3.058531-.518057 2.759651-.139477 2.391034-.139477C1.723537-.139477 1.723537-1.046077 1.723537-1.215442V-3.985056Z'/>\n\x3Cpath id='g0-117' d='M3.895392-.787049V.109589L5.330012 0V-.308842C4.632628-.308842 4.552927-.37858 4.552927-.86675V-4.403487L3.088418-4.293898V-3.985056C3.785803-3.985056 3.865504-3.915318 3.865504-3.427148V-1.653798C3.865504-.787049 3.387298-.109589 2.660025-.109589C1.823163-.109589 1.783313-.577833 1.783313-1.09589V-4.403487L.318804-4.293898V-3.985056C1.09589-3.985056 1.09589-3.955168 1.09589-3.068493V-1.574097C1.09589-.797011 1.09589 .109589 2.610212 .109589C3.16812 .109589 3.606476-.169365 3.895392-.787049Z'/>\n\x3Cpath id='g0-119' d='M6.166874-3.347447C6.346202-3.845579 6.655044-3.975093 7.003736-3.985056V-4.293898C6.784558-4.273973 6.495641-4.26401 6.276463-4.26401C5.987547-4.26401 5.539228-4.283935 5.349938-4.293898V-3.985056C5.708593-3.975093 5.927771-3.795766 5.927771-3.506849C5.927771-3.447073 5.927771-3.427148 5.877958-3.297634L4.971357-.747198L3.985056-3.526775C3.945205-3.646326 3.935243-3.666252 3.935243-3.716065C3.935243-3.985056 4.323786-3.985056 4.523039-3.985056V-4.293898C4.234122-4.283935 3.726027-4.26401 3.486924-4.26401C3.188045-4.26401 2.899128-4.273973 2.600249-4.293898V-3.985056C2.968867-3.985056 3.128269-3.965131 3.227895-3.835616C3.277709-3.775841 3.387298-3.476961 3.457036-3.287671L2.600249-.876712L1.653798-3.536737C1.603985-3.656289 1.603985-3.676214 1.603985-3.716065C1.603985-3.985056 1.992528-3.985056 2.191781-3.985056V-4.293898C1.892902-4.283935 1.334994-4.26401 1.105853-4.26401C1.066002-4.26401 .537983-4.273973 .179328-4.293898V-3.985056C.67746-3.985056 .797011-3.955168 .916563-3.636364L2.171856-.109589C2.221669 .029888 2.251557 .109589 2.381071 .109589S2.530511 .049813 2.580324-.089664L3.58655-2.909091L4.60274-.079701C4.64259 .029888 4.672478 .109589 4.801993 .109589S4.961395 .019925 5.001245-.079701L6.166874-3.347447Z'/>\n\x3Cpath id='g0-121' d='M4.134496-3.347447C4.393524-3.975093 4.901619-3.985056 5.061021-3.985056V-4.293898C4.83188-4.273973 4.542964-4.26401 4.313823-4.26401C4.134496-4.26401 3.666252-4.283935 3.447073-4.293898V-3.985056C3.755915-3.975093 3.915318-3.805729 3.915318-3.556663C3.915318-3.457036 3.905355-3.437111 3.855542-3.317559L2.849315-.86675L1.743462-3.5467C1.703611-3.646326 1.683686-3.686177 1.683686-3.726027C1.683686-3.985056 2.052304-3.985056 2.241594-3.985056V-4.293898C1.982565-4.283935 1.325031-4.26401 1.155666-4.26401C.886675-4.26401 .488169-4.273973 .18929-4.293898V-3.985056C.667497-3.985056 .856787-3.985056 .996264-3.636364L2.49066 0C2.440847 .129514 2.30137 .458281 2.241594 .587796C2.022416 1.135741 1.743462 1.823163 1.105853 1.823163C1.05604 1.823163 .826899 1.823163 .637609 1.643836C.946451 1.603985 1.026152 1.384807 1.026152 1.225405C1.026152 .966376 .836862 .806974 .607721 .806974C.408468 .806974 .18929 .936488 .18929 1.235367C.18929 1.683686 .607721 2.042341 1.105853 2.042341C1.733499 2.042341 2.141968 1.474471 2.381071 .9066L4.134496-3.347447Z'/>\n\x3C/defs>\n\x3Cg id='page1'>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 49.8414 28.8479L 93.2331 28.8479L 93.2331 6.53215L 49.8414 6.53215L 49.8414 28.8479Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 49.8414 28.8479L 93.2331 28.8479L 93.2331 6.53215L 49.8414 6.53215L 49.8414 28.8479Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='197.378225' y='203.039444' xlink:href='#g0-85'/>\n\x3Cuse x='204.850224' y='203.039444' xlink:href='#g0-115'/>\n\x3Cuse x='208.779941' y='203.039444' xlink:href='#g0-101'/>\n\x3Cuse x='213.207793' y='203.039444' xlink:href='#g0-114'/>\n\x3Cuse x='197.378225' y='214.994612' xlink:href='#g0-79'/>\n\x3Cuse x='205.126972' y='214.994612' xlink:href='#g0-112'/>\n\x3Cuse x='210.938538' y='214.994612' xlink:href='#g0-101'/>\n\x3Cuse x='215.366389' y='214.994612' xlink:href='#g0-110'/>\n\x3Cuse x='220.901206' y='214.994612' xlink:href='#g0-115'/>\n\x3Cuse x='197.378225' y='226.949781' xlink:href='#g0-65'/>\n\x3Cuse x='204.850224' y='226.949781' xlink:href='#g0-112'/>\n\x3Cuse x='210.385041' y='226.949781' xlink:href='#g0-112'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 49.8414 66.0407L 93.2331 66.0407L 93.2331 43.725L 49.8414 43.725L 49.8414 66.0407Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 49.8414 66.0407L 93.2331 66.0407L 93.2331 43.725L 49.8414 43.725L 49.8414 66.0407Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='197.378225' y='229.106549' xlink:href='#g0-65'/>\n\x3Cuse x='204.850224' y='229.106549' xlink:href='#g0-112'/>\n\x3Cuse x='210.385041' y='229.106549' xlink:href='#g0-112'/>\n\x3Cuse x='197.378225' y='241.061717' xlink:href='#g0-99'/>\n\x3Cuse x='201.529328' y='241.061717' xlink:href='#g0-104'/>\n\x3Cuse x='207.064145' y='241.061717' xlink:href='#g0-101'/>\n\x3Cuse x='211.491996' y='241.061717' xlink:href='#g0-99'/>\n\x3Cuse x='215.6431' y='241.061717' xlink:href='#g0-107'/>\n\x3Cuse x='220.901187' y='241.061717' xlink:href='#g0-115'/>\n\x3Cuse x='197.378225' y='253.016885' xlink:href='#g0-102'/>\n\x3Cuse x='200.422382' y='253.016885' xlink:href='#g0-111'/>\n\x3Cuse x='205.403721' y='253.016885' xlink:href='#g0-114'/>\n\x3Cuse x='197.378225' y='264.972053' xlink:href='#g0-117'/>\n\x3Cuse x='202.913042' y='264.972053' xlink:href='#g0-112'/>\n\x3Cuse x='208.447858' y='264.972053' xlink:href='#g0-45'/>\n\x3Cuse x='197.378225' y='276.927221' xlink:href='#g0-100'/>\n\x3Cuse x='202.913042' y='276.927221' xlink:href='#g0-97'/>\n\x3Cuse x='207.894381' y='276.927221' xlink:href='#g0-116'/>\n\x3Cuse x='211.768754' y='276.927221' xlink:href='#g0-101'/>\n\x3Cuse x='216.196606' y='276.927221' xlink:href='#g0-115'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 0.250937 103.234L 43.6426 103.234L 43.6426 80.9179L 0.250937 80.9179L 0.250937 103.234Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 0.250937 103.234L 43.6426 103.234L 43.6426 80.9179L 0.250937 80.9179L 0.250937 103.234Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='147.973025' y='272.137976' xlink:href='#g0-78'/>\n\x3Cuse x='155.445024' y='272.137976' xlink:href='#g0-111'/>\n\x3Cuse x='147.973025' y='284.093144' xlink:href='#g0-85'/>\n\x3Cuse x='155.445024' y='284.093144' xlink:href='#g0-112'/>\n\x3Cuse x='160.979841' y='284.093144' xlink:href='#g0-45'/>\n\x3Cuse x='147.973025' y='296.048312' xlink:href='#g0-100'/>\n\x3Cuse x='153.507842' y='296.048312' xlink:href='#g0-97'/>\n\x3Cuse x='158.489181' y='296.048312' xlink:href='#g0-116'/>\n\x3Cuse x='162.363555' y='296.048312' xlink:href='#g0-101'/>\n\x3Cuse x='147.973025' y='308.00348' xlink:href='#g0-70'/>\n\x3Cuse x='153.646212' y='308.00348' xlink:href='#g0-111'/>\n\x3Cuse x='158.627551' y='308.00348' xlink:href='#g0-117'/>\n\x3Cuse x='164.162368' y='308.00348' xlink:href='#g0-110'/>\n\x3Cuse x='169.697185' y='308.00348' xlink:href='#g0-100'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 0.250937 140.426L 43.6426 140.426L 43.6426 118.111L 0.250937 118.111L 0.250937 140.426Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 0.250937 140.426L 43.6426 140.426L 43.6426 118.111L 0.250937 118.111L 0.250937 140.426Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='147.973025' y='308.223328' xlink:href='#g0-65'/>\n\x3Cuse x='155.445024' y='308.223328' xlink:href='#g0-112'/>\n\x3Cuse x='160.979841' y='308.223328' xlink:href='#g0-112'/>\n\x3Cuse x='147.973025' y='320.178496' xlink:href='#g0-114'/>\n\x3Cuse x='151.875075' y='320.178496' xlink:href='#g0-117'/>\n\x3Cuse x='157.409892' y='320.178496' xlink:href='#g0-110'/>\n\x3Cuse x='162.944709' y='320.178496' xlink:href='#g0-115'/>\n\x3Cuse x='147.973025' y='332.133664' xlink:href='#g0-110'/>\n\x3Cuse x='153.507842' y='332.133664' xlink:href='#g0-111'/>\n\x3Cuse x='158.489181' y='332.133664' xlink:href='#g0-114'/>\n\x3Cuse x='162.391231' y='332.133664' xlink:href='#g0-45'/>\n\x3Cuse x='147.973025' y='344.088833' xlink:href='#g0-109'/>\n\x3Cuse x='156.27525' y='344.088833' xlink:href='#g0-97'/>\n\x3Cuse x='161.256589' y='344.088833' xlink:href='#g0-108'/>\n\x3Cuse x='164.023998' y='344.088833' xlink:href='#g0-108'/>\n\x3Cuse x='166.791406' y='344.088833' xlink:href='#g0-121'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 103.234L 142.824 103.234L 142.824 80.9179L 99.4319 80.9179L 99.4319 103.234Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 103.234L 142.824 103.234L 142.824 80.9179L 99.4319 80.9179L 99.4319 103.234Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='246.783424' y='272.137976' xlink:href='#g0-78'/>\n\x3Cuse x='254.255424' y='272.137976' xlink:href='#g0-101'/>\n\x3Cuse x='258.683275' y='272.137976' xlink:href='#g0-119'/>\n\x3Cuse x='246.783424' y='284.093144' xlink:href='#g0-86'/>\n\x3Cuse x='253.425193' y='284.093144' xlink:href='#g0-101'/>\n\x3Cuse x='257.853045' y='284.093144' xlink:href='#g0-114'/>\n\x3Cuse x='261.755096' y='284.093144' xlink:href='#g0-45'/>\n\x3Cuse x='246.783424' y='296.048312' xlink:href='#g0-115'/>\n\x3Cuse x='250.713142' y='296.048312' xlink:href='#g0-105'/>\n\x3Cuse x='253.480551' y='296.048312' xlink:href='#g0-111'/>\n\x3Cuse x='258.46189' y='296.048312' xlink:href='#g0-110'/>\n\x3Cuse x='246.783424' y='308.00348' xlink:href='#g0-70'/>\n\x3Cuse x='252.456612' y='308.00348' xlink:href='#g0-111'/>\n\x3Cuse x='257.437951' y='308.00348' xlink:href='#g0-117'/>\n\x3Cuse x='262.972768' y='308.00348' xlink:href='#g0-110'/>\n\x3Cuse x='268.507585' y='308.00348' xlink:href='#g0-100'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 140.426L 142.824 140.426L 142.824 118.111L 99.4319 118.111L 99.4319 140.426Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 140.426L 142.824 140.426L 142.824 118.111L 99.4319 118.111L 99.4319 140.426Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='246.783424' y='315.224996' xlink:href='#g0-85'/>\n\x3Cuse x='254.255424' y='315.224996' xlink:href='#g0-112'/>\n\x3Cuse x='260.066989' y='315.224996' xlink:href='#g0-100'/>\n\x3Cuse x='265.601806' y='315.224996' xlink:href='#g0-97'/>\n\x3Cuse x='270.583145' y='315.224996' xlink:href='#g0-116'/>\n\x3Cuse x='274.457519' y='315.224996' xlink:href='#g0-101'/>\n\x3Cuse x='246.783424' y='327.180164' xlink:href='#g0-100'/>\n\x3Cuse x='252.318241' y='327.180164' xlink:href='#g0-111'/>\n\x3Cuse x='257.022832' y='327.180164' xlink:href='#g0-119'/>\n\x3Cuse x='264.218092' y='327.180164' xlink:href='#g0-110'/>\n\x3Cuse x='269.752909' y='327.180164' xlink:href='#g0-45'/>\n\x3Cuse x='246.783424' y='339.135332' xlink:href='#g0-108'/>\n\x3Cuse x='249.550833' y='339.135332' xlink:href='#g0-111'/>\n\x3Cuse x='254.532172' y='339.135332' xlink:href='#g0-97'/>\n\x3Cuse x='259.513511' y='339.135332' xlink:href='#g0-100'/>\n\x3Cuse x='265.048328' y='339.135332' xlink:href='#g0-115'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 177.619L 142.824 177.619L 142.824 155.304L 99.4319 155.304L 99.4319 177.619Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 177.619L 142.824 177.619L 142.824 155.304L 99.4319 155.304L 99.4319 177.619Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='246.783424' y='346.245768' xlink:href='#g0-85'/>\n\x3Cuse x='254.255424' y='346.245768' xlink:href='#g0-115'/>\n\x3Cuse x='258.185141' y='346.245768' xlink:href='#g0-101'/>\n\x3Cuse x='262.612993' y='346.245768' xlink:href='#g0-114'/>\n\x3Cuse x='246.783424' y='358.200936' xlink:href='#g0-112'/>\n\x3Cuse x='252.318241' y='358.200936' xlink:href='#g0-114'/>\n\x3Cuse x='256.220292' y='358.200936' xlink:href='#g0-111'/>\n\x3Cuse x='261.201631' y='358.200936' xlink:href='#g0-109'/>\n\x3Cuse x='269.503856' y='358.200936' xlink:href='#g0-112'/>\n\x3Cuse x='275.038673' y='358.200936' xlink:href='#g0-116'/>\n\x3Cuse x='278.913047' y='358.200936' xlink:href='#g0-101'/>\n\x3Cuse x='283.340899' y='358.200936' xlink:href='#g0-100'/>\n\x3Cuse x='246.783424' y='370.156104' xlink:href='#g0-116'/>\n\x3Cuse x='250.657798' y='370.156104' xlink:href='#g0-111'/>\n\x3Cuse x='246.783424' y='382.111272' xlink:href='#g0-114'/>\n\x3Cuse x='250.685475' y='382.111272' xlink:href='#g0-101'/>\n\x3Cuse x='255.113327' y='382.111272' xlink:href='#g0-115'/>\n\x3Cuse x='259.043044' y='382.111272' xlink:href='#g0-116'/>\n\x3Cuse x='262.917418' y='382.111272' xlink:href='#g0-97'/>\n\x3Cuse x='267.898757' y='382.111272' xlink:href='#g0-114'/>\n\x3Cuse x='271.800808' y='382.111272' xlink:href='#g0-116'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 214.812L 142.824 214.812L 142.824 192.496L 99.4319 192.496L 99.4319 214.812Z' fill='#e6f3ff'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 99.4319 214.812L 142.824 214.812L 142.824 192.496L 99.4319 192.496L 99.4319 214.812Z' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.501875'/>\n\x3C/g>\n\x3Cuse x='246.783424' y='382.054296' xlink:href='#g0-65'/>\n\x3Cuse x='254.255424' y='382.054296' xlink:href='#g0-112'/>\n\x3Cuse x='259.79024' y='382.054296' xlink:href='#g0-112'/>\n\x3Cuse x='246.783424' y='394.009464' xlink:href='#g0-114'/>\n\x3Cuse x='250.685475' y='394.009464' xlink:href='#g0-101'/>\n\x3Cuse x='255.113327' y='394.009464' xlink:href='#g0-115'/>\n\x3Cuse x='259.043044' y='394.009464' xlink:href='#g0-116'/>\n\x3Cuse x='262.917418' y='394.009464' xlink:href='#g0-97'/>\n\x3Cuse x='267.898757' y='394.009464' xlink:href='#g0-114'/>\n\x3Cuse x='271.800808' y='394.009464' xlink:href='#g0-116'/>\n\x3Cuse x='275.675181' y='394.009464' xlink:href='#g0-115'/>\n\x3Cuse x='246.783424' y='405.964632' xlink:href='#g0-40'/>\n\x3Cuse x='250.657798' y='405.964632' xlink:href='#g0-78'/>\n\x3Cuse x='258.129797' y='405.964632' xlink:href='#g0-101'/>\n\x3Cuse x='262.557649' y='405.964632' xlink:href='#g0-119'/>\n\x3Cuse x='246.783424' y='417.9198' xlink:href='#g0-86'/>\n\x3Cuse x='253.425193' y='417.9198' xlink:href='#g0-101'/>\n\x3Cuse x='257.853045' y='417.9198' xlink:href='#g0-114'/>\n\x3Cuse x='261.755096' y='417.9198' xlink:href='#g0-46'/>\n\x3Cuse x='264.522504' y='417.9198' xlink:href='#g0-41'/>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 71.5372 41.625L 71.5372 28.8479' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='1'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 72.0372 41.625C 73.4122 39.75 75.4872 38.925 75.6872 38.925C 75.9122 38.925 75.9872 39.125 75.9872 39.3C 75.9872 39.575 75.8622 39.625 75.7372 39.7C 74.8872 40.075 73.0622 40.875 71.8872 43.375C 71.7372 43.675 71.7122 43.725 71.5372 43.725C 71.3622 43.725 71.3372 43.675 71.1872 43.375C 70.0122 40.875 68.1872 40.075 67.3372 39.7C 67.2122 39.625 67.0872 39.575 67.0872 39.3C 67.0872 39.125 67.1622 38.925 67.3872 38.925C 67.5872 38.925 69.6622 39.75 71.0372 41.625L 72.0372 41.625Z' fill='#3366cc'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 21.9468 78.8179L 21.9468 74.719L 71.5372 74.719L 71.5372 66.0407' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='1'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 22.4468 78.8179C 23.8218 76.9429 25.8968 76.1179 26.0968 76.1179C 26.3218 76.1179 26.3968 76.3179 26.3968 76.4929C 26.3968 76.7679 26.2718 76.8179 26.1468 76.8929C 25.2968 77.2679 23.4718 78.0679 22.2968 80.5679C 22.1468 80.8679 22.1218 80.9179 21.9468 80.9179C 21.7718 80.9179 21.7468 80.8679 21.5968 80.5679C 20.4218 78.0679 18.5968 77.2679 17.7468 76.8929C 17.6218 76.8179 17.4968 76.7679 17.4968 76.4929C 17.4968 76.3179 17.5718 76.1179 17.7968 76.1179C 17.9968 76.1179 20.0718 76.9429 21.4468 78.8179L 22.4468 78.8179Z' fill='#3366cc'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 21.9468 116.011L 21.9468 103.234' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='1'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 22.4468 116.011C 23.8218 114.136 25.8968 113.311 26.0968 113.311C 26.3218 113.311 26.3968 113.511 26.3968 113.686C 26.3968 113.961 26.2718 114.011 26.1468 114.086C 25.2968 114.461 23.4718 115.261 22.2968 117.761C 22.1468 118.061 22.1218 118.111 21.9468 118.111C 21.7718 118.111 21.7468 118.061 21.5968 117.761C 20.4218 115.261 18.5968 114.461 17.7468 114.086C 17.6218 114.011 17.4968 113.961 17.4968 113.686C 17.4968 113.511 17.5718 113.311 17.7968 113.311C 17.9968 113.311 20.0718 114.136 21.4468 116.011L 22.4468 116.011Z' fill='#3366cc'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.128 78.8179L 121.128 74.719L 71.5372 74.719L 71.5372 66.0407' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='1'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.628 78.8179C 123.003 76.9429 125.078 76.1179 125.278 76.1179C 125.503 76.1179 125.578 76.3179 125.578 76.4929C 125.578 76.7679 125.453 76.8179 125.328 76.8929C 124.478 77.2679 122.653 78.0679 121.478 80.5679C 121.328 80.8679 121.303 80.9179 121.128 80.9179C 120.953 80.9179 120.928 80.8679 120.778 80.5679C 119.603 78.0679 117.778 77.2679 116.928 76.8929C 116.803 76.8179 116.678 76.7679 116.678 76.4929C 116.678 76.3179 116.753 76.1179 116.978 76.1179C 117.178 76.1179 119.253 76.9429 120.628 78.8179L 121.628 78.8179Z' fill='#3366cc'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.128 116.011L 121.128 103.234' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='1'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.628 116.011C 123.003 114.136 125.078 113.311 125.278 113.311C 125.503 113.311 125.578 113.511 125.578 113.686C 125.578 113.961 125.453 114.011 125.328 114.086C 124.478 114.461 122.653 115.261 121.478 117.761C 121.328 118.061 121.303 118.111 121.128 118.111C 120.953 118.111 120.928 118.061 120.778 117.761C 119.603 115.261 117.778 114.461 116.928 114.086C 116.803 114.011 116.678 113.961 116.678 113.686C 116.678 113.511 116.753 113.311 116.978 113.311C 117.178 113.311 119.253 114.136 120.628 116.011L 121.628 116.011Z' fill='#3366cc'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.128 153.204L 121.128 140.426' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='1'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.628 153.204C 123.003 151.329 125.078 150.504 125.278 150.504C 125.503 150.504 125.578 150.704 125.578 150.879C 125.578 151.154 125.453 151.204 125.328 151.279C 124.478 151.654 122.653 152.454 121.478 154.954C 121.328 155.254 121.303 155.304 121.128 155.304C 120.953 155.304 120.928 155.254 120.778 154.954C 119.603 152.454 117.778 151.654 116.928 151.279C 116.803 151.204 116.678 151.154 116.678 150.879C 116.678 150.704 116.753 150.504 116.978 150.504C 117.178 150.504 119.253 151.329 120.628 153.204L 121.628 153.204Z' fill='#3366cc'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.128 190.396L 121.128 177.619' fill='none' stroke='#3366cc' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='1'/>\n\x3C/g>\n\x3Cg transform='translate(127.679 194.995)scale(.996264)'>\n\x3Cpath d='M 121.628 190.396C 123.003 188.521 125.078 187.696 125.278 187.696C 125.503 187.696 125.578 187.896 125.578 188.071C 125.578 188.346 125.453 188.396 125.328 188.471C 124.478 188.846 122.653 189.646 121.478 192.146C 121.328 192.446 121.303 192.496 121.128 192.496C 120.953 192.496 120.928 192.446 120.778 192.146C 119.603 189.646 117.778 188.846 116.928 188.471C 116.803 188.396 116.678 188.346 116.678 188.071C 116.678 187.896 116.753 187.696 116.978 187.696C 117.178 187.696 119.253 188.521 120.628 190.396L 121.628 190.396Z' fill='#3366cc'/>\n\x3C/g>\n\x3C/g>\n\x3C/svg>",type:"svgGraphic"},uuid:"5|18"},$R[663]={content:$R[664]={type:"text",text:"This process relies on proper version management. Each release should have a unique version number, typically following the Semantic Versioning (SemVer) standard (e.g., `1.0.0`, `1.0.1`, `1.1.0`). Your update server uses these version numbers to determine whether a user's installed application is outdated. Keeping your versions organized is key to a reliable update system."},uuid:"5|19"},$R[665]={content:$R[666]={type:"quiz",questions:$R[667]=[$R[668]={text:"What is the primary function of Electron Forge in the Electron ecosystem?",options:$R[669]=[$R[670]={text:"To provide the runtime environment for executing the application.",followup:"This is the role of the core Electron framework itself, not specifically Electron Forge.",isRightAnswer:!1},$R[671]={text:"To debug and test the application's user interface.",followup:"Debugging and testing are typically done using developer tools, not Electron Forge.",isRightAnswer:!1},$R[672]={text:"To package and bundle an application's source code into a distributable format.",followup:"Correct! Electron Forge is an all-in-one tool that transforms your project files into a runnable application.",isRightAnswer:!0},$R[673]={text:"To write the application's HTML, CSS, and JavaScript code.",followup:"Electron Forge is a build tool, not a code editor. The developer writes the application code.",isRightAnswer:!1}]},$R[674]={text:"In Electron Forge, what are \"makers\" and where are they typically configured?",options:$R[675]=[$R[676]={text:"They are installers for specific operating systems, configured in the `package.json` file.",followup:"That's right! Makers create native installers for platforms like Windows, macOS, and Linux, and are configured in `package.json`.",isRightAnswer:!0},$R[677]={text:"They are plugins for adding new features, configured in a separate `forge.config.js` file.",followup:"While a `forge.config.js` can be used, makers are specifically for creating installers, not for adding application features.",isRightAnswer:!1},$R[678]={text:"They are templates for creating new projects, configured during initial setup.",followup:"This is incorrect. Makers are related to building the final application, not starting a new one.",isRightAnswer:!1},$R[679]={text:"They are the core executable files, configured in the main JavaScript file.",followup:"Makers create installers (like `.dmg` or `.exe`), not just the core executable.",isRightAnswer:!1}]},$R[680]={text:"Why is code signing a crucial step when distributing an Electron application to the public?",options:$R[681]=[$R[682]={text:"To prevent operating system security warnings and build trust with users.",followup:"Correct. Signed applications are trusted by operating systems like macOS (Gatekeeper) and Windows, avoiding scary warnings for users.",isRightAnswer:!0},$R[683]={text:"To encrypt the application's source code so it cannot be viewed.",followup:"Code signing verifies the publisher's identity; it does not encrypt or obscure the source code.",isRightAnswer:!1},$R[684]={text:"To reduce the final file size of the application installer.",followup:"Code signing actually adds a small amount of data to the file, so it does not reduce the size.",isRightAnswer:!1},$R[685]={text:"To automatically submit the application to various app stores.",followup:"While app stores require code signing, the act of signing itself does not automatically submit the app.",isRightAnswer:!1}]},$R[686]={text:"Electron's `autoUpdater` module checks a server for new versions and can download them in the background.",options:$R[687]=[$R[688]={text:"True",followup:"Correct. This module is key to providing a smooth update experience for users without requiring manual downloads.",isRightAnswer:!0},$R[689]={text:"False",followup:"Incorrect. The `autoUpdater` module is specifically designed for this purpose.",isRightAnswer:!1}]},$R[690]={text:"Which versioning standard is typically used by Electron's update systems to determine if a new version is available?",options:$R[691]=[$R[692]={text:"Semantic Versioning (SemVer) (e.g., 1.2.3)",followup:"Correct! SemVer (Major.Minor.Patch) is the standard, allowing the update system to understand the significance of a new release.",isRightAnswer:!0},$R[693]={text:"Sequential Numbering (e.g., 1, 2, 3)",followup:"This is too simple and doesn't convey the nature of the changes (major, minor, patch).",isRightAnswer:!1},$R[694]={text:"Roman Numerals (e.g., I, II, III)",followup:"This is not a standard used for software versioning.",isRightAnswer:!1},$R[695]={text:"Date-Based Versioning (e.g., 2023.10.26)",followup:"While some projects use this, it's not the standard convention Electron's ecosystem is built around.",isRightAnswer:!1}]}]},uuid:"5|20"},$R[696]={content:$R[697]={type:"text",text:"Getting your application ready for the world involves more than just writing code. Packaging, creating installers, signing, and planning for updates are all essential steps in delivering a professional and trustworthy desktop application."},uuid:"5|21"}]},$R[698]={uuid:"6",title:"Performance Optimization",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[699]=[$R[700]={content:$R[701]={type:"header",text:"Why Performance Matters"},uuid:"6|0"},$R[702]={content:$R[703]={type:"text",text:"You've built an Electron app, and it works. That's a huge step. But does it work *well*? A slow, resource-hungry application can frustrate users and tarnish their experience. Since Electron apps combine Chromium and Node.js, they have a reputation for being heavy. Optimizing your app is not just a final touch-up; it's a crucial part of the development process that ensures a smooth and responsive feel."},uuid:"6|1"},$R[704]={content:$R[705]={type:"text",text:"Performance tuning involves looking at a few key areas: how much memory your app uses, how quickly it starts, and how smoothly it runs. Let's explore practical ways to improve each one."},uuid:"6|2"},$R[706]={content:$R[707]={type:"header",text:"Taming Memory Usage"},uuid:"6|3"},$R[708]={content:$R[709]={type:"text",text:"Electron's architecture splits your app into a main process and one or more renderer processes. Think of each renderer process as a separate browser tab. If you open too many windows or have inefficient code, memory usage can balloon.\n\nWhile JavaScript's V8 engine has an automatic garbage collector to clean up memory, you can help it work more effectively. One common issue is memory leaks, where your application holds onto memory it no longer needs. This often happens with event listeners that are never removed. If you add a listener to an element, make sure to clean it up when the element is destroyed."},uuid:"6|4"},$R[710]={content:$R[711]={type:"code",markdown:"```\n// Good practice: Clean up listeners\nconst element = document.getElementById('my-button');\n\nfunction handleClick() {\n console.log('Button was clicked!');\n}\n\nelement.addEventListener('click', handleClick);\n\n// When the element is no longer needed...\n// For example, in a cleanup function for a component.\nelement.removeEventListener('click', handleClick);\n```"},uuid:"6|5"},$R[712]={content:$R[713]={type:"text",text:"Another strategy is to be mindful of where you perform heavy tasks. The main process is a singleton; there's only one. Renderer processes can be numerous. If you have a task that consumes a lot of memory or CPU, consider running it in the main process and using IPC to send the results back to the renderer. This prevents a single UI window from bogging down."},uuid:"6|6"},$R[714]={content:$R[715]={type:"blockquote",text:"When you're finished with a large object or data structure, explicitly set its variable to `null`. This signals to the garbage collector that the memory can be reclaimed."},uuid:"6|7"},$R[716]={content:$R[717]={type:"header",text:"Reducing Startup Time"},uuid:"6|8"},$R[718]={content:$R[719]={type:"text",text:"An application's startup time is its first impression. A long wait can make an app feel clunky. The biggest culprit for slow startups is often loading too many modules at once. Disk I/O is slow, and parsing JavaScript takes time."},uuid:"6|9"},$R[720]={content:$R[721]={type:"text",text:"The solution is to load code only when you need it. This practice is called lazy loading. Instead of requiring all your modules at the top of a file, require them inside the functions where they are used."},uuid:"6|10"},$R[722]={content:$R[723]={type:"code",markdown:"```\n// Before: Eager loading\nconst { dialog } = require('electron');\nconst fs = require('fs');\n\nfunction showSaveDialog() {\n // ... uses dialog\n}\n\nfunction readFile() {\n // ... uses fs\n}\n\n// After: Lazy loading\nfunction showSaveDialog() {\n const { dialog } = require('electron');\n // ... uses dialog\n}\n\nfunction readFile() {\n const fs = require('fs');\n // ... uses fs\n}\n```"},uuid:"6|11"},$R[724]={content:$R[725]={type:"text",text:"For larger applications, consider using a bundler like Webpack or Rollup. A bundler can package all your code into a single file. This drastically reduces the number of file system requests on startup, providing a significant speed boost."},uuid:"6|12"},$R[726]={content:$R[727]={type:"header",text:"Finding the Bottlenecks"},uuid:"6|13"},$R[728]={content:$R[729]={type:"text",text:"You can't optimize what you can't measure. Electron comes with a powerful set of built-in profiling tools courtesy of Chromium's DevTools. You can open them in any renderer process (usually with Ctrl+Shift+I or Cmd+Option+I) to diagnose performance issues.\n\nThe **Performance** tab is your best friend for this. It allows you to record a snapshot of your application's runtime activity. After recording for a few seconds while performing an action that feels slow, you'll get a detailed flame graph."},uuid:"6|14"},$R[730]={content:$R[731]={type:"realImage",url:"https://oboe-storage.s3.amazonaws.com/dev/imagesReal/v1/135f742c-9af0-4952-b57f-31be1e878000.png",attributionUrl:"https://commons.wikimedia.org/wiki/File:Mediawiki_parser_profiling_data_screenshot.png",caption:"The profiler shows a breakdown of time spent on different functions and tasks."},uuid:"6|15"},$R[732]={content:$R[733]={type:"text",text:"Look for long bars in the graph—these represent time-consuming tasks. The chart breaks down activity into categories like scripting (your JavaScript), rendering (style and layout calculations), and painting (drawing pixels to the screen). By hovering over different parts of the graph, you can see which specific functions are taking the most time and focus your optimization efforts there.\n\nThe **Memory** tab is equally useful. It can take heap snapshots to show you what objects are currently in memory, helping you hunt down potential memory leaks. If you take two snapshots before and after an action, you can compare them to see which objects were created and not cleaned up."},uuid:"6|16"},$R[734]={content:$R[735]={type:"blockquoteWithCitation",text:"Pro Tip: Make use of linters, formatters, validators, and browser dev tools consistently in your development process to catch these issues early and fix them efficiently.",assetId:3186914},uuid:"6|17"},$R[736]={content:$R[737]={type:"text",text:"Now that you know how to spot performance problems, let's put it all together."},uuid:"6|18"},$R[738]={content:$R[739]={type:"quiz",questions:$R[740]=[$R[741]={text:"Why is performance tuning considered a crucial part of Electron development?",options:$R[742]=[$R[743]={text:"Because Electron apps combine Chromium and Node.js, they can be resource-intensive, and optimization ensures a smooth user experience.",followup:"Correct. The combination of a browser engine and a server runtime gives Electron its power but also makes it prone to high resource usage if not optimized.",isRightAnswer:!0},$R[744]={text:"Electron's main process manages all resources, preventing any performance bottlenecks in the UI.",followup:"Incorrect. The main process is a singleton, and inefficient renderer processes can still cause significant performance problems.",isRightAnswer:!1},$R[745]={text:"Performance tuning is only necessary for large enterprise-level applications.",followup:"Incorrect. All applications, regardless of size, benefit from good performance to provide a better user experience.",isRightAnswer:!1},$R[746]={text:"The V8 engine's garbage collector automatically handles all performance issues, so tuning is optional.",followup:"Incorrect. While the garbage collector helps manage memory, it doesn't solve issues like slow startups or inefficient code.",isRightAnswer:!1}]},$R[747]={text:"What is a common cause of memory leaks in Electron apps, according to the provided text?",options:$R[748]=[$R[749]={text:"Event listeners that are added but never removed when their associated elements are destroyed.",followup:"That's right! Un-removed event listeners can prevent the garbage collector from cleaning up objects, leading to memory leaks.",isRightAnswer:!0},$R[750]={text:"Using too many `console.log` statements.",followup:"Incorrect. While excessive logging can have a minor impact, it's not a typical cause of memory leaks.",isRightAnswer:!1},$R[751]={text:"Loading large image files into a renderer process.",followup:"Incorrect. While large assets consume a lot of memory, this is a usage issue, not a memory leak, unless they are improperly referenced and never released.",isRightAnswer:!1}]},$R[752]={text:"To improve an application's startup time, the recommended practice is to load all JavaScript modules at the very beginning of the main script.",options:$R[753]=[$R[754]={text:"True",followup:"Incorrect. The text recommends the opposite, a practice called 'lazy loading,' where modules are loaded only when they are needed.",isRightAnswer:!1},$R[755]={text:"False",followup:"Correct. Loading everything at once increases startup time due to disk I/O and parsing. Lazy loading is the preferred method.",isRightAnswer:!0}]},$R[756]={text:"Which tool in Chromium's DevTools is used to record runtime activity and visualize time-consuming tasks in a flame graph?",options:$R[757]=[$R[758]={text:"The Console tab",followup:"Incorrect. The Console is for viewing logs and running commands.",isRightAnswer:!1},$R[759]={text:"The Elements tab",followup:"Incorrect. The Elements tab is for inspecting and manipulating the DOM.",isRightAnswer:!1},$R[760]={text:"The Performance tab",followup:"Correct! The Performance tab allows you to record activity and analyze the resulting flame graph to see where your app is spending its time.",isRightAnswer:!0},$R[761]={text:"The Memory tab",followup:"Incorrect. The Memory tab is used for taking heap snapshots to find memory leaks, not for analyzing runtime activity.",isRightAnswer:!1}]},$R[762]={text:"How can a bundler like Webpack or Rollup improve an Electron app's startup performance?",options:$R[763]=[$R[764]={text:"By automatically removing unused code from third-party libraries.",followup:"This is a feature called tree-shaking, which reduces bundle size, but the primary startup benefit is related to file requests.",isRightAnswer:!1},$R[765]={text:"By compressing all application assets, like images and fonts.",followup:"Incorrect. While bundlers can handle assets, their main performance benefit for startup comes from how they handle code.",isRightAnswer:!1},$R[766]={text:"By running your code in a more optimized, separate process.",followup:"Incorrect. A bundler processes your code at build time; it doesn't change how the code is run by Electron at runtime.",isRightAnswer:!1},$R[767]={text:"By packaging all your code into a single file, reducing the number of file system requests.",followup:"Correct. Disk I/O is slow. Bundling code into one file means the application only has to load and parse that single file on startup, which is much faster.",isRightAnswer:!0}]}]},uuid:"6|19"},$R[768]={content:$R[769]={type:"text",text:"Optimizing an Electron app is an ongoing process. By managing memory carefully, speeding up your launch time, and using profilers to find and fix bottlenecks, you can build applications that are not only powerful but also a pleasure to use."},uuid:"6|20"}]},$R[770]={uuid:"7",title:"Security Best Practices",includesKnowledgeBase:!1,hasDemonstratedMastery:!1,streaming:!1,blocks:$R[771]=[$R[772]={content:$R[773]={type:"header",text:"Secure Your Electron App"},uuid:"7|0"},$R[774]={content:$R[775]={type:"text",text:"You've built and packaged your Electron app, but there's one crucial step left: security. Because Electron apps combine a web front-end with powerful Node.js system access, they have unique security challenges. A vulnerability in your app isn't just a website problem; it could expose a user's entire computer."},uuid:"7|1"},$R[776]={content:$R[777]={type:"text",text:"Let's walk through the most common risks and how to protect your application and its users from them. The Electron team maintains excellent security documentation, and many of these best practices are now the default settings, but understanding them is essential."},uuid:"7|2"},$R[778]={content:$R[779]={type:"header",text:"Common Vulnerabilities"},uuid:"7|3"},$R[780]={content:$R[781]={type:"text",text:"The most significant threat to many Electron apps is Cross-Site Scripting (XSS). If your app displays content from a remote source or handles user input, an attacker could try to inject malicious code. In a normal web browser, this is bad. In Electron, it can be catastrophic."},uuid:"7|4"},$R[782]={content:$R[783]={type:"text",text:"Because the renderer process can have Node.js integration, a simple XSS attack could escalate into a Remote Code Execution (RCE) vulnerability. Imagine an attacker injecting a script that uses Node's `fs` or `child_process` modules to read sensitive files or run arbitrary commands on the user's machine."},uuid:"7|5"},$R[784]={content:$R[785]={type:"blockquote",text:"An XSS flaw in your renderer is often equivalent to giving an attacker full remote access to the user's computer."},uuid:"7|6"},$R[786]={content:$R[787]={type:"text",text:"This is why modern Electron development strongly emphasizes separating your app's logic and limiting the power of the renderer process."},uuid:"7|7"},$R[788]={content:$R[789]={type:"header",text:"Building a Secure Foundation"},uuid:"7|8"},$R[790]={content:$R[791]={type:"text",text:"Electron provides several key tools to help you lock down your application. Most of these are configured in the `webPreferences` of your `BrowserWindow`."},uuid:"7|9"},$R[792]={content:$R[793]={type:"blockquote",text:"First, ensure `contextIsolation` is enabled. It's on by default in recent Electron versions. This feature runs your preload scripts and Electron's internal logic in a separate JavaScript context from the website or content loaded in the renderer. This prevents loaded scripts from accessing Node.js or Electron APIs directly."},uuid:"7|10"},$R[794]={content:$R[795]={type:"code",markdown:"```\nconst win = new BrowserWindow({\n webPreferences: {\n // This is the default, but it's good to be explicit.\n contextIsolation: true,\n // We'll use a preload script instead of full integration.\n nodeIntegration: false,\n preload: path.join(__dirname, 'preload.js')\n }\n});\n```"},uuid:"7|11"},$R[796]={content:$R[797]={type:"text",text:"Disabling `nodeIntegration` is also critical. If your renderer process doesn't need direct access to Node.js modules, turn this feature off. Instead, you can expose a limited, secure API from your main process to your renderer using a preload script. This acts as a secure bridge."},uuid:"7|12"},$R[798]={content:$R[799]={type:"text",text:"Here's how a simple `preload.js` might look. It uses the `contextBridge` module to safely expose a function to the renderer process. The renderer can call `window.myAPI.doSomething()` without having access to the entire `ipcRenderer` object."},uuid:"7|13"},$R[800]={content:$R[801]={type:"code",markdown:"```\n// preload.js\nconst { contextBridge, ipcRenderer } = require('electron');\n\ncontextBridge.exposeInMainWorld('myAPI', {\n doSomething: () => ipcRenderer.invoke('do-something')\n});\n```"},uuid:"7|14"},$R[802]={content:$R[803]={type:"header",text:"Content Security Policy"},uuid:"7|15"},$R[804]={content:$R[805]={type:"text",text:"A Content Security Policy (CSP) is another layer of defense. It's a declaration of which dynamic resources are allowed to be loaded by your app. This can effectively prevent attackers from loading scripts from unauthorized domains, even if they manage to find an injection vulnerability."},uuid:"7|16"},$R[806]={content:$R[807]={type:"text",text:"You can set a CSP using a session handler. A strict policy might only allow scripts to be loaded from the app itself (`'self'`) and prevent any inline scripts or `eval()`."},uuid:"7|17"},$R[808]={content:$R[809]={type:"code",markdown:"```\nconst { session } = require('electron');\n\napp.whenReady().then(() => {\n session.defaultSession.webRequest.onHeadersReceived((details, callback) => {\n callback({\n responseHeaders: {\n ...details.responseHeaders,\n 'Content-Security-Policy': [\"script-src 'self'\"]\n }\n });\n });\n});\n```"},uuid:"7|18"},$R[810]={content:$R[811]={type:"text",text:"Finally, always keep your dependencies up to date. Security is a moving target. Regularly run `npm update` to patch vulnerabilities found in Electron, Chromium, and Node.js. A secure app today might be vulnerable tomorrow if it's not maintained."},uuid:"7|19"},$R[812]={content:$R[813]={type:"blockquoteWithCitation",text:"If you're going to prevent a data breach or reduce your risk of being exploited online, you'll have to identify, prioritize, and rectify critical vulnerabilities through constant vulnerability scanning.",assetId:3125529},uuid:"7|20"},$R[814]={content:$R[815]={type:"text",text:"Think you've got it? Let's check your knowledge."},uuid:"7|21"},$R[816]={content:$R[817]={type:"quiz",questions:$R[818]=[$R[819]={text:"Why is a Cross-Site Scripting (XSS) vulnerability significantly more dangerous in an Electron app compared to a standard web browser?",options:$R[820]=[$R[821]={text:"It can only steal browser cookies and session information.",followup:"Incorrect. While it can do this, the primary danger in Electron is the potential for system-level access.",isRightAnswer:!1},$R[822]={text:"Electron apps are completely immune to XSS attacks.",followup:"Incorrect. No application displaying remote or user-generated content is immune without proper security measures.",isRightAnswer:!1},$R[823]={text:"It can lead to Remote Code Execution (RCE) by accessing Node.js APIs.",followup:"Correct. With Node.js integration, an XSS attack can escalate from a web vulnerability to full system compromise.",isRightAnswer:!0},$R[824]={text:"It allows attackers to modify the app's CSS, but nothing more.",followup:"Incorrect. The danger goes far beyond simple styling changes.",isRightAnswer:!1}]},$R[825]={text:"To maximize security, you should set `nodeIntegration: true` in your `BrowserWindow`'s `webPreferences`.",options:$R[826]=[$R[827]={text:"True",followup:"Incorrect. Setting `nodeIntegration` to `true` is a major security risk as it gives renderer processes full access to Node.js modules.",isRightAnswer:!1},$R[828]={text:"False",followup:"Correct. Disabling `nodeIntegration` is a critical security best practice. Required Node.js functionality should be exposed safely via a preload script.",isRightAnswer:!0}]},$R[829]={text:"What is the primary role of a `preload.js` script when used with `contextBridge`?",options:$R[830]=[$R[831]={text:"To load all of the application's CSS and images before the main window appears.",followup:"Incorrect. While it runs before the webpage loads, its primary security role is not to manage static assets.",isRightAnswer:!1},$R[832]={text:"To bypass the Content Security Policy (CSP) for faster development.",followup:"Incorrect. Preload scripts should respect the CSP and are a key part of a secure architecture, not a way to bypass it.",isRightAnswer:!1},$R[833]={text:"To securely expose specific APIs from the main process to the renderer process without exposing the entire `ipcRenderer` object.",followup:"Correct. The `contextBridge` creates a secure bridge, allowing the renderer to call specific functions you define without having broad access to Node.js or Electron APIs.",isRightAnswer:!0},$R[834]={text:"To give the renderer process direct and complete access to the computer's file system.",followup:"Incorrect. This is the opposite of its purpose; it's meant to limit and control access, not grant it completely.",isRightAnswer:!1}]},$R[835]={text:"Which of the following is a good example of a strict Content Security Policy (CSP) for an Electron app that loads all its resources locally?",options:$R[836]=[$R[837]={text:"script-src *; style-src 'unsafe-inline'",followup:"Incorrect. Allowing scripts from any source (`*`) is extremely insecure.",isRightAnswer:!1},$R[838]={text:"script-src 'self' 'unsafe-eval'; object-src 'none'",followup:"Incorrect. While `'self'` is good, allowing `'unsafe-eval'` can open up your application to injection attacks and should be avoided.",isRightAnswer:!1},$R[839]={text:"script-src 'self'; style-src 'self'; default-src 'self'",followup:"Correct. This policy ensures that scripts, styles, and other resources can only be loaded from the application's own origin, effectively blocking unauthorized remote code.",isRightAnswer:!0}]},$R[840]={text:"Besides configuring your app's code, what is a crucial, ongoing maintenance task for ensuring its security?",options:$R[841]=[$R[842]={text:"Regularly running `npm update` to patch vulnerabilities in Electron, Chromium, and Node.js.",followup:"Correct. Security is a moving target, and keeping your dependencies up-to-date is essential for patching newly discovered vulnerabilities.",isRightAnswer:!0},$R[843]={text:"Manually deleting the `node_modules` folder and reinstalling it weekly.",followup:"Incorrect. Simply reinstalling dependencies without updating them to newer versions won't patch security vulnerabilities.",isRightAnswer:!1},$R[844]={text:"Never changing the code after the initial release.",followup:"Incorrect. An unmaintained application is an insecure application, as new vulnerabilities are discovered over time.",isRightAnswer:!1},$R[845]={text:"Rewriting the entire application every six months.",followup:"Incorrect. This is impractical and not a standard security practice.",isRightAnswer:!1}]}]},uuid:"7|22"},$R[846]={content:$R[847]={type:"text",text:"By following these practices, you create a much smaller attack surface, making your application safer for everyone who uses it."},uuid:"7|23"}]}],version:3,formats:$R[848]=["deepdive"],isBookmarked:!1}},ssr:!0},$R[849]={i:"�_web�learn�$searchSlug��learn�build-desktop-apps-with-electron-yz4111�",u:1784590101695,s:"success",l:$R[850]={courseData:$R[21]},ssr:!0}],lastMatchId:"�_web�learn�$searchSlug��learn�build-desktop-apps-with-electron-yz4111�",dehydratedData:$R[851]={queryStream:$R[852]=($R[853]=(e) => new ReadableStream({ start: (r) => { e.on({ next: (a) => { try { r.enqueue(a); } catch (t) {} }, throw: (a) => { r.error(a); }, return: () => { try { r.close(); } catch (a) {} } }); } }))($R[854]=($R[855]=() => { let e = [], r = [], t = !0, n = !1, a = 0, s = (l, g, S) => { for (S = 0; S < a; S++) r[S] && r[S][g](l); }, i = (l, g, S, d) => { for (g = 0, S = e.length; g < S; g++) d = e[g], !t && g === S - 1 ? l[n ? "return" : "throw"](d) : l.next(d); }, u = (l, g) => (t && (g = a++, r[g] = l), i(l), () => { t && (r[g] = r[a], r[a--] = void 0); }); return { __SEROVAL_STREAM__: !0, on: (l) => u(l), next: (l) => { t && (e.push(l), s(l, "next")); }, throw: (l) => { t && (e.push(l), s(l, "throw"), t = !1, n = !1, r.length = 0); }, return: (l) => { t && (e.push(l), s(l, "return"), t = !1, n = !0, r.length = 0); } }; })()),dehydratedQueryClient:$R[856]={mutations:$R[857]=[],queries:$R[858]=[$R[859]={dehydratedAt:1784590101695,state:$R[860]={data:null,dataUpdateCount:1,dataUpdatedAt:1784590101635,error:null,errorUpdateCount:0,errorUpdatedAt:0,fetchFailureCount:0,fetchFailureReason:null,fetchMeta:null,isInvalidated:!1,status:"success",fetchStatus:"idle"},queryKey:$R[861]=["currentUser"],queryHash:"[\"currentUser\"]"},$R[862]={dehydratedAt:1784590101695,state:$R[863]={data:null,dataUpdateCount:1,dataUpdatedAt:1784590101635,error:null,errorUpdateCount:0,errorUpdatedAt:0,fetchFailureCount:0,fetchFailureReason:null,fetchMeta:null,isInvalidated:!1,status:"success",fetchStatus:"idle"},queryKey:$R[864]=["impersonationState"],queryHash:"[\"impersonationState\"]"},$R[865]={dehydratedAt:1784590101695,state:$R[866]={data:$R[21],dataUpdateCount:1,dataUpdatedAt:1784590101695,error:null,errorUpdateCount:0,errorUpdatedAt:0,fetchFailureCount:0,fetchFailureReason:null,fetchMeta:null,isInvalidated:!1,status:"success",fetchStatus:"idle"},queryKey:$R[867]=["sequence","yz4111"],queryHash:"[\"sequence\",\"yz4111\"]"}]}}})($R["tsr"]);document.currentScript.remove()