Notes
-
JavaScript Optimization: Grunt.js
For the past year or so, I’ve been engrossed in all things JavaScript. It’s been easy ( and incredibly fun ) to get lost in an endless sea of plugins, frameworks, and widgets. The problem I kept finding myself in was then optimizing all that great code for my personal and professional projects. Do I make use of a JavaScript loader to optimize the loading in of disparate scripts, or do I combine files and minify, and if that’s the best way, how do I keep it clean enough that it’s easy to maintain? Many people, more knowledgeable than me have tackled this issue, and I don’t intend to get into a flame war over which approach is best, but I’d like to share with you three recent discoveries that have made my task of optimizing JavaScript files for websites and applications quick and easy.
Good: Scratch my own itch ( Minimi )
In an attempt to solve this problem for myself, I wrote a small Ruby script, that watches a particular directory, and, like SASS and CoffeeScript compilers, when the file is saved, it runs it through the Google Compiler ( Check out Minimi on Github ). This worked great, but the fact that it didn’t concatenate files became an issue.
Better: The GUI ( CodeKit for Mac )
CodeKit for Mac, which is still in beta, is ideal for those who don’t want to have to mess with the command line. It provides a visual interface to optimize/compile JavaScript, CoffeeScript, Sass, and Less. For my purporses though, I was interested in it specifically for JavaScript. Essentially, you register a directory to watch within the app. You can drag and drop files in the order you’d like them to concatenate, define which files should have syntax checking (using JSLint or JSHint), and at the end you can minify it all using UglifyJS. The best part is, that like SASS and CoffeeScript, the app will watch this directory and run this process every time you save. The app does all this quite well, so if you’re not comfortable using Terminal, I urge you to give Codekit a look.
Best: Open-Source ( Grunt.js )
While CodeKit is great, I knew that if I wanted to use this tool, and be able to share code with my team, I couldn’t expect everyone to pay for an app. I spent a few days looking at build scripts, but none of them felt just right. Enter @cowboy and his terrific open-source contribution, Grunt.js. Grunt.js is a perfect combination of the previous two approaches. Grunt runs the code through JSHint, concatenates files in an order that you specify, minifies code using UglifyJS, performs unit tests using nodeunit, and it will do it all every time you save per a watch command. All of the instructions are defined in a text-based config file. While I haven’t integrated testing into my daily workflow, I can attest that Grunt’s lint, concatenate, minification, and watch commands have really made the entire process of JavaScript optimization a breeze ( Check out my typical gruntfile on Github ).
I’ve also written a little AppleScript that given my place in the Finder, the script will open Terminal, cd to the appropriate directory, kick off Grunt.js’s watch command for that project, and open that directory up in Sublime Text 2 ( Check out Grunt Here on Github ). If you’re an Alfred user, you’re going to love this.
As you can see, this is something that had been bothering me for some time. Initially I thought code minification on save was all that I needed, and I was able to cobble enough Ruby together to make it all happen, but CodeKit’s GUI allowed for so much more. Ultimately I found that in a team-based environment, Grunt.js worked best of all.
If you have any questions, corrections, or even if you have tips for me, please don’t hesitate to reach out on Twitter. As always, thanks for reading!
-
Regarding the word ‘Busy’
I’m a month or so behind on a few of my podcasts, but I finally got around to listening to Episode 20 of Creatiplicity. I wasn’t that familiar with Liz Danzico or her work, but she said something that really struck me. I’ve done my best to provide a transcript below.
“Everyday I try to block out time in my schedule such that I actually have time. It’s not time that I’m doing nothing, but it’s certainly time where things are not scheduled every hour, every half hour, every fifteen minutes. If every minute is planned, How will anything ever surprise you? How will anything emerge? There can never be the ‘drop by’, ya know? I think Paul Ford once said that the ‘drop by’ has been lost. No one ever drops by to see one another, and that kind of idea is gone because every minute is scheduled, so I want to leave time for someone to drop by - for things to just happen.” — Liz Danzico
Maybe it’s just me, but I have trouble just being still in the way she describes - I have trouble shutting it all down. Perhaps that’s even more reason to follow her advice.
-
A Long Road to Gimme Bar
A few weeks ago, I saw a @swissmiss post urging people to check out Gimme Bar, a do-it-all bookmarking service by FictiveKin. I’m happy to report that I’ve done my due diligence, saving you time and money, only to return to share my experiences and thoughts.
The Problem
Like many of you, I have the distinct pleasure of working on the internet. RSS, Tweets, status updates, IMs, and emails from friends and co-workers to check out this great new site, and check out how they did X. To keep some kind of record of these morsels of design, I’d often manually take a screenshots. I’d drop these screenshots into an ‘Inspiration’ folder on my desktop. Over time, this became an unwieldy act to maintain, and it prompted me to being a sojourn to find the perfect bookmarking tool.
Stops Along The Way
The following solutions all worked in their own way, but often failed due to a lack of portability, lack of customization, or lack of social features:
The Solution
Gimme Bar delivers, because it does what the others couldn’t. It allows you to add to your collection without the overhead of doing any extra work. It’s bookmarklet is superb (yes, I know they have an extension - more on that below). It allows you to select text, images, video, or grab a screenshot of the site with click of the mouse. Not only can you add content in, but it also allows you to selectively categorize the newly saved content by applying tags and insert it into a proper category. The best part is that it’s fast. No need to kick out to Terminal or drag screenshots to discreet folders. The bookmarklet does the heavy lifting.
These Are My People.
When I jumped on Gimme Bar, I saw my Twitter contacts - family, friends, and people in the industry that I’m interested in. If I like something that they’ve saved, I can save it to one of my personal collections (a grouping of saved assets under a particular theme - ie: typography, letterpress, silkscreen, etc.). If I like someone’s entire collection, I can favorite the entire collection essentially subscribing to it. Since the site launched, I often find myself browsing to see what other people are finding. Gimme Bar’s lightweight social features are implemented in the best way possible, they’re there when you need them, but they don’t get in the way.
Things That Could be Improved
While Gimme Bar delivers in just about every way imaginable, there are a few notes that I’d like to share:
- Chrome Extension When I joined, I immediately downloaded the extension, but I soon found that it’s not for everyone. With the extension installed it assumes any highlight of text or the hover over an image is a Gimme Bar action. I promptly uninstalled, and the bookmarklet saved the day.
- Discovery page doesn’t update the URL as you scroll. The problem is that should you click/tap an item, you lose your place in the content flow and have to start again should you decide to go back. I contacted the Gimme Bar support team, and @fictivetyler informed me that it was “coming soon”.
- iOS is where it’s at. The mobile site is servicable at best. I’d love to see a Pinterst-style iOS app.
- Portability How can I pull down everything that I’ve saved to Gimme Bar. I’d like to see a Facebook-style data dump option.
All in all…
I’m very happy with the way the service works. It’s solved a need that I had directly, and if you’re in a similar state of bookmarking limbo, I urge you to give Gimme Bar a spin. Either way, check out what I find interesting on Gimme Bar.
Update
Gimme Bar recently announced a pro subscription. If you’re a fan of the great things they’re doing over there (How could you not???), I urge you to check it out.
-
Hello, world
Why did I launch a blog?
I’ve started on a number of blogs in my lifetime. All have failed. I didn’t update them regularly or I’d spend more time updating the CSS than writing content. To quote the immortal Merlin Mann, I need to start making that “clickety-clackety” sound.
What do I have to share?
I’ve worked for a handful of years as a web developer. I’ve learned so much since my ‘Intro to HTML’ class, and I’d like to share what I can in hopes that you can glean some value from it.
I hope to share HTML, CSS, JavaScript, iOS, and some apps I find interesting along the way.
