Gruntfile for Getting Started with Grunt

Learning all this Node.js stuff (albeit very, very slowly) means a lot of run, cancel, restart and reload…in addition to all the other things I should be doing if learning best practices for web development. As with most things in life and especially development, somebody has already come up with a better solution. This solution is called Grunt.

To begin grunting (at least in this sense), I picked up Getting Started with Grunt: The JavaScript Task Runner. Every exercise in this book requires creating a new folder, and since I like to keep things organized as much as practicable, I create a folder for each chapter. Hence, with around 10 exercises per chapter, this is a lot of directories and files being created.

Although not done with the book yet, about halfway through I broke out and with a little hacking, created a Gruntfile for creating more Gruntfiles for each exercise. If you want to use this task runner for yourself, it is available as a gist.

[gist id="589941f6e8ef50a8b135" file="Gruntfile.js"]

References:

Express & Express CLI Generator Setup at 4.0

This whole Node.js and Express thing, I am pretty new to it. Once I figure out how to get it working, I am sure it is going to be positively outstanding. This part however, is proving to be somewhat difficult since Express recently updated to version 4.x recently. As with any project following semantic versioning, a full dot-0 release means no backward functionality. I get it. Heck, I work for a software company. Right now though, the road is a little bumpy since most of the tutorials scattered across the web are for prior 3.x versions.

Even getting started proved to be a little more difficult than I anticipated. Express is has this really nice command line generator for new projects. Apparently, so far as I can tell from old tutorials, this was included in 3.x versions of Express. However, although this functionality has not gone anywhere, it now requires a second install.

To install both Express and the command line generator, first make sure you have Node installed. Next, enter the following into the command line.

npm install -g express express-generator

You will see a long waterfall of text. Once finished, navigate to where you want to store the directory containing your shiny new project and type the following to get started with a scaffolded out Express project with support for Jade templating.

npm express -e newProject

This will create a directory called newProject, put some files in there and use NPM to download and install dependencies. Once finished, you can start editing and test your new project as you would expect.

Automatically Restart Node.js During Development

Recently I have been attempting to learn at least a little bit about Node.js development. It only took about 15 minutes before getting completely sick of hitting Ctrl+C, the arrow up key, and Enter to restart the simple Node.js application I am working on.

Thankfully I have been fiddling with Grunt recently as well. A quick search revealed an NPM module perfectly designed to watch for file changes and restart a specified Node.js instance, grunt-nodemon. To use this nifty little module, start by getting the NPM modules you will need.

npm install grunt grunt-nodemon

Next, create a file named Gruntfile.js in this directory. Populate this new file with the following.

[gist id="4ecba0805c28256169c7" file="gruntNodemon.js"]

This file is pretty simplistic. It assumes you are creating your application in a child directory called app and your point of entry script is index.js. Invoking the script is accomplished by entering the following at the command line.

$ grunt serve

There are a whole lot more options available in grunt-nodemon. However, this simple script saves a whole boatload of irritating steps when learning Node.js through various tutorials and having to constantly stop, restart and test the server. Hopefully, if you are finding this, it makes your life a little easier as well.

Use Symbology from Point Feature Layer in Leaflet

For simple web mapping, recently I have been experimenting with Leaflet and Esri-Leaflet quite a bit. For simple and quick mapping, Leaflet using Esri-Leaflet to support Esri published services is a very viable solution. One difficulty I initially struggled with is getting point symbology from a feature service to display when adding a feature layer. It took the better part of a week, fiddling and cursing with with it off and on, to figure this out. My pain is your gain, though. Here is the solution.

[gist id="f940998ad9c5d697143e" file="featureLayerSymbology.js"]

You can find the url of the image by going to the REST endpoint. the images will be displayed. Right click on the image and copy the url of the image. This will be the url to use for the icon. The other url, the url for the feature layer, is simply the url of the REST endpoint.

Although documented in pieces in other places, it took me a while to piece it all together. Hopefully you find this much earlier in your search for solutions and it makes your life a little easier.

Yeoman Generator for Bootstrap-Map-JS

Getting started building web mapping applications can be a daunting task at best. In many cases, the recent emergence of generators has greatly lowered the point of entry when getting started with many web frameworks and API’s. Unfortunately, when I first started working with the Bootstrap-Map-JS project templates, there was not a generator available and I spent a tremendous amount of time figuring out how all the paths needed to be modified to get the templates to work.  This is why I created a Yeoman generator, esri-bootstrap-map to make both your life and my life a little easier when attempting to quickly scaffold out a web mapping application.

If you are interested in getting started with the ArcGIS JavaScript API, this generator is a good place to start. Especially just choosing the full map template, you already have a fully functional web map. True, it does not have much more than a basemap. However, to get your layers onto this map involves little more than adding a layer to the js/map.js file using one of the Esri JavaScript API samples as a guide or following the API documentation directly.

Even if you have experience already with the ArcGIS JavaScript API, this generator can greatly streamline your workflow. Further, if you find a good way to improve the templates or add more, please do using the instructions detailed in the repository. I would love nothing more than this generator to include a whole host of excellent templates! After all, it would make my life easier as well!

References:

 

Sublime on Mac

As I have begun to delve increasingly deeper into development, I am constantly reminded and well aware no matter much I am striving to learn more…I am still in the kiddie pool. Heck, I have not even so much as stumbled into the shallow end and been rescued by the lifeguard yet.

I have always been rather partial to IDE’s. True, I am well aware there is a large community out there who believe if I really want to ever even aspire to be even a coder able to look at the deep end, I need to learn to wield VIM. If you think this, I have news for you. I have a job and other interests besides learning a freaking irritating and cryptic editor. VIM may be an outstanding tool, but I have other things to do.

Still, I admire the simplicity offered by a stripped down code editor. My grandfather was an engineer who believed in thrift of design, something I admire. Perfect tools are created by removing everything until they no longer function, then adding the one thing back. There is nothing extra. Nimble, fast and efficient…all admirable qualities.

Recently I have seen Sublime mentioned over and over again. Tonight I decided to install and test it, see what I think. Instantly I want to launch files from the command line.  Alas, it does not work on my Mac. Thankfully my Google-fu quickly locates a solution describing how to rectify the situation with one command:

ln -s /Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl /usr/local/bin/sublime

Now sublime can be launched from the command line using

sublime <filename>
sublime <directory>

This is perfect. Now time to see if Sublime is worth all the buzz…

References:

  • Sublime: http://www.sublimetext.com/
  • Sublime Link Article: https://gist.github.com/artero/1236170

Kayaking and Coding, they are similar

Yes, I am talking about whitewater kayaking and code slinging. Yes, they are quite similar. What is Joel talking about you say?

As both a rookie kayaker and a rookie code slinger, you spend most of your time frustrated, hating life and wondering how the experts make it look so easy.  Every now and again you get a fleeting glimpse of success. It is however, very short lived as you spend 10 times as much time following cursing, frustrated and trying to figure out what just happened.

In whitewater kayaking, most of this frustration is closely associated with learning how to and practicing enough to possess a reliable roll on whitewater. For those of you not as familiar with whitewater kayaking, the roll is the technique used to go from being upside down to right side up. The alternative is to have to let go of your paddle, yank off that neoprene skirt attaching you to the boat, and push out of the boat.

Once out of the boat you now get to enjoy attempting to figure out how to get you, your boat (now full of water), and your paddle assembled on shore so you can dump the water out of your boat, get back in, reattach the sprayskirt and continue downstream…where you likely will do the same thing all over again in less than 10 minutes. Being a rookie kayaker sucks…bad.

Learning how to code…at least you can breathe the entire time. For me, I learned how to code in Python through a combination of tutorials, help documentation, and a whole heckuva lot of trial and error liberally sprinkled with creative profanity. Thankfully I was in the Navy, so I already know how to cuss like a sailor.

Most of this time as a coding padowan is spent trying to figure out why the heck your code does not work like the tutorial video. Once it does work like the tutorial video, you try to change one thing. It breaks. You do not know why and further, you cannot even figure out how to get it back to where it was working. Being a rookie coder sucks…bad.

In both instances, persistence pays dividends. Hang on to the fleeting glimpses of success and if you can find a mentor, capture them and repay with multiples of six packs. A good mentor, in both instances, can dramatically shorten your learning curve and get you to the beginner-intermediate stage, where the fun actually begins.

The first time you actually roll back up after unintentionally being flipped upside down in whitewater, the first thing you want to do is scream and jump for joy. Typically a giddy jig while still in the boat suffices. Trust me, I have seen it quite a few times. From here the entire riparian world of moving water begins to become a playground.

Every time you get in the boat, you get to learn something new. You can go with new people on new rivers. If you really catch the bug, your idea of a vacation transforms from being lazy on the beach for seven days to power driving halfway across the country in a van with five friends and their wet rank gear and their even more rank bodies in search of whitewater. The transformation is not conscious really.

It is more like an addiction. Once hooked, there is no looking back and you never see the world the same way again. Vehicle choices are determined by boat carrying capacity and if you can sleep in it. Jobs are chosen based on flexible work hours to be able to duck out and paddle when it rains. Purchases are measured in boat units, what percentage of a new boat something costs.

Coding is really not all that different. The first time you figure out how to get something working on your own, something not in a tutorial, but something you had an idea for, put together, fought through a few confounding moments and finally got working…this is when you know you might just be onto something. Increasingly, every time you find yourself doing something two or three times, you stop and just code the stupid thing instead. After all, with the time you save through automating the task, you can go kayaking.

It is not long before every repetitive, boring and mundane task becomes an opportunity to find a time solution to through code. Increasingly you find yourself wondering if there is a way to programmatically access data from a website, if the website has an API. If the site does not have an API, you are irritated and frustrated with the site. The list goes on and on. Developers are a critical lot, but they do build some really cool stuff.

This week I started to turn the corner in learning my second programming language, JavaScript. Finally, after trying to figure out bits and pieces here and there as I had time, an idea made it from inception to at least a working model. Getting this glimpse, it felt like nailing a roll in hard whitewater for the first time. In fact, when I finally got it working my comment when committing to the GitHub repository was, “It is actually working!”

Interestingly enough the really simple web application I built helps to go kayaking. It creates a hydrograph using Flot and maps the USGS gauge location using Leaflet. True, for anybody who is a professional code slinger, this would be an afternoon diversion. For me it was the result of toying with ideas and new knowledge intermittently for about six months…and it finally works. Now I can check levels using my new web application…and go kayaking, or in my case C1.

If you are curious, here is the working version: http://knu2xs.github.io/whitewater/

Esri Southeast User Conference – Python Presentations

07 May 2014 Update: The code created in both presentations has been included in the embedded referenced GISTs.

This coming week the annual Esri Southeast User Conference (SEUC) is being held at the Charlotte Convention Center in (no kidding) Charlotte, NC. I will be presenting two presentations on Python. Since I reference a lot of online resources, I have made the outlines available as GitHub pages. Continue reading

Photography Portfolio

Although in the past I have included posts directly in the blog for photo sets, most of my photo work to be highlighted on the web is available on a photo sharing service, 500px. On the main menu of my blog, you should notice a Photography Portfolio button leading to my portfolio page on 500px. As a result, there will be dramatically less photos included on this blog. The upside is 500px provides a far superior presentation of my photography work and should make it easier for you to view as a result.

Cleanse Feature Class Names in Python

Today I ran across a problem with what should be a simple solution, but took me the better part of the morning to figure out…primarily because I was not familiar enough with regular expression matching. ArcGIS is pretty picky about feature class names, whether a feature class in a geodatabase or a shapefile. Either way, the feature class name must start with a letter and the rest of the characters can only be either letters, numbers or underscores.

My script is pulling names as part of selections from an external source. The names can and do break all of the aforementioned rules. Hence, I had a need for a name scrubber. Although it took more time than it should have, the end result is a two line function I have shared as a Gist.

[gist id=8786365]

Hopefully this saves you a little time and heartache! As always, have fun!

Update: Now I feel really stupid. Fifteen minutes after figuring this out, a colleague pointed out the arcpy.ValidateTableName function. Not only does it clean up invalid characters, it also checks existing tables for conflicting names. Again, learn from my labor and frustration, but if nothing else, have fun!