post

HTML5 Texas Recap

HTML5 TX Conference 2013 Logo

HTML5 TX Conference 2013

The HTML5 Texas 2013 Conference was great! Here are notes, slides and other resources I collected.

My blog posts of sessions that I attended.

JavaScript Workshop by Pamela Fox

post

Closing Panel at HTML5TX Conference

Closing Panel at HTML5TX ConferenceTheme: Where has HTML5 come with the diversity of devices

Panelists: Christopher SchmittRyan JoyBurke Holland,  Estelle WeylJoe McCannMike Taylor

What is future-friendly?

Joe: being future-friendly with the web is supporting mobile, but a better strategy is a content strategy for all devices and where they are used. It’s okay to think of web browsers as end points, but your content should be able to live in all environments.

Desktop. Laptop. Smartphone. Tablet. Phablet. Xbox. PS Vita. Smart TVs.  That’s a lot of places your content can live.  Building specific experiences for each one of these simply doesn’t scale.  Let’s find out why and how to tackle such an enormous problem.

Being “”Future Friendly”" is not necessarily just a visual or interaction design decision, but an architectural decision as well.  Furthermore, being “”Future Friendly”" is not about the web or native:  it’s both and more.

Read the rest of Closing Panel at HTML5TX Conference

post

Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve

by Nathan Smith at HTML5 Texas in Austin, TX (Deck)

Have you ever found yourself needing to build static front-end templates, either as part of a larger project or as a way to communicate the nuances of responsive design to a client? I think we can all agree that just doing flat HTML leaves us wanting for more templating power.

But, using a dynamic language (PHP, Ruby, etc) typically means that it’s tougher to hand off to a client, who may (not) have a local development environment. That’s where Serve helps bridge the gap. It lets you play with the “”V”" of Rails MVC, but also export flat HTML for easy distribution.

Responsive Web Design

Designers can’t just throw stuff over the wall to the developers anymore

The deck says it all. Great stuff!

sass is to css what jQuery is to JavaScript

Read the rest of Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve

post

Model-View-Websockets

by Garann Means at HTML5 Texas Conference in Austin, TX

Many front-end developers are familiar with MVC, and almost all are familiar with event-driven architectures (even if they call them something else). How do those two philosophies work together? And, more importantly, how can websockets help future applications become more responsive, more consistent, and easier to develop? We’ll reexamine the Controller concept from MVC and figure out how to combine simple browser messaging and websockets to address our application needs and improve our user experiences.

Model-View-WebsocketsJavaScript

Did well for a while without patterns and frameworks, but once we realized its potential we added everything at once, adding complexity and functionality.

#singlepageappaproblems

Single Page Applications (SPAs) today are everywhere, as well as SPA behavior on static pages, requiring 3rd-party tools and systems of dependencies. It’s easy to set up, but difficult to maintain.

Read the rest of Model-View-Websockets

post

Front End Legos

by Shay Howe at HTML5 Texas Conference in Austin, TX (Deck)

There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.

In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible. Writing code is the easy part, finding a practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice.

Front End Legos - Building Modular CSSCommon Problems

  • Websites have difficulty scaling
  • code becomes brittle
  • Files and code bases begin to swell

What’s Wrong

Best practices aren’t exactly best practices

Read the rest of Front End Legos

  • avoid extra elements
post

10 Things You Didn’t Know a Browser Could Do

by Estelle Weyl at HTML5 Texas Conference in Austin, TX (Deck)

It may feel like the HTML5, CSS3 and ECMAScript specifications are moving along at a snails pace, but browser capabilities are moving quickly, and it is difficult to keep up with all the new feature support. In this session we’ll cover some brand spanking new and older but unknown features that make debugging, designing and developing more fun.

10 Things You Didn't Know a Browser Could Do1. $(‘selector’) without jQuery

  • Supported since IE8
  • You can access DOM elements with standard css selectors

2. Everything is Editable

  • Everything can be updated
  • Can even paste!
  • Updates the DOM
  • Turn anything into a form element
  • Supported since IE5

3. Can store lots of data

  • LocalStorage
  • SessionStorage
  • WebSQL (deprecated but available in webkit)
  • IndexedDB (new standard, but not supported in any browser)

Cookie Limitations

Read the rest of 10 Things You Didn’t Know a Browser Could Do

post

You Got your MVC into my Components: Adding Bindings to Enyo

by Ben Combee at the HTML5 Texas Conference in Austin, TX

Enyo (http://enyojs.com) started as an web application framework, focusing on the problem of effectively building reusable UI components.  However, many app developers view problems through a Model-View-Controller (MVC) point-of-view where the UI is seen as a templating problem.  This talk looks at how the Enyo framework evolved in late 2012 to take on aspects of MVC, integrating support for Backbone models and data binding into our component & message passing architecture.  In doing so, it reveals what these two worlds can learn from each other, and how they both play into future work on the “web platform”.

Adding bindings to EnyoEnyo help build html apps with the feel of native apps.

A new way of thinking

How do you keep application state?

Templates are not enough. Interactive controls are hard to put into templates.

Read the rest of You Got your MVC into my Components: Adding Bindings to Enyo

post

Managing a Large Front-End Project with Automated Build Tools

by kperch at HTML5 Texas Conference in Austin, TX

How do you manage a huge web application‘s front-end when you have a diverse team of programmers, and javascript is not a strong suit for all of them? How do you handle both new and old code from multiple developers, and make sure only quality code makes it into your repos? Automated tools such as Yeoman and Grunt are not just for packaging your web project in a performant and clean package. They also allow you to enforce code quality and consistency through automated quality checking, testing, and beautification. This talk will go over the case study of a large web application in need of a refactor and test suite, and how tools such as Yeoman and Grunt allow you to implement a plan to bring projects like these back from the brink, without losing your sanity in the process.

Read the rest of Managing a Large Front-End Project with Automated Build Tools

post

Backbone: 3 Ways

by Pamela Fox at HTML5 Texas Conference, Austin, Texas (Deck)

Backbone is one of the most popular MVC frameworks for JavaScript these days, and one of the reasons for its popularity is that its minimal and lightweight. That makes it easy to use in different ways and adapt to different projects – but can also make it hard to learn. In this talk, I’ll start with Backbone basics, and then dive into three different ways that we use it to power the frontends of Coursera.org.

Backbone 3 Ways HTML5TX

Why use an MVC framework? Website includes: 242 js files, 28848 lines of code & 5-person frontend team. Needed more structure to their code.
Why Backbone?

Backbone JS MVC Diagram

Backbone is a lightweight model view controller framework. Models use set & get so the framework know what’s going on. Collections group objects together. Views with basic data binding. Router is available, but you don’t have to use it.

Read the rest of Backbone: 3 Ways

post

Adaptive Images for Responsive Web Design



by Christopher Schmitt at HTML5 Texas Conference, Austin, Texas (Deck)

“The open web doesn’t stop at our desktop. Smart phones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy, they have better displays.In this session presented by Christopher Schmitt, we will work through tips and tricks to develop future friendly images in our sites and apps.”

Adaptive Images in Responsive Web Design

Think about the iPad, which presents so many design challenges. It can be wi-fi only or 3G, so bandwidth issues can be present. It has retina, so there can be display issues. When you design for web, you want to have great-looking images, but how do we get higher resolution images to those devices.

Why don’t we ask the browser? http://www.usearagentstring.com/ Available since the first browser Mozilla/1.0 (Win3.1), but browser put tons of stuff in the user agent string and can be spoofed. Instead of asking the browser, we do feature testing.

Read the rest of Adaptive Images for Responsive Web Design