E-com DevBlog

Web. Development.

December 13, 2013
by Phil
3 Comments

The Full Stack Podcast

Another one of the many side-projects I’ve got running is a new podcast aimed at developers. The podcast is called “The Full Stack” and attempts to cover software development from front-to-back (hence the name ;) ).

The first episode just launched over at DevCannon.com. iTunes syndication will be available in the next week or three, so stay tuned!

Those using G+, can follow +DevcannonTFS for stream notifications.

November 2, 2013
by Phil
0 comments

Riot.js the MVP JavaScript Framework

I was reading my round up of post, entries, and various news feeds and I stumbled on a post that was touting the feats of Riot.js. Having never heard of it, but being intrigued with the ‘not MVC, it’s MVP’ mantra, I read the post and was pleasantly surprised in the simplicity and flat out awesome framework.

This isn’t your overly complex framework, but is focused on simplicity, speed, and the future of web development (by that I men modular/component based design). I may not have mentioned this yet, but yeah, it’s 1kb. For. Real. It may require jQuery (which  is  more than 1kb), but compared to other frameworks that also run with jQuery it is still impressively small.

At work I had built my own little JavaScript solution that worked in concert with Handlebars templates, with Riot I’m betting I could strip out my little framework and build a faster and much easier-to-maintain system.

If you have the time, check out this blog post by Tero Piirainen where he does a fantastic outline of Riot.js.

For those who want to start digging in with the framework now, head over to github and grab the source now.

October 25, 2013
by Phil
0 comments

Using the ZTE Open

My ZTE Open that I received from eBay

The ZTE Open unboxed

I recently acquired a ZTE Open for my foray into Firefox OS development. I had originally been on the geeksphone pre-order list, but due to my extra-circular activities, found myself in a place of no time and lack of funding to act on my place in line. A few months later, here we are and I now have a development device. Let’s start out with a quick review and then move into how I managed to connect it to my Windows 8 machine.

 

The Review

The unit itself is a very light plastic device. It is as one would imagine the very definition of a developer device to be. No, I’m not talking about my shiny Moto-X Developer Edition phone* which is far beyond the reaches of what the standard “user” seems to have as a phone, but the definition of a developer device in the sense of it covers what just about every Firefox OS device will have. This leaves you with a device that contains a screen with a resolution of 320×480, a rear-camera (2MP), a GPS, and a proximity sensor.

Those with newer Android devices and iPhone devices will likely hold this device and promptly thrust it away as “this was worse than my original mobile-OS-of-choice-device”. To those that do this, I weep for you. You have failed in every way possible to catch the vision of Firefox OS, the market, and the simple joy and wonderment of getting a low-cost device that actually gives you a very modern experience on the web. I really can see why Mozilla says (slight para-phrasing here_ ‘Firefox OS: The platform HTML5 deserves’.

The OS itself is both awesome and exciting when you first turn it on. Many people on the web seem to hate the drag-up-then-tap unlock sequence, but I found it a rather clever way to get around all of the uppity software-lock-screen-intellectual-software-copyright-troll-patent-holders. Which I mean of course to say that the option to slide up and then choose to go either straight to the camera or the “desktop” is an easy to use method that works for anyone using the device for the first time.

The lock screen of the ZTE Open running Firefox OS

Powered on and ready for you to slide-up to begin the unlock sequence

The second-phase of the unlock screen on the ZTE Open running Firefox OS

After sliding up, you can now unlock or launch the camera

The phone speed and style is somewhat reminiscent of PalmOS and a first-gen Pre. It works like a champ, but you need to slow down a little to make sure you swiped where you thought you did and a little extra care must be made to use the menus.

Those used to iOS will find moving and removing apps/icons to be quite familiar while holding the “home” key down brings up a very familiar task manager (I say that it’s similar to the ‘cards’ of PalmOS, but you will say Android/iOS). Running programs can easily be dismissed with a slide/slow-flick of the finger, or you can tap the X.

The app or task amanger screen of Firefox OS running on the ZTE Open

Holding down the home key brings up the task/app manager

The hardest part of the OS for those coming from Android/iOS devices is remembering that everything is web-based. Think about that for a minute. I remember when I bought my first iPod Touch (which I still think was an amazing device). Do you remember how the AppStore simply wasn’t there? Do you remember that Apple actually set up guidelines for developers on how to create your own WebApp? I remember creating my first calculator and similar WebApps and then showing my friends and co-workers my amazing feats… that only worked when connected to the web. Don’t read that wrong, Firefox OS has options for dealing with offline storage and you do not need to be “always connected” in order to use many of the applications found in the Marketplace.

Should you not want to dig through the Marketplace directly, there is a screen (swipe so the screen moves left) that contains many genres of applications to help you find the apps you’ll use and be familiar with. Of course, if you don’t want to “install” any applications, you can always just use the Firefox browser itself. I find that the browser on the device is more than capable and does a great job of rendering modern websites.

A screen that display categories or genres of applications as part of Firefox OS running on the ZTE Open

The application-categories/genre screen

The Firefox browser included in Firefox OS displaying a modern website

The built-in Firefox browser rendering a modern RWD eCommerce site

Ok, so you are probably also wondering about the storage. Well it doesn’t have much (feels like 128mb), so you will want to throw in a microSD card. I threw in an 8GB card and find that for my testing needs so far, that works like a champ.

As for the sim-card, I stuck my T-Mobile Monthly 4G sim-card (from Walmart) in and it immediately recognized the network and informed me that I have a 3.5G connection (which I had never heard of, but that makes sense as the T-Mobile “4G” in my area clearly isn’t). I have not actually tested the call quality yet, but I’m sure that is something I will get around to in the next few months. It should be noted that my sim-card had an unfortunate accident with a a knife and had been trimmed to fit the slot of a micro/mini sim in a different phone, so if you are going this route, you may need to arrange a similar accident. You should also note that the phone is billed as a 3G device, NOT 4G/LTE.

The battery so far has been epic, and yes I actually mean epic. I’m used to throwing my “smart” phone in the charger every night or two, but this thing has been going for days on standby and handles daily usage quite well. To tell you the complete truth, I only had it plugged in for my initial charge, the other time I charged it was when I had it plugged into my laptop while I was developing.

To sum up the review, this is not the cheap-phone that you think will replace your iPhone 3G, or your Galaxy S2. It is however a wonderfully low-cost developer phone that is more than capable at takling your future web applications.

* Turns out that me and at least two other guys have one of those; bless the Corporate America that buys us ridiculously expensive devices for testing

Connecting the ZTE Open to Windows 8

How hard can it be right? I immediately found the excellently documented blog entry from Jason Weathersby on the Mozilla Hacks Blog. And then I tried to click on his link for the drivers so I could follow along. Yeah, ZTE nixed those drivers. They are gone, and my Mandarin is more than rusty… er non-existent so I can’t really read the 404 page.

A few hours of searching later, I actually found a completely different set of drivers that worked. Believe it or not, you can use the same drivers for the ZTE Open as you can for the ZTE Blade. Even though the forum I found them in lists back to 2011, they work like a charm. So head over to the MoDaCo forum thread that contains the Windows ZTE USB Drivers and grab them from the thread (at least until ZTE takes them down).

Once you have downloaded, unpacked, and installed the drivers you should be good to go and ready to rock! Remember that if you get stuck, I put a link to the Mozilla Hacks Blog above so that you can follow along there (I’m a fan of giving credit where due, and when someone has already done the work, you shouldn’t have to read my interpretation of it ;) ).

Any hints on future posts?

I’ve been playing with the device on-and-off for a week or two and I have already found an interesting issue regarding the accelerometer data, so I hope to have a post about that particular issue in the coming week or three. Otherwise, developing so far is pretty sweet. If you can already write a webpage, you can start hacking away at your own apps. Good luck!

July 27, 2013
by Phil
0 comments

Breaking Development – San Diego 2013

An image of the program and my id badge from Breaking Development

Breaking Development – San Diego – 2013

I had the opportunity to attend one of the up-and-coming conferences in San Diego this last weekend. This was Breaking Development (aka <br/> and bdconf), and it was held at the Hard Rock Hotel in beautiful San Diego California.

This is my summary of what I took away from the conference.

Luke Wroblewski – One Design to Rule them all

What is really the definition of mobile? how about a tablet? what about an ultra-mobile-electra-mega-portable? What was once defined as ‘if it clicks it’s a desktop, and if it touches it’s a phone/tablet’ is gone. Product innovation and progression has changed the way we test for input and is clearly not a defacto standard on how to detect device types.

So, how do we handle our designs? We use a multi-device approach (device-agnostic)

1. Support all screens

2. Account for high res devices (you can read retina here if you like marketing terms)

3. Optimize for touch first

4. Support cursor and keyboard

The basic idea is that we need to stop thinking in terms devices and capabilities of said device (especially when stereotyping how the device is used), and think instead as supporting the screen.

Erik Runyon – Before the @mq

Erik is the main man when it comes to the Nortre Dame website (nd.edu) and he has had the opportunity to work for several managers who have a clear vision of what they want, but don’t realize how much data they are trying to force down the pipe to any end user who wants to browse the site.

Erik and his team have performed small miracles in getting the site under-control, and to responsive. They have done testing to figure out if anyone clicks on slider content (turns out not many do.. something around 1% for nd.edu), and they have found that when users who frequent the site suddenly have things change, they aren’t happy.

Another interesting observation was that when users see a loading flash object (or even just a loader in general) many are afraid to continue using the site until all of the content is delivered.

Another fun fact safety tip from Erik’s presentation was that if you notice your ‘first-time to byte’ time is horrid, it’s time to analyze how much lifting your server is doing and see if the processes can’t be off-loaded or deferred. In his example there was a PHP script that was causing server delay while it rendered pages to be loaded.

Peter McLachlan – Visit-Speed: Page Speed is Only the Beginning

Peter is a cowboy-coder from up north (BC Canada), he also happens to be co-founder of Mobify. After chatting with him I can also say that he is a certified genius on content delivery.

Visit-speed is how visitors interact and behave on your website. Delay on mobile will cost you conversion, and will cause people to loathe using your website.

How does performance suck? let’s take a look:

  • Too many http requests
  • High latency
  • Too many bytes
  • Poor caching
  • Lagtastic interaction

Some things can be fixed with some creative pre-fetching. Pre-fetching is the idea of speeding up user interaction by loading assets in the background *before* the user needs them. This is a tricky balance as you figure out what you need to pre-fetch to save time, while not wasting resources grabbing what will never be used.

Should be pre-fetched:

  • DNS
  • HTML
  • CSS
  • JS

Should NOT be pre-fetched:

  • Images

localStorage is/can be slow… but you should use it anyway, it can be a great caching resource. Just remember to flush it every once in a while so that your site doesn’t appear completely broken when you change something and forget that some users may have old assets cached.

Barbara Bermes – Embracing performance in today’s multi-platform macrosm

Barbara works for the CBC, and she is used to dealing with hundreds of thousands of users on her sites. Speed plays a huge role in delivering a good experience to users. It has a massive hit on our perception and our psychology. When something is fast, it feels convenient and awesome, when it is slow it feels painful and sluggish.

Get fast by reducing the number of HTTP requests you have to make, if you are rolling a Single-Page-App (SPA), then only refresh the sections or portions of your app instead of reloading the entire thing.

Automation can also be a key to not only speeding up your delivered content, but in even creating it. Setting up tools to help you automatically remove white-space and minify your CSS and JS can really help you save a bit of time.

James Williamson – Is Flexbox the Future of Layout?

James is from lynda.com, and he is very good at pulling you in and demonstrating how to get things done. He was only allotted 30 minutes to try to teach us all how to use flexbox and he did an amazing job. Flexbox has gone through many iterations (which is why I have avoided using it), but it has finally become stable and is safe to start playing with now (it will still be a couple of years/releases before all the major browsers support it, but it’s never too early to get started learning how to use it).

I could attempt to write down everything he covered, but you really should do yourself a favor and review his slides over at slideshare.net/jameswillweb

Divya Manina – Next Generation Layout on the Web

Divya works for Adobe on the WebEngine team (which works on anything they believe will be useful for web development and technology). She demonstrated CSS clipping paths, as well as discussed how document.fontloader has many methods that can be used to help deal with the white-screen-of-death on page load for sites that use custom fonts.

Jason Grigsby – Adaptive Input

Input is changing, and how we display data is changing. New inputs such as the voice command on the Xbox One demonstrates how devices are now adapting to a new type of input (along with Google Chrome and Google Glass). Oh and one last thing, companies that care about employees apparently don’t book them on Spirit Airlines, having never flown with them, take it for what it’s worth.

Cameron Moll – Pitfalls and Triumphs of the Cross-Screen Experience

We need to stop thinking of mobile vs desktop web and start thinking of the one-web experience.

Moll’s Law – The best interface is the one that’s within reach.

If you are going to do Ecommerce and have a login/app for multiple devices make sure that you sync cart content between them (Amazon does this and it provides a very nice experience).

49% of users email themselves a link when changing devices (I personally just use chrome and pick up where I left off, but that’s probably another post for another time).

We need to stop stereotyping certain device users and creating sites that live in silos catering to that device.

We also need to STOP forcing our mobile app on users (Zappos, LinkedIn, I may be looking in your direction).

We also need to stop assuming that one-size fits all, not every user is going to like our responsive version, some may want to go back to the “old” site. Change makes people trust things less, so we need to start thinking of new solutions to deal with this.

Eric Bidelman – Web Components: a new way of building web apps

Eric gave the presentation that he gave at Google IO, and even though it was my second time to watch it, it was still just as thrilling as the first time I saw it. If you haven’t been playing with or looking at Polymer.js, then you need to get started on it now. seriously, go right now, I’ll wait.

Ben Callahan – Prototyping Style

When working on a project, you need to work on a few key areas:

  • Establish the Aesthetic
  • Solve the Problem
  • Refine the Solution

Use style-tiles (that work in-browser, fantastic article in this month’s .Net magazine – the one by Sparkbox) to help you understand and build the aesthetic

When you solve problems, use tools that you are familiar with, not ones that slow you down.

Use design pairing to refine the solution. Eyes get tired, and sometimes when we look at something over and over again we miss things, use a partner to help fix that.

Hampton Catlin – How to Build the Right Thing

If you are surpised it doesn’t exists, you are on the right track, keep digging

Dennis Kardys – Practical UX for Mobile: a Future Friendly Approach to Communicating Your Ideas

Dennis is awesome, he works for an agency that really gets how to get through a design and to create products not only work, but that feel right.

When creating a design, use “body-storming” as well as role-playing to figure out what should be done.

Body-storming is acting out how your design will be used. This may include leaving your desk, walking outside, jogging, sitting somewhere else. Role-playing is an interesting twist, it actually takes one person who pretends to be the application and one who tells it what they want and how they expect to get the information.

Paper-prototyping is good because it can be done anywhere and doesn’t require re-programming before you can see the results (while those who can’t get the vision of drawings may struggle with this, I tend to use this approach)

UX is a result, not a document

Ilya Grigorik – Optimizing the Critical Rendering Path

Ilya gave a great presentation on what it means to work with mobile devices and how the entire process (from initial broadcast to page rendering on the screen) takes place.

Speed is a feature

Google ranks sites based on speed because they know that fast sites will make people happier and that they will spend more time there (therefore making it more relevant to what the initial search was)

Ideally, pages would all load at 100ms, but for now, let’s aim for 1000ms (1 second). Using this budget we can see just how important optimizing the experience for those on 3G and 4G/LTE  is.

3G devices can have a 300-600ms delay per HTTP request (there goes the budget on just the initial HTML and CSS).

This means that we need to get data displayed on the device as soon as possible (so that the user doesn’t believe the page has stalled out or is unresponsive). To do this we need to inline the styles for the page that are used above the fold (in this instance the fold is the largest screen that views your site – check your analytics). For JavaScript we need to defer as much of it as possible so that it will start downloading after the rest of the page has loaded.

Ilya’s tips:

  • One RTT render for above the fold
  • No redirects + a fast server response (less than 200ms)
  • Add critical CSS to inline on the page, remove blocking JS (defer/async it) ?Keep the inlined CSS/JS under 14kb, and defer loading the jQuery lib until after page load

In closing

I was not only treated to hearing from experts on device interaction, content, and delivery, I was also able to hang out and meet some awesome and amazing people. While the talks and presentations were great, it was this opportunity to network with developers/designers/managers facing the same problems as me that really helped make the experience memorable. If you ever get the chance to go to a Breaking Development conference, I suggest you take the opportunity to do so. And hey, they are having one in October at the Gaylord Opryland in Nashville

**Note that not all speakers were covered, such as Jonathon Snook, who did an amazing workshop on SMACSS as well well as Sara Wachter-Boettcher who lead a discussion on content presentation, preparation, and distirbution. They were not included due to electrical malfunction in my notes.

April 17, 2013
by Phil
0 comments

The Death of 1140px CSS Grid

 

1140 CSS Grid - 12 columns fluid to mobile

The 1140 CSS Grid sign from http://cssgrid.net

Death, no, not really. I’m being slightly over-dramatic, the grid system was merely put into retirement… This post is my tribute to the framework and the work that went into it.

Odd things happen when you have meetings in open cubicle spaces. Things like shoulder-surfing someone at another cube who is looking at responsive frameworks and different grid systems. I currently use base as a responsive starting point (yes, it has a bug or three, and is extremely basic out of the box), but my designer friends are starting to strike out on their own learning what will work and what will not for our new and upcoming projects.  As she was surfing I couldn’t help but notice the giant words on her screen stating “1140px CSS Grid Retired”.

A moment of reminiscence took me back to Google I/O ’11, where as a sandbox developer on the 2nd floor of Moscone West I received an emergency phone call telling me that I needed to get a press release site put together in a couple of hours… and it had to work on whatever device the user was using to view the release. I grabbed my laptop and sat on the floor coding trying to get done before Jane’s Addiction rocked the house for the after-hours party. I had heard of the 1140px CSS Grid and so I decided to give it a whirl. I grabbed it and hastily put together the site (including a sidebar with a gallery and press kit download section that would collapse under the press release when viewed on a phone). The system was terrific, and worked perfectly for what I needed.

After that experience I always carried the 1140px CSS Grid system in my web-toolbox for some quick grid-like-fixery where a fluid site would be needed. In fact I’ve mentioned the 1140px CSS Grid before in posts, and I think it even snuck into one of my books.

So why was the 1140px CSS Grid retired? Well, as Andy Taylor explains on the 1140px CSS Grid blog post, it was always an experiment, RWD has come a long way since the inception of the project, and it was desktop-down utility. I agree with what Andy has done in retiring the project, and I would like to express my thanks for the experience it gave me.

November 24, 2012
by Phil
0 comments

Where did all the updates go?

Hey guys, it’s been a while and I found a few minutes to give you an update on where I’ve been and what I’ve been up to:

  • I have two books out now (one I wrote myself, and one I co-authored), and I’ve been spending time hanging out with the Boston PHP group (for Season 2 of jQuery jAM).
  • I also have a video training series set to drop at the end of next month (fingers-crossed).
  • I’ve also been working on several side projects and spending some make-up time with the family (since they saw so little of me while working on the books).

Those of you who read the sidebar on the site may have noticed that I have been maintaining a list of mini-posts about things I find that are interesting or cool over on my tumblr blog. While I try to decide if it is worth porting over as full posts to this site (rather than just sidebar material), be sure to go there to look at what I am looking at, considering, or even what random things I believe need to be posted.

October 30, 2012
by Doo
0 comments

I was reading java code geeks this morning and read an interesting article on java standards. I read through this article and holy crapped on almost every point. I couldn’t believe the code standards would be so backward of best practice. Then I checked the date on the standards linked to. 1999 for the HTML, 1997 for the PDF. That is long before java 1.5, it was different world then (it wasn’t even Oracle). I want to know why the standards have not evolved. They need to release a new best practices document. Makes me feel good that the changes the author of the post recommends are already reflected in our code standards.

July 28, 2012
by Phil
1 Comment

jsPerf and selector performance

Those who have been using jQuery since the initial release know that it is a serious boon to any developer working with JavaScript and multiple browsers.  What you may not know is that while jQuery is incredibly awesome, browsers have gone well past the sluggish speed of the IE6 and 7 days. This may not mean much to you as your code still works like a champ and behaves well in cross browser situations, but by using jsPerf you can see just how much your “lazy” selectors are costing you.

Standard Disclaimer: The following are massive tests and while they demonstrate the repetitive nature of selectors they may not actually help your web application (especially if it is a small application with only one or two selector calls). As always, do your own benchmarking with the same hardware your customer or client is using. Always remember to remove the jank.

jsPerf image

jsPerf.com (not the official logo, but you get the idea)

jsPerf is a JavaScript Performance benchmarking site. You can go there to write your own series of benchmarks and watch them perform in different browsers.  The site also leverages the use of Browserscope showing you how other browsers have performed using your test.  It is important to remember that you cannot snap judge your tests, you really should be running them with as many browsers as possible. This is important because it will affect how your JavaScript runs on every browser. Not all browsers use the V8 engine that Chrome does ;).

For an example, lets fire up http://jsperf.com/getelementbyid-vs-jquery-id/13. When you load this page you can see that the test is set up to use jQuery 1.7 and is going to run several tests (using a jQuery selector, using the vanilla getElementById, creating a custom function for selection, etc). Click the “Run Tests” button to begin the test sequence.  When finished you will be shown the fastest test and the slowest.  Each test will also show the relation in speed to the fastest running test.

As an example I ran this test using Chrome 22.0.1215.3 on Windows 7, below is a screen shot of my results:

jsPerf test score

From the image above you can see that using the plain JavaScript “document.getElementById(‘foo’);” was the fastest method for selecting the element with an id of foo. By faster I don’t mean just a ‘meh’ amount of fast, I mean it was blazingly fast, look at the speed difference for the jQuery selector “$(‘#foo’);”. Now back to the disclaimer, take a look at the following chart:

jsPerf results chart

This chart shows plenty of Chrome love, but also highlights the speed differences and improvements in the internal JavaScript engine. Not all browsers are created equal, but luckily seem to be improving all the time.

You can see that other browsers (including previous versions of Chrome) do not run this test with the same performance. In fact, some browsers are even up to 50% slower running the same tests. Always test your code, and then test it again.  After that, have someone else test your code and compare the results.

Now, go out there and start tearing up your old code and getting performance back to where it should be ;) .

July 24, 2012
by Phil
6 Comments

Sams Teach Yourself jQuery Mobile in 24 Hours

I’m happy to announce that Sams Teach Yourself jQuery Mobile in 24 Hours is now available at most book retailers including Barnes and Noble, Amazon, Safari Book, Pearson Higher Ed, and informIT.

The book writing process was a fantastic one that was full of late nights, last minute changes, and lots of testing. While I’ve already thanked quite a few people in the book, I’d like to extend that thanks to everyone who had a suggestion, comment, correction or otherwise.

Those wanting to pick up the book right now can use the following link to purchase the book from Amazon (in both the paperback and/or kindle variety).

Sams Teach Yourself jQuery Mobile in 24 Hours (Sams Teach Yourself — Hours)

As always, please let me know what errors you find (I’ve already found a couple – including a floating “n” in the first ‘about the author’ section), and I’ll have them noted so that future printings of the book don’t have these errors.

Those that are in marketing or are just curious about creating and using QR and Microsoft Tag codes can forgo the morning beverage and instead pick up the mini-book “Creating QR and Tag Codes” for their kindle with the link below:

Creating QR and Tag Codes

In another bout of good news, I’m also happy to announce that my second book has just left round one of editing and is moving into production! “jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples” is slated to be released on November 10th.  This is an amazing book of recipes that you can use to get the gist of a particular jQuery function, or an actual snippet of code that you can use in your current projects.

Here is the link to the pre-order page on amazon:

jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples (Developer’s Library)