Frontend Development Techniques

For the Modern Web

@darcy

Best viewed in Chrome Canary

About Me

• Frontend Developer
• Designer
• User Experience Advocate
• "Senior UX Developer"
• I like coding things
• I like designing things

Technique:

"A way of carrying out a particular task, esp. the execution or performance of an artistic work or a scientific procedure."

Technique:

• Fits into your workflow
• Enhances your workflow

Code  Bloat

<div class="post">
    <div class="top"></div>
    <div class="middle">
        <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat...
        </p>
    </div>
    <div class="bottom"></div>
</div>

Resource  Bloat

<div class="image">
    <img src="picture.jpg" alt="My Picture" />
    <img src="shadow.png" class="shadow" alt="My Picture" />
</div>

Browser Hacks http://paulirish.com/2009/browser-specific-css-hacks/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, Firefox, Safari, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, Safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+ */
body:first-of-type #ocho {  color: red }

/* Safari3+, Chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / Mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

Support Variants

.transparent {
  /* Required for IE 5, 6, 7 */
  /* ...or something to trigger hasLayout, like zoom: 1; */
  width: 100%;

  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50);

  /* Older than Firefox 0.9 */
  -moz-opacity:0.5;

  /* Safari 1.x (pre WebKit!) */
  -khtml-opacity: 0.5;

  /* Modern!
  /* Firefox 0.9+, Safari 2?, Chrome any?
  /* Opera 9+, IE 9+ */
  opacity: 0.5;
}

Anal Clients

• * Cross browser consitancy
• 1) Layout
• 2) Style
• 3) Function

But... but... IE9?!

• Application Cache (offline)
• Web Workers (threads in JavaScript)
• HTML5 Forms (validation mechanism, CSS3 selectors)
• JavaScript Strict Mode
• ForeignObject (embed external content in SVG)
• SMIL Animations (SVG animations)
• File API
• WebGL (3D)
• CSS3 Transitions (for animations)
• CSS3 Text Shadow
• CSS3 Gradients
• CSS3 Border Image
• CSS3 Flex box model
• ClassList APIs
• FormData
• HTML5 History API
• Drag'n Drop from Desktop
• and more...

The truth http://html5test.com/

Chrome Frame https://developers.google.com/chrome/chrome-frame/

Client side:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Server side:

X-UA-Compatible: chrome=1

Box Sizing http://paulirish.com/2012/box-sizing-border-box-ftw/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Floats

<div class="wrapper">
  <div class="left">
    ...
  </div>
  <div class="right">
    ...
  </div>
</div>

Clearfix http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

<div class="wrapper clearfix">
<div class="left">
  ...
</div>
<div class="right">
  ...
</div>
</div>

Calc https://developer.mozilla.org/en/CSS/-moz-calc

.padded {
  margin: 0 auto;
  position: relative;
  width: -webkit-calc(100% - (20px * 2));
  width: -moz-calc(100% - (20px * 2));
  width: calc(100% - (20px *2));
}

Multicolumn http://www.w3.org/TR/css3-multicol/

ul {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Multicolumn http://www.w3.org/TR/css3-multicol/

.content {
  height: 300px;
  width: 50%;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

Responsive Video

<div class="video">
<iframe src="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen=""></iframe>
</div>

Responsive Video

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

16:9 ( 9 / 16 = 0.5625 ) then ( 0.5625 * 100 = 56.25 )

Responsive Video

Background-size http://www.css3.info/preview/background-size/

Image   Replacement http://www.zeldman.com/

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

<h1 class='hide-text'>My Website's Logo</h1>

Image   Replacement http://nicolasgallagher.com/

.hide-text {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

<h1 class='hide-text'>My Website's Logo</h1>

Attribute Selectors http://css-tricks.com/attribute-selectors/

  <a href="https://google.com" title="Google" class="shadow remote center">Google</a>
        

Array.map( )

var people = ['jim','bob','susie','mike'];
var welcomes = people.map(function(name){
  return 'Hi ' + name + '!';
});

document.querySelectorAll( )

var items = document.querySelectorAll('.item');

var items = document.querySelectorAll('#home .item');

Clean  Document  Object

var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe = document.body.appendChild(iframe);
var _window = iframe.contentWindow,
    _document = iframe.contentDocument || iframe.contentWindow.document;
document.body.removeChild(iframe);

Filters

Filters

Filters

Regions http://www.w3.org/TR/css3-regions/

.content {
  height: 300px;
  width: 50%;
  -webkit-flow-into: uniqueID;
  -moz-flow-into: uniqueID;
  flow-into: uniqueID;
}
  .content2 {
  -webkit-flow-from: uniqueID;
  -moz-flow-from: uniqueID;
  flow-from: uniqueID;
}

Regions http://www.w3.org/TR/css3-regions/

Masks http://css-tricks.com/webkit-image-wipes/

.mask {
  -webkit-mask-box-image: url(mask.png);
}

Masks http://css-tricks.com/webkit-image-wipes/

.mask {
  -webkit-mask-box-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
}

Sticky Positioning http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
}

Flexbox http://css-tricks.com/old-flexbox-and-new-flexbox/

.box {
  display: -webkit-box;
  display: -moz-box;
  display: box;
}
.vertical {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
}

Thank You!

Follow @darcy

Fork darcyclarke

Visit darcyclarke.me