WebDev FeedHouse

W3C: W3C Demonstrates Power of Open Web Platform at Mobile World Congress 2012

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

<a class="imageLink" href="/2012/MWC/"> <img src="http://www.w3.org/2012/MWC/images/thumb.png" alt="MWC imagery" width="100" height="75"/></a> W3C invites media, analysts, and other attendees of <a href="http://www.mobileworldcongress.com/">Mobile World Congress (MWC) 2012</a> to meet with W3C and learn how the Open Web Platform is transforming industry. From 27 February through 1 March W3C will showcase demonstrations of HTML5, CSS3, and other open Web technologies at its booth in Hall 2, Stand 2A31. CEO Jeff Jaffe, W3C staff, and some W3C Members will be available as expert resources for media stories and analyst reports on how the Web is changing mobile, television, advertising, games, publishing, automotive, health care, and other industries. Read the <a href="https://www.w3.org/2012/02/mwc-media.html.en">media advisory</a> and <a href="http://www.w3.org/2012/MWC/">learn more about W3C @ MWC 2012.</a> </content>

W3C: W3C Launches New Markup Validation Service

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The W3C has launched the <a href="http://validator.w3.org/nu/">Nu Markup Validation Service</a>, a non-DTD-based markup validator being made available to the community in parallel to the existing DTD-based <a href="http://validator.w3.org">validator.w3.org</a> W3C markup validator. The W3C Nu Markup Validation Service uses the same backend as the <a href="http://validator.nu/">Validator.nu</a> site, which is also the backend for the HTML5-checking feature of <a href="http://validator.w3.org">validator.w3.org</a>. The Nu Markup Validation Service is a separate, standalone validator which provides that same HTML5-checking feature while also offering a user interface that exposes additional options, such as full validation support for XHTML5 documents, and the ability to validate documents that contain features from <a href="http://www.w3.org/TR/rdfa-core/">RDFa Core 1.1</a> and from <a href="http://www.w3.org/TR/rdfa-lite/">RDFa Lite 1.1</a>. </content>

W3C: Widget Access Request Policy is a W3C Recommendation

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a> has published a W3C Recommendation of <a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/">Widget Access Request Policy</a>. This specification defines the security model controlling network access from within a widget, as well as a method for authors to request that the user agent grant access to certain network resources or sets thereof. Learn more about the <a href="http://www.w3.org/2006/rwc/">Rich Web Client Activity</a>. </content>

W3C: CSS Positioned Layout Module Level 3 Draft Published

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/Style/CSS/members">Cascading Style Sheets (CSS) Working Group</a> has published the First Public Working Draft of <a href="http://www.w3.org/TR/2012/WD-css3-positioning-20120207/">CSS Positioned Layout Module Level 3</a>. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS level 3 relating to positioning and stacking of elements. It includes and extends the functionality of CSS level 2, which builds on CSS level 1. The main extensions compared to level 2 are the ability to position elements based on CSS Region boxes, and the ability to specify a different containing blocks for elements. Learn more about the <a href="http://www.w3.org/Style/">Style Activity</a>. </content>

W3C: Last Call: Web IDL

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a> has published a Last Call Working Draft of <a href="http://www.w3.org/TR/2012/WD-WebIDL-20120207/">Web IDL</a>. This document defines an interface definition language, Web IDL, that can be used to describe interfaces that are intended to be implemented in web browsers. Web IDL is an IDL variant with a number of features that allow the behavior of common script objects in the web platform to be specified more readily. How interfaces described with Web IDL correspond to constructs within ECMAScript execution environments is also detailed in this document. It is expected that this document acts as a guide to implementors of already-published specifications, and that newly published specifications reference this document to ensure conforming implementations of interfaces are interoperable. Comments are welcome through 28 February. Learn more about the <a href="http://www.w3.org/2006/rwc/">Rich Web Client Activity</a>. </content>

W3C: Java language binding for Web IDL Draft Published

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a> has published the First Public Working Draft of <a href="http://www.w3.org/TR/2012/WD-WebIDL-Java-20120207/">Java language binding for Web IDL</a>. This document defines the Java language binding for Web IDL, the interface definition language for the Web platform. Learn more about the <a href="http://www.w3.org/2006/rwc/">Rich Web Client Activity</a>. </content>

W3C: W3C Introduces Startup Level for Membership

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

To increase and broaden participation in its activities, W3C announces today a new <a href="http://www.w3.org/Consortium/fees-201202#startup">startup membership level</a> for small organizations new to W3C. Organizations are eligible for the new level depending on their size (10 or fewer employees) and annual revenues. This new level is available for the first two years of Membership. Please see the <a href="http://www.w3.org/Consortium/fees-201202#startup">startup level description</a> for details and more information about eligibility. Please contact membership@w3.org if you have any questions. </content>

W3C: Last Call: Vibration API

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/2009/dap/">Device APIs Working Group</a> has published a Last Call Working Draft of <a href="http://www.w3.org/TR/2012/WD-vibration-20120202/">Vibration API</a>. This specification defines an API that provides access to the vibration mechanism of the hosting device. Vibration is a form of tactile feedback. The API is designed to tackle high-value use cases related to gaming, and is not meant to be used as a generic notification mechanism. Comments are welcome through 01 March. Learn more about the <a href="http://www.w3.org/2007/uwa/">Ubiquitous Web Applications Activity</a>. </content>

W3C: The PROV Data Model and Abstract Syntax Notation Draft Published

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/2011/prov/">Provenance Working Group</a> has published a Working Draft of <a href="http://www.w3.org/TR/2012/WD-prov-dm-20120202/">The PROV Data Model and Abstract Syntax Notation</a>. PROV-DM is a data model for provenance for building representations of the entities, people and activities involved in producing a piece of data or thing in the world. PROV-DM is domain-agnostic, but is equipped with extensibility points allowing further domain-specific and application-specific extensions to be defined. PROV-DM is accompanied by PROV-ASN, a technology-independent abstract syntax notation, which allows serializations of PROV-DM instances to be created for human consumption, which facilitates its mapping to concrete syntax, and which is used as the basis for a formal semantics. Learn more about the <a href="http://www.w3.org/2001/sw/">Semantic Web Activity</a>. </content>

W3C: BAD to Good Updated: Demo shows web accessibility barriers fixed

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The Web Accessibility Initiative (<a href="http://www.w3.org/WAI/">WAI</a>) Education and Outreach Working Group (<a href="http://www.w3.org/WAI/EO">EOWG</a>) has updated the <a href="http://www.w3.org/WAI/demos/bad/">Before and After Demonstration (BAD)</a>. BAD shows an inaccessible website and a retrofitted version of the same website with the accessibility barriers fixed. Read the <a href="http://lists.w3.org/Archives/Public/w3c-wai-ig/2012JanMar/0024.html">update e-mail</a> and learn about <a href="http://www.w3.org/standards/webdesign/accessibility">Accessibility</a>. </content>

W3C: Internet Society Board Approves Donation to Support W3C Stewardship of Open Web Platform

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

In its continuing efforts to foster an open Internet ecosystem, the <a href="http://www.internetsociety.org/">Internet Society</a> today announced a 1M USD donation to the World Wide Web Consortium. This donation, the final installment of the Internet Society's 2009 <a href="http://www.w3.org/2009/12/isocw3c-pr">pledge</a> of 2.5M USD over three years, supports the continued evolution of W3C as an organization that creates open Web standards. "The W3C is emblematic of the inclusive, multistakeholder approach that is critical to the continued development, operation, and use of the open, global Internet,"� said Raúl Echeberría, Chair of the Internet Society Board of Trustees. "We look forward to continued cooperation between the W3C and the Internet Society to advance our shared values through independent voices."� Read the <a href="http://www.w3.org/2012/01/isoc-pr.html">press release</a> and <a href="http://www.w3.org/2009/11/isoc-w3c-faq">ISOC and W3C FAQ</a>. </content>

W3C: Three Last Call Working Drafts published by the RDF Web Applications Working Group

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/2010/02/rdfa/">RDF Web Applications Working Group</a> has published three Last Call Working Drafts today: <ul class="show_items"> <li> <a href="http://www.w3.org/TR/2012/WD-rdfa-core-20120131/">RDFa Core 1.1</a>,</li> <li> <a href="http://www.w3.org/TR/2012/WD-rdfa-lite-20120131/">RDFa Lite 1.1</a> and </li> <li> <a href="http://www.w3.org/TR/2012/WD-xhtml-rdfa-20120131/">XHTML+RDFa 1.1</a>.</li> </ul> Together, these documents outline the vision for RDFa in a variety of XML and HTML-based Web markup languages. RDFa Core 1.1 specifies the core syntax and processing rules for RDFa 1.1 and how the language is intended to be used in XML documents. RDFa Lite 1.1 provides a simple subset of RDFa for novice Web authors. XHTML+RDFa 1.1 specifies the usage of RDFa in the XHTML markup language. A number of improvements have been made to RDFa 1.1 over the past year by working closely with Google, Microsoft, Yahoo! and the other search engine developers. Public review and comments have resulted in a number of further refinements to the language that eases the learning curve for beginner Web authors. The release of these documents as Last Call Working Drafts is a signal to the public that the Working Group believes that all of the technical requirements, public comments and reported issues have been addressed. It is also an open invitation to the general public to review and provide feedback on the finalization of this technology via the <a href="http://lists.w3.org/Archives/Public/public-rdfa-wg/">RDF Web Applications Working Group mailing list</a>, by 21 February. Learn more about the <a href="http://www.w3.org/standards/semanticweb/">Semantic Web Activity</a>. </content>

W3C: W3C Launches Patent Advisory Group for Touch Events Specification

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

In accordance with the <a href="/Consortium/Patent-Policy-20040205/">W3C Patent Policy</a>, W3C has launched a Patent Advisory Group (<acronym>PAG</acronym>) in response to <a href="http://www.w3.org/2012/01/touch-pag-charter">disclosures</a> related to the <a href="http://www.w3.org/TR/touch-events/">Touch Events version 1</a> Specification. The <a href="http://www.w3.org/2010/webevents/">Web Events Working Group</a> develops this specification. W3C <a href="/Consortium/Patent-Policy-20040205/#sec-Exception">launches a PAG</a> to resolve issues in the event a patent has been disclosed that may be essential, but is not available under the <a href="/Consortium/Patent-Policy-20040205/#def-RF">W3C Royalty-Free licensing requirements</a>. Public comments regarding these disclosures may be sent to public-te-pag@w3.org (<a href="http://lists.w3.org/Archives/Public/public-te-pag/">with public archive</a>). Learn more about <a href="/Consortium/Patent-Policy-20040205/#sec-Exception">Patent Advisory Groups</a>. </content>

W3C: Workshop Report: Data and Services Integration

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

W3C today published the <a href="http://www.w3.org/2011/10/integration-workshop/report.html">report</a> of the <a href="http://www.w3.org/2011/10/integration-workshop">Workshop on Data and Services Integration</a>, hosted on 20-21 October 2011 by MITRE in Bedford, Massachusetts, USA. This workshop provided a way for the community to meet and discuss some of the challenges of integration of heterogeneous data and services. With the emergence of the Web, the need for reusing data and services has become even stronger as the number of available services has grown. Different services stacks now exist from Web Services to Cloud-based services. One goal of this workshop was to figure out the needs in the domain of integration that would benefit from standardization, or where discussion via Community or Business Groups could gather a critical mass. The participants came to the conclusion that solutions to the data integration issues can be the result of better integration of tools helping going cross-stacks. They also discussed how to architect RESTful services in the enterprise, with a plan to create a group to work on Linked Data Patterns, specifically REST-based patterns on RDF and other formats. </content>

W3C: Incubator Group Report: Media Analysis Management Interface

W3C Staff — Wed, 08 Feb 2012 21:00:30 +0000

The <a href="http://www.w3.org/2005/Incubator/mami/">Media Analysis Management Interface Incubator Group</a> published its final report, <a href="http://www.w3.org/2005/Incubator/mami/XGR-mami-20120125/">Media Analysis Management Interface XG Final Report</a>. The Media Analysis Management Interface (MAMI) enables the understanding of the real world at a low cost by using analysis engines such as video image processing engines, sensor data analysis engines, and so on. It also enables various services to be easily provided, such as physical security, environmental load reduction, and intelligent accessibility services. The MAMI Incubator Group described the requirements of the MAMI and six use cases in three fields: energy saving, video surveillance, and operational improvement. The Incubator Group expects to collaborate with other W3C working groups, in particular the Multimodal Interaction Working Group. This publication is part of the <a href="/2005/Incubator/">Incubator Activity</a>. This work is not on the W3C standards track. </content>

Vitamin: Rails 3.2.1

Jason Seifer — Wed, 08 Feb 2012 14:00:04 +0000

Greetings, folks! If you haven’t been keeping up with the latest Rails news, we have a new version! Ruby on Rails 3.2.1 has recently been released with some very welcome changes!

Faster development mode – Rails now only reloads the classes you’ve actually changed between requests in development mode.
Explain queries – In development mode, you can automatically show the explain of certain queries by calling .explain at the end of your query. The results will go in your log.
Active Record Store – Active Record now has a built in way to do key/value storage right from your models. No plug-ins or external gems required!

You can also check out the change log of all of the fixes and changes, both big and small. Enjoy!

Vitamin: Treehouse Groups are live!

Ryan Carson — Wed, 08 Feb 2012 13:45:02 +0000

You can now create a Treehouse Group Account for your company, university, school or any grouping of two or more people. Group plans are 25% cheaper so it’s a great way to save money.

We’ve added a simple Groups Dashboard that allows you to see …

Group Activity: Who’s watching videos and unlocking Badges
Ranking in your Group, based on Badge unlocks

More info …

Group pricing is 25% off normal prices, which allows people with large groups to save a bit of money.
You only need 2+ people to sign up.
If you’re already a Member, you can’t be brought into a Group. We’ll address this in v2 of Groups. However, please contact Support if you need help: help@teamtreehouse.com
Sign up here

We have big plans for adding more features to Groups, so stay tuned. This is just an MVP (minimum viable product) release, so we could get it out to you all and see what you think :)

General Design Refresh

Tyson, our new Designer has also done a site-wide refresh on the app. It’s even easier to use now and super fast. Tyson lead the Digg Design Team for awhile so he knows all about optimizing for speed :)

Wisdump: The "Horrible Web Design Client:"� An Infographic Look

Wisdump — Wed, 08 Feb 2012 07:35:37 +0000

Web design is a new frontier in creative designing. It takes a special set of design skills to make an effective web site. A good web site is not just pretty to look at, or filled with a lot of cool Flash animations, it is also easily navigable, with well laid out elements that are not confusing to a person who will visit the site for the first time.

There are so many things that come into play in effective web design that for an aspiring web designer, but if there's one skill that a web designer must really develop, and fast, is how to deal with customers, especially those that are notoriously difficult to work with. In this infographic from the online publication Top Web Design Schools, the business of dealing with difficult customers is given a tongue-in-cheek, but very informative treatment. Reading through the infographic will give you the necessary information that will help you deal with clients more effectively in the future. As they say, forewarned is forearmed. You can now go to a client meeting with the necessary tools that will help make these meetings more fruitful and definitely a lot painless.

From: Top Web Design Schools

Vitamin: Free Video: Getting started with iOS development

Amit Bijlani — Tue, 07 Feb 2012 15:38:09 +0000

In this 6 minute video, we will get you started with iOS development by learning about the benefits of Apple’s iOS Dev center and how to gain access to the integrated development environment (IDE) called Xcode.

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Vitamin: Another Round of Treehouse Nerd Merit Badges!

Nick Pettit — Tue, 07 Feb 2012 14:00:28 +0000

We recently launched Treehouse and, thanks to you, it’s been successful beyond our wildest expectations. Thank you all so much!

We had so much fun celebrating with our previous giveaway, that we thought we would do another one.If you tweet to @treehouse the name of your favorite web app, we’ll randomly pick 10 winners to receive a "Mike the Frog" Nerd Merit Badge! Here’s a picture of what they look like:

Vitamin: Pears: An open source collection of common markup & style

Allison Grayce — Mon, 06 Feb 2012 18:38:20 +0000

Lo and behold, Mr. Dan Cederholm has done it again! This time the folks over at SimpleBits unveiled their latest project, Pears, an open source WordPress theme that enables you to get your own pattern library up and running quickly.

This is super helpful to collect, test and experiment with your collection of semantic HTML & CSS patterns. For beginners it can be a great way to begin to understand the relationship between markup and style. No matter which audience you fall into, it is a handy tool for improving speed and productivity.

Also make sure to take notice of the Pears website itself, which is beautifully designed and responsive.

Thanks Dan, for making our lives more enjoyable with Dribbble and easier with Pears. :)

Vitamin: Future Insights Live "� Early Birds Extended!

Lou Morgan — Mon, 06 Feb 2012 16:52:04 +0000

If you caught Ryan’s article last week, he told you about our brand new, not to be missed Vegas event – Future Insights Live! We’ve combined the Future of Web Apps, Design and Mobile into one massive five day event all geared toward you! Whether you’re a Web Designer, Developer or Entrepreneur there will be something for everyone.

We are launching a brand new scheduling app within the next couple of weeks which will list full details of the huge conference schedule and give you an overall feel for the event. So with that in mind, we have decided to extend our Early Birds (saving you $200) until 24th Feb! That way you can see EXACTLY what you’re paying for.

We’ll be launching the full schedule by the end of the week, so please check it out and join us for our biggest event yet!

Vitamin: Check My Colours

Nick Pettit — Mon, 06 Feb 2012 16:51:42 +0000

Developers often write tests to make sure their code is working properly, and designers should be thinking along the same lines.

It’s difficult to test aesthetics, but with tools like Spur App you can make sure that your design looks good for people with color blindness and other mild vision impairments. You can also make sure that your design has enough contrast and feels "balanced" on both sides.

Check My Colours is another web-based tool that can help out. Simply type in your live URL, and you’ll get a listing of all the areas where your color contrast can be improved. It’s a bit more technical than simply looking at a black and white image, but it’s good for more detailed analysis, especially on a complex web application that might have lots of dynamic views.

ajaxian: Winding road of open-source webOS

jvaughan — Thu, 02 Feb 2012 22:21:14 +0000

HP continues to divulge bits and pieces of a road map for the ill-starred and nearly-orphaned webOS. The company has followed up its December plan to release webOS mobile platform and development tools with a proposed timeline, with a full release set before year's end. Some people see a life for the associated Enyo JavaScript framework aside from any success or failure webOS ultimately achieves.

456 Berea St: Using max-width on images can make them disappear in IE8

Roger Johansson — Thu, 02 Feb 2012 19:16:54 +0000

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere"� until I went to check in IE8. The site's logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

Read full post

Posted in Browsers, CSS.

molly.com: Inside the CSS WG: A New Reality Series

mollydotcom — Thu, 02 Feb 2012 18:32:50 +0000

I’m pleased to announce my new series of interviews published by the wonderful Bath, U.K. based .net Magazine, called “Inside the CSS Working Group.” “Step with me behind the curtain into the W3C CSS Working Group. Historically filled with challenges, … Continue reading →

Vitamin: Full Day Web Design Workshops: Which Would You Pick?

Cat Clark — Thu, 02 Feb 2012 16:51:00 +0000

At Carsonified Towers, we’re all getting super excited for May, when The Future of Web Design hits London for another three days of learning and inspiration. As ever, we kick off the show with four full-day workshops – each lead by a totally inspirational industry leader. From 9am am to 5pm, we’ll be rolling up our sleeves and knuckling down for a serious hit of web savvy. Numbers are capped at 40 for each workshop, ensuring a great learning environment.

This year’s chosen workshop topics are already proving popular. First up, we’ve got the unstoppable force of web awesomeness that is Paul Boag. Director of Headscape, Paul will be leading a crash course in Running A Successful Web Design Business: ”We like to think that being a successful independent web designer is about creating great websites. Its not. Running your own business is about a lot more than having the right professional skills. ”

After wowing the crowds as a Rising Star back in 2011, Steve Fisher has rapidly become one of our most popular speakers. He’ll be joining us again in London to lead his Rock Solid UX Deliverables workshop: “No longer something that has to always be hugely complex and costly, we’ll cover the back-to-basics approach to UX design in this workshop and how to practically dispatch a rock solid responsive web design UX deliverables package.”

Next up, creator of the uber popular Coach to 5K app, Josh Clark will be crossing the Atlantic to deliver his Teaching Touch workshop – a sell out success at FOWD NYC last year: “The workshop presents nitty-gritty ‘rule of thumb’ design techniques that together form a framework for crafting finger-friendly interface metaphors, affordances, and gestures for a new generation of mobile apps that inform and delight.”

Last but not least, longtime Carsonified favourites, the Web Standardistas will be joining the fun, to teach their Good Ideas Grow On Paper workshop: “Armed with some fundamental design principles and an abundance of tools "� which naturally includes the Standardistas’ ‘Bag of Awesome™’ (containing a veritable cornucopia of material) "� we show the aspiring analogue designer a range of methods for breaking out of the stranglehold of the often clichéd digital world.”

Which workshop appeals the most to you? For detailed information on all of them, head on over to our schedule page…

Thanks to Nationaal Archief for the photo used above.

Vitamin: SQL Fiddle

Amit Bijlani — Thu, 02 Feb 2012 15:05:25 +0000

If you like jsFiddle, then you will love SQL Fiddle. It allows you to select a database, build a schema, populate the schema and run queries against it. The service currently supports MS SQL, MySQL, Oracle, and PostgreSQL. Why is this interesting? You can compare databases, post questions to forums along with your schema and query or just prototype an idea.

Vitamin: Free Video: Control Flow

Jason Seifer — Thu, 02 Feb 2012 14:00:24 +0000

In this 4 minute video, you will learn about the concept of control flow in Ruby. This goes in to using if/else statements and case statements

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

QuirksMode: QuirksMode.org reader survey, part II

Thu, 02 Feb 2012 10:39:27 +0000

In December I held a QuirksMode reader survey on Urtak. It had 69 questions, and about 59,000 answers were given by about 1,100 respondents. A few weeks back I published part 1 of my survey. Here’s the next few findings.

About one quarter of the total number of questions was submitted by readers — and some of them are very interesting ones. Even better, I had to reject only a quarter or so of the submitted reader questions. So the collaborative aspect of Urtak is a resounding success.

This entry gives some information about your way of working, your relation to this site, and device ownership.

There’s one restriction on the cross-tabs: at least 100 people must have replied Yes to the first question in order to get a more-or-less representative response. If the total number is less I refuse to publish the cross-tab.

Incidentally, you can create cross-tabs yourself at the site. Play with the data if you feel like it.

Basic

Urtak allows you to create cross-tabs of two questions (and no more than two). My primary interest is to see whether my European and US respondents differed. In the mobile questions I also split up iPhone and Android users.

58% of you live in Europe and 30% in the US — the rest lives somewhere else. 42% of you has an iPhone as primary phone, against 35% Android.

The US has clearly more iPhone users, and Europe more Android users. Still, because more Europeans were surveyed, most iPhone users live in Europe.

About you
Question	All	Europe	US	iPhone	Android
Do you live in Europe?	58%	-	-	56%	61%
Do you live in the US?	30%	-	-	35%	29%
Is your primary phone an iPhone?	42%	41%	49%	-	-
Is your primary phone an Android?	35%	37%	33%	-	-

(How to read: 56% of those using an iPhone as primary phone live in Europe. 41% of those who live in Europe use an iPhone as primary phone.)

Your way of working

A few questions about your way of working. Americans are more likely to use a Mac and at least two screens, while Europeans care more for Opera and for low-bandwidth sites. HTML5 and CSS3 are now used across the board (81%), and new features are routinely used without a fallback (69%).

72% uses jQuery in most of their projects, while 30% uses another library and 42% prefers native JS. These numbers do not add up. Do a few people use both jQuery and another library in every single project? I hope not. The native JS question asked for preferences, and not actual behaviour, so that might explain the overlap with the other categories.

About your way of working
Question	Yes	Europe	US
Is your primary workstation a Mac?	43%	41%	51%
Does your primary development setup have at least 2 screens?	65%	60%	76%
Do you primarily develop desktop websites?	83%	83%	85%
Do you specialize in mobile web development or design?	24%	24%	25%
Do you use HTML5 and CSS3 routinely when developing new web sites?	81%	81%	82%
Are you using new features that older browser versions do not support without a fallback (in either CSS or JS)?	69%	70%	67%
Do all your sites work with CSS and JavaScript disabled?	41%	44%	40%
Do you test your sites in Opera desktop?	51%	60%	40%
Do you use jQuery in most of your projects?	72%	71%	75%
Do you use one single library that's not jQuery in most of your projects?	30%	30%	28%
Do you prefer using native JS as opposed to a library?	42%	40%	37%
Do you optimize your websites for low-bandwidth (mobile) users?	52%	55%	45%
Do you use Unit testing while developing a project?	42%	42%	43%
Do you try (i.e. almost always) to keep a change log of your work?	70%	-	-
Do you test landscape and portrait mode specifically?	72%	-	-

The last two questions were submitted late in the poll, and haven’t garnered enough replies for cross-tabs.

QuirksMode.org

Then the part that interests me most: how do you interact with QuirksMode.org? What surprised me most is that only 43% follows me on Twitter. Since I used Twitter as the main marketing tool for this survey I expected that number to be far higher. Europeans and iPhone users are more likely to follow me.

Android users are more likely to visit this site at least once per week, while US residents and iPhone users are marginally more likely to donate.

About your relation to QuirksMode.org
Question	Yes	Europe	US	iPhone	Android
Do you follow ppk on Twitter?	43%	48%	33%	50%	41%
Do you go to QuirksMode at least once a week?	36%	35%	38%	33%	38%
Have you ever donated money to QuirksMode?	5%	6%	7%	7%	5%
Do you like the blogposts about the mobile market?	80%	80%	84%	83%	83%
Do you like the Linkbait posts?	60%	63%	56%	58%	62%
Do you like the posts about mobile web development?	95%	95%	92%	97%	95%

Device ownership

Finally, what devices do people own? Remember, iPhone and Android are those whose primary phone is iPhone or Android, not those who own such a device. Regardless, some people are confused. 2% of those whose primary phone is an Android don’t actually own an Android phone. For iPhone this is 1%. ??!?! (Unless a few people use the device, but do not own it; for instance because their employer bought it for them. Possible, I suppose.)

The geographical differences are clear: Europeans are far more likely to own a Symbian, MeeGo, or S40 phone (figures, seeing Nokia has hardly any market share in the US). Oddly, the same goes for Windows Phone, and I hadn’t expected that.

Americans are more likely to own a gaming console, a Kindle, a webOS device, or a Chromebook. The first and last mildly surprise me, the other two don’t.

iPhone users are more likely to own lots of phones, and generally score higher on all phone types but Symbian, webOS, and bada. Android users are more likely to own a Chromebook.

About the devices you own
Question	All	Europe	US	iPhone	Android
Do you own an iPhone?	45%	42%	53%	99%	11%
Do you own an Android phone?	44%	45%	45%	21%	98%
Do you own a gaming console with a browser?	40%	34%	54%	46%	42%
Do you own a Symbian phone?	19%	23%	5%	14%	19%
Do you own a Kindle?	18%	14%	28%	24%	22%
Do you own a Windows Phone?	8%	9%	6%	6%	4%
Do you own an S40 phone?	8%	10%	2%	6%	6%
Do you own more than five phones? (Not tablets)	8%	7%	9%	10%	6%
Do you own a webOS phone?	7%	6%	11%	7%	8%
Do you own a BlackBerry phone?	6%	6%	8%	8%	4%
Do you own a Chromebook?	3%	1%	7%	1%	4%
Do you own a Samsung bada phone?	3%	2%	1%	2%	3%
Do you own a MeeGo phone?	2%	3%	0	2%	0

I have now published all the questions. Maybe I'll create some new interesting cross-tabs later.

Vitamin: Git For Designers (Part 1)

Jason Seifer — Wed, 01 Feb 2012 20:33:36 +0000

Hi designers! I’m not a designer. Sorry. I’m a developer. I can barely tell when things look good or not. This week I learned that there are different ampersands out there (thanks, Allison!). But that’s not why I’m writing today. We all have to work together. Professionally, one way we do that is by using version control. A version control system tracks changes to your code. There are a lot of different version control systems out there. Today we’ll be talking about git. Specifically, as it relates to designers making web sites.

Why Use Version Control?

You might be wondering why you should use version control, even for a site you’ll never collaborate with anyone on. This is a valid question. I can best illustrate the answer with a scenario you may have encountered in the past. Let’s say you’re in the middle of making a site and want to try something crazy with the css. Maybe you want to do a bit of an experiment and make everything strange shades of yellow and red. You don’t know if you’re going to keep the work when you finish it. Since it’s an experiment, it would probably be a good idea to not mess up your working version of the site.

At this point, you might be thinking of creating a copy of the site and making your changes on the copy. Maybe you’re sure that you’re going to use this work and you’re going to crank through. Maybe it doesn’t work out, though. Wouldn’t it be nice if you could take a snapshot of your site now, do your experiment, and not have to worry about whether you mess things up? That’s exactly what version control is for!

Step 1: Install and Configure Git

In order to start working with git, though, we need to install it. Git is fairly easy to install. If you’re using Windows, GitHub has an excellent set up guide to get git installed on Windows. They also have great guides for Mac OS X and linux. If you don’t already have git installed, follow those guides and come on back here.

Once you have git installed, you have to tell it who you are. This is done using the config command. Open Terminal and type in the following:

$ git config --global user.name "Jason Seifer"
$ git config --global user.email "jason@teamtreehouse.com"

Step 2: Initialize a repository

We’re going to initialize a git repository now. A repository is just a directory with one or more files we want to track the changes of, in this case our web site. Open up terminal (or command prompt on Windows) and change to the directory containing the site you want to put in to git. You do that with the cd command. I’m going to put my web site in the Sites/think_vitamin directory.

[~] $ cd Sites/think_vitamin
[~/Sites/think_vitamin] $

Once you’re in there, type the following:

[~/Sites/think_vitamin] $ git init

Assuming you have correctly installed git, you should see the following:

  Initialized empty Git repository in /Users/jason/Sites/think_vitamin/.git/

This is git telling you that thinks are working and that the path it gave you is now a repository. If you don’t see that output, go back to step 1 and verify that everything was correctly installed.

Step 3: Add Your Files

Now that we have initialized our git repository, we have to tell git what files we want to add to the repository. In order to do this, we use the add command. The add command takes either a single file or a path. The add command takes the changes you’ve made and adds them to something in git called the staging area. The staging area is kind of like a waiting room for git. It lets you tell git what changes you’re going to add to the main index.

Since we are already in the directory with our web site, we’ll tell it to add the path of the current directory:

[~/Sites/think_vitamin] $ git add .

At this point, you won’t see any output. My example is just an index.html file. In order to see what git is about to stage, you can use the status command:

[~/Sites/think_vitamin master]$ git status
 
# On branch master
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached ..." to unstage)
#
#	new file:   index.html
#

The first line of the output says “On branch master“. In git, a branch is just a pointer to something called a commit (explained in the next section). Since this is our first commit, git lets us know that on the second line of output where it says Initial commit. Next, git says there are changes to be committed. My index.html file is there since it’s the only thing I have in the directory right now. This is good!

Step 4: Commit Your Changes

A commit in git is a pointer to a series of changes that you have told git you want to track with the add command. When you commit your changes, git writes them to the index. This is git’s way of saying “this is what the repository looked like at this point in time.” So let’s commit our changes:

[~/Sites/think_vitamin]$ git commit -m "Initial commit"
[master (root-commit) 542d5fa] Initial commit
 1 files changed, 1 insertions(+), 0 deletions(-)
 create mode 100644 index.html

Here we use the commit command to tell git to commit our changes to the repository. The -m argument told git that we want to give the commit a message. My message here was “Initial commit” because this was the first commit to the repository. As you make changes, you can be much more descriptive. This is helpful when working on larger teams. Time Pope has a great article on writing good commit messages if you’d like any pointers.

The important thing about commits is that, once you have committed changes, you can always go back to how your repository was at the point in time of that commit. How cool is that? That means that you’re now free to make horrible changes to your site. Wnat to see how Comic Sans looks for all the headers? Go for it! You can always go back.

Step 5: Make some changes

Now that things are committed, you can feel free to make some changes to your code. In my example web page, I made changes to the header of the page. Now we can run git status again to see what happened:

[~/Sites/think_vitamin]$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Now we’ll add the file we just changed:

[~/Sites/think_vitamin]$ git add index.html
1.9.3 [~/Sites/think_vitamin]$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#	modified:   index.html
#

Finally, we’ll commit the change:

[~/Sites/think_vitamin]$ git commit -m "Modify home page header"
[master bc8251b] Modify home page header
 1 files changed, 1 insertions(+), 1 deletions(-)

Great! We just made our first two commits. Our co-workers will love us for writing a descriptive message along with the second commit, too, although they might also still be mad for taking the last cup of coffee.

Step 6: Make a branch

Remember earlier when we were talking about making experimental changes that you may want to keep? That’ what branches are for! Branches let you easily separate your work. You can have two branches going at the same time with different work. Branches are great for experimentation with something that you’re not sure you’re going to keep.

Let’s say we wanted to change the font on all headers to Comic Sans. You’re not sure how this is going to look (bad) but your client really wants you to give it a try anyway. Let’s create a branch to do that just in case we want to switch back. In git terms, we call this process creating a branch. We do that by checking out the branch and passing a flag to git saying that we want to create it:

[~/Sites/think_vitamin]$ git checkout -b comic_sans
Switched to a new branch 'comic_sans'

Now that we’re on our comic_sans branch, we are free to make changes and commit them. This won’t affect anything on our master branch until later. Let’s make our changes:

[~/Sites/think_vitamin]$ git status
# On branch comic_sans
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Git also let’s us see what changed in between what we’re about to stage with the diff command:

[~/Sites/think_vitamin]$ git diff
diff --git a/index.html b/index.html
index 159202e..266d025 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-

Hello world

We can also add and commit the change with one command by using the -a flag when committing:

[~/Sites/think_vitamin]$ git commit -am "Make header font comic sans"
[comic_sans 94af8b2] Make header font comic sans
 1 files changed, 1 insertions(+), 1 deletions(-)

Now we’ve committed to the comic_sans branch. Sweet!

Step 7: Merge your changes

Our client is now happy with the header changes. Our experimental branch we created now needs the changes to make their way back in to our main branch. We do this through a process called merging. What we want to do is merge or changes from the comic_sans branch back in to the master branch. First, we have to go to the branch we want to merge to. We do that by checking out. This time, we won’t use the -b parameter since we’re not creating the branch:

[~/Sites/think_vitamin]$ git checkout master
Switched to branch 'master'

Now we use the merge command to get our changes from the comic_sans branch in to master:

[~/Sites/think_vitamin]$ git merge comic_sans
Updating bc8251b..94af8b2
Fast-forward
 index.html |    2 +-
 1 files changed, 1 insertions(+), 1 deletions(-)

Boom! Now we have all of our changes in to git. If we want to see what these changes were, we can use th log command to get a nice display of times, dates, and authors:

[~/Sites/think_vitamin]$ git log
commit 94af8b2e976ba11755f7483bc761ea2b9a747e0a
Author: Jason Seifer 
Date:   Wed Feb 1 15:07:45 2012 -0500
 
    Make header font comic sans
 
commit bc8251b338b8ac4451888e1da482708df6264529
Author: Jason Seifer 
Date:   Wed Feb 1 10:16:41 2012 -0500
 
    Modify home page header
 
commit 542d5fab4c86d29a125a78b8a89366f70bdfaa9d
Author: Jason Seifer 
Date:   Wed Feb 1 10:10:01 2012 -0500
 
    Initial commit

Well Done!

In this article we learned how to install git, create a repository, change branches, and commit changes to our code. In the next article in this series, we’ll learn about removing files, going back to different commits, and pushing up to GitHub and working with other people. Stay tuned!

Vitamin: Showcase of the Best Google Fonts

Nick Pettit — Wed, 01 Feb 2012 14:00:08 +0000

It’s no secret that I am in love with Google Fonts. In fact, I use Google Fonts frequently in Treehouse videos. :)

The ongoing drawback to Google Fonts has been the smaller selection compared to other font services, but that’s rapidly changing. Even better, an editorialized web page called “Beautiful Web Type” has popped up that showcases the best fonts that Google has to offer. Loving this!

Vitamin: Styling Images with CSS3

Mat Helme — Tue, 31 Jan 2012 23:36:54 +0000

Nick La over at Web Designer Wall put together a great article on how to style images with CSS3. The styles include: Basic Style(rounded corners), Embossed Style, Soft Embossed Style, Cutout Style and Glossy Overlay. I personally love the Embossed Style, it’s ideal for interface buttons. Originally Nick ran into some issues when styling for a responsive layout. He quickly fixed them with an alternate solution. Check out the article to see his solution. Great job Nick, we appreciate the tips and tricks!

View the Tutorial
Demo Page

Vitamin: Is there a Photoshop grid for responsive web design?

Kevin Dees — Mon, 30 Jan 2012 22:09:51 +0000

I love responsive web design. It just gets me like no one else can. Now responsive web design gets Photoshop too. A recent post by Elliot Jays Stocks sheds light on the topic and includes a great template for designing your next PSD. You can find the download link on his website or view the simply view the demo if you are impatient like me.

You can read all about Elliot’s ideas on his website. He explain everything is great detail. If you read his post you will find it hard to disagree. Fixed designs are becoming harder and harder to justify.

Vitamin: Kevin Rose and Jason Calacanis confirmed for Future Insights Live in Vegas

Ryan Carson — Mon, 30 Jan 2012 11:08:25 +0000

We’ve just confirmed that industry leaders Kevin Rose and Jason Calacanis will be speaking at Future Insights Live in Vegas on April 30 – May 4th!

Future Insights Live is our new show that combines Future of Web Apps, Future of Web Design and Future of Mobile into one huge 5-day, 5-track, 1,500 person conference. It’s going to be epic and you won’t want to miss it.

Early bird pricing (save $200) is almost over, so grab your ticket today.

Vitamin: Free Video: iOS Tab bar (UITabBarController)

Amit Bijlani — Thu, 26 Jan 2012 20:55:58 +0000

In this 7 minute video, you will learn the basics of the UITabBarController and how to create one using the Xcode project template.

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Vitamin: Twitter Bootstrap 2.0

Jason Seifer — Thu, 26 Jan 2012 14:00:54 +0000

Twitter Bootstrap 2.0 will be coming out January 31st. In the mean time, there is a pre-release you can check out and report on any bugs that you find. Twitter Bootstrap is a great HTML and CSS framework that has been gaining a lot of popularity recently. You can check out sites built with bootstrap on the unofficial Built With Bootstrap tumblr.

You can also follow @twbootstrap on Twitter.

Here’s some of what’s new in this release:

Responsive layout (!) with media queries.
New 12 column grid (the old one was 16 columns).
Stacked forms are the default.
Split button dropdowns.
New Pills.
Navigation lists.
New Dropdowns.
Tabbles in any direction.
New JavaScript plugins.

Vitamin: A New Year, A New Responsive Dribbble Portfolio "� Part 1 of 2

Mat Helme — Thu, 26 Jan 2012 14:00:18 +0000

What better way to start off the new year than a fresh new Dribbble portfolio? If you are a designer with minimal coding experience and want to display your Dribbble work in all browser sizes, you have come to the right place. We will be creating a HTML5 one page portfolio which pulls your Dribbble information and is responsive in all browsers. This little project will be presented in two parts.

Part 1 (this post):

HTML/CSS/jQuery set up.

Part 2 (coming soon):

Convert HTML to PHP and use the Dribbble API to pull your data. Plus IE fixes.

The File Structure

Let's dig right in and start off with our file structure. On your desktop create a folder labeled: "�Dribble-Portfolio'. In that folder create the following files:

folder labeled "�css'

style.css

folder labeled "�images'

index.html
folder labeled "�scripts'

It should look a little something like this:

*to download the .js and image files simply select the links above and save them to the appropriate file structure.

The HTML

Now that we have all of our assets and files lets begin with the HTML. Below is the proper code for your "�index.html' file.

<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>
 
  <!--Google fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
  <!--Main Stylesheet-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>
 
<body>
 
	<header>
 
  	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
    <nav>
 
    	<ul class="menu">
 
        <li><a href="#" class="email"></a></li>
        <li><a href="#" class="dribbble"></a></li>
        <li><a href="#" class="twitter"></a></li>
        <li><a href="#" class="facebook"></a></li>
        <li><a href="#" class="linkd"></a></li>
 
      </ul>
 
    </nav>
 
  </header>
  <!--end header-->
 
  <section class="half">
 
      <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
  </section>
  <!--end main image-->
 
  <section class="half">
 
  	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
  </section>
  <!--end tagline-->
 
  <div class="clear"></div>
 
  <section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
			</div>
 
	</section>
  <!--end dribble content-->
 
  <div class="clear"></div>
 
  <footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
  <!--end footer-->
 
 
 
</body>
 
</html>

As you can see the code is fairly simple. We have a basic HTML5 markup with some "�viewport' settings at the top. The "�viewport' settings tell devices such as iPhones to display at the devices width and scale.

 
<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>

Also the ‘head’ is reaching out and grabbing some Google font stylesheets as well as our "�style.css' file in our "�css' folder. We will get to this file in our next step.

 
  <!--Google fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
  <!--Main Stylesheet-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>

As we get into the body of the file we have four main sections(header, section(half), section(dribbble) and footer).

The header contains two elements. Element one is the logo, feel free to change it. It's located in the images folder, labeled "�logo.png'(200x80px). Element two is our social network icons which we won't see until we add the css styles. For now we are going to link to hash tags. In part two of this tutorial we will be pulling in the correct data via Dribbble.

<header>
 
  	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
    <nav>
 
    	<ul class="menu">
 
        <li><a href="#" class="email"></a></li>
        <li><a href="#" class="dribbble"></a></li>
        <li><a href="#" class="twitter"></a></li>
        <li><a href="#" class="facebook"></a></li>
        <li><a href="#" class="linkd"></a></li>
 
      </ul>
 
    </nav>
 
  </header>
  <!--end header-->

The next section, section(half) contains our "�me.jpg' image and our tagline which are located directly below the header. Feel free to swap out the image(me.jpg) and tagline copy to better personalize your portfolio. The image currently being pulled in is 800x600px as it is scalable to the screen size.

 
<section class="half">
 
      <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
  </section>
  <!--end main image-->
 
  <section class="half">
 
  	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
  </section>
  <!--end tagline-->
 
  <div class="clear"></div>

Our next section is section(dribble) which is going to pull our most recent Dribbble "�shot' titles and "�shot' images. For now we are going to use dummy content. In part two we will be running a loop to pull the latest projects with the all mighty power of php. You will also be able to choose how many projects you would like to display. For now we are going show twelve "�shot' examples.

<section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
			</div>
 
	</section>
  <!--end dribble content-->

The last section is the footer area. This is for any links or Copy Right text you wish to display or link out to.

<footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
  <!--end footer-->

The CSS

Now that we have inserted all of our HTML data, let's add our styles to the page. Simply copy the CSS code below and input it into the style.css file. Here is the CSS code:

/* DRIBBBLE PORTFOLIO SITE - 2012 */
 
/*RESET*/
html,body,div,span,applet,object,iframe,#logo,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{outline:none;border:0;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
 
/*MAIN*/
body { background:#dce877; margin:0 auto; padding:0 5%; font-family:Open Sans, Arial, Helvetica, sans-serif; width:90%; font-size:13px; line-height:21px; color:#616634; }
header, footer { float:left; width:100%; }
section { float:left; }
ul { list-style:none; margin:0; padding:0; float:left; }
a { color:#616634; text-decoration:none; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; cursor:pointer; }
a:hover { color:#111; opacity:1; }
h1, h2, h3 { font-weight:normal; float:left; }
h1 { margin:20px 0; }
h2 { font-size:30px; line-height:40px; }
h3 { font-size:14px; line-height:40px; }
p { font-size:12px; }
.full { width:96%; margin:0; padding:2%; float:left; position:relative; }
.half { width:46%; margin:0; padding:2%; float:left; position:relative; }
.clear { clear:both; }
 
/*HEADER*/
header { position:relative; width:100%; border-bottom:5px solid #bcc664; margin:0 0 20px; }
#logo { float:left; margin:20px 0 0; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; }
 
	/*CONNECT*/
	nav { float:right; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; }
	.menu { list-style:none; margin:15px 0; }
	.menu li { display:inline; }
	.menu li a { width:32px; height:31px; background:url(../images/connect.png) no-repeat; opacity:.5; float:left; display:block; margin:30px 5px; }
	.menu li a:hover { opacity:1; }
	.dribbble { background-position:0 0; }
	.linkd { background-position:-38px 0 !important; }
	.twitter { background-position:-78px 0 !important; }
	.facebook { background-position:-118px 0 !important; }
	.email { background-position:-158px 0 !important; }
 
/*SECTION(HALF)*/
.main-image { width:100%; }
.tagline { line-height:140%; color:#616634; font-family:Raleway; font-weight:normal; }
 
/*SECTION(DRIBBBLE)*/
#container { -moz-column-count:4; column-count:4; -webkit-column-count:4; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; float:left; width:100%; }
.box { background:#BCC664; padding:5%; opacity:.75; display:inline-block; margin-bottom:10px; border-bottom:2px solid #616634; border-radius:2px 2px 10px 10px; width:90%; }
.pic { width:100%; float:left; clear:both; }
 
/*FOOTER*/
footer { border-top:5px solid #bcc664; margin-top:20px; padding:20px 0; font-size:12px;}
 
 
/*MEDIA QUERIES*/
@media screen and (max-width:960px ) {
 
	#container { -moz-column-count:3; column-count:3; -webkit-column-count:3; }
 
}
 
@media screen and (max-width: 768px) {
 
	.half { width:95%; }
	.menu li a { margin-right:1px; }
	#container { -moz-column-count:2; -webkit-column-count:2; column-count:2; }	
}
 
@media screen and (max-width: 479px) {
 
	#logo { margin:0 0 0 48px; }
	nav { float:left; margin:0 0 0 50px; }
	.menu { margin:0; }
	#container { -moz-column-count:1; -webkit-column-count:1; column-count:1; }
 
}

After we save our "�style.css' file and refresh our browser, we have a very clean portfolio layout that responds well to the browser size.

When you view the stylesheet css code you will see "�%' used a lot on the width attributes. The page is styled with a responsive fluid layout in mind. If you have any questions about responsive web sites, please check out "�Responsive Web Design Foundations' over at Treehouse.

As of now we have a fully functional static HTML5 page which has been tested in the latest versions of Firefox, Chrome and Safari. Because we are using HTML5 and CSS3 capabilities we will not be testing in IE at the moment. Once we finish up part 2 of the tutorial we will set up separate IE files to compensate for it's lack of functionality with HTML5 and CSS3.

The JavaScript

Lastly we are going to add a little javascript to our page allowing our "�tagline' text to scale with browser size. Insert this snippet of code directly below the footer.

<!--js files-->
	<script src="scripts/jquery.js"></script>
	<script src="scripts/fitText.js"></script>
 
	<!--initiate fit text-->
	<script>
 
  	 $(document).ready(function() {
 
  		 /*FitText*/
  		 $(".tagline").fitText(1.1, { minFontSize: '20px', maxFontSize: '200px' });
 
  	 });
 
	</script>

This snippet simply links up to our "�jquery' and "�fitText' files we set in our scripts folder earlier. Then it initiates the "�fitText' function and gives it some variables. Feel free to change the max-font-size and min-font-size as your "�tagline' will be different.

Wrapping Up

Now lets review what we have just done.

We have set up our HTML
Added our CSS styles
Inserted a little javascript

Congratulations you have successfully set up a static responsive one page portfolio.

Source Files
Demo Site

Still to Come(Part 2)

In the final portion of this tutorial we will be using Dribbble API to load in our user data and "�shots', as well as IE 7 and up fixes. In the meantime if you would like to know more about HTML5 and CSS3 please check out Treehouse, or contact me at mat@teamtreehouse.com. As always, Get Gnarly and Design your Life!

Role Those Credits:

Vitamin: Scrolling Made Fun

Mat Helme — Wed, 25 Jan 2012 20:00:31 +0000

Just when you thought scrolling your web page was getting boring. Scrollorama has stepped the scroll game up with this remarkable jQuery Plugin. Scrollorama allows you to manipulate text when you scroll the page. You can do everything from Transitions to Zoom to Parallax. Check out the Scrollorama site to view some great examples and the plugin’s documentation.

This Plugin is great for landing pages and highly interactive web applications. Like CSS3 transitions, use your animations sparingly.

QuirksMode: AEA, Breaking Development, and my US tour

Wed, 25 Jan 2012 16:23:30 +0000

From 31st of March until 17th of April I’ll be once again touring the US. I’ll start and end with conferences, but I’m not quite sure yet what I’m going to do in between and I’m looking for suggestions.

I’ll arrive in Seattle for An Event Apart, on 2 and 3 April, where I’ll pontificate on the touch events and how they’re not the same as mouse events. It’s been a while since I’ve been exposed to so much Apartness, and it’ll be a nice start of my tour.

My tour will end in Orlando on 16 and 17 April, where I’ll speak at the third Breaking Development conference, Mobilism’s American sister conference. The good Breaking Developers have given me the code ORPPK12 for a $100 discount on tickets, and if you register before end of next week you’ll save another $200. Not a bad discount for a top-notch conference.

That leaves me with almost two weeks in-between conferences. I’m fairly certain I’ll be in Toronto on the 10th, and I plan to visit San Francisco and the Valley at some time (duh), but other than that my itinerary is still unclear.

If you’d like me to swing past your city, let me know. Unfortunately I’m not super-wealthy, so I do expect you to pick up my hotel bill, as well as help me out a bit with domestic flights.

Last year I ended up going to San José, Austin, New York, and Albany. I have no idea what this year will bring, but that’s what makes this kind of touring so exciting.

Anyway, I’ll post an update when I have more news.

Vitamin: Our new Treehouse Student Plan is live!

Ryan Carson — Wed, 25 Jan 2012 09:58:34 +0000

We’ve just released our new Treehouse Student plan and it’s only $9 per month! It’s the equivalent to our Gold plan, which is $49 per month, so you’re saving a massive 82%. Anyone who attends a school, college or university is eligible. After you sign up, we’ll ask you to provide proof of your student program.

Benefits include:

Unlimited access to our Video Course Library. 450+ videos, more added each week on topics like CSS3, HTML5, JavaScript, iOS, Photoshop and more. All videos downloadable for offline viewing. Unlock Badges to prove your knowledge.
Complete Project Videos show you how to create real-world sites and apps, from start to finish. All example files are downloadable.
114 Conference Videos from Future of Web Design and Future of Web Apps ($545 value)
Closed Captioning on all videos for non-English speakers and the deaf.

If you’d like to get Treehouse in to your entire school, college or university, please contact Chris and he’ll be happy to help!

There’s a money-back guarantee, and you aren’t tied in to a contract. Sign up today.

QuirksMode: Retesting the input types

Tue, 24 Jan 2012 14:45:59 +0000

I have retested the support for the new input types (<input type="number"> and such) in the desktop and mobile browsers.

All in all support has increased slightly since the last time I tested them, although Safari desktop, Chrome, and BlackBerry have seen some decline. Safari and Chrome have mainly done away with badly or buggily implemented types — it’s clear they’re rewriting significant parts of this module.

As to BlackBerry, its decline was a nasty shock to me. Previously it vied with Opera for Best Implementation, but the PlayBook 2 default browser has dropped support for quite a few types and attributes, such as required and pattern.

Quiz

To understand how complicated these new features can be, consider the following quiz question:

I add an <input type="number" step="3"> to the page, and the user enters 11. What should the browser do?

You can try it for yourself at the test page. Don’t forget to submit the form. My Twitter followers gave they following replies:

`step` poll outcome
Answer	Number	Browser support
The browser rejects the 11	17*	IE, Chrome, Opera
The browser automagically rounds it to the closest proper value, 12	13	none
The browser shows an error message	9	Opera
The browser submits 11 to the server	8	Safari
The number 11 should be impossible to enter	3	none
The browser accepts the value if the `min` attribute is absent	2	Safari, sort of
Mathematics should be changed so that 11/3 is an integer	1	none

* This total includes the votes for an error message.

So the desired outcome is unclear. The browsers’ behaviours have been documented on the desktop page.

Purpose

A quick repeat of the underlying purpose of the input types seems in order. In the end, the idea is to not send incorrect values to the server. Thus we can see three purposes:

The browser could perform a validation and show an error message and refuse to submit the form when an incorrect value is found.
The browser could also restrict the accepted input — for instance by not allowing letters in an <input type="number">.
Finally, the browser could also give the user a nice interface — for instance the various date pickers in Opera, BlackBerry, and Safari iOS.

The last purpose is a nice extra. If the browser offers an interface but doesn’t support either validation or input restriction, I judge its support Minimal. It misses the actual point, after all.

Findings

With that said, my findings were the following:

readonly is still the only universally supported attribute or type.
IE10’s support is decent, though not great.
Opera and BlackBerry added support for color.
Firefox on desktop has added datalists, but its interface is an autosuggest, and not a complete list of options, as IE and Opera show.
Firefox Mobile, however, has a very nice interface (see screenshot) that I hope other mobile browsers will pick up.
Firefox Mobile does not show any error messages, though, while Firefox desktop does.
Chrome dropped support for the date types. That’s curious, because Chrome 10 supported them reasonably well. I can only assume a major re-factoring is going on.
Safari desktop dropped support for dates, datalist, email, and url. Since they were hideously buggy previously, this makes sense. I assume they’ll reappear.
Safari on iOS added support for dates, numbers, and ranges. The interface for the range slider is a bit confusing, though.
Android 3.2, MeeGo and UC support autofocus, but they cleverly don’t pop up the software keyboard, which would be very annoying. As far as I’m concerned this should become a mobile standard.
Still, poor Android can’t do anything right. Android 3.2 tried to add support for number and range, but the range slider is invisible, while the number type restricts user input only to actual numbers. No negative numbers; no exponents.
And then BlackBerry, which in my previous round of testing was the best browser. The PlayBook 2 default browser dropped support for required, pattern, email, url, step, and month (though not the other date types). The old BlackBerry Torch (OS6) supported them all fine. I’m not sure what’s going on here, and I hope the PB 2 final version will restore these types.

Vitamin: The separation of structure, presentation and behavior is dead

Kevin Dees — Tue, 24 Jan 2012 14:00:23 +0000

The separation of structure, presentation and behavior is dead. It has been dead for a while. Still, this golden rule of web design sticks around. It lives on like Elvis and we need to address it.

I remember the weight of separation vividly. I remember writing custom JavaScript to replace the <a> tag’s target attribute because it added behavior to HTML. I remember dropping the tag from my arsenal of tools, something I don't regret.

In principle, the rule of separation was good. It helped us explain the best practice and implementation of HTML, CSS and JavaScript. It spun the web toward a brighter future. Separation vanquished the tags, spacer gifs and inline JavaScript that polluted the web for years. In the old web structure, presentation and behavior lived in one layer but the principle of separation divided them.

The Path

The principle of separation lead web standards into victory during the first browser wars. Separation did not do this by eliminating proprietary standards, but by defining the “path” for new standards like CSS and XHTML. Through this victory browser makers work together now, for the most part. Browsers prefix proprietary CSS and push together for new technologies such as HTML5.

However, separation was an old idea that lived hand in hand with XHTML 2. The idea was that structure, presentation and behavior should be at all times pure. Separation like XHTML 2 has seen its day. Just look at the current state of our specifications. The proof is in the pudding.

The Truth

CSS now has behavior with features like :hover and animations. CSS has structure as well with the pseudo elements ::before and ::after. HTML has the same issues. Its new <input> types have behavior and presentation littered throughout. What the web currently looks like vs what separation wants the web to be is not the same.

The specification says separation is dead and the browser makers agree. Last year at SXSW during the browser wars panel I asked the panelists for their thoughts. I asked them what was to keep the tag from coming back and why separation was not being addressed. Brendan Eich answered quickly and simply, "We don't care about separation."�

He is right to say this. Separation has played its roll. But if he is right and we live in a new age, why do we we still teach separation? Why do we still pretend to follow it? I have a few assumptions.

Why Separation is Still Around

First, it worked at a basic level. It let us know when we were getting into gray areas. Second, the principle was simple and easy to understand. Each technology has its place, HTML, CSS and JavaScript.

So then, what should we do? Ignore all reason and do whatever we like? No, of course not. We need to be honest with ourselves and understand the raising pattern: Divergence.

We have been using Divergence for years. With every site you include :hover in your CSS. With the “email” value you use as your <input> tag’s type. With the many jQuery plug-ins that add new structure and presentation to a site. You use Divergence.

Divergence

What is Divergence? Divergence is the process you take when any of the three layers of separation cross. Let’s think about what we know the web is like today.

As an example let’s examine a scenario where presentation and behavior cross, such as when you need a design change as the cursor moves over a link. You need to pick CSS or JavaScript.

JavaScript has the mouseover event handler and CSS has :hover. However, you want to add a presentational effect, a nice underline maybe.

During the crossover of the two layers we are forced to choose CSS or JavaScript. You could choose CSS because you want to change the link’s style, but you could also choose JavaScript because the change is triggered by a behavior.

Unlike separation where you are trapped, Divergence says this is fine. In Divergence the lines can cross.

Think of Separation and Divergence as totally different logical approaches.

With Separation you live in a true and false world. Everything is black and white. It is on or off. It is Boolean by nature. With Divergence there’s black and white, but there’s also gray.

Truth is Conditional

The first rule of Divergence is that truth is conditional. Presentation can be behavioral and vice versa. We can use CSS a presentational technology with behavior as in the case of :hover.

However, Divergence does one thing that keeps it from creating a world where anything goes. To understand that concept we need to look at the tag and understand how divergence keeps us from using just as the principle of separation does.

Under the “conditional truth” rule of Divergence the tag is fine. It is presentational and structural. However, with the second rule of Divergence there is an issue. This is the rule of “wholeness”.

Wholeness

The tag is in HTML so it is a structure. However, it is not semantic and so while it is a structure it is not structural. The rule of divergence says that an item who falls into conditional truth is fine. It can be both structural and presentational at the same time. The tag is.

However, the tag must now pass the second rule. This rule, wholeness, says that the item must by nature be compliant wholly… to at least one of its parts. This does not negate the first rule. It only approves the item has the properties of the layer in which it lives.

Wholeness works like this:

An item who is in structure must have the properties structure. In other words HTML must be semantic.
An item who is in presentation must have the properties presentation. In other words CSS must effect presentation.
An item who is in behavior must have the properties behavior. In other words JavaScript must effect behavior.

Divergence says that items can have multiple properties but can only operate from a layer if it belongs to it in wholeness. This means that the item itself must have the properties of the layer it lives in and can demonstrate the properties of another layer if it likes.

Where Fails

The tag meets the conditional truth of Divergence but is not fully structural. It demonstrates the properties of presentation in that you can set "font properties"� with it. But, it can not belong to structure because its structural property is not structural. This is because the tag name is purely presentational – "font"�. This means that it doesn't belong fully to at least one of its parts.

Therefore it can not diverge to one side or the other. HTML or CSS. So, we can not use the tag under Divergence.

The principle of Divergence is simple and complex. It apples to all layers of web design.

Some Examples

As a quick example we can say that the HTML5 email value of the <input> tag's type is fine under Divergence. It is semantic and behavioral but complies wholly to at lest one of its parts HTML.

Simply using the pseudo elements ::before and ::after to create content as structure and not presentation is not divergent because it is not fully presentational. Not to mention inaccessible.

It is unfortunate that the world of web design is not black and white and fortunate at the same time because it moves us forward.

To Round it Up

We are standing in a new age. We need to stop saying separation and doing divergence. In the end we can pretend that the principle of separation is still relevant but it doesn't support the current direction of the web. It doesn't help standards and browser makers don't care.

Most importantly we need practical principles to guide us. So we know when to say yes or no to new features in CSS and HTML so that we can keep one eye on the vendors and the other on the web’s future. We need to accept the fact that separation of structure, presentation and behavior is dead.

Vitamin: HTML5 Please "� Which Features Can You Use?

Jim Hoskins — Mon, 23 Jan 2012 22:06:56 +0000

HTML5 Please is a great resource for determining browser support for many HTML5 and CSS3 Features. Each feature offers a recommendation to either use, not use, use with caution, or use with a fallback. It offers great information like the browser share for each feature, as well as the fallbacks you can use to simulate the feature in incompatible browsers.

My favorite feature is the search, which allows you to filter features by compatibility, for instance what is safe to use in IE8+.

Vitamin: You've gotta come to this event

Ryan Carson — Mon, 23 Jan 2012 12:05:11 +0000

If you’re a Web Designer, Developer or Entrepreneur, you can’t miss Future Insights Live in Vegas on April 30 – May 4th. We’ve combined Future of Web Apps, Design and Mobile into one massive five day event, with over 100 sessions. It’s going to be like SXSW, but with valuable content ;) We’re expecting 1500+ attendees, so it’s going to be insane. The tracks include …

Development
Design
Frontend Development
Mobile Development
Business
Cloud

Early bird pricing ends soon (save $200) so move quick and book your ticket today.

Eric Meyer: Vigilance and Victory

Eric Meyer — Fri, 20 Jan 2012 14:56:13 +0000

After the blackout on Wednesday, it seems that the political tides are shifting against SOPA and the PROTECT IP Act"�as of this writing, there are now more members of Congress in opposition to the bills than in favor. That's good news.

I wil reiterate something I said on Twitter, though: the members of tech community, particularly those who are intimately familiar with the basic protocols of the Internet, need to keep working on ways to counteract SOPA/PIPA. What form that would take, I'm not sure. Maybe a truly distributed DNS system, one that can't be selectively filtered by any one government or other entity. I'm not an expert in the area, so I don't actually know if that's feasible. There's probably a much more clever solution, or better still suite of solutions.

The point is, SOPA and PIPA may soon go down to defeat, but they will return in another form. There is too much money in the hands of those who first drafted these bills, and they're willing to give a fair chunk of that money to those who introduced the bills in Congress. Never mistake winning a battle with winning the war. As someone else observed on Twitter (and I wish I could find their tweet now), the Internet community fought hard against the DMCA, and it's been US law for more than a decade.

By all means, take a moment to applaud the widespread and effective community effort to oppose and (hopefully) defeat bad legislation. When that's done, take notes on what worked and what didn't, and then prepare to fight again and harder. Fill the gap between battles with outreach to your elected representatives and with efforts to educate the non-technical in your life to explain why SOPA/PIPA were and are a bad idea.

Days of action feel great. Months of effort are wearying. But it's only the latter that can slowly and painfully bring about long-term change.

Vitamin: How We Built Code Racer in 4 Days

Jim Hoskins — Thu, 19 Jan 2012 20:35:16 +0000

If you haven’t seen Code Racer, you should give it a try. Code Racer is the product of Idea Week at Treehouse. Idea Week is a tradition brought over from Carsonified to Treehouse where the entire team drops what they are doing to work on a completely new project for one week.

This is my recounting of the Idea Week when we created Code Racer. This won’t be a full story as a lot of people worked on this project and I wasn’t in a position to keep track of what everyone was doing. Fortunately our video professionals at Treehouse had cameras rolling, so much of this is documented on video. I can only tell you about what I was involved in, which was the server and client side development.

I had been involved with one Idea Week before, when we created Brickify. This actually wasn’t an official Idea Week, it was a project we decided to build late on a Tuesday, but then became an Idea (half) Week.

We decided to do an Idea Week when Ryan told us he would be gathering the whole team together in Orlando this January. Since we had recently hired several new teachers and video pros, and Idea Week was a great way to get everybody working together as a team.

Treehouse CodeRacer Launch Video from Treehouse on Vimeo.

The idea for what we were going to build wasn’t decided until the Monday morning of our Idea Week. In the time leading up to the project, we figured our product would likely be a Ruby on Rails application with a great UI, design, API, and hopefully an iOS app. This seemed ideal because Alan and Jason work with Rails every day, and I have several years of experience with Rails as well. I was thinking Alan and Jason would lead the server side development, and I would focus on front-end interaction. It didn’t quite end up working out like that.

When Ryan presented his idea of creating a real-time code-challenge game, it became clear that our assumptions of responsibility were pretty far off. Since we needed to use Web Sockets (or their available fallbacks), Node.js became the clear decision for the Code Racer server. This changed the dynamic of the team a bit since I’m the resident Node.js guy, as well as the front-end JavaScript guy. Fortunately Alan, Jason, and Amit have experience with Node.js and JavaScript, so they were able to kick ass on Code Racer.

Besides not knowing the project idea until Idea Week begins, there is another challenge: a hard deadline. One week seems reasonable for a project that has 5 developers and 4 designers. That’s 5 days, right? Well, Treehouse works the four day work week, so it’s really 4. Also, Alan, Ryan, and Tyson had to fly out mid-day Thursday, so we had to launch Thursday morning. So Idea Week is really a little over 3 days. Better get started!

Tech Decisions

The first thing we did was discuss tech. Because the game required near real-time interaction between the players we chose Socket.io, which is a great server and client library for working with web sockets. This is what allows us to communicate quickly between the players and the server.

Socket.io is built on Node.js, which made Node.js the natural choice for our server. The event based architecture allows us to hold many socket connections open concurrently on one server.

As a group we also decided to use CoffeeScript for our server and client code. I found it to be very useful when I worked on Code Challenges for Treehouse, and Alan and Jason were interested in trying it out on a non-trivial project. It ended up working really well.

For the front-end, we chose to use Spine for our application library with jQuery powering our DOM interactions. There is a lot of information shooting around that needs to be reflected in the UI. Events from the user like typing inside the code editor, and events from the server like information about the game state all need to be handled so the models and views can be updated. Spine’s models, views, and controllers handled the interaction extremely well. Information from the server is received via socket.io, which will update our models. The various controllers on our page listen for changes to the model and update the views as needed.

We also utilized Facebook for authentication and MySQL for storing our users and game logs. I can’t talk much about those decisions because Jason lead that effort.

Day One – Planning and Server

On Monday morning, after our first meeting, the whole team swung into action. The designers and developers split up to talk about their plans and responsibilities. This is where we the developers began making the tech decisions that I described above.

While we were doing that, the design team was coming up with UI sketches as quickly as possible, so our whole team was on the same page. These sketches were extremely valuable to the dev team, because we needed to start building the UI almost immediately.

After that, the dev team split up and began working. Fortunately I had some side projects that utilized Node, CoffeeScript, and Less, so we were able to strip out the guts of that project and use it as a starting point. In less than an hour we had a running server and a github repo that everyone could start working on.

Code Racer: Day One from Treehouse on Vimeo.

I spent most of Day 1 setting up the project and then building a game matchmaking system where when you start a game, you join a lobby until that game reaches capacity. When the game reaches capacity it begins, and a new game is created for the next set of players.

Day Two – Interface

The second day for me was all about the front-end. By Tuesday we were able to connect to a lobby and start multiple games on the same server. Next on the list was creating the interface. There are a lot of moving parts in the game that must react to information sent from the server and the player.

When a new player joins, we have to add them to the page, which includes an editor, a tab in the players bar, and an entry in the lobby screen. When a player updates their code, it must be sent to the server, which will notify all the players in the game. Each player must take these notifications and update the code for the other player’s editor. Being able to watch someone else code was one of our top priority features.

Getting all of the information moving around the different client models and controllers, through the sockets to the server and back down to the clients was the most difficult problem to tackle. By Tuesday night we were able to see other players’ code as they typed it. Many of the other game elements like the timer, player list, and scores were also being displayed.

Code Racer: Day Two from Treehouse on Vimeo.

It was about this time I had to step away from the code for a while. Trying to hold all of the server and client interactions in my head was causing me to mentally fatigue, and I could tell I was becoming less effective. Fortunately Alan jumped in and spent Tuesday night working on getting the game logic up and running. I was amazed at how quickly it turned from a small prototype of live-coding into something that really looked like a game.

While I stepped back from the game logic and architecture, I was finally able to go around the office and see what everyone else was up to. It was awesome to see what was getting done. Amit had a working system for creating challenges and verifying answers from the players. Kevin had built a bunch of awesome weapons you can use on other players that will play sounds and manipulate your screen in some way. Jason had Facebook integration up and running. The design team was doing awesome creating amazing designs and interfaces.

Day Three – Integration and Testing

By Wednesday morning we had something that resembled a game. The html layouts the design team had built had not yet been integrated into the game and there was a lot of work to do on the game logic itself. Wednesday was all about getting the game done. We had to be ready to launch by Thursday. We spent the whole day working on the game logic, testing, tweaking, and testing again.

We played our first game on Wednesday after lunch and the competitive taunts and gasps of excitement and defeat from the players were quite loud. For the first time we were able to see that Code Racer is actually fun to play. A huge wave or relief rolled over the whole office. It actually looks like this idea may work.

Day Four – Launch!

Finally it was launch day. We spent the morning squashing bugs, polishing the UI and game play, and deploying the application. It was pretty stressful. We had a lot of things we needed to get done and almost no time to do it.

We sent out links to our friends to test Code Racer before the official launch. Of course this brought us a lot of feedback on improvements we could make and bugs we need to eliminate, which is how we spent Thursday.

As Ryan and Alan were getting ready to leave for their flights, we were able to launch Code Racer officially. We did it!. Articles from TechCrunch and Venture Beat went live, and tweets started flowing in. It was unreal. On Monday morning I wasn’t sure this idea was possible, but now here it was, online, with thousands of people playing it. In the first 3 days after launch over 6,800 players had played a total of over 4,500 games.

In less than 4 days, the team at Treehouse went from idea to product. I’m incredibly proud of all of the people who worked on Code Racer and count myself very lucky to have the opportunity to work with them.

The Libraries and Tools We Used

Finally, I wanted to share the (hopefully) complete list of tools we used to make Code Racer. Thanks to Jason for putting this list together!

Vitamin: CodeKit the missing tool

Amit Bijlani — Thu, 19 Jan 2012 20:01:23 +0000

The web is rapidly evolving and it seems like the editors just can’t keep up. If you are web developer using Sass, Stylus, CoffeeScript or Haml then CodeKit is for you. The only drawback is that CodeKit is only available for MAC OSX Lion.

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that’s just the first paragraph.

Vitamin: Free Video: Installing Ruby

Jason Seifer — Thu, 19 Jan 2012 14:00:40 +0000

In this 8 minute video, you will learn how to install Ruby on both Mac OS X and on Windows. This will let you get IRB up and running and is the basis for running Ruby programs on your own computer.

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Vitamin: Customizing the design of UIPopoverController

Amit Bijlani — Wed, 18 Jan 2012 19:27:57 +0000

Popovers are very common within the iPad user interface but you were restricted to the design provided by Apple. With iOS 5 came a little known class called UIPopoverBackgroundView which allows you to provide a custom border and arrow for the popover.

The popover

The UIPopoverController is the class that facilitates the popover view. It takes a custom view controller and then displays it with a neat border and arrow, where the arrow points to its origin. It is ideal for displaying contextual information. The popover user interface is essentially made of three main parts: the border, content, and arrow.

Images

Before we look at the UIPopoverBackgroundView you will need two images to customize your popover. One image for the border and the other for the arrow.

Dissecting the background image

When designing the background image it is important to note that the image will be stretched. UIImage allows you to create a stretchable image by defining cap insets. These caps define portions of the image that will not be rescaled whereas the rest of the image is easily tiled when stretched. As seen in the image below the dark area is what will be tiled and the colored corners will not.

Subclassing UIPopoverBackgroundView

The UIPopoverBackgroundView is an abstract class which has no implementation. We need to subclass it and provide implementations for all its methods and properties. You can read the Apple documentation on all its properties and methods. What is not in the documentation is how to layout the border and arrow using the method layoutSubviews.

First let’s start by creating an Interface and subclassing the UIPopoverBackgroundView.

#import <UIKit/UIPopoverBackgroundView.h>
 
@interface CustomPopoverBackgroundView : UIPopoverBackgroundView {
    UIImageView *_borderImageView;
    UIImageView *_arrowView;
    CGFloat _arrowOffset;
    UIPopoverArrowDirection _arrowDirection;
}
 
@end

Make sure to specify your import statement or else the code will not compile. An explanation for each of the instance variables:

_borderImageView: contains the image for the border
_arrowView: contains the image for the arrow
_arrowOffset: used for the property arrowOffset specified in the Interface for UIPopoverBackgroundView. We will see later how this value is used to calculate the position for the arrow.
_arrowDirection: used for the property arrowDirection specified in the Interface for UIPopoverBackgroundView

Let’s fill out the implementation, starting with the designated initializer

#import "CustomPopoverBackgroundView.h"
 
#define CONTENT_INSET 10.0
#define CAP_INSET 25.0
#define ARROW_BASE 25.0
#define ARROW_HEIGHT 25.0
 
@implementation CustomPopoverBackgroundView
 
 
-(id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        _borderImageView = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"popover-bg.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(CAP_INSET,CAP_INSET,CAP_INSET,CAP_INSET)]];
 
        _arrowView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow.png"]];
 
        [self addSubview:_borderImageView];
        [self addSubview:_arrowView];
 
    }
    return self;
}

Basically we are allocating and initializing the two views and adding them as subviews. Notice how the background image is defined with cap insets. Next, let’s implement all the required methods including the getters and setters for the properties.

 
- (CGFloat) arrowOffset {    
    return _arrowOffset;    
}
 
- (void) setArrowOffset:(CGFloat)arrowOffset {    
    _arrowOffset = arrowOffset;
}
 
- (UIPopoverArrowDirection)arrowDirection {    
    return _arrowDirection;    
}
 
- (void)setArrowDirection:(UIPopoverArrowDirection)arrowDirection {    
    _arrowDirection = arrowDirection;
}
 
 
+(UIEdgeInsets)contentViewInsets{
    return UIEdgeInsetsMake(CONTENT_INSET, CONTENT_INSET, CONTENT_INSET, CONTENT_INSET);
}
 
+(CGFloat)arrowHeight{
    return ARROW_HEIGHT;
}
 
+(CGFloat)arrowBase{
    return ARROW_BASE;
}

The above methods are fairly straightforward with the exception of contentViewInsets. This method determines the thickness of your border. The higher the number the thicker your border. Finally, the method that lays out our two subviews in their appropriate sizes and location.

 
-  (void)layoutSubviews {
    [super layoutSubviews];
 
    CGFloat _height = self.frame.size.height;
    CGFloat _width = self.frame.size.width;
    CGFloat _left = 0.0;
    CGFloat _top = 0.0;
    CGFloat _coordinate = 0.0;
    CGAffineTransform _rotation = CGAffineTransformIdentity;
 
 
    switch (self.arrowDirection) {
        case UIPopoverArrowDirectionUp:
            _top += ARROW_HEIGHT;
            _height -= ARROW_HEIGHT;
            _coordinate = ((self.frame.size.width / 2) + self.arrowOffset) - (ARROW_BASE/2);
            _arrowView.frame = CGRectMake(_coordinate, 0, ARROW_BASE, ARROW_HEIGHT);            
            break;
 
 
        case UIPopoverArrowDirectionDown:
            _height -= ARROW_HEIGHT;
            _coordinate = ((self.frame.size.width / 2) + self.arrowOffset) - (ARROW_BASE/2);
            _arrowView.frame = CGRectMake(_coordinate, _height, ARROW_BASE, ARROW_HEIGHT); 
            _rotation = CGAffineTransformMakeRotation( M_PI );
            break;
 
        case UIPopoverArrowDirectionLeft:
            _left += ARROW_BASE;
            _width -= ARROW_BASE;
            _coordinate = ((self.frame.size.height / 2) + self.arrowOffset) - (ARROW_HEIGHT/2);
            _arrowView.frame = CGRectMake(0, _coordinate, ARROW_BASE, ARROW_HEIGHT); 
            _rotation = CGAffineTransformMakeRotation( -M_PI_2 );
            break;
 
        case UIPopoverArrowDirectionRight:
            _width -= ARROW_BASE;
            _coordinate = ((self.frame.size.height / 2) + self.arrowOffset)- (ARROW_HEIGHT/2);
            _arrowView.frame = CGRectMake(_width, _coordinate, ARROW_BASE, ARROW_HEIGHT); 
            _rotation = CGAffineTransformMakeRotation( M_PI_2 );
 
            break;
 
    }
 
    _borderImageView.frame =  CGRectMake(_left, _top, _width, _height);
 
 
    [_arrowView setTransform:_rotation];
 
}
 
@end

The switch statement determines the direction of the arrow and then calculates the location of the arrow and its rotation. Our default arrow image points upwards so we need to change its rotation using an affine transform which takes in radians. The arrowOffset is calculated and set by the UIPopoverController which essentially tells us the distance of the arrow from the center of content view. We also have to adjust the height and width of our border view to account for the arrow.

Using the CustomPopoverBackgroundView

Now that we have created the CustomPopoverBackgroundView we need to set it when creating an instance of the UIPopoverController

1
2
3

UIPopoverController *popoverController = [[UIPopoverController alloc] initWithContentViewController:contentViewController] ;
 
popoverController.popoverBackgroundViewClass = [CustomPopoverBackgroundView class];

Note: the above code will work only in iOS 5

Now run your app and marvel at your newly designed popover.

Eric Meyer: Standing In Opposition

Eric Meyer — Wed, 18 Jan 2012 16:42:54 +0000

Though I certainly do not support SOPA or the PROTECT IP Act (the complete, rather contrived acronym of PIPA), I will not be blacking out meyerweb. This is largely because the vast majority of my readers already know about these bills, and very likely oppose them; as for anyone who visits but does not know about these bills, I feel I'll do better to speak out than to black out. (Which is not a criticism of those who do black out. We all fight in our own ways.)

Instead, I will reproduce here the letter I attempted to send via contact form to my state Senator this morning, and which I will print out and send by regular postal service later today.

Senator Brown:

I grew up in Lexington, Ohio. I moved to Cleveland in pursuit of a career, and found success. Through a combination of good luck and hard work, I have (rather to my surprise) become a widely recognized name in my field, which is web design and development. Along the way, I co-founded a web design conference with an even more widely respected colleague that has become one of the most respected and successful web design events in the world. This business is headquartered in Ohio"�I live in Cleveland Heights with my family, and I intend to stay here until I either retire to Florida or die. Politically I'm best described as a moderate independent, though I do tend to lean a bit to the left.

As you can imagine, given my line of work, I have an opinion regarding the PROTECT IP Act which you have co-sponsored. The aims of PROTECT IP are understandable, but the methods are unacceptable. Put another way, if you wish to combat piracy and intellectual property theft, there are far better ways to go about it.

As someone with twenty years of technical experience with the Internet and nearly as many with the web"�I started creating web pages in late 1993"�please believe me when I say the enforcement mechanisms of the bill are deeply flawed and attack the very features of the Web that make it what it is. They are akin to making a criminal of anyone who gives directions to a park where drug trafficking takes place, regardless of whether they knew about the drug trafficking. You don't have to be in favor of drug trafficking to oppose that.

This is not a case where tweaking a clause or two will fix it; correction in this case would mean starting from scratch. Again, the objection is not with the general intent of the bill. It is with how the bill goes about achieving those aims.

If you would like to discuss this with me further, I would be delighted to do whatever I can to help, but in any event I strongly urge you to reconsider your co-sponsorship of the PROTECT IP Act.

Thank you for your time and consideration.

Eric A. Meyer (http://meyerweb.com/)

Partner and co-founder, An Event Apart (http://aneventapart.com/)

If you agree that the PROTECT IP Act is poorly conceived, find out if your senator supports PIPA. If they do, get in touch and let them know about your opposition. If they oppose the bill, get in touch and thank them for their opposition. If their support or opposition isn't known, get in touch and ask them to please speak out in opposition to the bill.

As others have said, postal letters are better than phone calls, which are in turn better than e-mail, which is in turn better than signing petitions. Do what you can, please. The web site you save might be your own.

Vitamin: Free Video: Fieldsets and Labels

Nick Pettit — Wed, 18 Jan 2012 14:00:28 +0000

In this 9 minute video, you will learn about fieldsets and labels in HTML. These constructs will help you visually organize forms.

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

molly.com: SOPA/PIPA Blackout Supporter!

mollydotcom — Wed, 18 Jan 2012 09:16:57 +0000

This post is in protest of SOPA and PIPA. If one of these bills were to pass, the Web would become a black hole of nothingness. Want to help in the fight against SOPA / PIPA? First, go learn about … Continue reading →

Vitamin: Impress.js "� Create presentations with open web standards

Nick Pettit — Tue, 17 Jan 2012 21:42:56 +0000

I’m a big fan of CSS3 transitions and animations, so naturally I’m very impressed with impress.js (sorry… that one was a little too easy).

Impress.js is a presentation framework that takes its inspiration from Prezi, another popular presentation platform. The difference is, impress.js uses open web standards. Check out the source for impress.js, on GitHub.

QuirksMode: Mobilism announces Lyza Danger Gardner

Tue, 17 Jan 2012 10:45:00 +0000

On 10th and 11th of May the second edition of Mobilism will take place in Amsterdam. Like last year, it will concentrate on all aspects of the mobile web. For an idea what we’re going to do, see last year’s coverage, or watch Stephanie Rieger’s session.

For this edition we’re happy to welcome Lyza Danger Gardner, who started as a web developer and moved to mobile back in 2007, co-founding Cloud Four with Jason Grigsby, who’ll also speak at Mobilism.

Take a look at the programme page yourself: our line-up is progressing quite nicely; thanks so much. And we’ll also get a Fast Track with some quite interesting speakers, a mobile browser panel with Jeremy Keith, and no less than Mr. Responsive Design Ethan Marcotte will take us to the next level of responsiveness (and designiness).

And it’s in May in Amsterdam, when the city is at its most beautiful. So what’s not to like? Buy your ticket now!

Wisdump: Social Media 101: How Not to Waste Time

Wayne Ernest — Mon, 16 Jan 2012 19:00:09 +0000

Social media is great for a variety of different purposes. For one thing, you can catch up to a lot of people you otherwise might never get to see or talk to again. For another, you can post all kinds of things about your own life, and let your hundreds of casual acquaintances marvel at how awesome life is for you. On top of that, you can while away thousands of hours pretending to run a farm, command an army, hold together a motley crew of mafioso types, and do a bunch of other things that will ultimately make no difference in your real life. The following are some ways you can avoid doing the time-wasters, so you can use your social media time for more useful things.

Ask yourself what you’ll get out of it

Sometimes the best way to understand how much time you’ve wasted is to assign a numerical value to your time’s value. Imagine you’re used to making $10 an hour. Is spending three hours on that carefully manicured farm of yours really worth $30 to you? While you aren’t actually spending this money or borrowing it from lenders, you also aren’t making it. Considering how many ways there are to make money online these days, that’s a crying shame.

Allow yourself some “wasted” time

If you want to spend an hour or two having some fun and blowing off a little steam, that’s okay. You should never beat yourself up about taking some fun time for yourself, or pretty soon your life will be neurotic and you’ll be a full-fledged workaholic. As long as your fun time doesn’t turn into an excessive amount of time that could be spent on things you need to do, it’s all good.

Don’t worry about time that’s long gone

Maybe you used to waste a lot of time on social media sites, but now you’ve moved on to being a more moderate user. If you beat yourself up over what you used to do, you’ll only make yourself feel bad over nothing. There is no getting back time that’s gone. So you just need to forgive yourself for what you did in the past, and then move on. Fretting over the past is also wasting time.

Social media is a great way to waste time. In moderation, there’s nothing wrong with playing a few silly games. Just be sure you’re doing the things you need to do, too.

Hook up with your favorite brands

Of course it’s no waste of time to follow your favorite individuals and companies, just like you would do in magazines and newspapers. One of the great things about social media is that you can track your favorite products as well- mine being ones like Coca Cola, Ajinomoto and Nike.

All in all..it’s never a waste of time to have fun!

QuirksMode: QuirksMode.org reader survey, part I

Mon, 16 Jan 2012 15:48:36 +0000

In December I held a QuirksMode reader survey on Urtak. It had 69 questions, and about 55,000 answers were given by about 1,100 respondents. Here’s a partial summary of the findings.

This entry gives some information about the respondents themselves, about how they deal with IE6 and 7, and whether and how they test mobile and tablet devices.

Urtak allows you to create cross-tabs of two questions (and no more than two). For this entry my primary interest was to see whether my European and US respondents differed.

There’s one restriction on the cross-tabs: at least 100 people must have replied Yes to the first question in order to get a more-or-less representative response.

Incidentally, you can create cross-tabs yourself at the site. Play with the data if you feel like it.

About you

Here are the findings about you. The most interesting one is your gender: 95% of you is male. Weirdly 98% of my European respondents is male, against only 86% of my US respondents. That’s a large gap.

Overall, slightly more than one-third of the respondents works as a freelancer, and slightly more than one-third in a medium- to large-size web company. I assume the others work either in companies of 2-4 people. or in the web department of a non-website company.

Nearly half uses Chrome as their default browser (this fits the browser stat data from my site, though the fit is not perfect). About three out of four have their own, private projects next to their jobs. Four out of five consider themselves autodidact.

Differences between Europe and the US: Chrome is used more in the US, US respondents are more likely to have five years of experience under their belt, but Europeans are more likely to be autodidact.

About you
Question	All	Europe	US
Do you live in Europe?	58%	-	-
Do you live in the US?	30%	-	-
Are you male?	95%	98%	86%
Do you consider yourself autodidact in web development and/or design?	82%	83%	78%
Have you been working as a web developer for over five years?	74%	72%	83%
Is your primary browser Chrome?	49%	45%	54%
Do you work as a freelancer?	36%	36%	34%
Do you have your own site/project that you run independently of your primary job?	73%	74%	73%
Do you visit web design or development conferences?	49%	52%	49%
Do you work in a company whose core business is the creation of websites for others and that has at least 5 employees?	38%	37%	38%
Are you a member of Fronteers?	4%	7%	1%

About IE6 and IE7

How many of you still care for IE6 and IE7? Six out of ten of you still test your sites in IE6 and IE7, and about half of you charge your clients extra if you must support these browsers.

However, less than one out of five of you report that IE6 and IE7 together account for at least 1/3 of the traffic to your sites. This percentage is much lower among people who charge their clients extra.

Europeans are more likely to refuse to make their sites work with these older browsers.

About IE6 and IE7
Question	All	Europe	US	Charge
Do you charge your clients extra for making their sites work in IE6 and IE7?	52%	53%	50%	-
Do you test your sites in IE6 and IE7?	61%	63%	62%	60%
Do you purposefully make your web site _not_ work on IE6 or IE7?	18%	20%	12%	27%
Do IE6 and IE7 together account for at least 1/3 of the traffic to your sites?	17%	13%	21%	8%

About testing on mobile phones

Then we come to the questions that interest me most personally: on what kind of mobile phones and tablets do you test? I split up the replies according to geography, but also among iPhone- and Android users.

In general Europe has slightly fewer iPhone users than the US, but slightly more Android users.

Very generally speaking iPhone users are more attuned to the mobile Web, although in most cases the difference is slight. Only when it comes to testing on two different Android devices do Android users significantly outpace iPhone users — perhaps not surprisingly. Also, Android users use WAY more QR tags than others (23% vs 11% for iPhone).

iPhone users have more experience with Windows Phone 7 and the BlackBerry PlayBook. For some reason this surprised me, but it’s clear now that, at least among my readers, iPhone users are more mobile-savvy than Android users.

The difference between Europeans and Americans is larger. In general, Americans are more of the opinion that only iOS and Android will remain important (56% vs 42% in Europe), care less about testing OSs that are neither iOS nor Android (18% vs 28% in Europe), and test less in Opera Mini (14% vs 25% in Europe). Still, Americans test their sites more on mobile/tablet devices in general (77% vs 72% in Europe) and use more jQuery Mobile (17% vs 12% in Europe).

In any case it’s clear that geography is more important than OS preference for deciding what to test on. This makes sense — the European and US mobile browser market shares are quite different.

About testing on mobile phones
Question	All	Europe	US	iPhone	Android
Is your primary phone an iPhone?	42%	41%	49%	-	-
Is your primary phone an Android?	35%	37%	33%	-	-
Do you think that of the myriad mobile OSs, only iPhone and Android will remain important?	47%	42%	56%	51%	50%
Do you test your sites on at least two tablets?	17%	16%	18%	22%	16%
Do you test your sites on at least two mobile phones? (Not tablets, phones)	48%	51%	46%	55%	52%
Do you test your sites on a tablet or mobile device that runs neither iOS nor Android?	25%	28%	18%	24%	22%
Have you done any site testing on Windows Phone 7?	15%	16%	13%	18%	12%
Have you tested your site on the BlackBerry PlayBook?	5%	4%	5%	9%	3%
Do you hope that WebKit will become the only rendering engine, and that the others will gradually disappear?	32%	28%	36%	39%	27%
Do you set up different landscape and portrait layouts for your mobile web sites?	30%	31%	27%	35%	28%
Do you test on at least two Android devices from different vendors?	21%	20%	21%	18%	33%
Do you test your sites in Opera Mini?	21%	25%	14%	19%	25%
Do you test your sites on any device that's not a classic desktop or laptop?	72%	72%	77%	82%	70%
Have you used PhoneGap, WebWorks, Titanium or any other HTML5 wrapper to create native mobile/tablet apps?	21%	21%	22%	26%	21%
Do you publish QR Code tags as quick links to your App / Site?	16%	16%	15%	11%	23%
Do you use jQuery Mobile to develop mobile websites?	17%	12%	17%	19%	16%
Do you practice the "mobile first" philosophy when approaching a new web project?	25%	-	-	-	-

The Mobile First question came in late in the survey and too few people answered Yes, so I will not publish the cross-tabs.

To be continued

There are plenty more fun facts to be gleaned from the reader survey. In a future post I’ll give some more numbers and cross-tabs.

ajaxian: Shim uses node.js to test sites on multiple browsers

jvaughan — Sun, 15 Jan 2012 04:01:13 +0000

Shim was developed within the Boston Globe’s media lab as a way to study how Web sites look on various devices and browsers. A laptop intercepts all wifi traffic "� this is redirected to a custom node.js server – which inserts a javascript, or “shim,” at the head of each web page that is visited.

The shim, once loaded in a device’s browser, opens and maintains a socket connection to the server, according to to Shim’s developers. Shim was written in 2011 by Chris Marstall, Creative Technologist at the Boston Globe. The software has been open sourced. Write the Shim originators on git.hub:

Whenever a new page is requested, the page’s URL is broadcast to all connected browsers, which then redirect themselves to that URL, keeping all devices in sync. Shim info is available on git.hub.

Vitamin: Code Racer is coming!

Ryan Carson — Wed, 11 Jan 2012 14:25:55 +0000

The entire Treehouse team has travelled from across the world to gather at our Orlando HQ for one week to build something fun. We call it Idea Week and our creation this time is a game called Code Racer.

It’s a four-player live coding game where the players race to build a web page. Weapons can be used to slow down your opponents. That’s right, coding + weapons. You’re going to love it :)

Check out this video overview of the design and development process of Day One.

Can’t wait to show it to you all!

molly.com: Web With Molly: Core HTML and CSS for the Open Web

mollydotcom — Mon, 09 Jan 2012 20:39:33 +0000

This is a free opportunity for Web designers and developers interested in gaining a deeper understanding of the core technologies which we use for the Open Web. The event is open to twenty (20) people. Potential attendees, please read this … Continue reading →

WebDev FeedHouse

W3C: W3C Demonstrates Power of Open Web Platform at Mobile World Congress 2012

W3C: W3C Launches New Markup Validation Service

W3C: Widget Access Request Policy is a W3C Recommendation

W3C: CSS Positioned Layout Module Level 3 Draft Published

W3C: Last Call: Web IDL

W3C: Java language binding for Web IDL Draft Published

W3C: W3C Introduces Startup Level for Membership

W3C: Last Call: Vibration API

W3C: The PROV Data Model and Abstract Syntax Notation Draft Published

W3C: BAD to Good Updated: Demo shows web accessibility barriers fixed

W3C: Internet Society Board Approves Donation to Support W3C Stewardship of Open Web Platform

W3C: Three Last Call Working Drafts published by the RDF Web Applications Working Group

W3C: W3C Launches Patent Advisory Group for Touch Events Specification

W3C: Workshop Report: Data and Services Integration

W3C: Incubator Group Report: Media Analysis Management Interface

Vitamin: Rails 3.2.1

Vitamin: Treehouse Groups are live!

More info …

General Design Refresh

Wisdump: The "Horrible Web Design Client:"� An Infographic Look

Vitamin: Free Video: Getting started with iOS development

Vitamin: Another Round of Treehouse Nerd Merit Badges!

Vitamin: Pears: An open source collection of common markup & style

Vitamin: Future Insights Live "� Early Birds Extended!

Vitamin: Check My Colours

ajaxian: Winding road of open-source webOS

456 Berea St: Using max-width on images can make them disappear in IE8

molly.com: Inside the CSS WG: A New Reality Series

Vitamin: Full Day Web Design Workshops: Which Would You Pick?

Vitamin: SQL Fiddle

Vitamin: Free Video: Control Flow

QuirksMode: QuirksMode.org reader survey, part II

Basic

Your way of working

QuirksMode.org

Device ownership

Vitamin: Git For Designers (Part 1)

Why Use Version Control?

Step 1: Install and Configure Git

Step 2: Initialize a repository

Step 3: Add Your Files

Step 4: Commit Your Changes

Step 5: Make some changes

Step 6: Make a branch

Hello world

Hello world

Step 7: Merge your changes

Well Done!

Vitamin: Showcase of the Best Google Fonts

Vitamin: Styling Images with CSS3

Vitamin: Is there a Photoshop grid for responsive web design?

Vitamin: Kevin Rose and Jason Calacanis confirmed for Future Insights Live in Vegas

Vitamin: Free Video: iOS Tab bar (UITabBarController)

Vitamin: Twitter Bootstrap 2.0

Vitamin: A New Year, A New Responsive Dribbble Portfolio "� Part 1 of 2

Part 1 (this post):

Part 2 (coming soon):

The File Structure

The HTML

The CSS

The JavaScript

Wrapping Up

Still to Come(Part 2)

Vitamin: Scrolling Made Fun

QuirksMode: AEA, Breaking Development, and my US tour

Vitamin: Our new Treehouse Student Plan is live!

QuirksMode: Retesting the input types

Quiz

Purpose

Findings

Vitamin: The separation of structure, presentation and behavior is dead

The Path

The Truth

Why Separation is Still Around

Divergence

Truth is Conditional

Wholeness

Where <font> Fails

Some Examples