• Save
Twitter Bootstrap, or why being a PHP Developer is a bad idea
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 584 views

 

Statistics

Views

Total Views
584
Views on SlideShare
584
Embed Views
0

Actions

Likes
4
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Twitter Bootstrapor why being a “PHP Developer” is a bad idea.Friday, May 31, 13
  • 2. Who am I?• Jason Lotito• jasonlotito.com• @jasonlotito• github.com/jasonlotito• */jasonlotito• Application Architect @ MeetMe.comFriday, May 31, 13
  • 3. Being a Ruby Developeris a bad idea.Friday, May 31, 13
  • 4. Being a PHP Developeris a bad idea.Friday, May 31, 13
  • 5. Being an iOS Developeris a bad idea.Friday, May 31, 13
  • 6. Being an Android Developeris a bad idea.Friday, May 31, 13
  • 7. Being a Python Developeris a bad idea.Friday, May 31, 13
  • 8. Being a C Developeris a bad idea.Friday, May 31, 13
  • 9. Be a Developer.That’s a good idea!Friday, May 31, 13
  • 10. I want to talk about learningLearning new things... so let’s start by learning something newTwitter Bootstrap!Friday, May 31, 13
  • 11. What is Bootstrap?Friday, May 31, 13
  • 12. What is Bootstrap?• A front-end frameworkFriday, May 31, 13
  • 13. What is Bootstrap?• A front-end framework• HTML, CSS, JavaScriptFriday, May 31, 13
  • 14. What is Bootstrap?• A front-end framework• HTML, CSS, JavaScript• Makes web design and development easyFriday, May 31, 13
  • 15. What is Bootstrap?• A front-end framework• HTML, CSS, JavaScript• Makes web design and development easy• Easy to learnFriday, May 31, 13
  • 16. What is Bootstrap?• A front-end framework• HTML, CSS, JavaScript• Makes web design and development easy• Easy to learn• Easy to useFriday, May 31, 13
  • 17. What is a Front-end FrameworkFriday, May 31, 13
  • 18. What is a Front-end Framework• FrameworksFriday, May 31, 13
  • 19. What is a Front-end Framework• Frameworks• ToolkitsFriday, May 31, 13
  • 20. What is a Front-end Framework• Frameworks• Toolkits• BoilerplateFriday, May 31, 13
  • 21. What is a Front-end Framework• Frameworks• Toolkits• Boilerplate• Grid Systems (CSS)Friday, May 31, 13
  • 22. Why do we need it?Friday, May 31, 13
  • 23. Why do we need it?• Default, unstyled HTML is fairly uglyFriday, May 31, 13
  • 24. Why do we need it?• Default, unstyled HTML is fairly ugly• I’m not a designerFriday, May 31, 13
  • 25. Why do we need it?• Default, unstyled HTML is fairly ugly• I’m not a designer• Tables are bad, but were always so much easier to layout designs withFriday, May 31, 13
  • 26. Why do we need it?• Default, unstyled HTML is fairly ugly• I’m not a designer• Tables are bad, but were always so much easier to layout designs with• IEFriday, May 31, 13
  • 27. Why do we need it?• Default, unstyled HTML is 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
  • 28. Bootstrapis jQuery for HTML/CSSFriday, May 31, 13
  • 29. Where to get it?• http://twitter.github.io/bootstrap/• Where to get it?• http://twitter.github.io/bootstrap/getting-started.html• Download compiled versionFriday, May 31, 13
  • 30. What do you get?• css/bootstrap.css• js/bootstrap.js• img/• glyphicons-halflings.png• glyphicons-halflings-white.pngFriday, May 31, 13
  • 31. Basic HTML<!DOCTYPE html><html><head><title>Bootstrap 101 Template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><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
  • 32. Basic HTML<!DOCTYPE html><html><head><title>Bootstrap 101 Template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><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
  • 33. Basic HTML<!DOCTYPE html><html><head><title>Bootstrap 101 Template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><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
  • 34. Basic HTML<!DOCTYPE html><html><head><title>Bootstrap 101 Template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><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
  • 35. Is it difficult?<div class="navbar navbar-inverse navbar-fixed-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><!--/.nav-collapse --></div></div></div><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 &raquo;</a></p></div><!-- Example row of columns --><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 &raquo;</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 &raquo;</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 &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div> <!-- /container -->Friday, May 31, 13
  • 36. <div class="navbar navbar-inverse navbar-fixed-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 <bclass="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><!--/.nav-collapse --></div></div></div>Friday, May 31, 13
  • 37. <div class="navbar navbar-inverse navbar-fixed-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 <bclass="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><!--/.nav-collapse --></div></div></div>Friday, May 31, 13
  • 38. <div class="navbar navbar-inverse navbar-fixed-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 <bclass="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><!--/.nav-collapse --></div></div></div>Friday, May 31, 13
  • 39. <div class="navbar navbar-inverse navbar-fixed-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 <bclass="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><!--/.nav-collapse --></div></div></div>Friday, May 31, 13
  • 40. <div class="navbar navbar-inverse navbar-fixed-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><!--/.nav-collapse --></div></div></div>Friday, May 31, 13
  • 41. <div class="navbar navbar-inverse navbar-fixed-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 <bclass="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><!--/.nav-collapse --></div></div></div>Friday, May 31, 13
  • 42. The rest of thepage...<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 calledthe hero unit and three supporting pieces of content. Use it as a starting point to create something moreunique.</p><p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p></div><!-- Example row of columns --><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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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 ligulaporta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, utfermentum massa justo sit amet risus.</p><p><a class="btn" href="#">View details &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div> <!-- /container -->Friday, May 31, 13
  • 43. The rest of thepage...<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 calledthe hero unit and three supporting pieces of content. Use it as a starting point to create something moreunique.</p><p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p></div><!-- Example row of columns --><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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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 ligulaporta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, utfermentum massa justo sit amet risus.</p><p><a class="btn" href="#">View details &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div> <!-- /container -->Friday, May 31, 13
  • 44. The rest of thepage...<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 calledthe hero unit and three supporting pieces of content. Use it as a starting point to create something moreunique.</p><p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p></div><!-- Example row of columns --><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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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 ligulaporta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, utfermentum massa justo sit amet risus.</p><p><a class="btn" href="#">View details &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div> <!-- /container -->Friday, May 31, 13
  • 45. The rest of thepage...<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 calledthe hero unit and three supporting pieces of content. Use it as a starting point to create something moreunique.</p><p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p></div><!-- Example row of columns --><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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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 ligulaporta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, utfermentum massa justo sit amet risus.</p><p><a class="btn" href="#">View details &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div> <!-- /container -->Friday, May 31, 13
  • 46. The rest of thepage...<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 calledthe hero unit and three supporting pieces of content. Use it as a starting point to create something moreunique.</p><p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p></div><!-- Example row of columns --><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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna molliseuismod. Donec sed odio dui. </p><p><a class="btn" href="#">View details &raquo;</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 ligulaporta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, utfermentum massa justo sit amet risus.</p><p><a class="btn" href="#">View details &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div> <!-- /container -->Friday, May 31, 13
  • 47. What else can it do?• Modal windows• Dropdowns• Scrollspy• Tabs• Tooltips• Popovers• Alerts• Buttons!• Collapsable Divs• Carousels• Typeahead• Affixing elements• Progress Bars• and more...Friday, May 31, 13
  • 48. Friday, May 31, 13
  • 49. So what?Friday, May 31, 13
  • 50. So what?How does this relate to PHP?Friday, May 31, 13
  • 51. What does this matter?I’m a PHP developer! Not a front-end guy?Friday, May 31, 13
  • 52. Why should I bother with CSS?Tables are great! And I already know jQueryScript!Friday, May 31, 13
  • 53. 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
  • 54. The Modern Site, continued...• Transparency• http://leonidas.github.io/transparency/• LESS• http://lesscss.org/• Require.js• http://requirejs.org/• Makefile• http://en.wikipedia.org/wiki/Make_(software)• Jenkins• http://jenkins-ci.org/• git• http://git-scm.com/Friday, May 31, 13
  • 55. Jason, you are crazy...you don’t possibly need to know that much.Friday, May 31, 13
  • 56. O’RLY?YA’RLY!Friday, May 31, 13
  • 57. And we haven’t even discussed• Unit Testing JavaScript• Your Editor of Choice• cron• Web Servers• CacheFriday, May 31, 13
  • 58. And we haven’t even discussed• DI• Software Architecture• Backups• Load Balancing• Security!• and more...Friday, May 31, 13
  • 59. Scared?You shouldn’t be.Friday, May 31, 13
  • 60. There are lots of tools out there.You should learn them.Friday, May 31, 13
  • 61. 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
  • 62. 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
  • 63. Moment.js• Date/Time handler in JavaScript• Easy• Easier than that• And probably easier than that• Learn it!Friday, May 31, 13
  • 64. Backbone.js• A front-end library for developing complex JavaScript Applications• Single Page Applications• Handles communication with API end-points• Maps Models toViews• Learn it!Friday, May 31, 13
  • 65. PHP• ...Friday, May 31, 13
  • 66. 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
  • 67. RabbitMQ• Messaging• Makes complex things difficult• Event-driven• That next step as a developer (remember learning MySQL?)• Learn it!Friday, May 31, 13
  • 68. 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
  • 69. LESS• CSS++• Makes writing CSS much easier• Variables• Mixins• Learn it!Friday, May 31, 13
  • 70. Require.js• AMD - Asynchronous Module Definition• require(‘file.js’);• Write modular JavaScript• Keep things easy to maintain• Learn it!Friday, May 31, 13
  • 71. Makefile• make• DRY• Writing your build steps once• make backup, make test, make css, make js, make site• Learn it!Friday, May 31, 13
  • 72. Jenkins• Automated make!• Build things after you’ve committed• DRY• Logging• Learn it!Friday, May 31, 13
  • 73. 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 existFriday, May 31, 13
  • 74. 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 existFriday, May 31, 13
  • 75. git• If it’s not in version control, it doesn’t exist• Commit early, commit often.• Branch and merge freely• Everyone is using it• Learn it!Friday, May 31, 13
  • 76. gitIf it’s not in git, it doesn’t exist.Friday, May 31, 13
  • 77. Sew what?Pajama pants. That’s what my wife is sewing me.Really.Friday, May 31, 13
  • 78. Should you learn all those things?Yes & No.Friday, May 31, 13
  • 79. The problem you have......has already been solved.If not, you don’t need this talk.Friday, May 31, 13
  • 80. Learn tostand on the shoulder of giants.Friday, May 31, 13
  • 81. Don’t just learn PHPLearn JavaScriptFriday, May 31, 13
  • 82. Learn mobile developmentSo you can attach mobile apps to your PHP applicationsFriday, May 31, 13
  • 83. Learn Twitter BootstrapSo you can focus on the application, and not the design.Friday, May 31, 13
  • 84. LearningWhat would you like to learn next?Friday, May 31, 13