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

Posted on by Rob Larsen

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.

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

Posted on by Rob Larsen

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

Beginning HTML and CSS is O-U-T

Posted on by Rob Larsen

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)

If You Want to Share Code, Please Add a License

Posted on by Rob Larsen

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 🙂

H5BP Ant Build Script v1.0 Released

Posted on by Rob Larsen

After a year of living as its own repo, contributions from a bunch of people and a flurry of activity from yours truly over the past month*, I just released the 1.0 version of the H5BP Ant Build Script.

Download a zip or browse the code on github.

Moving to semantic versioning was a good idea by itself and it also served as a perfect opportunity to celebrate the features we’ve been able to add over the past year.

Check out these highlights from the changelog:

– Added support for SASS (*.scss) files (#71)
– Added optional jsdoc3 task (#70)
– Added option to compile LESS CSS (#56)
– Concatenate scripts in order they appear in the HTML (#6)
– Added requireJS support (#18)
– Added sample QUnit Task (#133)
– Added ability to opimize images in multiple directories
– Added advpng optimization (#84)
– Added optional image revving (#135, #3)
– Rewrite relative CSS asset urls when inlining @import calls (#2)
– Added HTML Validation (#27)
– Added new, configurable tokens for concatenation (#95)
– Added async and defer as separate options on the script. (#128)
– Added optional progressive jpeg conversion

I also touched up the documentation and generally made it feel more like a project.

Here’s the big contributor party. This is everyone who’s touched this project from the beginning (including its life as part of the core HTML5 Boilerplate project.)

All these people are awesome:

[master]> git shortlog -s -n
   115  Rob Larsen
    84  Paul Irish
    31  Divya Manian
    14  paulirish
    13  Shi Chuan
    11  darktable
    10  Matthew Donoughe
    10  Samus_
     8  Joe Morgan
     6  Andreas Marschke
     6  calvin
     5  Chris Rowe
     5  Ziggy
     4  Audioname
     4  Daniel Holth
     4  Guillaume Moulin
     3  Kim Blomqvist
     3  bholt
     3  drublic
     2  Andrew Le
     2  Beau Simensen
     2  Calvin Rien
     2  Dan Lopretto
     2  Daniel Filho
     2  John Bacon
     2  Kushal Pisavadia
     2  Maurice W
     2  Ramiro Rikkert
     2  See Guo Lin
     2  Steve Lindstrom
     2  Tarcio Saraiva
     2  alvincrespo
     2  gbakernet
     1  AD7six
     1  Aaron Kavlie
     1  Adrien Kohlbecker
     1  Alex Whitman
     1  Brandon Holtsclaw
     1  Bruno De Barros
     1  Chris Hager
     1  Chris Morrell
     1  Corey Ward
     1  Daniel Reiser
     1  Dave Kirk
     1  Dmitry Gladkov
     1  Egor Kotlyarov
     1  Greg Zoller
     1  Gregory Pakosz
     1  Hans
     1  Jeremey Hustman
     1  John Attebury
     1  Josh Farneman
     1  Kyle Robinson Young
     1  Martin Balfanz
     1  Nic Pottier
     1  Nicholas Camp
     1  Nicolas Gallagher
     1  Robert Doucette
     1  Rutger de Knijf
     1  Taylor Ralston
     1  Tharique Azeez
     1  Thomas Kahn
     1  crappish
     1  d8uv
     1  dplesca
     1  elexx
     1  localpcguy
     1  mikemorris
     1  mikkotikkanen
     1  owilliams
     1  philipvonbargen
     1  rdeknijf
     1  rwldrn
     1  toddhgardner
(END)

*yes, I have a funny way of celebrating having a life again.