More Javascript nuggets

The web weekly newsletter

Gruntism http://joshrouwhorst.com/gruntjs-video-tutorial/ or http://www.benfarrell.com/2013/07/25/gruntjs-for-those-with-shit-to-do/

http://www.hongkiat.com/blog/deal-create-responsive-email/

http://tech.pro/tutorial/1669/21-javascript-parts-i-struggle-to-remember-

http://eloquentjavascript.net/2nd_edition/preview/

http://www.kickstarter.com/projects/getify/you-dont-know-js-book-series

http://www.prism.washington.edu/lc/CLWEBCLB/syllabus.html


http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

http://stackoverflow.com/questions/10968962/hasownproperty-vs-propertyisenumerable

http://jqfundamentals.com/legacy

http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

http://www.funnyant.com/choosing-javascript-mvc-framework/

A Html5 Class

I stumbled across this web site and it looked like a great class.

http://aaltowebapps.com/

The class has all sorts of examples you can run such as Storage and Offline API, Templating with Handlebars, CSS Media Queries, and more. The example code is on GitHub too.

Lectures:

Mobile Web Appplications Development with HTML5 part 1
JQuery Mobile [examples]
Mobile Web Appplications Development with HTML5 part 2
Mobile Web Appplications Development with HTML5 part 3
Mobile Web Appplications Development with HTML5 part 4 [backbone] [Canvas/Device] [web sockets] [css3] [rest]

Other talks: http://aaltowebapps.com/talks.html - https://github.com/clody69

http://gitref.org/
www.html5rocks.com
www.htmlfivewow.com
chromestatus.com caniuse.com
http://mobilehtml5.org/

Responsive Web Bootcamp with Jonathan Stark

Responsive web design

Responsive web design tutorial (slides)

Layout, images, content

Not just desktop world need to display on multi devices - explosion screen resolutions and ratios

High resolution displays, lower bandwidth displays - media queries to detect browser width, device with, pixel density

Layouts:

• Proportional Sizing - percentage based layout 
• 'adaptive' content - see additional elements as screen real estate increases

Performance and expect page to load quickly is expectation Responsive means revenue - example O'Neill clothing

Universalmind.com responsive web site - resize and layout changes
Microsoft.com is responsive - sidebar moves to top
Boston Globe one of first responsive  sites

Ethan Marcotte - article at a List Apart  on responsive design May 2010 : Not appropriate to write separate site for different devices,  Fluid grids (poportional instead of working with fixed size, scale across different devices),  Flexible images  (flex to size of view port, serving up different sized  images based on device or screen)

based on size List a Part article on responsive design , Use of media queries to accomplish this - Mobile first design (core elements) - viewport scales out , additional content added . Detect browser width, detect aspect ratio, screen or print, with print some features hidden
http://reference.sitepoint.com/css/mediaqueries#mediaqueries__tbl_media-queries_media-features

http://www.ibm.com/developerworks/library/wa-cssqueries/#resources

rule if screen is 480px :

@media screen and (min-width :480px) {}

load different style sheet based on width

Here we scale out to 980px if mobile device with view meta tag (scale is zoom factor)
<meta name="viewport" content="width-device-width, initial-scale=1.0" >

Some sites turn off the scaling feauture

Even if you CSS display of none, the items still exist in DOM but not viewable

ie does not support media queries prior to ie9

@media query Style sheet based on ie version  (known as conditional comments)

<!-- [if lt IE 9]-->

For browsers that do not support media queries, See respond.js can use min with and max width

media query from javascript using window.matchmedia. also window.innerwidth, and window.devicePixelRatio


Responsive Layouts (porportional sizing) - think in percentages of layout, adaptive content, divide grid into block (i.e twelths) frameworks bootstrap 3, Others include Zurb, 320 and Up..rock hammer

Flex box html5 for responsive layout - layout either horizontally or verticaly , verticaly centering

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ie10 Grid kit tool set Responsive images

Codepen.io

Grid Layout

http://bradfrost.github.io/this-is-responsive/patterns.html

http://bradfrost.github.io/this-is-responsive/resources.html

http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

http://www.sitepoint.com/books/responsive1/

Bootstrap 3

Bootstrap 3

Update: http://www.stevekeator.com/slides-examples-and-video-from-my-bootstrap-presentation/

http://getbootstrap.com/getting-started/

20 CSS components

Less variables

Light weight - 119K for framework

Better UI control

Twitter is where it originated

Ie8/9 CSS downgrades

Get bootstrap.org

https://github.com/twbs/bootstrap

Responsive grid:

grid system has12 columns , split them up however you want to, offsetting, nestable

Bootstrap 3 completely redeveloped mobile first

Wrap in container CSS class  , then. Row

<div class ="container">
<div class = "row">
<div class ="col-lg-6"></div> <div class ="col-lg-6"></div>

4 basic snap points

• Computers lg
• tablets landscape sm
• tablets portraits med
• Cell phone xs

Offet can add into your class


Examples.bootstrp.com/grid/

.visible

.hidden

.sr-only

.visible-print

.hidden.print

Bootstrap typography examples

H1, H2

.lead class for paragraphs

Blockquotes

Emphasis class helpers

-success

- warning

Ordered lists, unordered lists,

Code element

Pre element

Table class , table-striped

Condensed padding

Contextual row classes

Buttons , disabled state

Forms .form-group

form-inline


Element states

Doesn't play well with JQuery validation

Element sizes

divshot.com

http://getbootstrap.com/customize/