Code-Guide/code-guide-notes.txt at master · dgowrie/Code-Guide · GitHub

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
focus on finding effective, pragmatic solutions to existing problems and not getting too hung up about deciding which is “the one true way”, since everything changes so fast.

http://na.isobar.com/standards/
- pretty, github forked


https://wiki.mozilla.org/WebDev:FrontendCodeStandards#Code_Standards
- browser support... see YUI guide


http://24ways.org/2011/front-end-style-guides
- more about design style guides, presentational not so much code


http://coffeepowered.co.uk/2010/01/css-coding-standards/
- css


https://github.com/dgowrie/coding-standards-front-end
- don't agree with all but another github forked


http://nefariousdesigns.co.uk/on-coding-standards.html
- how to devise a guide, with a team, and enforce (code review)
- not just front-end, but covers general concerns (commenting, legibility, whitespace, tabbing)


smacss
http://smacss.com/

front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
- css naming conventions...
- abstracting reusable patterns
- structure and function (less presentational) but not necessarily content-derived


Coding Style Guide, Front-End Standards
example: http://na.isobar.com/standards/
example: https://wiki.mozilla.org/WebDev:FrontendCodeStandards

Context and Inspiration:


UI Pattern Library / Repo / Framework
What is it?
- Reusable design components, including markup and style and JS
- In a centralized repo, that both designers and coders reference

examples:
http://pea.rs/
http://twitter.github.com/bootstrap/
http://patternprimer.adactio.com/

Context and Inspiration: http://adactio.com/journal/5028/


Browser Support
- graded support like Yahoo
- A (90% functionality and design, variations)
- B (core functionality and content accessible, fallback HTML, design rendering issues allowed)
- desktop and mobile


Semantic
- meaningful, rather than presentational

Valid


Seperation of Concerns
- no inline CSS or JS


Progressive Enhancement
-


Naming Conventions
- structure and function (less presentation) but not necessarily content-derived

Architecture / Modules
- abstracting reusable patterns
-

Commenting


Legibility / White-Space / Indentation


CSS


JS
- don't pollute global namespace (use objects/closures)