Removing Haskell’s Hassle

This goes along with my recent post about my go! script for go. I wrote a similar script for Haskell to overcome a problem I continually had with Haskell’s interpreter.

The problem is that in order to create useful functions to test in the interpreter (ghc) you need to load your file into the interpreter. However, by the time I’ve opened up the interpreter I forgot to open up an editor (via the shell). Still, if I had a document open than linking the two takes a bit of work (mostly drag and drop). I’ve managed to spearhead the issue when I first start the interpreter.

My little script allows me to quick edit a file, or even start a new file, and automatically link up with the interpreter. Its another one of the scripts you can find in my ~/bin:

#!/usr/bin/env ruby
# Author: Joseph Pecoraro
# Date: Wednesday, September 30, 2009
# Description: Simple Haskell Quick Starter

# Defaults
EDITOR = 'mate' # ENV['EDITOR'] for most Unix Guys
HASK_DIR = File.expand_path('~/haskell')

# Determine the File
#  - default to temp.hs
#  - use provided file if exists
#  - create new temp file with given name
file = File.join(HASK_DIR, 'temp.hs');
if ARGV.size > 0
  name = ARGV[0]
  if File.file? name
    file = name
    name += '.hs' unless name =~ /\.hs$/
    file = name

# Work the magic
system "touch #{file}"
system "#{EDITOR} #{file}"
system "ghci #{file}"

Its a nearly perfect replacement of ghci for me. It allows me to focus more on the task at hand rather then getting bogged down and frustrated when I realize I have to stop what I’m doing to link the interpreter to an editor.

For your own use you may want to customize the EDITOR and HASK_DIR variables. As I tend to use TextMate and a folder in my home directory for throw away files (which I can easily clean up eventually). Let me know if you’ve suffered with the same problem, or others when working with Haskell!

Get Go’in a Little Quicker

Even with Finals literally around the corner I couldn’t help but play around a little with “Google’s New Programming Language” go. In case you haven’t heard about go, you can find out everything you need to know at their simple site

I’m not going to talk about what I like/dislike about the language… yet. Instead I’m going to do what everyone else has probably already done. I wrote a simple compiler/link/run shell script which takes its place in my ~/bin:

# Author: Joseph Pecoraro
# Date: Saturday, November 14, 2009
# Description: Compile, Link, and Run a go script.

# Requires a file
if [ ! "$1" ]; then
  echo "usage: go! <filename>"; exit 1

# Use the proper tools for the arch
if [ $GOARCH = "amd64" ]; then
elif [ $GOARCH = "386" ]; then
elif [ $GOARCH = "arm" ]; then
  echo "unsupported GOARCH: $GOARCH"; exit 2

# Strip .go (if its there)
file=`echo $1 | sed -e 's/.go$//'`

# Compile, Link, and Run (break on any error)
$COMPILER "$file.go" && $LINKER -o $file "$file$EXTENSION" && ./$file

Why did I write my own? The others I had seen were inadequate, didn’t work well with tabbing (filename versus executable name), or didn’t even produce a nice executable name at all. For many, you probably won’t need to compile, link, and run a program all at once (especially in a systems language). However, I’ve found that its a great tool to help me learn the language. This is due in some part to go’s quick compilation and linking.

It is really amazing to me that all of the languages that I have gotten comfortable working with have a command line shell. JavaScript, Haskell, and Ruby all have shells where I can make a fool of myself while quickly testing syntax or libraries. Go doesn’t. Its something I really miss. This little script is a simple replacement that brings me a little closer to interactivity.

I tried to make it generic so it could work on any architecture that go currently builds on. I named the script “go!”. Let me know what scripts you’ve built to work with go.

Improving the Web Inspector

There is a better article on the WebKit blog, showing even more features! I really recommend that you check it out and provide feedback!

I haven’t been blogging recently… Instead, for the past 3 months I’ve been “doing” something! I’ve been working on WebKit, the Open Source Rendering Engine behind browsers like Safari and Chrome. More specifically I’ve been working on the Web Inspector. Its been a blast!

In a matter of weeks of working on the Inspector I was able to knock out some simple features that I’ve always wanted. Soon after I introduced some features that required some serious learning and development. I really shouldn’t say “I”, because in actuality the WebKit team has been a tremendous help in teaching me and collaborating with me on the new features. To name a few that have been especially helpful (via their IRC handle because I didn’t ask their permission) xenon, Rik`, pfeldman, bweinstein, bdash, and pmuellr.

So what were the features? Here they are, roughly in the order in which they were added:

Element Attributes (Create + Tab)

Making new element attributes was difficult, sometimes impossible, and undiscoverable. My goal was to get rid of all three of these obstacles. Here goes. Discoverability first. With the new changes, when you hover over an element in the Element’s Tree Outline an ellipsis, or some indicator, appears in the element’s opening tag in the position that the next attribute would go. Double clicking that ellipsis starts editing as though it were a normal attribute. To make things easier, you can tab through attributes and backwards using “shift-tab”. When starting to edit an attribute, when you tab over the end it will start making a new attribute. This way you can quickly make multiple attributes.


CSS Properties (Create + Tab)

The same problem existed for CSS Properties. I added tabbing through CSS properties inside a selector section. Tabbing forward from the last property (or double clicking the empty space if there are no properties) will start creating a new property.

CSS Selectors (Create + Modify)

Yes, you now have the ability to actually add and modify selectors! This is a feature that many designers have been interested in. It is really powerful and quite useful. This will make it easy for designers to hack around inside the Inspector to get the styles just right. Also, as a side note, the way this is handled in the background leaves room for some new features such as exporting CSS for the changes you’ve made. Its certainly an idea being floated around.


CSS Color Representations (Hex + More)

One complaint that showed up time and time again in Twitter was that the Inspector only showed rgb color representations. Many designers wanted the hex representation and had to resort to using Firebug to get that information. Well, we went one step further. You can now represent colors any way you’d like: hex, shorthex, rgb, hsl, or even by its nickname if it has one! For alpha colors you get rgba and hsla. Designers, have at it!


Clicking on the color swatch allows you to cycle through the different representations for just that color. Allowing you to get the different representations that I got in the picture. However, you can set a preference in the gear menu to display all the colors in a particular format.

DOM Storage Updates

The DOM Storage DataGrids now displays live updates. You don’t need to manually refresh every time something changes. Also you can create, edit, and tab through the keys/values. Double click any open space to start creating a new value. Catching on to a theme with my updates? Overall this makes working with DOM Storage just a little more developer friendly.


Natural Sorting of Properties

Who counts “1”, “11”, “12”, “2”, “3”, etc. Certainly nobody I know! So, I implemented a variant of the alphanumerical sorting algorithm for properties when they are displayed in the console. Now you get a much more natural ordering!

Keyboard Shortcuts

Probably not so well known but you can now switch between the different panels of the Inspector with keyboard shortcuts! On the Mac its ⌘[ and ⌘].

Better NodeList Displays

As a developer myself I find the issues that annoy me, and are likely going to annoy other developers, and set out to solve them. One classic problem I had was doing a getElementsByTagName or similar and having the console respond blandly with “NodeList”. Not good enough! NodeLists now display the actual HTML elements in a list just like an Array. Its one of those small details that developers won’t really notice unless its gone, because we expect it.


Resources Interactivity

There were some old feature requests sitting in WebKit’s Bugzilla. They requested opening resources on double click, and adding the ability to drag a resource around like it were a link. I thought they were great ideas!


This was the first feature that required me really digging into WebKit’s source, including touching all platforms. With the help of WebKit developers I eventually added support for viewing all cookie information (secure, httpOnly, etc) and deleting cookies for the Mac. All other platforms were able to display basic cookie information available through document.cookie.


Another developer, bweinstein, just recently landed some really great improvements! He added support for Windows, separated cookies out per domain, and enabled resizable grid columns. Really great work.

Event Listeners

Not having the ability to enumerate the Event Listeners via JavaScript has plagued me, and most likely plenty of other developers, for a very long time. This made viewing Event Listeners an excellent candidate for an Inspector feature.

The implementation as it stands now has some great functionality. There is a new sidebar pane when you inspect an element in the Elements Tree Hierarchy. If the current Node has registered event listeners there is a separate section for each type of event registered (click, mouseover, etc). Within each of these lists is a display of all of the event listeners in the entire event flow for that type. That means you see all the Capturing Event Listeners followed by the Bubbling Event Listeners in the exact order that they execute and on which nodes they are registered.


A few filters will let you customize the list to focus on the entire event flow or just the selected node. This is still a very new feature, one that Firebug doesn’t even have yet. So we are looking for UI improvements and idea on how to improve the feature, but its certainly a cool feature!

JSON Syntax Highlighting

JSON is merely a subset of JavaScript but it wasn’t getting highlighted! A few lines later, the inspector now syntax highlights JSON just like JavaScript.

CSS Syntax Highlighting

The JavaScript syntax highlighter has helped me hundreds of times. Now, hopefully the CSS syntax highlighter will do the same! The colors are very close to Dashcode, they look great, and there is even support for some of the rather complex @import, @media, @font-face, and @variables CSS syntaxes.


Hey, as a birthday gift to myself what could be better then adding some serious styling to those black and white stylesheets? I know what you’re thinking… nothing could be better. Well you’re almost right! With some of the refactoring I did bweinstein was able to apply syntax highlighting to the Elements Tree Hierarchy and got some seriously awesome results. Now the inline scripts and styles are syntax highlighted! These are some really awesome improvements that make working with the Inspector ever more friendly.



To start using any of these features you will need to download the WebKit nightly. Most people think that the nightly overrides their current Safari app. This is not true. The nightly binary is a separate application from Safari, named WebKit. If you just want to try out some of these features you can download the Nightly, and then move it to your trash when you’re done playing with it. No harm, no foul.

These are not nearly all of the new features in the Web Inspector. These are just the ones that I worked on and contributed to. To name some other features there are Scope Bars for the Console and Resources Panel, the ability to view Request and Response HTTP Parameters for Resources (great for debugging AJAX), Resource Status Code indicators, complete Serialization between the inspected page and the inspector, and more.

If you want to contribute feel free to stop by #webkit on Freenode. My handle is JoePeck and I’d be glad to help you out!

mod_rewrite Tutorial on Nettuts

Its been quite a while since I’ve written a blog post. For that I apologize. But, you can be sure that I wasn’t just sitting around! Earlier today, Nettuts published my second tutorial covering URL manipulation with mod_rewrite in Apache’s .htaccess configuration files.

As a reminder to any visitors, if you decide to comment please contribute to the article in some way. I’m not interested in fluff comments. With that said, you can check out the tutorial itself at:

Nettuts Tutorial

You can view the examples here:


And finally you can download the examples (for Apache 2.0) right here. I hope the tutorial will clear up some myths and confusion about mod_rewrite. Cheers.

Give Some Appreciation

I have had the idea to write this article for a long time. But this morning I came across Allan Branch’s blog post titled “It isn’t always about you…” containing the following message:

I read many blogs and follow or have followed a number of people on twitter. I think I see a trend in both, rarely does anyone talk about others in a light that takes the spotlight off of themselves. Most people are so worried about their own personal glory and fame they cannot show real praise to anyone but themselves in fear of losing a grasp of their “fame.” They only talk about their thoughts, their ideas, their apps etc. These people aren’t evil, they’re usually great people.

I want to spin this and instead give you ideas about why and maybe even how you should give some appreciation to your “mini-heros.” Don’t worry, this article has an extreme amount of “I” statements, but I (there’s one) really think that this blog post contains my thoughts and I hope you get the chance to read it.


You should have a list of individuals that you think have passion, present themselves in a model way, are helpful… the list of good characteristics are nearly endless. The essential idea is that they have had some impact on you or possessed some notable quality that impressed you. In some cases, for professions and hobbies you may have a mini-hero that gives you pride in being a part of that activity, hope in its future, and make it even more enjoyable. These people, are the mini-heros.

I think in the end, these role models and mini-heros, lack feedback and recognition and don’t realize how important and influential they really are. More and more frequently I am remembering the names of individuals that make an impact on me, from as important as my career to as nuanced as my hobbies.

Where am I going with this?

I want you to just write out a thank you letter, a blog post, maybe even a donation… offer some appreciation to someone who made an impact on you. If you can’t think of anything now, then just keep your eye out in the future for that small app that really impresses you and maybe the developer was kind enough to help you out.

A Non-Generic “Thank You” Means So Much More

Qualify your thank you with a reference to what the person did that really impressed you. Take the time to reword a “Thank You” to “Thanks for spending the time to look at this. I really appreciate your help.” Point out what it is the person did that was extraordinary or separated them from the norm. Personally, I make sure that I mean every “Thank You” that I say, and I try to say it in such a way that they know I’m thankful. Its a shame that there is such a thing as an empty Thank You, but it does exist. Those two words don’t nearly have the meaning they used to. So if you make them mean something, they will be far more appreciated.

Keep in mind blubbering flattery or worship is not what I’m asking. People appreciate praise more from their peers and equals or from people who are “above” them (I’m thinking bosses, managers, etc.). I’ll leave with the following article by Neil Patel that I feel carries some truth on How to Build Influential Relationships. If you read that article I want you to keep in mine that its not always necessary to build “influential” relationships; a simple letter of praise, with good reason, is always appreciated.