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
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
Bootstrap Twitter Front-end Summit September 27, 2011 Wednesday, September 28, 2011
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
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
Stats 7,000+ watchers 1,000+ forks 418,500+ page views (since mid August) 250+ issues closed Wednesday, September 28, 2011
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
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
What about using those other feature complete toolkits out there? Wednesday, September 28, 2011
Turns out many toolkits are built to provide value at only the base level: scaffolding. Wednesday, September 28, 2011
Wednesday, September 28, 2011
Wednesday, September 28, 2011
Others have a different problem: no visibility into exactly what the toolkit provides. Wednesday, September 28, 2011
Wednesday, September 28, 2011
Wednesday, September 28, 2011
So Bootstrap was born as a fresh take on an existing idea. Build a toolkit based on a complete styleguide. Wednesday, September 28, 2011
Wednesday, September 28, 2011
But, that s looking like the other toolkits. Well, let s look again... Wednesday, September 28, 2011
Wednesday, September 28, 2011
Wednesday, September 28, 2011
So, in what ways does Bootstrap stand out? Well, to name a few... Wednesday, September 28, 2011
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
Made with variables in Less 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Links @linkcolor: #0069d6; @linkcolorhover: darken(@linkcolor, 15); // Grays @black: #000; @graydark: lighten(@black, 25%); @gray: lighten(@black, 50%); @graylight: lighten(@black, 75%); @white: #fff; // Baseline grid @basefont: 13px; @baseline: 18px; Wednesday, September 28, 2011
Reusable mixins via Less 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Border Radius.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } // Font stacks.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: @size; font-weight: @weight; line-height: @lineheight; } Wednesday, September 28, 2011
Includes flexible grid system 16 column grid (support up to 24) Customizable variables via LESS 1 2 3 @gridcolumns: 16; @gridcolumnwidth: 40px; @gridgutterwidth: 20px; Wednesday, September 28, 2011
Awesome documentation Wednesday, September 28, 2011
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
But what's a great framework without ease of use in the real world? Wednesday, September 28, 2011
Hotlink like a boss 1 2 <!-- Le styles --> <link href="http://twitter.github.com/bootstrap/1.3.0/ bootstrap.min.css" rel="stylesheet"> Download and use locally 1 2 3 <!-- 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
Compile Less in the browser 1 2 3 <!-- 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
Sounds great. What s coming next? Wednesday, September 28, 2011
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
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
pkg mgmt w/ Ender
Who? @FAT - github.com/fat @DED - github.com/ded
What? a package manager for the frontend
What? cli + optional client lib
What not? not just a JavaScript library
What not? not only for microlibs
What not? not just npm
How? uses the npm network $ ender build underscore
How? combines packages into single resource
How? a familiar api var _ = require('underscore') $.extend({}, {... })
5 things module.exports
!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)
5 things dependency management $ ender build backbone
5 things ender info $ ender build jeesh backbone $ ender info
Welcome to ENDER - The no-library library ----------------------------------------- Your current build type is "build" Your current library size is 31.6 kb Active packages: jeesh@0.0.6 - The official starter pack for Ender. domready@0.2.10 - bullet proof DOM ready method qwery@2.2.5 - blazing fast CSS3 query selector engine bonzo@0.7.0 - Library agnostic, extensible DOM utility bean@0.2.7 - an events api for javascript backbone@0.5.3 - Give your JS App some Backbone... underscore@1.1.7 - JavaScript's functional programming...
5 things ender search $ ender search events
Ender tagged results: -------------------------- + events.node - Node.JS events module (packaged for Node.JS and Ender.JS) by @coolaj86 + bean - an events api for javascript by @ded & @fat NPM general results: (5 of 46) -------------------------- + events - Node's event emitter for all engines. by @gozala
5 things package.json
{ } "name": "jeesh", "description": "The official starter pack for Ender.", "version": "0.0.6", "authors": ["Dustin Diaz <@ded>", "Jacob Thornton <@fat>"], "keywords": ["ender", "jeesh"], "homepage": "https://github.com/ender-js/jeesh", "dependencies": { "domready": "*", "qwery": "*", "bonzo": "*", "bean": "*" }
get involved ender.no.de github.com/ender-js