loadGoogleMaps React component

September 18, 2017 | Javascript, Personal Projects, React

loadGoogleMaps is a small React component which loads Google Maps in a manner more consistent with the React ecosystem. I used a few different npm packages prior to this and they seemed to be overly complex.

Instead of hardcoding the Google Maps url into our index.html file, we set our API key somewhere in our app ( in a constants file, perhaps ) and pass that value to the loadGoogleMaps function, along with an array of Google Maps libraries we want to load.

Call it when our application mounts for the first time:

And presto! You’re all set to start using Google Maps in your React app. Currently available as a Gist here and you’ll need to install the little-loader and query-string packages manually but I might refactor into an actual npm package at some point.


React component generator

July 4, 2017 | Javascript, Web Development

Someone recently asked me if there was a way to generate React components. While there are plenty of generators to create full React projects (such as using Yeoman or create-react-app), there aren’t any tools (that I’m aware of) for quickly building out a new, blank component.

This inspired my curiosity, so I spent the better part of an afternoon building out a Node CLI app to quickly generate components. The tool, react-gc, accepts one argument, the component name, but also has flags for additional options, including specifying the directory path ( if you don’t want to create the component in the current directory ), specifying whether the component is basic or stateful, and including the Redux function mapStateToProps and mapDispatchToProps.

I originally built the CLI using more of the Node fs-extra  API for reading, writing, and copying files using Promises instead of callbacks, but it seemed to be throwing a lot of errors. Aside from that, building the templates as strings in a JS file and exporting them to the CLI made it much easier to manipulate how the templates are built.

Check out the repository on Github here.

If you’re interested in building CLIs for Node, check out the tutorial I followed, written by Tim Pettersen.

Questions or comments? Leave ’em below or raise an issue on the repository!


Music Gear Share

A gear sharing app built with AngularJS and Rails

MusicGearShare is a Craig’s List style application where users can sign up and share their music equipment with each other, including anything ranging from instruments, accessories, sound equipment, and more. After signing up, users can search gear thats available to rent and messages each other to coordinate sharing and renting.

Continue reading “Music Gear Share”

Using AJAX and HandlebarsJS in Ruby on Rails

September 8, 2016 | Javascript, Ruby, Web Development

AJAX, HandlebarsJS, Rails Tutorial

In this post I’m going to show you how to create a simple single page Rails app using AJAX and HandlebarsJS. This is a great pattern to use for small, dynamic apps that’s quick and easy to implement.

You’ll need:
– Knowledge of Ruby, Ruby on Rails, Javascript, and JQuery
– The active_model_serializers gem, to serialize our model instances
JSONView Chrome Extension, to make any of our JSON rendered in the browser more readable
– A basic understanding of HandlebarsJS
– Some knowledge of how AJAX works

Continue reading “Using AJAX and HandlebarsJS in Ruby on Rails”

Rails Project Management AJAX Refactor

Now with 100% more AJAX

No, not that AJAX.

About one month ago, I finished version 1 of Rails Project Management, my first full scale web application, for my Flatiron School Ruby on Rails assessment. My next assessment was to refactor the program with Javascript and implement dynamic features only possible through JQuery and a JSON API. I decided to focus on refactoring some of the CRU functionality for Projects, Tasks, Comments, and Notes so they use AJAX instead of full page refreshes. This project was also a great learning experience for using HandlebarsJS, a Javascript templating tool. While the “remote: true” pattern would have been easier, the assessment required that we not use it.

In this post I’ll do a deep dive into how and why I refactored each feature.

Continue reading “Rails Project Management AJAX Refactor”