Michael Wagner

Full Stack Developer

Montréal city logo
I'm a quiet creative, motivated by learning challenging subjects and helping others.

Technologies

Languages Frameworks Tools

TYPESCRIPTJAVASCRIPT ES6+REACTSTYLED COMPONENTSEXPRESSNODE.JSMONGO DBCSS3HTML5VSCODEFIGMAYARNGITREGEXP

Background

How I got into programming - TLDR

In my mid 20s, I worked as a Manager for a company that had two Python Developers. I greatly admired their work and would often look curiously at their computer monitors filled with colourfully highlighted text. I began learning SQL with the goal of helping write database queries for my coworkers, later turning my interests towards Python.

Relocating to Montréal, my focus shifted from coding to learning French and in my spare time playing piano. The challenge of thinking in another language, and translating dots on a page into musical performance gave me the practice in abstract thought and humility necessary to attempt programming again.

I learned HTML, CSS, Git, JavaScript and React through a combination of textbooks, online courses and other resources. To my surprise, what I had previously researched of Python (loops, logic and functions) complimented my studies, and I was able to make progress in a short amount of time.

Later enrolled at Concordia University, I extended my understanding of React, Node, MongoDB and TypeScript, culminating in the ability to program complex applications I could not have imagined myself building when I first started. To date, I continue to learn new technologies and develop.

Studies

School Books Courses

  • Concordia University Web Development Diploma
  • Programming TypeScript - Boris Cherny
  • Eloquent JavaScript - Marijn Haverbeke
  • HF Git - Raju Gandhi
  • Grid Systems - Elam, Kimberly
  • JavaScript and jQuery - Jon Duckett
  • Web Design with HTML, CSS - Jon Duckett
  • HF JavaScript Programming - Eric Freeman
  • HF HTML and CSS - Elisabeth Robson
  • Clean Code - Dec 2022
  • Mastering Regular Expressions - Oct 2022
  • Node.js, Express, MongoDB - Jun 2022
  • React For Beginners - Nov 2021
  • CSS Grid - Oct 2021
  • Beginner JavaScript - Sept 2021

Projects

Patch Diver

Technologies used:

Browser screenshot of Patch Diver app
Description

Patch Diver is an online patch editor for hardware synthesizers. With the ability to load, save, share and browse sounds.

Story

In the mid 1980s, with the success of the Yamaha DX7, a number of synthesizer manufacturers turned to removing sliders and encoders on the panels of their synthesizers in favor of a digital screen and a number of button combinations to navigate menus. These synthesizers are notoriously tedius to program and are often quite under-valued on the used market. Sounds are typically patched with sysex MIDI messages, and the conventional method to upload these sounds can entail over-writing any personally-saved sounds. If this wasn't intimidating enough, sysex messages are often presented as a wall of hexidecimal values.

Patch Diver is my way of creating what I wish existed for synthesizer enthusiasts. The MVP is compatible with the Yamaha DX100 but because of similarities between other Yamaha synthesizer models from the same period, it should hypothetically work with a number of models.

What I learned + Takeaways
  • Working with the Web MIDI API
  • Converting 60+ components to TypeScript
  • Deploying and handling CORS issues
  • JWT authentication
  • Building UIs with SVGs
  • Binary two's complement + 8BitInts
  • Making 3rd party API calls on the BE
  • State management in a larger application
  • Due to the time crunch some complexity was added to existing components and functions that ideally would have branched off into more specific parts.
  • Building authentication from the ground up was a rewarding experience, but I will need to add "reset password" functionality before promoting the app to real users.

Royal Mint

Technologies used:

Description

A React app that tracks shared expenses/purchases between two people.

Contact

Feel free to reach out if you have any questions; would like to meet for coffee or talk shop!