administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

JungleDragon Strategy Update »

FERDY CHRISTANT - SEP 26, 2014 (11:14:58 AM)

We're about to enter Q4 of 2014, so in this post I want to give a strategic update regarding JungleDragon, in particular discussing:

  • A temporary development break
  • A look-back on 1 year of JungleDragon V3
  • A peek at what lies ahead, JungleDragon V4

Development break

In the past year, I have put a lot of effort into further developing JungleDragon, by means of adding new features, improving existing features and solving bugs. As a result, I think we're now in a feature-rich, stable situation.

Although that does not mean that JungleDragon is done, it is never really is, I am hereby announcing a development break of a few months, in which I will do very little new feature development. This break will likely be until the end of the year, after which I will pick up development again next year.

The reason for this pause is largely practical. In Q4 I will have little time on my hands to do development, due to several other activities, which include travel, education for work and a few side projects. Needless to say, operationally JungleDragon will fully continue, and I'll also organize new contests, I just won't by developing new features for the remainder of the year.

As said, I think we're feature rich enough for this little break. I'm also hoping the break refreshes me in a way to take on new development next year. It's been a very busy year.

1 year of JungleDragon V3

JungleDragon V1 was launched in 2011, essentialy it was a general purpose photo sharing platform that happened to focus on nature. JungleDragon V2 introduced JungleDragon's killer feature: species identifications. To this day, it is the most important distinguishing feature that sets JungleDragon apart from any general purpose photo sharing platform.

JungleDragon V3, about a year in the making, implemented a complete redesign of the entire front-end. It featured a complete overhaul of every aspect of JungleDragon, making it responsive and usable on every modern device with a browser. The design itself was also renewed and photos were displayed larger and better. 

I am still proud of the V3 launch, it took a huge effort, and it has taught me a lot in responsive web development. The launch was 1 year ago, at October 1, 2013. From that moment until now, V3 has been further developed, non-stop. One year of continuous improvement and development has brought a lot to the table. Whilst each improvement may be modest, the combined progress is large.

Therefore, in this part of this strategy post, I'm going through those improvements, to showcase how much has happened in a single year. I warn you that this part will be long, likely only die-hard fans can absorb it :) Here goes...

The Oct 1, 2013 launch finally delivered what I have been writing about on the blog the year before whilst I was still developing it: a new design, a completely responsive front-end, and key improvements in photo viewing.

As the difference between V2 and V3 is so dramatic, soon a few initial fixes were applied. The 2nd update contained additional fixes, but also improved sharing and a brand new feature, OpenGraph support, allowing for richer sharing of JungleDragon content on social networks. The 3rd update applied some small tweaks to existing features. The 4th update restored the Socializer feature (automated sharing to social networks), and provided a few more fixes. These 4 post-launch updates all focused on stabilizing the brand new JungleDragon V3.

The next few weeks were spent on an important improvement: the photo uploader. Where before it was Flash-based, the new uploader was entirely built in HTML5. It beautifully displays the photos even before they are actually uploaded and has a very nice progress indicator. JungleDragon as of then was completely Flash-free, and as a result, all issues related to the earlier Flash implementation were no longer relevant.

In November I wrote a detailed post about JungleDragon's species system. Although it is the most important feature of JungleDragon, it was having problems in several areas:

  • There was no identification help
  • In case the automated species system (which relies on Wikipedia content) did not work, the alternative manual method of creating species was extremely painful.
  • Maintaining species records (editing them) was only possible by me, and only in a very hackish way.
  • The species browser had a major performance problem, it did not scale.

It took many many updates to resolve all these issues, and it has been the most painful, and most rewarding improvement throughout the year. It took me until january before I collected the courage to even start on it. However, the first January post was immediately a big one. It explains how through a complete rewiring of the data structure for species, the species browser was made to perform again. In addition, it introduced counters, that greatly aid in species browsing. There was an immediate follow-up post that addressed a few small bugs.

And then came a drastic change of course: I started opening up JungleDragon. The best decision I have ever made regarding JungleDragon. This first moderation announcement introduced a moderation panel and the first "power" given to moderators: the ability to promote photos to the homepage.

This was a revolution in a few ways. It hands out power to key JungleDragon members, improves democracy and reduces the reliability on solely myself. Everybody wins. This post was the ground work for opening up JungleDragon, sharing both powers and tasks with the community.

The 2nd moderation update combined 2 major improvements of the year:addressing issues in the species system and opening up JungleDragon to the community. In this update, moderators were given the power to translate species nodes (navigation entries in the species browser). It is of course an entirely voluntary task, but it is the first example of not only sharing power, but also sharing tasks with the community.

The 3rd moderation update added an even more powerful ability: it allowed moderators to edit species records themselves, any of the many fields that populate a species record. In practice, to this day it works very well, it is heavily used, and I am proud of the moderators for doing so. Finally, this part was not only shared, it also had an actual user interface, instead of just me hacking into a database panel.

The 4th update went even further. It finally addressed one of the most painful processes of JungleDragon: manually creating species (in case Wikipedia automation fails). For the first time, normal users could request manual species creation, and for the first time, moderators could create such manual species themselves. With a proper process and user interface.

The 5th update introduced a new feature: species help. Where before useful species identification sites were scattered across the site, they are now neatly collected and categorized in a single place, called the "Guide". And as with other species management features, this one is open for moderation. Moderators can add sites.

The 6th update was a small one, it introduced a shortcut to the species browser, using custom-made icons. Finally, the 7th update restored the species search feature.

And with that, I declared the new species system complete. The enormous challenges it had were fixed. Above all it is the combination of restructuring those features and opening them up to moderators that saved the day. The combination is powerful and has been running smoothly for months now. It is the greatest accomplishment in the year between launching JungleDragon V3 and now.

But so much more happened in the year. I next start addressing JungleDragon maps features. In the 1st update I addressed the serious performance challenge of showing thousands of markers on the global wildlife map. The 2nd map update integrated maps in a better visual way. The 3rd map update introduced a "near me" feature, showing you wildlife photos around you.

And then, entirely unplanned, I created a brand new crazy feature: daylight planning. With this tool, you can see the light period from any location/time combination on the planet, past, current and future. In addition, you can see the sun's altitude, the moon's altitude, and the moon's period. This is a powerful light planning tool for photographers. It also features a weather overlay and a day/night time overlay on the map. The 2nd update improved this tool even further. It added the ability to pick any date, not just today. And it allows you to save any time/location to your personal calendar. The 3rd update introduced the sun's angle to the tool, as well as a light pollution overlay. The 4th update integrated the tool with actual photos. If your photo features GPS coordinates and GPS time via EXIF, JungleDragon will reconstruct the light situation during the moment of capture! Finally, the 6th update made the tool more usable on mobile.

After the species and maps focus, I focused again on more general updates. The 1st update improved navigation and scrolling on mobile in subtle yet powerful ways. Up next was a more dramatic improvement, a redesign of the homepage. It became simpler and cleaner in layout, yet still features more and bigger content than before.

And still the major restructurings were not completed. I completely redesigned the activity feeds and notification engine in the back-end, leading to much better performance and better maintainability. This was again a very painful exercise, but much needed.

Maps was then again improved with a focus on country maps. This was followed by again a big new feature: newsletters. This brand new weekly newsletter highlights popular content and new species on JungleDragon. It is a very quick glance at the week at JungleDragon.

Then came a general update with design tweaks, further improved maps, and a new notification for species identifications and introductions. This was followed by another "crazy" new feature: ambient backgrounds. This unique design tweak dynamically calculates the background of images based on the actual photo. Full screen photo viewing was further improved in a 2nd update and a 3rd update.

Back to general development, a 1st update drastically improved database performance. The 2nd update contained several small improvements: better activity feeds, guidance for lists, and a brand new notification for photo promotions. This was followed by another performance improvement, and a 3rd update that introduced a new notification for lists, better map zooming, and better Windows 8 support.

1 year of JungleDragon V3 - conclusion

And so we arrive at today, after 1 year of JungleDragon V3 development. I am very happy with what was achieved, particularly concerning the large, painful restructurings in the species system, maps and notifications. On top of that, we opened up key aspects of JungleDragon to the community, whilst also adding great new features, such as the daylight planner,  a newsletter, new notifications, and so much more. 

I believe JungleDragon feature-wise is in a great place now. It is feature-rich, stable, and the most painful parts have been addressed. It is amazing what can be done in a single year. 

Therefore, I hereby declare JungleDragon V3 completed.  As said, I will take a break from developing features for a few months, and then start on JungleDragon V4.

JungleDragon V4 - what lies ahead

JungleDragon will never be completed, so after V3, naturally there will be a V4. I already have a pretty significant list of ideas. Unlike the major release changes between V1, V2, and V3, V4 will not be a radical departure from the previous version. I have no plan for a major overhaul of the design or the main systems and functions of the V3 platform. There will be no major shock for users.

What will V4 be about then? My list of ideas surrounding V4 are very dynamic, but many gravitate around further improving JungleDragon's already existing unique strengths: context. A photo in JungleDragon is not just a photo, it has meaning and context. It has a species which I can further explore, a location I can discover, a photographer which I can follow, and so on.

I like to build on this idea even further. For example, I can detect the season in which the photo was taken, showing more photos from that season. And I could better detect the camera (and hopefully lens) used to capture the image, showing more photos made using the same equipment.

Although difficult, I'd like to add more context to species as well. It would be great if I could see the habitat or behavior of a species, and navigate to more species of that same habitat or species having the same behavior. 

That is the direction I am thinking of: adding even more semantic meaning to content. Moving even further away from just photos, and moving even more in the direction of context. 

And, I can already announce a cool new feature part of V4: a map showing every national park and zoo in the world! Yes, this will happen.

Such is the ambition of V4, of which I expect to start working on early next year. As final words, I hope you agree that JungleDragon V3 is quite good and complete as it is, it came a long way from 1 year ago. Not only due to improved and new features, also due to a community picking up the new moderation capabilities. 

Thank you for reading and supporting JungleDragon. Above all I want you to use it.

Nikon AF-S Teleconverter TC-14E III - review »

FERDY CHRISTANT - SEP 21, 2014 (10:18:35 PM)

On last year's trip to Tanzania, I enjoyed the magnificent combination of a D800 and the new 80-400mm I purchased before it. However, coming from a 150-500mm on a crop sensor (D7000), which effectively is a 750mm,  I did notice the loss of range in specific situations. This can be partly compensated by cropping photos, since the D800 produces huge images, but this only works when you shoot sharp down to the pixel level, which is very hard.

For this reason, to get back some range, I started investigating converters. Nikon carries a 1.4 x, 1.7 x and a 2 x converter. I started out greedy, investigating the 2 x option. However, having read a lot about it, it probably would bring too many focus issues and too much loss of light. Recommended by many, I went for the safe and conservative option of the 1.4x converter, where the 3rd edition has only just been released.

Besides my primary reason of getting more range on the 80-400mm I also was thinking of a 2nd advantage, it would also increase the focal length of my 105mm macro lens, which I use a lot. This would make it a sweet win-win deal. I needed that justification, as the price at 550 EURO is incredibly steep. 

Now, if you're expecting before and after shots in this review, I'm going to have to dissapoint you. I was in the process of doing that, but the more I tested this thing, the more frustrated I became. I ultimately returned this item, asking for my money back. Instead of a detailed review, I'll tell you what happened instead.

I received the package on wednesday, but only got my hands on it after work. It was already dusk, so the light I needed to test it was fading. I figured I'd just do some very slopping testing, seeing if the thing fits, and the effect of the focal length increase. 

I first attached the converter to my 105mm macro lens. Whilst attaching it, I couldn't help but notice how delicate of a process this is. With this I don't mean that it is difficult, just scary in that it comes so close to the back of your expensive lenses. This is not something to attach with haste.

With the converter added, I started doing some macro shots of in-house objects. I was very impressed with the increased focal length, 40% extra is a lot more than I imagined. Note that this converter does not magnify more, it increases the focal length. For macro this means that I can keep more distance than before, whilst still getting the same magnification results. Very useful for insects.

Next, I took a shot of a car way down the road, focusing on the license plate, on my 80-400 without converter. Then I did the same thing with converter. And again I was deeply impressed. I was expecting a little more range, but the 40% makes an enormous difference. My first impression of the converter was very good. To add to that, Nikon is very conservative in mentioning whether auto focus works on your lens with this converter attached. I found no issue with it, even on my "slow" 80-400mm during dusk, at focal length 400mm (or 560 with the convertor), I could auto focus in fading light. Awesome. The thing fits, the extra range is great, and everything seems to work.

It wasn't until friday that I could do some serious testing. I've spent about half a day in our garden, trying combinations with or without converter, on a tripod or by hand, on both lenses. The thing is, I can't make a sharp photo with it. Not even close.

At first, I thought it was just me. I must be doing something wrong. But I tested over and over again, excluding all parameters. As an example, I've used my macro lens handheld at a well-lit spider in our garden, and there was no wind. I create 10 shots of it in sequence. Normally, I would miss a few of them, but I will always know when I hit it (the focus and sharpness), and in these favorable conditions, I would hit at least half of those 10. Reviewing my shots, not one of the 10 images is sharp. I don't mean a bit off, I mean way off, also in cases where I was sure I got it. 

I then tried the same thing using manual focus, perhaps the converter screws up auto focus? No, same result. Next, I tried manual focus on a tripod, zooming into live view. You can't get more sure than this. And the result did not get better.

I was still thinking it must be me having a shaky day, so I then did the same sequence without converter. And bam, I am back to my normal performance. Sharp images where I knew I hit it. Predictable behavior. 

I repeated the macro test 2 more times fully, as I really wanted this converter to succeed. But the results were the same. More testing using the 80-400 showed disturbing focus and softness issues, particularly from hand, and slightly less from a tripod. 

By this time I was sure of it, this converter does not only not meet my expectations, it ruins my photography. Predictable focus accuracy and acceptable sharpness are key in photography. If that part does not work, extra range will not do anything. 

I ultimately had to let go of this toy and return it. I'm very dissapointed that at this price point, it is such a failure. What I am still not sure about is whether I received a faulty converter, or whether it just sucks this way in general. I'm not going to be able to find out, since I asked my money back. I don't trust a 2nd copy will fix it.

Reading more reviews about this still-new converter, I see mixed ratings. A majority seems to like it, yet a sizable minority has also returned it. I am thinking that perhaps one day I will give a converter another try, to be sure whether my experience was incidental or structural, but if I do so, I will be doing it from a store. 

Ultimately, I cannot recommend this product for now, all I recommend is that you test it thoroughly before purchasing it. It is a great product in theory, the range increase is a lot better than you may think, but whether it works in practice is something you will have to find out yourself.

Gitzo GT2531EX 6x Carbon Explorer Serie2 - review »

FERDY CHRISTANT - SEP 20, 2014 (12:05:37 PM)

A popular statistic in photography is that people on average buy 3 tripods before buying the one that works for them. It is very difficult to buy the right tripod for yourself. They are nearly impossible to compare online. Height, weight, sturdiness and flexibility have to be experienced in real life, not from a web page. 

Another reason is the hunt for the perfect tripod, which does not exist. Requirements often conflict with each other. Here's 2 examples of such conflicting requirements that apply to my personal needs:

  • Folded, I like the tripod to be short enough to fit into a suitcase, so that I can travel with it. Yet unfolded, it must be very tall, since I am very tall myself (1.93m).
  • It must be very light and flexible, yet still be able to support substantial weight (heavy body + heavy lens)

A purchase becomes even more complex if you're versatile in photography styles, for example wanting to do both macro and tele photography.

The two before

Before reviewing this new Gitzo, a quick look on the 2 tripods before, both of which I still own. I started out with the Manfrotto 055XDB, as part of my total switch to the Nikon system a few years back. I was then still at the beginning of my photography hobby and did not have a clear picture of my actual needs. The Manfrotto is extremely stable, and very usable for top heavy setups. In combination with the Manfrotto M393 gimbal head, operating a very heavy combination can be done with the touch of a finger. It is absolutely awesome for that purpose.

The trouble is, it turns out I don't do that kind of photography very often. I would love to hide a full day in the bushes to do some birding with such a setup, but in reality my agenda does not allow such devotion. As for the type of photography I do quite often, macro photography, this setup is not usable. It weighs a ton, can't get very close to the ground, the leg locking system is slow, and it is overall too inflexible. I accept these limitations, and will not sell it. I consider it something lasting my entire life for occassional use.

The 2nd tripod I have was more of a travel choice, it concerns a GorillaPod. Although easy to transport, I'm not particularly excited about it. Sure, you can do things like hanging it on a tree, but I find little practical use for that. And for normal positioning, such as in landscape photography, I find it very hard to level it properly. To me, the Gorillapod is the choice in situations where I really don't want to bring a tripod, in the sense that it's easy to bring, and still better than nothing.

Note: I am leaving out one more "tripod", a bean bag that I occassionally use. 

The new Gitzo

So let's talk about the 3rd tripod, the Gitzo GT2531EX Explorer. I have spent a great deal of time investigating options, both online and in stores, to arrive at this choice. My main requirements were for it to be light, flexible enough for macro photography, quick to set up and sturdy enough for some heavier gear. As secondary requirements, I had the wish for it to fit into a suit case and for it to be tall enough to match my own height. These secondary requirements were nice-to-haves.

Before continuing, note that I bought this tripod along with the Gitzo GH2750QR Serie 2 Off Centre Ballhead, which looks like this:

Let's have a practical look at some of the qualities of this combination:

Weight

Compared to the Manfrotto (2.9KG, much more with the gimbal head), the Gitzo is at least 1KG lighter, more due to the lighter head on it. This makes a substantial difference in carrying it around. It is still by no means feather light, just a much more managable weight. Besides weight, the carbon fiber material is also more comfortable to handle, it's not as slippery or cold (on cold days) as the Manfrotto is. What can I say, once you experience carbon fiber, you will never want to go back.

Speed

The speed at which you can set up a tripod to me is essential. Not just because of personal impatience, it just shouldn't block the creative process of photography. Furthermore, in situations where I do not photograph alone, I experience time pressure, and a tripod that does not cooperate only increases frustration.

Coming from the Manfrotto leg system where I have to unscrew and rescrew each joint of each leg, I was now facing this:

And it is spectacularly convenient. Using my large hands, I wrap my fist around all three locks, twist in one go, extend the legs and twist each joint again. As I have long arms, I can do all of this whilst standing up straight. It takes 3-5 seconds to handle one leg, which is fast. I'm very happy with this locking system. 

This isn't all there is to say about setting up this tripod of course. In particular macro setups, where this tripod excels at, you'll also want to set up the off centre column and the off centre ballhead. The speed of that highly depends on the situation you find yourself in, but even after a few field trips I'm already getting better at it.

This feature of the tripod alone I consider a killing feature. It severely increases my acceptance of bringing and using a tripod at all. It takes away hurdles.

Flexibility

Flexibility is what this tripod is all about. As you can see from the opening photo, the vertical column isn't between the 3 legs, it is next to it (off centre). Consequently, you can position that column as it is (vertically), but also horizontally or diagonally. This means you can bend it into very strange positions, and when combined with the off centre ballhead, basically in virtually every position. 

In the above shot from the field, you can see how I used to centre column horizontally. As you can see, this doesn't mean the camera is positioned sideways. Due to the off centre ball head, you can still position it horizontally. 

The 2nd part regarding flexibility concerns the leg angles. Where most leg systems have predetermined angles in which you can snap the legs, this tripod allows you to set them to any angle. To lock them, just use the big black levers on them.

All in all, the combination of the off centre column, flexible leg angles, and an off centre ballhead make this tripod as flexible as it gets. There really is nothing more to wish for. This includes bringing the tripod to the ground level, it can be placed entirely horizontally. 

It is important to know though that this doesn't just make it a "macro tripod". It does its job equally well on flat surfaces and in normal positions and heights. 

Heavy gear

Such a light, speedy and flexible tripod may bring some compromise as to what it can endure in terms of heavy gear. To my surprise there is hardly any compromise here either. In the photo above, the combination of a D800 and Nikkor 105mm already is a pretty heavy combination, especially with the weight being off centre. But the tripod deals with it flawlessly. There is no creep at all.

Let's put that test to the extreme:

Here I am using a heavy 80-400mm. In a way, this tripod isn't really designed for this use. I expect it to fail. But it hardly does. In this very top heavy arrangement, there is some creep. After locking position, the ball head will tilt downwards slightly. But not as much as I expected, in fact, I expected the whole thing to tip over. Note that I am testing with the normal plate here. I also have a long quick release plate, which would balance the lens better, probably removing almost all creep. 

As said, I'm surprised by what the combination can carry. The tripod has no problem with it either way, it is the choice of (ball) head that matters in this case. 

Max height

So this gitzo scores extremely well in my primary requirements (weight, speed, flexibility, ability to handle heavy gear), what about my secondary requirements?

My main purpose for this tripod is macro photography, but it would be nice that in normal stand up conditions, I don't have to strain my back much to look into the view finder. With the center column fully extended upwards, and using live view with some distance, I can stand up normally without aching my back, again I am 1.93m tall.

That is good enough for me. A centre column is of course less stable than the normal tripod legs themselves, but I figure this compromise is good enough for many people. Only when you require wind-tested stability in an upright position and are very tall yourself, this may be a critical point to review.

Fits in suitcase?

Folded without head this tripod measures only 54cm in length. A small travel suit case, the one you may take on a weekend trip, measures at a minimum of 50-60cm. This thing will likely fit even in the smallest suitcases, and most definitely in normal-sized suitcases. 

Durability

Is there really nothing bad to say about this tripod (not taking into account the price)? I have yet to find any issue with it. The only small concern I have is in its durability. Although I cannot test this in a few weeks only, I noticed that the leg locking system works with grease. I wonder what will happen over time when sand mixes with it. I don't know the answer to that, time will tell. I do see that some high-end Gitzos have special weather-proof features, assuming this one doesn't have those, I wonder what that means.

Conclusion

I started out this post by saying that the perfect tripod does not exist, and that requirements conflict with each other. After having used this tripod for a few weeks now, I'm coming back to that statement partly. Whilst there is some compromise between features, in this case they are tiny. I am deeply impressed by how this tripod finds a balance in weight, speed, sturdiness and flexibility with such small downsides. As such, I don't consider it a macro tripod per se, it performs well across many situations. I cannot find any serious feature that it lacks. 

Finally, some words on what this means to me personally. Basically, I don't like working with tripods. They slow me down and make me less flexible, plus I have to carry it. For this reason, I hardly ever brought one.

But the advantages of a tripod in particular situations are enormous. This tripod has build a bridge between those two opposites. Whilst I still rather not bring one, if I bring one, I love working with this one. Instead of bringing a tripod along 1 in 20 trips, I now bring one in 1 of 2 trips, and that is entirely due to the qualities of this tripod.

At the same time, I also recognize that the constraint of a tripod also brings good things. Whereas I normally am a too rushed photographer, a tripod forces me to think more about composition and light. Instead of making dozens of so-so photos, I may make less, that are better, or at least better prepared. 

To end this review: Yes, I would 100% recommend this tripod. It is quite frankly awesome. If you hate tripods, this will make you hate them less. If you like tripods, this is probably one of the most flexible and versatiles combination in this price range, and perhaps any price range.

JungleDragon general site update - September - I »

FERDY CHRISTANT - SEP 5, 2014 (01:23:41 PM)

We're in the first week after the 3 month summer games we held at JungleDragon, a series of contests that has brought about thousands of new photos, hundreds of new species, and many new members. The sharing pace seems to continue after these contests, and I am hoping that it lasts.

Anyway, here's again a small series of site improvements.

New notification: added to list

I have implemented a new notification. This one is sent when somebody adds one of your photos to a list:

This is great additional feedback for photo owners, as well as a way to promote the lists feature. Like any notification in JungleDragon, it can be enaled or disabled from your personal notification settings. There's 13 notification settings currently, making the notification engine quite complete by now.

Smarter map zooming

On geotagged photos, you are able to jump to the map of that country, checking other photos geotagged in the same country. Before, the country would be zoomed in on a fixed zoom level. This works well for small countries, yet zooms in too deeply for large countries. This is now implemented in a smarter way, the zoom level is based on the size of the country:

See above. Before, opening a large country like the USA would zoom in to deeply, yet now it fits dynamically.

Lighter "More" buttons

The "more" buttons that you see on several pages are now styled with a light color. In particular on mobile and tablets, the dark color would conflict with the equally dark footer.

Windows 8 tiles

JungleDragon now has basic Windows 8 tile support for users of Window's Modern UI:

Above you see JungleDragon's tile pinned below a Twitter tile. The Twitter tile is a real W8 app, whilst JungleDragon's tile is a pinned website. When pinning JungleDragon, you can select from one of 4 tile sizes.

I also tried to implement notifications to enable live tiles, but getting it right cost me so much effort that I let the idea go.

Flip-ahead browsing

Another W8 related improvement is flip-ahead browsing. Flip-ahead browsing is an IE-only feature (that has to be explicitly enabled by the user) within Window's Modern UI. 

What does it do? When enabled, the browser will intelligently try to break up your site in sequential pages. Instead of you having to hunt for a "next" or "more" button, the browser will find it for you, and also prefetch that next page. As a user, this allows you to flip through a website like it is a magazine. JungleDragon is now actively giving IE hints on next pages, allowing this:

Note that on the right middle of the screen, there is a next arrow. This means that flip-ahead browsing works for this page. You can click it to go to the next page. If you have a touch screen, which is likely if you're using Modern UI, you can simply swipe from right to left. 

I really love this feature. It's a real shame that it is IE only and has to be enabled by the user. 

Anyway, that's it for this update. Enjoy!

As a web developer, I am very much aware and pro-active in performance tuning websites. JungleDragon uses many techniques to optimize for a speedy experience, both in the back-end and the front-end:

  • On the back-end, the most important database queries are tuned to the bone.
  • Images are large and retina-ready, yet still light in file size
  • The number of HTTP requests is minimized
  • Static resources are compressed and heavily cached
  • Resources are loaded in a smart order, avoiding blocking requests where possible

But...there's always room for further improvement, and I found quite a spectacular one that I will be telling about in this post. Last week, this A List Apart article popped up into my RSS reader. It details 3 relatively new techniques of prebrowsing. I had heard of the term only once before, but this article triggered me.

Prebrowsing is smartly loading resources up front, based on a prediction of what the user is going to do next. The article discussed 3 ways to do this:

  • DNS prefetching
  • Resource prefetching
  • Page prerendering

Having studied the article in detail, it had me thinking of how this possibly can be applied to JungleDragon. I have taken a deep dive into these 3 techniques, and now I am using all 3 of them. I'm not going to repeat the article here, rather I'm going to share how I've implemented them, and what the effect is.

DNS prefetching

Many websites use secondary domains to load resources. For example, one can have a img.mydomain.com to load images for the site. For browsers to load images from that sub domain, it needs to resolve the domain, translating it into an IP address. The way this occurs is complicated, it depends on the browser's strategy, browser cache settings, and DNS cache across many hops in the chain.

Resolving a domain can take from 1ms to several seconds, depending on these factors. Without cache, say a "fresh" resolve in practice will likely take a few dozen ms at least. DNS prefetching aims to do this resolve action upfront. Here's what I placed in the head section of every JungleDragon page:

<link rel="dns-prefetch" href="http://static.jungledragon.com">
<link rel="dns-prefetch" href="http://media.jungledragon.com">
<link rel="dns-prefetch" href="http://fonts.googleapis.com">

This prefetches the domains for JungleDragon static resources (JS, CSS), photos, and the header font. Unfortunately, it is nearly impossible to objectively measure the performance effect of this technique. For example, Chrome has its own intelligence in DNS pre-fetching regardless of what any web page does. When starting up Chrome, it will automatically DNS prefetch the 10 most visited sites you use.

If my theory is correct, this should avoid the high cost of DNS lookups in those cases where it wasn't cached. This should be a saving a few dozen ms or more. But as said, it's hard to measure. It is cheap to implement though, and a proven technique on websites such as Amazon.

Browser support: currently Firefox and Chrome, and perhaps a few smaller browsers. 

Resource prefetching

A more spectacular performance improvement may be found in resource prefetching. A resource would be a file (JS, CSS, img) in this case, although it can be used for pages as well. You would use this technique when it is very likely that a user will need that resources on the next action or page. By prefetching it, it will instantly be ready when that next action occurs. 

With resource prefetching, you are giving the browser a hint, not an instruction, to load that resource. It will typically be loaded during browser idle time, thus the preloading in no way blocks current page loading and rendering. 

I found a very interesting case in JungleDragon where using this technique makes sense: slideshows. In a slideshow, it is extremely likely that users will navigate to the next image. Have another look at the opening screenshot of this blog post. That's the JungleDragon slideshow. It features one big image, followed by 9 small thumbs. 

In the before situation, navigating to the next image would start loading that next image only on the spot. The next image was not loaded yet, thus there is a wait time. That wait time even in good conditions may be 2 seconds or more. Whilst that is not a huge delay, it is still a bothersome delay.

In the after situation, all 9 large images are prefetched, as it is very likely that they are needed later on. As said, this prefetching is non-blocking, it delays nothing on the current page. Here's a small video demonstrating the slideshow with prefetching enabled:

As you can see, next (and previous) images load instantly. That's because they're ready before you clicked on them. It is a dramatically different slideshow experience because of this. 

How is this done? It's as simple as inserting prefetch links like these:

<link rel="prefetch" href="http://media.jungledragon.com/images/1234.jpg" />

You just point to the path of the resource to load. In this example, it means I have 9 of such statements, pointing to the 9 images to prefetch. For the widest possible browser support, you shoud include those links in the head section of the document. In particular IE needs this, other browsers don't care where in the document the prefetch links are. Furthermore, it is very much possible to dynamically inject such links in the DOM using javascript. I can confirm that it works.

Any prefetching article will warn developers not to overuse this technique, as it may consume a lot of bandwidth that isn't actually always used. I agree with that, but I find the slideshow scenario a perfect example of where this technique does make sense.

Browser support: currently supported by most modern browsers. Note though that these are browser hints, not browser instructions. For example, Chrome is much more aggressive in taking the hint, opposed to Firefox, which prefetches more slowly. 

Page prerendering

The 3rd and last prebrowsing technique is the most powerful, but also the most controversial and risky. With page prerendering, currently only supported in Chrome and IE11, an entire page with all its resources is prefetched and prerendered. It is as if a user is previsiting the next page entirely. The browser has that next page fully ready, it's simply hiding it until the user actually decides to visit that next page.

This technique is controversial because:

  • Bandwidth misuse in case the user does not visit the page you predicted
  • It can skew website statistics
  • I am not sure, but perhaps it also messes with ad mechanisms
  • If the preloaded page contains malware, you're actively taking away end-user control

This technique is to be used with great care, so let's see what it can do for JungleDragon. JungleDragon has no ads and serves no malware, so that risk is not applicable. Bandwidth misuse is the only potential risk. I decided to give this technique a try as an experiment, and the results are so awesome that I am going to stick with it.

What is the use case? JungleDragon on many pages shows a list of things. A list of photos, a list of members, a list of tags, and so on. In these lists of "things", a fixed amount of entries are shown per page, followed by a "more" button to load the next set. 

And here is the very simple idea: why not preprender the page behind the "more" button? What would that do? Before we dive into the risks, let us first check the performance benefit. In this video, I'm navigating these "more" buttons on lists of photos, members and tags:

This is quite incredible. Normally, when loading a new page of thumbnails, you would see 24 grey boxes, followed by a few seconds of the images loading one by one. With prerendering, performance is instant. Note that this concerns 24 retina-size thumbnails, appearing in a snap. As if you're navigating locally, without network. That's because we are in fact navigating locally, all network work has been done already because of prerendering. 

The 2nd part shows me navigating lists of members. As the user avatars come from gravatar.com, this usually is a page that slowly builds up, since it makes many requests to gravatar.com. With prerendering, it is instant. And finally, you can see that the list of tags also loads instantly.

What I'm doing here is a pretty aggressive form of prerendering, so let us see what any negative side effect may be. The main concern in this case is what happens if the user does not use the "more" button. In that case, I have prerendered it needlessly and bandwidth is wasted.

The heaviest use case are lists of photo thumbnails. The bottom line here is that the pre-rendering on average adds about 400KB in bandwidth costs, for loading the images of the next page. On mobile, I load smaller images, so the costs is far less. The loading of the extra 400KB, whether needed or not, is non-blocking, thus there is no wait costs, only bandwidth cost.

I find that number, 400KB, to be very acceptable. Note that despite being image heavy, JungleDragon image pages even with prerendering enabled is still below the average web page size of the world (1.6MB). After a first visit to JungleDragon, a full image page with prerendering drops to only 800KB, due to heavy caching. 

Given the extreme performance benefit and the very reasonable non-intrusive side effects, I'm going to keep this prerendering experiment for now.

Wrapping up

DNS prefetching, resource prefetching and page prerendering are extremely powerful techniques that when used with care, can dramatically speed up select parts of your web site and application. They are little known features of the modern web, so I hope that my article on applying these techniques in practice inspires you to investigate these techniques as well. My recommendation for now:

  • DNS prefetching: always use it. Easy to implement and no negative cost.
  • Resource prefetching: use in select cases of highly likely "next actions"
  • Page prerendering: use in select cases of highly likely "next actions"

In all cases, be sure to measure the effect of your experiments. And to make matters just a little more complicated, note that some browsers cancel prefetch actions when using their inspector window.

Continue reading...