Recent content on Matthias Hager
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…
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…
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?
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.…
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.
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…
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…
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…
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…
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…
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…
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…
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,…
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.
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.
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…
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…
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.
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…
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.
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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.
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…
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…
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.
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…
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.