Hi, I’m Manuel.

I make web applications, games and digital art.
You are enjoying my personal blog.

Private Methods and Fields in JavaScript Classes

Ever since classes were introduced in ECMAScript 2015 people wanted to use private methods and fields, which are well-known from programming languages like C++, PHP or Java. There is now a Stage 3 ECMAScript Proposal regarding private methods, getter/setters and fields. We’ll look at the proposed syntax – which is how you’ll (propably) write private methods and fields in future JavaScript versions – and how to achieve the same functionality with current language features.

Read more…

Gatsby and ButterCMS

Learn how to build a Gatsby blog using ButterCMS. The code examples in this article let you combine Gatsby and ButterCMS in just a few minutes, no matter if you are a beginner or an expert.

Read more…

Using the Speech Synthesis Interface of the Web Speech API

Speech synthesis has come a long way since it’s first appearance in operating systems in the 1980s. In the 1990s Apple already offered system-wide text-to-speech support. Alexa, Cortana, Siri and other virtual assistants recently brought speech synthesis to the masses. In modern browsers the Web Speech Api allows you to gain access to your device’s speech capabilities, so let’s start using it!

Read more…

Changing the Color of All Links in a Google Slides Presentation with a Google Apps Script

We often use Google Slides at karriere.at for our presentations. To comply with our corporate identity we usually change all colors to our brand color, which is a saturated green. There is one problem, though: The default hyperlink color in Google Slides is a light blue and can not be changed for all slides at once. Luckily, there is Google Apps Script, which allows you to automate Google Slides and other services.

Read more…

A/B Testing Using Google Analytics

A/B testing allows you to continually improve your product’s user experience or various sales and marketing KPIs, as long as your goals are well-defined and you have a clear hypothesis. This article does not tell you why you should do A/B testing, but focuses on how to track the test and analyze its result using JavaScript and Google Analytics.

Read more…

5 Chrome Developer Tools Features You Should Start Using Today

Developers use the Chrome DevTools on a regular basis. However, most developers limit themselves to a few features that are familiar to them – like changing CSS styles or checking JavaScript errors. It pays off to explore and discover new tools. In this post I’ll show you 5 features you may not yet know, but which I find very helpful in my work.

Read more…

Game Graphics with WebGL/three.js and Lazy-Loading of 3D Models

This is the third part in a series on creating a game with RxJS 5, Immutable.js and three.js. We’ll look at rendering 3D graphics with WebGL by using the three.js library. The goal of this part is to have a scene that’s updated according to the Immutable.js collection returned by our game state stream.

Read more…

Game State with RxJS 5/Immutable.js

This is the second part in a series on creating a game with RxJS 5, Immutable.js and three.js. We’ll look into describing the game state with RxJS 5 observables and Immutable.js. The goal of this part is to have a stream of objects, where each object is an Immutable.js collection that represents the whole game state at a particular point in time.

Read more…

Web Push Notifications

Developers use push notifications to engage and retain users. Unfortunately, sending push notifications on the open web was difficult in the past. It has become simpler in 2017. This tutorial shows you a complete working example to get you started. The final code is on GitHub and you’ll find a video demonstrating how you can send your first push notification.

Read more…

Clock Clock 24 on a Raspberry Pi using Web Technologies

The original Clock Clock 24 is kinetic art by Humans since 1982. Twenty-four analog clocks form a large digital clock. Clever arrangement of the clock hands transforms the analog clocks into seven-segment displays. My girlfriend’s father stumpled upon this clock when looking for a new living room clock. At the time of writing you can buy the clock at $ 5,999.00 in the MoMA store. Thus I took the liberty and created a Clock Clock 24 homage with web technologies. My girlfriend and I then put the clock on a Raspberry Pi.

Read more…

Lightweight Testing of Front-End npm Packages

This tutorial explains using npm for front-end JavaScript package management and writing lightweight automated tests with Browserify, tape and Sinon. It also features transpiling with Babel, handling npm hooks and using npm privately without publishing your package.

Read more…

Boost User Engagement with Animated Video Previews

If you are building a video portal, an artist’s portfolio or any other showcase of films, from smartphone footage to news coverage to sports clips, you typically look for engaging thumbnails. Though you don’t have to stop there and can boost your video previews and click-through rate by showing more than a single still image of each video. This article highlights two approaches to grab your viewers’ attention.

Read more…

Functional Reactive Game Programming – RxJS Breakout

Functional Reactive Programming is currently one of the hottest paradigms in the JavaScript community. I played with RxJS over the last couple of weeks and decided that there is no better way to dive into it than recreating a classic game. Computer games infamously store a lot of external state and my goal was to model everything as streams without relying on a single external state variable.

Read more…

Brew Your First Tests with Mocha, Chai and 3½ Minutes

This post is for front-end developers who want to start writing tests. People have told them that testing their code is beneficial to their sanity. For some reason, though, they never got started – maybe because there are a lot of lenghty articles and different tools to consider. This article is different: It is a copy & paste guide to your first tests with a steeping time of about 3½ Minutes.

Read more…

Notes from Topconf Linz 2016

Topconf Linz 2016 was a a great conference with charming people and inspiring talks. I am looking forward to next year and hope events like this will help put Linz on the map and attract more international attendees and speakers. Here are my notes from the talks that I have seen.

Read more…

Rendering Low-Poly Hair in Unity

This article leads you through my experience a few weeks ago. Let’s say you have modeled and textured hair for your low-poly character and want to drop it into Unity. After importing your mesh you play with the different rendering modes of the default material and come to the conclusion that they all give you unsatisfactory results. You then settle on the Cutout rendering mode and cringe while noticing the backface culling, causing most of your hair mesh to disappear.

Read more…

Responsive Tables for Humans, Web Crawlers and Screen Readers

The web was once full of tables and creative ways of misusing them for layout. These days are over and tables are being used for their initial purpose, being data representation. Unfortunately responsive web design and having to deal with tables on smaller screens has led people to stir <div> soups on the one hand and creating JavaScript houses of cards on the other.

Read more…

Current Color for Fills and Strokes

Several people have given me feedback on my grunt-svg-symbols plugin. They especially liked the idea of changing color values to currentColor, so that the icons inherit the text color. Therefore the updated plugin has an option to automatically replace the values of all fill and stroke attributes for you.

Read more…

Simple SVG Icon System Using <symbol>

I won’t go into detail why an SVG icon system based on symbols is a good choice for your icons, because there are plenty of great articles out there. I will just give you an overview of our solution at karriere.at and show you a tiny Grunt plugin called grunt-svg-symbols, which creates a bunch of SVG icon systems from as many folders full of icons as you like.

Read more…

“Why Do You Need so Many Developers?”

I am currently working for karriere.at as a full-stack web developer, leaning more towards design than algorithms and data structures. I have the pleasure of working with 18 other developers, which is why we are often asked at events and meetups what all of those developers actually do all day at our company. Recent graduates and students – as well as experienced developers – know karriere.at as Austria’s leading job search site and wonder why running it is such a demanding and complex task. But karriere.at is far more than just a job search site. This is why I wrote an article to give fellow developers a short overview.

Read more…

How to Design an Indie Game Logo in Illustrator

I am currently working on a game prototype with a few friends and we settled on a slightly ridiculous title. To announce our project in a way that it deserves I have created a logo that represents the over the top experience we are aiming for. Several people have asked me how the logo was created, so here you have a short tutorial on how to design an indie game logo in Illustrator.

Read more…