The Blog

  • Seeding a Heroku Application's MongoLab Mongo Database

    If you're using Heroku's fantastic MongoLab Add-On and were wondering how to seed the hosted database, the answer is easier than you think!

  • Autofocusing a React Component Text Field

    The Easy React companion project includes a quiz feature which gives users the ability to test their vocabulary list comprehension. The user will be presented with each originating language term and prompted to provide the translation. In order to keep the process flowing as quickly as possible, the answer input field is placed into focus. Exactly how this is accomplished is however perhaps not so obvious, so I thought I'd put together a quick post explaining how.

  • Stylizing a React Router Link with Bootstrap

    Easy React's VocabGiant sample project uses the Bootstrap framework to ameliorate my questionable design skills. The app incorporates Bootstrap styling throughout, including for stylizing button bars such as that presented in the below prototype screenshot.

  • Managing Project npm Packages

    Although there are certainly a number of npm packages worthy of global installation (Gulp comes to mind), you'll often want to maintain a project-specific set of packages for versioning purposes. To do so you'll need to install packages locally. If you're relatively new to the world of npm then how this is accomplished might not be so obvious, however after reviewing a few examples you'll find it is quite easy.

  • React Fundamentals: Configuring Browserify Babelify and React

    The React documentation introduces developers to React by incorporating the library via the Facebook CDN, and that's certainly a great way to get started however sooner or later you'll probably want to begin managing your React library alongside other JavaScript technologies using your project's package.json file. In this blog post I'll show you how to do so, in addition to configure Browserify and Babelify to transform your JSX components and bundle everything together for use within the browser.