I’ve been on a quest to get down from Electron’s abstraction layers to go as low as (reasonably) possible, and on Windows it ends with Win32 . It is a very old API which is still fully functional; in fact, most applications are still Win32 applications, and it will likely continue to be this way. What is Win32 For the sake of simplicity, we can roughly split Win32 API into multiple areas: various…
In my previous article I explained how to read Table of Contents and raw track data from an audio CD. I also mentioned that it is possible to get some data using CD-TEXT command, but it only gives you limited information and is not guaranteed. For a more comprehensive dataset, you need to use some sort of database, like MusicBrainz . To quote their front page: MusicBrainz is an open music…
I have a decently-sized audio CD collection, probably several hundred disks. I sometimes listen to them on a dedicated CD player, but most of the time I am on my computer, so I got a brilliant idea to write a set of applications to rip the CDs, fetch the metadata, encode them (probably with FLAC as I have a good setup) and then finally play them. In my mind that would be mostly frontends over…
A lot of desktop applications provide a multi-window experience. This can be done in 2 flavours: Multiple instances of the same application (2 separate processes) Multiple windows of the same application instance (one parent process) I already mentioned in the custom protocols article , the first approach is more native to Windows/Linux and the second approach is more native to macOS. Allowing to…
Before we can look at a typical building/packaging process of an Electron application, let’s take a more general overview at what does it mean to build and package any Desktop application. What is a Desktop application? At the core, a Desktop application is just a simple binary, similar to any CLI application you use from a terminal. It uses separate APIs to mark it as a GUI app, to create and…
There are 3 types of menus in a typical native application: Application menu Context menus (right click) Tray menu Let’s discuss each one of them. In Electron, all menus are created using the same API (usually Menu.buildFromTemplate() ), so we’ll discuss the implementation at the end of the article. Application Menu Titlebars went out of style these days on pretty much every platform, and because…
You can use both Web notifications, the ones you can use in a regular web application executed in a browser context; and you can use native OS notifications. The first option is good because you can reuse the logic between your web and native application, but overall native notifications provide: more native look and feel allow better customization allow more options Note: be careful and store…
Each desktop application can register a list of custom protocols it will handle. One application can register multiple handlers, although it is usually not necessary, but can be done for cleaner separation between concerns, like specific views URLs and authentication. For example, on Windows, you can use ms-settings:display to open display settings directly. You can either enter it in your browser…
As I mentioned in the Electron overview article , one of the key advantages of Electron is that you can wrap your existing web application, and likely, it will just work™. You have 2 main approaches on how to load the application: Load it from local files ( browserWindow.loadFile ) Load it from your domain ( browserWindow.loadURL ) In general, Desktop applications are expected to show something…
Electron is a cross-platform framework which allows to develop Desktop applications. They are “native” in a sense that you will build and package the installer for your users, but the integration with OS is limited to what the framework provides, and making custom integrations is not trivial, because the application logic is written in JavaScript and executed by Node.js, so if you want to access…
React is a great library, and its core principle redefined how we approach UI applications on the Web: declarative components with a single render method that create exactly the same output as long as the state is the same (and it encouraged putting all side-effects into the local state). Almost every library since then follows this model of reusable declarative components. The problem The issue…
Notifications in Electron are provided through a native bridge (although you can use the Chromium web-browser ones, but they are more limited) so they feel more native to the platform. While this is a good thing, they definitely have a few gotchas, and here I will show you one simple pitfall: notifications stop reacting after a minute or two if you don’t activate them immediately. Consider this…
React Context is a great API to avoid prop-drilling or if you need a simple way to have access to some global app data in any component, but don’t want to use often recommended solutions like Redux or Mobx , because they, being good scalable libraries, advocate for proper architecture and to separate all files properly, and that is a big daunting task for something small. There are several…
Redux is a great state management library which allows to centralize all your data in one place and subscribe to it in individual components. Technically, it can be used with a pretty much any library (or even without) by subscribing to the store where needed, but usually it is used with React and I will focus on that combination in this article. I’ll also use only functional components, I think…
Let’s talk about React performance. React is a great framework that makes a contract with us: we feed it data, and it renders us the content. When we subscribe to our services and update the internal state of React components, it guarantees that everything will be up-to-date on the screen. Not only that, but it is also efficient at swapping DOM nodes: after rendering it compares the result tree to…
JSX is a very popular choice nowadays for templating in various frameworks, not just in React (or JSX inspired templates). However, what if you don’t like it, or have a project where you want to avoid using it, or just curious how you can write your React code without it? The simplest answer is to read the official documentation , however, it is a bit short, and there are couple more options.…
Node.js is a pretty popular choice to build web servers, and has plenty of mature web frameworks, such as express , koa , hapijs . In this tutorial, though, we’ll build a working server without any dependencies, using only core Node’s http package, exploring all important details one by one. While this is not something you see every day, it can help to understand all these frameworks better – not…
Web is growing massively, JavaScript is being rapidly developed and improved, and to keep up, you need to transpile your code from the latest version to whatever (it is complicated, just trust us ). Also, you can use another language completely. What is the deal, though? There were a lot of attempts ( 1 , 2 , 3 , etc), but what is important to note is the fact they tried to tackle big applications…
It is always a good idea to measure what you are doing and see the impact of changes, deciding on what to focus, and what to stop doing. It is an industry standard to measure conversion based on changes, and to do extensive A/B testing in order to choose a better approach. There is one slight problem with these ideas. It is users who don’t necessarily want to buy something, or subscribe to get…
Doing a lot of frontend work using modern frameworks for single-page applications and some with backend in Node.js , Python and Go , I came to realization that traditional approaches (for example, MVC , or just rendering templates with provided data) are not very good for later refactoring or experiments with views. I have to specify that I am talking about rendering HTML here mostly and the way…
One of the quirkiest parts of JavaScript is this keyword. Unlike other quirky parts of JavaScript, it is extremely hard to avoid – it’s used in prototypal inheritance, which is an important part of the language, and with introducing class keyword in ES2015 (which are, under the hood, almost the same as constructor functions with prototypes) they are used even more. There is nothing bad about using…
REPL stands for read-eval-print-loop, or just an interactive session (usually in your terminal), where you can enter some expression and immediately evaluate it, seeing the result. After evaluating, the whole flow repeats, and it works until you exit the process. So, R stands for reading your command, E stands for evaluating it, P stands for printing the result of the execution, and L means to run…
This guide is focused on frontend developers – people who know JavaScript, but are not very proficient with Node yet. I won’t focus on the language here – Node.js uses V8, so it is the same interpreter as in Google Chrome, which you probably know about (however, it is possible to run on different VMs, see node-chakracore ). Table of Contents Node Version No Babel is Needed Callback Style Event…
We like to optimize for efficiency, and commonly used phrases are a perfect candidate for it – it takes less than a second, and you have a whole bunch of weird looking acronyms. But they are here to help – everybody knows what it means, and it saves us time and space (so we don’t write “Modern Improvements Mission”, just using “MIM”. What about MIM?). And it does help! It works perfectly for some…
In software development it is very common to see two following extreme approaches to unit tests: 1. Tests are not needed at all A lot of software has no tests at all, and it is not a secret. Some (sometimes quite popular) libraries, products, features, etc – it might lack tests, but still work. Why is it so? Possible theories: it was written by one person it was written in a short timespan, while…
I have complicated relationships with education. I have not finished my degree – I was studying microelectronics, and after 3 years I decided that it is too boring for me: even though I was actually working writing I2C and SDRAM drivers for FPGA , it was about 5% thinking and reading specifications, and 95% about designing finite state machine and implementing it (probably the ratio was due to the…
We all follow best practices: we all look how successful companies do their business, how they structure their websites, how they organize their documentation. In case of software development, we peek which processes they use, how many spaces they use, which styleguide, which languages, frameworks and so on. It all makes perfect sense – we want to replicate success, we want to use technology which…
This is the second part of the angular.js tutorial for seasoned developers. In the first part we talked about basics, controllers and how digest cycle works in general – this time we’ll focus on more basic building blocks – directives, factories and services, diving into more details. Directives This is the most important part of Angular.js, because right now it is a recommended way to build your…
Promises are to this point a very popular concept in JavaScript – they are native across all modern browsers, Node is switching to promises from callback style (there is even a way to convert callback style to promise style ), but there are some small things which are easy to overlook. Promisifying sync values Sometimes we receive a value, but we are not sure whether it is promise or not. In this…
I have more articles about asynchronous javascript! How to Cancel Your Promise Loading patters Asynchronous Reduce in JavaScript How to use Generators Sometimes we want to execute some asynchronous code, and use results of it later, but in many places – something like a token: we might use it for every other request. Now, let’s imagine this token can be invalidated and we need to refresh it…
This is a high-level overview of Angular.js (or 1st version of Angular), targeted to experienced JavaScript developers, after which you’ll understand the concepts. It is not a replacement for angular guides and api reference , and it explans only main concepts – my goal was to explain how Angular.js works so that you’ll know what to expect from this framework. I assume you worked with Angular for…
Sometimes you need to load something once, like a script, and you need to execute your code only after loading it. For example, you have some magical library, but it weights around 1 MB, so you don’t want to just load it, until you actually use it. One possible solution would be to use code splitting , but let’s assume it is not a viable solution (also this approach is good not only for scripts).…
I think we are at the moment when agile methodology is a de-facto standard in software development (at least in the web development). A lot of people have questions to this approach, and I am one of them – I like to challenge ideas, so I’d like to reflect on my experience, analyzing what went well and what did not. Using agile vocabulary, I’ll conduct a retrospective over the whole topic of…
Single-page applications are everywhere. Even blogs, simple html pages (in the beginning something like https://danluu.com/ ), have turned into big fat monsters – for example, jlongster’s blog has 1206 stars at the moment of writing, and not because of the content (people usually subscribe to blogs rather than star the source): the only reason is that once he implemented it using React & Redux .…
Reduce is a very powerful concept, coming from the functional programming (also known as fold ), which allows to build any other iteration function – sum , product , map , filter and so on. However, how can we achieve asynchronous reduce, so requests are executed consecutively, so we can, for example, use previous results in the future calls? In our example, I won’t use previous result, but rely…
Recently I attended a very interesting meetup about static site generators – tools, which are usually used to generate static websites; the classic example is blogging, though they are capable of much more: docs, portfolios, etc. One of the talks was about personal blog tech journey - nothing special, just couple of posts per year. The speaker was talking about trying usual setup of Jekyll +…
Generators are a very powerful concept, but it is not used that often (see the twitter poll!). Why is it so? They are more sophisticated than async/await, not so easy to debug (mostly back to the old days), and people in general like async/await more, even despite the fact that we can achieve similar experience in a really easy way. Have you ever used iterators/generators in JS? — Asen…
Github pages allow you to host your static applications from their CDN. This is a nice and very convenient way to serve documentation, example application, or just some parts of your code. However, it requires you to have a separate branch gh-pages , where you need to put index.html to the top level (so, no nested directories). Manual approach to this is pretty annoying, and here I would like to…
In ES2015, new version of EcmaScript, standart of JavaScript, we got new asynchronous primitive Promise . It is a very powerful concept, which allows us to avoid notoriously famous callback hell . For instance, several async actions easily cause code like that: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function updateUser ( cb ) { fetchData ( function ( error , data ) => {…
Git is a very powerful tool, but we usually use only couple of commands from it – git pull , git push , git checkout , git fetch and couple more, but we are often intimidated by not so common operations. I would like to explain one step forward from the basics here – what merging actually does, how to rebase, how to cherry-pick commits from another branch and how to clean your pull request. Most…
address.map(Function.prototype.call, String.prototype.trim); Recently my friend sent me a very interesting JS snippet, which he found in one open-source library : 1 addressParts . map ( Function . prototype . call , String . prototype . trim ); At first, I laughed and thought “nice try”. Second thought was that map accepts only one argument, and I went to MDN docs , where I realized that you can…
JavaScript was originally added to make possible simple animations and effects. Since the beginning, browsers added a lot of APIs (the biggest breakthrough was introducing of AJAX ), and nowadays we can make pretty powerful applications, which will be cross-platform out of the box. The latter advantage is so huge, that nowadays almost everybody targets web, since standartisation worked out pretty…
In early days of single-page applications, we used to hardcode a lot of stuff, and very often we ended up with a lot of chunks of code, which did not make a lot of sense outside of their page. In other words, very often code was tighly coupled. For instance, in Angular 1, default behaviour of creating new scope with parent scope as a prototype encouraged code, there we rely on this feature, and…
This article touches on the latest trends in CSS for big web applications (usually SPA ). I don’t try to question whether it is the right or wrong direction, rather try to list all of them. Originally, web pages were designed to be informational pages with hyperlinks (even images should not be inlined – it is explained by the fact that in 1990, bandwidth and computer resources were very small):…
Recently, I was in the process of finding a new job, and because my main expertise is javascript, all my applications required a test in frontend (usually in React.js) and Node.js. They are not very different – some basic API in node.js and (sometimes) data crunching, and for frontend it is some small “real-world application”. I will focus mostly on the latter, because in my applications we paid…
What is a server-side rendering Server-side rendering (I’ll use SSR later for the sake of brevity) is a pretty recent term, it started its life just couple of years ago. Initially the main problem was lack of SEO for complex single-page applications, and projects like prerenderer appeared. The main idea of it was pre-render of the application somewhere else (e.g. PhantomJS), with waiting of the…
Recently I published Redux-tiles library , which itself is a pretty small library intended to fight the verbosity of original style Redux. If you are just interested in code, feel free to take a look at examples , otherwise let’s go slowly. What is Redux? Redux itself is an implementation of Elm-style app architecture, where we store state in an instantiated object, and then apply functions with…
JS fatigue any application that can be written in JavaScript, will eventually be written in JavaScript This quote is not a joke, and JS community is growing in the outstanding pace (evil voices say that’s because of publishing very interesting repositories , but we all know that not only because of that), and people very often are frustrated. Requirements for modern applications are incredible,…
Exciting New World Javascript goes on incredible pace. Code, which was written just few years ago, using Backbone and CoffeeScript (which was really hip and cool at the moment), now is just obsolete. Where is jQuery now? Yeah, it still a big deal, but nothing comparing to the moment when the proposal to inject it on browser level( 1 , 2 , etc) was not something completely crazy – so, it’s best…
Hidden complexity of npm’s dependencies Recently (already famous) yarn was published, which promises to solve all your problems related to the dependencies management, but while some oldfags don’t use it in production yet (what a shame!), I would like to describe how npm covers different type of dependencies. Let’s start with npm documentation : dependencies Dependencies are specified in a simple…