Front End Summit - Sep 27th

Transcription

1 Front End Summit - Sep 27th Twitter Front End Summit Tuesday, September 27th, 2011 Featured Speaker: Andreas Gal of Mozilla PDFs are traditionally rendered using native code plugins. Often enough, those native code viewers turn into unintentional native code execution platforms. Andreas Gal will talk about Mozilla's PDF.js, a pure JavaScript PDF renderer. Flashy demos aside, the talk will focus on performance tricks the Mozilla team used to make PDF rendering fast (we just-in-time compile PDF content!), report on limits of the canvas API, and detail how we plan to fix those since we conveniently also make a popular browser: Firefox. Andreas Gal is a researcher at Mozilla, working on JavaScript and Web research. He previously worked as a project scientist at the University of California, Irvine, working in the Secure Systems and Languages Laboratory of Professor Michael Franz. Gal's background is in secure systems, type-safe languages, dynamic compilation, and virtual machines. Twitter Speaker: Mark Otto (@mdo) on Bootstrap About Bootstrap: Bootstrap is a toolkit from Twitter designed to kickstart front-end development of web apps and sites. It's a solid and constantly growing library that includes all the essential and well-designed HTML, CSS and javascript you need for any project. Bio: Mark has been a product designer at Twitter since early 2010, working primarily with other designers and engineers on the Twitter Web and Revenue Teams. Bootstrap represents over 8 years of experience designing and coding with CSS and HTML to help build great products online. Twitter Speaker: Jacob Thornton (@fat) on Ender Home dev.twitter.com/engineering/tech-talks/front-end-summit 24 May 2013

2 About Ender: Ender is a full featured package manager for your browser. It allows you to search, install, manage and compile front-end javascript packages and their dependencies for the web. Ender isn't a javascript library. It's not a jquery replacement. It's not even a static asset. It's a tool for making the consumption of front-end javascript packages dead simple and incredibly powerful. Bio: Jacob works at Twitter. He writes javascript and has worked on the mootools team, ender, and most recently bootstrap. He can teach you how to dougie. Home dev.twitter.com/engineering/tech-talks/front-end-summit 24 May 2013

3 Bootstrap Twitter Front-end Summit September 27, 2011 Wednesday, September 28, 2011

4 Oh hai, I m Otto. Designer at Twitter since 2010 Love HTML and CSS Been at it for 10+ years Find me online: twitter.com/mdo github.com/markdotto Wednesday, September 28, 2011

5 Let s talk about Bootstrap. Stats What is it Why we made it What s awesome about it How to use it Future plans Wednesday, September 28, 2011

6 Stats 7,000+ watchers 1,000+ forks 418,500+ page views (since mid August) 250+ issues closed Wednesday, September 28, 2011

7 What is it? Open-source frontend toolkit HTML, CSS, and now JS Super small footprint (CSS is ~7kb) Supported in IE7 and up Designed as a complete styleguide Boatload of design patterns Built on Less CSS Wednesday, September 28, 2011

8 Bootstrap was created to solve a real problem. Our tools didn t look or behave consistently and were difficult to develop. Wednesday, September 28, 2011

9 What about using those other feature complete toolkits out there? Wednesday, September 28, 2011

10 Turns out many toolkits are built to provide value at only the base level: scaffolding. Wednesday, September 28, 2011

11 Wednesday, September 28, 2011

12 Wednesday, September 28, 2011

13 Others have a different problem: no visibility into exactly what the toolkit provides. Wednesday, September 28, 2011

14 Wednesday, September 28, 2011

15 Wednesday, September 28, 2011

16 So Bootstrap was born as a fresh take on an existing idea. Build a toolkit based on a complete styleguide. Wednesday, September 28, 2011

17 Wednesday, September 28, 2011

18 But, that s looking like the other toolkits. Well, let s look again... Wednesday, September 28, 2011

19 Wednesday, September 28, 2011

20 Wednesday, September 28, 2011

21 So, in what ways does Bootstrap stand out? Well, to name a few... Wednesday, September 28, 2011

22 A boatload of design patterns Scaffolding Grid system Fixed-width layout Fluid-width layout Typography Headings Body text Blockquotes Lists Code Inline labels Misc components Media thumbnails Tables Forms Buttons Navigation Fixed topbar Tab nav Pill nav Breadcrumbs Pagination Alerts Basic alert messages Block messages Dialogs Modals Popovers Tooltips Wednesday, September 28, 2011

23 Made with variables in Less // darken(@linkcolor, 15); // lighten(@black, lighten(@black, lighten(@black, #fff; // Baseline 18px; Wednesday, September 28, 2011

24 Reusable mixins via Less // Border Radius.border-radius(@radius: 5px) { } // Font stacks.sans-serif(@weight: 20px) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } Wednesday, September 28, 2011

25 Includes flexible grid system 16 column grid (support up to 24) Customizable variables via LESS px; Wednesday, September 28, 2011

26 Awesome documentation Wednesday, September 28, 2011

27 New javascript plugins Included plugins... Modals Popovers Alert messages Dropdown menus Scrollspy for nav Tabbed content Twipsy tooltips Compatible with jquery and Ender Comes with extensive docs and examples Wednesday, September 28, 2011

28 But what's a great framework without ease of use in the real world? Wednesday, September 28, 2011

29 Hotlink like a boss 1 2 <!-- Le styles --> <link href=" bootstrap.min.css" rel="stylesheet"> Download and use locally <!-- Le styles --> <link href="css/bootstrap/1.3.0/bootstrap.min.css" rel="stylesheet"> <link href="css/yours/style.css" rel="stylesheet"> Wednesday, September 28, 2011

30 Compile Less in the browser <!-- Le styles --> <link href="path/to/bootstrap.less" rel="stylesheet/less"> <!-- Le javascripts --> <script src="path/to/less.js"/></script> Compile via Node or Terminal $ $ npm install less make $ lessc./lib/bootstrap.less > bootstrap.css Wednesday, September 28, 2011

31 Sounds great. What s coming next? Wednesday, September 28, 2011

32 On our roadmap More HTML5 elements Additional table styles Media queries Sidebar nav for fluid layout Fullscreen layout Growl style alerts Rounded buttons Module components Additional blockquote styles HTML5 forms Alternate topbar styles for fixed or relative display Custom skins Toggle buttons Fluid grid system Font-face mixins Anything else? File an issue on GitHub! Wednesday, September 28, 2011

33 Thanks! twitter.github.com/bootstrap Find us online: twitter.com/twbootstrap twitter.com/mdo twitter.com/fat github.com/twitter/bootstrap Wednesday, September 28, 2011

34 pkg mgmt w/ Ender

35 - - github.com/ded

36 What? a package manager for the frontend

37 What? cli + optional client lib

38 What not? not just a JavaScript library

39 What not? not only for microlibs

40 What not? not just npm

41 How? uses the npm network $ ender build underscore

42 How? combines packages into single resource

43 How? a familiar api var _ = require('underscore') $.extend({}, {... })

44 5 things module.exports

45 !function () { var module = { exports: {} }, exports = module.exports!function () { // your package here... module.exports = 'draw me like one of your french girls' }() }() provide('snorlax', module.exports)

46 5 things dependency management $ ender build backbone

47 5 things ender info $ ender build jeesh backbone $ ender info

48 Welcome to ENDER - The no-library library Your current build type is "build" Your current library size is 31.6 kb Active packages: jeesh@ The official starter pack for Ender. domready@ bullet proof DOM ready method qwery@ blazing fast CSS3 query selector engine bonzo@ Library agnostic, extensible DOM utility bean@ an events api for javascript backbone@ Give your JS App some Backbone... underscore@ JavaScript's functional programming...

49 5 things ender search $ ender search events

50 Ender tagged results: events.node - Node.JS events module (packaged for Node.JS and Ender.JS) + bean - an events api for javascript NPM general results: (5 of 46) events - Node's event emitter for all engines.

51 5 things package.json

52 { } "name": "jeesh", "description": "The official starter pack for Ender.", "version": "0.0.6", "authors": ["Dustin Diaz <@ded>", "Jacob Thornton <@fat>"], "keywords": ["ender", "jeesh"], "homepage": " "dependencies": { "domready": "*", "qwery": "*", "bonzo": "*", "bean": "*" }

53 get involved ender.no.de github.com/ender-js