Thoughts & Experiments.

Read this first

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 →


Deep learning AWS EC2 set up

This is an accompanying blogpost which goes along with a video I’ve made about my AWS EC2 Deep Learning setup. The setup goes through the process of installing git, tmux, htop, and security certificates on an EC2 deep learning image. The bash scripts mentioned in the video can be found on the ml-setup repo.

The commands:

sudo yum update -y
sudo yum install -y tmux htop

SSL:
mkdir ssl
cd ssl
sudo openssl req -x509 -nodes -days 365 -newkey rsa:1024 -keyout "cert.key" -out "cert.pem" -batch

Notebook security:
ipython
from IPython.lib import passwd
passwd()
Enter in the password which will be used to authenticate the Jupyter Notebook on the website. Paste this SHA string in some note-taking app, you’ll need it in a bit.
vi ~_.jupyter_jupyter_notebook_config.py
Note: The fastest way to jump to the bottom of a file in vim is :$ or <ESC>GA according to this question.
Paste in the...

Continue reading →


3 (Free) Must Have Tools For Any Developer

productivity.png

These three tools will undoubtedly supercharge your developing workflow. I’m not quite sure how I could ever live without them.

dash.png
Dash is a great tool for letting you download and browse documentations for your favorite programming languages and API’s. It is perfect for when you have to be productive with little to no wifi (since the docsets are downloaded locally). I use Dash to make the most of the AWS API, Laravel API, and sometimes even the vim cheatsheets. Tons of other docsets are available.
Download Dash

trello.png
Trello has quickly become one of the most popular productivity tools for developers. It allows you to quickly come up with tasks, and organize them in a logical manner. I normally create 3 columns “Todo”, “Doing”, and “Done”. For me, the real power of Trello was unlocked when I installed the Planyway extension. This extension adds a calendar (which can be synced with my Google...

Continue reading →


Redis won’t talk to Web Server.

redis-aws-love.png

The Problem

Thinking you’ve correctly configured everything in your shiny new cloud architecture, and having a key piece not work properly can be extremely frustrating.

For me, it was trying to get a web server (on EC2) to talk to a Redis cluster (on ElasticCache).

Trying to use redis-cli on my local machine kept getting me to this point:

Could not connect to Redis at xxx.usw2.cache.amazonaws.com:6379: Operation timed out

This is when I found out that Redis by default isn’t meant to be accessed from outside the sphere of AWS. Since I was running redis-cli from my laptop, this wasn’t going to work.

The next logical step was to SSH into my EC2 machine, and then run the redis-cli command to try and PING the Redis host. But this method also ran into the timed out error.

Since the machine on AWS couldn’t even produce a handshake with the Redis host, this is when I knew that there...

Continue reading →