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.
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.
This article highlights pitfalls I’ve come across while animating a character in Autodesk Maya. They often surface when you export your model to .fbx format for real-time applications such as Unity. Learn from my mistakes and read the following sections on rigging, animating and exporting.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.