</>
Andy Sciro

AndySciro

— Notes on Javascript & the web

Having fun with Brownian motion

Having fun with Brownian motion

When I was a kid I received a basic hobby microscope as a birthday present. I think I spent a whole summer where I would look at anything I could get my hands on. Pond water? Sure let’s check it out. A splinter? Yes. How about sand? Yes I did that too, and while it sounds boring sand is actually pretty interesting under the microscope.

Watch: A Grain of Sand - By Dr. Gary Greenberg - Sandgrains.com

With that said the movement of pond water really left an impression on me. Everything was kinda moving around, alive, a whole world that I never knew was so active (especially because I thought of ponds as stinky and stagnant). It turns out what I was so intrigued with as a child was something called Brownian motion. Here’s a vid about it:

Watch: Random Force & Brownian Motion - Sixty Symbols

A bit more about it (taken from Wikipedia). This motion is named after the botanist Robert Brown, who first described the phenomenon in 1827, while looking through a microscope at pollen of the plant Clarkia pulchella immersed in water.

A quick and dirty recreation of Browian movement in Javascript

Long story short I had some fun playing with the incredible PixiJs and trying to recreate Brownian motion. I consider this a “bar napkin doodle” but the effect is pretty convincing.

Check out the live demo on CodePen: Brownian motion (PixiJS) by Andy Sciro (@spssciro)

The key take away here is just randomizing the x and y values for each tick. The line to really watch is simply this:

X = (Math.random() > 0.5 ? 1 : -1) * Math.random() * amp;

And voila, we get the right wiggle!

Azure data studio is pretty awesome

Azure data studio is pretty awesome

“Azure data studio has solved my MSSQL problems on my mac period. I can work alongside my pc counterparts without swapping to VM”

Azure Data Studio screenshot

A coworker recommended I try it after I was bouncing between DataGrip and DBeaver. I’m glad I did. Azure Data Studio is a cross-platform database tool for data professionals using on-premises and cloud data platforms on Windows, macOS, and Linux. I’m assuming it’s also another electron app just like VSCode, and it just feels right. It also comes with the amazing plugin/extension browser and as it matures I’m sure we’ll see it used by more and more developers.

So what are you waiting for? Give it a try, It’s multiplatform and free!

Download Azure Data Studio

Why are some javascript functions Capitalized?

Why are some javascript functions Capitalized?

“Wait… normally we lowercase almost all our declarations/LHS in javascript? Why are some functions uppercase?”

Functions are uppercased to communicate to other developers the the new keyword is required. This also applies to JS classes, but remember in JS that classes are just syntatic sugar for constructor functions that operate in the same way.

This is called “the Constructor Invocation Pattern.” Here’s a little more about it in the MDN – New Operator. Also “Javascript: The Good Parts” has a really great writeup about it. Invocation – JavaScript: The Good Parts [Book]

Photo by Markus Spiske on Unsplash

Great visual for NULL vs UNDEFINED in javascript

Great visual for NULL vs UNDEFINED in javascript

“Emptiness” in javascript sometimes makes me scratch my head. Especially when checking for emptiness. Think I’m crazy? Ask your fellow developers to explain the difference between null + undefined.

What does the MDN say about NULL?

Null: The value null represents the intentional absence of any object value. It is one of JavaScript’s primitive values and is treated as falsy for boolean operations.

typeof null          // "object" (not "null" for legacy reasons)
typeof undefined     // "undefined"
null === undefined   // false
null  == undefined   // true
null === null        // true
null == null         // true
!null                // true
isNaN(1 + null)      // false
isNaN(1 + undefined) // true

What does the MDN say about Undefined?

Undefined: The global undefined property represents the primitive value undefined. It is one of JavaScript’s primitive types. A variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned.

How about a silly… but really easy to understand image. I found this on stack overflow.

Null vs Undefined

Photo by Izz R on Unsplash

The video that helped me to understand the Javascript event loop

The video that helped me to understand the Javascript event loop

Do you have 15 mins for this video today? I can almost guarantee you that this short, well done video will be worth your time. I have watched and read a lot on the subject (MDN here) but this was just laid out so beautiful and visually.

Yeh its from 2014 but that doesn’t matter – the principles and ideas remain!

Watch: What the heck is the event loop anyway? | Philip Roberts | JSConf EU

He’s also very funny 🙂 Check out the transcript here.