Thursday, August 20, 2015

css floating

THE RULES OF FLOATS

float: left | right | inherit | none

1 - a floated element is “invisible” to its parent
2 - a left/right floated element will try to be as close to the top and left/right of its parent element as possible
3 - previously defined elements will push a floated element down
4 - a previously declared floated element will be given a more preferable position
5 - a position closer to the top of the parent element is preferred to a position closer to the left/right of the parent element
6 - a floated element should not extend outside its parent element
7 - clear/clearfix - the clearing element’s top edge must be below any left floated elements’s bottom edge

Hats off to this blog author for clear explanation and basic review
http://bitsofco.de/2015/how-floating-works/

css specificity

  • Elements and pseudo-elements (`a, div , body, :before, :after`) get a score of 1
  • Classes and attribute selectors (`.element, [type=”text”]`) get a score of 10
  • IDs (`#header`) get a score of 100
  • Inline styles get a score of 1000
  • `!important` gets a score of NaN (it’s more “specific”/powerful than even inline styles, and can only be overridden by the cascade — writing rules later in the stylesheet)
http://cssspecificity.com/

Friday, August 14, 2015

Baseline for front-end developers

http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
Javascript
Git
Modularity, dependency management, and production builds
In-Browser Developer Tools
The command line
Client-side templating
CSS preprocessors
Testing (Jasmine/Mocha)
Process automation (rake/make/grunt/etc.)
MDN (The fine manual)

http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/
Javascript (ES6, BabelJS)
Modules & Build Tools (AMD, requirejs, browserify, systemjs)
Testing (Karma, Intern)
Process Automation (Grunt, Gulp, Yeoman, Broccoli)
Code quality (ESlint, JSCS)
Git
Client-Side Templating
Node (MEAN, express)