The Angular 2.0 preview roadmap was recently posted to HN and after reading it, I’m starting to think adopting Angular might have been a mistake.

Having built a few small projects with AngularJS, I’ve found the framework a pleasure to work with. Once past the initial learning curve, features started flying together. Most of my trouble-shooting time was spent getting backend data delivered correctly, Angular just worked. Based on this positive experience, I’ve been moving towards adopting Angular as the standard frontend of my web toolkit.

Choosing Angular wasn’t without doubts. Introducing this many new conventions, syntaxes and practices doesn’t come without a cost. The problem with re-invention is longevity: Either these new ideas succeed and become the norm, or they’re left for dead on the side of the road as technology marches on.

Parts of the 2.0 roadmap sound great. But it also sounds as if this future Angular will be very different from the Angular we know now.

How big is this rewrite?

Huge revisions rarely end well. From-scratch rewrites have famously been called the “single worst strategic mistake that any software company can make.” The goals always sound noble and the plans make sense, but by definition, engineering resources will be split between maintaining the original version and developing its successor. Either the original suffers or the rewrite falls behind or both.

Does a revision of this scale imply that the current codebase is impossible to maintain? I’ve looked through some of Angular’s source code, there’s some near-magic craziness in there. Is it too crazy?

If the Angular team doubts their own code and will presumably move towards conventions used in competing frameworks, wouldn’t it be smarter for users to jump ship now for those other tools? Competing codebases automatically become more mature if Angular basically starts over.

Questions about backwards compatibility

Regarding porting from Angular 1.2.x, the devs imagine “porting will be fairly straightforward but not free.” The arrogance of this position makes me doubt Angular more than anything else. The JavaScript world is ruthlessly forward-looking and moves very, very quickly. If upgrading to 2.0 is only moderately less painful than switching to another framework, Angular is doomed.

Angular blindsided many enterprise users in December 2013 when they announced they were dropping support for IE8. Even without API changes, jQuery’s usage statistics show their ie8-incompatible 2.0 branch is seeing dismal adoption rates. Python 3’s breaking changes have been a disaster for their mindshare. PHP’s dogged insistence on keeping nasty old code working is likely a factor in that language’s recent renaissance. Existing Angular code should probably be considered end-of-life.

Documentation fragmentation

Angular’s documentation has been a problem area for years. There’s no reason to believe documentation won’t lag behind again if the core functionality of Angular is significantly changed.

Outside resources and tutorials are a different problem. Most won’t be re-written, and search results will end up polluted with out-of-date information.

Google’s track record

When it comes to supporting technology, Google is phenomenally undependable. They’ve acquired and demolished a ton of popular web products (Reader, FeedBurner, Blogger, Picnik, Buzz, Wave, “Don’t be evil”, etc.). The only thing they’ve stuck with is the horrid Google+ monstrosity. Google’s support for the Angular project was initially an argument in favor of adoption, but really, the Google name is neutral at best and almost a negative. At least the Angular source code is open source and out in the wild.

And then there’s AngularDart. Google’s Dart meta-language seems kind of stupid to me, but for the most part, so does CoffeeScript (though my resolve is weakening). At very least Dart feels like one of those throwaway side-projects that a rogue team of Google super-geniuses put together–I don’t expect it will have a long life. Dart aside, the bigger question is the resource-cost of supporting a large, complex framework across several languages/dialects. This lack of focus doesn’t build confidence.

What’s next

I’ve really enjoyed working with Angular, but I’m doubtful for its future. Over the years I’ve seen too many great products die from rewrites or overly ambitious direction changes. The first Great JavaScript Awakening saw dozens of libraries before jQuery eventually won out. I hope I’m wrong, but I’m going to be looking at Backbone again, as well as React, Mithril and anything else to fall back upon if Angular proves to be a dead end.

Joe Maller
March, 2014

cross-posted here: https://gist.github.com/joemaller/9643049

I’m a very happy user of Toodledo, it’s almost always open on my computer and syncs with Appigo Todo on my iPhone.

I recently suggested that links in task item notes should open in new windows, or at least they should add the option to choose that behavior. Toodledo responded that they originally had this, but some people wanted every link to open in a new window, while others wanted subsequent links to recycle the new window. With both camps complaining, they just removed targets from the links altogether.

Anyway, here are two bookmarklets for Toodledo. Clicking these will modify the task note links to open in a different window.

• Open each task note link in a new window: ✔
• Open task note links in a reusable window: ✔°

Note: You will need to click this each time you load the page, or add a new item. Yes it’s clumsy, but this is only a band-aid until Toodledo adds the feature.

Those little search bubbles that popup on the New York Times website whenever you select text really annoy me. Clicking this bookmarklet on any NYTimes page will prevent them from appearing:

NYTfix

This is a 2-minute solution, there’s no domain checking or anything, all it does is remove existing bubbles then cancel the document’s mouseup observer, which the NYTimes site uses to trigger the search balloons. The bookmarklet was very quickly checked in Safari, Firefox and IE8, NYTimes text selection doesn’t work at all for me in IE6 or IE7.

The main iTransmogrify! script has been updated with a bunch of new functionality:

• YouTube.com pages are now supported (see notes)
• Daily Motion videos are supported for new-style urls (see notes)
• Kink.fm player and listings page are now supported
• Sideload.com play links are now supported
• WordPress Blogs using Viper Video QuickTags are supported for YouTube
• All media links now open into new windows, so you won’t have to re-transmogrify a page with several media files after playing one. Note that this is dependent on the iPhone, sometimes it will blank other windows)
• Some content in iframes will now be converted.
• MotionBox, Viddler and Vimeo embedded videos, while not supporting iPod/iPhone alternate content, now link to their respective detail pages.

The main bookmarklet code was updated. This was necessary to workaround a frustrating oversight with Google Code hosting. Everyone will need to update their bookmarklet, in the future all updates will be automatic.

This has turned out to be far bigger than I ever imagined. Thank you to everyone for the links, feedback, compliments and ideas.

Known issues

LiveJournal pages redefine a bunch of core JavaScript functionality, breaking all kinds of stuff including jQuery. Additionally, they’re serving media in an iframe from a different domain, meaning JavaScript couldn’t access the frame even if they hadn’t broken it.

Notes

YouTube Internal pages
Because of a strange iPhone quirk, these links all need to go through the Google redirector, otherwise they bounce back to uk.youtube.com instead of playing.

DailyMotion
DailyMotion videos using new-style urls, which are usually about six digits long, work correctly. Videos using the old-style alphanumeric ID do not work yet. I’m probably just going to resort to building a simple web-service to grab those. Additionally, there is no way to programatically access the mp4 alternate content url, so I just linked to their iPhone pages. I’d prefer embedding QuickTime directly, but it’s just not possible yet.

iTransmogrify! is a bookmarklet for iPhone which transforms embedded Flash content into direct links to natively supported formats. That means YouTube videos and MP3s can now be played from the iPhone’s Safari web browser with just a few clicks.

Seeing it work is the best explanation:

On an iPhone? Try it now: iTransmogrify! (works in Safari and Firefox too)

Sorry, it took YouTube a long time to re-encode that for iPhone, here’s a baby panda:

Installation

To install the bookmarklet, just drag the link to your Safari or Firefox Bookmarks, IE users should right click and choose “Add To Favorites…” After adding the link, sync your iPhone.

Grab it now: iTransmogrify!

You can also add iTransmogrify from your iPhone!

More information, source code and bug-tracking is available on the iTransmogrify Google Code page.

Currently supported content:
• Default YouTube Object-Embed code
• YouTube bare Embed
• YouTube bare Object
• A variety of Flash-based MP3 players including Digg Podcasts

Lots more added: iTransmogrify update

Support for other embedded media sites will be added as I figure them out. Please report broken sites or suggest additional sources using Google Code issue tracker.

Acknowledgements

The first robust, script insertion bookmarklets I ever saw was Sumaato’s original Flickr GeoCoding bookmarklet.

Other sites also deserving links:

• Jan Wolter’s Dynamic Script Loading
• Andrew Sumin’s Modularity in JavaScript
• Mike West’s Scope in JavaScript was the refresher I needed to resolve one especially annoying object-scope bug.

iPhone graphic reference:

• iPhone Graphics locations
• Huge iPhone icons

Also, John Resig’s amazing jQuery JavaScript library. This project was the excuse I’d been looking for to finally dig in and learn it.

The name came from a late-night brainstorming chat with Bruce and was far more fun and interesting than the utilitarian ones I was thinking of. So thank you Bruce, and of course, Bill Watterson.

Valerio Proietti, author of the MooTools JavaScript framework wrote a benchmarking tool called SlickSpeed. This tool runs a number of JavaScript libraries against a suite of CSS selector tests. The source is available from Google Code, I downloaded a copy so I could run tests against the most recent versions of Prototype, MooTools and JQuery against one another.

Results are in milliseconds (ms), smaller numbers are better. Asterisks indicate errors returned during the test.

All tests were served and run from a MacBook Pro 2.16 GHz Core Duo, iPhone tests were run on a 1st Generation 8 GB model. Firebug was disabled for the Firefox tests.

A few things which are immediately apparent:

MooTools is a solid performer. Not the fastest and not the slowest, but Valerio Proietti’s code is consistently impressive.

JQuery has gotten significantly faster in the most recent version, John Resig is also writing really good code.

At least as applies to Valerio’s set of selector tests, JQuery is the fastest library on iPhone, nearly twice as fast as MooTools and almost three times faster than Prototype. Joe Hewitt’s iUI project uses Prototype, how much would iPhone performance benefit from switching to JQuery?

The Webkit team is writing some seriously crazy speed optimizations. If they could just get Safari to stop leaking memory we’d be all set (don’t go looking all smug Firefox, you’re standing in a puddle). As it stands now, when Leopard ships Safari will have the fastest JavaScript engine available. The difference between jQuery and Prototype on Webkit and iPhone is surprising, iPhone runs JQuery nearly three times faster than Prototype using the same browser core.

Firefox runs faster in virtualized Windows than it does native on the Mac. Camino (Mac native version of Mozilla/Firefox/Gecko) was slightly faster, but still not as fast as Firefox Windows.

I’ve got one project wrapping up soon which used MooTools and I’ve been very happy with it. Lately I’ve been reading a lot of buzz about JQuery and might be working that into another project. These tests were mostly just done to satisfy my own of curiosity.

February 2011 Update: This post was originally published in 2007 and hasn’t aged well. For code snippet syntax coloring, I currently use Google’s Prettify script (prettify.js). The script is dynamically inserted by jQuery if there are code elements to style.

Recently I’ve been experimenting with two very different methods of syntax coloring source code in web pages. The first method uses a Dan Webb’s CodeHighlighter JavaScript library to convert appropriately tagged content into syntax colored code. It’s necessarily simple, but easily extensible. As an example, here are the CSS rules I’m using to style CodeHighlighter’s conversions:

code.html span.comment         { color: #999;}
code.html span.tag             { color: #07f;}
code.html span.string         { color: #080;}
code.html span.attribute     { color: #07f;}
code.html span.doctype         { color: #07f;}

code.css span.comment          {color: #999;}
code.css span.keywords         {color: #fd2;}
code.css span.selectors        {color: #0b0;}
code.css span.properties    {color: #66f;}
code.css span.units            {color: #33c;}
code.css span.urls            {color: #4a0;}

code.javascript span.comment     { color: #999; }
code.javascript span.brackets     { color: #07f; }
code.javascript span.string     { color: #4a0; }
code.javascript span.keywords     { color: #07f; }
code.javascript span.exp         { color: #808; }
code.javascript span.global     { color: #06e; }

The second method uses two more fantastic TextMate features, Create HTML From Selection and Create CSS from Current Theme. What these two commands do is translate exactly what I’m seeing in TextMate into very precise and valid XHTML with accompanying CSS rules. The main disadvantage of this is the weight of the code, the above 721 bytes of CSS converts to nearly 36k of HTML and CSS rules. It’s a seriously heavy pile of span tags, but the cost is immediately outweighed by 148 very specific reasons. And that’s just bundles, there are dozens of great themes too.

Aaron Quint also deservingly gushes over these two commands.

What these do is convert exactly what I’m seeing in TextMate into very precise and valid XHTML. Here’s the same CSS as above translated by TextMate:

code.html span.comment      { color: #999;}
code.html span.tag          { color: #07f;}
code.html span.string       { color: #080;}
code.html span.attribute    { color: #07f;}
code.html span.doctype      { color: #07f;}

code.css span.comment       { color: #999;}
code.css span.keywords      { color: #fd2;} 
code.css span.selectors     { color: #0b0;} 
code.css span.properties    { color: #66f;} 
code.css span.units         { color: #33c;} 
code.css span.urls          { color: #4a0;} 

code.javascript span.comment    { color: #999;}
code.javascript span.brackets   { color: #07f;}
code.javascript span.string     { color: #4a0;}
code.javascript span.keywords   { color: #07f;}
code.javascript span.exp        { color: #808;}
code.javascript span.global     { color: #06e;}

Just for the sake of comparison, below is a screenshot of how my code looks in TextMate. It’s not a perfect translation, but it’s a very good start:

One of the purported advantages of the JavaScript method is that the source code remains unchanged. That’s sort of true, but not really. The JavaScript functions work by inserting a bunch of spans, so by the time the user sees it the main difference between JavaScript converted code and pre-processed code from TextMate is the detail (and weight) of the TextMate result. Also, any HTML would need to have entities escaped which is another step and a further degradation of the original code.

The main advantage then becomes convenience. A simple block of code doesn’t need to be run through TextMate (on the off-chance I’m writing somewhere else), it can be entered directly and tagged for styling without breaking focus.