Tracking down re-renders using unique object identifiers in React.

I’ve been using this bit of code a bunch recently to help track down unnecessary re-renders in a React component.

(source)

If you’re using PureRenderMixin or a custom shouldComponentUpdate method changes to objects stored in state could cause a re-render. Using this you can log and keep track of these changes. For example I put this in the componentWillReceiveProps method:

And this is the output:

As you can see the ID gets incremented each time a new object is created making it clear that a change was made. This has helped me multiple times so I wanted to share!

Ngrok Rock! A WordPress based API. 

While attending a hackathon at Google’s San Francisco office, Chrome’s product manager introduced me to a tool called ngrok. He was using it to demo code running on his laptop from his phone.

ngrok instantly gives you a domain for anything running on your local machine. It’s amazing, and I instantly fell in love.

Professional I’ve used ngrok to give stakeholders access to code running on my local machine. You can easily share a link then they’re looking at the same thing you are.

Personally I’ve been using it as an “API” for my Raspberry PI. Instead of developing a real API by making the PI available outside of my home network using port forwarding, I decided to create a web interface and make it available remotely using ngrok. This required very little work and it worked out great. You just visit the domain ngrok gives you then you’re tunneled to a web server running on your PI!

There’s one downside to this approach though. ngrok domains are randomly generated so you either have to keep ngrok open permanently, manually type these random domains, or send yourself an email so you can click the link. For my project I used a third-party ngrok Node.js module, so every time I start the app it automatically creates an ngrok tunnel. This is great, but it also means that every time I close the app it closes the tunnel. I found myself checking the app every morning before I left to make sure I had the correct ngrok domain. This was a problem for me, mostly because I’m lazy.

Like everything I make, I made this because I had a need for it.

So I created Ngrok Rock! Ngrok Rock is a REST API built for storing ngrok domains. Using the ngrokrock command line client, ngrok domains will automatically be uploaded to ngrokrock.com. Then you can go to the website to see a list of active tunnels.

Check it out and let me know what you think! The site is available here:

https://ngrokrock.com

Built using the WordPress REST API and Docker. The command line client can be found here:

https://www.npmjs.com/package/ngrokrock

Built using Node.js, you can find the source for it on GitHub.

Zerohero – Cross platform zeroconf microservice.

I’ve created many applications where a user would have to enter the IP address of the server. For example, an iOS Netflix remote. You would run the server on your computer, open the iOS app, enter the server’s IP address, then you could control Netflix!

The problem is that most people don’t know what an IP address is, and they don’t want to know. So I tested many zeroconf solutions including UDP broadcasting and Bonjour. I needed a solution that would work for client side JavaScript though. Anything can make an HTTP call, so zerohero was born.

I’ve used a similar solution for years now, and I finally decided to rewrite it and put it online.

zerohero uses your external hostname to store and lookup servers. Servers hit the add endpoint, and clients hit list. It’s very easy to implement and you can get up and running with just a few lines a code. The goal here is to help clients find potential servers on the local network, after that it’s up to your application to handle the communication.

This is still very new, but I’ve been using it for a while now without issue. I personally host my server on Heroku, but any host with Node.js support should work. Check it out!

https://github.com/octalmage/zerohero

minum

I started work on my own web browser. This is something I’ve avoided for as long as possible, because there’s too many, but I guess it’s time.

I’ve always loved the way browsers are represented in portfolios. Their job is to showcase the website and stay out of the way. I wanted to recreate that with minum.

I’m very excited about this project. I’m creating something I want to use, which is important to me, but I’m also reimagining something people use everyday.

https://github.com/octalmage/minum

Google Hacks 2.0

Google Hacks was one of the first apps I created. I was 16 and experimenting with different cross platform solutions. I found RealBASIC and was amazed by the simplicity, it was the only tool that could compile for all platforms from one OS. I had learned how to get music using Google, so I created Google Hacks as a test. I uploaded it to Google Code, and 2 weeks later it had half a million downloads.

That was 2007, today the app has over 5 million downloads, and it’s still getting thousands of downloads every week. To be honest this has always upset me, I spent 10 minutes making this app and it was the most popular. I tried to direct this traffic to my other projects but it never worked. People just wanted Google Hacks.

Google Hacks hasn’t changed much since the original version, and I haven’t touched it in years. With Google Code hosting closing down I had to migrate it to GitHub and I’m using this as motivation to make a new version.

Google Hacks 2.0!

I’ve already started rewriting the app and I’m excited. Check it out!

https://github.com/octalmage/googlehacks

Node.js Desktop Automation.

Around Christmas I started working on a new project, RobotJS. RobotJS is a native Node.js module and I’m extremely excited about it.

I’m a huge fan of AutoHotkey and I’ve used it for a very long time. AutoHotkey is great for automation and it can do a bunch of things that are very diffucult in other languages. For example, it’s imagesearch and pixel related functions are hard to reproduce on Mac, especially in scripting languages. These functions are great for automating apps that can’t be automated like Netflix.

The problem is that AutoHotkey is Windows only. This has never been a big deal since I’ve always used Windows at work, but for the past few years I’ve been using Mac exclusively.

I like AutoHotkey, but I like Node.js more. By developing RobotJS I get an AutoHotkey replacement on Mac (finally!), and I get to use my favorite language.

TLDR: There’s nothing like AutoHotkey on Mac, so I’m making it.

People Trying On Glass

Everyday people ask about my Google Glass, and usually, if time permits, I’ll let them try it on. I always have them take a picture, so I ended up with a bunch of photos of me from the Glass wearers perspective.

See more here: http://peopletryingonglass.tumblr.com

iOS Game Hacking.

I’ve been jailbreaking iPhones since the first iPhone, before we had an App Store. Back then it was the only way to install apps. I’ve always wanted to learn how to create tweaks, modify stock apps, and hack iOS games. Well this weekend I learned how to do it and I’ve created a few hacks!

Recently I’ve been playing this iOS game, Battle Camp, and it’s ridiculously fun.  It involves some match-3 action for battles and I wanted a way to practice combos. So I made this:

With the hack enabled, battles won’t end.

To install it add this repository in Cydia:

http://repo.stallin.gs

Then install “Battle Camp Practice”.

photo

You can also find the source for this on GitHub.