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.

 

Loading and Compiling SASS in React

I’ve been looking for a good solution for using SASS in a create-react-app. Previously I was using node-sass-chokidar for watching my scss files and compiling them, but I found it to be unintuitive and difficult to use with my file structure. I decided to build my own workflow for easily loading and compiling SASS files in my React projects using my favorite build tool, Gulp.

This article assumes a familiarity with Gulp and create-react-app and have already set up a project.

Let’s check out how our Gulpfile works.

Our first task, sass,  compiles and minifies our master stylesheet into a css file.

The next task, loadSass,  recursively examines all of the folders in our specified path pattern and collects the path names of any file ending with .scss. We pass the property {read: false} because we don’t need the contents of each file – only the path name.  Then, for each file path, we transform it into a string, like @import "./src/app/components/friend/friend.scss";. We then inject that value into our stylesheet – more on that later.

The last task watches for changes in our sass path and calls the compiling task sass. We could also call our loadSass function here but it would be unnecessary to re-inject our files every time we make a change. Instead, we run  loadSass manually in our terminal when we’ve added new files or moved files around.*

Next, we’ll need to configure our stylesheet to work with gulp-inject:

Next, we’ll need to modify our project’s package.json file to use our new scripts. I ejected my config files and scripts but with some tweaking you should be able to get the following code to work in your package.json file.

We’ve added two new scripts to run: watch-scssand build-scss. The first  loads our SCSS files on boot, and auto compiles our project’s SCSS files during development. The second loads and compiles our SCSS before running the create-react-app build processes.

You won’t need to require the SCSS stylesheet in your component files but I do recommend storing them in the same folder.

Another great thing about this method is that it doesn’t produce any unnecessary CSS files – everything is loaded into a master stylesheet and then that stylesheet is compiled into CSS. No more @imports all over the place either!

And that’s all there is to it! Enjoy a simple way to keep your SCSS files organized and compile them easily during your next React project.

*In another project, I did add support for injecting new files into the stylesheet when a new file is added. I’ll link to that in another post. 

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!

 

Opening a new iTerm tab with the current directory

May 29, 2017 | Personal Projects

This has bothered me since I started using the terminal. While I love using iTerm2, I found it annoying that there was no way to open a tab using the current directory. I find myself doing this frequently as I’ll run multiple tabs for a project – one for background tasks like running servers or compiling SASS files, another for running sandboxes to play around with code, and maybe a third for running various commands (Git, etc).

I was previously using a custom BASH function I built, but it required multiple steps to copy the working directory, open a new tab, then cd with the the copied directory. It worked okay, but it certainly needed to be improved.

With the help of Stack Overflow, I’ve found a good enough solution that involves using OSA Script. Check out the code below:

Check out the Gist here.

Found this useful? Feel free to use it! If you’ve found a better way to do this, let me know in the comments.

Ion Slide Box Tabs

A plugin I built for the Ionic framework. This directive extends Ionic framework V1’s ion-slide-box with selectable tabs and a tab indicator that moves as the user changes slides.

I kept the styling simple so feel free to modify the CSS / SCSS as necessary for your project.

I will hopefully be releasing an API soon, as well as some updates to this directive!

Check out the repository here: https://github.com/cassaram09/ion-slide-box-tabs

Creating a Rails application with Twilio

December 11, 2016 | Ruby

Earlier today I created a small Rails app as a test of the Twilio REST API. One of Twilio’s main features is the ability to send and reply to SMS messages. A guest post by James Jelinek on Twilio’s blog shows how incredibly easy it is to get started with Twilio (with Rails). Setup your Twilio account, follow along with the tutorial and you’ll be up and running in no time!

When you set up the app, I recommend using dotenv-rails to manage your environment variables so you don’t have to put them in plaintext in your secrets.yml file. You’ll also need to download and install ngrok, a wonderful network tunneling application that allows applications your running locally (eg a Rails server on localhost:3000) to be accessed by devices outside of your network.

Also, make sure that you use your LIVE Twilio SID and Auth Token (not the test ones) otherwise app will spit out an error regarding a invalid number.

You can view my repo of the code here.

Automated Git Project Deployment

November 11, 2016 | Personal Projects, Web Development

While there are plenty of apps that can handle deployment for you (such as Heroku) or Beanstalk (for general workflow control and project deployment), with a simple script you can automate your Git project deployment to be as easy as typing a few words into your terminal! In this post I’ll walk you through how to set up automated git project deployment.

Continue reading “Automated Git Project Deployment”