How Glitch taught me the Node.js stack
Tags: glitch, javascript, node, npm
Published: 2018-10-01 09:25:53

---
title: How Glitch taught me the Node.js stack
published: true
description: A thirst to use the Glitch collaborative coding experience helped me pick up Node in no time
tags: Glitch, JavaScript, Node.js, npm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/oe0sibkr00dq409einva.jpg
---

At work, I'm a full-stack .Net developer. This job is awesome, because [we build cool stuff for anyone][village]. But like many of us, I've always been hungry to do something *different* in my personal learning; to work outside of the confines of the tech that our team and our customers prefer. So I've had a ton of fun with "play" coding, experimenting with PHP, Python, and C in particular. 

[village]: https://villagesoftware.co.uk/blog/3-software-ideas-to-step-up-your-business-in-2018/

## Missing the JavaScript Rocket

Although JavaScript has been a mainstay of front end development since basically the start of my career in 2011, when the Node/NPM rocket took off, I watched dispassionately. Don't care. Let's see where it goes.

<img src="https://media.giphy.com/media/1SzFgSCH7LO9ntW9WT/giphy.gif" alt="Homer and Bart simpson miss a rocket takeoff" />

Now, JavaScript has probably the most exciting and thriving community of any language which is a magnetic prospect (even though it has good sides and bad sides)! Still, it didn't seem worth the trouble to get my head around all the tools, let alone download them and set them up. Plus, when you're ignorant, you don't know how much you don't know. It seems like a lot.

## Finding Glitch

I first heard of Glitch from [a design retrospective when it was Hyperdev][pketh], but didn't give it another thought until some of the inspirational ladies of GitHub and other people on my twitter feed started to talk about it and use it.

<a href="https://glitch.com"><img src="https://thepracticaldev.s3.amazonaws.com/i/v5asfacuy40qq7c64pli.png" alt="Glitch logo" /></a>

I find that watching people you look up to *enjoying* something is the surest way to want to get involved! I got involved in GitHub because of watching those people just having fun coding with one another, and Glitch was like history repeating itself for me.

The first time I used Glitch for real was a rare opportunity to spend some time with my nephew. We decided to learn some code together. I wanted to help him make his own real-life website on the internet, and Glitch popped into my head. We built some stuff, and after I tweeted it out I was really encouraged with the feedback!

{% tweet 1020069528481517572 %}

It's kinda vain, but having recognition from the team made me want to use Glitch more. I suppose it signalled that the folks making Glitch actually cared that people have fun using the thing. So I used it some more!

[pketh]: http://www.pketh.org/designing-glitch.html
[tweet]: https://twitter.com/SteGriff/status/1020053030752796672

## Glitch and JavaScript

<img src="https://media.giphy.com/media/lDrg1c0wl2vy8/giphy.gif" alt="Prepare for trouble, and make it double" />

Glitch has [low-key support for a bunch of runtimes][runtimes], but its first class language is JavaScript. All of the basic sample projects are currently JS, so as I started adapting these templates, it became part of the fun and the challenge to pick up server-side JS. The last time I tried Express was when I was a junior dev many years ago, and it scared me off. But back then:

A. I tried to set up everything from scratch
B. I didn't have easy access to high-quality, simple, community examples
C. I knew less about routes, APIs, and package managers like NPM

I've put 'C' last because I think it's the least important. The way these templates are presented now, and the wealth of workable (remixable!) examples on Glitch makes it accessible for a broader audience.

[runtimes]: https://support.glitch.com/t/language-support-on-glitch-a-list/5466

## Getting into it

Memory fails me, so I just made this little project (on Glitch of course!) that calls the API to show me a chart of what projects I was playing with, and when:

{% glitch glitch-timeline app %}

When I built bigger projects like Tamagotchi Log and BIOY, it was helpful to break the problem down into little bits that I need to learn. To make Tamagotchi Log, I had to figure out file uploads (tried it with two different libraries and only had success with one). And to make BIOY, I had to re-learn how to make a login system, this time using the NPM toolstack; I'd only ever done this with .Net and PHP before. Even that problem can be decomposed into [learning to interface with sqlite][sqlite], and learning to use [bcrypt in Node.js][bcrypt] (here's a [more detailed guide I also used][more]).

[sqlite]: https://github.com/mapbox/node-sqlite3/wiki/API#databaserunsql-param--callback
[bcrypt]: http://codetheory.in/using-the-node-js-bcrypt-module-to-hash-and-safely-store-passwords/
[more]: https://solidgeargroup.com/hashing-passwords-nodejs-mongodb-bcrypt

## The benefit of spikes

So each big project became a fun series of "spikes" - little proofs of concept for each feature. The advantage of this is that you have something to go back to consult next time. A spike is a self-documenting example, so when I inevitably forget how to achieve one or more of these things - past Ste has been there and I can benefit from that!

## Conclusion

I'm obviously not the most advanced or experienced Node.js dev, and it's probably not going to become my primary stack, but it's really fun to have an empowering (not frustrating) way to learn new stuff, and I'm glad that Glitch and the wider community have provided that.

 * Have you used Glitch or similar things like Codepen to learn a new language/stack?
 * What did you think?
 * And what do you think of composing a larger project out of a series of "spikes"?

<img src="https://media.giphy.com/media/vnnoqBjIrJ73y/giphy.gif" alt="High five cat gif" />