Making Electron Apps

Posted on

Making Electron Apps – This is a new post from my blog about Lotus Outdoor Build: A stress-free GitHub message management app. have fun!

When I started thinking about Lotus, I knew I would use the Electron. Runaways like to joke that you need 64 gigs of RAM to run any Electron app, but I find the following joke much funnier:

Making Electron Apps

I couldn’t find the original tweet, but you get the idea. If I decided to build a native app using Swift, I bet I would spend a few months in Cross all the time because I have almost no experience with this programming language and then I would give up.

Run Blazor Apps Within Electron Shell

So I chose Electron and used my existing web app building skills to create a Mac app. I’m glad I did, because I had a working prototype in just 4 days.

However, just because Lotus isn’t a native app doesn’t mean it can’t feel like a native app.

Make Electron apps adopt the same standards and patterns as native apps. I’ve written everything I know about it so far, I hope it’s helpful to my fellow electron stealthers!

Electron is essentially a basic web browser, so you must load all of your application’s HTML, CSS, and JavaScript files after creating the window. This can take some time, which is why the electron windows appear blank for a split second.

Automating Steam Releases For Html Games With Electron Forge And Github Actions

When you move a window somewhere or resize it, Lotus remembers the window’s new position and dimensions. The next time you launch Lotus, the window will be in exactly the same position as last time and will have the same width and height. It’s one of those things that’s hard to notice, but users have still come to expect it from native apps.

In macOS, apps often have a custom title bar, and users expect to be able to drag the entire window by clicking on the empty space there.

Here’s a demo of how you can drag the window by clicking anywhere in the top area of ​​the app:

Notice how the window doesn’t move when I try to drag by clicking the “Inbox” label. This is an important detail to remember.

The Ultimate Guide To Electron With React

I have to admit that I did this for 5 months before I realized that the bluetooth text looks bigger compared to all the other apps I use. Bluetooth styling works with Tailwind and sets a default font size of 16px. It looks good online, but it definitely stands out on the desktop app.

Sindre told me that the system default font size in native apps is 13px, but that doesn’t look good in Lotus, so I went with 14px as a compromise. In fact, now I like it more!

Tailwind uses the rem unit to define all sizes in its source code, which allowed me to fix the font size problem by adding a single line of code.

Also, use the system font in your Electron app to make it a good citizen of macOS. Tailwind sets it up for me by default, but here’s how to use a system font if you don’t use Tailwind:

What Is Electron Js Development? By Adequateinfosoft11

I actually found this out a few days ago when Cindra pointed it out to me. Native apps use a default cursor (not the “hand”) even for buttons and other clickable elements. I blocked it completely, because I’m so used to the setting

This feature requires no familiarity, but there is a little-known trick to support a smooth dark mode in an electron. However, let me describe the problem first.

Lotus has a dark gray background in dark mode and one day when I resized its window I noticed this:

The default background color in the electron window is white. When I resize quickly, Electron can’t resize the inner page as fast as native apps, resulting in these white background flashes, even though my page has a gray background.

How To Make Your Very First Desktop App With Electron And Svelte

To fix this, set the background color of the window to the same color used on the page. Then update it every time the system goes to/from dark mode.

Lotus has a side navigation bar with colorful icons inside each element and a light purple background for the currently selected page. When Lotus is in focus, all colors are displayed as they are:

But if you click or switch to another app, Lotus loses focus and replaces the colors with shades of gray:

This looks like another small original applique pattern that is easy to miss. It also requires code in both the main process and the CPU for it to work.

Http Rest Api Calls In Electronjs

In the main process, you need to detect when the window is focused or unfocused and pass those events to the rendering process. Since the rendering process is essentially a browser, the page never loses focus in your “eyes” because it is always visible within the Electron window.

It’s pretty simple to set it up using the menu class that Electron provides. Here are some helpful links to get started faster and create a standard macOS menu right away:

I chose to create a custom menu in Lotus, because I needed a lot of custom elements there. Which also brings us to the next tip.

It’s still somewhat rare to find proper keyboard shortcuts in web apps, but they’re first-class citizens in native ones. It’s really easy to add them electronically, so you really have no excuse not to! First, add a custom menu item, then use a

Javascript Frameworks For Building Desktop Applications

It may seem strange at first that a menu item is required for a shortcut to work, but keep in mind that users often navigate the app’s menu first and only then learn what shortcuts it has.

In Lotus, I created a separate menu section for actions related to message management that is now displayed with a shortcut assigned to each action:

This is another feature that web applications often overlook. It’s interesting that we always expect native apps to let us undo or redo any action, but we don’t have the same expectation on the web. Either way, make sure you add this to your Electron app sooner or later, it will significantly up your native app game.

Undo/redo was a difficult function to leak and I had to rewrite it several times, but I think I’ve come up with an implementation that’s abstract enough to reuse and open later.

Making Video Call Participants Draggable In An Electron App

I made the mistake of showing the “Preferences” page like all the other pages in the old side navigation bar, but now Lotus has a separate native window. It even animates when you switch tabs! Time spent without a doubt.

There’s also no need to add UI buttons to open the Preferences window, as all native macOS apps follow the same pattern of adding a “Preferences” menu item and using

Bad news here, there’s nothing you can find to quickly create a preferences window, so you’ll have to code it yourself.

Unless your app absolutely cannot work without an internet connection, it should gracefully upgrade to an offline experience by synchronizing changes when a connection is available. I’m actually almost done implementing offline support in Lotus, though it depends on external data from the GitHub API.

Build A Desktop Application With Angular And Electron

Read next Searching for retro games with Xata and Next.js 13 Anjana Vakil – Nov 2 How I created and deployed a secure file sharing website using Javascript, HTML and CSS Anurag Vishwakarma – Oct 10 3 reasons why Async/Await is better than String Together Maxim Orlov promises – November 2 Start with the test Bruno Norriler – October 23

Top 7 React Component Libraries to Use in 2022 #javascript #web #react #productivity What was your favorite Hacktoberfest experience? # discuss # open source What were some of the most difficult technologies and concepts to understand along the way? # discuss # race

Vadimdemedes constantly publishes content that violates the community code of conduct πŸ’»πŸ‘¨β€πŸ‘© because it is harassing, offensive or spam. The orange logo! A stylish orange that looks like a glass of orange juice! Coding tutorials, exercises, videos, books

For most of us, the desktop is really just a place to use a browser to access web-based content, use Microsoft Office, or play games. Depending on your job/hobby, there may be some design, communication and development tools in there. Despite the limited role played by desktop and desktop apps, that limited role is extremely profound with a large audience relying on it:

Introducing Electron Toolkit: The Electron App To Build And Launch Electron Apps

It is not one unit. In the top category, it consists of Windows, macOS and Linux. Going one step deeper, it has multiple versions of Windows and macOS and many versions of Linux distributions. Building an app for each of these platform versions is neither easy nor cheap. Each platform has its quirks in how it’s built for it, and those quirks show up in language optimizations, API availability, tool preferences, etc. Unless you were part of a well-resourced team, building a cross-platform app on multiple desktop operating systems was a non-starter. This was the case for a long time… until this little frame called an electron came along:

Electron created and continues to make it easy to write cross-platform desktop applications. The apps you build with are written

Leave a Reply

Your email address will not be published. Required fields are marked *