https://matthiashager.com/ Recent content on Matthias Hager Hugo -- gohugo.io en-us Tue, 23 Dec 2025 00:00:00 -0421 https://matthiashager.com/projects/founders/ Tue, 23 Dec 2025 00:00:00 -0421 https://matthiashager.com/projects/founders/ Founders Online is a public archive housing nearly 200,000 documents penned by seven American founders, a few of whom the average American has actually heard of. It’s a historical goldmine, and given the sheer volume of text, it seemed like a target ripe for over-analysis and unnecessary visualization. A Few Caveats First, the dataset is restricted to letters involving seven specific men: John Jay, George Washington, John Adams, Thomas Jefferson, Benjamin Franklin, Alexander Hamilton, and James Madison. https://matthiashager.com/projects/travel/ Sun, 23 Nov 2025 00:00:00 -0421 https://matthiashager.com/projects/travel/ My wife is a comprehensive travel planner. But every trip, she writes down her checklist, from scratch, in a notebook. Realizing the inefficiency and potential for error, and being the sort of geeky helpful husband that she claims to love, I naturally digitized it and made it way more complex than a list on a sheet of paper. Features Create checklist templates and reuse them for multiple trips. Templates have customizable criteria for when items should be included. https://matthiashager.com/projects/lucky/ Fri, 23 May 2025 00:00:00 -0421 https://matthiashager.com/projects/lucky/ Every day one person gets lucky and is blessed with a special celebration. Will it be you? Inspired in part by old school hit counters. I threw this together pretty quickly using Python and Falcon. It picks a random number each day from a range which scales up based on the number of visits the previous day. And it tracks page loads. Yep, that’s it. How fast can you spam F5? https://matthiashager.com/projects/coffee/ Sun, 11 May 2025 00:00:00 -0421 https://matthiashager.com/projects/coffee/ A retro-nostalgia, coffee-fueled, over-caffeinated-and-over-hyphenated coffee quiz. It was created out of an interest in early-2000s internet culture and… coffee. The intent is to be a fun, easy, sarcastic, and somewhat useful questionnaire determining the best coffee making mechanism for your particular interests. It utilizes extremely simple, framework-less JavaScript and CSS. I’m sure that somewhere out there exists a boring, corporate, React-driven alternative. No doubt State It’s plain HTML and JavaScript. It will probably outlive you. https://matthiashager.com/nice-things/ Tue, 15 Apr 2025 00:00:00 +0000 https://matthiashager.com/nice-things/ He's killing it. — The Pope Matthias was such an integral part of our very first 6 figure launch. Every time we had an important sales or marketing decision he had a ton of knowledge to share and we came up with a solid plan of action. — Rachael Lowe, Soul Level Love He immediately took charge of our entire marketing strategy and turned it into a well oiled machine. https://matthiashager.com/gui-options-for-nim/ Mon, 01 Apr 2019 12:39:00 -0400 https://matthiashager.com/gui-options-for-nim/ The details in this post are not likely to be kept up to date. It's just a starting point for your own research. Nim is still a fringe programming language, so unfortunately the tl;dr is that there are no booming, mature options for creating a native GUI with Nim. There are a handful of efforts being made toward this end, with various degrees of success and ongoing effort. I've chosen to run with NiGui for now, for simple interfaces, as it does not yet have the support for more complex elements or layouts but is simple to use for very basic GUIs. https://matthiashager.com/proc-method-nim/ Tue, 19 Mar 2019 13:00:00 -0400 https://matthiashager.com/proc-method-nim/ When starting out with Nim, I came across what appeared to be a frustrating little bug. I had a series of objects which inherited from a parent level object. There were overloaded procedures that were called on each of these objects, and a fallback procedure for the parent object. (Sample code below.) However, every time I called the proc, it would get called on the parent object rather than the inherited type. https://matthiashager.com/converting-snake-case-to-camel-case-object-keys-with-javascript/ Fri, 14 Dec 2018 15:30:00 -0500 https://matthiashager.com/converting-snake-case-to-camel-case-object-keys-with-javascript/ I run into a situation frequently when dealing with APIs where my JavaScript frontend expects camel case object keys while APIs tend to return snake case keys. I've settled on a few utility methods for converting these that are worth sharing here. I'm using ES6 conventions throughout the article. And so there is no confusion, this is what I mean when I talk about the different cases during this article. https://matthiashager.com/nim-object-oriented-programming/ Mon, 10 Dec 2018 11:00:00 -0500 https://matthiashager.com/nim-object-oriented-programming/ Recently I was writing a small utility library with Nim in which I needed to deal with different object types in different ways within the same procedure. I am new to Nim, and to statically typed languages, so it's important to warn you that this is almost certainly not the correct, best, or the idiomatic way to handle this situation. If you're writing production code please look elsewhere. On the other hand, this worked for me in my situation and I thought it was a good solution. https://matthiashager.com/programming-fixing-a-broken-toilet/ Fri, 11 May 2018 11:10:00 -0400 https://matthiashager.com/programming-fixing-a-broken-toilet/ Programming is like fixing a broken toilet. Some people just keep flushing the toilet, hoping it fixes itself. Sometimes this works, most of the time not. These are the programmers who restart the server every time there's a problem, or they wrap large sections of code in try-except blocks to avoid errors crashing the system. This might temporarily cure the symptoms, but it rarely fixes the problem. Some people Google the problem, and then dump a bucket of water in the bowl or manually hold up the chain in the tank. https://matthiashager.com/vue-js-media-player-tutorial/ Fri, 04 May 2018 14:00:00 -0400 https://matthiashager.com/vue-js-media-player-tutorial/ Vue.js often gets used for large, single-page applications (SPAs). While it excels at these, especially with incredible tools like vue-router and vuex to intelligently manage routes and state, Vue.js also shines as an embedded interactive application or widgets. These often get used in otherwise static websites where a small piece of interaction is required. Personally, I've used Vue.js to build one-off photo sliders, navigation menus, tabbed boxes, dynamic form wizards, modals, data tables, and much more. https://matthiashager.com/first-look-at-a-programming-tutorial-concept/ Fri, 04 May 2018 13:39:00 -0400 https://matthiashager.com/first-look-at-a-programming-tutorial-concept/ Online programming tutorials offer a terrible experience. They are constrained by a linear format and lack of proper tooling. It is stunning to me that, with all the tools programmers build for themselves, and the multitude of programming education platforms out there, that no one has built a better process for writing, publishing, and consuming tutorials. Instead, nearly every guide out there is written in an editor meant for blogging, following a format that hasn't been updated since the first line of code was ever published. https://matthiashager.com/projects/movie-watch/ Tue, 20 Feb 2018 00:00:00 -0500 https://matthiashager.com/projects/movie-watch/ A movie rating platform built on Python/Django. My goal was to create an incredibly simple way to track movies I have watched, and movies I would like to see. It had to be fast. It had to be fun. The end result met those challenges. What makes this app especially unique is its dead simple onboarding and login system. Instead of creating a username or connecting to a third party service, you simply start rating movies. https://matthiashager.com/projects/programming-tutorial-concept/ Tue, 20 Feb 2018 00:00:00 -0500 https://matthiashager.com/projects/programming-tutorial-concept/ This project was two-fold: a tutorial on building a simple Vue.js media player, and a proof of concept of a new programming tutorial concept. State The media player and the tutorial concept are both still functional without any updates after 5+ years. The concept received a warm reception on Hacker News, but I never invested in building it into a true product. https://matthiashager.com/projects/vuejs-media-player/ Tue, 20 Feb 2018 00:00:00 -0500 https://matthiashager.com/projects/vuejs-media-player/ This project was two-fold: a tutorial on building a simple Vue.js media player, and a proof of concept of a new programming tutorial concept. State The media player and the tutorial concept are both still functional without any updates after 5+ years. The concept received a warm reception on Hacker News, but I never invested in building it into a true product. https://matthiashager.com/projects/umoja/ Mon, 15 Jan 2018 00:00:00 -0500 https://matthiashager.com/projects/umoja/ Umoja is decidedly anti-social You’re not here to share with your friends. You don’t want to worry about your boss looking over your digital shoulder. This is the space for your private life with your partner. Umoja focuses on sharing all the personal moments in your journey with your partner. These moments are sometimes silly, sometimes sad; they might be look miniscule to someone else, but to you they are the most cherished. https://matthiashager.com/first-segment-vue-js-tutorial-published/ Thu, 16 Mar 2017 03:00:00 -0400 https://matthiashager.com/first-segment-vue-js-tutorial-published/ The first 6 sections of my complete Vue.js application tutorial are now published. This series is designed to give a broader scope than most of the existing Vue.js learning material available while being practical and pragmatic. It will cover the complete development of a personal budgeting application with topics such as dealing with local storage using Vuex and Vue-Router project structure for a mid-size application development workflow (for a solo programmer) communicating between components and modules writing DRY, decoupled Vue. https://matthiashager.com/projects/phaser-health-meter/ Mon, 20 Feb 2017 00:00:00 -0500 https://matthiashager.com/projects/phaser-health-meter/ Phaser Health Meter is a Phaser plugin that lets you easily insert health meters for your sprites. Meters can be attached to any sprite and update dynamically based on the sprite’s health component. State Phaser is still a popular game engine. I’m sure better options exist now. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/planning-application/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/planning-application/ This is part 1 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/styling-navigation/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/styling-navigation/ Want to put some lipstick on this pig? Let's do it. Most of this update is CSS styling. Since that is outside the scope of this tutorial, I'm going to magically tackle it in one commit without boring you with the details here. Skim through the diff, though, because we do move around and change some HTML elements that might cause things to break if you don't notice them. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/vuejs-dynamic-components/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/vuejs-dynamic-components/ This is part 11 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/planning-transactions/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/planning-transactions/ This is part 12 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/transactions/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/transactions/ This is part 13 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/user-testing/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/user-testing/ This is part 14 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/data-architecture/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/data-architecture/ This is part 2 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/project-structure/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/project-structure/ This is part 3 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/create-list-accounts/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/create-list-accounts/ This is part 4 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/edit-delete-accounts/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/edit-delete-accounts/ This is part 5 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/localstorage-vuejs/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/localstorage-vuejs/ This is part 6 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/refactor/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/refactor/ This is part 7 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/vuejs-budgeting/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/vuejs-budgeting/ This is part 8 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/budget-app-vuejs/ Wed, 15 Feb 2017 00:00:00 -0500 https://matthiashager.com/complete-vuejs-application-tutorial/complete-vuejs-application-tutorial/budget-app-vuejs/ This is part 9 of an 18 part series titled Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step 3: Setup & Project Structure Step 4: Create & View Accounts Step 5: Edit & Delete Accounts Step 6: Adding LocalStorage to our Vue. https://matthiashager.com/vuejs-frontend-ui-frameworks-comparison/ Thu, 02 Feb 2017 03:00:00 -0500 https://matthiashager.com/vuejs-frontend-ui-frameworks-comparison/ With the surge of popularity of Vue.js over the past year, a multitude of Vue-specific front end frameworks have appeared on the scene. Having options is great for the developer. But it can also be overwhelming when choosing between them. This is an effort to compare the various options available, in an unbiased and approachable manner, while highlighting the strengths of each one so the developer can make an informed decision. https://matthiashager.com/testing-vuejs-overview/ Wed, 01 Feb 2017 03:00:00 -0500 https://matthiashager.com/testing-vuejs-overview/ Testing in Vue.js is easy. To start a new project with the testing framework already in place: $ npm install --global vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run test Wait until it finishes and you'll see passing unit and end to end tests. Whoever said the JavaScript ecosystem is a mess? This is a great starting point, and it helps the newcomer get started with Vue. https://matthiashager.com/comparison-review-note-taking-apps/ Wed, 25 Jan 2017 03:00:00 -0500 https://matthiashager.com/comparison-review-note-taking-apps/ When Benjamin Franklin sat down to write in his diary what would eventually become the Gettysburg Address, he agonized over his choice of medium - stick with the tried and true stone tablet with hammer and chisel, or lend credence to this new fangled paper and pen? Here I am, 972 years later, faced with a similar decision. I have some 30 notebooks in my closet, begging me to fill them up. https://matthiashager.com/mocking-http-requests-with-vuejs/ Fri, 04 Nov 2016 03:00:00 -0400 https://matthiashager.com/mocking-http-requests-with-vuejs/ While writing unit tests for a growing Vue.js application last week, I needed a simple way to return test data for various HTTP requests that vue-resource fired off, without actually querying the server. There are libraries out there that can help with mocks and stubs and spies and a thousand other situations, but my needs were simple. Simple needs often call for simple solutions. Vue-resource gives us request interceptors that allow us to mutate every step of the request processing. https://matthiashager.com/image-slider-vuejs-tutorial/ Tue, 30 Aug 2016 03:00:00 -0400 https://matthiashager.com/image-slider-vuejs-tutorial/ Here is the demo and the final code on JSFiddle. Update April 16th, 2018: this tutorial and the accompanying code have been brought up to date with more recent Vue.js updates. An image slider is the quintessential use case for vue.js. It's a single, distinct component that requires data management, DOM updates, and user interaction. I recently needed a very simple image slider on a marketing page I was developing for a project built with vue. https://matthiashager.com/projects/5-minutes-at-a-time/ Fri, 20 Feb 2015 00:00:00 -0500 https://matthiashager.com/projects/5-minutes-at-a-time/ A series of tiny, daily challenges that aim to improve your life in small ways. We all lead busy lives. It’s tough to find time to experience new things or change old habits. 5MAT gives you a unique challenge every day designed to do just that, in 5 minutes or less. State This was a personal experiment I created years ago but never marketed. https://matthiashager.com/projects/auroraboard/ Fri, 20 Feb 2015 00:00:00 -0500 https://matthiashager.com/projects/auroraboard/ Daily task boards that hold you accountable. Aurora Board helps you plan out your day, and stick to your goals. This is the digital adaptation of my pen & paper task management system. It helps you plan your work 1 day at a time in a simple format. Small triggers help you accomplish your tasks. Built on Python/Django and the Django Rest Framework, with a Backbone.js frontend. State This was a personal experiment I created years ago but never marketed. https://matthiashager.com/projects/logos/ Fri, 20 Feb 2015 00:00:00 -0500 https://matthiashager.com/projects/logos/ A writing habits application. Logos was one of the first Django applications I built, meant to apply Jerry Seinfeld’s habit tracking calendar to your writing goals. State This was a personal experiment I created years ago but never marketed.