I wrote a ReactJS App Called BIDI

Years ago I created a simple web application called Before I Die I... which was a public facing bucket list of things to do before you die.

Given that it was public facing and not much personalization, I took the site down to focus on other things.

Before I Die I - 2008

Years later, actually, 8 years later, I launched the site again. This time writing it with personalization in mind.

Before I Die I - 2016

The site is extremely simple. Since the "bucket lists" are private, every user must have a registered account to use it. In this case, I've decided that Twitter is the simplest method of authenticating a user with the least amount of data stored. In this case, all I am capturing is a session ID. No other personal information is being captured or stored.

Tech Stack

I decided to build the app in ReactJS. It needed to make use of "State" so I used Redux. For the database, storage, authentication and hosting I am using Firebase. This provides the app with with several options for it's future growth. Additionally, the app is running in real-time. In the future I will create a React-Native Mobile app to allow users to create and manage their lists on the go.

Check it out

Please go check out the project at https://beforeidiei.com and create your bucket lists today!

Years ago I created a simple web application called Before I Die I... which was a public facing bucket list of things to do before you die. Given that it was public facing and not much personalization, I took the site down to focus on other things. Before I Die…

Read More

Forbes.com 15000+ Javascript Errors on a Single Page

Today, while browsing the web, I landed on an article that raised an eyebrow, actually both eyebrows. Being a developer, I generally aim for achieving the highest performance possible on both the front end and the back end of, in this case, a web application.

Currently, the company I work for doesn't have a large engineering team, in fact, this is the smallest engineering team I've ever worked with, it's only me and a non-coding Product Manager. My colleague and I are responsible for three web properties in our network. This of course can be managed with a small team, provided that the platform(s) are similar in architecture and that the business and all stakeholders allow our team to work in iterations or weekly sprints. Software development is incredibly difficult without proper process. We've been pretty good at adhering this process across the company.

The properties we work on directly reach approximately four million visits each month. Of course, this is nothing compared to the amount of traffic that Forbes receives. With that being said, I find it difficult to swallow that companies like Conde Nast, Forbes, Vox, etc have so many issues with their sites from performance, usability, and overall quality assurance. Perhaps there are too many moving parts, but after seeing today's discovery, it's mind blowing how this happens in a production environment.

Forbes.com outputting over 15000+ JS errors:

As you can see from the video above, the errors are spinning out of control and they're incrementing by ~100 every second. Now, I haven't looked into the cost of this issue but regardless of what is happening, this isn't a pleasurable experience for me, the user.

After a quick comparison of major properties such as Google, Amazon, Yahoo, etc I found that none of them had a single JS error. Yahoo did have a few console warnings, but again, no red errors on any of these properties.

Perhaps the root cause of the issue I discovered this morning lies in the hands of publishers and advertisers. They're constantly making the attempt at tracking a user's behavior. If that's the case, you'd think that the company I work for would have a 15000+ JS errors on the site since we're often all running the same advertisements at any given time.

Wait, I just checked our biggest property and noticed that we don't have a single JS error or warning in the console. We're running ads, we're using DFP, we're allowing 3rd party ads to run.

This post isn't intended to bad-mouth Forbes or their respected team of developers. It's merely a post to help me and other developers better understand why these types of errors appear in production environments and hopefully help us understand the cost of allowing this to continue.

Today, while browsing the web, I landed on an article that raised an eyebrow, actually both eyebrows. Being a developer, I generally aim for achieving the highest performance possible on both the front end and the back end of, in this case, a web application. Currently, the company I work…

Read More

Heroku Cheat Sheet

Heroku Cheat Sheet

apps

  • heroku apps:create <name> --region <us|eu>
  • heroku apps:info
  • heroku apps:open
  • heroku apps:rename <newname>

logs

  • heroku logs
  • heroku logs --tail

releases

  • heroku releases
  • heroku releases:info <vNN>
  • heroku rollback <vNN>

ps

  • heroku ps
  • heroku ps:scale web=1

run

  • heroku run bash
  • heroku run node

config

  • heroku config
  • heroku config --shell
  • heroku config --json
  • heroku config:set <KEY=val>
  • heroku config:unset <KEY>

domains

  • heroku domains:add <example.com>
  • heroku domains:remove <example.com>
  • heroku domains:clear

addons

  • heroku addons
  • heroku addons:create <name>
  • heroku addons:destroy <name>
  • heroku addons:open <name>

Another tip: If you want to keep your apps running on free dyno's, try using this http://kaffeine.herokuapp.com

Heroku Cheat Sheet apps heroku apps:create <name> --region <us|eu> heroku apps:info heroku apps:open heroku apps:rename <newname> logs heroku logs heroku logs --tail releases heroku releases heroku releases:info <vNN> heroku rollback <vNN> ps heroku ps…

Read More

Data Grave

I'm currently listening to Data Grave by Sleepy Eyes Of Death on repeat as I code and you should give them a try as well.

Stay in the zone & happy coding!

I'm currently listening to Data Grave by Sleepy Eyes Of Death on repeat as I code and you should give them a try as well. Stay in the zone & happy coding!…

Read More

A good programmer is a lazy programmer...

They say "A good programmer is a lazy programmer..." - That may be true, however I would like to turn the negative into a positive and change the phrase to "A good programmer is an efficient programmer..."

I love patterns. I see them all the time. Throughout music, throughout code, throughout life in general. They're litterally everywhere and I am constantly on the lookout for them. Today I found myself repeating the same task/pattern over and over again and I was curious to see how much time it was actually taking up throughout my day.

Problem:

So the task at hand was to deploy 17 repositories to heroku at the same time and verify that they are deployed and running by simply viewing them in a browser. Pretty simple, right? Yes, simple is NOT the issue at hand, time is. Time is everything when it comes to getting work done, so be sure to use it wisely, as I'm pretty sure you will not get any of it back...

Solution:

Write a simple Shell script that will do the following:

Navigate to 17 local repositories

$ cd ~/path/of/my/local/repositories

Deploy each property to heroku / github / some cloud based git service (in my case, heroku)

$ git push heroku master

Then confirm the site is running and deployed by opening it physically in Google Chrome like so

$ open -a Google\ Chrome http://nameofmyawesomedomain.com

And finally, (optionally) print out some console confirmation that the script completed

$ echo "Deploy complete"

My Script

(Most likley this will not help you, but have a look anyway...)

#!/bin/bash

echo "Deploying admityouhaveaproblem..."  
cd ~/Heroku/admityouhaveaproblem.github.io && git push heroku master  
open -a Google\ Chrome http://admityouhaveaproblem.com  
echo "Deploy complete"

echo "Deploying ColorMyMusic..."  
cd ~/Heroku/ColorMyMusic.github.io && git push heroku master  
open -a Google\ Chrome http://colormymusic.com  
echo "Deploy complete"

echo "Deploying beforeidiei..."  
cd ~/Heroku/beforeidiei.github.io && git push heroku master  
open -a Google\ Chrome http://beforeidiei.com  
echo "Deploy complete"

echo "Deploying convoclothing..."  
cd ~/Heroku/convoclothing.github.io && git push heroku master  
open -a Google\ Chrome http://convoclothing.com  
echo "Deploy complete"

echo "Deploying getanintern..."  
cd ~/Heroku/getanintern.github.io && git push heroku master  
open -a Google\ Chrome http://getanintern.com  
echo "Deploy complete"

echo "Deploying getgearly..."  
cd ~/Heroku/getgearly.github.io && git push heroku master  
open -a Google\ Chrome http://getgearly.com  
echo "Deploy complete"

echo "Deploying hissio..."  
cd ~/Heroku/hissio.github.io && git push heroku master  
open -a Google\ Chrome http://hiss.io  
echo "Deploy complete"

echo "Deploying jogbuy..."  
cd ~/Heroku/jogbuy.github.io && git push heroku master  
open -a Google\ Chrome http://jogbuy.com  
echo "Deploy complete"

echo "Deploying kissvote..."  
cd ~/Heroku/kissvote.github.io && git push heroku master  
open -a Google\ Chrome http://kissvote.com  
echo "Deploy complete"

echo "Deploying kywrd..."  
cd ~/Heroku/kywrd && git push production master  
open -a Google\ Chrome http://kywrd.com  
echo "Deploy complete"

echo "Deploying latched..."  
cd ~/Heroku/latched.github.io && git push heroku master  
open -a Google\ Chrome http://getlatched.com  
echo "Deploy complete"

echo "Deploying madstory..."  
cd ~/Heroku/madstory.github.io && git push heroku master  
open -a Google\ Chrome http://madstory.com  
echo "Deploy complete"

echo "Deploying meetsme..."  
cd ~/Heroku/meetsme.github.io && git push heroku master  
open -a Google\ Chrome http://meetsme.com  
echo "Deploy complete"

echo "Deploying neighborhoodly..."  
cd ~/Heroku/neighborhoodly.github.io && git push heroku master  
open -a Google\ Chrome http://neighborhood.ly  
echo "Deploy complete"

echo "Deploying picksomeone..."  
cd ~/Heroku/picksomeone.github.io && git push heroku master  
open -a Google\ Chrome http://picksomeone.com  
echo "Deploy complete"

echo "Deploying rehearseio..."  
cd ~/Heroku/rehearseio.github.io && git push heroku master  
open -a Google\ Chrome http://rehearse.io  
echo "Deploy complete"

echo "Deploying youmeyoume..."  
cd ~/Heroku/youmeyoume.github.io && git push heroku master  
open -a Google\ Chrome http://youmeyoume.com  
echo "Deploy complete"  

Save the above as deploy_script.sh and then set the permissions to be executable:

$ chmod +x ./deploy_script.sh

Next run the script:

$ ./deploy_script.sh

Conclusion

Now, before writing this simple Shell script, this process was taking up about an hour of my time each and every day (I'm doing the 365 Days of Open Source Contributions). Clearly this was not something that I enjoyed, nor was it even remotely sustainable.

By writing a script, I can now deploy code in less than 30 seconds.

Video Proof

Save yourself some time and write shell scripts locally, or possibly consider using Alfred Mac App.

Happy coding!

They say "A good programmer is a lazy programmer..." - That may be true, however I would like to turn the negative into a positive and change the phrase to "A good programmer is an efficient programmer..." I love patterns. I see them all the time. Throughout music, throughout code,…

Read More