Web Performance Testing With PhantomJS

HTTP requests, heavy/unminified resources, and UI thread blocking should be on the mind of every front-end developer. These are just a few issues that can cause serious bottlenecks in page load times. Having a faster load time equals better search engine rankings, higher conversion rates, and an overall reduction in bandwidth costs. I recently took on the task of coming up with an accurate way to measure all the aforementioned things, in an effort to understand which performance tweaks improved page load times and which ones didn’t.

Comments    phantomjs, web performance, testing

HTML5 is Booming in Atlanta

So, all I can say is that the Atlanta HTML5 community is awesome. Today the @atlhtml5 user group has reached it’s 1000th member! From startups to companies in the Alexa top 20 rankings, Atlanta is heading towards a bright future in innovation and the open web. Front-end developers are in serious demand as Atlanta based companies strive to build web applications that are more offline accessible, responsive, and performant. Companies are moving more JavaScript to the browser, and this demands more structured code following MVC style patterns.

Sharing Content with Web Intents

The Intent of Sharing If you employ share buttons on your site, then you might already be aware of the increased load that comes with trying to make your content social. Allowing users to take action on your specific content and “share” it is a common task. Much like linking HTML documents together, we are now linking apps together that are capable of pushing content to a receiving service via the user.

Comments    web intents, html5, share, stats

Sniffing IE9 features while in compatibility mode

Getting the browser version from the User Agent string is one thing. But, when you force compatibility mode in IE, you get whatever version you’re forcing to. e.g… <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/> in IE9 will cause jQuery’s ($.browser.version, 10) to return “8” :( I started digging through some msdn docs to find various ways of sniffing the actual browser we’re using, even when compatibility mode is forced. This led me to this doc Which talks about how IE9’s Chakra JavaScript engine processes math precision differently (and faster) than the old IE8 JScript engine.

Choppy scrolling on iOS with iscroll and PhoneGap

I ran into a situation this weekend where certain pages of a PhoneGap application were incredibly choppy on iOS versions pre 4.3.x. Apparently, there is a problem with older browsers using CSS3 selectors like div[style*=‘foo’] in combination with other DOM elements. The test case was a little tricky to create, seeing that pinpointing this problem required mucho testing. However, I minimized the markup and CSS to only a few classes and DOM elements.

AeroGear - Mobile, HTML5, and Auwesome

The AeroGear project had it's official launch last week and I want to review what we're doing and where we're headed. For starters, AeroGear is focused on: Education - Screencasts, Tutorials, and Quickstarts for running any (HTML5, Hybrid, Native) mobile solution with JBoss projects and app servers. Innovation - Many of AeroGear's primary goals are to provide HTML5 extensions for web applications, both mobile and desktop based. Community - We already have several community members contributing examples, demos, and other useful resources.

Comments    html5e, jboss, aerogear, mobile

Pushing CDI Events to the Browser with WebSockets

Disclaimer: Minimal load testing was performed with 10000 concurrent WebSocket connections. You can see some true performance numbers here. Here is the demo in action. As you can see on the right, I have 2 chat windows open and on the left we have a member registration. Users are chatting across a raw WebSocket connection and when another user registers, the CDI event is fired all the way through to the browser as a JavaScript alert via the connected WebSocket clients.

Comments    html5, websocket, jboss, jetty, cdi

2011 Year In Review

This year has been a personal best form me. I’ll spare you the long winded summary and get straight to what I actually produced :) Published my first DZone Refcard “Mastering Portals with a Portlet Bridge” http://refcardz.dzone.com/refcardz/mastering-portals-portlet Learned that CSS3 is replacing Photoshop http://wesleyhales.com/blog/2011/02/05/Replacing-Photoshop-With-CSS3-Creating-Styles/ Watched the entire Battlestar Galactica series on Netflix. Mourned the loss of Stargate Universe Posted this blog entry and later joined the RichFaces team because of it http://wesleyhales.com/blog/2011/02/16/Going-Mobile-With-RichFaces-4-Part-1-Drag-and-Drop/ Realized that my motivation on the portlet bridge project was exhausted http://wesleyhales.com/blog/2011/04/05/Does-Developing-Portlets-Make-You-a-Better-Developer/ However, I proudly took the project through passing the TCK http://community.jboss.org/people/wesleyhales/blog/2011/09/26/jboss-portlet-bridge-passes-jsr-329-tck Had a lot of fun with @tech4j creating JBoss’ first mobile web demo http://wesleyhales.com/blog/2011/05/04/Runtime-Type-Detection-and-Usage-with-Weld/ Presented at JBoss World for the first time http://www.slideshare.net/wesleyhales/making-portals-cool-the-compelling-advantages-of-a-portlet-bridge Read JavaScript The Good Parts (again) Dressed up like a white bunny and had some fun with @burrsutter http://topsy.com/vimeo.com/27534958 Was in the right place at the right time at JBoss and took a new career path http://wesleyhales.com/blog/2011/07/04/My-New-Career-Choice-at-Red-Hat/ My wife gave birth to the sweetest, most beautiful baby girl in the whole world.

Fixing Ajax on Mobile Devices (with HTML5)

Update: @_boye has created a perf test which shows the performance of this solution. Remarkably, This iFrame solution outperforms innerHTML on Firefox 7 and maintains the same speed on Chrome 16. The most common approach for receiving markup from an Ajax request is to use innerHTML for placement of the responseText. This method has been widely used (and argued) since the inception of XHR, but it surprises me that it's still being recommended and used not only on desktop browsers but mobile ones as well.

RichFaces Mobile Designs - Day 3

So I made it over the hump of this mobile design week of madness. Below you will find a dark theme with a component skin for the rich:accordion component. Day 3: About The Design Here we have another phone based design broke out into 3 pages. The first page is a standard menu so not much to say there. The bottom menu bar is a little different from my first design – following the lead of the native twitter iPhone app.