Just ignore the title. I really can't find one title that represents all the links I'm going to share this article, but anyway. I've read articles, videos, tutorials about Javascript, but those who really stood up are only a few. And usually it's those that are visually appealing, attention-grabbing and entertaining.
Of course, you take those away, and it's still something worth sharing. But I really admire the people who took an extra mile just to visualize their ideas, to convey their messages in a way that they and their audience love. It is really something to admire, and it's a skill that I'm also learning to do.
Anyway, just a little disclaimer that I am not in a way endorsed or sponsoring any of those links, nor I get any benefit from sharing it. Most of them are open sources anyway. I'm just sharing it so that maybe it can inspire you too. Here it goes.
1. Untrusted (https://alexnisnevich.github.io/untrusted/)
I can't remember where I found this, but the first time I saw it, it reminded me of the DOS games I've played when I was young. Back then, graphical interfaces are limited, but somehow I didn't even remember it was that bad, mainly because of the storyline and how cool it was at that time.
Just like this game, it wasn't the limited interface that stood up in my memory, it was the fact that it combines the two worlds that I love: adventures and learning Javascript. The game started out simple just like any other adventure, solving simple problem in Javascript to advance to the next level. You will have to use all the things you know about Javascript (with certain rules), and at times you are required to think out of the box. I can't say more on this otherwise it would spoil the game!
It is really fun. Mad props to the creator. You should check it out too.
P.S.: Speaking of simple yet addictive game, I'd like to give another shout out to https://github.com/doublespeakgames/adarkroom, a text-based game that could turn minutes to hours real quick.
2. https://regexr.com/ (https://github.com/gskinner/regexr)
If you're like me, who are still struggling to make a mind map of what symbol does what in RegEx, and you're in a constant need of visual cues, regexr is for you. It breaks down every single tokens in a RegEx syntax and explain what it does, while asserting the syntax live on to the example string that you can customize. Not only that, there are references on the sidebar on the common RegEx tokens that you would use, also with examples.
This website really takes the cake because of the way it is presented. It has everything from a sandbox to community-driven examples. And it's open source! If you're thinking of contributing or curious about the code, you can always check out the Github repo. Very recommended. Also, if you have other websites about RegEx, let me know in the comments, since I really need to step up my RegEx game.
Note that this is mainly applied to Javascript and PHP RegEx syntaxes.
3. https://dwitter.net/ (https://github.com/lionleaf/dwitter)
I saw a few posts from the #challenge tag recently, and I immediately thought of Dwitter. It's taking code challenge and code golfing to a whole new level! You are given a canvas that has some predefined code to start with, just enough to get it up and running. Then, you can write your own code in just 140 characters and go wild with your imaginations! People are mostly creating animations, but I think I've seen someone creating a game before.
It's not just showcasing what you can create, it is also similar to dev.to where you could browse, "like", share and comment other's creations. You could also remix them, similar to how you can do so in Glitch. It also has a wholesome community. Check it out.
4. https://observablehq.com/ (https://github.com/observablehq)
One of the articles that got me into writing is this article about Fisher-Yates shuffle. A concept that could've been complicated for me was presented in such a way that it's almost as if I was reading a story. The pacing, the visualization, the way it was written. From that moment, I kept thinking about this article and my dream is to write one like these.
Later on, I found out that the writer is actually Mike Bostock, the person behind d3.js, a Javascript visualization library. I've been using the library for a different project, and had since then become a fan. A little bit of digging and then I also found out that he co-founded another project called ObservableHQ.
I've seen Jupyter Notebook before and ObservableHQ reminds me of that. A place where you can write articles that "speaks", and also a place to share. It is filled with the articles similar to what I mentioned earlier. The key is actually both visualization and interactivity; it really redefines how you present an idea. I really liked it, and you should check it out if you haven't.
5. Jake Archibald - In the Loop (https://www.youtube.com/watch?v=cCOL7MC4Pl0)
This last one is a bit different; a video instead (because I'm running out of websites, and also because it's super cool). I was lucky enough to have the privilege to watch this live on one of the conferences. Jake Archibald was presenting the concept of event loop, something that I often get confused with and made me realized that abusing setTimeout was never a good idea to begin with. He explained in such a way that I believe someone who just got into frontend development can understand.
To add to that, he is one entertaining speaker on the stage; he knows how to get the audience going, sending out jokes left and right. I can learn a lot from him both about event loop itself and public speaking. Not sure if the person is on dev.to, but shout out to him.
P.S.: My second favorite video is from David Neal (@reverentgeek ): https://www.youtube.com/watch?v=-I8QHkZreyo. His drawings in the presentation is on point. You should check this one out too.
What's your favorite extraordinary Javascript resources? Or maybe you've checked some of these ones out already? Let me know in the comments below. Thank you for reading!
Cover image by JOSHUA COLEMAN on Unsplash.
Top comments (6)
Thanks for the links! Now I know what content I can fill my evening with 👀
I had the same feeling when I first discovered ObservableHQ. Amazing, fast, handy interactive notebooks. It was fun to create animation for BubbleSort visualization
Dude, sorting algorithm visualization is one of my favorites! That is one good looking article. Well done. And you're welcome for the links, if you have some to share as well, shoot it out. Thank you.
Nice!
I was going to list stuff but I wrote articles on good JS resources... Here it is:
dev.to/jacobmgevans/javascript-res...
Some more Videos and stuff: dev.to/jacobmgevans/more-podcasts-...
That is a good writeup. I used to watch fun fun functions because a friend shared it to me. He really has a lot of good videos and most of them are on point. Great stuff.