I made a new thing and I’m pretty proud of it so I’m going to write up this here blog post to explain how it works. So I’m trying to create a new feature for a client’s Rails app that is basically the management of water rights data which is associated with points and polygons on a Google Map. I actually created a very similar feature for the same client but it was only polygons that I was parsing and putting on the map. The eventual solution I decided upon was creating a GeoJSON endpoint using Rails and Active Model Serializers (so much better than my previous experiences with RABL). The Google Maps API then allows me to import this GeoJSON file, which includes each point and polygon in my database as a separate feature in a feature collection. When a feature is clicked on the map, each water right associated with that feature is highlighted in the table. Each water right in the table also has a view source link which can be clicked to highlight and zoom to the water right’s associated features on the map. The current working version of this can be found here. The colors and icons are obviously not at their best yet, but I just think it’s insanely cool to have this two-way relationship between a basic table of data and an associated map of points and polygons. The Google Maps API continues to amaze me with how easy it is to create really cool things. I can’t wait to have a few weeks to really dive into the docs and make something WEIRD. I’ll be sure to post an update when I do!
I made a little game! It can be found at richpoorcat.com. It’s a little jQuery, some Coffeescript and a Rails backend to save each cat as a resource. There were actually some cool challenges in trying to put everything together. The first being how the heck do I use the Paperclip helper method ‘url’ in my Coffeescript?! It’s super easy to make an image_tag in Rails with cat.image.url but that doesn’t really work once you are working with the objects in JSON format. This challenge led me to discover RABL and JBuilder which are actually super helpful for doing just what I needed to do: add extra attributes to my objects when converting them to JSON. The second decent challenge was figuring out how to mask the cat images on the fly. I mean I could always Photoshop every single image and have a _guess and _result image for every cat but that seems super tedious and that’s twice as many images that need to be downloaded by every single client. I actually didn’t realize I was searching for masking (using search terms like ‘hide part of image jquery’) but once I did I found a super cool library called Pixi.js that can handle things like this with only a few lines of code. Using an x, y, and radius parameter I was able to create a custom mask for each image and store them in the database. Also, using my newfound RABL knowledge, I was able to store the mask parameters in one string of the format “x, y, radius” and then break them out into separate parameters for the JSON object when the mask actually needs to be drawn. It’s still a bit tedious to hand code the numbers for the mask for each new cat so my next addition will be the ability to edit the mask params using number inputs and update the mask preview through a jQuery listener every time a number input is changed, so basically a live edit for the mask. Soo much nicer than typing in the 3 numbers I think will work and then refreshing the page. I actually made this site a few days ago and just got around to making the post so I already have some cool Google analytics data. After 2 days of being up and only 2 links posted, I had views from over 30 countries! I should make something that people will actually use then maybe I can hit 50 countries!
Welp that was fast! It turns out they were kinda obsessed with Dreamweaver and getting me to do manual labor. Not a big deal. I’m honestly still more interested in Rails than WordPress after spending a weekend trying to pickup PHP and WordPress basics. Rails just feels so much cleaner and easier to read/write. Plus I have very little interest in abandoning Sublime Text 2 for Dreamweaver! I need my multiple cursors! PLZ!
I did come out of this with a new little portfolio site though! Alexhowington.com is live! This mobile-first stuff is starting to really make sense. I need to add live links to the portfolio but otherwise it’s a pretty decent little responsive site. I’ve got a bit of work to do on my concert tracker app and then the league stats app with D3.js awaits! Backbone and Ember are looking pretty enticing as well! I’ll keep you updated.
So I’m going to start working as a contract web developer on Monday! It sounds like it will mostly be WordPress work for right now so I’m diving into the Treehouse courses on PHP and WordPress. Also a quick refresher on jQuery couldn’t hurt. Wish me luck! I’ll probably be posting small WordPress-related projects soon.
That is not a very good blog… I’m averaging one post every 25.9 days. After this post I will be averaging one post every 23.8 days. That’s like 3 to 4 weeks of learning without any updates! I just finished the Pragmatic Studio Rails 1 and 2 courses and am currently making a concert tracker app where users can keep track of shows they have attended. A pretty simple idea but it has some good relationships to model as well as a lot of location data so I can still get my Google Maps fix! I currently have concert, band and user models and the groundwork laid for the join models between those three big ones. I’m also building authentication/authorization systems from scratch, forms from scratch, you get the idea. I spent most of the day messing around with Bootstrap (sticky footer ftw!) and have a decent little CRUD application uploaded here. Nothing fancy and hopefully by the time anyone sees this, authentication and authorization will be in place already! (Don’t delete my concerts, ya noob!) I think the to-do list for tomorrow will include adding some seed data connected to my user account and then figuring out the best way to display everything on the show pages. Depending on how long that takes, I may or may not start tackling the authentication system. See you in 26 days! (just kidding! i hope…)
I found a solution to one of my problems! The problem was too many markers and the solution was MarkerClustererPlus. It’s a really cool little library that creates numbered icons per zoom level on the fly. I think it took like two lines to get it working with my existing code, although there are a ton of options I will end up customizing. I know cool timeline stuff is possible as well after checking out the examples in the Google Maps API documentation. I’m pretty sure it won’t be two lines of code though! Haha.
I made a new thing! It’s been a long time since I posted about a Rails project or ANY project for that matter. I’ve obviously progressed a bit since PibleyFacts so here is my latest work: DroneMap. I’ve wanted to make something with this Dronestream API for probably a month or two but have been focused on other projects, that is until last night. I came across an article about the developer of the API on my Facebook news feed and decided it was time to mess around with this drone data. I pulled all the data from the API using Unirest, pass that data to the view and js file, and then plot those points on a Google map using the satellite terrain. All the other data such as number of deaths, number of injuries, short summary, etc. are displayed in an InfoWindow when each point is clicked. I feel like I already have something very cool going, but I think it could be much better. I’m figuring out how to parse the included ISO 8601 dates and would love to do some sort of timeline feature that shows each point dropping over time. Also, there are some points which are extremely close together even when zoomed all the way in. I need to figure out a way to display some kind of total for each area based on zoom level. I’m sure this is in the Google Maps API somewhere! I’m not sure exactly how to do it yet, but there is a way to display this data in a way that it conveys the true impact of our country’s actions on others. Regardless of your stance on our use of drones, I feel that this impact needs to be fully felt and understood before we can even begin to have a reasonable debate about these types of issues. Ok, off my soapbox and back to the code!
I’ll keep this short because my brain is a little fried but PibleyFacts v1.0 is live! I’m really surprised that I got something working in a weekend! There are some features I would like to add and everything is still a bit frankenstein-ed together, but for now I’m going to call this a success!
So it’s not pretty but check out the WIP version of PibleyFacts. I’m pretty excited about having my own homepage deployed on Heroku! Anyway, I still have to add the form and the list of facts but I’ve got all of tonight and tomorrow morning to finish up. I overlooked the fact that I know almost nothing about Bootstrap so I’m going to have a look at their classes and see if I can whip up a CSS layout of sorts. Regardless, that’s not a v1.0 requirement so that will be done after I get the functionality in place. Wish me luck! Could be a long night!
Been super busy but I wanted to just update with what exactly I’m doing at the moment. I finished Michael Hartl’s railstutorial.org book and still felt like I had no idea what was going on. Luckily for me, these guys called DevpointLabs just started up in SLC and they are EXACTLY what I needed. I’ve finished a week of classes so far and have decided to actually build a small app on my own to attempt to make sense of the things I learned a month or so ago. I started today around 1-1:30 and I’m attempting to finish the barebone requirements by Monday’s class time (3 pm). So basically I’m trying to write a very simple rails app and deploy it in around 48 hours. This shouldn’t be too hard if I can just stay focused (LOL world championships and a Minus the Bear concert might have other ideas for me…) and keep notes on what the hell I’m doing with each step. I’ll try to post a link when I’m done on Monday. The app is called PibleyFacts. I’m really excited to make it! Peace late.