Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fixed issue #21

  • Loading branch information...
commit 9a4bc002c78d982a2466c2b98fd580056065b0d5 1 parent 8c762b8
@jaredwilli jaredwilli authored
View
5 cache.manifest
@@ -9,15 +9,12 @@ img/en.png
img/es.png
img/box_model.png
img/browsers1.jpg
-img/layout/icon-curly.png
-css/img/icon-curly.png
-css/img/icon-curly-full.png
+css/img/icon-curly_50.png
css/img/isobar.png
css/img/fork-me.png
css/img/sprite-social.png
css/img/bg-body.gif
-index.html
css/style.css
js/plugins.js
js/script.js
View
BIN  css/img/icon-curly-full.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
163 css/style.css
@@ -139,14 +139,16 @@ button, input, select, textarea { margin: 0; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
- border-radius: 1px;
- -moz-border-radius: 1px;
- -webkit-border-radius: 1px;
- -o-border-radius: 1px;
- box-shadow: 0 0 5px red;
- -moz-box-shadow: 0 0 5px red;
- -webkit-box-shadow: 0 0 5px red;
- -o-box-shadow: 0 0 5px red;
+ -ms-border-radius: 1px;
+ -moz-border-radius: 1px;
+ -webkit-border-radius: 1px;
+ -o-border-radius: 1px;
+ border-radius: 1px;
+
+ -moz-box-shadow: 0 0 5px red;
+ -webkit-box-shadow: 0 0 5px red;
+ -o-box-shadow: 0 0 5px red;
+ box-shadow: 0 0 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
@@ -155,8 +157,8 @@ input:invalid, textarea:invalid {
/* These selection declarations have to be separate
No text-shadow: twitter.com/miketaylr/status/12228805301
Also: hot pink! */
-::-moz-selection{ background: #FC861E; color: #fff; text-shadow: none; }
-::selection { background: #FC861E; color: #fff; text-shadow: none; }
+::-moz-selection{ background: #FF5E99; color: #fff; text-shadow: none; }
+::selection { background: #FF5E99; color: #fff; text-shadow: none; }
/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FC861E; }
@@ -247,20 +249,20 @@ body {
----------------------------------------------------------------------------------------------------*/
body .fork {
+ background: url('img/fork-me.png') no-repeat -15px top;
position: fixed;
top: 0;
right: -15px;
z-index: 2;
width: 149px;
height: 149px;
- background: url('img/fork-me.png') no-repeat -15px top;
}
header {
+ border-bottom: 3px solid #eee;
height: 60px;
width: 100%;
position: relative;
- border-bottom: 3px solid #eee;
}
header a {
@@ -270,6 +272,7 @@ header a {
}
header h1 {
+ background: url('img/isobar.png') no-repeat 0 0;
position: absolute;
top: 60px;
width: 137px;
@@ -292,7 +295,6 @@ header h1 a {
width: 226px;
}
header h1 a {
- background: url('img/isobar.png') no-repeat 0 0;
position: absolute;
text-indent: -9999em;
height: 70px;
@@ -300,6 +302,26 @@ header h1 a {
display: block;
}
+#flags {
+ margin: 25px 0 0;
+ height: 25px;
+ list-style: none;
+ display: inline-block;
+}
+#flags li {
+ display: inline-block;
+ width: 25px;
+ position: relative;
+}
+#flags li a {
+ cursor: pointer;
+}
+#flags lihover {
+ -moz-opacity: 0.8;
+ -ms-filter: "alpha(opacity=80)";
+ filter: alpha(opacity=80);
+ opacity: 0.8;
+}
#social {
background: rgba(64, 64, 64, 0.9);
float: right;
@@ -320,8 +342,8 @@ header h1 a {
}
#social li a {
- width: 35px;
background: url('img/sprite-social.png') no-repeat 0 0;
+ width: 35px;
}
#social #facebook { background-position: -5px -5px; }
@@ -359,7 +381,7 @@ header h1 a {
#main {
border-right: 1px #dcdcdc solid;
- display: inline;
+ display: inline-block;
float: left;
overflow: hidden;
padding: 50px 29px 60px 0;
@@ -367,7 +389,7 @@ header h1 a {
}
#side {
- display: inline;
+ display: inline-block;
float: left;
font-size: 13px;
padding: 0;
@@ -387,38 +409,26 @@ header h1 a {
border-bottom: none;
}
-#authors, #team {
+#authors,
+#team {
display: inline-block;
width: 50%;
height: 250px;
float: left;
}
-#main > section article,
.intro {
+ background: url('img/icon-curly_50.png') no-repeat 0px 0px;
border-bottom: 1px #dcdcdc solid;
margin-bottom: 20px;
-}
-
-.intro {
- min-height: 120px;
-}
-
-.intro .icon {
- border-radius: 100px;
- -moz-border-radius: 100px;
- -webkit-border-radius: 100px;
- -o-border-radius: 100px;
- height: 100px;
- width: 100px;
- background: #f30;
- float: left;
- display: inline;
- margin: 0 20px 20px 0;
+ padding: 0 0 0 60px;
+ min-height: 60px;
+ position: relative;
}
.intro h1, .intro h2,
-.intro p, .intro ol { margin-left: 120px; }
+.intro p, .intro ol { margin-left: 10px; }
+.intro h1, .intro h2 { line-height: 1.5em; }
.intro ol, .intro ul { list-style-position: inside; }
@@ -441,31 +451,33 @@ footer p {
padding: 5px 0;
}
+footer a { color: #cdcdcd; }
+footer a:hover { color: #f30; }
+
figure {
background: #fff;
- border: 3px solid;
+ border: 2px solid;
border-color: #ddd #999 #666;
display: block;
- margin: -15px -2px 10px;
+ margin: 10px 2px;
padding: 1px;
text-align: center;
- box-shadow: #ccc 0 1px 3px;
- -moz-box-shadow: #ccc 0 1px 3px;
- -webkit-box-shadow: #ccc 0 1px 3px;
- -o-box-shadow: #ccc 0 1px 3px;
+
+ -moz-box-shadow: 0 1px 3px 0 #ccc;
+ -webkit-box-shadow: 0 1px 3px 0 #ccc ;
+ -o-box-shadow: 0 1px 3px 0 #ccc;
+ box-shadow: 0 1px 3px 0 #ccc;
}
figure.extra { margin-top: 10px; }
figcaption {
- font-size: 10px;
+ font-size: 10px;
font-style: italic;
text-align: left;
}
-p {
- margin: 0 0 10px 0;
-}
+p { margin: 0 0 10px 0; }
p, ol, ul {
font-size: 14px;
@@ -474,8 +486,7 @@ p, ol, ul {
abbr { border-bottom: 1px dotted; }
-a { color: #f30; /* #09f */ }
-
+a { color: #f30; }
a:hover { color: #333; }
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
@@ -505,18 +516,15 @@ h1 {
line-height: 1.1em;
margin-bottom: 14px;
}
-
h2 {
color: #000;
font-size: 24px;
margin-bottom: 12px;
}
-
h3 {
font-size: 22px;
margin-bottom: 11px;
}
-
h4 {
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
@@ -524,7 +532,6 @@ h4 {
color: #555;
margin-bottom: 8px;
}
-
h6, figure.preCode {
background: #eeeee0;
color: #333;
@@ -538,10 +545,11 @@ figure.preCode {
display: block;
margin: 8px 0 0 0;
text-align: inherit;
- box-shadow: none;
+
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
+ box-shadow: none;
}
textarea[class~="brush:js"], textarea[class~="brush:css"],
@@ -571,13 +579,15 @@ p code, li code, table code {
}
#criteria_options a {
- border-radius: 20px;
- -moz-border-radius: 20px;
- -webkit-border-radius: 20px;
display: block;
font-weight: bold;
outline: 0;
padding: 5px 15px;
+
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -ms-border-radius: 20px;
+ border-radius: 20px;
}
#criteria_options a:hover {
@@ -599,30 +609,6 @@ p code, li code, table code {
.float_left { float: left; }
.float_right { float: right; }
-.box, .box_notice {
- background: #f6f6f6;
- border: 1px solid;
- border-color: #ddd #ccc #999;
- box-shadow: #ccc 0 1px 3px;
- -moz-box-shadow: #ccc 0 1px 3px;
- -webkit-box-shadow: #ccc 0 1px 3px;
- margin: 0 0 20px;
- padding: 20px 20px 0.01em;
-}
-
-.box_notice { background: #ffd; }
-
-.box_title {
- background: #777;
- background: rgba(0, 0, 0, 0.5);
- color: #fff;
- font-size: 13px;
- font-weight: bold;
- margin: -19px -19px 20px;
- padding: 5px 10px;
- text-shadow: #000 0 1px 1px;
-}
-
.normalize { margin-bottom: 5px; }
dl { margin-left: 15px; }
@@ -640,7 +626,6 @@ a[href^="https://wiki"], a[href^="http://repo"], a[href^="https://fusion"] { bac
#side .toc-title {
border-bottom: 1px solid gainsboro;
-/* border-top: 50px solid rgba(64, 64, 64, .9); */
border-top: 10px solid #FF3300;
font-family: 'Calibri','AlexandriaBold';
font-size: 30px;
@@ -657,7 +642,7 @@ a[href^="https://wiki"], a[href^="http://repo"], a[href^="https://fusion"] { bac
padding: 0;
position: fixed;
top: 125px;
- width: 300px;
+ width: 290px;
}
#toc li {
@@ -671,10 +656,10 @@ a[href^="https://wiki"], a[href^="http://repo"], a[href^="https://fusion"] { bac
text-decoration: none;
}
#toc li a:hover {
- cursor: pointer;
- background: hsla(0, 0%, 40%, 1);
- color: #fff;
+ background: #f30;
+ color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, .5);
+ cursor: pointer;
}
#toc .h1 {
@@ -713,11 +698,11 @@ a[href^="https://wiki"], a[href^="http://repo"], a[href^="https://fusion"] { bac
color: rgba(137, 137, 137, 0.4);
font-size: 20px;
font-weight: normal;
- position: relative;
text-decoration: none;
- top: 0;
- left: 5px;
z-index: 100;
+ position: relative;
+ top: 0;
+ float: right;
}
.backAnchor, .backAnchor a {
@@ -867,7 +852,7 @@ html body div.syntaxhighlighter * {
body { width: 80%; font-family: Calibri, Arial, Helvetica, sans-serif; }
header { width: 100%; }
-header #logo { background: url("../img/isobar.png") no-repeat 0 0; }
+header #logo { background: url("img/isobar.png") no-repeat 0 0; }
h1, h2, h3, h4, h5, h6 { }
View
BIN  doc/Isobar_Front-End_Coding_Standards_and_Best_Practices.docx
Binary file not shown
View
100 humans.txt
@@ -0,0 +1,100 @@
+/* the humans responsible & colophon */
+/* humanstxt.org */
+
+
+/* TEAM */
+ Interactive Developer: Jared Williams
+ Site: http://anti-code.com
+ Twitter: @jaredwilli
+ Location: Boston, MA
+
+ Interface Architect: Rob Cherny
+ Site: http://cherny.com
+ Twitter: @rcherny
+ Location: Boston, MA
+
+ Interface Architect: Andrew Kolesnikov
+ Site: http://andrewkolesnikov.com
+ Twitter:
+ Location:
+
+ Associate Developer: Alisan Tang
+ Site: http://alisantang.com
+ Twitter: @alisantang
+ Location: Boston, MA
+
+ <your title>: Evan
+ Site:
+ Twitter:
+ Location:
+
+ <your title>: Eric Pratt
+ Site: http://ericdouglaspratt.com
+ Twitter:
+ Location:
+
+ <your title>: Debbie Chang
+ Site:
+ Twitter:
+ Location:
+
+ <your title>: Nat
+ Site:
+ Twitter:
+ Location:
+
+ <your title>: D'mitri
+ Site:
+ Twitter:
+ Location:
+
+ <your title>: Brent
+ Site:
+ Twitter:
+ Location:
+
+ <your title>: Jes Waldrip
+ Site:
+ Twitter:
+ Location:
+
+ <your Alisdair
+ Site:
+ Twitter:
+ Location:
+
+/* THANKS */
+ Adam McIntyre
+ Rob Larsen
+ Annette Arabasz
+
+/* SITE */
+ Standards: Best Practices, Web Standards, HTML5, CSS3.
+ Components: Modernizr, jQuery, Canvas
+ Software:
+
+
+
+ -o/-
+ +oo//-
+ :ooo+//:
+ -ooooo///-
+ /oooooo//:
+ :ooooooo+//-
+ -+oooooooo///-
+ -://////////////+oooooooooo++////////////::
+ :+ooooooooooooooooooooooooooooooooooooo+:::-
+ -/+ooooooooooooooooooooooooooooooo+/::////:-
+ -:+oooooooooooooooooooooooooooo/::///////:-
+ --/+ooooooooooooooooooooo+::://////:-
+ -:+ooooooooooooooooo+:://////:--
+ /ooooooooooooooooo+//////:-
+ -ooooooooooooooooooo////-
+ /ooooooooo+oooooooooo//:
+ :ooooooo+/::/+oooooooo+//-
+ -oooooo/::///////+oooooo///-
+ /ooo+::://////:---:/+oooo//:
+ -o+/::///////:- -:/+o+//-
+ :-:///////:- -:/://
+ -////:- --//:
+ -- -:
View
26 inc/lang-en.inc.php
@@ -1,21 +1,19 @@
<?php
// define words
-define('page_lang', 'en');
-define('content_path', 'sections/');
+define('LOCALE', 'en');
+define('DIRECTORY', 'sections/en/');
-define('page_title', 'Front-end Code Standards &amp; Best Practices');
-define('page_keywords', 'Isobar code standards, 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');
-define('page_description', 'Roundarch Isobar\'s Coding Standards and Frontend development Best Practices');
+define('PAGE_TITLE', 'Front-end Code Standards &amp; Best Practices');
+define('PAGE_KEYWORDS', 'Isobar code standards, 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');
+define('PAGE_DESCRIPTION', 'Roundarch Isobar\'s Coding Standards and Frontend development Best Practices');
-define('navTitle', 'Table of Contents');
-define('linkBack', 'Return to Isobar US');
-define('noCanvas', 'Your browser cannot handle the awesomeness of this!');
-define('noJavascript', 'Please enable JavaScript');
+define('NAV_TITLE', 'Table of Contents');
+define('LINKBACK', 'Return to Isobar US');
-define('copyright', 'Roundarch Isobar, Inc. All rights reserved.');
-define('creativeCommons', 'All content licensed under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons Attribution 3.0 Unported License');
+define('NO_CANVAS', 'Your browser cannot handle the awesomeness of this!');
+define('NO_JAVASCRIPT', 'Please enable JavaScript');
+
+define('COPYRIGHT', 'Roundarch Isobar, Inc. All rights reserved.');
+define('CREATIVE_COMMONS', 'All content licensed under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons Attribution 3.0 Unported License');
-// Some basic protocol and path to page settings
-$protocol = (strstr('https', $_SERVER['SERVER_PROTOCOL']) === false) ? 'http' : 'https';
-define('page_root', $protocol . '://' . $_SERVER['SERVER_NAME'] . dirname($_SERVER['REQUEST_URI']));
?>
View
26 inc/lang-es.inc.php
@@ -1,21 +1,19 @@
<?php
// Define words
-define('page_lang', 'es');
-define('content_path', 'es/sections/');
+define('LOCALE', 'es');
+define('DIRECTORY', 'sections/es/');
-define('page_title', 'Estándares y Prácticas Recomendadas de Desarrollo Front-end');
-define('page_keywords', 'Estándares de código Isobar, estándares de código, desarrollo frontend, prácticas recomendadas de frontend, mejores prácticas de frontend, estándares de código html, estándares de código html5, estándares de código css, prácticas recomendadas de código, mejores prácticas de código, desarrollo');
-define('page_description', 'Estándares de Código y Prácticas Recomendadas de Desarrollo Front-end de Roundarch Isobar');
+define('PAGE_TITLE', 'Estándares y Prácticas Recomendadas de Desarrollo Front-end');
+define('PAGE_KEYWORDS', 'Estándares de código Isobar, estándares de código, desarrollo frontend, prácticas recomendadas de frontend, mejores prácticas de frontend, estándares de código html, estándares de código html5, estándares de código css, prácticas recomendadas de código, mejores prácticas de código, desarrollo');
+define('PAGE_DESCRIPTION', 'Estándares de Código y Prácticas Recomendadas de Desarrollo Front-end de Roundarch Isobar');
-define('navTitle', 'Tabla de Contenido');
-define('linkBack', 'Regresar a Isobar US');
-define('noCanvas', '¡Su navegador no puede manejar esta maravilla!');
-define('noJavascript', 'Por favor, habilite JavaScript');
+define('NAV_TITLE', 'Tabla de Contenido');
+define('LINKBACK', 'Regresar a Isobar US');
-define('copyright', 'Roundarch Isobar. Todos los derechos reservados.');
-define('creativeCommons', 'Todo el contenido esta licenciado bajo <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Licencia de Atribución 3.0 de Creative Commons</a>');
+define('NO_CANVAS', '¡Su navegador no puede manejar esta maravilla!');
+define('NO_JAVASCRIPT', 'Por favor, habilite JavaScript');
+
+define('COPYRIGHT', 'Roundarch Isobar. Todos los derechos reservados.');
+define('CREATIVE_COMMONS', 'Todo el contenido esta licenciado bajo <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Licencia de Atribución 3.0 de Creative Commons</a>');
-// Some basic protocol and path to page settings
-$protocol = (strstr('https', $_SERVER['SERVER_PROTOCOL']) === false) ? 'http' : 'https';
-define('page_root', $protocol . '://' . $_SERVER['SERVER_NAME'] . dirname($_SERVER['REQUEST_URI']));
?>
View
35 inc/lang.class.php
@@ -3,28 +3,49 @@
* Class for changing the language and loading the locale specific file necessary for the index page to render correctly
*/
-class mylanguage {
+class myLanguage {
+ public $sections = array(
+ 'general.html', 'markup.html', 'css.html', 'javascript.html',
+ 'accessibility.html', 'performance.html', 'browsers.html', 'seo.html',
+ 'codeReviews.html', 'appendices.html', 'revisionHistory.html'
+ );
+
+ public $sections_path = array();
+ public $language = 'en';
+
function get_language() {
return $this->language;
}
+ function get_sections() {
+ foreach ($this->sections as $value) {
+ array_push($this->sections_path, 'sections/' . $this->get_language() .'/'. $value);
+ }
+ //var_dump($this->sections_path);
+ }
+ function include_sections() {
+ $this->get_sections();
+ foreach ($this->sections_path as $section) {
+ include_once($section);
+ }
+ }
// load language setting
function load_language($lang) {
- $default_language = 'en';
$this->language = $lang;
-
+
switch ($this->get_language()) {
- case "en":
+ case 'en':
require_once 'lang-' . $this->get_language() . '.inc.php';
break;
- case "es":
+ case 'es':
require_once 'lang-' . $this->get_language() . '.inc.php';
break;
default: // default language is
- require_once 'lang-' . $default_language . '.inc.php';
+ require_once 'lang-' . $this->language . '.inc.php';
break;
}
+ //var_dump($this->get_language());
+ $this->get_sections();
}
- // end language function loading
}
?>
View
11 inc/session.php
@@ -1,6 +1,16 @@
<?php
require_once('lang.class.php');
+if (isset ($_POST['pathList'])) {
+ $html = '';
+
+ foreach ($_POST['pathList'] as $value) {
+ //print_r($value);
+ readfile('../'. $value);
+ }
+
+}
+
// if session isn't set
if (!isset ($_SESSION['mylang'])) {
$_SESSION['mylang'] = 'en';
@@ -24,4 +34,5 @@
}
//$mylang->set_language($_SESSION['mylang']);
+
?>
View
84 index.php
@@ -1,73 +1,72 @@
<?php
-$page_title = "Front-end Code Standards &amp; Best Practices";
-$page_keywords = "Isobar code standards, 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";
-$page_description = "Roundarch Isobar's Coding Standards and Frontend development Best Practices";
-$protocol = (strstr('https',$_SERVER['SERVER_PROTOCOL']) === false)?'http':'https';
-$page_root = $protocol.'://'.$_SERVER['SERVER_NAME'].dirname($_SERVER['REQUEST_URI']);
-include_once('layout/header.php');
+session_start();
+
+// register session to change language
+session_register('mylang');
+
+// Some basic protocol and path to page settings
+$protocol = (strstr('https', $_SERVER['SERVER_PROTOCOL']) === false) ? 'http' : 'https';
+$page_root = $protocol . '://' . $_SERVER['SERVER_NAME'] . dirname($_SERVER['REQUEST_URI']);
+
+require_once('inc/session.php');
+require_once('inc/header.php');
?>
<body>
<a class="fork" href="https://github.com/isobar-idev/code-standards/" target="_blank"><span class="visuallyhidden">Fork Us</span></a>
+
<div id="container">
-
<header role="banner">
- <h1><a id="logo" href="<?php echo $page_root; ?>">Roundarch Isobar</a></h1>
+ <nav id="locale">
+ <ul id="flags">
+ <li><a data-lang="en" title="English"><img src="img/en.png" alt="English" /></a></li>
+ <li><a data-lang="es" title="Spanish" ><img src="img/es.png" alt="Spanish" /></a></li>
+ </ul>
+ </nav>
+
+ <h1><a id="logo" href="<?php echo page_root; ?>" class="visuallyhidden">Roundarch Isobar</a></h1>
<canvas id="canvas-logo" width="500" height="300">
- <strong>Your browser cannot handle the awesomeness of this!</strong>
+ <strong><?php echo NO_CANVAS; ?></strong>
</canvas>
<ul id="social">
<li><a class="icon" href="http://www.shareaholic.com/api/share/?v=1&apitype=1&apikey=8943b7fd64cd8b1770ff5affa9a9437b&service=5&title=Isobar%20North%20America's%20Coding%20Standards%20and%20Frontend%20development%20Best%20Practices&link=http://na.isobar.com/standards/&source=Shareaholic" id="facebook"></a></li>
<li><a class="icon" href="http://www.shareaholic.com/api/share/?v=1&apitype=1&apikey=8943b7fd64cd8b1770ff5affa9a9437b&service=7&title=Isobar%20North%20America's%20Coding%20Standards%20and%20Frontend%20development%20Best%20Practices&link=http://na.isobar.com/standards/&source=Shareaholic" id="twitter"></a></li>
<li><a class="icon" href="http://www.shareaholic.com/api/share/?v=1&apitype=1&apikey=8943b7fd64cd8b1770ff5affa9a9437b&service=2&title=Isobar%20North%20America's%20Coding%20Standards%20and%20Frontend%20development%20Best%20Practices&link=http://na.isobar.com/standards/&source=Shareaholic" id="delicious"></a></li>
- <li><a href="http://na.isobar.com" id="linkback">Return to Isobar US</a></li>
+ <li><a href="http://na.isobar.com" id="linkback"><?php echo LINKBACK; ?></a></li>
</ul>
</header>
-
<div id="main" role="document">
- <h1>Front-end Code Standards &amp; Best Practices</h1>
-
- <?php
- include_once('sections/general.html');
- include_once('sections/markup.html');
- include_once('sections/css.html');
- include_once('sections/javascript.html');
- include_once('sections/accessibility.html');
- include_once('sections/performance.html');
- include_once('sections/browsers.html');
- include_once('sections/seo.html');
- include_once('sections/codeReviews.html');
- include_once('sections/appendices.html');
- include_once('sections/revisionHistory.html');
- ?>
-
+ <!-- /////////////////////////// -->
+ <!-- Load the Content files here -->
+ <!-- /////////////////////////// -->
+
+ <?php $mylang->include_sections(); ?>
+
</div><!--! End of #main section !-->
<nav id="side" class="nav-right" role="navigation">
- <h3 class="toc-title">Table of Contents</h3>
+ <h3 class="toc-title"><?php echo NAV_TITLE; ?></h3>
<ul id="toc" style="display:none"></ul>
- <noscript><p><a href="http://enable-javascript.com">Please enable JavaScript</a>.</p></noscript>
+ <noscript><p><a href="http://enable-javascript.com"><?php echo NO_JAVASCRIPT; ?></a>.</p></noscript>
</nav>
</div><!--! end of #container !-->
<footer role="contentinfo">
<p>
- <span class="float_left"><?php print date("Y"); ?> Roundarch Isobar, Inc. All rights reserved.</span>
- <span class="float_right">All content licensed under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons Attribution 3.0 Unported License</a></span>
+ <span class="float_left"><?php echo date("Y") . ' ' . COPYRIGHT; ?></span>
+ <span class="float_right"><?php echo CREATIVE_COMMONS; ?></a></span>
</p>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
- <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script>
- window.jQuery || document.write("<script src='js/libs/jquery-1.7.2.min.js'>\x3C/script>")
- </script>
+ <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if necessary -->
+ <script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
+ <script>window.jQuery || document.write("<script src='js/libs/jquery-1.7.2.min.js'>\x3C/script>")</script>
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
@@ -78,10 +77,15 @@
<![endif]-->
<script>
- var _gaq=[['_setAccount','UA-1745698-2'],['_trackPageview'],['_trackPageLoadTime']];
- (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
- g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
- s.parentNode.insertBefore(g,s)}(document,'script'));
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-1745698-2']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
</script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
View
908 js/script.js
@@ -2,21 +2,98 @@
/**
* Author: Isobar North America
*/
-var ISOBAR = {
- common : {
- init: function(){
+var isobar = {
+ common: {
+ locale: null,
+ sections: [
+ 'general', 'markup', 'css', 'javascript',
+ 'accessibility', 'performance', 'browsers', 'seo',
+ 'codeReviews', 'appendices', 'revisionHistory'
+ ],
+ init: function() {
+ // TODO: Need to re-run these methods after the ajax request returns the language content
this.toc();
this.syntax();
- this.stuff();
+ this.backLink();
- $('#toc').delegate('a', 'click', function(e) {
+ if (isobar.common.locale !== null) {
+ //console.log(isobar.common.locale);
+ isobar.common.storeLocal();
+ } else {
+ isobar.common.locale = 'en';
+ isobar.common.storeLocal();
+ }
+
+ $('#flags a').on('click', function(e) {
+ var store = window.localStorage,
+ locale = store.getItem('locale') || isobar.common.locale;
+
+ locale = $(this).data('lang');
+ store.setItem('locale', locale);
+ store.getItem('locale');
+ isobar.common.storeLocal();
+
+ e.preventDefault();
+ });
+
+
+
+ window.applicationCache.addEventListener('updateready', isobar.common.onUpdateReady, false);
+ if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+ isobar.common.onUpdateReady();
+ }
+
+ // Table of Contents navigation
+ $('#toc a').on('click', function(e) {
var a = $(this).attr('href');
$(window).scrollTo(a);
e.preventDefault();
- });
+ });
+
+ },
+ storeLocal: function() {
+ if ('localStorage' in window && window['localStorage'] !== null) {
+ var store = window.localStorage,
+ locale = store.getItem('locale') || isobar.common.locale,
+ sections = isobar.common.sections,
+ pathList = [],
+ path = '';
+
+ if (locale === null) {
+ locale = 'en';
+ }
+
+ store.setItem('locale', locale);
+ store.getItem('locale');
+
+ for (var i = 0; i < sections.length; i++) {
+ path = 'sections/'+ store.getItem('locale') +'/'+ sections[i] +'.html';
+ store.setItem(sections[i], path);
+ store.getItem(sections[i]);
+ pathList.push(store.getItem(sections[i]));
+ }
+ console.log(pathList);
+
+ $.ajax({
+ data: {
+ pathList: pathList
+ },
+ url: 'inc/session.php',
+ type: 'post'
+ }).done(function(response) {
+ $('#main').html(response);
+ //$('#toc').html(isobar.common.toc());
+ }).fail(function(error) {
+ console.log(error);
+ });
+
+ }
+ },
+ onUpdateReady: function() {
+ console.log('found new version!');
},
// generate table of contents
- toc : function(){
+ toc: function() {
var main = document.getElementById('main'),
toc = document.getElementById('toc'),
hx = $('section h1, section h2, section h3, section h4, section h5'),
@@ -27,32 +104,30 @@ var ISOBAR = {
for (var i = 0, j = hx_len; i < j; i++) {
tag = hx[i].tagName.toLowerCase();
- if (tag === 'h1' || tag == 'h2' || tag == 'h3' || tag == 'h4' || tag == 'h5') {
+ if (tag === 'h1' || tag === 'h2' || tag === 'h3' || tag === 'h4' || tag === 'h5') {
the_text = $.trim( hx[i].innerHTML );
anchor = '_' + the_text.replace(/\s+|\-/g, '_').replace(/[^A-Z0-9_]/gi, '').replace(/_+/g, '_').toLowerCase();
hx[i].id = anchor;
- hx[i].innerHTML += '<a href="#' + anchor + '" class="anchor_link" title="Permalink">◊</a>';
- toc.innerHTML += '<li class="' + tag + '"><a href="#' + anchor + '">' + the_text + '</a></li>';
+ $(hx[i]).before('<a href="#'+ anchor +'" class="anchor_link" title="Permalink">◊</a>');
+ toc.innerHTML += '<li class="'+ tag +'"><a href="#'+ anchor +'">'+ the_text +'</a></li>';
}
- //console.log({ 'a': anchor, 'tag': tag, 'hx': hx[i] });
-
if (tag === 'h1') {
- hx[i].innerHTML += '<a href="#" class="backAnchor" title="Top">Back to Top</a>';
+ $(hx[i]).prev('.anchor_link').before('<a href="#" class="backAnchor" title="Top">Back to Top</a>');
}
}
toc.style.display = 'block';
},
// just hooking up back to top
- stuff : function(){
- $('a.backAnchor').live('click',function(){
+ backLink: function() {
+ $('a.backAnchor').on('click', function(e) {
window.scrollTo(0, 0);
- return false;
+ e.preventDefault();
});
},
// set up syntax highlighter
- syntax : function(){
+ syntax: function() {
SyntaxHighlighter.config.tagName = 'textarea';
SyntaxHighlighter.defaults['wrap-lines'] = false;
SyntaxHighlighter.defaults['auto-links'] = false;
@@ -65,7 +140,7 @@ var ISOBAR = {
var UTIL = {
fire : function(func,funcname, args){
- var namespace = ISOBAR; // indicate your obj literal namespace here
+ var namespace = isobar; // indicate your obj literal namespace here
funcname = (funcname === undefined) ? 'init' : funcname;
if (func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function'){
namespace[func][funcname](args);
@@ -86,429 +161,428 @@ var UTIL = {
// kick it all off here
$(document).ready(UTIL.loadEvents);
+
+
/**
* Isobar Canvas Logo Animation
+ * Created by Jared Williams @jaredwilli
*/
(function($) {
- if(Modernizr.canvas){
- var canvas = document.getElementById('canvas-logo'),
- con = canvas.getContext('2d'),
- w = canvas.width,
- h = canvas.height,
- play = false,
- dots = [],
- numDots = 1,
- time = 0,
- body = document.body,
- img = new Image();
-
- // Constructor that defines new Dots
- var Dot = function(x, y, radius, mass, vX, vY, aX, aY, rgb) {
- // position, size, mass
- this.x = x;
- this.y = y;
- this.radius = radius;
- this.mass = mass;
- // velocity
- this.vX = vX;
- this.vY = vY;
- // accelleration
- this.aX = aX;
- this.aY = aY;
- // color
- this.rgb = rgb;
- };
-
- function makeDots() {
- for( var i = 0; i < numDots; i++ ) {
-
- var x = (Math.random()*(w - 40)),
- y = 140 ,//+ (Math.random()*(h - 40)),
- radius = 4 + Math.random() * 11,
- mass = radius /4;
- vX = Math.random() * 4 - 2,
- vY = Math.random() * 4, // random number between -2 and 2
- aX = Math.random() * 0.2 - 0.1,
- aY = Math.random() * 0.2 - 0.15;
-
- rgb = 'rgba(0, 100, 200, .6)';
-
- dots.push(new Dot( x, y, radius, mass, vX, vY, aX, aY, rgb ));
+ if (Modernizr.canvas) {
+ var canvas = document.getElementById('canvas-logo'),
+ con = canvas.getContext('2d'),
+ w = canvas.width,
+ h = canvas.height,
+ play = false,
+ dots = [],
+ numDots = 1,
+ time = 0,
+ body = document.body,
+ img = new Image();
+
+ // Constructor that defines new Dots
+ var Dot = function(x, y, radius, mass, vX, vY, aX, aY, rgb) {
+ // position, size, mass
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ this.mass = mass;
+ // velocity
+ this.vX = vX;
+ this.vY = vY;
+ // accelleration
+ this.aX = aX;
+ this.aY = aY;
+ // color
+ this.rgb = rgb;
+ };
+
+ function makeDots() {
+ for( var i = 0; i < numDots; i++ ) {
+
+ var x = (Math.random()*(w - 40)),
+ y = 140 ,//+ (Math.random()*(h - 40)),
+ radius = 4 + Math.random() * 11,
+ mass = radius /4;
+ vX = Math.random() * 4 - 2,
+ vY = Math.random() * 4, // random number between -2 and 2
+ aX = Math.random() * 0.2 - 0.1,
+ aY = Math.random() * 0.2 - 0.15;
+
+ rgb = 'rgba(0, 100, 200, .6)';
+
+ dots.push(new Dot( x, y, radius, mass, vX, vY, aX, aY, rgb ));
+ }
}
- }
+
+ function timer() {
+ if( dots.length > 8 ) {
+ dots.shift();
+ } else {
+ time = setInterval( function() {
+ makeDots();
+ timer();
+ }, 100);
+ }
+ }
- function timer() {
- if( dots.length > 8 ) {
- dots.shift();
- } else {
- time = setInterval( function() {
- makeDots();
- timer();
- }, 100);
- }
- }
-
-
-
- /* Animate it */
+ /* Animate it */
function animate() {
- con.clearRect(0, 0, w, h);
-
- for( var i = 0; i < dots.length; i++ ) {
- var a = dots[i];
-
- /**
- * Pythagoras' Theorm
- * hyp = sqrt(x^2+y^2)
- */
- for( var j = i + 1; j < dots.length; j++ ) {
- var b = dots[j];
-
- // Collision detection
- var dX = b.x - a.x,
- dY = b.y - a.y,
- dist = Math.sqrt((dX*dX) + (dY*dY));
-
- if( dist < a.radius + b.radius ) {
- var angle = Math.atan2(dY, dX),
- sine = Math.sin(angle),
- cosine = Math.cos(angle);
- // rotating the circle angles to calcuate the direction to bounce
- var x = 0,
- y = 0;
-
- var xB = dX * cosine + dY * sine,
- yB = dY * cosine - dX * sine;
-
- var vXb = b.vX * cosine + b.vY * sine,
- vYb = b.vY * cosine - b.vX * sine;
-
- // conservation of motion using mass and velocity
- var vTotal = vX - vXb;
- vX = ((a.mass - b.mass) * vX + 2 * b.mass * vXb) / (a.mass + b.mass);
- vXb = vTotal + vX;
-
- // move them apart so they dont stick together
- xB = x + (a.radius + b.radius);
+ con.clearRect(0, 0, w, h);
+
+ for( var i = 0; i < dots.length; i++ ) {
+ var a = dots[i];
+
+ /**
+ * Pythagoras' Theorm
+ * hyp = sqrt(x^2+y^2)
+ */
+ for( var j = i + 1; j < dots.length; j++ ) {
+ var b = dots[j];
- // rotate circles back to original positions
- a.x = a.x + (x * cosine - y * sine);
- a.y = a.y + (y * cosine + x * sine);
-
- b.x = a.x + (xB * cosine - yB * sine);
- b.y = a.y + (yB * cosine + xB * sine);
-
- a.vX = vX * cosine - vY * sine;
- a.vY = vY * cosine + vX * sine;
-
- b.vX = vXb * cosine - vYb * sine;
- b.vY = vYb * cosine - vXb * sine;
+ // Collision detection
+ var dX = b.x - a.x,
+ dY = b.y - a.y,
+ dist = Math.sqrt((dX*dX) + (dY*dY));
+
+ if( dist < a.radius + b.radius ) {
+ var angle = Math.atan2(dY, dX),
+ sine = Math.sin(angle),
+ cosine = Math.cos(angle);
+ // rotating the circle angles to calcuate the direction to bounce
+ var x = 0,
+ y = 0;
+
+ var xB = dX * cosine + dY * sine,
+ yB = dY * cosine - dX * sine;
+
+ var vXb = b.vX * cosine + b.vY * sine,
+ vYb = b.vY * cosine - b.vX * sine;
+
+ // conservation of motion using mass and velocity
+ var vTotal = vX - vXb;
+ vX = ((a.mass - b.mass) * vX + 2 * b.mass * vXb) / (a.mass + b.mass);
+ vXb = vTotal + vX;
+
+ // move them apart so they dont stick together
+ xB = x + (a.radius + b.radius);
+
+ // rotate circles back to original positions
+ a.x = a.x + (x * cosine - y * sine);
+ a.y = a.y + (y * cosine + x * sine);
+
+ b.x = a.x + (xB * cosine - yB * sine);
+ b.y = a.y + (yB * cosine + xB * sine);
+
+ a.vX = vX * cosine - vY * sine;
+ a.vY = vY * cosine + vX * sine;
+
+ b.vX = vXb * cosine - vYb * sine;
+ b.vY = vYb * cosine - vXb * sine;
+ }
+
}
-
+
+ // update the x and y axis with the velocity of each asteroid
+ a.x += a.vX || a.radius;
+ a.y -= a.vY || a.radius;
+
+ // add the acceleration
+ a.aX = 0
+ a.aY = 0;
+ /* if( Math.abs(a.vX) < 10 ) { a.vX += a.aX; }
+ if( Math.abs(a.vY) < 10 ) { a.vY += a.aY; } */
+
+
+ // adding a boundry
+ if( a.x - a.radius < 0 ) {
+ a.x = a.radius;
+ a.vX *= -1;
+ a.aX *= -1;
+ } else if( a.x + a.radius > w ) {
+ a.x = w - a.radius;
+ a.vX *= -1;
+ a.aX *= -1;
+ }
+ if( a.y - a.radius < 0 ) {
+ a.y = a.radius;
+ a.vY *= -1;
+ a.aY *= -1;
+ } else if( a.y + a.radius > h ) {
+ a.y = h - a.radius;
+ a.vY *= -1;
+ a.aY *= -1;
+ }
+
+ // draw the balls
+ clearInterval(time);
+
+ con.save();
+ con.shadowBlur = 5;
+ con.shadowOffsetX = 0;
+ con.shadowOffsetY = 3;
+ con.shadowColor = 'hsla(40, 50%, 0%, .4)';
+ //con.fillStyle = 'hsla(205, 90%, 50%, .9)';
+
+ con.fillStyle = a.rgb;
+ con.beginPath();
+ con.arc(a.x, a.y, a.radius, 0, Math.PI*2, false);
+
+ con.closePath();
+ con.fill();
+ con.restore();
+
+ /* Draw the Logo */
+ con.fillStyle = 'hsla(12, 100%, 50%, .5)'; //Isobar Orange
+
+ con.save();
+ con.shadowBlur = 3;
+ con.shadowOffsetX = 0;
+ con.shadowOffsetY = 1;
+ con.shadowColor = 'hsla(40, 50%, 0%, .2)';
+ // con.scale(.5, .5);
+ // con.translate(-25, -75);
+ draw();
+ con.restore();
}
- // update the x and y axis with the velocity of each asteroid
- a.x += a.vX || a.radius;
- a.y -= a.vY || a.radius;
-
- // add the acceleration
- a.aX = 0
- a.aY = 0;
- /* if( Math.abs(a.vX) < 10 ) { a.vX += a.aX; }
- if( Math.abs(a.vY) < 10 ) { a.vY += a.aY; } */
-
-
- // adding a boundry
- if( a.x - a.radius < 0 ) {
- a.x = a.radius;
- a.vX *= -1;
- a.aX *= -1;
- } else if( a.x + a.radius > w ) {
- a.x = w - a.radius;
- a.vX *= -1;
- a.aX *= -1;
- }
- if( a.y - a.radius < 0 ) {
- a.y = a.radius;
- a.vY *= -1;
- a.aY *= -1;
- } else if( a.y + a.radius > h ) {
- a.y = h - a.radius;
- a.vY *= -1;
- a.aY *= -1;
+ if( play ) {
+ requestAnimationFrame(animate);
}
+ }
+
+ function init() {
- // draw the balls
- clearInterval(time);
-
- con.save();
- con.shadowBlur = 5;
- con.shadowOffsetX = 0;
- con.shadowOffsetY = 3;
- con.shadowColor = 'hsla(40, 50%, 0%, .4)';
- //con.fillStyle = 'hsla(205, 90%, 50%, .9)';
+ var kkeys = [],
+ cornify = '67,79,82,78,73,70,89',
+ plaid = '80,76,65,73,68',
+ konami = '38,38,40,40,37,39,37,39,66,65',
+ imanok = '37,38,39';
- con.fillStyle = a.rgb;
- con.beginPath();
- con.arc(a.x, a.y, a.radius, 0, Math.PI*2, false);
+ $(document).keydown(function(e) {
+ kkeys.push( e.keyCode );
- con.closePath();
- con.fill();
- con.restore();
-
- /* Draw the Logo */
- con.fillStyle = 'hsla(12, 100%, 50%, .5)'; //Isobar Orange
-
- con.save();
- con.shadowBlur = 3;
- con.shadowOffsetX = 0;
- con.shadowOffsetY = 1;
- con.shadowColor = 'hsla(40, 50%, 0%, .2)';
-// con.scale(.5, .5);
-// con.translate(-25, -75);
- draw();
- con.restore();
- }
-
- if( play ) {
- requestAnimationFrame(animate);
+ if( kkeys.toString().indexOf( imanok ) >= 0 || kkeys.toString().indexOf( konami ) >= 0 ) {
+ jQuery(document).unbind('keydown', arguments.callee);
+
+ jQuery('canvas').click('click', function() {
+ play = false;
+ });
+
+ var main = document.getElementById('main'),
+ logo = document.getElementById('logo')
+ logo.style.visibility = 'hidden';
+ canvas.style.visibility = 'visible';
+ main.firstElementChild.style.visibility = 'hidden';
+ main.firstElementChild.nextElementSibling.style.visibility = 'hidden';
+
+ play = true;
+ animate();
+ timer();
+ }
+ else if( kkeys.toString().indexOf( cornify ) >= 0 ) {
+ jQuery(document).unbind('keydown', arguments.callee);
+ jQuery.getScript('http://www.cornify.com/js/cornify.js',function(){
+ cornify_add();
+ jQuery(document).keydown(cornify_add);
+ });
+ } else if ( kkeys.toString().indexOf( plaid ) >= 0 ) {
+ $(document).unbind('keydown', arguments.callee);
+ $.getScript('http://anti-code.com/plaidirish/paulify.js', function(){
+ paulify_add();
+ $(document).keydown(paulify_add);
+ });
+ }
+ });
}
- }
-
- function init() {
-
- var kkeys = [],
- cornify = '67,79,82,78,73,70,89',
- plaid = '80,76,65,73,68',
- konami = '38,38,40,40,37,39,37,39,66,65',
- imanok = '37,38,39';
-
- $(document).keydown(function(e) {
- kkeys.push( e.keyCode );
-
- if( kkeys.toString().indexOf( imanok ) >= 0 || kkeys.toString().indexOf( konami ) >= 0 ) {
- jQuery(document).unbind('keydown', arguments.callee);
+ init();
+
+ function draw() {
+
+ var iso = [
+ /* I */
+ con.beginPath(),
+ new Move(39, 163),
+ new Line(39, 248),
+ new Line(60, 248),
+ new Line(60, 163),
+ con.closePath(),
+ new Arc(50, 142, 11),
+ con.closePath(),
+ con.fill(),
- jQuery('canvas').click('click', function() {
- play = false;
- });
-
- var main = document.getElementById('main'),
- logo = document.getElementById('logo')
- logo.style.visibility = 'hidden';
- canvas.style.visibility = 'visible';
- main.firstElementChild.style.visibility = 'hidden';
- main.firstElementChild.nextElementSibling.style.visibility = 'hidden';
+ /* S */
+ con.beginPath(),
+ new Move(139, 168),
+ new Bezier(70, 140, 32, 210, 110, 213),
+ new Line(110, 196),
+ new Bezier(81, 192, 84, 172, 126, 182),
+ new Line(139, 168),
+ con.save(),
+ con.translate(215, 409),
+ con.rotate(Math.PI),
+ new Move(148, 168),
+ new Bezier(65, 135, 42, 211, 110, 213),
+ new Line(110, 196),
+ new Bezier(81, 192, 90, 168, 134, 180),
+ new Line(148, 168),
+ con.closePath(),
+ con.fill(),
+ con.restore(),
- play = true;
- animate();
- timer();
- }
- else if( kkeys.toString().indexOf( cornify ) >= 0 ) {
- jQuery(document).unbind('keydown', arguments.callee);
- jQuery.getScript('http://www.cornify.com/js/cornify.js',function(){
- cornify_add();
- jQuery(document).keydown(cornify_add);
- });
- } else if ( kkeys.toString().indexOf( plaid ) >= 0 ) {
- $(document).unbind('keydown', arguments.callee);
- $.getScript('http://anti-code.com/plaidirish/paulify.js', function(){
- paulify_add();
- $(document).keydown(paulify_add);
- });
- }
- });
- }
- init();
-
- function draw() {
-
- var iso = [
- /* I */
- con.beginPath(),
- new Move(39, 163),
- new Line(39, 248),
- new Line(60, 248),
- new Line(60, 163),
- con.closePath(),
- new Arc(50, 142, 11),
- con.closePath(),
- con.fill(),
-
- /* S */
- con.beginPath(),
- new Move(139, 168),
- new Bezier(70, 140, 32, 210, 110, 213),
- new Line(110, 196),
- new Bezier(81, 192, 84, 172, 126, 182),
- new Line(139, 168),
- con.save(),
- con.translate(215, 409),
- con.rotate(Math.PI),
- new Move(148, 168),
- new Bezier(65, 135, 42, 211, 110, 213),
- new Line(110, 196),
- new Bezier(81, 192, 90, 168, 134, 180),
- new Line(148, 168),
- con.closePath(),
- con.fill(),
- con.restore(),
-
- /* O */
- con.save(),
- con.beginPath(),
- con.translate(-6, 0),
- con.scale(1.04, 1),
- new Arc(193, 205, 44),
- con.closePath(),
- con.restore(),
- con.fill(),
- con.save(),
- con.beginPath(),
- con.fillStyle = 'white',
- new Arc(195, 205, 26),
- con.closePath(),
- con.fill(),
- con.restore(),
-
- /* B */
- con.beginPath(),
- new Move(269, 244),
- new Line(269, 248),
- new Line(247, 248),
- new Line(247, 148),
- new Line(269, 126),
- new Line(269, 149),
- new Line(269, 165),
- new Quad(310, 155, 330, 185),
- new Quad(345, 220, 314, 242),
- new Quad(294, 255, 269, 245),
- new Move(269, 226),
- new Bezier(300, 242, 327, 215, 310, 190),
- new Quad(290, 173, 269, 187),
- con.closePath(),
- con.fill(),
-
- /* A */
- con.beginPath(),
- new Move(398, 196),
- new Line(398, 248),
- new Line(419, 248),
- new Line(419, 196),
- new Bezier(420, 145, 350, 160, 349, 173),
- new Line(359, 183),
- new Bezier(384, 170, 399, 183, 397, 195),
- new Bezier(405, 194, 340, 174, 339, 222),
- new Bezier(345, 260, 396, 257, 415, 224),
- new Move(398, 220),
- new Line(398, 226),
- new Bezier(380, 242, 342, 224, 365, 208),
- new Quad(379, 200, 398, 210),
- con.closePath(),
- con.fill(),
+ /* O */
+ con.save(),
+ con.beginPath(),
+ con.translate(-6, 0),
+ con.scale(1.04, 1),
+ new Arc(193, 205, 44),
+ con.closePath(),
+ con.restore(),
+ con.fill(),
+ con.save(),
+ con.beginPath(),
+ con.fillStyle = 'white',
+ new Arc(195, 205, 26),
+ con.closePath(),
+ con.fill(),
+ con.restore(),
+
+ /* B */
+ con.beginPath(),
+ new Move(269, 244),
+ new Line(269, 248),
+ new Line(247, 248),
+ new Line(247, 148),
+ new Line(269, 126),
+ new Line(269, 149),
+ new Line(269, 165),
+ new Quad(310, 155, 330, 185),
+ new Quad(345, 220, 314, 242),
+ new Quad(294, 255, 269, 245),
+ new Move(269, 226),
+ new Bezier(300, 242, 327, 215, 310, 190),
+ new Quad(290, 173, 269, 187),
+ con.closePath(),
+ con.fill(),
+
+ /* A */
+ con.beginPath(),
+ new Move(398, 196),
+ new Line(398, 248),
+ new Line(419, 248),
+ new Line(419, 196),
+ new Bezier(420, 145, 350, 160, 349, 173),
+ new Line(359, 183),
+ new Bezier(384, 170, 399, 183, 397, 195),
+ new Bezier(405, 194, 340, 174, 339, 222),
+ new Bezier(345, 260, 396, 257, 415, 224),
+ new Move(398, 220),
+ new Line(398, 226),
+ new Bezier(380, 242, 342, 224, 365, 208),
+ new Quad(379, 200, 398, 210),
+ con.closePath(),
+ con.fill(),
+
+ /* R */
+ con.beginPath(),
+ new Move(427, 163),
+ new Line(427, 248),
+ new Line(449, 248),
+ new Line(449, 163),
+ new Move(449, 174),
+ new Quad(452, 165, 473, 163),
+ new Line(473, 180),
+ new Quad(456, 176, 449, 190),
+ con.closePath(),
+ con.fill(),
+ ];
- /* R */
- con.beginPath(),
- new Move(427, 163),
- new Line(427, 248),
- new Line(449, 248),
- new Line(449, 163),
- new Move(449, 174),
- new Quad(452, 165, 473, 163),
- new Line(473, 180),
- new Quad(456, 176, 449, 190),
- con.closePath(),
- con.fill(),
- ];
-
- var isoLength = iso.length;
- for( var i = 0; i < isoLength; i++ ) {
- iso[i];
+ var isoLength = iso.length;
+ for( var i = 0; i < isoLength; i++ ) {
+ iso[i];
+ }
}
- }
-
-
- /**
- * Move to Coordinate Point x, y
- *
- * @ctx.moveTo()
- * x, y - move context to this point
- */
- function Move(x, y) {
- return con.moveTo(x, y);
- }
-
- /**
- * Line Maker
- *
- * @ctx.lineTo()
- * x, y - draw line to this point
- */
- function Line(x, y) {
- return con.lineTo(x, y);
- }
- /**
- * Arc/Circle Maker
- *
- * @ctx.arc()
- * x, y - center point of circle
- * r - circle radius
- * a1, a2 - start angle, end angle
- * aW - anti-clockwise
- */
- function Arc(x, y, r) {
- return con.arc(x, y, r, 0, Math.PI * 2, false);
- }
- /**
- * Quadratic Curve Maker
- *
- * @ctx.quadraticCurveTo(controlX, controlY, endX, endY);
- * x, y - x and y coordinates for control point
- * eX, eY - end point
- */
- function Quad(x, y, eX, eY) {
- return con.quadraticCurveTo(x, y, eX, eY);
- }
-
- /**
- * Bezier Curve Maker
- *
- * @ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
- * x1, y1 - x and y coordinates for first control point
- * x1, y1 - x and y coords for second control point
- * eX, eY - end point
- */
- function Bezier(x1, y1, x2, y2, eX, eY) {
- return con.bezierCurveTo(x1, y1, x2, y2, eX, eY);
- }
+ /**
+ * Move to Coordinate Point x, y
+ *
+ * @ctx.moveTo()
+ * x, y - move context to this point
+ */
+ function Move(x, y) {
+ return con.moveTo(x, y);
+ }
- /**
- * Grid Lines
- */
- function grid() {
- for( var x = 0.5; x < 500; x += 20 ) {
- Move( x, 0 );
- Line( x, 400 );
+ /**
+ * Line Maker
+ *
+ * @ctx.lineTo()
+ * x, y - draw line to this point
+ */
+ function Line(x, y) {
+ return con.lineTo(x, y);
}
- for( var y = 0.5; y < 400; y += 20 ) {
- Move( 0, y );
- Line( 500, y );
+
+ /**
+ * Arc/Circle Maker
+ *
+ * @ctx.arc()
+ * x, y - center point of circle
+ * r - circle radius
+ * a1, a2 - start angle, end angle
+ * aW - anti-clockwise
+ */
+ function Arc(x, y, r) {
+ return con.arc(x, y, r, 0, Math.PI * 2, false);
}
- con.strokeStyle = '#ccc';
- con.stroke();
- }
-
- /**
- * Convert degrees to radians
- */
- function degRad(deg) {
- this.deg = deg || 1;
- return this.deg * (Math.PI / 180); // 0.0175 radians
- }
- }
-})(jQuery);
-
+ /**
+ * Quadratic Curve Maker
+ *
+ * @ctx.quadraticCurveTo(controlX, controlY, endX, endY);
+ * x, y - x and y coordinates for control point
+ * eX, eY - end point
+ */
+ function Quad(x, y, eX, eY) {
+ return con.quadraticCurveTo(x, y, eX, eY);
+ }
+
+ /**
+ * Bezier Curve Maker
+ *
+ * @ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
+ * x1, y1 - x and y coordinates for first control point
+ * x1, y1 - x and y coords for second control point
+ * eX, eY - end point
+ */
+ function Bezier(x1, y1, x2, y2, eX, eY) {
+ return con.bezierCurveTo(x1, y1, x2, y2, eX, eY);
+ }
+
+ /**
+ * Grid Lines
+ */
+ function grid() {
+ for( var x = 0.5; x < 500; x += 20 ) {
+ Move( x, 0 );
+ Line( x, 400 );
+ }
+ for( var y = 0.5; y < 400; y += 20 ) {
+ Move( 0, y );
+ Line( 500, y );
+ }
+ con.strokeStyle = '#ccc';
+ con.stroke();
+ }
+
+ /**
+ * Convert degrees to radians
+ */
+ function degRad(deg) {
+ this.deg = deg || 1;
+ return this.deg * (Math.PI / 180); // 0.0175 radians
+ }
+ }
+})(jQuery);
View
5 robots.txt
@@ -0,0 +1,5 @@
+# www.robotstxt.org/
+# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
+
+User-agent: *
+
View
4 sections/en/general.html
@@ -1,5 +1,7 @@
<!-- #### GENERAL SECTION #### -->
+<h1>Front-end Code Standards &amp; Best Practices</h1>
+
<h2>Overview</h2>
<p>This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Isobar US. It is to be readily available to anyone who wishes to check the iterative progress of our best practices. If you have any feedback, please leave a comment on the <a href="http://na.isobar.com/2010/our-front-end-development-best-practices/#comments">announcement blog post</a>.</p>
@@ -17,7 +19,7 @@
<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="#validation">generally valid</a>.</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>
View
3  sections/en/performance.html
@@ -17,7 +17,6 @@
<li>Set caching headers appropriately.</li>
<li>Consider a cookie-less subdomain for static assets</li>
- <li>Avoid inline &lt;script&gt; blocks.</li>
<li>CSS should be located in the <code>&lt;head></code> of the document, Javascript should be right before the <code>&lt;/body></code> tag.</li>
<li>Both CSS and JavaScript should be served minified. Most people use the <a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a> for this.</li>
@@ -123,7 +122,7 @@
<pre>ExpiresDefault "access plus 1 year"</pre>
- <p><code>Expires http header</code> should be set to a value between one month from present to a year (far future) from present. Caching only applies to that exact URL, so a change in the filename of any asset will start a fresh copy. Many developers use a build process to add a version number or timestamp to their assets, one example of this is the HTML5 Boilerplate. Each subsequent build will start a brand new cached version allowing you to use far future cache dates without worry. <a href="http://code.google.com/speed/page-speed/docs/caching.html#LeverageBrowserCaching ">Google has a lot more detail on browser caching</a>.</p>
+ <p><code>Expires http header</code> should be set to a value between one month from present to a year (far future) from present. Caching only applies to that exact URL, so a change in the filename of any asset will start a fresh copy. Many developers use a build process to add a version number or timestamp to their assets, one example of this is the HTML5 Boilerplate. Each subsequent build will start a brand new cached version allowing you to use far future cache dates without worry. <a href="http://code.google.com/speed/page-speed/docs/caching.html#LeverageBrowserCaching ">Google has a lot more detail on browser caching</a>, and <a href="http://yuiblog.com/blog/2007/01/04/performance-research-part-2/">Yahoo has done some interesting research on browser caching as well</a>.</p>
<h3>Shard resources across domains</h3>
View
3  sections/es/general.html
@@ -1,5 +1,6 @@
<!-- #### GENERAL SECTION #### -->
+<h1>Estándares y Prácticas Recomendadas de Desarrollo Front-end</h1>
<h2>Información General</h2>
@@ -18,7 +19,7 @@
<ol>
<li>Separación de presentación, contenido y comportamiento.</li>
- <li><a href="http://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml">El etiquetado debe estar bien formado, ser semánticamente correcto</a> y <a href="#validation">generalmente válido</a>.</li>
+ <li><a href="http://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml">El etiquetado debe estar bien formado, ser semánticamente correcto</a> y <a href="#_appendix_a_validators">generalmente válido</a>.</li>
<li><a href="http://icant.co.uk/articles/pragmatic-progressive-enhancement/">Javascript debe mejorar progresivamente la experiencia</a>.</li>
</ol>
Please sign in to comment.
Something went wrong with that request. Please try again.