An Observable Odyssey
Unexpectedly, I am going on an Observable odyssey. I ran across a particularly interesting Observable story as a notebook a few weeks ago. It really captured my imagination as I aspire to be a “creative coder”. As someone who is very interested in things like JavaScript, Games, Web Development, Storytelling, and teaching, this site offers all of these things and more. I find myself learning about kinda obscure JavaScript features like Generators and rediscovering my love for SVG.
Observable is quite remarkable to me because it has cracked a lot of “tough nuts” in my webdev journey. I find myself making goofy little notebooks that do things like tell Chuck Norris jokes and show Cat Pictures. I've also learned how to Generate Mazes , tell stories with Inkjs, and create simple games with creative commons RPG Icons. I've learned about Entity-Component-Systems , how to use Google Spreadsheets as a mini-database, and how to use Github as my own personal “npm” to write code outside Observable, but to use it as a library my notebooks can dynamically import.
I've learned MORE about how the web works in these past few weeks playing with Observable than I have in a long time. For instance, did you know there's this thing called a Broadcast channel that you can pass messages to in a browser and every other site, page, etc. that listens to that channel can receive and send messages as well? That's HUGE! And it's just one of many discoveries I've made.
It's CHANGING how I understand how the web works. I have always thought of the web as you have this browser that has a bunch of functionality, all mish mashed together on a page. You poke at it through HTML, CSS, JS, and SVG, and HOPE it works ok. Now, I'm learning that the web is a very organized set of components. There are built-in components to the browser, that you can take advantage of, and there are user-made components you can fetch from say NPM which you also can use. I've always been this “build it myself” kinda guy. And that has been my albatross. Instead of actually making a web game, I spin my wheels trying to make pixels move. When instead I could just use a game library like Kontra or Phaser and just go!
Observable itself is also quite cool. It enforces a concept I find very appealing called Functional Programming. And it also uses async/await, Promises, require, import, and more. Writing “modern” JavaScript is the norm here, and just looking at a notebook and how it works is not only fascinating, but a valuable way to get your own notebooks working well.
Everything is “forkable” – where you can clone a notebook ( mostly ) and make it your own to spin off new ideas. There's also this really interesting idea where every “cell” in a notebook is addressable in ANY other notebook. And that cell “carries over” all it's dependencies into the new notebook ( with some exceptions). This really gives one the feeling that everything is componentized, reusable, and remixable in a way that is a step up from typical Coding sandboxes like Codepen — which is super amazing and has a much bigger audience right now — but falls short on the sheer simplicity of writing a document, and sharing a cell with another document. You can also export your notebook to another site – and it will carry over the “engine” for you. So there's a sense that if you felt like you wanted to “eject” from Observable, you could still take your stuff with you. And it has a really nice way to embed your notebooks and cells in other websites. It's a great “citizen of the web”. It GIVES as much as it takes.
I REALLY like that.
So, here I am going nuts about Observablehq all because of a random tweet about creative coding. But it's not only sparked my imagination, it's made me a better webdev ( still learning! .... Generators ugh! ) , and it's enabling me to DO more things ON the web, WITH the web. I hope you check it out and find something fun to learn and do.