Category: Javascript


Add routing to React apps using React Router v4 – Course by @joemaddalone @eggheadio

By Mike,

React JS routing tute

In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.
Source: Add routing to React apps using React Router v4 – Course by @joemaddalone @eggheadio makes fantastic video tutorials about the latest and best web development tools. Angular JS, CSS, HTML5, TypeScript, Node.js, all the usual suspects. Most of the videos are free to watch, but a premium membership is required to unlock in it’s entirety. The latest in the series is a 40 minute lesson on React JS routing by Joe Maddalone (@joemaddalone). Check out his blog at

Picking a JavaScript Panel Framework

By Mike,

This post was originally sent as a response to Jeff Houde, the developer of wcDocker, who asked why I didn’t pick his framework.

Initially when I set out to find a framework to create web-based game development tools, I found DockSpawn and wcDocker. DockSpawn had a better first impression, which I will credit to a fairly pretty website that has code examples and documentation, as well as the framework being easier on the eyes. I also like the panel docking that closely resembles Visual Studio.

I ultimately made the decision to use wcDocker over DockSpawn because you were still actively developing (the last update to DockSpawn was in February 2014) and because I have more experience with Javascript over Dart. Also I wanted to experiment using Bower for developing a project, and integrating that into wcDocker so that I could see how Bower works from both the perspective of a package developer and a package consumer sounded like a perfect setup.

And it was a perfect setup! I got to see and fiddle with the internals of wcDocker, and help clean it up where I could. Figuring out how to “modify” another script (jQuery-contextMenu) without actually touching the source was a great lesson, albeit it one that I had to rely on my friend Danny Shumway to help solve. So good times, let’s build with wcDocker using Bower.

Then Golden Layout appeared on Hacker News. I hadn’t done anything more than combining wcDocker and React on my own project, so I was still at a point where I could switch frameworks. Both frameworks are trying to solve the same problem, but Golden Layout had examples, tutorials, documentation on top of being in active development, looking as pretty as DockSpawn, and having (somewhat) cleaner code structure for developers. I was concerned that the project wasn’t hosted anywhere but his own website, but he began hosting on Github shortly thereafter. I am still concerned that he is using a Creative Commons license on his code, as that is unexplored legal grounds. Concern aside, I chose what I thought was the best framework available at the time.

Source: programmer blog

PennApps Fall 2014: HN Special

By Mike,

PennApps X logo

Midnight. As I climb in bed to get a shortened night’s sleep, my phone vibrates. A message from Dhruv Baid, Director of Travel & Outreach for PennApps, telling me that I have “more than 3 seats” to fill with last minute attendees. I reach out to my household (Danny, Tim, Sean, Rashele) with no takers, but through Sean’s microphone in Destiny I manage to convince Colden. Colden suggests I ping Carl, who also accepts. Content with the amount of effort put forth at this late hour I go to sleep, only to be awoken at 5 am to go get on a bus.

On the bus, the three of us brainstorm ideas to hack on. My original plan before Carl and Colden signed on had been to add Firefox support to HN Special, but that was meant to be a solo project. After awhile we come up with a couple good candidates: A Kinect joystick, where the player’s body acts as an analog stick and their hands are buttons, and Guitar Hero + Kinect, which involves lining up 5 people and having them alternate between crouching and standing to play a note on the fret board.

One opening ceremony later, we speed-walk over to the hardware room and grab two Kinects. We rip into the Kinect SDK and quickly get a demo program running that overlays a skeleton onto each person in the scene. Success! Or… wait? Why did it crash there? Try putting your hand on top of me again. Yep, that did it!

It turns out even with the new Kinect, the software cannot handle more than 3 people without crashing. No more Guitar Hero modification. But what about the human joystick? A little bit of searching led to find it exists already.

Sleep deprivation effects us all.

Carl, Colden, and I went for a midnight stroll to discuss our options. We had only burned four hours of hacking, but without another project that we were passionate about building, things felt grim. What if we got started with tools for Dash? No, we should save that for later. Revisit Stats At Last (my last PennApps project)? Nah, the others don’t have the same passion I do about seeing that come to fruition. Something with a drone? Oculus Rift? Leap Motion? But all the quick projects you can build for that hardware have been done already!

Eventually Colden agrees to hack on HN Special with me. Carl decides to use the time to start learning Swift, Apple’s latest programming language, to build a food and wine pairing app for iOS.

Meager amounts of sleep and a couple massages later (they had massages on Saturday!), we arrive at the expo floor Sunday morning to show off our efforts.

Expo floor. You can see me in a purple shirt on the center right. Original:

Colden and I show off our work to a grand total of 4 people: a judge, a college freshman, a Mozilla rep, and Nick from SendGrid (better known as “the happiest person on the planet”). Plenty of passersby looked into the screen, marveling at the pixels within. After a little bit we packed up and meandered around. I quickly noticed a pattern: I only stopped to look at “fun” projects. Inevitably all those projects involved a hardware component. The most stark moment came as I waited to try out a Myo hacked to work as a mouse, and a PennApps Health Hack at the next table had zero visitors.

Hardware, especially bleeding-edge technology, has an inherent draw to it. That’s likely why we wanted to hack on a Kinect v2, and why many of the top 10 finalists utilized new hardware. Yet only one of the top 10 hacks actually had a health care application: Scolio. Most of the flashiest hacks aren’t going to be useful outside of a hackathon demo. Heck, even our Kinect projects were concieved as projects that would be fun demos rather than actually being useful to anyone.

This approach to hackathons feels wrong, or at least like we’re missing the mark. Ben Cohen, a fellow RIT hacker and PennApps attendee, phrased the issue as “hackers building tools for hackers.” We stay in our bubbles, and initiatives like PennApps Health Hacks can only convince so many people to leave the bubble. What we need is a hackathon that champions projects intended to benefit the larger non-hackathon community. Random Hacks of Kindness and Software Freedom Day are two examples of events geared towards this mindset, but the largest school-sponsored hackathons are the ones that stand the most to gain from reorienting their goals. I am hopeful that Brick Hack, RIT’s first school-wide hackathon, will share this mindset of promoting projects that do good for the world, not just one-off hacks for a show floor demo.

Source: programmer blog