HTML5 Texas Archives - Jonathan Jeter

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

Model-View-Websockets

February 2, 2013 By Jonathan Jeter Leave a Comment

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.

JavaScript

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

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

February 2, 2013 By Jonathan Jeter Leave a Comment

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”.

Enyo 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

Managing a Large Front-End Project with Automated Build Tools

February 2, 2013 By Jonathan Jeter Leave a Comment

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

Backbone: 3 Ways

February 2, 2013 By Jonathan Jeter Leave a Comment

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.

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?

Structure
Modularity
Persistence Layer
Common Services
Best Practices

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

Adaptive Images for Responsive Web Design

February 2, 2013 By Jonathan Jeter Leave a Comment

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.”

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

HTML5 TX 2013

February 2, 2013 By Jonathan Jeter Leave a Comment

Today is the 2nd annual HTML5 Texas conference at St. Edwards University in Austin. Looking forward to learning some great HTML5 goodness today.

Important things for today:

Parking is available in any lot except the red lots (resident parking)
Great sponsors
Hackython with free copies of Kendo UI
Closing Party tonight

Open Spaces – Alan Stevens

Open spaces technology allows for the important stuff that goes on at conferences in the hallways. An open space is a place where you can run an impromptu session on any topic. The first step is to propose a topic that you’re passionate about. It doesn’t have to be related to other topics or the conference at all. Announce your topic and your name and put it on the board in one of the areas available. The only other responsibility is to show up. Then you can do whatever you want. Give a lecture or a presentation or a conversation. If no one shows up, that’s okay, too. Just stay there and see what happens. It is an amazing experience.

Read the rest of HTML5 TX 2013

HTML5 Texas JavaScript Workshop – Client-Side Storage

Client-Side Storage

localStorage

Like this:

HTML5 Texas Recap

Like this:

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

Like this:

Adaptive Images for Responsive Web Design

Like this:

HTML5 TX 2013

Open Spaces – Alan Stevens

Like this:

Like this:

Tell someone about this:

Like this:

Responsive Web Design

Like this:

JavaScript

#singlepageappaproblems

Like this:

Like this:

Like this:

Like this:

Like this:

Open Spaces – Alan Stevens

Like this: