^{Daniel Ricciardo doesn’t have anything to do with this article.}

Tl;dr: I made my personal website almost twice as fast by porting it from Nuxt to Astro. I made it so that zero JavaScript is sent to the browser^[1] .

Some background

I haven’t touched my website in 3 years according to the git log. I didn’t really want to change it, but I did want to play with some new technologies. The webdev landscape is constantly changing, and there are some cool new things to discuss.

Let’s travel to an island.

^{Album cover for Sainté’s album called Vacation.}

Three years ago, server-side rendering (SSR) was all the hotness. That’s partially why I built my personal website in Nuxt (which is like Next.js but for Vue). I wanted to learn Vue so I gave Nuxt a shot.

There are clearly advantages to SSR. But over the last year or so folks have realized that there are also downsides. The most major...

I got into web-development in 2008. Those were certainly simpler times. All you had to do was write some basic HTML / Javascript / CSS and then use your favorite FTP client to upload the files to your hosting company. Times have changed and web-development has become a rapidly evolving ecosystem.

In this article we will start with a TypeScript file and end up with some complied Javascript. It seems like a simple task but there are some really interesting things that need to happen in order for us to achieve our goal.

The goal of this article is to make you less intimidated by tools such as TypeScript, Webpack, and Babel. You might’ve used them in the past, but I’ll try to add some clarity about what is really going on step-by-step. Let’s begin…

Set up your folder

Let’s first set up a folder where we’ll be doing our experimentation. Use the following shell commands.

mkdir

The following is a tutorial on how to easily integrate Contentful into a Ruby on Rails application. The following blog post assumes that you have created a Content Model inside of Contentful and added some pieces of content.

Installation

Include the following line in your Gemfile and then execute bundle install:

gem 'contentful'

Head to the API Keys section under setting and copy both your Space ID and Content Delivery API - access token. We will set these as environment variables using the names CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN respectively.

The helper function

Within my lib folder I have created a ContentfulHelper which will essentially act as the bridge that talks to the Contentful service.

require 'contentful'

module ContentfulHelper

  @contentful ||= Contentful::Client.new(
    access_token: ENV['CONTENTFUL_ACCESS_TOKEN'],
    space:

Recently, I wanted to track the amount of time that Sidekiq jobs were taking to execute on a production Rails environment. I wanted an easy way to be able to track the arguments for the Sidekiq job, the user that initiated the job, and of course the duration that the job took to complete.

Since this is a Rails application, the code provided is Ruby but you can look up the put_data method on the AWS docs for your respective programming language.

Generate the user and key

We need to head over to the AWS dashboard and create a new IAM policy with the following JSON (provided in this blog post):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "cloudwatch:PutMetricData"
            ],
            "Resource": "*"
        }
    ]
}

I called this policy put-custom-metric.

Recently, a popular React calendar library (react-big-calendar) went through an upgrade which introduced breaking changes and made many of the online tutorials and documentation irrelevant.

The breaking change comes from the fact that BigCalendar is no longer an item being exported from the API (link to GitHub change). It took me some time of digging around to realize why I was getting major “undefined” errors while trying to get the most basic version of the calendar working. As of writing this, even the demo website has outdated code examples. I hope this code saves you some time.

The code:

This calendar demo uses react-big-calendar version 0.22.0 and moment.js version 2.24.0.

Here is a link to a code sandbox with a working demo.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import

Recently on my team, I was tasked with figuring out how to dynamically render React components from strings that represented the component names. For instance, given const str = "Hello"; I would have to render the <Hello/> component.

The reason we needed to do this was so that we could retrieve stored component names from a database and render them on the front-end. So, can it be done?

Yes it can be done!

If you’re simply here to find the coded up solution, then I got you covered. You can find the code on this sandbox.

Explanation:

There needs to be a mapping between strings and components. Though it looks a little strange, basically the “Hello” string is being mapped to the <Hello/> component.

import Hello from './Hello';

const components = {
      Hello: Hello
}

The next step involves creating a React element using the above components mapping. After we have created this...

Without a doubt, I spend too much time on Twitter. I don’t have any formal statistics to prove this claim, but trust me, the numbers aren’t needed.

It’s currently 4:38am and I thought it would be interesting to document what it feels like to log off Twitter, and delete the app. I’m an hour into this experiment and I’m really hoping that being away from Twitter allows me to gain the ability to levitate (or at the very least – read minds).

Day 0

They say it takes 21 days to build a habit, so here we are starting at day 0. I logged off Twitter on my browser, and deleted the auto-fill password to my account. The Twitter app on my phone briefly wiggled, before I tapped the “X” on the corner of the app icon, making the app disappear into a void.

An hour in, so far so good. I’m using coach.me to track the number of days I can stay away from the social network. It’s just an easy way to...

The problem

Recently I joined a team with with a large React front-end. I was tasked with figuring out how to add analytics to a ton of buttons and links throughout the application. I wanted an easy way to add analytics without having to write onClick event handlers which would fire events from a library like react-ga.

For the sake of this demo, I’ll be talking about how I added Google Analytics for user-driven event tracking, but you can bring whichever fancy analytics library satisfies you.

The solution:

The easiest solution I thought of was to create a new <A> React component which would substitute html <a> links. It would do so by intercepting the <a> link’s onClick() event, running the analytics library code, and then continuing to the the child’s onClick() event if it existed. Clicked links open normally if the href property is present, and all the regular properties (such...

Here are the steps to get your local (mac) environment setup with Laravel and Postgres.

Bash commands:

laravel new my-project
cd my-project

Make the Postgres database:

While you have postgres running locally, use the createdb command line tool to create a new database.
createdb my-project

.env File:

Edit the .env file in your Laravel project.

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=my-project
DB_USERNAME=<your-mac-username>
DB_PASSWORD=password

Migration setup:

php artisan migrate:install

That’s it! You’re rocking and rollin’ with a local Laravel & Postgres setup!