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

1. Twitter Bootstrap or 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.com Friday, May 31, 13

3. Being a Ruby Developer is a bad idea. Friday, May 31, 13

4. Being a PHP Developer is a bad idea. Friday, May 31, 13

5. Being an iOS Developer is a bad idea. Friday, May 31, 13

6. Being an Android Developer is a bad idea. Friday, May 31, 13

7. Being a Python Developer is a bad idea. Friday, May 31, 13

8. Being a C Developer is 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 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 a Front-end Framework Friday, May 31, 13

18. What is a Front-end Framework • Frameworks Friday, May 31, 13

19. What is a Front-end Framework • Frameworks • Toolkits Friday, May 31, 13

20. What is a Front-end Framework • Frameworks • Toolkits • Boilerplate Friday, 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 ugly Friday, May 31, 13

24. Why do we need it? • Default, unstyled HTML is fairly ugly • I’m not a designer Friday, 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 with Friday, 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 • IE Friday, 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. Bootstrap is jQuery for HTML/CSS Friday, 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 version Friday, May 31, 13

30. What do you get? • css/bootstrap.css • js/bootstrap.js • img/ • glyphicons-halﬂings.png • glyphicons-halﬂings-white.png Friday, 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">  <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 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

36. <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

42. The rest of the page... <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

47. 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

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/ • Makeﬁle • 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 • Cache Friday, 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 difﬁcult • 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 Deﬁnition • require(‘ﬁle.js’); • Write modular JavaScript • Keep things easy to maintain • Learn it! Friday, May 31, 13

71. 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

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 exist Friday, 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 exist Friday, 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. git If 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 to stand on the shoulder of giants. Friday, May 31, 13

81. Don’t just learn PHP Learn JavaScript Friday, May 31, 13

82. Learn mobile development So you can attach mobile apps to your PHP applications Friday, May 31, 13

83. Learn Twitter Bootstrap So you can focus on the application, and not the design. Friday, May 31, 13

84. Learning What would you like to learn next? Friday, May 31, 13

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

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

Ähnlich wie Twitter Bootstrap, or why being a PHP Developer is a bad idea (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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