<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
In JavaScript, functions are just objects. This means that you can attach functions to them, just as you can with any other object. Some defaults that come along with being a function are `.toString()`, `bind()`, `call()`, and `apply()`. We're going to tkae a closer look at two similar, but slightly different methods: `call()` and `apply()`.
define_method
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
box-sizing: border-box
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:
JavaScript Closures
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: