<commit_before><!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>Modernizr 3 Workflow</title>

<meta name="description" content="Integrating the upcoming Modernizr 3 into your workflow.">
<meta name="author" content="<NAME>">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/sky.css" id="theme">

<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">

<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>

<!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
<![endif]-->

<style type="text/css">
  /* quick overrides */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  text-transform: none;
}
.reveal h1 {
  font-size: 3em;
}
.reveal pre {
  font-size: 1em;
  width: 118%;
  margin-left: -5%;
  padding: 10px;
  background-color: rgba(0,0,0, 0.1);
}
.reveal pre code {
  padding: 10px;
  max-height: 700px;
  /*-webkit-filter: invert(100%); BACK POCKET */
}
section[t] h1 {
  font-size: 2.75em;
  margin-bottom: 1em;
}
section[t] h2 {
  letter-spacing: -2px;
}
section[t] blockquote {
  border: 4px solid #CDC9C3;
  border-radius: 10px;
  background-color: #EFEFEF;
  padding: 20px;
}
.reveal em {
  color: #BADA55;
  font-style: normal;
  text-shadow: 1px 1px 0 #FFFFFF, 3px 3px 0 #000000;
}
.reveal iframe {
  max-height: none;
}
.reveal img {
  max-width: none;
}
</style>
</head>

<body>

<div class="reveal">

  <!-- Any section element inside of this container is displayed as a slide -->
  <div class="slides">

    <section>
      <h1>A Modernizr 3 Workflow</h1>
      <h4>HTML5DevConf, April 2013</h4>
      <p>
      <small><a href="http://alexsexton.com"><NAME></a> / <a href="http://twitter.com/slexaxton">@SlexAxton</a></small>
      </p>
    </section>

<section data-markdown t>
<script type="text/template">
## Me

* UI Engineer at Bazaarvoice in Austin, TX
* Hate bulleted lists
* jQuery Board of Advisors
* Modernizr Core Team
* Run TXJS
</script>
</section>


<!-------START NORMAL SLIDES ----------->

<section data-markdown>
<script type="text/template">
## Your Goal
#### (*usually*)

To deliver the best possible **experience** to the **widest audience** possible
</script>

<aside class="notes">
- we all have a passion for this or we wouldn’t put up with it
- the new stuff that is _possible_ is absolutely mind blowing
- constraints are an implementation detail
</aside>
</section>

<section data-markdown>
<script type="text/template">
## Your Reality
#### (*usually*)

An environment that is fragmented, inconsistent and unpredictable in nearly *every* facet.
</script>
</section>

<section>
<section data-markdown>
<script type="text/template">
## You'd like

### *Consistent* Experiences
</script>
</section>

<section data-markdown>
<script type="text/template">
## You'd like

### Client and User *Happiness*
</script>
</section>

<section data-markdown>
<script type="text/template">
## You'd like

### *Good* Specifications
</script>
</section>
</section>

<section>
<section data-markdown>
<script type="text/template">
## You get

### *Inconsistent* Experiences
</script>
</section>

<section data-markdown>
<script type="text/template">
## You get

### Client and User *Confusion*
</script>
</section>

<section data-markdown>
<script type="text/template">
## You get

### *Partial* Specifications
</script>

<aside class="notes">
- there’s the bugs
- there’s the missing features (apis and actual browser chrome features)
- there’s the sheer speed difference
</aside>
</section>
</section>

<section data-markdown>
<script type="text/template">
# The First Step to Being Happy

&nbsp;

### Care about the *quality* of
### each browser experience,

&nbsp;

### *not* the differences between them.
</script>
</section>

<section>
<section data-markdown>
<script type="text/template">
# Dealing with Fragmentation
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different Screen Sizes
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different APIs
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different *speeds*
</script>

<aside class="notes">
This is one that's hard to detect, but one of the
most important ones.
</aside>
</section>

<section data-markdown>
<script type="text/template">
## Different Hardware Controls
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different Everything
</script>

<aside class="notes">
Will your app work on a google glass?
</aside>
</section>
</section>

<section data-markdown>
<script type="text/template">
## Dealing with this stuff is
# Responsive Web Design
</script>
<aside class="notes">
But there are lots of ways to respond.
</aside>
</section>

<section data-markdown>
<script type="text/template">
## Responsive Web Design
# is *not* just
## fitting on different screen sizes
</script>
</section>

<section data-markdown>
<script type="text/template">
# Prior Art

* <NAME> - [Progressive Enhancement 2.0](http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic)
* <NAME> - [!!!put in his TAFEE post here](http://paulirish.com/tafee)
</script>
</section>

<section>
<section data-markdown>
<script type="text/template">
## The TV Analogy

![lib/img/tv-2.png](lib/img/tv-2.png)

<small>http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic</small>
</script>
</section>
<section data-markdown>
<script type="text/template"><commit_msg>update names and links for credit<commit_after><!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>Modernizr 3 Workflow</title>

<meta name="description" content="Integrating the upcoming Modernizr 3 into your workflow.">
<meta name="author" content="<NAME>">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/sky.css" id="theme">

<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">

<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>

<!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
<![endif]-->

<style type="text/css">
  /* quick overrides */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  text-transform: none;
}
.reveal h1 {
  font-size: 3em;
}
.reveal pre {
  font-size: 1em;
  width: 118%;
  margin-left: -5%;
  padding: 10px;
  background-color: rgba(0,0,0, 0.1);
}
.reveal pre code {
  padding: 10px;
  max-height: 700px;
  /*-webkit-filter: invert(100%); BACK POCKET */
}
section[t] h1 {
  font-size: 2.75em;
  margin-bottom: 1em;
}
section[t] h2 {
  letter-spacing: -2px;
}
section[t] blockquote {
  border: 4px solid #CDC9C3;
  border-radius: 10px;
  background-color: #EFEFEF;
  padding: 20px;
}
.reveal em {
  color: #BADA55;
  font-style: normal;
  text-shadow: 1px 1px 0 #FFFFFF, 3px 3px 0 #000000;
}
.reveal iframe {
  max-height: none;
}
.reveal img {
  max-width: none;
}
</style>
</head>

<body>

<div class="reveal">

  <!-- Any section element inside of this container is displayed as a slide -->
  <div class="slides">

    <section>
      <h1>A Modernizr 3 Workflow</h1>
      <h4>HTML5DevConf, April 2013</h4>
      <p>
      <small><a href="http://alexsexton.com"><NAME></a> / <a href="http://twitter.com/slexaxton">@SlexAxton</a></small>
      </p>
    </section>

<section data-markdown t>
<script type="text/template">
## Me

* UI Engineer at Bazaarvoice in Austin, TX
* Hate bulleted lists
* jQuery Board of Advisors
* Modernizr Core Team
* Run TXJS
</script>
</section>


<!-------START NORMAL SLIDES ----------->

<section data-markdown>
<script type="text/template">
## Your Goal
#### (*usually*)

To deliver the best possible **experience** to the **widest audience** possible
</script>

<aside class="notes">
- we all have a passion for this or we wouldn’t put up with it
- the new stuff that is _possible_ is absolutely mind blowing
- constraints are an implementation detail
</aside>
</section>

<section data-markdown>
<script type="text/template">
## Your Reality
#### (*usually*)

An environment that is fragmented, inconsistent and unpredictable in nearly *every* facet.
</script>
</section>

<section>
<section data-markdown>
<script type="text/template">
## You'd like

### *Consistent* Experiences
</script>
</section>

<section data-markdown>
<script type="text/template">
## You'd like

### Client and User *Happiness*
</script>
</section>

<section data-markdown>
<script type="text/template">
## You'd like

### *Good* Specifications
</script>
</section>
</section>

<section>
<section data-markdown>
<script type="text/template">
## You get

### *Inconsistent* Experiences
</script>
</section>

<section data-markdown>
<script type="text/template">
## You get

### Client and User *Confusion*
</script>
</section>

<section data-markdown>
<script type="text/template">
## You get

### *Partial* Specifications
</script>

<aside class="notes">
- there’s the bugs
- there’s the missing features (apis and actual browser chrome features)
- there’s the sheer speed difference
</aside>
</section>
</section>

<section data-markdown>
<script type="text/template">
# The First Step to Being Happy

&nbsp;

### Care about the *quality* of
### each browser experience,

&nbsp;

### *not* the differences between them.
</script>
</section>

<section>
<section data-markdown>
<script type="text/template">
# Dealing with Fragmentation
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different Screen Sizes
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different APIs
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different *speeds*
</script>

<aside class="notes">
This is one that's hard to detect, but one of the
most important ones.
</aside>
</section>

<section data-markdown>
<script type="text/template">
## Different Hardware Controls
</script>
</section>

<section data-markdown>
<script type="text/template">
## Different Everything
</script>

<aside class="notes">
Will your app work on a google glass?
</aside>
</section>
</section>

<section data-markdown>
<script type="text/template">
## Dealing with this stuff is
# Responsive Web Design
</script>
<aside class="notes">
But there are lots of ways to respond.
</aside>
</section>

<section data-markdown>
<script type="text/template">
## Responsive Web Design
# is *not* just
## fitting on different screen sizes
</script>
</section>

<section data-markdown>
<script type="text/template">
# Prior Art

* <NAME> - [Progressive Enhancement 2.0](http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic)
* <NAME> - [Tiered Adaptive Front-end Experiences](http://paulirish.com/2011/tiered-adaptive-front-end-experiences/)
</script>
</section>

<section>
<section data-markdown>
<script type="text/template">
## The TV Analogy

![lib/img/tv-2.png](lib/img/tv-2.png)

<small>http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic</small>
</script>
</section>
<section data-markdown>
<script type="text/template">
{'fraction_non_alphanumeric': 0.17303856382978725, 'fraction_numerical': 0.014128989361702128, 'mean_word_length': 4.502057613168724, 'pattern_counts': {'":': 0, '<': 303, '<?xml version=': 0, '>': 303, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5844550', 'n_tokens_mistral': 4361, 'n_tokens_neox': 4077, 'n_words': 1162}