Build Apps for Windows, MacOS, and Linux Using Node.js and Web Technologies, all From a Single Code Base.

Electron logo
Electron logo
Photo by the author.

If you’re a web developer, you probably know about Electron by now. For the uninitiated, Electron is the semi-controversial technology that allows developers to create apps that can run on Windows, macOS, and Linux using web technologies and a single code base. Despite producing apps that are supposedly slower and heavier than native apps, Electron allows web developers to target all three major PC platforms — something that may otherwise be too costly or time-consuming. In fact, some of the most widely used desktop applications (including Visual Studio Code, Slack, and Discord) are built with Electron.

In this guide, we’ll set up a simple Electron app. Because Electron is based on Node.js, you’ll need to be familiar with that first, as I won’t cover it here. You also need to know the basics of the Express library. As a bonus, we’ll be using TypeScript instead of JavaScript. Trust me, you’ll never want to go back to JS. …


Use Angular Material, Flex-Layout, Reactive Forms, and Route Animations to build beautiful, responsive apps

Image for post
Image for post
Simple showcase of Angular Material at https://lipa.imranr.dev - Image by Imran Remtulla

Angular is all about getting things done quickly. Out-of-the-box features like routing and services make it easy to get up and running with the basic skeleton of your App. Of course, when it comes to the actual content — the HTML, CSS, and TS of your App — you’re on your own. Or are you? In this guide, we’ll explore libraries and features to make it easy to build good looking, maintainable Apps; even if you, like me, suck at design.

Specifically, we’ll look into:

  • Angular Material
  • Flex-Layout
  • Reactive Forms
  • Route Animations

Angular Material

Angular Material is a library of beautiful components that follow Google’s Material Design guidelines. Aside from the various buttons, form fields, navigation components, and other styled UI items, it also provides a set of unstyled “behavior primitives” that make it dead simple to build otherwise complex functionality like drag and drop, overlays, and clipboard interactions. …


Customize Angular Material themes and use local assets, interceptors, and proxies to build optimized, maintainable apps

Image for post
Image for post
Image by the author

Right from the opening ng new command, Angular has all the essentials of a basic web app, from routing to state management, covered. Of course, when it comes to more advanced features, the kind you start needing as your app grows, things become less clear. In this guide, we’ll explore some more niche Angular features that become lifesavers when you need them.

This article builds on some concepts from part 1, so you may want to read that first.

Specifically, we’ll look at:

  • Custom material theme colours
  • Custom material icons
  • Local fonts
  • HTTP interceptors
  • Proxy configs

Custom Material Theme Colours

While the official Material component library for Angular comes with a great set of predefined theme colours, you will sooner or later find yourself needing to use very specific colours, perhaps brand colours, that are not available by default. Let’s see how to create custom colour palettes for Material themes. …


Ensure crash logs are instantly sent to your inbox

A server application behind an NGINX reverse proxy fails, causing the endpoint to show a 502 error message.
A server application behind an NGINX reverse proxy fails, causing the endpoint to show a 502 error message.
Source: Imran Remtulla

In a previous guide, I showed you how to deploy a web application to the cloud and connect it to your own domain. Now that you have your app up and running, your job is done, right? Not quite. Even the best software has bugs so your app is bound to crash sooner or later, and when that happens it may be hours, days, or weeks before you find out. Wouldn’t it be great to get notified immediately via email? In this guide, I’ll show you how to set that up.

Preface

I expect that you already have an application running on a server that runs Ubuntu and is connected to your own internet domain. The App startup process should be managed using Systemd, Ubuntu’s built in service manager. In case you’re not sure about any of that, I go over the basic steps here. …


A developer’s search for the perfect OS

Image for post
Image for post
Source: Imran Remtulla

In ancient times — 2019 — when people still worked in offices, I was exposed for the first time to MacOS via a work-provided MacBook Pro. Coming from a Windows world, it took a bit of time for me to adjust, but as soon as I did, I fell in love. The slick UI made Windows look outdated. The Apple logo reminded me that — unlike Windows — the makers of this OS had no profit motive to spy on me and constantly send my data to the corporate mothership. …


Image for post
Image for post
Photo by Joshua Rawson-Harris on Unsplash

PRISM, Social Credit, ClearView, Surveillance Capitalism. If you recognize these words, you’re probably concerned about your privacy (if not, you might want to be). In pursuit of power and profit, companies and governments the world over are gathering terabytes of data about your location, interests, habits, relationships, and desires.

What can we do about it? Much has been written about how society as a whole can promote privacy: writing to politicians, voting with our wallets, etc. But let’s face it: these things take time, if they move forward at all. If you want immediate protection, your best bet is to cut the data off at the source: your devices; the PC and, especially, the phone, are where the majority of your behavior is tracked. In this article, we’ll take a look at steps that a non-technical person can take to restrict tracking at the device level. …


Image for post
Image for post
Source: Imran Remtulla

In college, I learned a lot about building Web Apps and APIs using technologies like Node.js and ASP.NET. As soon as I could, I started building hobby projects to hone my skills and have something to impress potential employers with. When the time came to deploy these projects to the Web, though, I was stuck. In all their wisdom, my professors had somehow overlooked this area almost completely! Although I knew how to deploy Apps to Heroku, I wanted more control, flexibility, and cost efficiency than could be provided by a PaaS. If that sounds familiar, this guide may be for you. We’re going to look at how to rent a server, connect it to a domain, and run Apps on it. …

About

Imran Remtulla

Ryerson CS. Night Owl.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store