Web Technologies In 2013

by Brandon Brown

Find me on Twitter/Github

My name is

Brandon Brown

I work for a startup company, Input Logic

My current programming skillset

Work Schedule

• Roll out of bed
• Commute to desk
• Build awesome web products
• Code life away
• Maintain sanity
• (in no particular order)

It's a hard life, I know

Products I contribute to

QuoteRobot
Platform for web professionals to write winning proposals, invoices, and contracts.

Postach.io
Evernote blogging platform

Zing.io
High-end realestate websites for individal properties

Opensource projects I contribute to

• IE Alert - Added a new js function to disallow closing of modal, cleaned up the documentation
• jQuery Mobile Icon Pack - Refactored CSS
• Furatto - Recently reported bugs in the CSS on a range of mobile devices

Coding: MVC, RWD, CSS Preprocessors and Web Browsers

Current State of the Web

HTML5, CSS3, jQuery, MooTools, Laravel, Flask, Django

Modern Web browsers running WebKit, Blink, Gecko, and Trident (among others)

"Spaghetti Code":
The Importance of MVC

What is MVC?

MVC = Model, View, Controller

Best described as an MVC "framework"

Frameworks use OOP (object-oriented programming) and promote DRY (Don't Repeat Yourself) coding

Highly advised: Experiment with all of them

Don't Repeat Yourself

Don't recreate the wheel, in a very simple example

if($item1 == true)
{
    if($item2 == true)
    {
        $item3 = 5;
    }
    else
    {
        $item3 = 10;
    }
}
else
{
    if($item2 == true)
    {
        $item3 = 15;
    }
    else
    {
        $item3 = 20;
    }
}

Instead, do this:

if($item1 == true && $item2 == true)
{
    $item3 = 5;
}
elseif($item1 == true && $item2 == false)
{
    $item3 = 10;
}
elseif($item1 == false && $item2 == true)
{
    $item3 = 15;
}
else
{
    $item3 = 20;
}

The Pragmatic Programmer = Must Read!

Responsive Web Design

What Does It Mean!

RWD uses CSS3 Media Queries

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px)
                   and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px)
                   and (max-width: 767px) {}

/* Mobile Portrait to Mobile Landscape (devices and browsers) */
@media only screen and (max-width: 479px) {}

Responsive design = them modern web

Websites comply with over a dozen different resolution & screen sizes on devices

Mediaqueri.es

CSS Preprocessors

/*
 * A LESS mixin to include retina-images in
 * your CSS alongside standard resolution images
 * My gist: https://gist.github.com/brandonb927/3874012
 */
.image-2x(@image1, @image2, @width, @height) {
    background-image: url('@{image1}');
    background-repeat: no-repeat;
    @media print, screen,
        (-webkit-min-device-pixel-ratio: 1.25),
        (min-device-pixel-ratio: 1.25),
        (min-resolution: 120dpi) {
            // on retina, use image that's scaled by 2
            background-image: url('@{image2}');
            .background-size(@width, @height);
    }
}

CSS What?!

CSS Preprocessors make CSS fun to use!

Short learning curve, addiction is imminent

A few to choose from, the most popular being LESS and SASS

SASS vs LESS

Value added by CSS Preprocessors

• Variables
• Mixins
• Style Nesting
• Functions & Operations
• Selector Inheritance

Variables

/* LESS (Pre-compilation) */

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Easy vendor-prefixed content for cross-browser compatibility

/* LESS */

.rounded (@radius: 5px) {
  -webkit-border-radius: @radius;   // Older Webkit browsers
  -moz-border-radius: @radius;      // Pre Firefox v4
  -ms-border-radius: @radius;       // Microsoft, 'nuff said.
  -o-border-radius: @radius;        // Older Opera & Opera mini versions
  border-radius: @radius;           // CSS3 standard
}

#footer {
  .rounded(10px);
}

/* Compiled CSS */

#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Style Nesting

CodePen Example

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Functions & Operators

// LESS
@border-width: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);          // You can do math on colours!
  border-left: @border-width;
  border-right: (@border-width * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

/* Compiled CSS */
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Modern Web Browsers

• Google Chrome
• Live Reload
• ITAS
• PHP Ninja Manual
• Adobe Edge Inspect

Drop the WYSIWYG For a Text Editor

Sublime Text 2 & Plugins

Sublime Text 2 is a cross-platform text-editor for OS X, Linux and Windows

It's beauty shines in it's extensibility and plugins

• Package Control
• 1406 Sublime Text Packages
• Github

Resources/People to Follow

• Nicolas Gallagher - author of modern, HTML5-ready alternative to CSS resets
• Chris Coyier - My favourite Front-End Dev
• Lea Verou - Developer Relations @W3C
• Paul Irish - Chrome Dev relations, Front-end Dev
• Simurai - UX designer
• Jack Franklin - Javascript junkie

Wanna see this again?

Slides available on Slid.es, built on an opensource Javascript plugin called reveal.js, available on github

Thank you!