Everything Frontend

Newtype (Tagged Type) in TypeScript

One of my favorite features in Haskell is newtype that allows you to wrap another type without any runtime overhead. Usually this is important when dealing with types that have the same underlying representation but should never be mixed together. Here is somewhat contrived example in Haskell:

newtype Dollars = Dollars { fromDollars :: Int }
newtype Euro = Euro { fromEuro :: Int }

processEuro :: Euro -> Euro
processEuro x = x

main = do
    return $ processEuro $ Dollars 3 -- type error

Since most of my day-to-day work is done in TypeScript I’m quite often tempted to use a newtype, except I couldn’t, as there was no way to define a new unique type until TypeScript 2.7 where this feature was added to support ES2015+ Symbols.

Continue Reading →

Errors in JavaScript

Largely due to its complicated history and implicit coercion in many places JavaScript has a lot of inconsistencies when dealing with how errors are reported from the functions and processed by the client code.

In this article, I will try to describe some of the existing strategies and will outline some of the new possibilities that became viable with ECMAScript 2015+ as well as things we can learn from functional programming.

Continue Reading →

How to Insert Text Into Textarea at Cursor Fast

It’s great to see the web platform grow and get features like Service Workers, but one of the areas that traditionally gets little to no attention is dealing with user input.

While working on another project, I needed a way to insert some text at the current cursor position in a textarea to auto-complete what user is typing. It turns out this simple task is almost impossible to achieve if you want the browser to not choke on a big text inside a textarea.

Continue Reading →

Immutable Classes in JavaScript

"You can't touch this!" — MC Hammer

As the JavaScript matures and starts being used to build ever bigger projects, it might make sense to adapt some things that are generally accepted in the industry as best practices.

One of those things is the usage of immutable objects throughout the application. If you are familiar with Object.freeze, the solution might seem straightforward. As it happens with many things in JavaScript, there are some tricky things to keep in mind.

Continue Reading →

Dealing With Makefiles in IntelliJ

Lately I’ve started to use Makefiles for my frontend projects for their simplicity. In fact a combination of make + webpack + karma/mocha has been working quite well and saves me from installing three hundred gulp / grunt plugins since I can do most of the file manipulation just in bash.

Continue Reading →

App Version from Git Tag in Qt / QML

Qt + Git

While making an app it is really important to keep accurate track of the versions. Usually such a tracking is implemented via tags in version control system like git. It’s also a good idea to keep in mind semantic versioning when assigning version to your code.

But tagging your code with the right version number is only the first step. You also need to show version to the user and in some cases the system.

Continue Reading →

Different ways to evaluate string as code in JavaScript

Dynamic code evaluation is a very controversial subject in every programming language that allows it, but especially in javascript since it can be a major security risk, especially when evaluating code from untrusted source. Nevertheless it is useful technique, that can be helpful in development scenarios or in certain edge cases as an optimization tool e.g. for dynamic loop unwinding.

Let’s look look at the ways we can evaluate string as a javascript code.

Continue Reading →

Pure CSS Star Rating

This is a familiar view for most of web users:

And there are a lot jQuery plugins and plain JavaScript code that can help you create rating widget in your form. And the reason because it’s all written in JavaScript is that when a need for such a rating system first arose CSS really lacked the ability to do stuff like this.

Continue Reading →