This is a guide for those setting up Ruby environments on a Mac, either for the first time or just again on a new machine.

First make sure you’ve dealt with your priors, for example getting your terminal in shape. Here’s a checklist I wrote last week for that. We’ll immediately be using those tools, so go through that first.

Next you will need some common libraries. If you’re a developer, you’d almost certainly need these anyway, regardless of Ruby. Run the following commands in your terminal:

brew install gmp
brew install gnupg

These are using our new packet manager…


Over the past decade, notification badges have become so ubiquitous in web apps that I suspect they’re now deeply embedded in our psyches. The little red notification icon has in a short period used its Pavlovian power to tunnel into and damage our brain chemistry. Cult leaders, torturers and Jungian mystics should consider incorporating it into their semiotic toolbox.

a message notification on new facebook. or by the time you’re reading this, old facebook.

Node packages sometimes need to be updated to address security issues. If you’re tracking your project on GitHub, you might get notices about this from their dependabot utility.

The best way to update a number of packages to their latest version is by using npm-check-updates.

When you run “npm update”, it accomplishes this task, but it doesn’t change package.json, meaning that your project is lying to itself about the package versions it’s using. This could very easily lead to confusion later on.

npm-check-updates is a package, so you install it with

npm install -g npm-check-updates

Once you’ve done that, you…


These are some CSS effects I’ve made. Maybe they can inspire you.

The quality of these gifs is very low. I’ll look into how that can be improved.

Tab focus

grainy

This has two elements — a background block, which grows from the bottom on mouseover and recedes when the mouse leaves, and an underline, which grows from the center on mouseover and shrinks when the mouse leaves, but also stays when the tab is active.

Icon jiggle

look at those artifacts

I don’t think enough icons jiggle on mouseover. They all should.

Login dropdown

Login pages are for handling problems; otherwise, no one wants…


TypeScript and React are two of the most industry-relevant skills for junior developers, but I mostly see people choosing one or the other. The fact is, though, that they work perfectly well together, and take little configuration.

What is React?

The past decade has given us a number of important JavaScript libraries that shape the web today. React is one developed and maintained by Facebook, and it’s very widely used.

React exists to rationally organize a UI; it does this via nested and dynamically-rendered components which pass information among themselves. …


Ruby is updated once a year, on Christmas. Two weeks ago, it got one of its most significant updates, going from version 2.7.2 to a big shiny 3.

What’s new in Ruby 3?

Here’s the official release announcement with details. I will attempt to summarize some new features.

• It’s faster

Increasing speed was one of the key goals behind 3.0., and by all accounts it went well. In fact, the stated goal was to make it “three times” faster than 2.0. A couple of caveats: 2.0 was quite a while ago, and there were a lot of performance gains between there and 2.7.2. And generalizing a language’s…


Having recently spun myself in circles looking at these options, I thought I’d spin up a guide on Ruby’s three timekeeping classes.

What are Date, Time, and DateTime?

All three are Ruby classes used for working with time. Time is built-in to Ruby; Date and DateTime come from the standard library date.

Time.now      
#=> 2020-12-31 06:23:24 +0000
require 'date'Date.today
#=> #<Date: 2020-12-31 ((2459215j,0s,0n),+0s,2299161j)>
DateTime.now
#=> #<DateTime: 2020-12-31T06:23:24+00:00
((2459215j,23004s,705068155n),+0s,2299161j)>

They can also be created as specific other times. For example, for Time:

Time.new(2030)                             
#=> 2030-01-01 00:00:00 +0000
Time.new(2030, 6, 6, 6, 4, 20, "+00:00")
#=> 2030-06-06 06:04:20 +0000
Time.at(4500000000)
#=> 2112-08-07 08:00:00 +0000

And they each…


(Medium styles two minus signs as an em dash, like this: — . But we’re talking about two minus signs.)

Incrementing a variable is one of the most common things you do as a programmer. The simplest way is to take itself and add 1:

variable = variable + 1 // Increment
variable = variable - 1 // Decrement

The variable takes itself and adds one, and assigns that new value to itself. Pretty simple. You can write those lines in basically any language.

Most modern languages will also allow this more concise version:

variable += 1
variable -= 1


A couple of weeks ago I wrote a post about using your bash_profile to create custom git commands to improve your workflow. Here are some more aliases I’ve found useful.

These are written for a Mac environment, but the same functionality should be possible in Windows and Linux.

Improved ls

ls is the command that lists all files at the current location. Sometimes it can be useful to display extra information, or sort the list. For example, if you want to display the size of each item, you can use

du -sh *

du stands for “disk usage”; it’s already an improved…


If you’re trying to make a game or interactive webapp in Javascript, you’re likely to find yourself wanting to implement keyboard controls.

Event Listeners

To do this, we’re going to use keyboard event listeners. These are keydown (detects when a key is pressed) and keyup (detects when a key is released).

document.addEventListener('keydown', sayHi);

function sayHi(e) {
console.log("Hello!");
}

The above code will print “Hello!” whenever any key is pressed.

Specific Keys

We can access the specific key pressed using the event’s built-in methods. .key will return the key that was pressed:

document.addEventListener('keydown', recordKey);

function recordKey(e) {
console.log("You pressed ${e.key}");
}

Some other useful methods…

Mavi Toktamis-Paker

Weakly Pseudonymous Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store