Skip to content

dfritsch/headjs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Head JS

This project was never announced. git push and it was all viral.

##About

  • Load scripts and css on demand
  • Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers
  • Detect various browsers and their features
  • Target HTML5 and CSS3 safely
  • Make it the only script in your HEAD
  • A concise solution to universal problems

##Where

##Updates

###0.99 / 2012-11-15

- Load: Fixed regression in IE6, caused by IE10 fix
- Load: CSS loading seems to work in all browsers.
	- However a few will not trigger the callback. Over 90% do.
	- For now only load css in situations where you don't need the callback triggered.
	- head.load("file1.css", "file2.css")
- Load: Conditional loading with head.test() now in evaluation phase
	- try it, but don't rely on it yet
	- head.test(bool, "ok.js", "failed.js", callback)
- All: CDN is now availiable thanks to: http://cloudflare.com
	- Info in download section on main site
- Unit Tests
	- Integrated with main site so that everyone can participate
	- They have also been hooked up to automatically report stats back to http://browserscope.org

###v0.98 / 2012-11-09

- Load: Fixed loading bug in IE10
- Load: Corrected some issues with loading from inside <head>
- Load: Rewrite of large parts of code base
  - Started to massively document the sourcecode :)
- Load: Test Only (css loading)
  - You can now load CSS files with head.load("somefile.css")
  - Consider this as under testing
  - head.load is an alias to head.js
- Css3: moved "touch" detection from core to here
- Css3: added "retina" detection
- Css3: replaced "font-face" detection that was using "Conditional Comments" with simplisitc browser version detection
- Core: Added gt, gte, lte, eq classes to width detection (lt existed already)
- Core: Added gt, gte, lt, lte, eq classes for browser vendor & version detection
- By default only lt/gt classes are activated
  - You can of course configure to your likings via head_conf

###RoadMap (v1.0 / v2.0) 2012-11-06

- Conditional Loader
  - head.test(bool, success, failure, callback)
- Resource Loading
  - head.load(somefile.js , callback)
  - head.load(somefile.css, callback)
- Advanced Responsive Design
  - Take into account browsers min/max versions & height/width pseudo media queries (lt, lte, eq, gt, gte)
  - .ie-lt6, .ff-gte17, .w-lt1024, .h-gte800
- Inverse naming conventions for readability & to be able to programatically inject values more easily
  - .no-box-shadow -> .box-shadow-true/false
	- jQuery(selector).addClass("box-shadow-" + head.features.boxShadow)
	- class="localStorage-<%= bool.toString().toLower() %>"
  - .no-ie -> .ie-true/false
  - .index-page -> .page-index
- Advanced Configuration  
  - Expose a maximum of functionalty through head_conf, so you only get the functionality you actually require
    - Enable/Disable lt/gt class generation
    - Enable/Disable height/width support
    - Configure custom height/width/browser breakpoints 
    - ..etc
- Remove tests from css3.js and let users "roll their own"
  - 80% of css related tests are probably irrevelant anyways
    - For things like border-radius & the likes everyone uses gracefull degradation with their css anyways ..right ? :)
- Renaming files
  - head.responsive.js (can be used standalone)
    - old core.js with a few additions from css3.js so we can externalise the test suite
  - head.load.js (can be used standalone)
    - old load.js
  - head.features.js (MUST be used with head.responsive.js)
    - old css3.js, but now only integrates actual tests	  
- Revamped website with Twitter Bootstrap
  - Make the site a tad more ergonomic to navigate
  - Expose unit tests & advanced documentation directly in site
  - Custom "roll-your-own" builder
  - Integrate website with gh-pages for quicker deploy

How much of this roadmap will end up in the current version of head.js, i don't know yet.

  • Most likely when v1.0 comes out, it will have a good part of the above functioanlity included while at the same time preserving the existing api syntax.
    • Like this, those that already depend on HeadJS get no breaking changes.
  • At the same time there will probably be a v2.0 release that uses the above syntax, and be the defacto version for future development.

P.S. 70% of the preliminary work mentioned above is already done :)

###v0.97a / 2012-10-20

- Updated QUnit &amp; got unit tests running again
- Swictched to "use strict"
- Fixed up some variable usages
- Added browser detections other than just for ie-lt
- updated browser regexes (firefox, safari, opera, ios, android, webkit)
- detect if browser is: desktop, mobile, touch enabled
- detect portrait/landscape mode
- html5 shim now only triggers on ie-lt9
- added a throttle to onResize, since some browsers fire tons of events/sec
- added corrected height/width measurements, but only exposed via new object: head.screen
  - contains height/width, innerHeight/innerWidth, outerHeight/outerWidth
- forced all css router names to lowercase just in case ppl type in url's with wierd casings

About

The only script in your HEAD.

Resources

Stars

Watchers

Forks

Packages

No packages published