Year: 2012

Bug and feedback driven development

by

I’m not a developer, I’m just a random guy who was lucky enough to be around when the web started to happen, back in the nineties. And over the years I might have learned a bit about web development, but still I’m not a real developer. And yet, there I am with two WordPress plugins, fiddling with PHP and JavaScript. I’ll let you in on what’s not really a secret; I’ve made some ridiculous mistakes while coding those plugins. Trial and error, you know. Testing, fixing, releasing and getting feedback. Especially getting feedback!

Real users telling me it doesn’t work, asking for extra features or making proposals to make it better overall, that what I thrive on. The latest example; JavaScript namespaces. Not being a developer means that I know as much about coding patterns as I know about cows. I just hit the keyboard real hard and hope the browser understands what I throw at it. Until a good friend told me to use JavaScript namespaces, to avoid conflicts with other people’s JavaScript. And a week later someone wrote my software just didn’t work any more and I had to start digging and found a JavaScript conflict that was introduced with a new version of AddThis

And those are the moments one grows, as a developer; you start searching for information about scope, anonymous functions and namespaces. You try, it doesn’t work and you dig some deeper, until you stumble on a great question and answer on Stack Overflow with a link to a very detailed article about JavaScript coding patterns. So you go back into ‘vi’ and start changing the code once again and than all of a sudden you have a working version, which your Polish user confirms fixes the problem and you learned a lot while bugfixing.
So kudo’s to all you guys & girls for the great feedback, you rock! Here’s WP YouTube Lyte version 1.1.3 to thank you.

As found on the web (April 18th)

by
generic (feed #49)
frank shared Disable Flash With ‘Click-to-Play’ Option in Latest Firefox Preview.
Disable Flash With ‘Click-to-Play’ Option in Latest Firefox Preview
blog (feed #46)
frank published WP DoNotTrack 0.6.0 and beyond.
youtube (feed #51)
frank liked Jun Miyake – the Here and After.
generic (feed #49)
frank posted Microsoft Creates Subsidiary Dedicated to Openness.
generic (feed #49)
frank shared VDAB-data moeten binnen Europese Google-cloud blijven.
VDAB-data moeten binnen Europese Google-cloud blijven
generic (feed #49)
frank shared Microsoft Wants to Put Skype in Your Web Browser.
Microsoft Wants to Put Skype in Your Web Browser
generic (feed #49)
frank posted Chrome for Android Update.
blog (feed #46)
frank published Bug and feedback driven development.

WP DoNotTrack 0.6.0 and beyond

by

I finally found some time to continue to work my other WordPress plugin. WP DoNotTrack checks for elements being added to the DOM by JavaScript to stop 3rd party tracking by some of the major plugins or themes.

Version 0.6.0, which I released last week, features a new “forced” option. This mode aims to provide better compatibility with JavaScript-optimizing plugins such as Autoptimize and W3 Total Cache by adding the relevant code only after those optimizers have done their job, using the output buffer. There will probably be a 0.6.1 today or tomorrow, to solve a small problem with mixed HTTP/HTTPS requests on the admin-page while in HTTPS. The output buffer sure is a powerful thing and for version 0.7.0, I’ll build on that to optionally filter the full HTML (with PHP Simple HTML DOM Parser) to stop unwanted requests for images, scripts or iFrames in there.

Do contact me if you found a bug, if you have questions or if you’d like specific feature to be added, I tend to rely heavily on user feedback to improve my plugins! And if you’re happy with how it works, drop by on the WP DoNotTrack-page on wordpress.org to rate it and/ or to confirm it works with your version of WordPress!

As found on the web (April 4th)

by
blog (feed #46)
frank published Making do with Windows Phone, loving Metro.
generic (feed #49)
frank posted Frontend SPOF in Beijing.
generic (feed #49)
frank shared Yahoo Plans Support for ‘Do Not Track’ Web Privacy Tool.
Yahoo Plans Support for ‘Do Not Track’ Web Privacy Tool
generic (feed #49)
frank shared Picture Better Web Apps With Mozilla’s Camera API.
Picture Better Web Apps With Mozilla’s Camera API
blog (feed #46)
frank published Speed matters: re-evaluating WP YouTube Lyte’s performance.

Speed matters: re-evaluating WP YouTube Lyte’s performance

by

So stupid me made a (smallish) mistake when working on 1.1.0, which caused WP YouTube Lyte (rapidly approaching 80.000 downloads, thanks guys & girls) to load immediately instead of waiting for the “document loaded” event (lazy loading). That got fixed in 1.1.2 (which also loads the CSS differently, resulting in 1 file less to request), but the mistake did get me to re-investigate performance.
Exactly how fast is WP YouTube Lyte nowadays? I fired up some webpagetest.org IE9-instances in the Amsterdam node to compare this WP YouTube Lyte powered post on my test-blog with an identical blogpost with default YouTube embedded video. These are the jury’s results for the fastest of 10 runs in both cases (click on the image to actually see the details):

The main figures to compare (normal YouTube embed vs WP YouTube Lyte):

  • time till document complete: 1.612s vs 1.047s
  • time till fully loaded: 4.358s vs 1.385s
  • total number of requests: 13 vs 9
  • combined size of requests: 446 KB vs 77 KB

So using WP YouTube Lyte instead of normal YouTube embeds results in less files to download, less data to transport, the page being ready for interaction quicker and having everything loaded a whole lot faster. These figures are for a single YouTube on a page, but the impact is all the more important if you have multiple video’s on one page (e.g. a category or tag-page for “music” or “videos”) off course.
The full comparison based on 10 tests on both pages:

YouTube embed (full results)Lite YouTube Embed (full results)
doc completefully loadeddoc completefully loaded
min:1612380810471385
median:1918463111911524
max:3221511020782881

So there you go. When in doubt, check these stats and then go install WP YouTube Lyte, because after all speed matters!

Making do with Windows Phone, loving Metro

by

Every now and again you should go out of your comfort zone to get a new perspective on things. Or so they say. I love my comfort zone, it took me 43 years to build the damned thing after all, so please leave me be, will you?
But things break and in this particular case the screen of my trusty old Samsung Galaxy S2 went dark, literally. I brought the phone in for repairs and grabbed the only test-device left at work as a temporary replacement. It was a Samsung Omnia 7 with Windows Phone 7. Now look at this little droid-boy getting pushed out of his comfort zone!
I’ve been using it for 5 days now, so why not make a small list of what sucks and what’s great? Here goes:
What sucks:

  • The browser. It’s not I can’t live without Firefox Mobile, but boy does Mobile IE7 suck.
  • No Internet connection sharing (not over USB, not over Bluetooth, not over WiFi)
  • The fact that the phone doesn’t present itself as a USB storage device when I connect it over USB with my Ubuntu netbook
  • The lack of an SD card slot
  • I can’t login with my Live ID (my ancient Hotmail address) on my phone (but it does work in Zune), which means I can’t install applications from the Marketplace (I’m asked to call support! Seriously?)
  • The fact that after installing Zune on my work PC and then waiting until I got home because Zune doesn’t do proxies, I still wasn’t able to upgrade to Windows Phone 7.5 (which does have Internet connection sharing and a more decent browser)
  • There’s no way to reliably fetch information from the Exchange servers at work. Every once in a while mail gets downloaded, but in general there’s error code 8501001D ruining my Exchange experience

What’s great? Just one bullet point actually;

  • The UI!

Really, despite my grievances about how poorly the device integrates with the outside world, my general feeling about Windows Phone is positive, and that is because Metro really is that great! The screens are sober, with lots of space and a prominent place for content (text & typography). Applications scroll horizontally to display different views and it’s the typography that makes this pretty discoverable. The graphics effects and sound add to the great responsive “feel” of the UI. And tiles are a radical break form the icon-based approach that is typical of iOS (and Android, classic Mac OS, Windows 3.11 and …), you could compare them to widgets (as seen on Android), but without the anarchy and clutter.
So yeah, really, I ♥ Metro! I hope Google (Android), Mozilla (b2g) and Ubuntu (Unity) take clues from what is, in my view, a pretty radical break in graphical user interface design, because I would love the computing environments in my comfort zone to be more about content and less about chrome as well!

As found on the web (March 21st)

by
generic (feed #49)
frank posted Firefox in 2011 – Firefox plans for 2012.
generic (feed #49)
frank shared What the New iPad’s Retina Display Means for Web Developers.
What the New iPad’s Retina Display Means for Web Developers
generic (feed #49)
frank posted Helping with the MDN: what about linking to us?.
blog (feed #46)
frank published WP YouTube Lyte: what is in 1.1.0 for you.
blog (feed #46)
frank published Het land is in rouw.
generic (feed #49)
frank posted The iPad 3 and Moore’s Law.
generic (feed #49)
frank posted Android v4.0 Source Code for the International Samsung Galaxy SII GT-i9100 Now Available.
generic (feed #49)
frank posted GELUKKIG ZIJN ..
generic (feed #49)
frank posted Firefox Aurora 13 is out – SPDY on by default and a list of other improvements.
generic (feed #49)
frank posted Galaxy S III to feature proprietary wireless charging technology?.
blog (feed #46)
frank published Going against the reflow.

Going against the reflow

by

You can do great things in JavaScript; accessing the DOM and adding, changing or removing nodes as you please. It is exactly that technology that WP YouTube Lyte is based upon; the PHP-part writes out an almost empty div’s with className “lyte” and with as id the YouTube ID, which the JS-part finds after the main document has loaded to render the “LYTE player”. Great for performance, so I was pretty surprised when DerTux, one of WP YouTube Lyte users wrote;

BTW, Google Page Speed dislikes Lyte:
“The following JavaScript call stack (executed 4 times) caused reflows that took 52 milliseconds: @wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.:1:0“

Although 52ms for a page with 3 “LYTE players” is minimal when compared to loading the same page with the full embedded YouTube player, the above statement bugged me enough to search the web for information about reflows and how to prevent them. Some of the more interesting articles:

And this video by Paul Irish does a great job explaining reflows:

HTML5, CSS3, and DOM Performance
Watch this video on YouTube.

Based on these pointers I started reworking lyte.js while testing on Google’s Page Speed Online (as far as I can tell the only tool that can detect reflows and then only as an experimental feature) to minimize reflows. I ended up:

  • adding the pL div, which contains the LYTE player UI (play-button, controls & YouTube thumbnail), only after all styles have been applied
  • adding the tC div, which contains the title, only after the tT div (with the title as received in the YouTUbe jsonp-call) has been added to it
  • replaced el.clientWidth (and el.clientHeight) with el.style.width.match(/\d+/g)[0]
  • some widths and heights did not have a unit specified in the dynamically generated CSS and this sloppy coding apparently also (indirectly) caused reflow

WP YouTube Lyte 1.1.1 will get pushed out in a couple of days (Thursday, probably) and will ship with these performance optimizations (and a fix for a regression which causes some styles not to be applied any more).