unicornsfartpixels is an online notebook cataloguing the always expanding web development landscape & creative side of code.

Welcome to Web Dev 101. This is where I stash my notes on the more traditional aspects of web development, tools and technologies that don't deal directly with digital graphics.

Connecting The Dots

What naively started out as a “quick project” to get the hang of Docker has since morphed into something else altogether. But the journey has been well worth it as I came out the other end with a ton of useful knowledge I didn’t realize I had been missing out on. (You don’t…

GraphQL Fragments

This post is going to walk you through how to programmatically generate a sidebar menu in a Gatsbyjs project, from collections created in a database, accessed through the Cockpit CMS. But first, some context: This post is part of a larger series about setting up a basic site…

Gatsby + Cockpit

This post is going to walk you through how to programmatically generate pages in a Gatsbyjs project, from collections created in a database, accessed through the Cockpit CMS. But first, some context: I recently dove into Docker and very quickly found myself confronted by a…

Docker (pt2)

Docker really clicked for me when I started using docker-compose , which feels like a Dockerfile that sits on top of a bunch of Dockerfiles (or rather, the images they describe…) telling them how to play nice with each other. The more technical way of saying this would be that…

Docker (pt1)

Containers are not a new idea in the programing world, but when I first encountered Docker , which essentially containerizes all the things , I have to admit I was pretty overwhelemed. It’s a universe unto itself, and there’s definitely a bit of a learning curve when it comes…

CORS

CORS stands for C ross O rigin R equest S haring - it’s a w3c standard that gives access to resources across web domains. So basically if you’ve ever made an API call, you’ve likely encountered CORS . CORS exists because of the same-origin-policy - a rule that states…

Border vs Border Box

Why is important? Because it’s what defines how the width & height of the elements you see in your browser will be calculated. It can be pretty handy then, to set it in the all-encompassing element in your styles. The Box Litterally every element you’ll deal with when…

The For Loop(s)

It’s safe to say that most of us are quite familiar with the for loop. It’s dependable, flexible, and can be used in pretty much any situation that calls for a loop. There are two other types of for loops that you can also use, which have more specific contexts of application…

i++ / ++i

Because of the for loop we’re all pretty used to seeing the shorthand which means add one to i, or increment i by one. But what about ? Turns out ranks above in the order of operation food chain, which means that executes before assignments, whereas executes once the…

.map() vs p5.js map()

The array’s integrated map method and p5’s map method are not to be confused. Maybe no one needs this reminder other than me but since I got comfortable with p5’s map() method before I really got my hands dirty with vanilla javascript’s built in Array.prototype.map() , I’ve…

The Event Loop

First things first: some context V8 is Chrome’s javascript runtime aka the thing that allows javascript to execute inside your browser. I’m sure you’ve come across Web APIs before, but just in case this is new for you here’s the general gist: a lot of the common things devs…

Routing w/Express & MongoDB

… Or that time I learned that I don’t hate databases & models… I hate naming conventions! I’m currently building a simple Morning Pages * * app, that upon login accepts a daily entry of at least 750 words, and saves each day’s entry to the database. Every time the user submits…

Functions pt.3

Initially I only set out to do a single post touching on a few of the intricacies about functions that I found helpful. But here I am three posts later with more info still! There’s just a lot going on with functions-or-do-you-mean-objects in JS - a solid understanding of which I…

Functions pt.2

Welcome to part deux of my little intro to functions. If you’re unclear on why functions are objects or what the difference between a function statement and expression is, pop on over to part one and have a quick read through. Otherwise, let’s dive into and one of my…

Functions pt.1

Let’s break down functions, shall we? Because while they may seem straight forward, there are a lot of little details about how you write them, and when and where you create and call them that can really make, or severely break your program. 1st class functions: In Javascript…

Learning To Read (Again)

I gotta say, code documentation has a pretty bad rap. To be fair, a ton of it is really ( really ) badly written, and sometimes it’s not even maintained. But to play devils advocate, I would also offer that a lot of people don’t really know how to read documentation either. I…

Quick & Easy - Data Attributes

There’s a certain intimidating freedom that exists in the code world which takes a minute to get used to. I obviously can’t speak for everyone, but it has definitely thrown me off more than once, and really simple things. Take data attributes for example. Used in markup, they…