Twitter Bootstrap, or why being a PHP Developer is a bad idea.

fairly ugly • I’m not a designer • Tables are bad, but were always so much easier to layout designs with • IE • The browser on your computer, tablet, phone, car, refrigerator... Friday, May 31, 13

Bootstrap is jQuery for HTML/CSS Friday, May 31, 13

Where to get it? • http://twitter.github.io/bootstrap/ • Where to get

it? • http://twitter.github.io/bootstrap/getting-started.html • Download compiled version Friday, May 31, 13

What do you get? • css/bootstrap.css • js/bootstrap.js • img/

• glyphicons-halﬂings.png • glyphicons-halﬂings-white.png Friday, May 31, 13

Basic HTML <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta

name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> Friday, May 31, 13

Basic HTML <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta

Is it difﬁcult? <div class="navbar navbar-inverse navbar-ﬁxed-top"> <div class="navbar-inner"> <div

class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form pull-right"> <input class="span2" type="text" placeholder="Email"> <input class="span2" type="password" placeholder="Password"> <button type="submit" class="btn">Sign in</button> </form> </div> </div> </div> </div> <div class="container">  <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p> </div>  <div class="row"> <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> </div> </div> <hr> <footer> <p>© Company 2013</p> </footer> </div>  Friday, May 31, 13

<div class="navbar navbar-inverse navbar-ﬁxed-top"> <div class="navbar-inner"> <div class="container"> <button type="button"

class="btn btn-navbar" data-toggle="collapse" data- target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form pull-right"> <input class="span2" type="text" placeholder="Email"> <input class="span2" type="password" placeholder="Password"> <button type="submit" class="btn">Sign in</button> </form> </div> </div> </div> </div> Friday, May 31, 13

<div class="navbar navbar-inverse navbar-ﬁxed-top"> <div class="navbar-inner"> <div class="container"> <button type="button"

The rest of the page... <div class="container"> <!-- Main hero

unit for a primary marketing message or call to action --> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p> </div>  <div class="row"> <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> </div> </div> <hr> <footer> <p>© Company 2013</p> </footer> </div>  Friday, May 31, 13

The rest of the page... <div class="container"> <!-- Main hero

What else can it do? • Modal windows • Dropdowns

• Scrollspy • Tabs • Tooltips • Popovers • Alerts • Buttons! • Collapsable Divs • Carousels • Typeahead • Afﬁxing elements • Progress Bars • and more... Friday, May 31, 13

Friday, May 31, 13

So what? Friday, May 31, 13

So what? How does this relate to PHP? Friday, May

31, 13

What does this matter? I’m a PHP developer! Not a

front-end guy? Friday, May 31, 13

Why should I bother with CSS? Tables are great! And

I already know jQueryScript! Friday, May 31, 13

The Modern Site • Twitter Bootstrap • http://twitter.github.io/bootstrap/ • jQuery

• http://jquery.com/ • Underscore.js • http://underscorejs.org/ • Moment.js • http://momentjs.com/ • Backbone.js • http://backbonejs.org/ • PHP • http://php.net • MySQL • http://www.mysql.com/ • RabbitMQ • http://www.rabbitmq.com/ Friday, May 31, 13

The Modern Site, continued... • Transparency • http://leonidas.github.io/transparency/ • LESS

• http://lesscss.org/ • Require.js • http://requirejs.org/ • Makeﬁle • http://en.wikipedia.org/wiki/ Make_(software) • Jenkins • http://jenkins-ci.org/ • git • http://git-scm.com/ Friday, May 31, 13

Jason, you are crazy... you don’t possibly need to know

that much. Friday, May 31, 13

O’RLY? YA’RLY! Friday, May 31, 13

And we haven’t even discussed • Unit Testing JavaScript •

Your Editor of Choice • cron • Web Servers • Cache Friday, May 31, 13

And we haven’t even discussed • DI • Software Architecture

• Backups • Load Balancing • Security! • and more... Friday, May 31, 13

Scared? You shouldn’t be. Friday, May 31, 13

There are lots of tools out there. You should learn

them. Friday, May 31, 13

jQuery • Abstracts out cumbersome parts of JavaScript • Abstracts

out differences in browser version • Provides a common interface • Widely popular • You should learn it! Friday, May 31, 13

Underscore.js • A nice library for abstracting away silly parts

of JavaScript • Plays well with jQuery • Makes JavaScript development enjoyable • Let’s you focus on writing code • You should learn it! Friday, May 31, 13

Moment.js • Date/Time handler in JavaScript • Easy • Easier

than that • And probably easier than that • Learn it! Friday, May 31, 13

Backbone.js • A front-end library for developing complex JavaScript Applications

• Single Page Applications • Handles communication with API end-points • Maps Models to Views • Learn it! Friday, May 31, 13

PHP • ... Friday, May 31, 13

MySQL • It’s a database! • It’s a store for

data! • It’s probably on your server! • It’s fairly simple to use! • Learn SQL! Friday, May 31, 13

RabbitMQ • Messaging • Makes complex things difﬁcult • Event-driven

• That next step as a developer (remember learning MySQL?) • Learn it! Friday, May 31, 13

Transparency.js • JavaScript Templating Language • You already know how

to write templates (HTML) • Subtle in how it works • Works well with Backbone • Learn it! Friday, May 31, 13

LESS • CSS++ • Makes writing CSS much easier •

Variables • Mixins • Learn it! Friday, May 31, 13

Require.js • AMD - Asynchronous Module Deﬁnition • require(‘ﬁle.js’); •

Write modular JavaScript • Keep things easy to maintain • Learn it! Friday, May 31, 13

Makeﬁle • make • DRY • Writing your build steps

once • make backup, make test, make css, make js, make site • Learn it! Friday, May 31, 13

Jenkins • Automated make! • Build things after you’ve committed

• DRY • Logging • Learn it! Friday, May 31, 13

git • If it’s not in version control, it doesn’t

exist • If it’s not in version control, it doesn’t exist • If it’s not in version control, it doesn’t exist • If it’s not in version control, it doesn’t exist • If it’s not in version control, it doesn’t exist Friday, May 31, 13

git • If it’s not in version control, it doesn’t

exist • If it’s not in version control, it doesn’t exist • If it’s not in version control, it doesn’t exist • If it’s not in version control, it doesn’t exist • If it’s not in version control, it doesn’t exist Friday, May 31, 13