luca 0.9.8 → 0.9.9
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG +49 -0
- data/Gemfile +8 -1
- data/Gemfile.lock +97 -53
- data/Guardfile +3 -25
- data/README.md +5 -16
- data/ROADMAP +15 -9
- data/Rakefile +24 -75
- data/app.rb +10 -42
- data/app/assets/javascripts/luca/basic.coffee +1 -1
- data/app/assets/javascripts/luca/components/application.coffee +187 -104
- data/app/assets/javascripts/luca/components/collection_view.coffee +115 -51
- data/app/assets/javascripts/luca/components/controller.coffee +87 -10
- data/app/assets/javascripts/luca/components/fields/base.coffee +74 -13
- data/app/assets/javascripts/luca/components/fields/button_field.coffee +60 -13
- data/app/assets/javascripts/luca/components/fields/checkbox_array.coffee +12 -7
- data/app/assets/javascripts/luca/components/fields/select_field.coffee +82 -23
- data/app/assets/javascripts/luca/components/fields/text_area_field.coffee +25 -10
- data/app/assets/javascripts/luca/components/fields/text_field.coffee +9 -3
- data/app/assets/javascripts/luca/components/form_view.coffee +105 -33
- data/app/assets/javascripts/luca/components/grid_layout_view.coffee +42 -0
- data/app/assets/javascripts/luca/components/index.coffee +6 -0
- data/app/assets/javascripts/luca/components/nav_bar.coffee +60 -6
- data/app/assets/javascripts/luca/components/page.coffee +70 -0
- data/app/assets/javascripts/luca/components/simple_collection_view.coffee +10 -0
- data/app/assets/javascripts/luca/components/table_view.coffee +7 -3
- data/app/assets/javascripts/luca/components/table_view_scrollable.coffee +23 -0
- data/app/assets/javascripts/luca/concerns/collection_event_bindings.coffee +4 -1
- data/app/assets/javascripts/luca/concerns/development_tool_helpers.coffee +23 -14
- data/app/assets/javascripts/luca/concerns/dom_helpers.coffee +2 -2
- data/app/assets/javascripts/luca/concerns/filterable.coffee +8 -11
- data/app/assets/javascripts/luca/concerns/form_model_bindings.coffee +20 -0
- data/app/assets/javascripts/luca/concerns/modal_view.coffee +40 -15
- data/app/assets/javascripts/luca/concerns/query_collection_bindings.coffee +7 -1
- data/app/assets/javascripts/luca/concerns/state_model.coffee +40 -26
- data/app/assets/javascripts/luca/concerns/templating.coffee +3 -1
- data/app/assets/javascripts/luca/config.coffee +5 -0
- data/app/assets/javascripts/luca/containers/card_view.coffee +87 -52
- data/app/assets/javascripts/luca/containers/container.coffee +305 -108
- data/app/assets/javascripts/luca/containers/modal_view.coffee +9 -9
- data/app/assets/javascripts/luca/containers/page_controller.coffee +25 -0
- data/app/assets/javascripts/luca/containers/panel_toolbar.coffee +5 -6
- data/app/assets/javascripts/luca/containers/tab_view.coffee +19 -10
- data/app/assets/javascripts/luca/containers/viewport.coffee +12 -16
- data/app/assets/javascripts/luca/core/collection.coffee +19 -5
- data/app/assets/javascripts/luca/core/events.coffee +5 -5
- data/app/assets/javascripts/luca/core/model.coffee +1 -1
- data/app/assets/javascripts/luca/core/panel.coffee +18 -6
- data/app/assets/javascripts/luca/core/registry/component_definition.coffee +2 -1
- data/app/assets/javascripts/luca/core/registry/meta_data.coffee +2 -0
- data/app/assets/javascripts/luca/core/registry/registry.coffee +14 -11
- data/app/assets/javascripts/luca/core/templates.coffee +5 -1
- data/app/assets/javascripts/luca/core/view.coffee +200 -47
- data/app/assets/javascripts/luca/dependencies.coffee +2 -0
- data/app/assets/javascripts/luca/development/code_sync_manager.coffee +173 -0
- data/app/assets/javascripts/luca/development/component.coffee +76 -0
- data/app/assets/javascripts/luca/development/components.coffee +57 -0
- data/app/assets/javascripts/luca/development/console.coffee +1 -1
- data/app/assets/javascripts/luca/development/index.coffee +4 -1
- data/app/assets/javascripts/luca/framework.coffee +7 -3
- data/app/assets/javascripts/luca/index.coffee +2 -1
- data/app/assets/javascripts/luca/managers/collection_manager.coffee +2 -3
- data/app/assets/javascripts/luca/managers/index.coffee +1 -1
- data/app/assets/javascripts/luca/managers/socket_manager.coffee +31 -8
- data/app/assets/javascripts/luca/templates/components/nav_bar.jst.ejs +16 -1
- data/app/assets/javascripts/luca/templates/containers/tab_view.jst.ejs +1 -1
- data/app/assets/javascripts/luca/util/index.coffee +1 -0
- data/app/assets/javascripts/luca/util/keybindings.coffee +24 -0
- data/app/assets/javascripts/luca/util/logging.coffee +15 -0
- data/app/assets/javascripts/luca/util/luca.coffee +9 -1
- data/app/assets/stylesheets/luca/components/table_view.scss +85 -0
- data/app/assets/stylesheets/luca/components/viewport.scss +0 -4
- data/app/assets/stylesheets/luca/containers/container.scss +8 -0
- data/app/assets/stylesheets/luca/index.css +2 -2
- data/bin/luca +14 -0
- data/config.ru +1 -2
- data/docs/framework.json +1 -0
- data/docs/luca-framework-documentation.js +1 -0
- data/docs/{application.md → old/application.md} +0 -0
- data/docs/{collection.md → old/collection.md} +0 -0
- data/docs/{collection_manager.md → old/collection_manager.md} +0 -0
- data/docs/{container_philosophy.md → old/container_philosophy.md} +0 -0
- data/docs/{event_binding_helpers.md → old/event_binding_helpers.md} +0 -0
- data/docs/{method_caching_and_computed_properties.md → old/method_caching_and_computed_properties.md} +0 -0
- data/docs/{view.md → old/view.md} +0 -0
- data/lib/generators/luca/application/templates/javascripts/dependencies.coffee +2 -5
- data/lib/guard/luca.rb +84 -0
- data/lib/luca.rb +25 -1
- data/lib/luca/asset_compiler.rb +117 -0
- data/lib/luca/cli.rb +68 -0
- data/lib/luca/cli/generate.rb +37 -0
- data/lib/luca/cli/server.rb +20 -0
- data/lib/luca/cli/sync.rb +40 -0
- data/lib/luca/cli/watch.rb +16 -0
- data/lib/luca/collection.rb +64 -0
- data/lib/luca/collection/endpoint.rb +38 -0
- data/lib/luca/collection/file_backend.rb +121 -0
- data/lib/luca/collection/redis_backend.rb +153 -0
- data/lib/luca/compiled_asset.rb +61 -0
- data/lib/luca/component_definition.rb +356 -0
- data/lib/luca/luca_application.rb +258 -0
- data/lib/luca/project.rb +73 -0
- data/lib/luca/project_harness.rb +96 -0
- data/lib/luca/rails.rb +5 -3
- data/lib/luca/rails/engine.rb +8 -0
- data/lib/luca/rails/version.rb +1 -2
- data/lib/luca/server.rb +7 -0
- data/lib/luca/stylesheet.rb +35 -0
- data/lib/luca/template.rb +2 -0
- data/lib/luca/template_asset.rb +64 -0
- data/lib/luca/version.rb +3 -0
- data/lib/luca/watcher.rb +72 -0
- data/lib/railties/luca/tasks.rake +7 -0
- data/site/.bundle/config +2 -0
- data/site/.gitignore +5 -0
- data/site/.rvmrc +1 -0
- data/site/CHANGELOG.md +41 -0
- data/site/DOCS.md +41 -0
- data/site/Gemfile +8 -0
- data/site/Gemfile.lock +134 -0
- data/site/LICENSE.md +19 -0
- data/site/config.rb +84 -0
- data/site/helpers/site_helpers.rb +20 -0
- data/site/html5bp-docs/README.md +38 -0
- data/site/html5bp-docs/contribute.md +104 -0
- data/site/html5bp-docs/crossdomain.md +21 -0
- data/site/html5bp-docs/css.md +135 -0
- data/site/html5bp-docs/extend.md +507 -0
- data/site/html5bp-docs/faq.md +77 -0
- data/site/html5bp-docs/htaccess.md +323 -0
- data/site/html5bp-docs/html.md +170 -0
- data/site/html5bp-docs/js.md +31 -0
- data/site/html5bp-docs/misc.md +25 -0
- data/site/html5bp-docs/usage.md +109 -0
- data/site/readme.md +47 -0
- data/site/source/.htaccess +540 -0
- data/site/source/404.html +157 -0
- data/site/source/app/assets/javascripts/dependencies.js.coffee +6 -0
- data/site/source/app/assets/javascripts/docs-docs.js +1 -0
- data/site/source/app/assets/javascripts/docs/application.coffee +64 -0
- data/site/source/app/assets/javascripts/docs/collections/docs_documentation.coffee +17 -0
- data/site/source/app/assets/javascripts/docs/collections/github_repositories.coffee +7 -0
- data/site/source/app/assets/javascripts/docs/collections/index.coffee +1 -0
- data/site/source/app/assets/javascripts/docs/collections/luca_documentation.coffee +17 -0
- data/site/source/app/assets/javascripts/docs/collections/public_gists.coffee +4 -0
- data/site/source/app/assets/javascripts/docs/config.coffee +5 -0
- data/site/source/app/assets/javascripts/docs/index.coffee +12 -0
- data/site/source/app/assets/javascripts/docs/lib/router.coffee +3 -0
- data/{spec/components/application_spec.coffee → site/source/app/assets/javascripts/docs/lib/util.coffee} +0 -0
- data/site/source/app/assets/javascripts/docs/models/component.coffee +99 -0
- data/site/source/app/assets/javascripts/docs/models/github_repository.coffee +3 -0
- data/site/source/app/assets/javascripts/docs/models/index.coffee +1 -0
- data/site/source/app/assets/javascripts/docs/templates/component_documentation.jst.ejs +55 -0
- data/site/source/app/assets/javascripts/docs/templates/examples_browser/overview.jst.ejs +4 -0
- data/site/source/app/assets/javascripts/docs/templates/examples_browser/selector.jst.ejs +11 -0
- data/site/source/app/assets/javascripts/docs/templates/github_repository.jst.ejs +4 -0
- data/site/source/app/assets/javascripts/docs/templates/layouts/main.jst.ejs +4 -0
- data/site/source/app/assets/javascripts/docs/templates/left_navigation.jst.ejs +5 -0
- data/site/source/app/assets/javascripts/docs/templates/pages/getting_started.jst.ejs +78 -0
- data/site/source/app/assets/javascripts/docs/templates/pages/home.jst.ejs +57 -0
- data/site/source/app/assets/javascripts/docs/views/components/code_editor.coffee +45 -0
- data/{spec/components/collection_loader_view_spec.coffee → site/source/app/assets/javascripts/docs/views/components/code_editor/index.coffee} +0 -0
- data/site/source/app/assets/javascripts/docs/views/components/component_documentation.coffee +72 -0
- data/site/source/app/assets/javascripts/docs/views/index.coffee +3 -0
- data/site/source/app/assets/javascripts/docs/views/pages/browse_source.coffee +46 -0
- data/site/source/app/assets/javascripts/docs/views/pages/browse_source/details.coffee +37 -0
- data/site/source/app/assets/javascripts/docs/views/pages/browse_source/list.coffee +31 -0
- data/site/source/app/assets/javascripts/docs/views/pages/component_editor.coffee +10 -0
- data/site/source/app/assets/javascripts/docs/views/pages/examples_browser.coffee +102 -0
- data/site/source/app/assets/javascripts/docs/views/pages/examples_browser/docs.coffee +12 -0
- data/site/source/app/assets/javascripts/docs/views/pages/examples_browser/source.coffee +13 -0
- data/site/source/app/assets/javascripts/docs/views/pages/home.coffee +10 -0
- data/site/source/app/assets/javascripts/docs/views/views/api_browser/index.coffee +43 -0
- data/site/source/app/assets/javascripts/docs/views/views/collection_view_examples/grid_layout_view_example.coffee +14 -0
- data/site/source/app/assets/javascripts/docs/views/views/collection_view_examples/table_view_example.coffee +39 -0
- data/site/source/app/assets/javascripts/docs/views/views/form_view_examples/basic_example.coffee +38 -0
- data/site/source/app/assets/javascripts/docs/views/views/form_view_examples/complex_layout.coffee +110 -0
- data/site/source/app/assets/javascripts/docs/views/views/top_navigation.coffee +6 -0
- data/site/source/app/assets/javascripts/luca-docs.js +1 -0
- data/site/source/app/assets/javascripts/luca-framework-documentation.js +1 -0
- data/site/source/app/assets/javascripts/site.js.coffee +4 -0
- data/site/source/app/assets/javascripts/vendor/codemirror.js +4786 -0
- data/site/source/app/assets/javascripts/vendor/coffeescript.js +346 -0
- data/site/source/app/assets/javascripts/vendor/css.js +465 -0
- data/site/source/app/assets/javascripts/vendor/htmlmixed.js +84 -0
- data/site/source/app/assets/javascripts/vendor/javascript.js +422 -0
- data/site/source/app/assets/javascripts/vendor/js-beautify.js +1353 -0
- data/site/source/app/assets/javascripts/vendor/modernizr-2.6.1.min.js +4 -0
- data/site/source/app/assets/javascripts/vendor/vim.js +2511 -0
- data/site/source/app/assets/stylesheets/docs/api-browser.css.scss +5 -0
- data/site/source/app/assets/stylesheets/docs/application.css.scss +35 -0
- data/site/source/app/assets/stylesheets/docs/browse-source.css.scss +5 -0
- data/site/source/app/assets/stylesheets/docs/scrollable-table.css.scss +5 -0
- data/site/source/app/assets/stylesheets/site.css.scss +2 -0
- data/site/source/app/assets/stylesheets/vendor/codemirror.css +240 -0
- data/site/source/app/assets/stylesheets/vendor/prettify-tomorrow-night-bright.css +160 -0
- data/site/source/app/assets/stylesheets/vendor/twilight.css +26 -0
- data/site/source/crossdomain.xml +15 -0
- data/site/source/documentation.html.haml +1 -0
- data/site/source/favicon_base.png +0 -0
- data/site/source/humans.txt +15 -0
- data/site/source/images/background.png +0 -0
- data/site/source/images/middleman.png +0 -0
- data/site/source/index.html.haml +1 -0
- data/site/source/layouts/layout.haml +55 -0
- data/site/source/readme.md +63 -0
- data/site/source/robots.txt +3 -0
- data/spec/{components/grid_view_spec.coffee → javascripts/components/application_spec.coffee} +0 -0
- data/spec/{components/pagination_control_spec.coffee → javascripts/components/collection_loader_view_spec.coffee} +0 -0
- data/spec/{components → javascripts/components}/collection_view_spec.coffee +1 -1
- data/spec/{components → javascripts/components}/controller_spec.coffee +0 -0
- data/spec/{components → javascripts/components}/fields/checkbox_array_spec.coffee +0 -0
- data/spec/javascripts/components/form_view_spec.coffee +162 -0
- data/spec/{components/record_manager_spec.coffee → javascripts/components/grid_view_spec.coffee} +0 -0
- data/spec/{components → javascripts/components}/multi_collection_view_spec.coffee +0 -0
- data/spec/{components/template_spec.coffee → javascripts/components/pagination_control_spec.coffee} +0 -0
- data/spec/{concerns/paginatable_spec.coffee → javascripts/components/record_manager_spec.coffee} +0 -0
- data/spec/{components → javascripts/components}/table_view_spec.coffee +0 -0
- data/spec/{containers/modal_view_spec.coffee → javascripts/components/template_spec.coffee} +0 -0
- data/spec/{concerns → javascripts/concerns}/collection_event_bindings_spec.coffee +0 -0
- data/spec/{concerns → javascripts/concerns}/dom_helpers_spec.coffee +0 -0
- data/spec/{concerns → javascripts/concerns}/filterable_spec.coffee +0 -0
- data/spec/{concerns → javascripts/concerns}/model_presenter_spec.coffee +0 -0
- data/spec/{containers/panel_view_spec.coffee → javascripts/concerns/paginatable_spec.coffee} +0 -0
- data/spec/{concerns → javascripts/concerns}/state_model_spec.coffee +5 -0
- data/spec/javascripts/containers/card_view_spec.coffee +108 -0
- data/spec/{containers/tab_view_spec.coffee → javascripts/containers/modal_view_spec.coffee} +0 -0
- data/spec/{containers/viewport_spec.coffee → javascripts/containers/panel_view_spec.coffee} +0 -0
- data/spec/{core/observer_spec.coffee → javascripts/containers/tab_view_spec.coffee} +0 -0
- data/spec/{managers/socket_manager_spec.coffee → javascripts/containers/viewport_spec.coffee} +0 -0
- data/spec/{core → javascripts/core}/collection_spec.coffee +1 -1
- data/spec/{core → javascripts/core}/concerns_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/container_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/define_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/events_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/field_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/framework_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/model_spec.coffee +0 -0
- data/spec/javascripts/core/observer_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/util_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/view_spec.coffee +51 -39
- data/spec/{dependencies → javascripts/dependencies}/index.coffee +0 -0
- data/spec/{dependencies → javascripts/dependencies}/jasmine-html.js +0 -0
- data/spec/{dependencies → javascripts/dependencies}/jasmine.js +0 -0
- data/spec/{dependencies → javascripts/dependencies}/sinon.js +0 -0
- data/spec/{helper.coffee → javascripts/helper.coffee} +0 -0
- data/spec/{managers → javascripts/managers}/collection_manager_spec.coffee +0 -0
- data/spec/javascripts/managers/socket_manager_spec.coffee +0 -0
- data/spec/lib/component_definition_spec.rb +63 -0
- data/spec/lib/input_compiler_spec.rb +9 -0
- data/spec/lib/luca_application_spec.rb +30 -0
- data/spec/support/fixtures/application.coffee +45 -0
- data/spec/support/fixtures/component.coffee +34 -0
- data/tutorials/component-definitions.md +0 -0
- data/tutorials/component-definitions/01_intro.md +0 -0
- data/tutorials/component-driven-design.md +140 -0
- data/tutorials/structure-of-a-project.md +63 -0
- data/vendor/assets/javascripts/backbone-min.js +37 -33
- data/vendor/assets/javascripts/backbone-query.min.js +1 -1
- data/vendor/assets/javascripts/hogan.js +707 -0
- data/vendor/assets/javascripts/jquery.js +5 -4
- data/vendor/assets/javascripts/keymaster.min.js +4 -0
- data/vendor/assets/javascripts/luca-dependencies.min.js +8 -0
- data/vendor/assets/javascripts/luca-development.min.js +1 -0
- data/vendor/assets/javascripts/luca-spec.js +6 -6
- data/vendor/assets/javascripts/luca-ui.js +7386 -0
- data/vendor/assets/javascripts/luca-ui.min.js +5 -0
- data/vendor/assets/javascripts/luca.full.min.js +12 -0
- data/vendor/assets/javascripts/luca.min.js +5 -0
- data/vendor/assets/javascripts/underscore-min.js +1 -5
- data/vendor/assets/javascripts/underscore-string.min.js +1 -1
- data/vendor/assets/stylesheets/luca-components.css +202 -0
- data/vendor/assets/stylesheets/luca-development.css +23 -0
- data/vendor/assets/stylesheets/luca-ui.css +198 -0
- metadata +324 -94
- data/app/assets/javascripts/luca/components/base_toolbar.coffee +0 -17
- data/app/assets/javascripts/luca/components/form_button_toolbar.coffee +0 -28
- data/app/assets/javascripts/luca/components/grid_view.coffee +0 -269
- data/app/assets/javascripts/luca/components/page_controller.coffee +0 -7
- data/app/assets/javascripts/luca/components/template.coffee +0 -5
- data/app/assets/javascripts/luca/components/toolbar_dialog.coffee +0 -25
- data/lib/luca/code_browser.rb +0 -55
- data/lib/luca/command_line.rb +0 -69
- data/lib/luca/component_documentation.rb +0 -72
- data/site/assets/bootstrap.min.js +0 -7
- data/site/assets/dependencies.js +0 -94
- data/site/assets/glyphicons-halflings-white.png +0 -0
- data/site/assets/glyphicons-halflings.png +0 -0
- data/site/assets/luca-ui-bootstrap.css +0 -1331
- data/site/assets/luca-ui-bootstrap.js +0 -9
- data/site/assets/luca-ui-development-tools.css +0 -234
- data/site/assets/luca-ui-development-tools.js +0 -18561
- data/site/assets/luca-ui-development-tools.min.js +0 -15
- data/site/assets/luca-ui-full.min.js +0 -8
- data/site/assets/luca-ui.min.js +0 -4
- data/site/assets/sandbox.css +0 -62
- data/site/assets/sandbox.js +0 -469
- data/site/docs/application.html +0 -41
- data/site/docs/caching.html +0 -43
- data/site/docs/collection.html +0 -75
- data/site/docs/collection_manager.html +0 -71
- data/site/docs/containers.html +0 -118
- data/site/docs/events.html +0 -153
- data/site/docs/view.html +0 -128
- data/site/img/glyphicons-halflings-white.png +0 -0
- data/site/img/glyphicons-halflings.png +0 -0
- data/site/index.html +0 -20
- data/site/source-map.js +0 -1
- data/spec/components/form_view_spec.coffee +0 -84
- data/spec/containers/card_view_spec.coffee +0 -50
- data/spec/luca-spec.coffee +0 -9
@@ -0,0 +1,21 @@
|
|
1
|
+
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
2
|
+
table of contents](README.md)
|
3
|
+
|
4
|
+
# crossdomain.xml
|
5
|
+
|
6
|
+
A cross-domain policy file is an XML document that grants a web client—such as
|
7
|
+
Adobe Flash Player, Adobe Reader, etc., permission to handle data across
|
8
|
+
multiple domains. When a client hosts content from a particular source domain
|
9
|
+
and that content makes requests directed towards a domain other than its own,
|
10
|
+
the remote domain would need to host a cross-domain policy file that grants
|
11
|
+
access to the source domain, allowing the client to continue with the
|
12
|
+
transaction. Policy files grant read access to data, permit a client to include
|
13
|
+
custom headers in cross-domain requests, and are also used with sockets to
|
14
|
+
grant permissions for socket-based connections.
|
15
|
+
|
16
|
+
For full details, check out Adobe's article about the [cross-domain policy file
|
17
|
+
specification](http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html)
|
18
|
+
|
19
|
+
Read the [Cross-domain policy file
|
20
|
+
specification](http://learn.adobe.com/wiki/download/attachments/64389123/CrossDomain_PolicyFile_Specification.pdf?version=1)
|
21
|
+
- (PDF, 129 KB)
|
@@ -0,0 +1,135 @@
|
|
1
|
+
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
2
|
+
table of contents](README.md)
|
3
|
+
|
4
|
+
# The CSS
|
5
|
+
|
6
|
+
The HTML5 Boilerplate starting CSS includes:
|
7
|
+
|
8
|
+
* [Normalize.css](https://github.com/necolas/normalize.css).
|
9
|
+
* Useful HTML5 Boilerplate defaults.
|
10
|
+
* Common helpers.
|
11
|
+
* Placeholder media queries.
|
12
|
+
* Print styles.
|
13
|
+
|
14
|
+
This starting CSS does not rely on the presence of conditional classnames,
|
15
|
+
conditional style sheets, or Modernizr. It is ready to use whatever your
|
16
|
+
development preferences happen to be.
|
17
|
+
|
18
|
+
|
19
|
+
## Normalize.css
|
20
|
+
|
21
|
+
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains
|
22
|
+
extensive inline documentation. Please refer to the [Normalize.css
|
23
|
+
project](http://necolas.github.com/normalize.css/) for more information.
|
24
|
+
|
25
|
+
|
26
|
+
## HTML5 Boilerplate defaults
|
27
|
+
|
28
|
+
This project includes a handful of base styles that build upon Normalize.css.
|
29
|
+
These include:
|
30
|
+
|
31
|
+
* Basic typography settings to provide improved text readability by default.
|
32
|
+
* Protection against unwanted `text-shadow` during text highlighting.
|
33
|
+
* Tweaks to default image alignment, fieldsets, and textareas.
|
34
|
+
* A pretty Chrome Frame prompt.
|
35
|
+
|
36
|
+
You are free to modify or add to these base styles as your project requires.
|
37
|
+
|
38
|
+
|
39
|
+
## Common helpers
|
40
|
+
|
41
|
+
#### `.ir`
|
42
|
+
|
43
|
+
Add the `.ir` class to any element you are applying image-replacement to. When
|
44
|
+
replacing an element's content with an image, make sure to also set a specific
|
45
|
+
`background-image: url(pathtoimage.png);`, `width`, and `height` so that your
|
46
|
+
replacement image appears.
|
47
|
+
|
48
|
+
#### `.hidden`
|
49
|
+
|
50
|
+
Add the `.hidden` class to any elements that you want to hide from all
|
51
|
+
presentations, including screen readers. It could be an element that will be
|
52
|
+
populated later with JavaScript or an element you will hide with JavaScript. Do
|
53
|
+
not use this for SEO keyword stuffing. That is just not cool.
|
54
|
+
|
55
|
+
#### `.visuallyhidden`
|
56
|
+
|
57
|
+
Add the `.visuallyhidden` class to hide text from browsers but make it
|
58
|
+
available for screen readers. You can use this to hide text that is specific to
|
59
|
+
screen readers but that other users should not see. [About invisible
|
60
|
+
content](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding
|
61
|
+
content for
|
62
|
+
accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility),
|
63
|
+
[HTML5 Boilerplate
|
64
|
+
issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/).
|
65
|
+
|
66
|
+
#### `.invisible`
|
67
|
+
|
68
|
+
Add the `.invisible` class to any element you want to hide without affecting
|
69
|
+
layout. When you use `display: none` an element is effectively removed from the
|
70
|
+
layout. But in some cases you want the element to simply be invisible while
|
71
|
+
remaining in the flow and not affecting the positioning of surrounding
|
72
|
+
content.
|
73
|
+
|
74
|
+
#### `.clearfix`
|
75
|
+
|
76
|
+
Adding `.clearfix` to an element will ensure that it always fully contains its
|
77
|
+
floated children. There have been many variants of the clearfix hack over the
|
78
|
+
years, and there are other hacks that can also help you to contain floated
|
79
|
+
children, but the HTML5 Boilerplate currently uses the [micro
|
80
|
+
clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
|
81
|
+
|
82
|
+
|
83
|
+
## Media Queries
|
84
|
+
|
85
|
+
The boilerplate makes it easy to get started with a "Mobile First" and
|
86
|
+
[Responsive Web
|
87
|
+
Design](http://www.alistapart.com/articles/responsive-web-design/) approach to
|
88
|
+
development. But it's worth remembering that there are [no silver
|
89
|
+
bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/).
|
90
|
+
|
91
|
+
We include a placeholder Media Queries to build up your mobile styles for wider
|
92
|
+
viewports and high-resolution displays. It's recommended that you adapt these
|
93
|
+
Media Queries based on the content of your site rather than mirroring the fixed
|
94
|
+
dimensions of specific devices.
|
95
|
+
|
96
|
+
If you do not want to take a "Mobile First" approach, you can simply edit or
|
97
|
+
remove these placeholder Media Queries. One possibility would be to work from
|
98
|
+
wide viewports down and use `max-width` MQs instead, e.g., `@media only screen
|
99
|
+
and (max-width: 480px)`.
|
100
|
+
|
101
|
+
Take a look into the [Mobile
|
102
|
+
Boilerplate](https://github.com/h5bp/mobile-boilerplate) for features that are
|
103
|
+
useful when developing mobile wep apps.
|
104
|
+
|
105
|
+
|
106
|
+
## Print styles
|
107
|
+
|
108
|
+
* Print styles are inlined to [reduce the number of page
|
109
|
+
requests](http://www.phpied.com/delay-loading-your-print-css/).
|
110
|
+
* We strip all background colors and change the font color to dark gray and
|
111
|
+
remove text-shadow. This is meant to help save printer ink.
|
112
|
+
* Anchors do not need colors to indicate they are linked. They are underlined
|
113
|
+
to indicate so.
|
114
|
+
* Anchors and Abbreviations are expanded to indicate where users reading the
|
115
|
+
printed page can refer to.
|
116
|
+
* But we do not want to show link text for image replaced elements (given that
|
117
|
+
they are primarily images).
|
118
|
+
|
119
|
+
### Paged media styles
|
120
|
+
|
121
|
+
* Paged media is supported only in a [few
|
122
|
+
browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules).
|
123
|
+
* Paged media support means browsers would know how to interpret instructions
|
124
|
+
on breaking content into pages and on orphans/widows.
|
125
|
+
* We use `page-break-inside: avoid;` to prevent an image and table row from
|
126
|
+
being split into two different pages, so use the same `page-break-inside:
|
127
|
+
avoid;` for that as well.
|
128
|
+
* Headings should always appear with the text they are titles for. So, we
|
129
|
+
ensure headings never appear in a different page than the text they describe
|
130
|
+
by using `page-break-after: avoid;`.
|
131
|
+
* We also apply a default margin for the page specified in `cm`.
|
132
|
+
* We do not want [orphans and
|
133
|
+
widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages
|
134
|
+
you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal
|
135
|
+
number of words that every line should contain.
|
@@ -0,0 +1,507 @@
|
|
1
|
+
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
|
2
|
+
table of contents](README.md)
|
3
|
+
|
4
|
+
# Extend and customise HTML5 Boilerplate
|
5
|
+
|
6
|
+
Here is some useful advice for how you can make your project with HTML5
|
7
|
+
Boilerplate even better. We don't want to include it all by default, as not
|
8
|
+
everything fits with everyone's needs.
|
9
|
+
|
10
|
+
|
11
|
+
## DNS prefetching
|
12
|
+
|
13
|
+
In short, DNS Prefetching is a method of informing the browser of domain names
|
14
|
+
referenced on a site so that the client can resolve the DNS for those hosts,
|
15
|
+
cache them, and when it comes time to use them, have a faster turn around on
|
16
|
+
the request.
|
17
|
+
|
18
|
+
### Implicit prefetches
|
19
|
+
|
20
|
+
There is a lot of prefetching done for you automatically by the browser. When
|
21
|
+
the browser encounters an anchor in your html that does not share the same
|
22
|
+
domain name as the current location the browser requests, from the client OS,
|
23
|
+
the IP address for this new domain. The client first checks its cache and
|
24
|
+
then, lacking a cached copy, makes a request from a DNS server. These requests
|
25
|
+
happen in the background and are not meant to block the rendering of the
|
26
|
+
page.
|
27
|
+
|
28
|
+
The goal of this is that when the foreign IP address is finally needed it will
|
29
|
+
already be in the client cache and will not block the loading of the foreign
|
30
|
+
content. Less requests result in faster page load times. The perception of this
|
31
|
+
is increased on a mobile platform where DNS latency can be greater.
|
32
|
+
|
33
|
+
#### Disable implicit prefetching
|
34
|
+
|
35
|
+
```html
|
36
|
+
<meta http-equiv="x-dns-prefetch-control" content="off">
|
37
|
+
```
|
38
|
+
|
39
|
+
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
|
40
|
+
prefetch any explicit dns-prefetch links.
|
41
|
+
|
42
|
+
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
|
43
|
+
FOREIGN DOMAINS.
|
44
|
+
|
45
|
+
### Explicit prefetches
|
46
|
+
|
47
|
+
Typically the browser only scans the HTML for foreign domains. If you have
|
48
|
+
resources that are outside of your HTML (a javascript request to a remote
|
49
|
+
server or a CDN that hosts content that may not be present on every page of
|
50
|
+
your site, for example) then you can queue up a domain name to be prefetched.
|
51
|
+
|
52
|
+
```html
|
53
|
+
<link rel="dns-prefetch" href="//example.com">
|
54
|
+
<link rel="dns-prefetch" href="//ajax.googleapis.com">
|
55
|
+
```
|
56
|
+
|
57
|
+
You can use as many of these as you need, but it's best if they are all
|
58
|
+
immediately after the [Meta
|
59
|
+
Charset](https://developer.mozilla.org/en/HTML/Element/meta#attr-charset)
|
60
|
+
element (which should go right at the top of the `head`), so the browser can
|
61
|
+
act on them ASAP.
|
62
|
+
|
63
|
+
#### Common Prefetch Links
|
64
|
+
|
65
|
+
Amazon S3:
|
66
|
+
|
67
|
+
```html
|
68
|
+
<link rel="dns-prefetch" href="//s3.amazonaws.com">
|
69
|
+
```
|
70
|
+
|
71
|
+
Google APIs:
|
72
|
+
|
73
|
+
```html
|
74
|
+
<link rel="dns-prefetch" href="//ajax.googleapis.com">
|
75
|
+
```
|
76
|
+
|
77
|
+
Microsoft Ajax Content Delivery Network:
|
78
|
+
|
79
|
+
```html
|
80
|
+
<link rel="dns-prefetch" href="//ajax.microsoft.com">
|
81
|
+
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
|
82
|
+
```
|
83
|
+
|
84
|
+
### Browser support for DNS prefetching
|
85
|
+
|
86
|
+
Chrome, Firefox 3.5+, Safari 5+, Opera (Unknown), IE 9 (called "Pre-resolution"
|
87
|
+
on blogs.msdn.com)
|
88
|
+
|
89
|
+
### Further reading about DNS prefetching
|
90
|
+
|
91
|
+
* https://developer.mozilla.org/En/Controlling_DNS_prefetching
|
92
|
+
* http://dev.chromium.org/developers/design-documents/dns-prefetching
|
93
|
+
* http://www.apple.com/safari/whats-new.html
|
94
|
+
* http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx
|
95
|
+
* http://dayofjs.com/videos/22158462/web-browsers_alex-russel
|
96
|
+
|
97
|
+
|
98
|
+
## Search
|
99
|
+
|
100
|
+
### Direct search spiders to your sitemap
|
101
|
+
|
102
|
+
[Learn how to make a sitemap](http://www.sitemaps.org/protocol.php)
|
103
|
+
|
104
|
+
```html
|
105
|
+
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
|
106
|
+
```
|
107
|
+
|
108
|
+
### Hide pages from search engines
|
109
|
+
|
110
|
+
According to Heather Champ, former community manager at Flickr, you should not
|
111
|
+
allow search engines to index your "Contact Us" or "Complaints" page if you
|
112
|
+
value your sanity. This is an HTML-centric way of achieving that.
|
113
|
+
|
114
|
+
```html
|
115
|
+
<meta name="robots" content="noindex">
|
116
|
+
```
|
117
|
+
|
118
|
+
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
|
119
|
+
|
120
|
+
### Firefox and IE Search Plugins
|
121
|
+
|
122
|
+
Sites with in-site search functionality should be strongly considered for a
|
123
|
+
browser search plugin. A "search plugin" is an XML file which defines how your
|
124
|
+
plugin behaves in the browser. [How to make a browser search
|
125
|
+
plugin](http://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
|
126
|
+
|
127
|
+
```html
|
128
|
+
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
|
129
|
+
```
|
130
|
+
|
131
|
+
|
132
|
+
## Internet Explorer
|
133
|
+
|
134
|
+
### Prompt users to switch to "Desktop Mode" in IE10 Metro
|
135
|
+
|
136
|
+
IE10 does not support plugins, such as Flash, in Metro mode. If your site
|
137
|
+
requires plugins, you can let users know that via the X-UA-Compatible meta
|
138
|
+
element, which will prompt them to switch to Desktop Mode.
|
139
|
+
|
140
|
+
```html
|
141
|
+
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
|
142
|
+
```
|
143
|
+
|
144
|
+
Here's what it looks like alongside H5BP's default X-UA-Compatible values:
|
145
|
+
|
146
|
+
```html
|
147
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,requiresActiveX=true">
|
148
|
+
```
|
149
|
+
|
150
|
+
You can find more information in [Microsoft's IEBlog post about prompting for
|
151
|
+
plugin use in IE10 Metro
|
152
|
+
Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx).
|
153
|
+
|
154
|
+
### IE Pinned Sites (IE9+)
|
155
|
+
|
156
|
+
Enabling your application for pinning will allow IE9 users to add it to their
|
157
|
+
Windows Taskbar and Start Menu. This comes with a range of new tools that you
|
158
|
+
can easily configure with the elements below. See more [documentation on IE9
|
159
|
+
Pinned Sites](http://msdn.microsoft.com/en-us/library/gg131029.aspx).
|
160
|
+
|
161
|
+
### Name the Pinned Site for Windows
|
162
|
+
|
163
|
+
Without this rule, Windows will use the page title as the name for your
|
164
|
+
application.
|
165
|
+
|
166
|
+
```html
|
167
|
+
<meta name="application-name" content="Sample Title">
|
168
|
+
```
|
169
|
+
|
170
|
+
### Give your Pinned Site a tooltip
|
171
|
+
|
172
|
+
You know — a tooltip. A little textbox that appears when the user holds their
|
173
|
+
mouse over your Pinned Site's icon.
|
174
|
+
|
175
|
+
```html
|
176
|
+
<meta name="msapplication-tooltip" content="A description of what this site does.">
|
177
|
+
```
|
178
|
+
|
179
|
+
### Set a default page for your Pinned Site
|
180
|
+
|
181
|
+
If the site should go to a specific URL when it is pinned (such as the
|
182
|
+
homepage), enter it here. One idea is to send it to a special URL so you can
|
183
|
+
track the number of pinned users, like so:
|
184
|
+
`http://www.example.com/index.html?pinned=true`
|
185
|
+
|
186
|
+
```html
|
187
|
+
<meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true">
|
188
|
+
```
|
189
|
+
|
190
|
+
### Recolor IE's controls manually for a Pinned Site
|
191
|
+
|
192
|
+
IE9+ will automatically use the overall color of your Pinned Site's favicon to
|
193
|
+
shade its browser buttons. UNLESS you give it another color here. Only use
|
194
|
+
named colors (`red`) or hex colors (`#ff0000`).
|
195
|
+
|
196
|
+
```html
|
197
|
+
<meta name="msapplication-navbutton-color" content="#ff0000">
|
198
|
+
```
|
199
|
+
|
200
|
+
### Manually set the window size of a Pinned Site
|
201
|
+
|
202
|
+
If the site should open at a certain window size once pinned, you can specify
|
203
|
+
the dimensions here. It only supports static pixel dimensions. 800x600
|
204
|
+
minimum.
|
205
|
+
|
206
|
+
```html
|
207
|
+
<meta name="msapplication-window" content="width=800;height=600">
|
208
|
+
```
|
209
|
+
|
210
|
+
### Jump List "Tasks" for Pinned Sites
|
211
|
+
|
212
|
+
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
|
213
|
+
right-click. Each Task goes to the specified URL, and gets its own mini icon
|
214
|
+
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
|
215
|
+
need.
|
216
|
+
|
217
|
+
```html
|
218
|
+
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
|
219
|
+
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
|
220
|
+
```
|
221
|
+
|
222
|
+
### (Windows 8) High quality visuals for Pinned Sites
|
223
|
+
|
224
|
+
Windows 8 adds the ability for you to provide a PNG tile image and specify the
|
225
|
+
tile's background color. [Full details on the IE
|
226
|
+
blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx).
|
227
|
+
|
228
|
+
* Create a 144x144 image of your site icon, filling all of the canvas, and
|
229
|
+
using a transparent background.
|
230
|
+
* Save this image as a 32-bit PNG and optimize it without reducing
|
231
|
+
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
|
232
|
+
* To reference the tile and its color, add the HTML `meta` elements described
|
233
|
+
in the IE Blog post.
|
234
|
+
|
235
|
+
### (Windows 8) Badges for Pinned Sites
|
236
|
+
|
237
|
+
IE10 will poll an XML document for badge information to display on your app's
|
238
|
+
tile in the Start screen. The user will be able to receive these badge updates
|
239
|
+
even when your app isn't actively running. The badge's value can be a number,
|
240
|
+
or one of a predefined list of glyphs.
|
241
|
+
|
242
|
+
* [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx)
|
243
|
+
* [Available badge values](http://msdn.microsoft.com/en-us/library/ie/br212849.aspx)
|
244
|
+
|
245
|
+
```html
|
246
|
+
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml">
|
247
|
+
```
|
248
|
+
|
249
|
+
### Suppress IE6 image toolbar
|
250
|
+
|
251
|
+
Kill IE6's pop-up-on-mouseover toolbar for images that can interfere with
|
252
|
+
certain designs and be pretty distracting in general.
|
253
|
+
|
254
|
+
```html
|
255
|
+
<meta http-equiv="imagetoolbar" content="false">
|
256
|
+
```
|
257
|
+
|
258
|
+
|
259
|
+
## Social Networks
|
260
|
+
|
261
|
+
### Facebook Open Graph data
|
262
|
+
|
263
|
+
You can control the information that Facebook and others display when users
|
264
|
+
share your site. Below are just the most basic data points you might need. For
|
265
|
+
specific content types (including "website"), see [Facebook's built-in Open
|
266
|
+
Graph content
|
267
|
+
templates](https://developers.facebook.com/docs/opengraph/objects/builtin/).
|
268
|
+
Take full advantage of Facebook's support for complex data and activity by
|
269
|
+
following the [Open Graph
|
270
|
+
tutorial](https://developers.facebook.com/docs/opengraph/tutorial/).
|
271
|
+
|
272
|
+
```html
|
273
|
+
<meta property="og:title" content="">
|
274
|
+
<meta property="og:description" content="">
|
275
|
+
<meta property="og:image" content="">
|
276
|
+
```
|
277
|
+
|
278
|
+
### Twitter Cards
|
279
|
+
|
280
|
+
Twitter provides a snippet specification that serves a similar purpose to Open
|
281
|
+
Graph. In fact, Twitter will use Open Graph when Cards is not available. Note
|
282
|
+
that, as of this writing, Twitter requires that app developers activate Cards
|
283
|
+
on a per-domain basis. You can read more about the various snippet formats
|
284
|
+
and application process in the [official Twitter Cards
|
285
|
+
documentation](https://dev.twitter.com/docs/cards).
|
286
|
+
|
287
|
+
```html
|
288
|
+
<meta name="twitter:card" content="summary">
|
289
|
+
<meta name="twitter:site" content="@site_account">
|
290
|
+
<meta name="twitter:creator" content="@individual_account">
|
291
|
+
<meta name="twitter:url" content="http://www.example.com/path/to/page.html">
|
292
|
+
<meta name="twitter:title" content="">
|
293
|
+
<meta name="twitter:description" content="">
|
294
|
+
<meta name="twitter:image" content="http://www.example.com/path/to/image.jpg">
|
295
|
+
```
|
296
|
+
|
297
|
+
|
298
|
+
## URLs
|
299
|
+
|
300
|
+
### Canonical URL
|
301
|
+
|
302
|
+
Signal to search engines and others "Use this URL for this page!" Useful when
|
303
|
+
parameters after a `#` or `?` is used to control the display state of a page.
|
304
|
+
`http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
|
305
|
+
the cleaner, more accurate `http://www.example.com/cart.html`.
|
306
|
+
|
307
|
+
```html
|
308
|
+
<link rel="canonical" href="">
|
309
|
+
```
|
310
|
+
|
311
|
+
### Official shortlink
|
312
|
+
|
313
|
+
Signal to the world "This is the shortened URL to use this page!" Poorly
|
314
|
+
supported at this time. Learn more by reading the [article about shortlinks on
|
315
|
+
the Microformats wiki](http://microformats.org/wiki/rel-shortlink).
|
316
|
+
|
317
|
+
```html
|
318
|
+
<link rel="shortlink" href="h5bp.com">
|
319
|
+
```
|
320
|
+
|
321
|
+
|
322
|
+
## News Feeds
|
323
|
+
|
324
|
+
### RSS
|
325
|
+
|
326
|
+
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
|
327
|
+
scratch](http://www.rssboard.org/rss-specification)?
|
328
|
+
|
329
|
+
```html
|
330
|
+
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
|
331
|
+
```
|
332
|
+
|
333
|
+
### Atom
|
334
|
+
|
335
|
+
Atom is similar to RSS, and you might prefer to use it instead of or in
|
336
|
+
addition to it. [See what Atom's all
|
337
|
+
about](http://www.atomenabled.org/developers/syndication/).
|
338
|
+
|
339
|
+
```html
|
340
|
+
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
|
341
|
+
```
|
342
|
+
|
343
|
+
### Pingbacks
|
344
|
+
|
345
|
+
Your server may be notified when another site links to yours. The href
|
346
|
+
attribute should contain the location of your pingback service.
|
347
|
+
|
348
|
+
```html
|
349
|
+
<link rel="pingback" href="">
|
350
|
+
```
|
351
|
+
|
352
|
+
* High-level explanation: http://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
|
353
|
+
* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
|
354
|
+
* PHP pingback service: http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
|
355
|
+
|
356
|
+
|
357
|
+
## App Stores
|
358
|
+
|
359
|
+
### Install a Chrome Web Store app
|
360
|
+
|
361
|
+
Users can install a Chrome app directly from your website, as long as the app
|
362
|
+
and site have been associated via Google's Webmaster Tools. Read more on
|
363
|
+
[Chrome Web Store's Inline Installation
|
364
|
+
docs](https://developers.google.com/chrome/web-store/docs/inline_installation).
|
365
|
+
|
366
|
+
```html
|
367
|
+
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
|
368
|
+
```
|
369
|
+
|
370
|
+
### Smart App Banners in iOS 6 Safari
|
371
|
+
|
372
|
+
Stop bothering everyone with gross modals advertising your entry in the App Store.
|
373
|
+
This bit of code will unintrusively allow the user the option to download your iOS
|
374
|
+
app, or open it with some data about the user's current state on the website.
|
375
|
+
|
376
|
+
```html
|
377
|
+
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
|
378
|
+
```
|
379
|
+
|
380
|
+
## Google Analytics augments
|
381
|
+
|
382
|
+
### More tracking settings
|
383
|
+
|
384
|
+
The [optimized Google Analytics
|
385
|
+
snippet](http://mathiasbynens.be/notes/async-analytics-snippet) included with
|
386
|
+
HTML5 Boilerplate includes something like this:
|
387
|
+
|
388
|
+
```js
|
389
|
+
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
|
390
|
+
```
|
391
|
+
|
392
|
+
In case you need more settings, just extend the array literal instead of
|
393
|
+
[`.push()`ing to the
|
394
|
+
array](http://mathiasbynens.be/notes/async-analytics-snippet#dont-push-it)
|
395
|
+
afterwards:
|
396
|
+
|
397
|
+
```js
|
398
|
+
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview'], ['_setAllowAnchor', true]];
|
399
|
+
```
|
400
|
+
|
401
|
+
### Anonymize IP addresses
|
402
|
+
|
403
|
+
In some countries, no personal data may be transferred outside jurisdictions
|
404
|
+
that do not have similarly strict laws (i.e. from Germany to outside the EU).
|
405
|
+
Thus a webmaster using the Google Analytics script may have to ensure that no
|
406
|
+
personal (trackable) data is transferred to the US. You can do that with [the
|
407
|
+
`_gat.anonymizeIp`
|
408
|
+
option](http://code.google.com/apis/analytics/docs/gaJS/gaJSApi_gat.html#_gat._anonymizeIp).
|
409
|
+
In use it looks like this:
|
410
|
+
|
411
|
+
```js
|
412
|
+
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_gat._anonymizeIp'], ['_trackPageview']];
|
413
|
+
```
|
414
|
+
|
415
|
+
### Track jQuery AJAX requests in Google Analytics
|
416
|
+
|
417
|
+
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
|
418
|
+
Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
|
419
|
+
|
420
|
+
Add this to `plugins.js`:
|
421
|
+
|
422
|
+
```js
|
423
|
+
/*
|
424
|
+
* Log all jQuery AJAX requests to Google Analytics
|
425
|
+
* See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
|
426
|
+
*/
|
427
|
+
if (typeof _gaq !== "undefined" && _gaq !== null) {
|
428
|
+
$(document).ajaxSend(function(event, xhr, settings){
|
429
|
+
_gaq.push(['_trackPageview', settings.url]);
|
430
|
+
});
|
431
|
+
}
|
432
|
+
```
|
433
|
+
|
434
|
+
### Track JavaScript errors in Google Analytics
|
435
|
+
|
436
|
+
Add this function after `_gaq` is defined:
|
437
|
+
|
438
|
+
```js
|
439
|
+
(function(window){
|
440
|
+
var undefined,
|
441
|
+
link = function (href) {
|
442
|
+
var a = window.document.createElement('a');
|
443
|
+
a.href = href;
|
444
|
+
return a;
|
445
|
+
};
|
446
|
+
window.onerror = function (message, file, row) {
|
447
|
+
var host = link(file).hostname;
|
448
|
+
_gaq.push([
|
449
|
+
'_trackEvent',
|
450
|
+
(host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
|
451
|
+
message, file + ' LINE: ' + row, undefined, undefined, true
|
452
|
+
]);
|
453
|
+
};
|
454
|
+
}(window));
|
455
|
+
```
|
456
|
+
|
457
|
+
### Track page scroll
|
458
|
+
|
459
|
+
Add this function after `_gaq` is defined:
|
460
|
+
|
461
|
+
```js
|
462
|
+
$(function(){
|
463
|
+
var isDuplicateScrollEvent,
|
464
|
+
scrollTimeStart = new Date,
|
465
|
+
$window = $(window),
|
466
|
+
$document = $(document),
|
467
|
+
scrollPercent;
|
468
|
+
|
469
|
+
$window.scroll(function() {
|
470
|
+
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
|
471
|
+
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
|
472
|
+
isDuplicateScrollEvent = 1;
|
473
|
+
_gaq.push(['_trackEvent', 'scroll',
|
474
|
+
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's',
|
475
|
+
undefined, undefined, true
|
476
|
+
]);
|
477
|
+
}
|
478
|
+
});
|
479
|
+
});
|
480
|
+
```
|
481
|
+
|
482
|
+
|
483
|
+
## Miscellaneous
|
484
|
+
|
485
|
+
* Use [HTML5
|
486
|
+
polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
|
487
|
+
|
488
|
+
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
|
489
|
+
[microdata](http://microformats.org/wiki/microdata)) for optimum search
|
490
|
+
results
|
491
|
+
[visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html).
|
492
|
+
|
493
|
+
* If you're building a web app you may want [native style momentum scrolling in
|
494
|
+
iOS5](http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/) using
|
495
|
+
`-webkit-overflow-scrolling: touch`.
|
496
|
+
|
497
|
+
* Avoid development/stage websites "leaking" into SERPs (search engine results
|
498
|
+
page) by [implementing X-Robots-tag
|
499
|
+
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
|
500
|
+
|
501
|
+
* Screen readers currently have less-than-stellar support for HTML5 but the JS
|
502
|
+
script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can
|
503
|
+
help increase accessibility by adding ARIA roles to HTML5 elements.
|
504
|
+
|
505
|
+
|
506
|
+
*Many thanks to [Brian Blakely](https://github.com/brianblakely) for
|
507
|
+
contributing much of this information.*
|