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. 

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

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”

Steam Upcoming Gem

The Project

I consider the Steam Upcoming gem to be my first legitimate project in Ruby – creating a Command Line Interface (CLI) gem from scratch! It was also my first opportunity to code an application using a Git and test driven workflow.

I decided to use Steam’s Upcoming Games page as the basis for my gem – the Steam Upcoming Gem, which scrapes that page for a list of upcoming games on the Steam platform and allows the user to drill down into more information about each game.

steam-upcoming-gem-terminal

 The Process

I started the process of building the Steam Upcoming Gem by analyzing what my requirements should be. The listed requirements were:

– Deliverable must be packaged as a gem
– Deliverable must provide a CLI on gem installation 
– The CLI gem must provide data from an external source, such as via scraping or an API
– Data provided must go at least a level deep, generally by showing the user a list of available data and then being able to drill down into a specific item

I initially considered using an API but decided to gather the information via scraping as I am currently more experienced with that (though I love a good challenge!). I then had to decide what I was going to build. I knew I wanted to do something different, interesting, and challenging.

I settled on scraping information from Steam, a popular online platform with a massive online catalog of games for purchasing, playing, and sharing.  While not an avid gamer anymore, I do enjoy playing video games when I have the time and figured this would be a fun project to work on that might be useful as well (my wallet might disagree).

The next step was to define what information the gem would scrape and what functionality it would have. I settled on the following information to start, though I did want to do more:

– Game name
– Release date
– Platform (Windows, Mac, Steamily, Linux , etc)
–  Tags
– About – description
– Details – other info about the game (single player, multi player, VR support, etc.)

After defining the information I wanted to capture, I started coding my classes, methods and tests.

Revisions

Once I had a basic CLI application working , I started to do some refactoring. One of the major issues I identified was the application load time – up to 15 seconds to load the results! The original code I wrote would scrape the index page, create the game objects and list, and would also create all the attributes for all the games before finally displaying the list. I realized this was terribly inefficient and decided to refactor my code so the gem would only create and display a game’s attributes when it was selected by the user. This greatly improved performance and decreased the load time from 15 seconds to about 1 – 2 seconds (depending on Internet connectivity speed).

I also added in some of the functionality I thought would be in version two – the ability for users to load additional pages of results and a page tracker so the user knows what page they’re on while sifting through the results. I also added error messages for users if their input is invalid.

Finishing Touches and Wrap Up

At the end of the project, I reviewed all my code again to add comments and simplify the code where necessary (eg removing unnecessary lines of code and any simple refactoring). I also used the Colorize Gem to add color to the gem and make it more visually interesting.
Check out the Steam Upcoming gem on Github and Ruby Gems.


 

Thoughts for version 2

  • Ability to sort the results by Release Date, Name, Lowest Price, Highest Price, and User Reviews.
  • Include the total number of upcoming games when the gem loads.
  • Refactor the “page” command so a user can type “page [page_number]” instead of the page command, then the number separately.

 

Suggestions for the Steam Upcoming Gem? Leave them in the comments or shoot me an email at mail@mattcassara.com.