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!

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

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

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

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

Today, coming primarily from a MySQL background, I realized that choosing the right DynamoDB data structure requires some thinking. Here are some things I wish had been clearer before I started:

The situation:

• In an Express.js Application, I am trying to access all the records from DynamoDB table.
• I am following the Node.js documentation for Query’s.
• Keep coming across a database error about keys. Unable to access any data.

For the sake of this situation, let us imagine that we are creating a table in our DynamoDB database which will hold Tweets from different users.
We should be able to:

1. Loop through the Tweets of a specific user in chronological order.
2. Get a specific Tweet from a user.

^{Image from the AWS blog.}

What is the Primary Key?

A unique identifier which identifies a single record in the database. This Primary Key is the combination of the Partition Key and Sort...

Being able to launch a website for free* is really easy these days.

I prefer writing vanilla HTML / JS / CSS. But to make my life a bit easier, I think I’ll be switching over to using Cactus.

Developing your site

• Write HTML / JS / CSS in some folder called website
• cd into that website folder and run the following command in terminal: python -m SimpleHTTPServer 8000. This will actually serve the website on http://localhost:8000. As a bonus tip, you should edit your ~/.bash_profile file and set alias pythonserver='python -m SimpleHTTPServer 8000'. This will allow you to run the pythonserver command instead of having to memorize all that python gibberish.

Launching your website

When it comes to deploying your website for the world to enjoy, you have a couple of options.

Options 1: Use github pages. This is a great option for people who are comfortable using git. Basically make...