HTML5 storage
. A good replacement/enhancement for cookies . Key/value storage – Use JSON.stringify() and JSON.parse() to write/read JavaScript objects – localStorage (no expiration) – sessionStorage (per-session) . indexedDB is a local NoSQL database – JavaScript API . WebSQL supports SQL, but is deprecated CSS3
. Box model . Display types . Inline vs. block . Margin-collapsing . Border images . Layout examples & techniques CSS display types
. The display property is very powerful – Controls the layout algorithm – Determines how the box model is applied – Changes interpretation of alignment . Commonly used display types are – inline, block & inline-block – table, table-cell & table-row (to emulate tables without using table tags) – list-item (activates list behavior) CSS inline vs. inline-block
. A floated inline element will become a block . Vertical padding/margin/border is not reserved for inline elements
inline
inline-block CSS box model
. The CSS box model includes a content box, padding, border and margins. . Padding is inside the border; margin is outside
Div Margin Div Border div Div Padding
P "text" P Context box P Margin CSS margin-collapsing
. Adjacent margins are collapsed; largest one wins . Any intervening padding or border prevents collapse . Use margins instead of padding to avoid this
Collapsed
div div
P "text" P "text" Collapsed P "text" P "text" CSS3 Border images
. Use repeatable graphics or patterns for borders . Handles corners and overlap better than multiple backgrounds . Control positioning vis à vis the border box (inset, outset, width) . Control tiling & stretching
.toc-tab { border-width: 0 55px 47px 10px; border-image: url('tabs/tab.png') 0 55 47 10 stretch; } Layout with tables (1/6)
. In the beginning, there were tables – Tables for layout are confusing (bad semantics) – Little control over layout algorithm . Use CSS to remove all default spacing and padding
table { border-collapse: collapse; MMMM MMMM border-spacing: 0; margin: 0; padding: 0; MMMM MMMM } MMMM MMMM td, th { padding: 0; }
Layout with display: table (2/6) . To use a table layout without table elements, use the display property . This gets the job done, but isn't very fluid and still can't be customized
.table { display: table } .cell { display: table-cell; } MMMM MMMM
MMMM MMMM
MMM…
MMMM MMMM
MMM…
. floats address both semantic and fluidity issues . A block can float to the right or left of inline content . Floats are laid out next to each other, if possible
div { float: left; width: 50% MMMM MMMM } MMMM MMMM
MMM…
MMMM MMMM MMM…
Float layout problems (3/6) . Now we'd like to add padding and borders . The 50% width applies to the content box; padding and borders are added to that width . The naïve approach leads to unwanted wrapping
div { float: left; width: 50%; padding: 10px; MMMM MMMM border: 5px solid black; MMMM MMMM } MMMM MMMM
MMM…
MMM…
MMMM MMMM MMMM Fixing floats in CSS2.1 (3/6) . To fix the sizing issue in CSS2.1, use a nested container . The outer container is assigned a width; padding and border are applied to the nested container
body > div { float: left; width: 50%; } MMM MMM div > div { MMM MMM padding: 10px; border: 5px solid black; MMM MMM } MMM MMM
Fixing floats in CSS3 (3/6) . To fix the sizing issue in CSS3, set the box-sizing – content-box: dimensions are applied to content – border-box: dimensions are applied to content + borders + padding
div { float: left; width: 50%; padding: 10px; MMM MMM border: 5px solid black; MMM MMM box-sizing: border-box; } MMM MMM MMM MMM
MMM…
MMM…
Absolute positioning (4/6) . Absolute position is relative to the nearest positioned parent (or the viewport) . Position values are relative to their respective sides: left: 100% == right: 0
div { padding: 10px border: 5px solid black; MMM MMM box-sizing: border-box; MMM MMM position: absolute; } MMM MMM .A { left: 0 } .B { right: 0 } MMM MMM
MMM…
MMM…
flexbox layouts (5/6) . The flex display type enables vertical or horizontal layout for contained items . Control size (desired/min/max), alignment, wrapping, justification & element order
.O { display: flex } .O div { padding: 10px; MMM MMM border: 5px solid black; MMM MMM } MMM MMM
grid layouts (6/6) . Define rows & columns and place items in them . Supports sizing, spanning, alignment, overlap, etc. . Developed by Microsoft; supported only in IE10
.O { display: -ms-grid; -ms-grid-columns: 50% 50% } .O div { padding: 10px MMM MMM border: 5px solid black; } MMM MMM .B { -ms-grid-column: 2; } MMM MMM
CSS: conclusions . Advanced CSS still requires vendor prefixes . Use http://caniuse.com to determine browser support . A CSS abstraction framework like less is definitely worth a look . CSS frameworks like skeleton or bootstrap may also help jQuery
. Selection & Insertion . Event-handling jQuery selection & insertion
. Select DOM elements – $(selector) gets jQuery objects for the DOM objects corresponding to the given CSS selector – E.g. $('#content') and $('.list > a') . Load elements with $.get(function() {}) . Create & insert elements – $(html ) creates new jQuery objects – Insert with append() , appendTo(), etc. – E.g. $('#content').append($('')) adds a new image to the content element jQuery event-handlers
. Development is highly asynchronous . Set up event handlers – Use CSS selectors to select elements – Hook events with on() or a specific handler – Use $(this) to reference the triggering element – The following example dims links when clicked
$( '.list > a') // Select elements .click(function() // Hook the click event { $(this) // Get reference to triggering element .animate({ opacity: .5 }) // Change opacity to .5 over 400ms (default) }) JSDoc & JSTestDriver
. IDE overview . Browser tools . Deployment . JSDoc . JSTestDriver IDE Tools
. JetBrains WebStorm is well worth the $99 – Code navigation & search – JavaScript & CSS refactoring – JavaScript debugging – JSDoc for type-hinting – JSTestDriver for unit-testing Browser tools
. Chrome & Safari – DOM viewer and editor – JavaScript debugger – JavaScript profiler – CSS profiler (find expensive selectors) – Storage/cache viewer . iOS Safari debugging/analysis – Includes a rendering/layout profiler – Requires OS X Safari (i.e. a Mac) Type-hinting with JSDoc
. JavaScript is hard to navigate & refactor reliably . Use type-hinting to enhance IDE capability . Document methods, fields and even local variables . Use [] for arrays and a trailing = for optional values
/** * @param {string} url The url for which to create a topic. * @param {SearchMatch=} match The optional match to use. * @return Topic */ createTopic: function(url, match) { /** @type {RawTopicData[]} */ var localData = externalData; } Testing with JSTestDriver
. WebStorm includes a plugin and syntax support . Define tests as descendants of TestCase . JSTestDriver.conf: lists tests and support files . Start the JSTestDriver server . Capture one or more browsers . Run or debug; it’s that simple!
TestCase("AutoCompleteEngineTest", { "test auto complete empty": function() { var engine = new AutoCompletion(); var suggestions = engine.getSuggestions(""); assertEquals(0, suggestions.length); }); Conclusions
. Web development is better than ever . CSS3/HTML5 is good enough to write clean code . jQuery is a really solid API . WebStorm is nearly indispensable . IE has gotten quite good, but is still the weakest link
