Uploaded byJason Lotito
Twitter Bootstrap, or why being a PHP Developer is a bad idea
The document discusses Twitter Bootstrap, an open-source front-end web development framework. It begins with an introduction to Bootstrap, explaining that it is a front-end framework made up of HTML, CSS, and JavaScript that makes web design and development easy. It then provides examples of basic HTML templates using Bootstrap and demonstrates how to easily create common front-end elements like navigation bars, headers and columns. The document suggests that Bootstrap provides pre-built styles and components that simplify the process of building responsive and mobile-first websites.
More Related Content
Similar to Twitter Bootstrap, or why being a PHP Developer is a bad idea
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Twitter Bootstrap, or why being a PHP Developer is a bad idea
- 1. Twitter Bootstrap or whybeing 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.com Friday, May 31, 13
- 3. Being a RubyDeveloper is a bad idea. Friday, May 31, 13
- 4. Being a PHPDeveloper is a bad idea. Friday, May 31, 13
- 5. Being an iOSDeveloper is a bad idea. Friday, May 31, 13
- 6. Being an AndroidDeveloper is a bad idea. Friday, May 31, 13
- 7. Being a PythonDeveloper is a bad idea. Friday, May 31, 13
- 8. Being a CDeveloper is a bad idea. Friday, May 31, 13
- 9. Be a Developer. That’sa good idea! Friday, May 31, 13
- 10. I want totalk about learning Learning new things... so let’s start by learning something new Twitter Bootstrap! Friday, May 31, 13
- 11. What is Bootstrap? Friday,May 31, 13
- 12. What is Bootstrap? •A front-end framework Friday, May 31, 13
- 13. What is Bootstrap? •A front-end framework • HTML, CSS, JavaScript Friday, May 31, 13
- 14. What is Bootstrap? •A front-end framework • HTML, CSS, JavaScript • Makes web design and development easy Friday, May 31, 13
- 15. What is Bootstrap? •A front-end framework • HTML, CSS, JavaScript • Makes web design and development easy • Easy to learn Friday, 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 use Friday, May 31, 13
- 17. What is aFront-end Framework Friday, May 31, 13
- 18. What is aFront-end Framework • Frameworks Friday, May 31, 13
- 19. What is aFront-end Framework • Frameworks • Toolkits Friday, May 31, 13
- 20. What is aFront-end Framework • Frameworks • Toolkits • Boilerplate Friday, May 31, 13
- 21. What is aFront-end Framework • Frameworks • Toolkits • Boilerplate • Grid Systems (CSS) Friday, May 31, 13
- 22. Why do weneed it? Friday, May 31, 13
- 23. Why do weneed it? • Default, unstyled HTML is fairly ugly Friday, May 31, 13
- 24. Why do weneed it? • Default, unstyled HTML is fairly ugly • I’m not a designer Friday, May 31, 13
- 25. Why do weneed 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 Friday, May 31, 13
- 26. Why do weneed 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 Friday, May 31, 13
- 27. Why do weneed 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. Bootstrap is jQuery forHTML/CSS Friday, May 31, 13
- 29. Where to getit? • http://twitter.github.io/bootstrap/ • Where to get it? • http://twitter.github.io/bootstrap/getting-started.html • Download compiled version Friday, May 31, 13
- 30. What do youget? • css/bootstrap.css • js/bootstrap.js • img/ • glyphicons-halflings.png • glyphicons-halflings-white.png Friday, May 31, 13
- 31. Basic HTML <!DOCTYPE html> <html> <head> <title>Bootstrap101 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>Bootstrap101 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>Bootstrap101 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>Bootstrap101 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? <divclass="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 »</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 »</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> <!-- /container --> Friday, May 31, 13
- 36. <div class="navbar navbar-inversenavbar-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
- 37. <div class="navbar navbar-inversenavbar-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
- 38. <div class="navbar navbar-inversenavbar-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
- 39. <div class="navbar navbar-inversenavbar-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
- 40. <div class="navbar navbar-inversenavbar-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-inversenavbar-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
- 42. The rest ofthe 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> <!-- 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 »</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> <!-- /container --> Friday, May 31, 13
- 43. The rest ofthe 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> <!-- 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 »</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> <!-- /container --> Friday, May 31, 13
- 44. The rest ofthe 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> <!-- 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 »</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> <!-- /container --> Friday, May 31, 13
- 45. The rest ofthe 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> <!-- 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 »</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> <!-- /container --> Friday, May 31, 13
- 46. The rest ofthe 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> <!-- 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 »</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> <!-- /container --> Friday, May 31, 13
- 47. What else canit 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.
- 49. So what? Friday, May31, 13
- 50. So what? How doesthis relate to PHP? Friday, May 31, 13
- 51. What does thismatter? I’m a PHP developer! Not a front-end guy? Friday, May 31, 13
- 52. Why should Ibother 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 arecrazy... you don’t possibly need to know that much. Friday, May 31, 13
- 56.
- 57. And we haven’teven discussed • Unit Testing JavaScript • Your Editor of Choice • cron • Web Servers • Cache Friday, May 31, 13
- 58. And we haven’teven 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 lotsof tools out there. You should learn them. Friday, May 31, 13
- 61. jQuery • Abstracts outcumbersome 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 nicelibrary 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 handlerin JavaScript • Easy • Easier than that • And probably easier than that • Learn it! Friday, May 31, 13
- 64. Backbone.js • A front-endlibrary 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, May31, 13
- 66. MySQL • It’s adatabase! • 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 • Makescomplex things difficult • Event-driven • That next step as a developer (remember learning MySQL?) • Learn it! Friday, May 31, 13
- 68. Transparency.js • JavaScript TemplatingLanguage • 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++ • Makeswriting 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’snot 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
- 74. git • If it’snot 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
- 75. git • If it’snot 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. git If it’s notin 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 learnall those things? Yes & No. Friday, May 31, 13
- 79. The problem youhave... ...has already been solved. If not, you don’t need this talk. Friday, May 31, 13
- 80. Learn to stand onthe shoulder of giants. Friday, May 31, 13
- 81. Don’t just learnPHP Learn JavaScript Friday, May 31, 13
- 82. Learn mobile development Soyou can attach mobile apps to your PHP applications Friday, May 31, 13
- 83. Learn Twitter Bootstrap Soyou can focus on the application, and not the design. Friday, May 31, 13
- 84. Learning What would youlike to learn next? Friday, May 31, 13