Learn how to create (real) recurring tasks in Notion. There’s only basic coding skills necessary. Any tech-savvy person can level up from Notion formulas using this tutorial.
Hi, I’m Manuel.
I make web applications, games and digital art.
You are enjoying my personal blog.
Learn how we’ve split the karriere.at “front-end monolith” into smaller parts that our teams can develop effectively and independently! ⛏
I recently migrated manu.ninja to Eleventy. Never have I ever had such a pleasant experience with a static site generator. Here’re five snippets from my setup that might be useful for your own Eleventy projects.
How to use Storyblok’s GraphQL endpoint with Vue.js and Apollo
· 3 Minutes / 857 Words
Learn how to use Storyblok’s GraphQL API with Vue.js and Apollo. The full examples in this article let you combine the Headless CMS with Vue.js in just a few minutes.
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.
Coding Meetups Progressive Web Apps Slides Tools Vue.js
Scaffolding a Progressive Web App using Vue CLI 3
· 15 Minutes / 3,756 Words
Vue CLI 3 has been released and it’s completely different from its previous version. Discover how it simplifies your toolchain, reduces configuration fatigue and improves your developer experience.
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.
Coding Accessibility Web APIs Interaction Design Progressive Web Apps
Using the Speech Synthesis Interface of the Web Speech API
· 4 Minutes / 1,073 Words
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!
Coding Business Conferences Slides Tools
Changing the Color of All Links in a Google Slides Presentation with a Google Apps Script
· 3 Minutes / 739 Words
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.
Coding Interaction Design Progressive Web Apps Performance Vue.js
Introducing “Japanese Phrasebook”
· 5 Minutes / 1,437 Words
For the last few weeks I have built an open-source Japanese Phrasebook app optimized for travel and offline usage. The app’s content is nearly 700 phrases from Wikitravel, transformed to a structured data model. This blog post explains my motivation and outlines what I am trying to achieve with this project.
Coding Business Conversion Performance Testing Tools
A/B Testing Using Google Analytics
· 6 Minutes / 1,529 Words
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.
Coding Games Business Interaction Design three.js WebGL
25+ Real-World Applications Using WebGL
· 5 Minutes / 1,410 Words
Whenever I’ve tried to explain the fascination of WebGL I failed to think of examples apart from demos, experiments and games. Since then I’ve done research and collected 25 inspiring real-world applications using WebGL/WebVR.
Digital Art Coding Games Tools Slides
How to Take a High-DPI Full Page Screenshot in Google Chrome
· 2 Minutes / 668 Words
Whether you want to ask for design feedback from your colleagues, inspect changes between versions, use them in your presentation slides or your marketing folders: There are quite a lot of use-cases for screenshots of your web page. This blog post shows how to take high-DPI full page screenshot right inside of Google Chrome.
5 Chrome Developer Tools Features You Should Start Using Today
· 5 Minutes / 1,200 Words
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.
Digital Art Coding Games Functional Programming Lazy Loading RxJS three.js WebGL
Game Graphics with WebGL/three.js and Lazy-Loading of 3D Models
· 10 Minutes / 2,415 Words
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.
Coding Games RxJS Functional Programming
Game State with RxJS 5/Immutable.js
· 11 Minutes / 2,746 Words
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.
Coding Games RxJS Functional Programming
Game Loop with RxJS 5/Immutable.js
· 5 Minutes / 1,399 Words
This is the first part in a series on creating a game with RxJS 5, Immutable.js and three.js. We’ll look into how to create a basic game loop, which serves as a starting point for further development of the game project.
Digital Art Coding Games Functional Programming RxJS three.js WebGL
Functional Reactive Game Programming – RxJS 5, Immutable.js and three.js
· 1 Minute / 322 Words
This series of blog posts will guide you through creating a computer game using RxJS 5, Immutable.js and WebGL/three.js, following the functional reactive programming paradigm in JavaScript. You can find the full source code on GitHub, which you can fork and adapt for your own projects.
Digital Art Coding Games Interaction Design three.js WebGL
WebGL/three.js Annotations
· 4 Minutes / 972 Words
How do you add a comment box or annotation box to a WebGL object as seen on Sketchfab? This tutorial features a working example on CodePen and explains the essential code segments.
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.
Digital Art Coding Animation Hardware
Clock Clock 24 on a Raspberry Pi using Web Technologies
· 3 Minutes / 811 Words
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.
Digital Art Games Animation Rigging Unity Maya
Character Rigging and Animation Workflow for Unity in Maya
· 3 Minutes / 857 Words
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.
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.
Coding Image Processing Lazy Loading Performance
Thoughts on Linear Gradients That Resemble Images
· 6 Minutes / 1,533 Words
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.
Coding Animation Interaction Design
Using Web Technologies for a “Pull to Refresh” Animation
· 4 Minutes / 1,138 Words
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.
Coding Animation Conversion ffmpeg
Boost User Engagement with Animated Video Previews
· 4 Minutes / 1,169 Words
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.
Inline SVG – How I Learned to Stop Worrying and Love gzip
· 8 Minutes / 1,930 Words
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.
Simple Electron GUI Wrapper for a Command-Line Utility
· 7 Minutes / 1,787 Words
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.
Digital Art Coding Games three.js WebGL
WebGL 3D Model Viewer Using three.js
· 4 Minutes / 1,170 Words
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.
Coding Image Processing Lazy Loading Performance Meetups Slides
Slides for My Talk About Dominant Colors at Stahlstadt.js
· ½ Minute / 68 Words
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.
Coding Games RxJS Functional Programming
Functional Reactive Game Programming – RxJS Breakout
· 5 Minutes / 1,436 Words
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.
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.
Coding Image Processing Lazy Loading Performance Tools
Dominant Colors for Lazy-Loading Images
· 5 Minutes / 1,233 Words
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.
Responsive Tables for Humans, Web Crawlers and Screen Readers
· 3 Minutes / 858 Words
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.
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 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.