#Week 1
ALL WORK IS DONE IN PAIRS OR GROUPS
===================================
GIT + GITHUB
===================================
how to navigate computers via terminal
how to pimp our terminals
how to pimp sublime text
how to use snippets + reduce typing in sublime text
how to use github via the terminal
how to create aliases in terminal
how to setup GIT bash autocompletion
how essential pair programming is to success
write all blogposts on github gists using markdown
HTML5
===================================
all the new features in HTML5:
*geolocation
*aria roles
*local storage
*app cache
*camera access
*IndexDB
*performance
how to write semantic HTML5 document
how 99% of websites do not have HTML5 markup
how google seo ranking is easily increased IF...you write semantic html
how the big browsers boys (apple, google, microsoft firefox, opera) basically forced their vision upon the W3C
html5 architecture and the reason behind each line being included in html5 boilerplate
html5 form validations
the importance of html5 sectioning elements
the importance of appcache appcache appcache
HTML stripped of its non-semantic parts should remain meaningful to robots
if you do not write semantic html:
*you end up paying google out of your pocket so you can show up in search engines
*this is true and it happened to getty images before our instructor freaked out at them
HAML
===================================
documentation for html compiler for ruby
how to convert semantic HTML5 to haml
JADE
===================================
documentation for html compiler for node
how to convert semantic HTML5 to jade
TOOLS
===================================
Chrome extension page speed insights
html5 validator
html5 outliner
html5test.com
jade 2 html
ReTxt
Haml 2 html
Mou
CONCEPTS + QUOTES OF THE WEEK
===================================
'node is to javascript as rails is to ruby'
#Weekend 1
EXPLORED CITY
==================================
took sweet instagram pics
SUGGESTIONS
==================================
friday night pizza party + social gathering event to bring together class
#Week 2
STYLE TILES
===================================
how much easier it is to communicate conceptual designs with clients using tiles
iteration is fluid + quick
WIREFRAMING
===========
how to present information architecture
illustrate wirefram IA in simple techniques
the importance of test driven design
implementing short development cycles
module deisgns + UI patterns
aka why full comps are epic fails
aka why most designers waste time on fluff
aka why we should aim for simple designs
akak how to cut out b/s
how to use graphviz + make .dot files
why programmers will wuv working w/ you if you use .dot files
STYLE GUIDES
===================================
how to build an interface style guide
why you need style guide driven development
how style guides are harmounious to coordinating international branding efforts
in style guide driven design, ESSENTIAL process of developing UIs that MUST be self documented
how to make your code reusable, scaleable and easy to edit // HAML + SASS will be key
elements, patterns + modules are elements for success
CSS
===================================
smaccs aka smacks - scalable and modular architecture for css
how to calculate a selectors specificity
how inheritance takes place in the DOM tree
the apparent simplicity of css is deceptive
the fundamental of importance, specificity + source order
specificity + stars wars by andy clarke
use generic selectors
inheritance is a way of propagating property values from parent elements to their children
not all properties are inherited but /inherit/ can be forced upon the children
the difference in speed between an ID + a class is almost totally irrelevant
the least efficient CSS selectors by order
*#ID
*.classes
*Type | <div>
*Adjacent siblings | h2 + p
*Child | li > ul
*Descendant | ul a
*Universal | *
*Attribute | [type="text"]
*Pseudo-classes/-elemetnts | a:hover
more efficient for browser to start at the right-most element (the one it knows it wants to style) + work its way up DOM tree
v. start high up the DOM tree and take a journey down
oocss - object oriented css
*good css is easier to read, keeps files lightweight, makes css reusable
*3 steps : reset, order, dry up
*always use meyer.css + normalize.css + include as separate files
*95% of normalize is written to deal w/ IE
*order matters : application.css > normalize.css > base.css
*group your css to refelct flow of website
review of css selectors
review of the box model
paul irish on box-sizing / border-model ftw
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
review of inline blocks, floats, positioning
the importance of grid systems
advanced positioing + background positioning + using multiple backgrounds
the basics of css blends modes + why is will be the next big thing in design
css sprites are a huge pain but you must learn them young grasshoppah
how the calc() function can replace javascript in some cases
the css content property
introduction to flexbox
introduction to the box-ordinal-technique | where adaptive design collides with responsive
ASSETS
===================================
Icon-fonts are pretty awesome but can be a headache
HAML + SASS can reduce the pain
how to maintain ico-font documentation
DPI is meaningless on the web
what really matters is the height + width of image
images should be 2X the size you want them to appear
pixel size matters most as retina displays always start w/ art @ 2x normal size for display purposes
use heavy compression, especially w/ .jpg
use html or css to reduce size of asset
the picture element + be aware of its future applications
SVGs aka Scalable Vector Graphics are small, scale, retina ready
for data visulation D3 is what you want to marry
points are used in print + will only be used on printable pages
transitions and animations
media queries
asset downloading results
RESPONSIVE DESIGN
================================
fluid grids, flexible images + media queries
the difference btwn "being responsive" + responsive design
future friendly as screens + wearables + the IoT begin to explode
responsive design will not fix your content problem
progressive enhancement
aka content is king
aka does it adapt to the screen
aka does it take advantage of capabilties
aka is it accessible everywhere
knowing where you need to add or subtract content based on break points
design for content >>>>>>>>> everything
typography 1st
viewport sized typography
use grids
why you need to design in the browser
how to design a responsive website in a group
media queries speeds are the basically same regardless of combining or separating sytlesheets
research on MQ: http://aaronjensen.github.io/media_query_test/
LESS INTRO
==================================
do not use it
SASS > less
SASS INTRO
==================================
sassmeister.com
TOOLS
===================================
960.gs
skeleton.css
caniuse.com
fontsquirrel.com
humanstxt.org //we are people not machines
icomoon.io
toadstool
sassmeister
D3 Tutorials by Scott Murray
chrome mobile emulator
chrome extentsion viewport resizer
chrome extension what font
CSS Test Creator
CONCEPTS + QUOTES OF THE WEEK
===================================
'f**k pixels'
'thou shall not style guide'
#Weekend 2
STARTUP WEEKEND SEATTLE
==================================
encouraged to go
went with two other classmates
had a blast
created www.getspur.co
won 2nd place
won best design
ate so much
slept so little
SUGGESTION
==================================
buy tickets so all code fellows students attend
partner with startup weekend to have an event with code fellows students + desinger community