Typescript generics - An appendix to the Typescript five minute tutorial


When I started using TypeScript, some years ago, the official website was of course the first place I looked for information. The 5 minute tutorial provides a quick introduction about how to set up TypeScript in your project and how to use it. But once I got into TypeScript, I soon ran into questions about how to apply TypeScript in dynamic code. Not having a background in typed languages, the concept of generics was unknown to me. It would have helped me a lot if there had been another 5 minute tutorial about how to apply TypeScript in a dynamic way, so I thought I’d write one myself.

Read More

Put your skeletons in the closet - Build your next project using Parcel


When your project grows in size or complexity, your frontend build will probably grow as well. You might use setup for end-to-end testing, unit testing, sass compiling, linting, transpiling, etc.

The way we configure our frontend builds has changed quite a bit over the past years. It used to be common practice for an organisation (or individual) to have a seed or skeleton to set up a new project. Maintaining this skeleton in the ever-changing world of frontend is serious work.

We got used to grunt or gulp files which should be easily adaptable, but can become quite a mess when you have to deal with a lot of tasks. And all those tasks might be hard to adapt or upgrade when you copy them or share them over multiple projects.

Nowadays, with webpack it’s still quite the same. For every step in your build you can find a plugin, but you still need to configure that plugin. In other words, still some hassle.

Wouldn’t it be great to have no hassle at all? To abstract away all the configurations?

Read More

Slicing Kibana logs with Vue.js


Nowadays we frequently see companies adopting the Elastic Stack to search, analyze and visualize application data in real time. While the scope of application data ingested these days is broadening, it’s already quite common to monitor aggregated application logs in Kibana. Because of this, I frequently find myself coming back to Kibana to slice and filter the logs to monitor how our application deployments progress through deployments. In this blogpost, I’ll outline a small Vue.js web application I wrote to more easily access our application logs.

Read More

Advanced Firebase Hosting features


In a previous blog post we covered how to host a static website on Firebase Hosting. In this post we’ll demonstrate and illustrate some of the more advanced futures of FireBase Hosting. In a future blog post we’ll describe how to combine this knowledge with a CI Pipeline to fully automate deployment to production combined with a test and staging environment.

Why Stencil.js might just be the best way for near-vanilla web components


Although frameworks like React, Vue.js and Angular are really great, UI components created in these frameworks are not reusable in an other framework.
Also using a framework will often bloat the bundle size of your UI component.

Instead we could use solutions like LitElement or Stencil.js to create near-vanilla Web Components, which can just be used in all the frameworks.
And since solutions like LitElement or Stencil.js introduce almost no additional overhead compared to Web Components written in Vanilla JavaScript, I personally like to use the term near-vanilla web components for them.

Especially because all major browsers, except MS Edge, now offer native support for the core standards of Web Components being Custom Elements v1, Shadow DOM v1 and HTML Templates.

Read More

Deploying a web application to Firebase Hosting


You might know Firebase as a Realtime Database database for mobile and web. Firebase evolved over time and offers additional features like Firebase Hosting. Firebase Hosting allows you to easily host a static website or application using the excellent Firebase and Google infrastructure.

In this series we’ll describe how to get the most out of hosting your website or application using Firebase.

This post will cover how to host a static website on Firebase Hosting using a sample project.

Read More

How to make a well informed decision before adding a NPM dependency to your project


When doing frontend development, you might come at a point where you want to use a 3rd party library to make the developer experience a bit better. It is, however, good to do some research before including a library or framework. Some libraries may not be actively maintained or add a lot of extra dependencies which you do not need or want.

Read More