Thoughts & Experiments.

Random technical endeavors.

Read this first

Moving my blog from Svbtle to Substack

privacy-error.png

I was an early user on Svbtle back when I saw a “Show HN” thread about it on HackerNews.

I love the minimal design. I love how it works really well on mobile. I dig the draft preview URLs. I think the composer makes it super easy to write without distractions. I’ve had no complaints about it for the past 4 years. It does what every blogging platform should do, without any-frills.

The main reason I’m moving on is: SSL. Chrome will show a privacy error when users visit my custom blog domain because Svbtle doesn’t use custom domain SSL certs. Custom domain certs have been a private beta feature for more than a year now. I’ve written to the Svbtle team asking them to give me access, but have gotten no response from them. On Chrome (and any browser using a “Force HTTPS” extension) this makes my blog totally unusable. Having custom domain certs for paying customers should have been...

Continue reading →


Your javascript webapps don’t actually need javascript.

blazing-fast.jpg

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.

ab67616d0000b2734bd6b3b9ca4e1f4adb351d45.jpg

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...

Continue reading →


Demystifying Typescript + Webpack + Babel

typescript-webpack-babel.png

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
...

Continue reading →


Contentful integration for Rails

contentful-rails.jpg

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:
...

Continue reading →


Easily log custom metrics to AWS CloudWatch

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.

...

Continue reading →


Getting react-big-calendar to work.

react-big-calendar.png

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
...

Continue reading →


Dynamically render React components

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...

Continue reading →


Detox from Twitter.

remoteworking_compressed.png

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...

Continue reading →


Add analytics on links in React.

react-analytics.jpg

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...

Continue reading →


Laravel + Postgres local setup.

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!

View →