I think I’ve reached a point with this new website where I feel comfortable saying it is pretty much done. I just wanted to do a quick post about the process, and what I learned. First off, all of the code is open source on GitHub: https://github.com/kamiyo/sycpiano. Thanks also to my brothers Jason and Andrew for getting me started and helping me with things, especially in the earlier stages. It took around 2 years! Don’t worry if the acronyms mean nothing to you – I’m going to do a simple musicians guide to web programming later!
Feel free to skip to the last section (Main Takeaways) if you want to read the main takeaways. The following sections are just me bragging a little bit about the web programming technical things I learned, so I can feel a bit better about myself and not like I’ve wasted two years in working on this website…
Going In
I had programmed my previous two sites myself as well, but I didn’t have the guidance of two programmers at those times. To go back further, I was messing around with HTML and CSS back in the blogger and Geocities days.
So I came into this process knowing a bit:
- HTML
- CSS
- JavaScript (vanilla)
- PHP (sorta)
- MySQL (very basic)
- Messing around with .htaccess
I was fortunate to have taken some comp sci courses when I was in school, so I had a solid foundation of any ALGOL-like languages (C, C++, Java).
What I Learned
The early stages of the website was all about learning the framework and modern JS. In my old site I just gzipped up the JavaScript file, and served it along with some libraries like jQuery through their CDNs.
My brothers suggested I use React as my framework, whereas for my previous site I used AngularJS (v1). They also setup a toolchain using Webpack and Gulp, running on NodeJS. Later on we dragged Typescript in.
So, things I learned:
- Almost everything runs on JS now.
- You basically never touch .html files anymore.
- React
- NodeJS
- Reducers and state management
- Typescript and Modern JavaScript (es6+)
- Promises!
- Using and creating a restful API
- Using a build tool like Webpack
- Postgres, using an ORM like Sequelize, and Full-Text Search
- A bit about Nginx and some server stuff like using pm2 to keep the Node server running.
- More familiarity with version control (git)
- CSS-in-JS solutions
- Canvas and WebGL animations
- Using Chrome devtools
And not web-related, I learned a bit on using OpenCV and doing some facial recognition (trying to automate thumbnail creation of my own photos) and about constant-Q transforms when turning audio time data to frequency data (as seen in the music visualization). I’ll also do a post about that.
Main Takeaways
Mostly, I learned I have no design chops. I have the hardest time choosing colors and layout, and making user interaction decisions. So much of the design is literally hours of trial and error. The coding part is fine. It’s the design part that is hard.
It takes time. All the code planning, debugging, refactoring, especially when you don’t have experience working with a large codebase. But you learn alot. And you save money.
Everything is on the internet. Stackoverflow, GitHub issues and gists – if you have a problem, chances are someone else has had it before you.
Cross-platform is a b*tch. Just because it works on one browser on one device, doesn’t mean it will work on another one. I’m also starting to think mobile-first would be the best way to go (which is not what I did). It’s harder to do good mobile UI/UX compared to desktop. You can tell on my site mobile was (not-quite, but almost) an afterthought… or like a halfway-through-thought.
Designing your own website means you can have it exactly the way you want. If you want a feature, you implement it. If you can’t, it’s because you’re not good enough, not because it’s not possible.
Modern web development seems to be “libraries, libraries, libraries” but it really does make it easier. Because of that, a lot of development time is spent also on building and making sure the shipped code is compact and performant.
Finally, just like how artists learn by tracing, composers learn by transcribing, and musicians learn by listening, it’s helpful to start coding from examples. I was sort of reluctant to learn React, and all this new stuff, but since my brothers helped get things started, I could study what they had written and learn from there.
And just like music, do it only if you enjoy it.