Sorting by Multiple Fields with Different Sort Orders Using the AngularJS orderby Filter

I’m working on a new, interactive, interface to the $100,000 Club dataset I keep on itsalljustcomics.com. The data deals with the world’s most valuable comic books (those worth more than $100,000) and it’s always just been a static list. Since I’ve started keeping track of that data, the number of entries has steadily grown to include hundreds of books. Because of that growth and in concert with the relaunch of that site, I’ve started to put together an AngularJS based interface to the data. One of the things I need to do is sort the displayed data by three different fields and with two different sorts. This is very easy to do in Angular, you just might not know it since the documentation for orderBy is crummy. The one example that’s there is more confusing than it needs to be and only shows one variation.

Here’s how you do it.

ng-repeat

For starters, this example uses the ng-repeat directive. ng-repeat makes it trivial to loop through a collection and apply an HTML template to every member of the collection. In this example items is a collection of JavaScript objects stored in an array on the controller’s scope.

app.controller('MainCtrl', function($scope) {
  $scope.items = [{
    "title":"Action Comics",
    "issue":"1",
    "publisher":"DC Comics",
    "cover_date":"1938-06-01",
    "pedigree":"Church",
    "grade_src":"Anecdote",
    "grade":"9.2",
    "general_commentary":"Best Existing",
    "uid":0}]
});

Every time through the loop the value of that particular item in the array is exposed to the template as it and any properties of that object are available using familiar dot notation. Those values are included in the template using a familiar bracket pattern and Angular recognizes them, interpolating the values into the page.

<tr data-ng-repeat="it in items">
  <td>{{it.title}}</td>
  <td>{{it.issue}}</td>
  <td>{{it.pedigree}}{{it.collection}}{{it.provenance}}</td>
  <td>{{it.grade_src}}</td>
  <td>{{it.grade}}</td>
  <td>{{it.general_commentary}}</td>
</tr>

You’ll notice I don’t just throw ng-repeat in there. While ng-repeat will work as an attribute, I prepend data- to the attribute name. While this doesn’t matter to Angular, it’s the way the HTML specification defines adding custom attributes, so I use that pattern for consistency across all my code.

This initial version would output something like the following:

out-of-order

orderBy

While the previous example works fine, the rows are simply presented in the order of the members of the array. That might be okay for you if you’re getting a presorted collection, but if you want to change the order, you have the power to adjust it using Angular’s orderBy filter.

In this example we want to sort by the title of the comic (ascending, from A to Z), then by the issue number (ascending, from 1-∞) and finally by the grade (descending, from 10.0 to 0.5.) While this is dead easy to do using Angular, it’s not clearly documented.

This is where the superheroics happen. Inside the ng-repeat you invoke the orderBy filter on your data. This is done with the pipe “|” character. This will be a familiar pattern for you if you’ve hacked around on the Unix command line. Everything on the left of the pipe is passed to the filter referenced on the right of the pipe. In this case we’re using orderBy but it could be any of the built-in filters or a custom filter of your own devising. Commonly, orderBy is shown accepting a single variable (technically an Angular expression) representing one of the available properties of the members of the collection. What’s not clear from the documentation or common examples is that is that it can also accept an array of properties with which to order the collection.1 So passing ['title','issue','-grade'] to orderBy tells Angular to sort first by the title, then by the issue and finally by the grade properties of the it object. Notice something interesting about the way grade is passed into orderBy? Yes, it’s that simple to reverse the sort in this syntax- simply negate the variable with “-” and the sort on that property will be reversed. Pretty sweet.

<tr data-ng-repeat="it in items | orderBy:['title','issue','-grade']">
  <td>{{it.title}}</td>
  <td>{{it.issue}}</td>
  <td>{{it.pedigree}}{{it.collection}}{{it.provenance}}</td>
  <td>{{it.grade_src}}</td>
  <td>{{it.grade}}</td>
  <td>{{it.general_commentary}}</td>
</tr>

Here’s a plunker with a working demo. This example is basically Exhibit A of what I like about Angular and what drives me crazy about it at the same time. I love the elegant, declarative syntax that really does feel like HTML rewritten for web apps. I’m giddy over how powerful some of the pieces are- like the directives and filters we’ve seen here. The out of the box stuff is great and custom filters and directives are just such a powerful option.

And then there’s the documentation. While the documentation is mostly correct, and they provide some form of documentation for pretty much everything in the library, none of the documentation is great. It often reads like it’s written by an Angular engineer who’s been tasked with writing documentation- technically correct, but often bare-bones and written from an insider’s or experts perspective. For an example of the latter see the usage of the word “predicate” in the documentation of orderBy. Quick show of hands- how many of you know what that means? Obviously some of you will, but many of the self-taught hackers that populate the web developer sphere won’t and the documentation suffers because it often errs on the side of the experts.2

1. It can also accept a more complicated Angular expression or a function reference.
2. They promise it’s going to get better, so I’ll keep my fingers crossed, but I’ve been tempted to start an unofficial AngularJS documentation project on Github to do an end-around the 808 issues and counting in their issue queue (many of which are documentation PRs).

Posted in JavaScript | Tagged | 5 Comments

Front End Engineering Spectrum Poll Results

The results of my poll are in. Thanks to everyone who filled it out and shared it. It’s much appreciated and it gave me some insight into where we are in terms of roles, organizations size and maturity and, probably most interestingly to me, what we’re called on out business cards.

Let’s look at the results.

Describe Your Current Role

The Hybrid 25 11%
Soup to Nuts 37 17%
Full Stack 53 24%
Markup Master 2 1%
Front End Developer 107 48%

As defined here.

Obviously, this isn’t a scientific poll1 and based on my audience there are going to be some biases in the makeup of this sample.

That said, it’s heartening to see so many of you focused on core front end technologies.

Also, I’m surprised that there were so few Markup Masters out there. I’ve interviewed a few of them over the past couple of years. I guess they’ve all been nudged over to being Hybrids or Front End Developers.

I feel for all you Soup to Nuts people. Here’s hoping you aren’t spread too thin.

What is Your Current Job title

CTO 3 1.4%
Developer 12 5.6%
Director 5 2.3%
Front End Developer 31 14.4%
Front End Engineer 11 5.1%
Front End Web Developer 5 2.3%
Interface Developer 4 1.9%
PHP Developer 3 1.4%
Software Developer 11 5.1%
Software Engineer 19 8.8%
UI Developer 7 7%
Web Developer 35 16.2%
Other 70 32.4%

I was surprised by the prevalence of “Front End Web Developer.” It makes sense, sure, but I was still surprised by the specificity of “web” being inserted in there.

The CTOs were all in smaller organizations (less than 50). It’s still nice to see people with the job title in this space, but I yearn for the day for a CTO who’s truly one of us at a big-time organization.

On that note, two of the Directors were from larger organizations (101-1000 and over 10000) so there’s light at the end of the tunnel. Let’s promote those guys.

Also, there was one VP :).

If you’re looking to standardize on something for your job titles, you should start with Developer as the foundation. It’s clearly the most common noun for what we do. I will say I was susprised to see the generic Web Developer title win out over something like Front End Developer. Not super surprised- plain old surprised.

Random notes from the Job Titles

There was only one Ninja2. To make up for it, there was a Kahuna.

There were only two people with JavaScript in their title. More people had PHP in their title than JavaScript. I don’t know what that means.

I was surprised to see only two people had Mobile in their title.

There were two Webmasters. Party like it’s 1999.

While cleaning up the data to do generic comparisons3 I learned that “Front-end” vs. “Front End” was a thing. I write Front End, but a lot of people hyphenate it. I don’t judge.

There was not one “Creative Technologist,” but we did have a “Computer Scientist.” That’s one in the win column. I’ve never liked the phrase Creative Technology. I don’t know where it came from or what it really means, so I’m pleased that it didn’t show up.

There were no Managers or Senior Managers. I’m mad at all the senior Sapient people I know who didn’t fill this out.4

How Old is Your Front End Engineering Team?

Less than 1 57 24%
1-3 96 40%
4-7 45 19%
More than 7 40 17%

I knew the results for this one were going to stink. I chose 7 years because that was just about when Ajax was everywhere and forward looking companies would have had at least a chance of putting a focused team together. Unfortunately, not many of them did.

The teams in the poll were much younger, with the majority being less than 3 years old5. Knowing from firsthand experience what it looks like with a mature team and what it looks like with an immature team I can say, without hesitation having some maturity in your overall team is a godsend. It allows you create world class solutions and creates a professional, supportive structure for front end engineers. It also allows them to operate at a very high level even when key members leave. People are automatically groomed to step up.

Having to build up those structures can take a while, so organizations with more experience are going to have a real advantage.

Organizations with more maturity are also more appealing to work for because there’s a track record you can point to in the recruiting process. A lot of people say things like “this is what we want to do” when trying to hire talent in this space. Speaking from experience, there’s a big difference between aspirational talk and talk based on real-world results. A group that has already proven it’s worth is a much easier place to be than one where the value top front end engineering is still an iffy proposition. Building everything from scratch can be fun, but it’s not automatically so.

How Large is Your Front End Engineering Team?

0 (You Don’t Specialize) 33 14%
1 35 15%
2-5 110 46%
6-10 23 10%
11-25 18 8%
26-100 7 3%
100 or more 12 5%

I don’t know that there’s much to gain from this chart other than my concern with the prevalence of people who don’t specialize. What we do is hard to do at a high level right now and pawning it off on someone who’s also doing Java or design or… whatever doesn’t seem like the best idea to me. I know there are exceptions and I’ll have to analyze the data a little bit more to see if these are all shops, but it still concerns me.

I’m going to play around with this data versus the size of the organization to see if there’s something that shakes out there. Obviously a five person team in a ten person organization is more interesting to me and a five person team in an organization with more than ten thousand employees.


That’s what I’ve got. If you’d like, you can look at the full results. Feel free to share anything you notice in the comments.

I’m also going to follow up with an opinion piece that’s been brewing for a while. The results of this poll solidify the thought behind it, so the time to write it is now. Check back for that in maybe a week or two.


  1. as I am not a scientist, although I do like this Guided by Voices song 

  2. an HTML5 Ninja even 

  3. comparing titles without “Senior”, “Junior” or “Principal”, etc 

  4. I’m taking my ball and going home now 

  5. Which coincides nicely with the HTML5 era 

Posted in Web | Tagged , , | Leave a comment

I’m Presenting on Data Visualization at the Boston Front End Developers Meetup May 22

Since Pascal already sent out the email, you heard it here second. I’m doing my Data Visualization presentation at the Boston Front End Developers on May 22nd. As of this writing (on a Sunday morning) almost 80 spots are filled. At this pace they won’t stay open for long so sign up and watch me enthuse about SVG, Canvas and a special surprise guest technology.

Hope to see you there (and then at Trade afterwards.)

Posted in Web | Tagged , , | Leave a comment

Please Fill Out My Front End Engineering Roles Poll

As you may know, I’ve spent some time thinking about front end engineering at a higher level than just the code that we write and the technologies that we use. I’ve written about what we do both in terms of the flavors of front end developers that exist and in terms of the roles that we slot into at work.

The two posts on the subject are:

The Front End Engineering Spectrum- The Three Generic Types of Front End Engineers
and
The Front End Engineering Spectrum: The Roles

Check them out, I think they’re pretty cool.

These posts have resurfaced a couple of times recently and in reviewing them I thought it would be interesting to see where people’s experience plots against those roles.

To that end, I made a quick poll.

If you’re the “front end” guy or gal at your job, please fill it out. It will only take a minute

Check back here May 20th when I’ll share the results. The poll will close next Thursday, May 16th at 11:59 Eastern time.

Fill it out below, or if the form isn’t loading, at this link.

Also, please share it far and wide!

Posted in Web | Tagged | 1 Comment

Windows Apps for Web and Front End Developers

Spurred on by this post by Rey Bango, I thought I’d share some of the tools I’m using myself when working on Windows. Rey’s post is great, but since Window-based developers are under-served by the community (even though there are a lot of us) I figured it couldn’t hurt to add my own options. These are almost all in addition to the tools Rey mentions as I use a lot of the same tools in his post.

Visual Studio 2012

As I mentioned, I’m going to try to avoid a lot of repetition of Rey’s options in this post (which is why you won’t see Sublime Text mentioned, even though it’s #3 in my code editor triumvirate.) Still, I feel like I have to add in my two cents on VS2012. One of the weird things about the web developer community is that, as a whole, we recognize that the tools we have aren’t as good as they should be. Some of this stuff is hard to do right or do efficiently and doing both is often the domain of the real experts. Then, in the very next breath, some folks will pile onto Microsoft and Adobe with as much vitriol as they can manage. The thing is, and this is something you pick up pretty quickly when you start to work with XAML, Silverlight and Flex refugees on the open web stack, Adobe and Microsoft created pretty sweet tools and APIs. People could get their jobs done. No, they weren’t perfect but their developers felt empowered. It’s surprising that they stick around at all, after they see what our ragtag band has to offer.

VS2012 is one of those tools. Yes, it costs money. Yes, it only runs on Windows. Yes, it’s a multi-GB install. No, it has no street cred. All that said, even out of the box it’s a powerful editor for web tech and, if you take the time to configure it properly it’s ridiculous.

I’ve been using this more and more recently.

Adobe Dreamweaver

This isn’t necessarily a Windows-only thing, of course. But still, it’s worth pointing out as Dreamweaver gets a bad rap.

Yes, it’s a WYSIWYG editor that people have made awful things with for 15 years and people disparage “Dreamweaver developers” as people who don’t know how to hand-code anything.

The thing is, while it can be those things, it’s also pretty great. From the beginning (FWIW, the first version I used, 1.2, came out in 1998), Dreamweaver has embraced and understood JavaScript in ways that other editors only started to recently. Dreamweaver extensions are written in JS so JavaScript isn’t some add-on, it’s core to the product. It’s also the heir of HomeSite, the great web-centric text editor that was my bread and butter for nearly the entire 2000s.

While it’s still got WYSIWYG features aplenty, it’s a fine, configurable editor with great code hinting, excellent site management tools and plenty of opportunities for automation. Mixed with Adobe Fireworks, you can smoothly move between graphics files and your web editor for even more webtastic power. My go-to editor at home where I’m running CS6.

I love being able to open an HTML document and having the full context of the attached files available when I’m editing. You always remain in the context of the HTML page, even when you’re switching back and forth between the attached JavaScript and CSS files.

TextPad

My utility text editor. If I need to open and manipulate a big text file on Windows I do it with TextPad.

MarkdownPad

A great editor for Markdown files. Buy the $15 license and get support for Github flavored markdown right on your Windows desktop.

Paint.net

I run CS6 at home. Having a big monitor, mouse, scanner, etc. make for a better experience with my CS6 Creative Cloud subscription. That said, I have a Lenovo Yoga that I spend a lot of time on and having Paint.net on it for basic image manipulation. It’s a great image editing app. It’s not a Photoshop replacement but for an image editing utility it can’t be beat.

Minimalist GNU for Windows/Minimal SYStem

If you’ve installed Git for Windows, you’ll know these projects as “Git Bash.” While I’m a fan of Powershell and pin it to my taskbar, I’m glad to have this scaled down Bash prompt available to me as well. It’s surprisingly robust.

WinSCP

I’ve just started using this tool as a replacement for FileZilla and like it. The difference maker for me is that the local window is just an Explorer window, which means that all the customization I have on the Explorer context menu are available right in the WinSCP interface. When you’re trying to put out a fire, it’s a big deal to be able to fall back on consistent patterns (right click> open in Sublime Text, for example)

WinMerge

I don’t get bent out of shape with conflicts because I’ve got WinMerge. It’s just good software.

Mongoose

While I’m as happy to spin up a node server to test locally as the next guy, double clicking a file to start up a quick web server is super convenient. No command line needed. Drop mongoose.exe in a folder, double click and you’re good to go. Pretty sweet little app.

7 Zip

The Swiss Army knife for compressed files.

Java, Ruby, Perl, Python, and Node installed and on my path

Many doors open up if you’ve got common programming languages installed and on your path. I’ve obviously made good use of Java over the years, but I commonly use Node, Python, and even Ruby tools.

S3Fox

While much of the work I do with Amazon S3 and Cloudfront is automated, occasionally you need to get up there and poke around. S3Fox adds an FTP style interface for AWS right into a Firefox tab.


Those are my additions to the Windows web dev canon. What else is out there? What are we missing?

Posted in Web | Tagged , , , | 1 Comment

My Slides from HTML5DevConf, Now with 100% More Browsing (and Photos)

let's do this

My slides from HTML5DevConf are now up for viewing on Github pages, so you don’t even need to type node web-server.js to view them. There’s one hitch where svgz files aren’t rendering, but I’m not going to worry about that right now. If, in the interim, you really want to see that image, you can grab it from the repo.

There should be video at some point in the future. When there is, I will be sure to let you all know.

I’m also going to be giving this talk at the Boston Front End Developers meetup in May. I’ll be sure to share that as well, once the meetup announcement is online.

I presented in twin peaks

ready to go

Posted in Web | Tagged , , , , , , | Leave a comment

Quick Note: I’ve Got a Few Posts on Amazon’s tech.book(store)

I’ve written three articles for them. The first two are up now:

Recommended HTML5 and Open Web Platform Books

In which I recommend books that I think are pretty good for HTML5 and general front end engineering.

Spoiler alert! I recommend my own book. I happen to think it’s pretty good so I’m not going to apologize :)

The Modern State of Web Browsers

In which I talk about the current browser landscape. A post which was rendered a little bit out-of-date a week later when Google announced Blink. On the other hand, my concerns about Opera, outlined in the article, have already been addressed. Blink replaces Presto in the rendering engine landscape and creates a more powerful alternative to Webkit than Presto was ever going to be. Boom! Webkit monoculture averted.

I’ve got one more post ready to go, I’m assuming it will drop next week. I’ll be sure to share when it does.

Posted in Web | Tagged , , , , | Leave a comment

Sure, It’s 5 Months Too Late for the Contest, BUT.. I Finally Did Something with the Hubway Data

hubway-static

The Hubway Data Visualization Challenge was a contest run using the data released by the local bike share. I really wanted to do something for the contest and even started a project in October to try to do something with it.

You know how that turned out

Anyway, between finding myself with a life that I can fill occasionally with fun programming and the need to do some cool visualizations for my presentation at HTML5 Developer Conference, I resurrected the project and managed to finish the thing over a weekend.

What did I do?

The image above shows a snapshot of the final output. What does it show?

  • The top ten Hubway departure points mapped against their top ten destinations.
  • Google is queried for each departure/arrival pair to create a “bike-friendly” route between the two points.
  • This is then plotted on the map using one color for each departure station. The size of the line is directly proportional to the number of trips for each departure and arrival pair.
  • Every line is 40% opaque, so the darker the path on a particular road, the more different trips pass over that road.
  • The bicycling layer is turned on, to show bicycle infrastructure. So basically, thick dark lines on top of a bike path = a good match for usage and infrastructure*.

*Theoretically. As the following table shows, the “bike friendly” route is not always the most direct. What I did here was calculate the correlation between the distance between the two latitude and longitude points in a straight line and the distance as calculated by the Google directions service. As you can see, some of the routes are 2x as far as the flying crow when approached on a bike-friendly route.

Boston Public Library – 700 Boylston St. The Esplanade – Beacon St. at Arlington St. 2.13
Boylston St. at Arlington St. Charles Circle – Charles St. at Cambridge St. 2.04
Boylston St. at Arlington St. TD Garden – Legends Way 1.98
Charles Circle – Charles St. at Cambridge St. TD Garden – Legends Way 1.93
Lewis Wharf – Atlantic Ave. Aquarium Station – 200 Atlantic Ave. 1.87
TD Garden – Legends Way Boylston St. at Arlington St. 1.85
Boston Public Library – 700 Boylston St. Charles Circle – Charles St. at Cambridge St. 1.83
Charles Circle – Charles St. at Cambridge St. Boston Public Library – 700 Boylston St. 1.83
Charles Circle – Charles St. at Cambridge St. The Esplanade – Beacon St. at Arlington St. 1.75
Charles Circle – Charles St. at Cambridge St. Stuart St. at Charles St. 1.74
Kenmore Square / Comm Ave Boylston St. at Arlington St. 1.66
Charles Circle – Charles St. at Cambridge St. Boylston St. at Arlington St. 1.57
Kenmore Square / Comm Ave Newbury St / Hereford St. 1.57
TD Garden – Legends Way Post Office Square 1.56
Kenmore Square / Comm Ave Charles Circle – Charles St. at Cambridge St. 1.51
Kenmore Square / Comm Ave The Esplanade – Beacon St. at Arlington St. 1.5
Boylston St. at Arlington St. Boston Public Library – 700 Boylston St. 1.49
Newbury St. / Hereford St. Charles Circle – Charles St. at Cambridge St. 1.47
Lewis Wharf – Atlantic Ave. TD Garden – Legends Way 1.46
Lewis Wharf – Atlantic Ave. Fanueil Hall – Union St. at North St. 1.46
Beacon St. / Mass Ave. Boylston St. at Arlington St. 1.45
Lewis Wharf – Atlantic Ave. Post Office Square 1.45
Newbury St. / Hereford St. Washington St. at Rutland St. Boston 1.45
South Station TD Garden 1.44
Newbury St. / Hereford St. Yawkey Way at Boylston St. 1.44
Back Bay / South End Station Prudential Center / Belvidere 1.43
Boylston St. at Arlington St. Kenmore Sq. /Comm Ave 1.42
Lewis Wharf – Atlantic Ave. South Station – 700 Atlantic Ave. 1.4
South Station Seaport Hotel 1.39
TD Garden – Legends Way South Station – 700 Atlantic Ave. 1.38
TD Garden – Legends Way Faneuil Hall – Union St. at North St. 1.38
Boylston St. at Arlington St. Mayor Thomas M. Menino – Government Center 1.38
Back Bay / South End Station Christian Science Plaza 1.38
Boston Public Library – 700 Boylston St. Fanueil Hall – Union St. at North St. 1.36
Back Bay / South End Station Boston Medical Center – 721 Mass. Ave 1.36
Lewis Wharf – Atlantic Ave. Rowes Wharf – Atlantic Ave 1.36
Boston Public Library – 700 Boylston St. Beacon St. / Mass Ave 1.35
Beacon St. / Mass Ave. Boston Public Library – 700 Boylston St. 1.35
Back Bay / South End Station Washington St. at Rutland St. Boston 1.34
Boston Public Library – 700 Boylston St. Tremont St. / West St. 1.33
Beacon St. / Mass Ave. TD Garden – Legends Way 1.33
TD Garden – Legends Way Aquarium Station – 200 Atlantic Ave. 1.32
South Station Cross St. at Hanover St. 1.31
South Station Boylston St. at Arlington St. 1.31
Newbury St. / Hereford St. Landmark Centre 1.31
TD Garden – Legends Way Summer St. / Arch St. 1.3
Newbury St. / Hereford St. Kenmore Sq / Comm Ave. 1.29
Charles Circle – Charles St. at Cambridge St. Beacon St / Mass Ave 1.28
Back Bay / South End Station Stuart St. at Charles St. 1.28
Beacon St. / Mass Ave. Charles Circle – Charles St. at Cambridge St. 1.28
South Station Boylston St. / Berkeley St. 1.27
Lewis Wharf – Atlantic Ave. Congress / Sleeper 1.26
Back Bay / South End Station Tremont St / W Newton St. 1.25
Lewis Wharf – Atlantic Ave. Seaport Square – Seaport Blvd. at Boston Wharf 1.25
Boston Public Library – 700 Boylston St. Stuart St. at Charles St. 1.22
Boylston St. at Arlington St. Rowes Wharf – Atlantic Ave. 1.22
Back Bay / South End Station Washington St. at Waltham St. 1.22
Charles Circle – Charles St. at Cambridge St. Kenmore Sq / Comm Ave 1.22
Beacon St. / Mass Ave. The Esplanade – Beacon St. at Arlington St. 1.22
Kenmore Square / Comm Ave Boston Public Library – 700 Boylston St. 1.21
South Station Boston Public Library – 700 Boylston St. 1.2
Boston Public Library – 700 Boylston St. Newbury St. / Hereford St. 1.19
Newbury St. / Hereford St. Boston Public Library – 700 Boylston St. 1.19
South Station Lewis Wharf – Atlantic Ave 1.17
South Station Aquarium Station – 200 Atlantic Ave. 1.17
TD Garden – Legends Way Rowes Wharf – Atlantic Ave. 1.17
Lewis Wharf – Atlantic Ave. Chinatown Gate Plaza – Surface Rd. at Beach St. 1.17
Charles Circle – Charles St. at Cambridge St. Cross St. at Hanover St. 1.16
TD Garden – Legends Way Congress/Sleeper 1.15
Newbury St. / Hereford St. Stuart St. at Charles St. 1.15
Boylston St. at Arlington St. Tremont St. / West St. 1.13
TD Garden – Legends Way Seaport Square – Seaport Blvd. at Boston Wharf 1.11
Back Bay / South End Station Columbus Ave. at Mass Ave. 1.11
Charles Circle – Charles St. at Cambridge St. Mayor Thomas M. Menino – Government Center 1.11
Beacon St. / Mass Ave. Boylston / Mass Ave 1.11
Newbury St. / Hereford St. Packard’s Corner – Comm Ave. at Brighton Ave. 1.11
Kenmore Square / Comm Ave Landmark Centre 1.09
South Station Rowes Wharf – Atlantic Ave. 1.08
Back Bay / South End Station Roxbury Crossing Station 1.07
Beacon St. / Mass Ave. MIT at Mass Ave / Amherst St. 1.07
Newbury St. / Hereford St. Boylston St. at Arlington St. 1.07
Boston Public Library – 700 Boylston St. South Station – 700 Atlantic Ave. 1.06
Boston Public Library – 700 Boylston St. Boylston St. at Arlington St. 1.06
Boylston St. at Arlington St. Newbury St. / Hereford St. 1.06
Boylston St. at Arlington St. South Station – 700 Atlantic Ave. 1.04
Beacon St. / Mass Ave. Christian Science Plaza 1.02
Beacon St. / Mass Ave. Kenmore Sq. / Comm Ave 1.01
Kenmore Square / Comm Ave Agganis Arena – 925 Comm. Ave. 1
Kenmore Square / Comm Ave B.U. Central – 725 Comm Ave 1
Kenmore Square / Comm Ave Packard’s Corner – Comm. Ave at Brighton Ave. 1

The intent is to highlight where bicycle infrastructure can be improved in the city- especially for the presumably inexperienced cyclists on Hubway machines.

I’ll follow up with a post on the technical implementation shortly. In the interim, check out the code on Github

Posted in JavaScript | Tagged , , , | Leave a comment

Beginning HTML and CSS is O-U-T

I’ve mentioned it on Google+ and Twitter. I should probably mention it here: Beginning HTML and CSS is out. It came out yesterday.

Here’s proof:

20130311_162525

The book looks great. I’m really happy with it.

Are there things I wish I could redo? Sure. Of course. But overall, based on what I had to work with in terms of existing material, time and other obligations, I don’t think I could improve on what’s on the shelves in any significant way.

I’m very proud of the introduction to jQuery chapter. It was written towards the end of the book and was one of the things I was most interested in writing when I started the project. I think the combination of my own interest in the subject and the fact that I had a solid foundation of cranking out 2-4 pages a day for months at a time made for some really good writing. Easy writing to do, but still pretty good.

If you’re a novice web programmer or an experienced programmer who has never used HTML,CSS and JavaScript to build a web front end, I really think this book will be an invaluable guide to get you up and running.

The Next One

Both books I’ve written (and the other book I was writing that got shelved) have had other authors involved. With Professional jQuery I came in, late in the project, with the goal of finishing it off. I spent the whole time on that book reacting to what was there. I think I did some good work there, but it’s not the book I would write if the project were 100% mine. I would have approached it differently from the first chapter. And even putting structure aside, the chapters that I normally would be most interested in writing (the chapters introducing the jQuery API) were already done when I started in on the book. It was a great experience, just not an optimal one.

This book had existing material as well, so I was once again reacting to the structure and content that was already there. The good thing about this experience is that I was able to use what I wanted and had carte blanche to tear things apart if I felt like it would make a better book.

So, with all that in mind, the next book I write is going to be mine from the ground up. That’s really important to me. While I’ll always listen to opportunities in this space, and I try not to say “never” (although… I’d really to say that I’m never using ExtJS again and know that it will be the gospel truth;) I really don’t want to go through this process again unless the book is wholly mine. Too much is invested in this kind of work to not be able to steer the content to the greatest possible degree. Obviously, writing books is collaborative and I’m not just being polite when I thank all the people involved (notably Carol Long, Katherine Burt and Dan Maharry here) there’s still a level of control I’ve yet to achieve having never truly been the sole author of one of these things.

I’d like to do that.

I’d also like it to be shorter. I’d love to write a thinner volume since it’s difficult to maintain book writing pace over a long period of time. 2-300 pages sounds pretty good to me right now.

Not that I know what it would be.

(Rob runs off to think about the next thing)

Posted in CSS, HTML, JavaScript | Tagged , , , , | Leave a comment

If You Want to Share Code, Please Add a License

This has come up a few times recently (example), so I thought I’d point it out here for all the world to see.

If you’re sharing code on a blog, Github or anywhere else you think people might find it and want to use it, please license it in some way. If you don’t, it won’t be used the in the way you might want and expect.

Let me explain.

Many organizations are friendly to open source software. As a consultant and “agency dude”, I’ve seen far more companies that were happy to use open source software than companies who were completely freaked out by the prospect (although I have seen a few completely dysfunctional organizations that wanted to pay money for horrible solutions just because they had the fear.) This is a good thing because 10-15 years ago that wasn’t the case.

The thing is, and it seems some people don’t know this, unless you explicitly license your code, your software isn’t magically open source or free to use.

The lack of a copyright notice or license doesn’t mean you don’t have a copyright on it.

It is, in fact, the complete opposite.

In all countries where the Berne Convention standards apply, when you make software you automatically own all the rights to that software- even if your intent is for it to be free for everyone to use and you hate the very idea of software patents or copyright. Without a license allowing people to use your code within acceptable guidelines you are the only person that has a legal right to use it. While you probably won’t turn around and sue everybody that uses your code (because hey, you’re cool and you wanted to share it with everyone in the first place), there’s also nothing stopping you from changing your mind later and sending out nastygrams asking for big bucks from everyone who ever even sniffed at the code. Right or wrong, that would be your legal right.

And that’s why we need licenses. Any organization (or, really, individual developer) with any sense is going to steer clear of a situation where they might end up having to call their lawyers. Using software without explicit permission is exactly one of those situations.

So, if you’re doing anything that people might find interesting please think about how you’d like to see it used and add a license.

I use what’s commonly referred to as the MIT license because I can understand it and it allows people to do whatever they want with my code.

You might want to choose something else.

That’s cool, as long as you make a choice and let the rest of us know about it :)

Posted in Web | Tagged , | 2 Comments