Building AMP website with Parcel

I have recently updated my personal website to use AMP framework. After I finished the transformation and started optimizing it, one of the main warnings I was getting from the audit tool in Chrome was about my assets not being minified.

I didn’t want to use popular tools like Webpack or Gulp since it would be a waste of time to configure them for such a small project. That is why I decided to use Parcel which works out of the box without any configuration.

However, Parcel runs a lot of tools under the hood that do not only remove whitespace characters but also change the actual code. This is not really desirable since an AMP website is not valid unless AMP CSS boilerplate is present without any modifications (except for whitespace characters). And invalid AMP websites are not cached in Google search results so you lose the main benefit of AMP.

Parcel uses htmlnano to minify HTML files. To prevent unwanted changes in HTML attributes, you need to create .htmlnanorc file in the root folder of your project with the following content:

{
  "collapseBooleanAttributes": {
      "amphtml": true
  }
}

And since htmlnano uses cssnano to minify the content of <style> tags, some CSS rules are also modified. In order to avoid this, create cssnano.config.js file with the following content:

module.exports = {
  preset: [
    'default',
    {
      minifySelectors: false,
      normalizeTimingFunctions: false
    }
  ]
};

If you now build your website with Parcel and run the AMP Validator, there will no longer be an error saying that AMP CSS boilerplate is missing.

Transferring money from Toptal Pay to a European bank account

A few months ago, I was accepted to Toptal, one of the best freelancing platforms in the world. It is known for its high standards and only 3% of applicants pass the interview process.

When I received the first payment from Toptal, I was looking for a way how to transfer the money from the internal Toptal Pay system to my bank account in Europe. I tried various ways in order to find the most optimal one I would use for all future transactions.

In the previous post, I covered very similar topic about transferring money from Fidelity NetBenefits. But Toptal Pay provides different ways how to withdraw money from it so I’m going to list all the options here even if I repeat myself. If you’re too busy to read the whole article, just jump to the last option which is the best one I’ve found so far.

Just to be clear, I haven’t tried the first two options myself since it seems like a waste of money. If anyone has done it and there’s something wrong with my description, let me know in a comment. I’ve tried to do my research but someone with an actual experience knows it better.

Direct transfer

The first option that would probably come to your mind is to transfer money directly to your bank account. Although this is the fastest way how to get your money, it’s also the one where you lose the most.

First of all, your bank will charge you a fixed fee for receiving an international bank transfer. The exact amount largely depends on your bank but if you have a good one it can be close to nothing. For example, the bank where I have my primary account charges around €1 for such transactions but the other one I use charges up to €20. Toptal Pay also charges €1.25 for sending money to a bank account in the eurozone.

However, you will definitely lose much more on an exchange rate, especially if you transfer a large amount of money. It’s because banks use their own exchange rates to convert currencies and they’re far from the interbank exchange rate. For example, I would lose around 2% just on an exchange rate set by my bank.

Moreover, it seems that Toptal Pay supports transactions in only 10 currencies so you might not be able to use this method at all if you don’t have a bank account in any of them.

PayPal

The second option it to transfer your money through PayPal. In this case, Toptal Pay charges you a $0.95 fee and then you can send the money from PayPal to your bank account for free.

What’s the catch? Based on your PayPal account currency, there is going to be a currency conversion in either the first or the second transaction. And since PayPal is known for the worst exchange rates on the market, you would lose at least 2.5% on that. So it’s even worse than the first option.

Revolut

The third option is to use a service like Revolut. I mostly use it for physical card payments abroad, internet payments by a virtual card or to split bills with my friends. But it’s also a great way how to convert currencies since it uses the interbank exchange rate during the workweek (Monday to Friday GMT) and charges just 0.5% over a weekend.

You can have multiple accounts in different currencies in a Revolut mobile app. You’re able to easily transfer money between these accounts and you can also make a bank transfer to/from a given account. Those transfers are in most cases domestic ones so they are free.

However, Revolut doesn’t offer US bank account numbers to their customers based in Europe so all bank transfers from/to your USD account are processed by a UK or EU bank. If you try to send money from Toptal Pay to your Revolut USD account, a transaction will get reverted because of some Toptal Pay policies.

The only way how to get money from Toptal Pay directly to Revolut is to create a prepaid Toptal Visa card and use it to top up your Revolut USD account. But since this card has not been issued within the EEA, Revolut charges a small fee which was exactly 1.67% in my case.

Then you can exchange the money within the Revolut app using the interbank exchange rate (during the workweek!) and send it to your bank account as a domestic bank transfer. All this should be free if Revolut has a bank account in your country and your bank doesn’t charge you for incoming domestic transfers.

TransferWise

The fourth option is to use TransferWise, a service that offers a Borderless account for transferring money between different countries. TransferWise has an actual bank account in more countries than Revolut (including US) so you can make a domestic bank transfer for free (except for Toptal Pay fees).

TransferWise also uses the interbank exchange rate and it only charges a small fee for converting currencies. It is very transparent about the fee and you can always see the exact amount before you execute a transaction. In my case, the fee was around 0.5% so it might not be the best option if you need to exchange large amounts of money.

If you try to add your TransferWise USD bank account number as a new transfer method in Toptal Pay, make sure you choose United States, USD, and Bank Account method. There is only a small $0.50 fee for ACH transfer charged by Toptal Pay. However, if you chose Wire Transfer method, you would pay a $10 transfer fee.

TransferWise + Revolut

The last and the best option is to use a combination of TransferWise and Revolut. The former one provides free domestic bank transfers in many countries while the latter one enables you to exchange currencies for free using the interbank exchange rate (during the workweek). So how can you combine these two services to avoid almost all fees?

TransferWise allows you to order their debit card for £5 which can then be used to pay with any currencies in your account. On the other hand, Revolut enables you to top up your account by a European debit card for free. Do you see where I’m going here?

You can send money from Toptal Pay to your TransferWise USD account for $0.50 (Toptal Pay fee) since it is a domestic bank transfer. Then you can top up your Revolut USD account by a TransferWise debit card for free as it is a payment in the same currency. Revolut will tell you it’s not (because the card is actually in GBP) but don’t be afraid to proceed with the payment. There are truly no fees. Finally, you just need to convert currency within the Revolut app and send the money to your bank account.

The only problem is that Revolut sets card top-up limits by a special algorithm to avoid money laundering. It will allow you to only top up your account by a relatively small amount when you add a new card. They won’t tell you where exactly your 24-hour limit is and you’ll need to find it by trying smaller and smaller amounts. In my case it was $300. But I made a mistake and topped up my account every 24 hours. One day, I forgot about it and when I then tried again after 32 hours, I was able to transfer all my money and I haven’t hit the limit since then. So try to play with it and don’t just emulate a money-laundering machine by making one transaction every 24 hours.

And don’t forget that there is both a 24-hour and a 30-day online payment limit on your TransferWise debit card. But you can easily change the default one to the maximum amount in a mobile app.

EDIT:

This article was written at the times when Revolut Standard allowed around €6000 of exchanges at the interbank exchange rate without any fees. But this limit has been lowered to just €1000 so the situation has changed a little bit.

If you exchange less than $2850 a month, you will be fine using just Revolut Standard. You can either exchange part of it in Revolut and the rest in TransferWise (since all money needs to go through TransferWise anyway) or you can simply send everything to Revolut. It doesn’t really matter since both TransferWise and Revolut Standard charges the same 0.5% fee.

If for some reason you need to save your Revolut currency exchange limit for other transactions (e.g. online purchases in foreign currencies) then you might want to use just TransferWise to transfer your salary from Toptal Pay. But with 0.5% TransferWise fee this is only worth it if you transfer up to $20k a year.

In all other cases, you will be better off paying for Revolut Premium plan with unlimited currency exchange. Let’s say you earn $100k a year and you transfer all money to your European bank account every month. In such case, you will save around $330 a year with TransferWise + Revolut Premium compared to TransferWise + Revolut Standard and $400 compared to using just TransferWise alone. Go buy yourself something nice with the money you save.

Transferring money from Fidelity NetBenefits to a European bank account without any fees

I owned some Red Hat stock when the company was acquired by IBM. This presented me with a new challenge of how to get the money from Fidelity NetBenefits to my bank account. Since these two accounts are in different countries (United States vs. Czech Republic) and different currencies (USD vs. CZK), I had to be very careful not to lose money on international bank transfer fees or exchange rates.

I had never transferred money from the US before. But I just started to work as a freelancer and most of my income would come from this country so I decided to use this opportunity to run a small experiment in order to discover the best way to get USD to my bank account.

In the following paragraphs I’m going to describe four different ways how you can transfer money from Fidelity NetBenefits (or other US service) to a bank account in some other country. If you don’t want to read about all the options, feel free to jump to the last one which is the ultimate solution I’m definitely going to use in the future.

Just to be clear, I didn’t try the first two options since my friends had already done so and it seemed like a waste of money. That’s why I decided to split the money in half and use only the last two options which were also the most promising ones.

Direct transfer

The first option that would probably come to your mind is to transfer money directly to your bank account. Although this is the fastest way how to get your money, it’s also the one where you lose the most.

First of all, your bank will charge you a fixed fee for receiving an international bank transfer. The exact amount largely depends on your bank but if you have a good one it can be close to nothing. For example, the bank where I have my primary account charges around €1 for such transactions but the other one I use charges up to €20.

However, you will definitely lose much more on an exchange rate, especially if you transfer a large amount of money. It’s because banks use their own exchange rates to convert currencies and they’re far from the interbank exchange rate. For example, I would lose $186 just on an exchange rate if I decided to send all the money directly to my bank account.

Revolut

The second option is to use a service like Revolut. I mostly use it for physical card payments abroad, internet payments by a virtual card or to split bills with my friends. But it’s also a great way how to convert currencies since it uses the interbank exchange rate during a workweek (Monday to Friday GMT) and charges just 0.5% over a weekend.

You can have multiple accounts in different currencies in a Revolut mobile app. You’re able to easily transfer money between these accounts and you can also make a bank transfer to/from a given account. Those transfers are in most cases domestic ones so they are free.

However, Revolut hasn’t come to the US yet so all bank transfers from/to your USD account are sent/received by a UK bank. If you try to send money from Fidelity NetBenefits to your Revolut USD account, you’ll probably be charged a fixed fee for an international bank transfer as with the first option.

But then you can exchange the money within the Revolut app using the interbank exchange rate (during a workweek!) and send it to your bank account as a domestic bank transfer. All this should be free if Revolut has a bank account in your country and your bank doesn’t charge you for incoming domestic transfers.

TransferWise

The third option is to use TransferWise, a service that offers a Borderless account for transferring money between different countries. TransferWise has an actual bank account in more countries than Revolut (including US) so you can make a domestic bank transfer for free.

TransferWise also uses the interbank exchange rate and it only charges a small fee for converting currencies. It is very transparent about the fee and you can always see the exact amount before you execute a transaction. In my case, the fee was around 0.5% so it might not be the best option if you need to exchange large amounts of money.

If you try to add your TransferWise USD bank account number as a withdrawal option to Fidelity NetBenefits, it will say that your ACH routing number is invalid. Don’t worry and use the wire transfer number. In most cases, they can be used interchangeably. I did it this way and the money arrived without any problems.

TransferWise + Revolut

The last and the best option is to use a combination of TransferWise and Revolut. The former one provides free domestic bank transfers in many countries while the latter one enables you to convert currencies for free using the interbank exchange rate (during a workweek). So how can you combine these two services to avoid any fees?

TransferWise gives you a free virtual debit card once you verify your account by depositing a small amount of money to it. On the other hand, Revolut enables you to top up your account by a debit card for free. Do you see where I’m going here?

You can send money from a service like Fidelity NetBenefits to your TransferWise USD account for free since it is a domestic bank transfer. Then you can top up your Revolut USD account by a TransferWise debit card for free as it is a payment in the same currency. Revolut will tell you it’s not (because the card is actually in GBP) but don’t be afraid to proceed with the payment. There are truly no fees. Finally, you just need to convert currency within the Revolut app and send the money to your bank account.

The only problem is that Revolut sets card top-up limits by a special algorithm to avoid money laundering. It will allow you to only top up your account by a relatively small amount when you add a new card. They won’t tell you where exactly your 24-hour limit is and you’ll need to find it by trying smaller and smaller amounts. In my case it was $300. But I made a mistake and topped up my account every 24 hours. One day, I forgot about it and when I then tried again after 32 hours, the limit was suddenly more than $875 (I had no more money in my TransferWise account by then). So try to play with it and don’t just emulate a money-laundering machine by making one transaction every 24 hours.

And don’t forget that there is both a 24-hour and a 30-day online payment limit on your TransferWise virtual debit card. But you can easily change the default one to the maximum amount in a mobile app.

Adding color emojis to Chrome on Fedora

If you use Google Chrome browser on ? Fedora Linux 28, you have probably noticed that emojis just do not look right there. Symbola font, which is used by default to render them, displays black-and-white emojis. Moreover, a lot of emojis are not even included in this font.

I have noticed this while reading Revolut blog since they make an extensive use of emojis in almost every blog post. You can see a big difference when you look at their page using Chrome and Firefox since emojis are somehow displayed quite well by Firefox. ?

When it comes to Chrome, you have basically two ways how to display color emojis. You can either install EmojiOne or Google Noto Color Emoji. Although I first tried to use the former, I was not able to make it work so I decided to stick with the latter.

You first need to install a package with this font by running the following command:

sudo dnf install google-noto-emoji-color-fonts

Then you need to create file ? ~/.config/fontconfig/fonts.conf with the following content:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE fontconfig SYSTEM "fonts.dtd"> 
<fontconfig> 
  <alias> 
    <family>serif</family> 
    <prefer> 
      <family>Noto Color Emoji</family> 
    </prefer> 
  </alias> 
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
</fontconfig>

Finally, you need to apply the new configuration by running:

fc-cache -f

Now, you just need to restart Chrome and if you see color emojis in this blog post, you have successfully installed them on your machine. ?

Managing complexity of Angular applications

Let’s say you are a newcomer to modern front-end development and you need to implement a single page application. You already know HTML, CSS, and some JavaScript. You have heard that Angular is a solid framework and you like the fact that it is based on OOP principles you are familiar with. So you start learning it by taking an online course teaching its basics while at the same time reading the official documentation in order to explore various building blocks in more detail.

After a while, you feel quite comfortable using the framework and you decide to start building your application. Since you are a newbie in this area, you try to follow Angular Style Guide to avoid bad architectural decisions right at the beginning. You build small reusable components and fetch data from the API in singleton services as you have been taught. You are making a good progress, creating a lot of components and seeing the first results on a few screens of a really nice user interface you have already built.

But you feel that something is fundamentally wrong with your application. It is still quite small but there is already a huge complexity when it comes to interactions between components and data management. You have figured out how to avoid redundant API calls by remembering the data needed by multiple components but your adhoc solution seems to be a little bit messy and error-prone. You need to be very careful not to introduce a bug when extending some functionality. It is already such a pain developing this application and you cannot image how it will look like if it grows ten times or more.

The problem is that neither the online course nor the official documentation has taught you how to manage the application state. They have only introduced various Angular concepts such as services which they recommend for data sharing between components. But once your application starts growing, using services to manage its state is a way to hell.

Fortunately, there is a whole set of state management libraries that try to solve this problem. The most popular is Redux which is mostly used by React developers although it can be used with Angular as well. There are also some libraries designed especially for Angular such as NgRxNGXS, or Akita which are based on RxJS so you can keep using observables that you are already familiar with. I would recommend using NgRx as it is the most popular one among Angular developers. But feel free to try out more of them and choose the one that best fits your use cases.

I am not going to explain the concepts of FLUX architecture these libraries are based on as many others have already covered this topic quite well. What I wanted you to know is that you have encountered a common problem in front-end development that have already been solved by people much smarter than you (no offense). So there is no need to implement your own solution or hack your application until it becomes unmaintainable. Using a robust state management solution is the only way forward if your application is going to grow significantly.

How I switched from Java to JavaScript

A year ago, I was using Java for everything. Although I had previously used languages such as C/C++, Haskell, JavaScript, Pascal, and PHP for several school, hobby, and contract projects, I was not really good at any single one of them. At that time, the only language I felt pretty confident writing code in was Java. I had already been using this language for almost five years and knew both the ecosystem and the language quite well so it seemed like a good idea to dive deeper into it and become an expert in this area. But then something changed.

I graduated university and realized that although working for a corporation during my studies was a good experience as well as an easy source of moderate income, it was not something I would like to do in the near future. At the same time, I was asked to join a team forming a new company as a co-founder and technical lead and since I had always wanted to start my own company I could not have said no to that offer.

They had already been developing Lumeer, a modern data definition and processing platform, for a few months when I joined the team. The back-end of this application was written purely in Java so I was able to start contributing almost immediately. However, the application was intended to be used by non-technical end-users which meant that the vast majority of the work would need to be done on the front-end side. A simple user interface based on the latest version of Angular was already being developed. Since I was supposed to be the technical lead responsible for the whole development process but did not have much experience with front-end, I knew I had to become pretty good at it in order to do my job well.

As I was quite familiar with the Java ecosystem, I could remember what huge amount of technical problems I had already solved in this area and was still far from being an expert. When I though of going through similar problems in the JavaScript world once again and imagined how much time it would take just to get to the point where I was with Java at that moment, I was a little bit worried if that was the best investment of my time. But I said to myself if a lawyer was able to become a front-end developer, I could do it as well and it would probably be a lot easier for me since I had already been familiar with many principles which can be reused across different programming languages.

So I started reading a lot. I somehow found JavaScript Weekly, a weekly digest of the JavaScript news and articles, which was and still is for me a great way how to keep up to date with all the changes in the JavaScript ecosystem. I was always looking forward to the next week so I would be able to further broaden my knowledge of this whole new world. I read many articles about the language and new useful JavaScript libraries. At the same time, I started reading Angular documentation and took a course at Udemy in order to develop better understanding of the framework we were using. However, I think the best investment of my time was reading two great books, Speaking JavaScript and Exploring ES6, which are available online for free and go really into the depth on various language features. Had I not read them, I would have probably wasted a lot of time debugging problems caused by unexpected language behavior.

Fast forward nine months and (luckily I am not a father but) I feel quite confident with my JavaScript skills so much that I can even fix a bug in a popular library. Last year, I read much more about the JavaScript ecosystem than I had ever read about Java and related technologies before. Although I am still learning and dealing with new problems, I can say that the worst part is over and there is a bright future ahead of me. But more on that next time.

Installing Java 8 on Raspberry Pi 3

Just recently, I’ve got a new Raspberry Pi 3 Model B and started experimenting with it. I’ve installed the latest Raspbian (Jessie Lite) on it because it’s the officially supported operating system and more importantly, it works out-of-the-box.

I was thinking of writing some applications for it so I decided to install Java since it’s the programming language I’m most familiar with.

There are basically two options available for Raspbian — you can either use OpenJDK or Oracle JDK. There are some limitations of OpenJDK for ARM systems which make it slower so I’ve decided to stick with Oracle JDK.

You can install oracle-java8-jdk package from the official Raspbian repositories but it only provides an old version of Java (8u65). If you want to use the latest version, you need to download the JDK directly from the Oracle’s website. Since Raspberry Pi is powered by ARM processor and Raspbian is a 32-bit OS, choose the Linux ARM 32 Hard Float ABI version.

When you download the right package, unpack it into /usr/java directory:

sudo mkdir /usr/java
cd /usr/java
sudo tar xf ~/jdk-8u111-linux-arm32-vfp-hflt.tar.gz

You can then create symbolic links in /usr/bin folder (so you’ll be able to use java command anywhere) by adding the following alternatives:

sudo update-alternatives --install /usr/bin/java java /usr/java/jdk1.8.0_111/bin/java 1000

sudo update-alternatives --install /usr/bin/javac javac /usr/java/jdk1.8.0_111/bin/javac 1000

At this point, you should be able to verify that your Java installation works by running the following command:

java -version

It should print something like this:

java version "1.8.0_111"
Java(TM) SE Runtime Environment (build 1.8.0_111-b14)
Java HotSpot(TM) Client VM (build 25.111-b14, mixed mode)

If you see similar output, you have successfully installed Java 8 on Raspberry Pi.