Hi, I’m Manuel.

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

Thoughts on Linear Gradients That Resemble Images

When Harry Roberts posted Improving Perceived Performance with Multiple Background Images he called for automation of his process. As you can see in my own Dominant Colors for Lazy-Loading Images the topic is dear to me, so I went and over-engineered Harry’s concept for fun in the past month.

Read more…

Using Web Technologies for a “Pull to Refresh” Animation

Pull-to-refresh is a touchscreen gesture used in many mobile applications. This article shows a way of creating a simple pull-to-refresh animation using web technologies. The animation has seven different parts implemented with SVG, CSS and JavaScript.

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…

Inline SVG – How I Learned to Stop Worrying and Love gzip

What If I told you, that you can inline all of your SVG icons and stop worrying about the alternatives? In this article I suggest that you make your life easier by embracing gzip and replacing all of your <use> references.

Read more…

Simple Electron GUI Wrapper for a Command-Line Utility

This post summarizes my experience building a simple Electron app. It guides you through providing a GUI for a command-line utility. It also provides a succinct overview of the few things you really need to know when you are just getting started.

Read more…

WebGL 3D Model Viewer Using three.js

You can create a WebGL 3D model viewer in just a few lines of code using three.js. This tutorial shows you all you need to get started. The final code is on GitHub and you can see the viewer in action showing a low-poly model that I made for an unfinished Space Western game.

Read more…

Slides for My Talk About Dominant Colors at Stahlstadt.js

I gave a colorful talk about the topics covered in my article Dominant Colors for Lazy-Loading Images at this month’s Stahlstadt.js. The slides are on Speakerdeck and the accompanying code snippets are on GitHub. If you have any feedback, comments or questions, please get in touch with me.

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…

Dominant Colors for Lazy-Loading Images

Pinterest, Google Images and lots of image-heavy sites lazy-load their content. They also calculate the dominant color of each image to use as a placeholder. This post presents a few methods to do the same and helps you understand the GIF file format to make the most of data URIs.

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 (in German, I’m afraid) 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…