Getting out of your comfort zone is a great way to try and learn new things. Sure, it can be a little daunting, so make sure you pick a subject that seems fun and interesting to you. For me, it is making a game.
Out of your comfort zone — Let's make a game: Sprite animation with canvas
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.
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?
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.
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.
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.
Slideless presentations for live coding demos
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.