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 😂

Slides

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:

Highcharts (paid)
chart.js (open-source)

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:

Greensock is the tool of the day. It animates SVG elements. Inkscape is one of many places to get SVGs. Here’s and article with lots more information about SVGs.
Unlike the slides, do gsap.to() instead of TweenLite.to(), etc.
Greensock has a number of eases you can make use of. There are also physics engine libraries for more advanced stuff. You can also play around with DrawSVG plugin values
You can also morph shapes like in this example
Here is a basic Greensock animation. Here’s a more advanced one
You can chain animations in a timeline. Here’s a basic example, and here are some more advanced ones: abstract shape, Shel Silverstein poem, tutorial demo
You can animate text
When you put it all together you can do some really cool things
Here’s a cheat sheet for the whole Greensock library
WebGL is a way to add 3D graphics using the canvas API. Here’s a really detailed intro slide deck about doing this with three.js.
Zdog is a tool to create & animate 3D graphics.
Here’s some info about masking vs. clipping, as well as a clip-path maker tool. And here’s a masking demo

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

Slides

Drawing things

Web Sockets Intro

Other Stuff

JavaScript Animation

Tags icon Stacked price tag looking things Tags:

Tags: