forked from isobar-us/code-standards
/
index.html
1800 lines (1263 loc) · 105 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
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
---
layout: main
title: Front-end Code Standards & Best Practices
meta:
description: Roundarch Isobar's Coding Standards and Frontend development Best Practices
keywords: Roundarch Isobar code standards, coding standards, frontend development, frontend best practices, html code standards, html5 code standards, css code standards, best code practices, development, frontend development
---
<!-- #### GENERAL SECTION #### -->
<h1>Front-end Code Standards & Best Practices</h1>
<h2>Overview</h2>
<p>This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Roundarch Isobar. It is to be readily available to anyone who wishes to check the iterative progress of our best practices.</p>
<p>This document's primary motivation is two- fold: <tt>1)</tt> code consistency and <tt>2)</tt> best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. By adhering to best practices, we ensure optimized page loading, performance and maintainable code.</p>
<section id="general">
<div class="intro has-icon">
<img class="icon" src="img/layout/icon-curly.png" alt="{}" />
<h1>General Guidelines</h1>
</div>
<h2>Pillars of Front-end Development</h2>
<ol>
<li>Separation of presentation, content, and behavior.</li>
<li><a href="http://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml">Markup should be well-formed, semantically correct</a> and <a href="#_appendix_a_validators">generally valid</a>.</li>
<li><a href="http://icant.co.uk/articles/pragmatic-progressive-enhancement/">Javascript should progressively enhance the experience</a>.</li>
</ol>
<h2>General Practices</h2>
<h3>Indentation</h3>
<p>For all code languages, we require indentation to be done via soft tabs (using the space character). Hitting <em>Tab</em> in your text editor shall be equivalent to <b>four spaces</b>.</p>
<h3>Readability vs Compression</h3>
<p>We prefer readability over file-size savings when it comes to maintaining existing files. Plenty of whitespace is encouraged, along with ASCII art, where appropriate. There is no need for any developer to purposefully compress HTML or CSS, nor obfuscate JavaScript.</p>
<p>We will use server-side or build processes to automatically minify and gzip all static client-side files, such as CSS and JavaScript.</p>
</section>
<!-- #### MARKUP SECTION #### -->
<section id="markup">
<div class="intro has-icon">
<img class="icon" src="img/layout/icon-curly.png" alt="{}" />
<h1>Markup</h1>
<p>The first component of any web page is the tag-based markup language of <abbr title="HypterText Markup Language">HTML</abbr>. The Hyper Text Markup Language (HTML) has a sordid history but has come into its own in the last few years. After a lengthy experimentation with the XML-based XHTML variant the industry has accepted that HTML is the future of the web.</p>
<p>Markup defines the structure and outline of a document and offers a structured content. Markup is not intended to define the look and feel of the content on the page beyond rudimentary concepts such as headers, paragraphs, and lists. The presentation attributes of HTML have all been deprecated and style should be contained in <a href="#css">style sheets</a>.</p>
</div>
<h2 id="html5">HTML5</h2>
<p><a href="http://www.ibm.com/developerworks/library/wa-webstandards/index.html">HTML5</a> is a new version of HTML and XHTML. The <a href="http://www.w3.org/TR/html5/">HTML5 draft</a> specification defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of <em>web applications</em>, an area previously not adequately covered by HTML. (<a href="http://html5.org/">source</a>).</p>
<p>We will use the HTML5 Doctype and HTML5 features when appropriate.</p>
<p>We will test our markup against the <a href="http://validator.w3.org/">W3C validator</a>, to ensure that the markup is well formed. 100% valid code is not a goal, but validation certainly helps to write more maintainable sites as well as debugging code. <b>Roundarch Isobar does not guarantee code is 100% valid, but instead assures the cross-browser experience is fairly consistent</b>.</p>
<h3 id="h5bp">Template</h3>
<p>For HTML5 Documents we use a fork of <a href="http://html5boilerplate.com/">H5BP</a> modified for our own project needs. <a href="https://github.com/isobar-idev/html5-boilerplate">Fork the Github repository</a>.</p>
<h2>Doctype</h2>
<p>A proper Doctype which triggers standards mode in your browser should always be used. Quirks mode should always be avoided.</p>
<p>A nice aspect of HTML5 is that it streamlines the amount of code that is required. Meaningless attributes have been dropped, and the <code>DOCTYPE</code> declaration has been simplified significantly. Additionally, there is no need to use <code>CDATA</code> to escape inline JavaScript, formerly a requirement to meet XML strictness in XHTML.</p>
<figure class="preCode">HTML5 Doctype</figure>
<textarea class="brush:html">
<!DOCTYPE html>
</textarea>
<h3>Character Encoding</h3>
<p>All markup should be delivered as UTF-8, as its the most friendly for internationalization. It should be designated in both the HTTP header and the head of the document.</p>
<p>Setting the character set using <meta> tags.</p>
<textarea class="brush:html">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</textarea>
<p>In HTML5, just do:</p>
<textarea class="brush:html">
<meta charset="utf-8">
</textarea>
<!--<h3>Use of new semantic elements</h3>
<p>Elements such as <code>header, footer, section, article</code>, and others, can be used multiple times on a page, and more than once within one or the other even. In cases where there will be more than one of the same element, that is used for the same thing such as using <code>article</code> for each blog post of a page and each article having a <code>header</code> and <code>footer</code>, adding a class to them can help separate them from any other places you may use these elements on the page. That way you can target the elements more specifically in your CSS. However this is not always necessary, depending on the structure of the page and the way you define your selectors.</p>
<textarea class="brush:html">
<header>
<h1>Our Blog</h1>
</header>
<article>
<header>
<h1>This is the best blog title ever</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<article>
<header>
<h1>This is the second best blog title</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
</textarea>
<p>Structuring pages cleanly allows for simplified selectors which keep the specificity level low making it easier to override selectors later on as the stylesheet grows.</p>
<textarea class="brush:css">
header h1 { color: red; }
article header h1 { color: blue; }
</textarea>-->
<h2>General Markup Guidelines</h2>
<p>The following are general guidelines for structuring your HTML markup. Authors are reminded to always use markup which represents the semantics of the content in the document being created.</p>
<ul>
<li>Use actual P elements for paragraph delimiters as opposed to multiple BR tags.</li>
<li>Make use of DL (definition lists) and BLOCKQUOTE, when appropriate.</li>
<li>Items in list form should always be housed in a UL, OL, or DL, never a set of DIVs or Ps.</li>
<li>Use <code>label</code> fields to label each form field, the <code>for</code> attribute should associate itself with the input field, so users can click the labels.
<code>cursor:pointer;</code> on the label is wise, as well. <sup><a href="http://www.accessifyforum.com/viewtopic.php?t=1926#14178">note 1</a>
<a href="http://www.accessifyforum.com/viewtopic.php?t=6738">note 2</a></sup>
</li>
<li>Do not use the size attribute on your input fields. The size attribute is relative to the font-size of the text inside the input. Instead use css width.</li>
<li>Place an html comment on some closing div tags to indicate what element you're closing. It will help when there is lots of nesting and indentation.</li>
<li>Tables shouldn't be used for page layout.</li>
<li>Use <a href="http://en.wikipedia.org/wiki/Microformat">microformats</a> and/or Microdata where appropriate, specifically hCard and adr.</li>
<li>Make use of THEAD, TBODY, and TH tags (and Scope attribute) when appropriate.
<figure class="preCode">Table markup with proper syntax (THEAD,TBODY,TH [scope])</figure>
<textarea class="brush:html">
<table summary="This is a chart of year-end returns for 2005.">
<thead>
<tr>
<th scope="col">Table header 1</th>
<th scope="col">Table header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table data 1</td>
<td>Table data 2</td>
</tr>
</tbody>
</table>
</textarea>
</li>
<li>Always use title-case for headers and titles. Do not use all caps or all lowercase titles in markup, instead apply the CSS property <code>text-transform:uppercase/lowercase</code>.</li>
</ul>
<h3>Quoting Attributes</h3>
<p>The HTML5 specification defines quotes around attributes as optional. For consistency with attributes that accept whitespace, all attributes should be quoted. </p>
<textarea class="brush:html">
<p class="line note" data-attribute="106">This is my paragraph of special text.</p>
</textarea>
</section>
<!-- #### CSS SECTION #### -->
<section id="css">
<div class="intro has-icon">
<img class="icon" src="img/layout/icon-curly.png" alt="{}" />
<h1>CSS</h1>
<p>The second component of a web page is the presentation information contained in the Cascading Style Sheet (<abbr title="Cascading Style Sheets">CSS</abbr>.) Web browsers successful implementation of CSS has given a whole generation of web authors site-wide control over the look and feel of their web sites.</p>
<p>Just as the information on a web page is semantically described in the <a href="#markup">HTML Markup</a>, CSS describes all presentation aspects of the page via a description of its visual properties. CSS is powerful in that these properties are mixed and matched via identifiers to control the page's layout and visual characteristics through the layering of style rules (the "cascade").</p>
</div>
<h3>General Coding Principles</h3>
<ul>
<li>Add CSS through external files, minimizing the # of files, if possible. It should always be in the HEAD of the document.</li>
<li>Use the LINK tag to include, <a href="http://blog.amodernfable.com/2008/01/21/thoughts-on-linking-to-stylesheets/">never the @import.</a>
<figure class="preCode">Including a stylesheet</figure>
<textarea class="brush:html">
<link rel="stylesheet" type="text/css" href="myStylesheet.css" />
</textarea>
<figure class="preCode">Don't use inline styling</figure>
<textarea class="brush:html">
<p style="font-size: 12px; color: #FFFFFF">This is poor form, I say</p>
</textarea>
</li>
<li>Don't include styles inline in the document, either in a style tag or on the elements. It's harder to track down style rules.</li>
<li>Use <a href="http://necolas.github.com/normalize.css/">normalize.css</a> to make rendering more consistent across browsers.</li>
<li>Use a font-normalization file like <a href="http://developer.yahoo.com/yui/fonts/">YUI fonts.css</a></li>
<li>Elements that occur only once inside a document should use IDs, otherwise, use classes.</li>
<li>Understand <a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html">cascading and selector specificity</a> so you can write very terse and effective code.</li>
<li>Write selectors that are optimized for speed. Where possible, avoid expensive CSS selectors. For example, avoid the * wildcard selector and don't qualify ID selectors (e.g. <code>div#myid</code>) or class selectors (e.g. <code>table.results</code>.) This is especially important with web applications where speed is paramount and there can be thousands or even tens of thousands of DOM elements. More on <a href="https://developer.mozilla.org/en/Writing_Efficient_CSS">writing efficient CSS on the MDC</a>.</li>
</ul>
<h3>CSS Box Model</h3>
<p>Intimate knowledge and understanding of the CSS and browser-based box model is necessary for conquering the fundamentals of CSS layouts.</p>
<figure class="extra">
<img src="img/box_model.png" alt="CSS Box Model" title="CSS Box Model" />
<figcaption><small>3D CSS Box Model</small> diagram by <a href="http://hicksdesign.co.uk/boxmodel/">Jon Hicks</a>.</small></figcaption>
</figure>
<h3>CSS Validation</h3>
<p>We typically don't use the <a href="http://jigsaw.w3.org/css-validator/">W3C validator</a>.</p>
<h3>CSS Formatting</h3>
<p>At minimum, format CSS with selectors on one line and each property on its own line. The declarations are indented. </p>
<p>As an enhancement to that style, related or child styles and additional 2 or 4 spaces. That allows for hierarchical scanning and organization and makes (for some people) an easier-to-read style sheet.</p>
<p>Also, if you specify multiple selectors, it's a good idea to start each on new line. This prevents lines from growing long and improves readability as well as version control workflow.</p>
<textarea class="brush:css">
.post-list li a{
color:#A8A8A8;
}
.post-list li a:hover{
color:#000;
text-decoration:none;
}
.post-list li .author a,
.post-list li .author a:hover{
color:#F30;
text-transform:uppercase;
}
</textarea>
<p>For multiple author environments, single line CSS should be avoided because it can cause issues with version control. </p>
<h4>Alphabetize</h4>
<p>If you're performance obsessed <a href="http://www.barryvan.com.au/2009/08/css-minifier-and-alphabetiser/">alphabetizing CSS properties increases the odds of larger repeatable patterns being present to aid in GZIP compression</a>. </p>
<h3>Classes vs. IDs</h3>
<p>You should only give elements an ID attribute if they are unique. They should be applied to that element only and nothing else. Classes can be applied to multiple elements that share the same style properties. Things that should look and work in the same way can have the same class name.</p>
<textarea class="brush:html">
<ul id="categories">
<li class="item">Category 1</li>
<li class="item">Category 2</li>
<li class="item">Category 3</li>
</ul>
</textarea>
<h3>Naming Conventions for Selectors</h3>
<p>It is always preferable to name something, be it an ID or a class, by the nature of <strong>what it is</strong> rather than by <strong>what it looks like</strong>. For instance, a class name of <code>bigBlueText</code> for a special note on a page is quite meaningless if it has been changed to have a small red text color. Using a more intelligent convention such as <code>noteText</code> is better because when the visual style changes it still makes sense.</p>
<h3>Selectors</h3>
<p>The <a href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215/">CSS Selectors Level 3</a> specification introduces a whole new set of <a href="http://www.w3.org/TR/css3-selectors/#selectors">CSS Selectors</a> that are extremely useful for better selection of elements.</p>
<h4>Pseudo-classes</h4>
<p><a href="http://www.w3.org/TR/css3-selectors/#pseudo-classes">Pseudo-classes</a> enable you to dynamically style content. Some pseudo-classes have existed since CSS1 (<code>:visited, :hover</code>, etc.) and CSS2 (<code>:first-child, :lang</code>). As of CSS3, 16 new pseudo-classes have been added to the list and are especially useful for styling dynamic content. <a href="http://www.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/">Learn how to use pseudo-classes in-depth</a>.</p>
<h4>Combinators & Attribute Selectors</h4>
<p><a href="http://www.w3.org/TR/css3-selectors/#combinators">Combinators</a> provide shortcuts for selecting elements that are a descendant element, a child element, or an element's sibling.</p>
<p><a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">Attribute Selectors</a> are great for finding elements that have a specific attribute and/or specific value. Knowledge of regular expressions helps with attribute selectors. </p>
<h4>Specificity</h4>
<p>Browsers <a href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215/">calculate a selector's specificity</a> to determine which CSS rule should apply. If two selectors apply to the same element, the one with the <strong>higher specificity wins</strong>.</p>
<p>IDs have a higher specificity than attribute selectors do, and class selectors have higher specificity than any number of element selectors. Always try to use IDs to increase the specificity. There are times when we may try to apply a CSS rule to an element and it does not work no matter what we try. This is likely because the specificity of the selector used is lower than another one and the properties of the higher one are taking precedence over those you want to apply. This is more common in working with larger more complex stylesheets. It isn't a big issue with smaller projects usually.</p>
<h5>Calculating specificity</h5>
<p>When working with a large and complex stylesheet it helps to know how to calculate the value of a selector's specificity, to save you time and to make your selectors more efficient.</p>
<p>Specificity is calculated by counting various components of your CSS and expressing them in a form (a,b,c,d).</p>
<ul>
<li>Element, Pseudo Element: d = 1 – (0,0,0,1)</li>
<li>Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)</li>
<li>Id: b = 1 – (0,1,0,0)</li>
<li>Inline Style: a = 1 – (1,0,0,0)</li>
</ul>
<p>However, it may be better to use a specificity calculator.</p>
<ul>
<li><a href="http://specificity.keegan.st/">Specificity Calculator</a></li>
<li><a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">Some things you should know about specificity</a></li>
<li><a href="http://www.brunildo.org/test/IEASpec.html#a">IE Specificity bugs</a></li>
</ul>
<p>Using <code>!important</code> overrides all specificity no matter how high it is. We like to avoid using it for this reason. Most of the time it is not necessary. Even if you need to override a selector in a stylesheet you don't have access to, there are usually ways to override it without using !important. Avoid using it if possible.</p>
<h3>Pixels vs. Ems</h3>
<p>We use the <code>px</code> unit of measurement to define <code>font size</code>, because it offers absolute control over text. We realize that using the <code>em</code> unit for font sizing used to be popular, to accommodate for Internet Explorer 6 not resizing pixel based text. However, all major browsers (including <abbr title="Internet Explorer 7">IE7</abbr> and <abbr title="Internet Explorer 8">IE8</abbr>) now support text resizing of pixel units and/or full-page zooming. Since <abbr title="Internet Explorer 6">IE6</abbr> is largely considered deprecated, pixels sizing is preferred. Additionally, unit-less <code>line-height</code> is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the <code>font-size</code>.</p>
<figure class="preCode">Correct</figure>
<textarea class="brush:css">
#selector {
font-size: 13px;
line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */
}
</textarea>
<figure class="preCode">Incorrect</figure>
<textarea class="brush:css">
/* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
#selector {
font-size: 0.813em;
line-height: 1.25em;
}
</textarea>
<h3>Internet Explorer Bugs</h3>
<p>Inevitably, when all other browsers appear to be working correctly, any and all versions of Internet Explorer will introduce a few nonsensical bugs, delaying time to deployment. While we encourage troubleshooting and building code that will work in all browsers without special modifications, sometimes it is necessary to use conditional <code>if IE</code> comments for CSS hooks we can use in our stylesheets. <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">Read more on paulirish.com</a></p>
<figure class="preCode">Fixing IE</figure>
<textarea class="brush:html">
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
</textarea>
<textarea class="brush:css">
.box { float: left; margin-left: 20px; }
.ie6 .box { margin-left: 10px; }
</textarea>
<p>If you're using HTML5 (and the <a href="#h5bp">HTML5 Boilerplate</a>) we encourage the use of the <a href="http://www.modernizr.com/">Modernizer</a> JavaScript library and this pattern:</p>
<textarea class="brush:html">
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
</textarea>
<h3>Shorthand</h3>
<p>In general, CSS shorthand is preferred because of its terseness, and the ability to later go back and add in values that are already present, such as the case with margin and padding. Developers should be aware of the <abbr title="Top Right Bottom Left">TRBL</abbr> acronym, denoting the order in which the sides of an element are defined, in a clock-wise manner: Top, Right, Bottom, Left. If <em>bottom</em> is undefined, it inherits its value from <em>top</em>. Likewise, if <em>left</em> is undefined, it inherits its value from <em>right</em>. If only the <em>top</em> value is defined, all sides inherit from that one declaration.</p>
<p class="normalize">For more on reducing stylesheet code redundancy, and using CSS shorthand in general:</p>
<ul>
<li><a href="http://qrayg.com/journal/news/css-background-shorthand">http://qrayg.com/journal/news/css-background-shorthand</a></li>
<li><a href="http://sonspring.com/journal/css-redundancy">http://sonspring.com/journal/css-redundancy</a></li>
<li><a href="http://dustindiaz.com/css-shorthand">http://dustindiaz.com/css-shorthand</a></li>
</ul>
<h3>Images</h3>
<ul>
<li>For repeating images, use <a href="http://www.iandevlin.com/blog/2010/03/webdev/fading-issue-with-repeating-background-transparent-image-in-internet-explorer">something larger than 1x1 pixels</a></li>
<li>You should never be using spacer images.</li>
<li>Use <a href="#_leverage_css_sprites">CSS sprites generously</a>. They make hover states easy, improve page load time, and reduce carbon dioxide emissions.</li>
<li>Typically, all images should be sliced with a transparent background (PNG8). All should be cropped tightly to the image boundaries.
<ul>
<li>However, the logo should always have a background matte and have padding before the crop. (so other people can hotlink to the file)</li>
</ul>
</li>
</ul>
<h3>Color Management</h3>
<ul>
<li>Verify that all members on your team have consistent color management settings.</li>
<ul>
<li>Any given two monitors most likely display the colors differently, but sRGB color profile must be your default.</li>
<li>When you open files in Photoshop, pay attention to Color Profile warnings and notify team members when Photoshop is suggesting to convert an image to a different profile.</li>
</ul>
<li>Never embed a color profile in your images.
<ul>
<li>When you Save for Web and Devices from Photoshop, be sure to uncheck "Embed Color Profile."</li>
</ul> </li>
</ul>
<hr />
<h3>General Text and Font Styling</h3>
<h4>Headings</h4>
<ul>
<li>Define default styling for <code>h1-h6</code> headings including headings as links. It's helpful to declare these at the top of your CSS document, and modify them with as necessary for consistency across the site.</li>
<li>Headings should show a hierarchy indicating different levels of importance from the top down starting with h1 having the largest font size.</li>
<li>SEO: To get a rough idea of how your page hierarchy is organized and read, use your Developer Toolbar to disable CSS. You'll end up with a text-based view of all your <code>h1-h6</code> tags, <code>strong</code>, <code>em</code>, etc.</li>
</ul>
<h4>Links</h4>
<ul>
<li>Default styles for links should be declared and different from the main text styling, and with differing styles for hover state.</li>
<li>When styling links with underlines use <code>border-bottom</code> and some padding with <code>text-decoration: none;</code>. This just looks better.</li>
</ul>
<!-- #### WEB TYPOGRAPHY SECTION #### -->
<!--========================*\
oh rly? ya rly!
\ ___, ___ / _,_ no rly?
{O,0} {-.-} {o,O} /
|)__) |)~(| (~~(|
-----"-"-----"-"-----"-"-----,_
=========================== -->
<h2>Web Typography</h2>
<p>The use of custom fonts and typefaces on the web has been growing more popular the past few years. with native browser support on the rise and several supporting services and APIs now available there is real momentum in this space. Each of these approaches have their own pros and cons. Before a project kicks off it's best to do research into technology and licensing limitations to choose the proper approach for the specific project.</p>
<p>All of these approaches have drawbacks in code overhead, development time and performance (clock and perceived). Familiarizing yourself with these issues and communicating them to the other members of the team and to the client will save significant problems later on in the project.</p>
<p>Listed here are some popular methods of embed custom fonts, list in the order of our preference for implementation.</p>
<h3>@font-face</h3>
<p>The <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/#font-face-rule">@font-face at-rule</a> allows you to define custom fonts. It was first defined in the CSS2 specification, but was removed from CSS2.1. Currently, it's a draft recommendation for CSS3.</p>
<p>Our first and most preferred choice for customizing fonts on the web is @font-face, simply because it is part of the CSS Fonts Module working draft which means it will continue to grow in popularity as browser support grows, and ease of use for it improves as it becomes more stable.</p>
<p>For now, when using <code>@font-face</code> it's recommended to declare the source for each font format. This is important if you want it to work in the most number of browsers, though it is not a requirement for use.</p>
<p class="normalize">The font formats included in the specification are:</p>
<ul>
<li><strong>woff</strong>: WOFF (Web Open Font Format)</li>
<li><strong>ttf</strong>: TrueType</li>
<li><strong>ttf</strong>, <strong>otf</strong>: OpenType</li>
<li><strong>eot</strong>: Embedded OpenType</li>
<li><strong>svg</strong>, <strong>svgz</strong>: SVG Font</li>
</ul>
<h4>Bulletproof @font-face</h4>
<p>For full cross-browser compatibility use Fontsprings' new <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">bulletproof @font-face syntax</a> (<em>latest version as of 2/21/11</em>).</p>
<textarea class="brush:css">
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: <font-weight>;
font-style: <font-style>;
// etc.
}
</textarea>
<p>Here's a <a href="http://www.thecssninja.com/demo/css_fontface/">working demo</a> using this version of implementation.</p>
<h4>Cross-Browser Compatibility</h4>
<p>Safari, <abbr title="Internet Explorer version 6-9">IE 6-9</abbr>, <abbr title="Internet Explorer Compatibility Modes">IE 9 Compatibility Modes</abbr>, Firefox, Chrome, iOS, Android, Opera</p>
<h4>Prevent Compatibility Mode</h4>
<p>Sometimes <abbr title="Internet Explorer">IE</abbr> can have a mind of its own and will switch to compatibility mode without you knowing. Include the following in the site <code><head></code> to prevent your site from defaulting to compatibility mode:</p>
<textarea class="brush:html">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</textarea>
<hr />
<h4>Tips for @font-face</h4>
<ul>
<li>IE 6–8 will only accept a TrueType font packaged as an EOT.</li>
<li>font-weight and font-style have different meanings within <code>@font-face</code>.
Declarations where <code>font-weight:bold;</code> means this is the bold version of this typeface, rather than apply bold to this text</li>
<li><a href="http://paulirish.com/2010/font-face-gotchas/">@font-face gotchas</a></li>
</ul>
<strong>Pros</strong>
<ul>
<li>Easy to implement</li>
<li>Large variety of APIs</li>
<li>Customizable</li>
<li>Easy to add to elements</li>
<li>Nothing required besides CSS</li>
<li>Is currently part of the working draft of CSS Fonts Module 3</li>
</ul>
<strong>Cons</strong>
<ul>
<li>Limited browser support if used improperly</li>
<li>Some older versions of modern browsers (Chrome, Opera) don't always render well. Text can have rough edges. <em>**I have not been able to confirm whether this is still an issue now or not.</em></li>
</ul>
<hr />
<h3>Google WebFonts API & Font Loader</h3>
<p>There are two options available with <a href="https://code.google.com/apis/webfonts/">Google Webfonts</a>. Both options have their downsides of course but they can be just as good to use as <code>@font-face</code>, it all depends on a projects needs.</p>
<h4>Webfonts API</h4>
<p><a href="https://code.google.com/apis/webfonts/docs/getting_started.html">Google's Webfonts API</a> essentially does the same thing as <code>@font-face</code>, it just does all the hard work for you, providing wider browser support.The major drawback to this method is the very small font library it uses. To make it work all you need to do is include the stylesheet + the font name.</p>
<textarea class="brush:html">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
</textarea>
<p class="normalize">Then define a style for the selector you want to apply the font to:</p>
<textarea class="brush:css">
CSS selector {
font-family: 'Font Name', serif;
}
</textarea>
<h3>Webfont Loader</h3>
<p>Another option Google offers is the <a href="https://code.google.com/apis/webfonts/docs/webfont_loader.html">Webfont Loader</a> which is a JavaScript library that allows for more control than the font API does. You can also use multiple webfont providers like Typekit. To use it include the script in your page:</p>
<textarea class="brush:javascript">
<script type="text/javascript">
WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ]} };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</textarea>
<p class="normalize">Including the webfont.js file this way is faster if not already using the Ajax APIs. Otherwise you should use this:</p>
<textarea class="brush:javascript">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("webfont", "1");
google.setOnLoadCallback(function() {
WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ]} });
});
</script>
</textarea>
<p>By using the Webfont Loader you have more ability to customize things including the use of more fonts, not just those in the Google Webfont library which is not large. However, it then requires you to load JavaScript, sacrificing one thing for another.</p>
<strong>Pros</strong>
<ul>
<li>Very easy to implement</li>
<li>Wide browser support</li>
<li>Can be combined with Typekit</li>
<li>Customizable when using the font loader</li>
<li>API does the same thing as <code>@font-face</code></li>
</ul>
<strong>Cons</strong>
<ul>
<li>Very small font library if using the font API</li>
<li>Using the Webfont Loader requires the use of JavaScript to work</li>
<li>Most browsers will load the rest of the page first, leaving a blank space where the text would be, or otherwise show the fallback option if one exists, until the page fully loads.</li>
<li>Some fonts in the webfont library render poorly on Windows</li>
</ul>
<hr />
<h3>Cufon</h3>
<p>If you choose to use Cufon, it is highly recommended you use the <a href="http://cufon.shoqolate.com/js/cufon-yui.js">Cufon compressed version</a>. You will need to convert your font using the <a href="http://cufon.shoqolate.com/generate/">generator</a>.</p>
<textarea class="brush:javascript">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="YourFont.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1'); // Works without a selector engine
Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7
</script>
</textarea>
<p>We recommend using Cufon sparingly since it can cause a lot of overhead if applied to a large amount of text. For more info visit the <a href="https://github.com/sorccu/cufon/wiki/">Cufon Wiki</a>.</p>
<strong>Pros</strong>
<ul>
<li>Wide browser support</li>
<li>Renders well in supported browsers</li>
<li>Customizable</li>
<li>Easy to implement</li>
</ul>
<strong>Cons</strong>
<ul>
<li>Requires use of JS to work</li>
<li>Text can't be selected that uses it</li>
<li>Not all characters can be used</li>
<li>Customization can be a pain</li>
<li>Not always easy to apply to multiple elements, especially when adding effects like hovers</li>
</ul>
<hr />
<h3>Typekit</h3>
<p>Using <a href="https://typekit.com">Typekit</a> has its advantages and shouldn't be completely disregarded when choosing which method to use for adding custom fonts to a web site. It has strong platform integration and is a scalable and popular service. It can be used with Google Webfonts and is easily added to WordPress, Posterous, Typepad, and other similar CMS powered sites.</p>
<p>However, full use of <a href="https://typekit.com/plans">Typekit doesn't come without a cost</a>. If you need to use it on more than 2 sites or on a site that gets a high amount of pageviews you will need to pay an annual cost of $49.99, and for sites with a million+ pageviews it costs twice as much. Though, you probably have the money to cover the cost if you're getting over a million pageviews. If not then you may want to rethink your business model.</p>
<strong>Pros</strong>
<ul>
<li>Large font library, including Adobe fonts</li>
<li>Easy implementation</li>
<li>Google Webfont API and blogging platform integration</li>
<li>Free plan has limits but doesn't expire</li>
</ul>
<strong>Cons</strong>
<ul>
<li>Requires JavaScript to use</li>
<li>Limited font library access without paying</li>
<li>Free and cheapest plans only allow use on 1-2 web sites and 2-5 fonts per site</li>
<li>You have to pay to use it on more than 1 site</li>
</ul>
<hr />
<h3>Scalable Inman Flash Replacement (sIFR)</h3>
<p>We do not recommend that you use this method but because of how widely used it is we felt it was necessary to include so you could make a properly informed decision when choosing which method to go with for customized webfonts.</p>
<p>Despite its wide popularity among web designers, and its decent support in most browsers, the drawbacks to its use outweigh its convenience. The biggest and most obvious reason to not use sIFR is the fact that it uses Flash. Plus, in order for the Flash to even work, it requires JavaScript and the scripts must be loaded before the text you use it on is visible on the page. Not to mention that it increases page load time, and can cause a slow site to be even slower.</p>
<p class="normalize">We'll let you do the math here.</p>
<strong>Pros</strong>
<ul>
<li>Text can be selected</li>
<li>Support on most browsers</li>
<li>Renders okay on supported browsers</li>
</ul>
<strong>Cons</strong>
<ul>
<li>It uses Flash</li>
<li>Requires JavaScript for the Flash to work</li>
<li>It's Flash!</li>
<li>Text doesn't appear until the scripts load</li>
<li>...and it's Flash...</li>
</ul>
<hr />
<h3>Font Licensing</h3>
<p>Even though you can transform just about any font into a web font file, you should still make sure it is legally okay for you to do so. Many foundries have updated their conditions to specify how their fonts can be used on the web. View <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=UNESCO_Font_Lic">Font Licensing and Protection Details</a> for more information.</p>
<hr />
<h3>Specifications & Font File Formats</h3>
<ul>
<li><a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">CSS 2 Fonts</a> – May 1998 (Obsolete)</li>
<li><a href="http://www.w3.org/TR/css3-fonts/">CSS 3 Fonts</a> – Working Draft 2009 </li>
<li><a href="http://www.w3.org/TR/css3-fonts/">CSS Fonts Module</a> – W3C Working Draft March 2011</li>
<li><a href="http://www.w3.org/TR/WOFF/">WOFF Font Format</a> – Working Draft 2010</li>
<li><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font Format</a></li>
<li><a href="http://www.w3.org/Submission/EOT/">Embedded Open Type (EOT) File Format</a></li>
<li><a href="http://www.microsoft.com/typography/otspec/">Microsoft Open Type Specification</a></li>
<li><a href="http://www.adobe.com/devnet/opentype/afdko/topic_feature_file_syntax.html#9.e">OpenType Feature File Specification</a> </li>
<li><a href="http://developer.apple.com/fonts/TTRefMan/">Apple True Type Reference</a> </li>
</ul>
<h3>Use CSS3</h3>
<p>You can do a lot of new things with the added features in the CSS3 spec, many of which are not yet fully supported by all the major browsers. That doesn't
mean they can't be used today. For the things that aren't supported there are fallback libraries or other 'polyfills' which you can use to fill in the holes where
browsers may be lacking some support of a new feature.</p>
<p>There are also browser specific properties or prefixes that can be used to style things too. We recommend using <a href="http://prefixr.com">Prefixr.com</a> to
make sure you include all the different prefixed browser properties for the sake of cross-browser support.</p>
</section>
<!-- #### JAVSCRIPT SECTION #### -->
<section id="js">
<div class="intro has-icon">
<img class="icon" src="img/layout/icon-curly.png" alt="{}" />
<h1>JavaScript</h1>
<p>JavaScript is the third major component of a web page. JavaScript code, when properly applied to a web page, enhances the overall user and browser-based experience through attaching to events and controlling the overall behavior layer.</p>
<p>JavaScript has seen an explosion in popularity in recent years as powerful new browser implementations have finally empowered the creation of full on browser-based web applications. Additionally, careful use of JavaScript allows for full manipulation and control over the other two components of web page authoring, <a href="#markup">HTML Markup</a> and <a href="#css">CSS</a>. Today the structure of pages and the visual styles of pages can be manipulated real time without full web page refreshes.</p>
</div>
<h2>JavaScript Libraries</h2>
<p class="normalize">We primarily develop new applications in <a href="http://api.jquery.com/">jQuery</a>, though we have expertise in plain JavaScript as well as all major modern javascript libraries.</p>
<h2>General Coding Principles</h2>
<ul>
<li>99% of code should be housed in external javascript files. They should be included at the END of the BODY tag for maximum page performance.</li>
<li>Don't rely on the user-agent string. Do proper feature detection. (More at <a href="http://diveintohtml5.info/detect.html">Dive Into HTML5: Detection</a> & <a href="http://api.jquery.com/jQuery.support/">jQuery.support docs</a>)</li>
<li>Don't use document.write().</li>
<li>All Boolean variables should start with "is".
<figure class="preCode">Test for positive conditions</figure>
<textarea class="brush:js">
isValid = (test.value >= 4 && test.success);
</textarea>
</li>
<li>Name variables and functions logically: For example: <code>popUpWindowForAd</code> rather than <code>myWindow</code>.</li>
<li>Don't manually minify. With the exception of the traditional <code>i</code>, etc. for <code>for</code> loops, variables should be long enough to be meaningful.</li>
<li>Documentation should follow <a href="http://www.naturaldocs.org/documenting.html">NaturalDocs</a> structure.</li>
<li>Constants or configuration variables (like animation durations, etc.) should be at the top of the file.</li>
<li>Strive to create functions which can be generalized, take parameters, and return values. This allows for substantial code reuse and, when combined with includes or external scripts, can reduce the overhead when scripts need to change. For example, instead of hard coding a pop-window with window size, options, and url, consider creating a function which takes size, url, and options as variables.
</li>
<li>Comment your code! It helps reduce time spent troubleshooting JavaScript functions.</li>
<li>Don't waste your time with <code><!-- --></code> comments surrounding your inline javascript, unless you care about Netscape 4. :)</li>
<li>Organize your code as an <a href="http://kaijaeger.com/articles/the-singleton-design-pattern-in-javascript.html">Object Literal/Singleton</a>, in the <a href="http://www.yuiblog.com/blog/2007/06/12/module-pattern/">Module Pattern</a>, or as an <a href="http://mckoss.com/jscript/object.htm">Object with constructors</a></a>.</li>
<li>Minimize global variables - the less globals you create, the better. Generally one, for your application namespace, is a good number.
<figure class="preCode">When specifying any global variable, clearly identify it</figure>
<textarea class="brush:js">
window.globalVar = { ... }
</textarea>
</li>
</ul>
<h3>White-space</h3>
<p>In general, the use of whitespace should follow longstanding English reading conventions. Such that, there will be one space after each comma and colon (and semi-colon where applicable), but no spaces immediately inside the right and left sides of parenthesis. In short, we advocate readability within reason. Additionally, braces should always appear on the same line as their preceding argument.</p>
<p>Consider the following examples of a JavaScript for-loop...</p>
<figure class="preCode">Correct</figure>
<textarea class="brush:js">
for (var i = 0, j = arr.length; i < j; i++) {
// Do something.
}
</textarea>
<figure class="preCode">Incorrect</figure>
<textarea class="brush:js">
for ( var i = 0, j = arr.length; i < j; i++ )
{
// Do something.
}
</textarea>
<figure class="preCode">Also incorrect</figure>
<textarea class="brush:js">
for(var i=0,j=arr.length;i<j;i++){
// Do something.
}
</textarea>
<h3>plugins.js and script.js</h3>
<p>Starting with H5BP we're presented with two files, plugins.js and script.js. This section outlines basic usage of these two files.</p>
<h4>plugins.js</h4>
<p>Plugins.js is meant to hold all of a sites plugin code. Instead of linking to many different files, we can improve performance by including plugin code directly in this one file. There can and should be exceptions to this usage. An extremely large plugin only used on one rarely visited page, for example, might be better off in a separate download, only accessed on the target page. Most of the time, however, it's safe to just paste in minified versions of all your plugins here for easy access. </p>
<p>Here's what an example file might looks like, including a small table of contents. This can serve as a handy guide for what plugins are in use, including URLs for documentation, rationale for use and the like.</p>
<textarea class="brush:js">
/* PLUGIN DIRECTORY
What you can find in this file [listed in order they appear]
1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
2.) jQuery Easing Plugin - http://gsgd.co.uk/sandbox/jquery/easing/
3.) jQuery Ajax Form plugin - http://jquery.malsup.com/form/#download
4.) jQuery validation plugin (form validation) - http://docs.jquery.com/Plugins/Validation
-password strength
5.) Styled Selects (lightweight) - http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
*/
/**
* 1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
* @author Alexander Farkas
* v. 1.21
*/
(function($) {
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
//SNIPPED
};
})(jQuery);
/**
* 2.) jQuery Easing Plugin (we're not using jQuery UI as of yet) - http://gsgd.co.uk/sandbox/jquery/easing/
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
//SNIPPED
});
;(function($) {
$.fn.ajaxSubmit = function(options) {
//SNIPPED
}
})(jQuery);
/*
* jQuery Styled Select Boxes
* version: 1.1 (2009/03/24)
* @requires jQuery v1.2.6 or later
*
* Examples and documentation at: http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
*
* Copyright (c) 2008 Lasar Liepins, liepins.org, liepins@gmail.com
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
*/
jQuery.fn.styledSelect = function(settings) {
//SNIPPED
return this;
};
</textarea>
<h4>Script.js</h4>
<p>Script.js is meant to hold your site or application code. Again, this isn't always the best solution as larger teams and or larger, more feature rich projects can really benefit from breaking out application code into module or feature specific files. For smaller sites, simpler applications, and initial prototyping, however, dropping your work into scripts.js makes sense.</p>
<p>A simplified example, using the <a href='http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/'>Markup-based unobtrusive comprehensive DOM-ready execution</a> pattern, might look something like the following:</p>
<textarea class="brush:js">
/* Name: Demo
Author: Demo King */
/*demo namespace*/
demo = {
common : {
init : function(){
//initialize
},
finalize : function(){
//finalize
},
config : {
prop : "my value",
constant : "42"
}
},
mapping : {
init : function(){
//create a map
},
geolocate : function(){
//geolocation is cool
},
geocode : function(){
//look up an address or landmark
},
drawPolylines : function(){
//draw some lines on a map
},
placeMarker : function(){
//place markers on the map
}
}
}
</textarea>
<h2>Variables, ID & Class</h2>
<p>All JavaScript variables shall be written in either completely lowercase letter or camelCase. The one exception to this are Constructor functions, which are capitalized by tradition. All <code>id</code> and <code>class</code> declarations in CSS shall be written in only lowercase. Neither dashes nor underscores shall be used. </p>
<h3>Event Delegation</h3>
<p>When assigning unobtrusive event listeners, it is typically acceptable to assign the event listener directly to the element(s) which will trigger some resulting action. However, occasionally there may be multiple elements which match the criteria for which you are checking, and attaching event listeners to each one might negatively impact performance. In such cases you should use event delegation instead.</p>
<p>jQuery's <a href="http://api.jquery.com/delegate">delegate()</a> is preferred over <a href="http://api.jquery.com/live">live()</a> for performance reasons.</p>
<h3>Debugging</h3>
<p>Even with the best of validators, inevitably browser quirks will cause issues. There are several invaluable tools which will help to refine code integrity and loading speed. It is important that you have all of these tools available to you, despite the browser you primarily use for development. We recommend developing for Firefox and Safari first, then Google Chrome and Opera, with additional tweaks via conditional comments just for Internet Explorer. The following is a list of helpful debuggers and speed analyzers...</p>
<ul>
<li><strong>Firefox</strong>: <a href="http://getfirebug.com/">Firebug</a>, <a href="http://code.google.com/speed/page-speed/">Page Speed</a>, <a href="http://developer.yahoo.com/yslow/">YSlow</a></li>
<li><strong>Safari</strong>: <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/UsingtheWebInspector/UsingtheWebInspector.html">Web Inspector</a></li>
<li><strong>Google Chrome</strong>: <a href="http://google.com/chrome/intl/en/webmasters-faq.html#tools">Developer Tools</a></li>
<li><strong>Opera</strong>: <a href="http://opera.com/dragonfly/">Dragonfly</a></li>
<li><strong>Internet Explorer 6-7</strong>: <a href="http://microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038">Developer Toolbar</a></li>
<li><strong>Internet Explorer 8-10</strong>: <a href="http://msdn.microsoft.com/en-us/library/dd565625(v=VS.85).aspx">Developer Tools</a></li>
</ul>
<h3>Patterns for better JavaScript</h3>
<ul>
<li>Writing Maintainable Code</li>
<li>Single var Pattern</li>
<li>Hoisting: A Problem with Scattered vars</li>
<li>(Not) Augmenting Built-in Prototypes</li>
<li>Avoiding Implied Typecasting</li>
<li>Avoiding eval()</li>
<li>Number Conversions with parseInt()</li>
<li>Opening Brace Location</li>
<li>Capitalizing Constructors</li>
<li>Writing Comments</li>
<li>Avoid void</li>
<li>Avoid with Statement</li>
<li>Avoid continue Statement</li>
<li>Avoid Bitwise Operators if possible</li>
</ul>
<p>Stoyan Stefanov covers these and more <a href="http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/">in detail here</a>.</p>
</section>
<!-- #### ACCESSIBILITY SECTION #### -->
<section id="accessibility">
<div class="intro has-icon">
<img class="icon" src="img/layout/icon-curly.png" alt="{}" />
<h1>Accessibility</h1>
</div>
<p><a href="http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web">Section 508 Standards for intranet and internet information and applications</a>.</p>
<p class="indent">— Interfaces developed by Roundarch Isobar should meet Section 508 standards.</p>