<canvas> mouse trail
I came across an interesting interaction that reminded me of the older web the other day. As a user moved their mouse cursor around, there would be a trail of _something_ that followed it. I was intrigued and wanted to see how/what it worked, so I opened up the dev console for the website
requestAnimationFrame for smooth animations
You can use `requestAnimationFrame` for animations as an alternative to `setTimeout` or `setInterval`. Instead of manually calling a function to draw a frame every `x` milliseconds (`setTimeout` or `setInterval`), `requestAnimationFrame` gets called before its next repaint which could potentially vary in time between calls.
i++ vs ++i
This one always trips me up. If the `++` increment is _after_ the operand, then it's called a **post increment** (`i++`). If the `++` is _before_ the operand, then it's called a **pre increment** (`++i`).
Jekyll to Next.js
I decided that my personal website needed some attention and wanted it to be a bit more reflective of who I am in 2021. I no longer work with rails or angularjs on a daily basis. For the past couple of years, I have been
call and apply
There are multiple ways of defining methods in Ruby. The most popular is by using a block, via `def` and `end`. One cool thing about Ruby is its **metaprogramming** (being able to write code that writes code) capabilities. As an example, take a look at this `Baby` class definition. ### A Baby example
The `box-sizing` property is used to tell the browser how to calculate the width and height of an element. By default, this is set to `content-box`, which may cause some unexpected behavior for someone new to CSS. `content-box` tells the browser:
Contrary to popular belief, a closure is **not** a function. It is a **combination** of an inner function and its reference to its lexical environment (scope). They allow access to an outer function from an inner function. ### What are inner/outer functions?
Using $apply() and $digest()
Understanding Angular's `$apply` and `$digest` methods require a bit of background on how the browser renders the DOM. The browser has an event loop that will tell it how to display a page. The browser's event loop initiates when any of the three events occur: