-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
895 lines (842 loc) · 75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
<!doctype html>
<html class="no-js" itemscope="itemscope" itemtype="http://schema.org/WebApplication" lang="en">
<head>
<meta charset="utf-8" />
<title>HeadJS, the only script in your <head></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="google-site-verification" content="pqzn85yrum0AY6ugIrX0zoIEazSHL9p09us5yvHwZqw" />
<meta itemprop="description" name="description" content="Load scripts and stylesheets 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." />
<meta itemprop="keywords" name="keywords" content="loader,polyfill,feature detection,responsive design,css3,html5" />
<meta itemprop="dateModified" content="2012-11-22" />
<meta itemprop="softwareVersion" content="0.99" />
<meta itemprop="releaseNotes" content="https://raw.github.com/headjs/headjs/master/changelog.txt" />
<meta itemprop="fileFormat" content="application/javascript" />
<meta itemprop="image" content="http://headjs.com/media/img/logo-small.jpg" />
<meta itemprop="thumbnailUrl" content="http://headjs.com/media/img/favicon.png" />
<meta itemprop="isFamilyFriendly" content="true" />
<!-- include the stylesheet after headjs -->
<link rel="stylesheet" type="text/css" href="media/css/html5.min.css" />
<link rel="stylesheet" href="media/css/style.min.css" />
<link rel="icon" type="image/gif" href="media/img/favicon.png" />
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20001309-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['b._setAccount', 'UA-15567888-4']);
_gaq.push(['b._trackPageview']);
function trackPageView(page) {
_gaq.push(['_trackPageview' , page]);
_gaq.push(['b._trackPageview', page]);
}
</script>
<script src="media/libs/headjs/0.99/head.min.js"></script>
</head>
<body>
<span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer"><meta itemprop="price" content="0.00"/></span>
<a href="http://github.com/headjs/headjs" onclick="trackPageView('github.com')">
<img id="fork" alt="Fork me on GitHub" src="media/img/forkme.png" />
</a>
<div id="wrap">
<nav>
<a href="#highlights">highlights</a> •<a href="#theory">theory</a> •<a href="#usage">usage</a> •<a href="#api">api</a> •<a href="http://www.i-technology.net/search/label/headjs" target="_blank">blog / news</a> •<a href="#download">download <strong>(v 0.99)</strong></a>
</nav>
<div id="hero">
<h1 itemprop="name">Head<em>JS</em></h1>
<h2>The only script in your <HEAD></h2>
<h3>A tiny script that simplifies, speeds up, and modernizes your site</h3>
<p>
Load scripts and stylesheets 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.
<br />
Make it the only script in your HEAD.
A concise solution to universal problems.
<a href="#theory">« the theory »</a>
</p>
</div>
<div id="content" class="clear">
<h1>Highlights</h1>
<section id="highlights">
<article>
<h2>JavaScript Loader</h2>
<p>
Load scripts in parallel but execute in order.
<p>No WEB 2.0 site would work without all the nice scripts we are injecting into our pages today.</p>
<figure class="code">
<div class="highlight">
<pre><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"/path/to/jquery.js"</span><span class="p">,</span> <span class="s2">"/google/analytics.js"</span><span class="p">,</span> <span class="s2">"/js/site.js"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /> <span class="c1">// all done</span><br /> <br /><span class="p">});</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<p>
Head <span class="caps">JS</span> loads JavaScript files in parallel like images without <em>blocking</em> the page. Your
page will be faster. Even with a single combined file.
</p>
</article>
<article>
<h2>JavaScript Organizer</h2>
<p>
You’ve read the books and placed <span class="caps">SCRIPT</span> <span class="caps">SRC</span> tags on the bottom. Good. But can
you do this?
<figure class="code">
<div class="highlight">
<pre><span class="c1">// use jQuery on the body of the page even though it is not included yet</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <span class="nx">$</span><span class="p">(</span><span class="s2">"#my"</span><span class="p">).</span><span class="nx">jquery_plugin</span><span class="p">();</span><br /><span class="p">});</span><br /> <br /><span class="c1">// load jQuery whenever you wish bottom of the page</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"/path/to/jquery.js"</span><span class="p">);</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
</article>
<article>
<h2>Responsive Design / Media Queries</h2>
<p>
You've heard of Responsive Design, Media Queries & Mobile First. But how do you actually go about and put it into application without having to resort to some kind of mobile framework ?
</p>
<p>
Design your pages for <strong>1980px</strong> resolution, then make them work on a <strong>10”</strong>
tablet, a laptop or even a mobile phone. Viewport is the single most important thing when developing for mobile clients.
<figure class="code">
<div class="highlight">
<pre><span class="c">/*<em> screen size less than 1024 pixels </em>*/</span><br /><span class="nc">.lt-1024</span> <span class="nf">#hero</span> <span class="p">{</span> <span class="k">background-image</span><span class="o">:</span><span class="p">(</span><span class="k">medium</span><span class="o">.</span><span class="n">jpg</span><span class="p">);</span> <span class="p">}</span><br /><br /><span class="c">/*<em> fine tune for mobile phone </em>*/</span><br /><span class="nc">.lt-640</span> <span class="nf">#hero</span> <span class="p">{</span> <span class="k">background-image</span><span class="o">:</span><span class="p">(</span><span class="n">small</span><span class="o">.</span><span class="n">jpg</span><span class="p">);</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>
Or you might need to apply a different layout when a page passes from <strong>Landscape</strong> to <strong>Portrait</strong> mode.
<p>Landscape</p>
<figure class="code">
<div class="highlight">
<pre><span class="c">/*<em> page in lanscape mode </em>*/</span><br /><span class="nc">.landscape</span> <span class="nf">#hero</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span><span class="p">800px;</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
<p>Portrait</p>
<figure class="code">
<div class="highlight">
<pre><span class="c">/*<em> page in portrait mode </em>*/</span><br /><span class="nc">.portrait</span> <span class="nf">#hero</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span><span class="p">300px;</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>
If you resize the browser your <span class="caps">CSS</span> rules will dynamically follow. Head
<span class="caps">JS</span> does this behind the scenes.
</p>
<h3>Look at it like Media Queries, except that it works in browsers that don't even support Media Queries.</h3>
<p>
<em>Head JS provides you with the following detections: <strong>.lt, .gt, .lte, .gte, .eq, .landscape, .portrait, .desktop, .mobile</strong></em>
</p>
</article>
<article>
<h2><span class="caps">CSS</span> Router</h2>
<p>
Target <span class="caps">CSS</span> for specific paths and pages
<figure class="code">
<div class="highlight">
<pre><span class="c">/<em> <span class="caps">CSS</span> targeted for home page only </em>/</span><br /><span class="nf">#index-page</span><span class="nc">.root-section</span> <span class="p">{</span><br /> <br /><span class="p">}</span><br /> <br /><span class="c">/<em> make sidebar visible under /plugins </em>/</span><br /><span class="nc">.plugins-section</span> <span class="nf">#sidebar</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
</article>
<article>
<h2>Browser Detection / Graceful Degradation</h2>
<p>
All browsers are detected but we all love <span class="caps">IE</span>.
<figure class="code">
<div class="highlight">
<pre><span class="c">/<em> older than <span class="caps">IE9</span> </em>/</span><br /><span class="nc">.lt-ie9</span> <span class="nc">.box</span> <span class="p">{</span> <span class="k">padding</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> <span class="p">}</span><br /> <br /><span class="c">/<em> <span class="caps">CSS</span> fixes for <span class="caps">IE6</span> </em>/</span><br /><span class="nc">.ie6</span> <span class="nt">ul</span> <span class="p">{</span> <span class="k">list-style</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>It’s generally wiser to use feature detection <span class="caps">IE</span> is a feature in itself.</p>
</article>
<article>
<h2>Dynamic <span class="caps">CSS</span></h2>
<p>
Style for various application states:
<figure class="code">
<div class="highlight">
<pre><span class="nt"><script></span><br /><span class="cm">/*<em></span><br /><span class="cm">detect whether user is logged in. here we check for an</span><br /><span class="cm">existence of a cookie</span><br /><span class="cm"></em>*/</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">feature</span><span class="p">(</span><span class="s2">"logged"</span><span class="p">,</span> <span class="nx">mycookielib</span><span class="p">.</span><span class="nx">get_cookie</span><span class="p">(</span><span class="s2">"auth_token"</span><span class="p">));</span><br /><span class="nt"></script></span><br /> <br /><span class="nt"><style></span><br /><span class="c">/<em> .. and write <span class="caps">CSS</span> accordingly </em>/</span><br /><span class="nc">.logged</span> <span class="nf">#login-box</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span><br /><span class="nt"></style></span><br /></pre>
</div>
<br />
<figcaption><span class="caps">HTML</span></figcaption>
</figure>
</p>
<p>Whenever you call <code>head.feature()</code> your <span class="caps">CSS</span> rules will follow.</p>
</article>
<article>
<h2>CSS3 Feature Detection</h2>
<p>
HeadJS adds classes to the <span class="caps">HTML</span> root element so that you can do this
<figure class="code">
<div class="highlight">
<pre><span class="c">/<em> target <span class="caps">CSS</span> for browsers without box-shadow support </em>/</span><br /><span class="nc">.no-boxshadow</span> <span class="nc">.box</span> <span class="p">{</span><br /> <span class="k">border</span><span class="o">:</span> <span class="m">2px</span> <span class="k">solid</span> <span class="m">#ddd</span><span class="p">;</span><br /><span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>
The focus is on <em><span class="caps">CSS3</span> styling</em> and it’s easy to add more tests. Minimalism is
a must. It’s your <span class="caps">HEAD</span> again.
</p>
</article>
<article>
<h2>JavaScript Feature Detection</h2>
<p>
Every feature can also be found on the <code>head</code> (default) JavaScript variable.
<figure class="code">
<div class="highlight">
<pre><span class="k">if</span> <span class="p">(</span><span class="nx">head</span><span class="p">.</span><span class="nx">logged</span><span class="p">)</span> <span class="p">{</span><br /> <span class="c1">// do things</span><br /><span class="p">}</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
</article>
<article>
<h2><span class="caps">HTML5</span> Enabler</h2>
<p>
<span class="caps">DIV</span> is good but HeadJS let’s you be semantic and futuristic.
<figure class="code">
<div class="highlight">
<pre><span class="nt"><style></span><br /> <span class="nt">article</span> <span class="p">{</span> <span class="k">text-shadow</span><span class="o">:</span><span class="m">0</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">#ccc</span><span class="p">;</span> <span class="p">}</span><br /><span class="nt"></style></span><br /> <br /><span class="c"><!-- works in <span class="caps">IE</span> too --></span><br /><span class="nt"><article></span><br /> <span class="nt"><header></header></span><br /> <span class="nt"><section></section></span><br /> <span class="nt"><footer></footer></span><br /><span class="nt"></article></span><br /></pre>
</div>
<br />
<figcaption><span class="caps">HTML</span></figcaption>
</figure>
</p>
</article>
</section>
<h1>Theory</h1>
<section id="theory">
<h2>Script Loader</h2>
<p>
With Head <span class="caps">JS</span> your scripts load like images - completely separated from the
page rendering process. The page is ready sooner. Always. This is guaranteed
even with a single combined JavaScript file. See it yourself:
</p>
<p><a href="test/script.html" target="_blank" onclick="trackPageView('test/script.html')">Sample page with 5 <span class="caps">SCRIPT</span> <span class="caps">SRC</span> tags</a></p>
<p><a href="test/headjs.html" target="_blank" onclick="trackPageView('test/headjs.html')">Same scripts loaded with Head <span class="caps">JS</span></a></p>
<p>
Non-blocking loading is the key to fast pages. Moreover Head <span class="caps">JS</span> loads scripts
in <em>parallel</em> no matter how many of them and what the browser is. The speed
difference can be dramatic especially on the initial page load when the
scripts are not yet in cache. It’s your crucial first impression.
</p>
<p>
Pages no longer “hang” and there is less or zero “flashing” between pages.
User only cares when the page is ready. Unfortunately current networking tools
don’t highlight this crucial point. They focus on the overall loading of
assets instead.
</p>
<p>
Head <span class="caps">JS</span> can make your pages load 100% or even 400% faster. It can make the
largest impact on client side optimization.
</p>
<h2><span class="caps">SCRIPT</span> <span class="caps">SRC</span></h2>
<p>
This is from Apple.com’s <span class="caps">HEAD</span>:
<figure class="code">
<div class="highlight">
<pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/global/scripts/lib/prototype.js"</span><span class="nt">></script></span><br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/global/scripts/lib/scriptaculous.js"</span><span class="nt">></script></span><br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/global/scripts/browserdetect.js"</span><span class="nt">></script></span><br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/global/scripts/apple_core.js"</span><span class="nt">></script></span><br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/global/scripts/search_decorator.js"</span><span class="nt">></script></span><br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/global/scripts/promomanager.js"</span><span class="nt">></script></span><br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/home/scripts/ticker.js"</span><span class="nt">></script></span><br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://images.apple.com/home/scripts/promotracker.js"</span><span class="nt">></script></span><br /></pre>
</div>
<br />
<figcaption><span class="caps">HTML</span></figcaption>
</figure>
</p>
<p>
All these scripts <em>block</em> the page. The page needs to wait for these to be
loaded until it starts rendering itself. This is how majority of web sites are
done. There is <strong>not</strong> a large difference whether the script tags are placed
on top or on bottom of the page. On both cases the scripts must be loaded
first. <a href="test/script.html">Compare it yourself</a>.
</p>
<p>
With older generation browsers the scripts will be loaded sequentially. Here
is a screenshot from Firefox 3.0.
</p>
<p>
<img alt="sequential downloading of scripts" src="media/img/serial-load.gif" />
</p>
<p>
It’s easy to understand that this is poison for performance. The single best
optimization technique for script loading is to use a non-blocking and
paraller script loader such as Head <span class="caps">JS</span>.
</p>
<h2>Combining scripts</h2>
<p>There is a common misbelief that a single combined script performs best. Wrong:</p>
<ul>
<li>
<p>
latest browsers and Head <span class="caps">JS</span> can load scripts in parallel. loading 3 parts
in parallel instead of as a single chunk is usually faster.
</p>
</li>
<li>
<p>
if an individual file is changed the whole combination changes and you
lose the benefits of caching. It’s better to combine only the stable files
that doesn’t change often.
</p>
</li>
<li>
<p>
many popular libraries are hosted on <span class="caps">CDN</span>. you should take the advantage of
it instead of hosting yourself.
</p>
</li>
<li>
<p>
<a href="http://www.phpied.com/iphone-caching/">iPhone 3.x</a> cannot cache files
larger than <strong>15kb</strong> and in iPhone 4 the limit is <strong>25kb</strong>. And this is
the size before gzipping. if you care about iPhones you should respect
these limits.
</p>
</li>
</ul>
<p>
With Head <span class="caps">JS</span> the file amount is not <em>as</em> critical as it is with <span class="caps">SCRIPT</span> <span class="caps">SRC</span>
because page rendering is not blocked. Combining scripts is an important
optimization method but you can go too far with it.
</p>
<h2>Page styling and <span class="caps">CSS</span></h2>
<p>
Stylesheets needs to be
<a href="http://developer.yahoo.com/performance/rules.html#css_top">on top</a>. An
included script in the <span class="caps">HEAD</span> is the only place where a script is executed
before the stylesheets are loaded and where it can give a helping hand for the
<span class="caps">CSS</span> developer. Head <span class="caps">JS</span> takes this important role seriously and gives you
following possibilities:
</p>
<ul>
<li>use the latest <span class="caps">CSS3</span> techniques and provide alternate <span class="caps">CSS</span> for <span class="caps">IE</span> and other
old school browsers</li>
<li>safely use <span class="caps">HTML5</span> tags even with <span class="caps">IE</span></li>
<li>target <span class="caps">CSS</span> for specific screen widths, browsers and URLs</li>
<li>style your pages differently depending on the application state, such as
whether user is logged or not.</li>
</ul>
<p>
Essentially Head <span class="caps">JS</span> adds <span class="caps">CSS</span> class names to the <code><html></code> element. If you
attempt to do this in a script that is loaded with Head <span class="caps">JS</span> you can see a
“Flash of Unstyled Content” (<span class="caps">FOUC</span>) effect: the page is first rendered without
the to-be-loaded style definitions and then re-rendered when the scripts are
executed. This is why the <span class="caps">CSS</span> feature detection is a core part of Head <span class="caps">JS</span>.
</p>
<p>
A script in <span class="caps">HEAD</span> blocks so it must be small. This is the essence of Head <span class="caps">JS</span>.
It weights only 2.5 kb when minified and gzipped. It’s preferred to load the
file from a <span class="caps">CDN</span>. Google: I’m <a href="http://code.google.com/p/google-ajax-apis/issues/detail?id=548">staring at
You</a>! (please
give it a star)
</p>
<p><em>Note: As crazy as it sounds <span class="caps">FUBC</span> and <span class="caps">FOUC</span> are not my acronyms.</em></p>
</section>
<h1>Usage</h1>
<section id="usage">
<h2>Script loading and execution</h2>
<p>
All script loading is done with <code>head.js()</code>
<figure class="code">
<div class="highlight">
<pre><span class="c1">// the most simple case. load and execute single script without blocking.</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"/path/to/file.js"</span><span class="p">);</span><br /> <br /><span class="c1">// load a script and execute a function after it has been loaded</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"/path/to/file.js"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /><span class="p">});</span><br /> <br /><span class="c1">// load files in parallel but execute them in sequence</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file1.js"</span><span class="p">,</span> <span class="s2">"file2.js"</span><span class="p">,</span> <span class="p">...</span> <span class="s2">"fileN.js"</span><span class="p">);</span><br /> <br /><span class="c1">// execute function after all scripts have been loaded</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file1.js"</span><span class="p">,</span> <span class="s2">"file2.js"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /><span class="p">});</span><br /> <br /><span class="c1">// files are loaded in parallel and executed in order they arrive</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file1.js"</span><span class="p">);</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file2.js"</span><span class="p">);</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file3.js"</span><span class="p">);</span><br /> <br /><span class="c1">// the previous can also be written as</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file1.js"</span><span class="p">).</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file1.js"</span><span class="p">).</span><span class="nx">js</span><span class="p">(</span><span class="s2">"file3.js"</span><span class="p">);</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<h3><span class="caps">DOM</span> Ready</h3>
<p>
With <code>head.js()</code> call your page can be ready before your scripts. You need to
prepare for that
</p>
<ul>
<li>
<p>
The “<span class="caps">DOM</span> ready” event such as <code>$(document).ready()</code> is already fired when
the scripts arrive. If the loaded scripts depend on that event make sure
your library can handle this. jQuery 1.4+ works.
</p>
</li>
<li>
<p>
If your scripts modify the page you can see a “flash of unbehaviored
content” effect (<span class="caps">FUBC</span>): a quick glimpse of unmodified <span class="caps">HTML</span> before the
loaded scripts act on it. You can avoid this by initially hiding the
modifiable elements before your scripts make them visible and do their job.
</p>
</li>
<li>
<p>
<code>document.write()</code> statements are not supported since it’s hard or
impossible to know where to write to. It’s a bad programming habit anyway
so it’s likely that Head <span class="caps">JS</span> will never support this.
</p>
</li>
</ul>
<h3>Enable Caching</h3>
<p>Make sure that the files loaded with head.js can be cached. For example:</p>
<p>
<img alt="file caching with future expiration header" src="media/img/expires-header.gif" />
</p>
<p>
This Google Analytics script will be served from browser’s cache after the
initial load. A proper max-age header configuration on the web server does the
trick. If you care about performance this is a good habit for every JavaScript
file. Not only with head.js.
</p>
<p>
Internally Head <span class="caps">JS</span> uses browser’s cache to preload scripts before they are
executed. This trick is used on Chrome, Safari and <span class="caps">IE</span>. Without caching enabled
a file will be <em>loaded twice</em> on the initial load. There are no issues on
Firefox and Opera because they execute files on the order they are
programmatically inserted on the page.
</p>
<article>
<h2>Script Organization</h2>
<p>
Call a function after all scripts have been loaded <em>and</em> the document is scriptable:
<figure class="code">
<div class="highlight">
<pre><span class="nx">head</span><span class="p">.</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /><span class="p">});</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<p>
The functions supplied this way are executed in the same order as they are given.
<figure class="code">
<div class="highlight">
<pre><span class="c1">// call a function after a particular file has been loaded</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">ready</span><span class="p">(</span><span class="s2">"file2.js"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /><span class="p">});</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<p>
This makes sense if you have large script files and want to execute JavaScript
before all files are loaded. Otherwise you simply use <code>head.ready()</code> which
gets executed after all files are loaded.
<figure class="code">
<div class="highlight">
<pre><span class="c1">// a handy shortcut for head.ready()</span><br /><span class="nx">head</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /><span class="p">});</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
</article>
<article>
<h2>Labeling Scripts</h2>
<p>
By assigning labels the content developers need not to know the actual file paths.
<figure class="code">
<div class="highlight">
<pre><span class="c1">// call a function immediately after jQuery Tools is loaded</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">ready</span><span class="p">(</span><span class="s2">"tools"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /> <span class="c1">// setup Tooltips</span><br /> <span class="nx">$</span><span class="p">(</span><span class="s2">".tip"</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">();</span><br /> <br /><span class="p">});</span><br /> <br /><span class="c1">// load scripts by assigning a label for them</span><br /><span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><br /> <span class="p">{</span><span class="nx">jquery</span><span class="o">:</span> <span class="s2">"http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"</span><span class="p">},</span><br /> <span class="p">{</span><span class="nx">tools</span><span class="o">:</span> <span class="s2">"http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"</span><span class="p">},</span><br /> <span class="p">{</span><span class="nx">heavy</span><span class="o">:</span> <span class="s2">"http://a.heavy.library/we/dont/want/to/wait/for.js"</span><span class="p">},</span><br /> <br /> <span class="c1">// label is optional</span><br /> <span class="s2">"http://can.be.mixed/with/unlabeled/files.js"</span><br /><span class="p">);</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<p>
If label is not given then the file name without the path is used as the key.
On the jQuery library above this would be just “jquery.min.js”.
</p>
</article>
<article>
<h2>Responsive Design / Media Queries</h2>
<p>
Target <span class="caps">CSS</span> for various screen sizes. For example
<figure class="code">
<div class="highlight">
<pre><span class="c">/<em> styling for screens with resolution less than 1024 pixels </em>/</span><br /><span class="nc">.lt-1024</span> <span class="nf">#hero</span> <span class="p">{</span> <span class="k">background-image</span><span class="o">:</span><span class="p">(</span><span class="k">medium</span><span class="o">.</span><span class="n">jpg</span><span class="p">);</span> <span class="p">}</span><br /> <br /><span class="c">/<em> styling for small mobile screens </em>/</span><br /><span class="nc">.lt-640</span> <span class="nf">#hero</span> <span class="p">{</span> <span class="k">background-image</span><span class="o">:</span><span class="p">(</span><span class="n">small</span><span class="o">.</span><span class="n">jpg</span><span class="p">);</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>
Today most sites are optimized for <strong>1024px</strong> but with Head <span class="caps">JS</span> you can safely
optimize for larger screens. Start by designing to the largest screen and then
add <span class="caps">CSS</span> rules for smaller ones. You can freely decide the sizes you optimize
for and the amount of them. By default Head <span class="caps">JS</span> watches following screen widths:
</p>
<p><strong>320, 480, 640, 768, 800, 1024, 1280, 1440, 1680, 1920</strong></p>
<p>
These are typical sizes for mobile phones, tablets and <span class="caps">PC</span> monitors. Here are
sizes for Apple devices:
</p>
<p>iPhone3: <strong>480 x 320</strong></p>
<p>iPhone4: <strong>960 x 640</strong></p>
<p>iPad: <strong>1024 x 768</strong></p>
<p>screens: <strong>800+</strong></p>
<p>
You can provide your own set of screen widths with head_conf variable:
<figure class="code">
<div class="highlight">
<pre><span class="kd">var</span> <span class="nx">head_conf</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">screens</span><span class="o">:</span> <span class="p">[</span><span class="mi">500</span><span class="p">,</span> <span class="mi">700</span><span class="p">,</span> <span class="mi">900</span><span class="p">]</span> <span class="p">};</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<p>If you resize the browser window your <span class="caps">CSS</span> rules will be dynamically applied.</p>
<h3>
<strong>You can also specify what type of detections you want to use:</strong>
</h3>
<p>
<figure class="code">
<div class="highlight">
<pre>
var head_conf = screensCss: {
"gt" : true,
"gte": false,
"lt" : true,
"lte": false,
"eq" : false
};</pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
</article>
<article>
<h2><span class="caps">CSS</span> Routing <a name="routing"></a></h2>
<p>
Say you are on a page: <code>http://mydomain.com/addons/node/router.html</code>.
Following <span class="caps">CSS</span> selectors apply:
<figure class="code">
<div class="highlight">
<pre><span class="nc">.addons-section</span> <span class="p">{</span> <span class="p">}</span><br /> <br /><span class="nc">.addons-node-section</span> <span class="p">{</span> <span class="p">}</span><br /> <br /><span class="nf">#router-page</span> <span class="p">{</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>
For each given path you get <span class="caps">CSS</span> classes representing “folders” and an <span class="caps">ID</span>
representing the page. The deeper your <span class="caps">URL</span> the more classes you’ll get An
empty page is “#index-page” and the site root is “.root-section”. <span class="caps">NOTE</span>: If you
have an existing id assigned for the <span class="caps">HTML</span> element it will be <em>overwritten</em>. On
this case you can place the id attribute for the <span class="caps">BODY</span> tag.
</p>
<p>
You can change the these suffixes with head_conf variable.
<figure class="code">
<div class="highlight">
<pre><span class="kd">var</span> <span class="nx">head_conf</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">section</span><span class="o">:</span> <span class="s1">'-area'</span><span class="p">,</span> <span class="nx">page</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<p>
Now the selectors are:
<figure class="code">
<div class="highlight">
<pre><span class="nc">.addons-area</span> <span class="p">{</span> <span class="p">}</span><br /> <br /><span class="nc">.addons-node-area</span> <span class="p">{</span> <span class="p">}</span><br /> <br /><span class="nf">#router</span> <span class="p">{</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
</article>
<article>
<h2>CSS3 Feature Detection</h2>
<p>
When a particular feature is supported a corresponding class name is added to
the <code><html></code> element. When a feature is not supported the class name is
prefixed with <code>no-</code>. For example:
<figure class="code">
<div class="highlight">
<pre><span class="nc">.borderimage</span> <span class="nc">.box</span> <span class="p">{</span><br /> <span class="c">/<em> style for browsers that support border images </em>/</span><br /><span class="p">}</span><br /> <br /><span class="nc">.no-borderimage</span> <span class="nc">.box</span> <span class="p">{</span><br /> <span class="c">/<em> style for browsers that does not support border images </em>/</span><br /><span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>
On everyday <span class="caps">CSS</span> work you assume that a feature exists and code your <span class="caps">CSS</span>
accordingly and you later add support for older browsers with the aid of “no-“ classes.
</p>
<h3><span class="caps">CSS3</span> property list</h3>
<p>Natively detected <span class="caps">CSS3</span> properties</p>
<ul>
<li><a href="http://www.css3.info/preview/border-image/">borderimage</a> define an image to be used instead of the normal border of an element</li>
<li><a href="http://www.css3.info/preview/border-radius/">borderradius</a> support for rounded borders</li>
<li><a href="http://www.css3.info/preview/box-shadow/">boxshadow</a> a simple shadow for a box</li>
<li><a href="http://webkit.org/blog/182/css-reflections/">cssreflections</a> a reflection effect for an object</li>
<li><a href="rotate or skew boxes">csstransforms</a> ability to scale</li>
<li><a href="https://developer.mozilla.org/en/CSS/CSS_transitions">csstransitions</a> ability to animate changes to <span class="caps">CSS</span> properties</li>
<li><a href="http://code.google.com/webfonts">fontface</a> ability to use custom fonts</li>
<li><a href="http://www.css3.info/preview/multiple-backgrounds/">multiplebgs</a> ability to define multiple background properties for a box</li>
<li><a href="http://www.css3.info/preview/opacity/">opacity</a> transparency support</li>
<li><a href="http://www.css3.info/preview/rgba/">rgba</a> allows to specify an opacity value for a color</li>
<li><a href="http://www.css3.info/preview/text-shadow/">textshadow</a> a simple shadow for a text</li>
</ul>
<p>
You can detect more with <code>head.feature()</code> call. Here we detect <span class="caps">HTML5</span> video support.
<figure class="code">
<div class="highlight">
<pre><span class="nx">head</span><span class="p">.</span><span class="nx">feature</span><span class="p">(</span><span class="s2">"video"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <span class="kd">var</span> <span class="nx">tag</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'video'</span><span class="p">);</span><br /> <span class="k">return</span> <span class="o">!!</span><span class="nx">tag</span><span class="p">.</span><span class="nx">canPlayType</span><span class="p">;</span><br /><span class="p">});</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<p>
<a href="https://github.com/Modernizr/Modernizr/tree/master/feature-detects">Modernizr</a>
is an excellent source of tests.
</p>
</article>
<article>
<h2>JavaScript Feature Detection <a name="global-var"></a></h2>
<p>
Every feature can be found from th <code>head</code> global JavaScript variable. Here is
a screenshot:
</p>
<p>
<img alt="Head JS global JavaScript variable" src="media/img/global-var.gif" />
</p>
</article>
<article>
<h2>Browser Detection <a name="browser"></a> / Graceful Degradation</h2>
<p>
Target <span class="caps">CSS</span> for a specific browser. For example
<figure class="code">
<div class="highlight">
<pre><span class="c">/<em> <span class="caps">CSS</span> for <span class="caps">IE</span> version 7 and below </em>/</span><br /><span class="nc">.lt-ie8</span> <span class="nc">.box</span> <span class="p">{</span> <span class="k">padding</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> <span class="p">}</span><br /> <br /><span class="c">/<em> <span class="caps">CSS</span> for <span class="caps">IE6</span> only </em>/</span><br /><span class="nc">.ie6</span> <span class="nt">ul</span> <span class="p">{</span> <span class="k">list-style</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>List of supported class names for various browsers</p>
<ul>
<li><code>ie</code> Internet Explorer</li>
<li><code>webkit</code> Webkit based browsers such as Safari and Chrome</li>
<li><code>opera</code> Opera</li>
<li><code>mozilla</code> Mozilla based browsers such as Firefox</li>
</ul>
<p>
There are additional “less than” helper classes for <span class="caps">IE</span>.
<figure class="code">
<div class="highlight">
<pre><span class="o">//</span> <span class="nt">tweak</span> <span class="nt"><span class="caps">CSS</span></span> <span class="nt">for</span> <span class="nt"><span class="caps">IE</span></span> <span class="nt">versions</span> <span class="nt">5</span> <span class="nt">and</span> <span class="nt">below</span><br /><span class="nc">.ie-lt6</span> <span class="nt">li</span> <span class="p">{</span><br /> <span class="k">list-style-type</span><span class="o">:</span> <span class="k">circle</span><span class="p">;</span><br /><span class="p">}</span><br /></pre>
</div>
<br />
<figcaption><span class="caps">CSS</span></figcaption>
</figure>
</p>
<p>
Versions 3 - 10 are covered. It is best to avoid browser detection if you are
able to do feature detection. Sometimes it’s not possible especially when it
comes to <span class="caps">IE</span>.
</p>
</article>
<article>
<h2><span class="caps">HTML5</span> Enabler</h2>
<p>
Head <span class="caps">JS</span> adds <span class="caps">HTML5</span> support for all browsers:
<figure class="code">
<div class="highlight">
<pre><span class="nt"><style></span><br /> <span class="nt">article</span> <span class="p">{</span> <span class="k">text-shadow</span><span class="o">:</span><span class="m">0</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">#ccc</span><span class="p">;</span> <span class="p">}</span><br /><span class="nt"></style></span><br /> <br /><span class="c"><!-- works in <span class="caps">IE</span> too --></span><br /><span class="nt"><article></span><br /> <span class="nt"><header></header></span><br /> <span class="nt"><section></section></span><br /> <span class="nt"><footer></footer></span><br /><span class="nt"></article></span><br /></pre>
</div>
<br />
<figcaption><span class="caps">HTML</span></figcaption>
</figure>
</p>
<h4>List of new tags</h4>
<ul>
<li><a href="http://developers.whatwg.org/text-level-semantics.html#the-abbr-element">abbr</a> an abbrevation</li>
<li><a href="http://developers.whatwg.org/sections.html#the-article-element">article</a> defines external content</li>
<li><a href="http://developers.whatwg.org/sections.html#the-aside-element">aside</a> defines some content aside from the content it is placed in</li>
<li><a href="http://developers.whatwg.org/video.html#audio">audio</a> defines sound, such as music or other audio streams.</li>
<li><a href="http://developers.whatwg.org/the-canvas-element.html#the-canvas-element">canvas</a> a container for javascript graphics</li>
<li><a href="http://developers.whatwg.org/interactive-elements.html#the-details-element">details</a> describe details about a document, or parts of a document</li>
<li><a href="http://developers.whatwg.org/grouping-content.html#the-figcaption-element">figcaption</a> contains a caption for the “figure” element</li>
<li><a href="http://developers.whatwg.org/grouping-content.html#the-figcaption-element">figure</a> stand-alone content, typically used to explain parts of a document</li>
<li><a href="http://developers.whatwg.org/sections.html#the-footer-element">footer</a> defines the footer of a section or document</li>
<li><a href="http://developers.whatwg.org/sections.html#the-header-element">header</a> defines the header of a section or document</li>
<li><a href="http://developers.whatwg.org/sections.html#the-hgroup-element">hgroup</a> defines the heading of a section or a document.</li>
<li><a href="http://developers.whatwg.org/text-level-semantics.html#the-mark-element">mark</a> tag defines marked or highlighted text</li>
<li><a href="http://developers.whatwg.org/the-button-element.html#the-meter-element">meter</a> for measurements with a known minimum and maximum value</li>
<li><a href="http://developers.whatwg.org/sections.html#the-nav-element">nav</a> a section intended for navigation</li>
<li><a href="http://developers.whatwg.org/the-button-element.html#the-output-element">output</a> defines different types of output, such as output written by a script</li>
<li><a href="http://developers.whatwg.org/the-button-element.html#the-progress-element">progress</a>display the progress of a time consuming function in JavaScript.</li>
<li><a href="http://developers.whatwg.org/sections.html#the-section-element">section</a> defines sections in a document such as chapters, headers, footers, or any other sections of the document.</li>
<li><a href="http://developers.whatwg.org/interactive-elements.html#the-summary-element">summary</a> contains a header for the “details” element</li>
<li><a href="http://html5doctor.com/the-time-element/">time</a> defines a time or a date, or both.</li>
<li><a href="http://developers.whatwg.org/video.html#video">video</a> defines video, such as a movie clip or other video streams</li>
</ul>
<p>
<span class="caps">IE</span> has problems printing <span class="caps">HTML5</span> elements. You can fix that by loading a
<a href="http://www.iecss.com/print-protector/">print protector</a> script on your page:
<figure class="code">
<div class="highlight">
<pre><span class="k">if</span> <span class="p">(</span><span class="nx">head</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">ie</span><span class="p">)</span> <span class="p">{</span><br /> <span class="nx">head</span><span class="p">.</span><span class="nx">js</span><span class="p">(</span><span class="s2">"http://www.iecss.com/print-protector/javascript/iepp.1-6-2.min.js"</span><span class="p">);</span><br /><span class="p">}</span><br /></pre>
</div>
<br />
<figcaption>JavaScript</figcaption>
</figure>
</p>
<h3>Sounds great !?</h3>
<p>
<a href="http://www.truthabouthtml5.com" style="float: left; padding: 0 5px 0 0; "><img src="media/img/truth-about-html5.jpg" /></a>
The truth is the stories you hear about <strong>HTML5</strong> are greatly over-exaggerated. If you're really interested in the good, the bad & the ugly about <strong>HTML5</strong>, i strongly urge you to read <em><a href="http://www.truthabouthtml5.com">The Truth about HTML5</a></em>
</p>
</article>
</section>
<h1>API</h1>
<section id="api">
<h2>Method index</h2>
<h3>head.js(file1 … fileN, [callback])</h3>
<p>
Immediately loads given javascript files and and executes them in the <em>order</em>
they are supplied. if the last argument is a function it is called after all
files are loaded and executed. Each file is either a string representing
relative or absolute path of a JavaScript file.
</p>
<p>
Alternatively each file can be given as an object taking a form: <code>{ label:
file_path }</code>. The labels are a handy way to hide the actual file path from the
content writers. See the <code>ready</code> method below.
</p>
<h3>head.ready(callback)</h3>
<p>
Executes the given callback after <em>all</em> JavaScript files have been loaded and
the document is scriptable (<span class="caps">DOM</span> is ready).
</p>
<h3>head.ready(path_or_label, callback)</h3>
<p>Execute the callback immediately after the given file or label is loaded and executed</p>
<h3>head(callback), head(path_or_label, callback)</h3>
<p>A convenience shortcut for head.ready</p>
<h3>head.ready(document, callback)</h3>
<p>
Executes the given callback when document is ready. This is identical to
jQuery’s <a href="http://api.jquery.com/ready/">.ready()</a> method. <code>document</code> is
a global variable representing the current document in a browser.
</p>
<h3>head.feature(name, flag)</h3>
<p>
Enable or disable a feature. features are stored as a class name to <code><html></code>
element and on global <code>head</code> variable. if the flag arguments evaluates to
<code>true</code> a feature is enabled. Call this method in your <span class="caps">HEAD</span> before the
stylesheets are loaded.
</p>
<h2>Configuration</h2>
<p>
HeadJS is configured with a global <code>head_conf</code> variable <em>before</em> the script is
loaded. For example:
<figure class="code">
<div class="highlight">
<pre><span class="nt"><script></span><br /><span class="kd">var</span> <span class="nx">head_conf</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">screens</span><span class="o">:</span> <span class="p">[</span><span class="mi">640</span><span class="p">,</span> <span class="mi">1024</span><span class="p">,</span> <span class="mi">1280</span><span class="p">,</span> <span class="mi">1680</span><span class="p">]</span> <span class="p">};</span><br /><span class="nt"></script></span><br /> <br /><span class="nt"><script </span><span class="na">src=</span><span class="s">"/js/head.min.js"</span><span class="nt">></script></span><br /></pre>
</div>
<br />
<figcaption><span class="caps">HTML</span></figcaption>
</figure>
</p>
<p>List of configuration variables</p>
<ul>
<li><code>head</code>: ability to change global variable name. default: “head”. Set to
“<span class="caps">JS</span>” and you can <code>JS.ready()</code> for example</li>
<li><code>screens</code>: an array of screen sizes to watch for</li>
<li><code>section</code>: a suffix for <span class="caps">CSS</span> class representing the current “folder”. default: ”-section”</li>
<li><code>page</code>: a suffix for <span class="caps">CSS</span> <span class="caps">ID</span> representing the current page. default: ”-page”</li>
</ul>
</section>
<h1>Download</h1>
<section id="download">
<h2>Version 0.99</h2>
<table>
<!-- head.min.js -->
<tr>
<td><a itemprop="downloadUrl" href="https://github.com/headjs/headjs/raw/v0.99/dist/head.min.js" target="_blank" onclick="trackPageView('download/head.min.js')">head.min.js</a></td>
<td>Full Bundle</td>
<td><small><em><strong>4.1K</strong> (minified & gzipped)</em></small></td>
</tr>
<tr>
<td><a href="//cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js" target="_blank" onclick="trackPageView('download/head.min.js')">head.min.js</a></td>
<td colspan="2"><em><strong>Via CDN</strong> (<a href="http://cloudflare.com" target="_blank">cloudflare.com</a>)</em></td>
</tr>
<!-- head.core.min.js -->
<tr>
<td><a href="https://github.com/headjs/headjs/raw/v0.99/dist/head.core.min.js" target="_blank" onclick="trackPageView('download/head.core.min.js')">head.core.min.js</a></td>
<td>Responsive Design & Feature Detection Only</td>
<td><small><em><strong>1.8K</strong> (minified & gzipped)</em></small></td>
</tr>
<tr>
<td><a href="//cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.core.min.js" target="_blank" onclick="trackPageView('download/head.core.min.js')">head.core.min.js</a></td>
<td colspan="2"><em><strong>Via CDN</strong> (<a href="http://cloudflare.com" target="_blank">cloudflare.com</a>)</em></td>
</tr>
<!-- head.core.min.js -->
<tr>
<td><a href="https://github.com/headjs/headjs/raw/v0.99/dist/head.load.min.js" target="_blank" onclick="trackPageView('download/head.load.min.js')">head.load.min.js</a></td>
<td>Asset Loader Only</td>
<td><small><em><strong>1.9K</strong> (minified & gzipped)</em></small></td>
</tr>
<tr>
<td><a href="//cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.load.min.js" target="_blank" onclick="trackPageView('download/head.load.min.js')">head.load.min.js</a></td>
<td colspan="2"><em><strong>Via CDN</strong> (<a href="http://cloudflare.com" target="_blank">cloudflare.com</a>)</em></td>
</tr>
</table>
<table>
<tr>
<td><a href="https://github.com/headjs/headjs" onclick="trackPageView('github.com')">Github Repository</a></td>
<td>Source Code</td>
</tr>
<tr>
<td colspan="2">* <a href="https://github.com/headjs/headjs/blob/master/changelog.txt">Release notes</a></td>
</tr>
<tr>
<td colspan="2"><strong><em><a href="test/unit/index.html" target="_blank" onclick="trackPageView('test/unit')">Unit Tests / BrowserScope Results</a></em></strong></td>
</tr>
</table>
<h4>Spread the word</h4>
<p>
<script type="IN/Share"></script>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="headjs" data-count="none">Tweet</a>
<span class="g-plusone" data-size="medium" data-href="http://headjs.com" data-count="false"></span>
</p>
<hr />
<h2>Future</h2>
<p>
Head <span class="caps">JS</span> is rapidly being adopted by a large number of websites all the time. A
quick <a href="http://twitter.com/search?q=headjs">Twitter search</a> reveals that it’s
becoming a core client side development tool for many. The strategy is to keep Head <span class="caps">JS</span>
as minimalistic as possible.
</p>
</section>
</div>
</div>
<footer>
<span itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<a href="http://cloudpanic.com/about.html" target="_blank" itemprop="url">Created By: <strong itemprop="name">Tero Piirainen</strong></a> •
</span>
<span itemprop="contributor" itemscope="itemscope" itemtype="http://schema.org/Person">
<a href="http://www.i-technology.net" target="_blank" itemprop="url">Maintained By: <strong itemprop="name">Robert Hoffmann</strong></a> •
</span>
<a href="http://twitter.com/search?q=headjs" target="_blank">Twitter Talk</a> •
<a href="http://headjs.uservoice.com" target="_blank">Feature Requests</a> •
<a href="http://stackoverflow.com/questions/tagged/head.js?sort=newest" target="_blank">Community Support</a> •
<a href="https://github.com/headjs/headjs/issues" itemprop="discussionUrl">Bug Reports</a>
</footer>
<script>
head.js("http://www.google-analytics.com/ga.js", "http://platform.linkedin.com/in.js", "http://platform.twitter.com/widgets.js", "https://apis.google.com/js/plusone.js");
</script>
</body>
</html>