Profile

Cover photo
Chad Thoreson
35 followers|1,381 views
AboutPostsPhotosVideos

Stream

Chad Thoreson

Shared publicly  - 
 
Brad Frost originally shared:
 
A fantastic reminder to use progressive enhancement for Javascript. http://christianheilmann.com/2011/12/06/that-javascript-not-available-case/

+Jack Bishop and I gave a presentation at BK.js a few weeks ago about progressive enhancement for the mobile web (thanks +Marco Carag!). During the Q and A, someone asked "With all this diversity and inconsistent/shaky support for this Javascript for mobile browsers, why don't we just rely more on HTML?" EXACTLY. Yet it was asked as a question.

There's a mentality that in order to do create functional experiences in the browser, especially for mobile, you need to use some hardcore JS framework, rewrite the scrolling logic, add a bunch of interstitial animations, create overlays and add swipes. I have nothing against frameworks or these techniques, but for whatever reason people think they're a prerequisite for creating mobile web experiences. They're not.

One of my favorite mobile sites is Target's: http://m.target.com (great job +Matt Menzer). The beauty of this experience isn't in the mind-blowing animations, it's about the clarity of the content, the speed in which the page loads and the accessibility of the experience.

Contrast Target's mobile experience with Paper.li's mobile experience: http://m.paper.li/ In case you're not familiar with Paper.li it aggregates links from social sites and creates a digest. The focus should be on the content, but instead the focus rests on a very complex system of loaders, scrollers, fixed position elements and native-feeling UI elements. Note: it may not seem bad on a desktop or iPhone 4s, but try firing it up on an Android, Windows Phone, or Blackberry. Another note: this was made with Sencha, which again I have nothing against (quite the opposite), I just feel it's better suited for hybrid apps that aren't deployed over the web.

The difference between Target's and Paper.li's sites is that one is working with the constraints of the medium and using those constraints to it's advantage, while the other is introducing unnecessary dependencies on what's essentially a list of links and limiting the site's accessibility as a result.

Are there cases for creating experience that rely heavily on Javascript? You betcha. Here's a great one right here: http://m.microsoft.com/windowsphone/en-us/demo/index.html The purpose of this project was to show off Window's Phone's attractive Metro UI in hopes to woo other smartphone owners over to Microsoft's side. Very clever concept indeed. Could such an immersive experience be progressively enhanced and achieve this level of fidelity? No. The reason this works so well is that the audience they were trying to reach with this experience are other smartphone owners (ones with notably better browsers than WP7 I might add).

The fact is that as we head into this new era of diversity, all bets are off. We're going to have to create experiences for extraordinarily capable devices as well as low-powered, inexpensive, good-enough devices. Screw them you say? Take a look at how the Kindle Fire is selling. Look at the Nook Color. Look at what phones Metro PC and Cricket are pushing in full-swing this holiday season. They might be Android and Blackberry phones, but they sure as hell aren't the Nexus S. The Zombie Apocalypse (http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices-will-disrupt-our-old-school-ux-assumptions.htm) is here, my friends, and it's up to us to readjust our assumptions.

/cc +Jenn Lukas
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
If you're learning Ruby and Rails, as I am, this video from Nettuts.com is great:

http://net.tutsplus.com/tutorials/ruby/the-intro-to-rails-screencast-i-wish-i-had/
1
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
Paul Irish originally shared:
 
Our compilers and optimization tooling is exceptional these days. Surround yourself with tooling and put your brain towards useful problems; not conserving bytes in your front-end code.

"We should have used better tools, and spent more of our time learning better ways to code."
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
Addy Osmani originally shared:
 
Cross-browser contextmenu support with a polyfill

While looking through the Firefox nightlies, I noticed that experimental support for the HTML5 contextmenu had landed and may well be available in the final version of Firefox Aurora. This is exciting news (see http://bit.ly/d6BIXO for the specs).

The contextmenu attribute allows us to provide each element on a page with it's own native context-menu, however, unlike current solutions where we dynamically generate menus in-page using a set of <div>s, these menus can actually extend with the browser's own current context-menus providing a seamless experience. See here for an example: http://twitpic.com/68ztwa

What that means is say..if you right click on an image, you won't just see the 'Save Image As' menu options, but if the page author likes, you can also see additional menu items they've coded up integrated into that same menu (eg. 'Save image to Picasa', 'Compress image online' etc).

This is a very big change from what we're used to seeing. Right now, custom in-browser context-menus often have to attempt overriding the menu seen by right or left clicking on an element. This is a break in the user-experience as whilst they may wish to use your custom menu functionality, they probably also want to still access what the browser natively permits them to do at the same time.

Let's talk about browser support for a moment.

According to caniuse.com, there are currently no other browsers which natively support the contextmenu attribute (outside of vendor-specific extensions) and the specs for the feature may well change. But how do we provide a cross-browser context-menu for users who have browsers with and without native support for this feature right now?.

I went to check +Paul Irish 's Modernizr polyfill page to see if there were currently any solutions for this and I discovered that the jQuery-contextMenu plugin had attempted to solve the problem. Low and behold I tested it out in the FF nightlies but support for using the native contextmenus was unfortunately broken. What was wrong?.

After investigating the plugin source and several contextmenu demos (including one by Paul Roget), I found out that the Firefox nightlies support contextmenu structures which are a little different from the official specs. Here's what a contextmenu based on the specs might look like:

<!--ignore the onclick handlers, they are here for brevity-->
<menu id="html5menu" type="context">
<command label="rotate" onclick="alert('rotate')">
<command label="resize" onclick="alert('resize')">
<menu label="share">
<command label="twitter" onclick="alert('twitter')">
<command label="facebook" onclick="alert('facebook')">
</menu>
</menu>

and here is what the FF nightlies support (as per Paul's demo):

<menu id="html5menu" type="context">
<menuitem label="rotate" onclick="rotate()"></menuitem>
<menuitem label="resize" onclick="resize()"></menuitem>
<menu label="share">
<menuitem label="twitter"onclick="alert('foo')"></menuitem>
<menuitem label="facebook"onclick="alert('bar')"></menuitem>
</menu>
</menu>

The difference is very minor. The specs suggest that commands inside a menu be defined using 'command' tags whilst FF opt for the more semantically-named 'menuitem' convention instead. The jQuery-contextMenu plugin had been attempting to polyfill the specs, rather than vendor-specific implementations.

Time to finally fix the polyfill.

Fixing this issue was relatively trivial. If you look through the source of the plugin, you'll see that it checks for the use of a number of different types of tags in the markup of a selected contextmenu. 'command' is checked by default. To support the nightlies, I expanded this to also include checks for 'menuitem', so that you could easily use either form of markup and have it still work.

While digging around the code, I also noticed that it lacked a test to determine whether a browser actually natively supported contextmenus or not, meaning it wasn't actually providing developers with a polyfill - only using markup defined using contextmenu as a data-source for a div-based solution (technically, a shim).

Testing for vendor support of specific tags isn't always as straight-forward as it should be. One approach to testing is checking to see if a particular type of element exists in the document window. eg. to test for support of the <html> element, we could use ('HTMLElement' in window).

It's trickier to test for contextmenu support because you can actually get false positives in some browsers.In Chrome 14 for example, ('HTMLMenuElement' in window) actually returns true, even though it doesn't support contextmenus right out of the box. Instead, I opted to test against the submenu items 'menuitem' and 'command' as these were more reliable. A simple test for contextmenu support could thus look like:

if( !('HTMLMenuItemElement' in window) || !('HTMLCommandElement' in window)){
//polyfill
}

allowing us to use native contextmenu rendering if it was supported or falling back to the plugin where it wasn't.

I patched these all of these issues in my fork of the plugin, which you can check out here: https://github.com/addyosmani/jQuery-contextMenu. A demo is available here: http://addyosmani.github.com/jQuery-contextMenu/demo.html

You can easily use one of the markup forms above along with the plugin as follows:

$.contextMenu({
selector: '#someElement',
items: $.contextMenu.fromMenu($('#html5menu'))
});
$.contextMenu('html5'); /*the original author opted to use a second call to cover native handling, I've left it in for now*/

and that's it!. If you would like to read more, you can checkout the official specifications below or grab the Firefox nightlies to see how native contextmenu integration really looks first-hand.

Further reading

Specs: http://www.w3.org/TR/html5/interactive-elements.html#context-menus
Patched jQuery-contextMenu: http://addyosmani.github.com/jQuery-contextMenu/
Firefox nightly builds: http://nightly.mozilla.org/
Paul Roget's test page for FF nightlies: https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
Issue 2 of Google's Quarterly Magazine is out. Check it out: http://www.thinkwithgoogle.com/quarterly/people/note.html
1
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
The new Kindle and Kindle Fire (tablet) look very nice. What really looks interesting is their new browser, Silk.
1
Alex Wollman's profile photo
 
Hm....hm....interesting Amazon, interesting
Add a comment...
In his circles
39 people
Have him in circles
35 people
Larry Kohlman's profile photo
Chris Thoreson's profile photo

Chad Thoreson

Shared publicly  - 
 
Leodor Selenier originally shared:
 
:: Steampunk + Doll Art
Vladimir Gvozdev

Vladimir Gvozdev, also well known as Gvozdariki is a painter and doll sculptor, born in 1966 Moscow – Russia.
After his graduation in Russian Academy of Arts in 1989, He begin his career as graphic and interior designer, but the passion for art, that he used to have as a child grew stronger.
Two years later in 1991 he became a freelance painter and sculptor. His paintings are mostly in Decorative style, but he loves to experiment in Steampunk style too, as here is part of his project: “Machinery”. While paintings are his passion, Doll Art is his obsession. He is spending many hours creating his magical and charming creatures, he also loves to work in collaborative projects with his friends which are also artists well know as: Giuseppe and Shevelev.
Vladimir Gvozdev has many exhibitions in Russia, but his art is collected in all around the world.

Official Site: http://gvozdariki.ru

Special Thanks to: +Ryan Schultz and +Ursula Vernon, for guiding my eye’s on these magnificent art by Vladimir Gvozdev – Gvozdariki!

Related Articles: Steampunk
https://plus.google.com/u/0/114153859732710523651/posts/6xMyYGUvWTc

--------------------------------------------------------------------------------------------------------------
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
This is great:

Array(16).join("lol" - 2) + "batman"

Thanks Alex Sexton (@slexaxton)
1
Add a comment...

Chad Thoreson

Shared publicly  - 
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
An interesting take on Amazon's Silk browser. Basically, according to this, Amazon will be able to see everything browsed with Silk. Giving them more insight than even Google can gather.

http://cdespinosa.posterous.com/fire
1
Add a comment...

Chad Thoreson

Shared publicly  - 
 
Guh. I hope this doesn't happen. Once again, an amazing post by the great Paul Irish.
Paul Irish originally shared:
 
Browser Market Pollution: Why IE[x] is the new IE6
http://paulirish.com/2011/browser-market-pollution-iex-is-the-new-ie6/

While the shape and trajectory of the browsers at play has changed considerably in the past years, I'm a worried about the next ten. How can IE satisfy its IT department allies but not drag down the web's potential? Are we missing some wiser approach when it comes to upgrading the web's users to better browsers?
1
Add a comment...
People
In his circles
39 people
Have him in circles
35 people
Larry Kohlman's profile photo
Chris Thoreson's profile photo
Work
Occupation
Web Dev and Design
Links
Contributor to
Story
Tagline
I play on the web, you should to
Introduction
A web developer and designer living in Sioux Falls, SD.
Basic Information
Gender
Male
Relationship
Married