TIL - Drawing And Web Sockets

What follows is notes from a class. Incomplete thoughts & code that probably will only make sense to me. Given enough time, even that may be a stretch! Reference at your own risk 😂


Drawing things

Started with Canvas…learned by doing the MDN Canvas Tutorial. Here’s my CodePen demo.

D3 (based on three.js) is a library which uses JS to do really robust things with drawings and data visualization, built on top of the canvas API.

There is a steep learning curve for D3 though. nvd3 is further built on top of D3…it’s commonly used D3 charts so you don’t have to reinvent the wheel.

There are some other charting libraries out there:

Web Sockets Intro

We learned about web sockets which are a two-way web protocol which listens for changes without a page refresh (unlike the HTTP protocol). A quick chat app demo shows how easy it is to set up a basic example using the socket.io npm package.

Firebase services are built on top of web sockets so that you can build apps with real-time data. To learn more about this check out the Firecasts YouTube channel (here’s the intro on Firebase with web apps)

Other Stuff

There is a thing called splunk that you can use to get application info from your servers.

JavaScript Animation

I couldn’t go to this class but here are the slides and some highlights for reference:

And finally here are some more examples of cool things you can do with these tools: