The blog of Seva Zaikov| blog.bloomca.me
The blog of Seva Zaikov| blog.bloomca.me
A lot of desktop applications provide a multi-window experience. This can be done in 2 flavours:| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
There are 3 types of menus in a typical native application:| The blog of Seva Zaikov
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:| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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:| The blog of Seva Zaikov
The blog of Seva Zaikov| blog.bloomca.me
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 typical notification code:| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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 they are the standard way of building React apps today.| The blog of Seva Zaikov
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 the current DOM and swaps what is needed.| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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 only existing libraries use this package under the hood, but also often expose raw objects, an...| The blog of Seva Zaikov
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 specifically, while nowadays it is often advised to use it everywhere.| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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 we organize it in our code on the backend.| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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 the whole process again, “in the loop”.| The blog of Seva Zaikov
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).| The blog of Seva Zaikov
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 time, until time passes and new people come – it is a delay-action bomb.| The blog of Seva Zaikov
In software development it is very common to see two following extreme approaches to unit tests:| The blog of Seva Zaikov
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 fact it was my internship). Now I write some code for web, and, ironically, I find it much more...| The blog of Seva Zaikov
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 is popular and we can hire new people for, and we want to indicate that we also “belong to t...| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
I have more articles about asynchronous javascript!| The blog of Seva Zaikov
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 a little bit, or at least skimmed over their docs.| The blog of Seva Zaikov
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).| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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. What is the problem, though? He wants, he makes it, no questions here. The problem is that it is...| The blog of Seva Zaikov
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?| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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 share an easy way to upload new versions in one command. There are other ways (for example, using s...| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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 of these things rewrite the history, and might look scary because of that, but I hope this guide ...| The blog of Seva Zaikov
address.map(Function.prototype.call, String.prototype.trim);| The blog of Seva Zaikov
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 well, and websites look and behave exactly the same, no matter which platform you use.| The blog of Seva Zaikov
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 made later reuse very hard.| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
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 more attention to it.| The blog of Seva Zaikov
What is a server-side rendering| The blog of Seva Zaikov
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.| The blog of Seva Zaikov
JS fatigue| The blog of Seva Zaikov
Exciting New World| The blog of Seva Zaikov
Blog about programming| blog.bloomca.me
Blog about programming| blog.bloomca.me