As a full-stack developer, I have to switch between several programming languages in my day-to-day business: Java (backend), TypeScript (web dev) and Dart (mobile dev). In this blog post, I will try to demonstrate fourteen built-in language constructs in TypeScript and Dart which convinced me to believe that these languages are more sophisticated and flexible than Java. You can already see in the picture above how fluent you can build collections in Dart using conditionals and repetition. These features are called “collection for” and “collection if”. Neat? But there are more. As you could also see, the type information in…


Ionic Storage offers a LocalStorage-like API and can be configured for various storage engines. It also allows to persist many types of data, e.g. strings, numbers and blobs. The default order of storage engines which are tried to be used (from top to bottom):

  • SQLite (file-based database on native devices)
  • IndexedDB
  • WebSQL
  • LocaleStorage

It depends on the availability of concret storage engine if it will be used or not. IndexedDB, as data storage in browser, should be preferred over LocaleStorage because it offers asynchronous read / write operations and doesn’t block the main thread. …


In this blog post, I would like to share my thoughts how to build a pluggable Angular Frontend with modules which you can combine together like a puzzle. Modules should not know each other — that means, they don’t have cross-dependencies. Modules should be lazy loaded at runtime by means of backend configuration which specifies what modules your UI has exactly. In other words, the functionality scope depends on the logged in user, more exactly on the user role, such as “customer”, “developer”, etc. You got the idea.

In the first part, I will explain the bootstrapping process of such…


In this blog post, I will try to explain a possible way how to implement a dependency injection in TypeScript. An injection means, you don’t need to call new MyClass() because classes are managed and instantiated by a DI container automatically. I would like to achieve the following minimalistic goals:

  • Use constructor based injection to inject class instances into each other.
  • For the sake of convenience, the injected classes exist as singletons inside a DI container. The class instances live inside the DI container.
  • Possibility to define an entry point (entry class) to bootstrap the DI container. …


There are two main ways to write utility functions in TypeScript:

A) Quite normal functions (grouped in a file)
B) Static methods of a class

Examples of both:

What is the best one? The answer is A). In the TypeScript documentation says:

“Consumers of your module should have as little friction as possible when using things that you export. Adding too many levels of nesting tends to be cumbersome, so think carefully about how you want to structure things. Exporting a namespace from your module is an example of adding too many layers of nesting. While namespaces sometime…


In my last post, I wrote about event handling with RxJS. In this post we will use the same technique, but for an Angular directive — a draggable directive. This directive can be applied to any HTML element in order to make this element draggable. It should have the selector draggable and two input properties: dragHandle and dragTarget. The first property defines a CSS selector of an element which is used as drag handle. The second property defines a CSS selector of an element which you want to drag.

I wrote this directive for the Angular Material dialog because the…


Programming with RxJS (reactive programming library for JavaScript), TypeScript and Angular is my daily job. RxJS is a new modern way for event handling in cutting-edge web applications. Recently I’ve got a task to implement few interactions on HTML5 canvas element. Exactly these ones:

  • Mousewheel — scroll up / down.
  • Shift + Mousewheel — scroll to the left / to the right.
  • Ctrl + Mousewheel — zoom in / out
  • Panning with mouse (drag and drop the whole canvas)

I’ve done this task with RxJS and would like to share the skeleton of my code with the community. I will…


Angular CLI allows us to place different configuration settings in environment files. In the .angular-cli.json, you can write

"environments": {
"dev": "environments/environment.ts",
"test": "environments/environment.test.ts",
"prod": "environments/environment.prod.ts"
}

and configure specific settings (e.g. endpoint URLs) pro environment (stage). The problem occurs when you want to create just one build and deploy it to different stages in cloud (e.g. on OpenShift or similar cloud platforms). We don’t want to create separate builds pro stage like this one:

ng build --env=dev
ng build --env=test
ng build --env=prod

We would like to reuse the same build on different stages. That means, the same build…


In this blog post, I would like to demonstrate a simplified workflow for creating SVG sprites in front-end projects. This task will be done by writing a couple of NPM scripts and Node.js scripts.

NPM scripts reside within package.json file in the script section. You can run them with npm run myscript where myscript is a name of the script. For instance, if you have

you can run npm run buildcss to compile SASS files to CSS. There are some reserved script names which don’t require run. One of such name is start. …

Oleg Varaksin

Thoughts on software development. Author of “PrimeFaces Cookbook” and “Angular UI Development with PrimeNG”. My old blog: http://ovaraksin.blogspot.de

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