diff --git a/week3/html5-boilerplate/404.html b/week3/html5-boilerplate/404.html new file mode 100644 index 0000000..ce820da --- /dev/null +++ b/week3/html5-boilerplate/404.html @@ -0,0 +1,62 @@ + + + + + + Page Not Found + + + + + +

Page Not Found

+

Sorry, but the page you were trying to view does not exist.

+ + + + diff --git a/week3/html5-boilerplate/LICENSE.txt b/week3/html5-boilerplate/LICENSE.txt new file mode 100644 index 0000000..294e91d --- /dev/null +++ b/week3/html5-boilerplate/LICENSE.txt @@ -0,0 +1,19 @@ +Copyright (c) HTML5 Boilerplate + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/week3/html5-boilerplate/browserconfig.xml b/week3/html5-boilerplate/browserconfig.xml new file mode 100644 index 0000000..e5a529d --- /dev/null +++ b/week3/html5-boilerplate/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/week3/html5-boilerplate/css/main.css b/week3/html5-boilerplate/css/main.css new file mode 100644 index 0000000..093ebfc --- /dev/null +++ b/week3/html5-boilerplate/css/main.css @@ -0,0 +1,554 @@ +/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */ + +/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html { + color: #222; + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * Vendor-prefixed and regular ::selection selectors cannot be combined: + * https://stackoverflow.com/a/16982510/7133471 + * + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Browser Upgrade Prompt + ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + + +/* stylers for header*/ + +*{ + box-sizing: border-box; +} +#textboxs { + font-family: 'Raleway', sans-serif; + + +} +header { + background-color: black; + font-family: 'Open Sans 600', sans-serif; +} +header nav a { +color: #ccc; +text-decoration: none; +font-family: 600; + +} + +header nav a:hover { + color: black; + background-color: #ccc; + text-decoration: none; + } + +/* stylers for header*/ +@media(min-width:768px){ + div.imgLogo{ + padding-top: 20px; + padding-bottom: 20px; + } + div.centered { + width: 80%; + margin: 0 auto; + display: flex; + justify-content: space-between; + } + header nav { + display: flex; + align-items: center; + } + + nav > ul { + display: -webkit-box; + display: flex; + list-style-type:none; + margin: 0; + padding: 0; + } + + nav a { + display: block; + padding: 10px; + } +} +/*SECOND SECTION*/ + +#imgbg { + + background-image: url(../images/backIMG.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + padding: 170px 0 ; + margin: 0; + + + +} +#textboxs span img { + + height: auto; + +} + +#imgbg h1 { + color: white; + text-shadow: 1px 1px 1px black ; + +} + +#imgbg p{ + color: white; + padding-bottom: 20px; + width: 85%; +} +#imgbg a{ + color:white; border: 2px solid white; + padding: 8px 10px; + text-decoration: none; +} +#form-container { + display: flex; + justify-content: flex-end; + font-family: 'Open Sans 600' , sans-serif; + + + +} + +#form-container h3 { + background-color: #f5f5f5; + text-align: center; + margin: 0; + padding: 10px 0; +} +#form-container form div { + padding: 25px; + +} +#form-container input { +width: 100%; +border-top: none; +border-left: none; +border-right: none; +border-bottom: 1px, solid #f5f5f5; +padding: 20px; +} + +#form-container button { + width: 100%; + background-color:#ff8b38; + color: white; + border: none; + padding: 18px 0; +} + +#form-container form { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#imgbg form { + width:75%; + background-color: white; + +} + +span{ + color: #ff8b38; +} +#icons { + display: flex; + justify-content: space-evenly; + width: 70%; + align-items: center; +} +.socialmedia{ + font-family: 'Open Sans 600', sans-serif; + width: 30%; + +} +.socialmedia h2{ + padding-top: 10px; + padding-bottom: 5px; + margin: 0; +} +.socialmedia p { + color: #ccc; + margin: 0; + padding-bottom: 10px; +} +i{ + color: #ccc; + padding: 10px; +} +@media (min-width:768px){ + #imgbg .centered > div{ + width: 50%; + + } +footer{ + background-color: black; + color: #ccc; + text-align: center; + padding: 10px; + justify-content: space-between; + font-family: 'Open Sans 600' , sans-serif; + + +} + + +footer p{ + font-size: 13px; + color: #444; + margin: 0; + +} + + +} +@media(max-width:768px){ +#imgbg { + + background-image: url(../images/backIMG.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + padding: 100px 0 ; + + + +} + div.imgLogo{ + padding: 10px; + text-align: center; + + } + + #textboxs{ + text-align: center; + padding: 10px; + width: 100%; + } + + #form-container { + justify-content: center; + padding-top: 10%; + } + + + .socialmedia { + width: 100%; + padding: 30px; +} + + footer{ + background-color: black; + text-align: center; + color: #ccc; + padding: 10px; + font-family: 'Open Sans 600' , sans-serif; + } + + header nav a:hover { + color: black; + background-color: #ccc; + text-decoration: none; + } + + li { + display: inline-flex; + padding: 10px; + + + } + + header nav{ + padding: 10px; + text-align: center; + } + #icons { + font-size: 10px; + width: 100%; + } + #textboxs p { + margin: 0; + padding: 15px + padding-bottom: 10px; + width: 100%; + text-align: center; + } + nav ul { + width: 100%; + text-align: center; + margin: 0; + padding: 0; + } +} + + + + + + + + + + + + + + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden { + display: none !important; +} + +/* +* Hide only visually, but have it available for screen readers: +* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility +* +* 1. For long content, line feeds are not interpreted as spaces and small width +* causes content to wrap 1 word per line: +* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe +*/ + +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ +} + +/* +* Extends the .sr-only class to allow the element +* to be focusable when navigated to via the keyboard: +* https://www.drupal.org/node/897638 +*/ + +.sr-only.focusable:active, +.sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; +} + +/* +* Hide visually and from screen readers, but maintain layout +*/ + +.invisible { + visibility: hidden; +} + +/* +* Clearfix: contain floats +* +* For modern browsers +* 1. The space content is one way to avoid an Opera bug when the +* `contenteditable` attribute is included anywhere else in the document. +* Otherwise it causes space to appear at the top and bottom of elements +* that receive the `clearfix` class. +* 2. The use of `table` rather than `block` is only necessary if using +* `:before` to contain the top-margins of child elements. +*/ + +.clearfix:before, +.clearfix:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 1.25dppx), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: + https://www.phpied.com/delay-loading-your-print-css/ + ========================================================================== */ + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + /* Black prints faster */ + box-shadow: none !important; + text-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + pre { + white-space: pre-wrap !important; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + /* + * Printing Tables: + * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } +} + diff --git a/week3/html5-boilerplate/css/normalize.css b/week3/html5-boilerplate/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/week3/html5-boilerplate/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/week3/html5-boilerplate/doc/TOC.md b/week3/html5-boilerplate/doc/TOC.md new file mode 100644 index 0000000..6a74c77 --- /dev/null +++ b/week3/html5-boilerplate/doc/TOC.md @@ -0,0 +1,34 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com/) + +## Getting started + +* [Usage](usage.md) — Overview of the project contents. +* [FAQ](faq.md) — Frequently asked questions along with their answers. + +## HTML5 Boilerplate core + +* [HTML](html.md) — Guide to the default HTML. +* [CSS](css.md) — Guide to the default CSS. +* [JavaScript](js.md) — Guide to the default JavaScript. +* [Everything else](misc.md). + +## Development + +* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further + with the boilerplate. + +## Related projects + +The [H5BP organization](https://github.com/h5bp) maintains several projects +that complement HTML5 Boilerplate, projects that can help you improve different +aspects of your website/web app (e.g.: the performance, security, etc.). + +* [Server Configs](https://github.com/h5bp/server-configs) — Fast and + smart configurations for web servers such as Apache and Nginx. + * [Apache](https://github.com/h5bp/server-configs-apache) + * [Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae) + * [Internet Information Services (IIS)](https://github.com/h5bp/server-configs-iis) + * [lighttpd](https://github.com/h5bp/server-configs-lighttpd) + * [Nginx](https://github.com/h5bp/server-configs-nginx) + * [Node.js](https://github.com/h5bp/server-configs-node) +* [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) diff --git a/week3/html5-boilerplate/doc/css.md b/week3/html5-boilerplate/doc/css.md new file mode 100644 index 0000000..beea512 --- /dev/null +++ b/week3/html5-boilerplate/doc/css.md @@ -0,0 +1,49 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation +table of contents](TOC.md) + +# The CSS + +HTML5 Boilerplate's CSS includes: + +* [Normalize.css](#normalizecss) +* [main.css](#maincss) + +This starting CSS does not rely on the presence of +[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/), +[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/), +or [Modernizr](https://modernizr.com/), and it is ready to use no matter what +your development preferences happen to be. + + +## Normalize.css + +In order to make browsers render all elements more consistently and in line +with modern standards, we include Normalize.css — a modern, HTML5-ready +alternative to CSS resets. + +As opposed to CSS resets, Normalize.css: + +* targets only the styles that need normalizing +* preserves useful browser defaults rather than erasing them +* corrects bugs and common browser inconsistencies +* improves usability with subtle improvements +* doesn't clutter the debugging tools +* has better documentation + +For more information about Normalize.css, please refer to its [project +page](https://necolas.github.io/normalize.css/). + + +## main.css + +Several base styles are included that build upon `Normalize.css`. These +styles: + +* provide basic typography settings that improve text readability +* protect against unwanted `text-shadow` during text highlighting +* tweak the default alignment of some elements (e.g.: `img`, `video`, + `fieldset`, `textarea`) +* style the prompt that is displayed to users using an outdated browser +* and more... + +These styles are included in [main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css). See the [main.css](https://github.com/h5bp/main.css) project [documentation](https://github.com/h5bp/main.css/blob/master/README.md#features) for a full discussion of these styles. diff --git a/week3/html5-boilerplate/doc/extend.md b/week3/html5-boilerplate/doc/extend.md new file mode 100644 index 0000000..9a9ce2f --- /dev/null +++ b/week3/html5-boilerplate/doc/extend.md @@ -0,0 +1,639 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Extend and customise HTML5 Boilerplate + +Here is some useful advice for how you can make your project with HTML5 +Boilerplate even better. We don't want to include it all by default, as +not everything fits with everyone's needs. + + +* [App Stores](#app-stores) +* [DNS prefetching](#dns-prefetching) +* [Google Universal Analytics](#google-universal-analytics) +* [Internet Explorer](#internet-explorer) +* [Miscellaneous](#miscellaneous) +* [News Feeds](#news-feeds) +* [Search](#search) +* [Social Networks](#social-networks) +* [URLs](#urls) +* [Web Apps](#web-apps) +* [security.txt](#security.txt) + +## App Stores + +### Smart App Banners in iOS 6+ Safari + +Stop bothering everyone with gross modals advertising your entry in the +App Store. Including the following [meta tag](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) will unobtrusively give the user the option to download your iOS app, or open it with some data about the user's current state on the website. + +```html + +``` + +## DNS prefetching + +In short, DNS Prefetching is a method of informing the browser of domain names +referenced on a site so that the client can resolve the DNS for those hosts, +cache them, and when it comes time to use them, have a faster turn around on +the request. + +### Implicit prefetches + +There is a lot of prefetching done for you automatically by the browser. When +the browser encounters an anchor in your html that does not share the same +domain name as the current location the browser requests, from the client OS, +the IP address for this new domain. The client first checks its cache and +then, lacking a cached copy, makes a request from a DNS server. These requests +happen in the background and are not meant to block the rendering of the +page. + +The goal of this is that when the foreign IP address is finally needed it will +already be in the client cache and will not block the loading of the foreign +content. Fewer requests result in faster page load times. The perception of this +is increased on a mobile platform where DNS latency can be greater. + +#### Disable implicit prefetching + +```html + +``` + +Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still +prefetch any explicit dns-prefetch links. + +**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM +FOREIGN DOMAINS. + +### Explicit prefetches + +Typically the browser only scans the HTML for foreign domains. If you have +resources that are outside of your HTML (a javascript request to a remote +server or a CDN that hosts content that may not be present on every page of +your site, for example) then you can queue up a domain name to be prefetched. + +```html + + +``` + +You can use as many of these as you need, but it's best if they are all +immediately after the [Meta +Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset) +element (which should go right at the top of the `head`), so the browser can +act on them ASAP. + +#### Common Prefetch Links + +Amazon S3: + +```html + +``` + +Google APIs: + +```html + +``` + +Microsoft Ajax Content Delivery Network: + +```html + + +``` + +### Further reading about DNS prefetching + +* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control +* https://dev.chromium.org/developers/design-documents/dns-prefetching +* https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/ + + +## Google Universal Analytics + +### More tracking settings + +The [optimized Google Universal Analytics +snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) +included with HTML5 Boilerplate includes something like this: + +```js +ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview'); +``` + +To customize further, see Google's [Advanced +Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/), +[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages), +and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs. + +### Anonymize IP addresses + +In some countries, no personal data may be transferred outside jurisdictions +that do not have similarly strict laws (i.e. from Germany to outside the EU). +Thus a webmaster using the Google Universal Analytics may have to ensure that +no personal (trackable) data is transferred to the US. You can do that with +[the `ga('set', 'anonymizeIp', true);` +parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip) +before sending any events/pageviews. In use it looks like this: + +```js +ga('create', 'UA-XXXXX-X', 'auto'); +ga('set', 'anonymizeIp', true); +ga('send', 'pageview'); +``` + +### Track jQuery AJAX requests in Google Analytics + +An article by @JangoSteve explains how to [track jQuery AJAX requests in Google +Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/). + +Add this to `plugins.js`: + +```js +/* + * Log all jQuery AJAX requests to Google Analytics + * See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ + */ +if (typeof ga !== "undefined" && ga !== null) { + $(document).ajaxSend(function(event, xhr, settings){ + ga('send', 'pageview', settings.url); + }); +} +``` + +### Track JavaScript errors in Google Analytics + +Add this function after `ga` is defined: + +```js +(function(window){ + var undefined, + link = function (href) { + var a = window.document.createElement('a'); + a.href = href; + return a; + }; + window.onerror = function (message, file, line, column) { + var host = link(file).hostname; + ga('send', { + 'hitType': 'event', + 'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', + 'eventAction': message, + 'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(), + 'nonInteraction': 1 + }); + }; +}(window)); +``` + +### Track page scroll + +Add this function after `ga` is defined: + +```js +$(function(){ + var isDuplicateScrollEvent, + scrollTimeStart = new Date, + $window = $(window), + $document = $(document), + scrollPercent; + + $window.scroll(function() { + scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height()); + if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% + isDuplicateScrollEvent = 1; + ga('send', 'event', 'scroll', + 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's' + ); + } + }); +}); +``` + +## Internet Explorer + +### IE Pinned Sites + +Enabling your application for pinning will allow IE users to add it to their +Windows Taskbar and Start Menu. This comes with a range of new tools that you +can easily configure with the elements below. See more [documentation on IE +Pinned Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg491731(v%3dvs.85)). + +### Name the Pinned Site for Windows + +Without this rule, Windows will use the page title as the name for your +application. + +```html + +``` + +### Give your Pinned Site a tooltip + +You know — a tooltip. A little textbox that appears when the user holds their +mouse over your Pinned Site's icon. + +```html + +``` + +### Set a default page for your Pinned Site + +If the site should go to a specific URL when it is pinned (such as the +homepage), enter it here. One idea is to send it to a special URL so you can +track the number of pinned users, like so: +`https://www.example.com/index.html?pinned=true` + +```html + +``` + +### Recolor IE's controls manually for a Pinned Site + +IE will automatically use the overall color of your Pinned Site's favicon to +shade its browser buttons. UNLESS you give it another color here. Only use +named colors (`red`) or hex colors (`#ff0000`). + +```html + +``` + +### Manually set the window size of a Pinned Site + +If the site should open at a certain window size once pinned, you can specify +the dimensions here. It only supports static pixel dimensions. 800x600 +minimum. + +```html + +``` + +### Jump List "Tasks" for Pinned Sites + +Add Jump List Tasks that will appear when the Pinned Site's icon gets a +right-click. Each Task goes to the specified URL, and gets its own mini icon +(essentially a favicon, a 16x16 .ICO). You can add as many of these as you +need. + +```html + + +``` + +### (Windows 8) High quality visuals for Pinned Sites + +Windows 8 adds the ability for you to provide a PNG tile image and specify the +tile's background color. [Full details on the IE +blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/). + +* Create a 144x144 image of your site icon, filling all of the canvas, and + using a transparent background. +* Save this image as a 32-bit PNG and optimize it without reducing + colour-depth. It can be named whatever you want (e.g. `metro-tile.png`). +* To reference the tile and its color, add the HTML `meta` elements described + in the IE Blog post. + +### (Windows 8) Badges for Pinned Sites + +IE will poll an XML document for badge information to display on your app's +tile in the Start screen. The user will be able to receive these badge updates +even when your app isn't actively running. The badge's value can be a number, +or one of a predefined list of glyphs. + +* [Tutorial on IEBlog with link to badge XML schema](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/) +* [Available badge values](https://docs.microsoft.com/en-us/uwp/schemas/tiles/badgeschema/element-badge) + +```html + +``` + +### Disable link highlighting upon tap in IE10 + +Similar to [-webkit-tap-highlight-color](https://davidwalsh.name/mobile-highlight-color) +in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its +value is boolean rather than a color. It's all or nothing. + +```html + +``` + +You can read about this useful element and more techniques in +[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) + +## Search + +### Direct search spiders to your sitemap + +After creating a [sitemap](https://www.sitemaps.org/protocol.html) + +Submit it to search engine tool: +* [Google](https://www.google.com/webmasters/tools/sitemap-list) +* [Bing](https://www.bing.com/toolbox/webmaster) +* [Yandex](https://webmaster.yandex.com/) +* [Baidu](https://zhanzhang.baidu.com/) +OR +Insert the following line anywhere in your robots.txt file, specifying the path to your sitemap: +``` +Sitemap: https://example.com/sitemap_location.xml +``` + +### Hide pages from search engines + +According to Heather Champ, former community manager at Flickr, you should not +allow search engines to index your "Contact Us" or "Complaints" page if you +value your sanity. This is an HTML-centric way of achieving that. + +```html + +``` + +**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES. + +### Firefox and IE Search Plugins + +Sites with in-site search functionality should be strongly considered for a +browser search plugin. A "search plugin" is an XML file which defines how your +plugin behaves in the browser. [How to make a browser search +plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin). + +```html + +``` + + +## Miscellaneous + +* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). + +* Use [Microformats](http://microformats.org/wiki/Main_Page) (via + [microdata](http://microformats.org/wiki/microdata)) for optimum search + results + [visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html). + +* If you're building a web app you may want [native style momentum scrolling in + iOS 5+](https://www.johanbrook.com/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/) + using `-webkit-overflow-scrolling: touch`. + +* If you want to disable the translation prompt in Chrome or block Google + Translate from translating your web page, use [``](https://support.google.com/webmasters/answer/79812). + To disable translation for a particular section of the web page, add + [`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276). + +* If you want to disable the automatic detection and formatting of possible + phone numbers in Safari on iOS, use [``](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html). + +* Avoid development/stage websites "leaking" into SERPs (search engine results + page) by [implementing X-Robots-tag + headers](https://github.com/h5bp/html5-boilerplate/issues/804). + + +## News Feeds + +### RSS + +Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from +scratch](http://www.rssboard.org/rss-specification)? + +```html + +``` + +### Atom + +Atom is similar to RSS, and you might prefer to use it instead of or in +addition to it. [See what Atom's all +about](https://en.wikipedia.org/wiki/Atom_(Web_standard)). + +```html + +``` + +### Pingbacks + +Your server may be notified when another site links to yours. The href +attribute should contain the location of your pingback service. + +```html + +``` + +* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks +* Step-by-step example case: https://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 +* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ + + + +## Social Networks + +### Facebook Open Graph data + +You can control the information that Facebook and others display when users +share your site. Below are just the most basic data points you might need. For +specific content types (including "website"), see [Facebook's built-in Open +Graph content +templates](https://developers.facebook.com/docs/sharing/opengraph/using-objects). +Take full advantage of Facebook's support for complex data and activity by +following the [Open Graph +tutorial](https://developers.facebook.com/docs/sharing/webmasters/getting-started). + +For a reference of Open Graph's markup and properties, you may check +[Facebook's Open Graph Protocol reference](https://ogp.me). Finally, +you can validate your markup with the [Facebook Object +Debugger](https://developers.facebook.com/tools/debug/) (needs +registration to Facebook). + +```html + + + + + + + + +``` + +### Twitter Cards + +Twitter provides a snippet specification that serves a similar purpose to Open +Graph. In fact, Twitter will use Open Graph when Cards is not available. You +can read more about the various snippet formats and application process in the +[official Twitter Cards documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards), +and you can validate your markup with the [Card validator](https://cards-dev.twitter.com/validator) +(needs registration to Twitter). + +```html + + + + + + + +``` + +### Schema.org + +Google also provides a snippet specification that serves a similar +purpose to Facebook's Open Graph or Twitter Cards. This metadata is a subset +of [schema.org's microdata vocabulary](https://schema.org/), which +covers many other schemas that can describe the content of your pages +to search engines. For this reason, this metadata is more generic for +SEO, notably for Google's search-engine, although this vocabulary is +also used by Microsoft, Pinterest and Yandex. + +You can validate your markup with the [Structured Data Testing +Tool](https://developers.google.com/structured-data/testing-tool/). +Also, please note that this markup requires to add attributes to your +top `html` tag. + +```html + + + + + + + + +``` + +## URLs + +### Canonical URL + +Signal to search engines and others "Use this URL for this page!" Useful when +parameters after a `#` or `?` is used to control the display state of a page. +`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as +the cleaner, more accurate `https://www.example.com/cart.html`. + +```html + +``` + +### Separate mobile URLs + +If you use separate URLs for desktop and mobile users, you should consider +helping search engine algorithms better understand the configuration on your +web site. + +This can be done by adding the following annotations in your HTML pages: + +* on the desktop page, add the `link rel="alternate"` tag pointing to the + corresponding mobile URL, e.g.: + + `` + +* on the mobile page, add the `link rel="canonical"` tag pointing to the + corresponding desktop URL, e.g.: + + `` + +For more information please see: + +* https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls + + +## Web Apps + +There are a couple of meta tags that provide information about a web app when +added to the Home Screen on iOS: + +* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and +provide the default iOS app view. You can control the color scheme of the +default view by adding `apple-mobile-web-app-status-bar-style`. + +```html + + +``` + +* You can use `apple-mobile-web-app-title` to add a specific sites name for the +Home Screen icon. This works since iOS 6. + +```html + +``` + +For further information please read the [official +documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) +on Apple's site. + + +### Apple Touch Icons + +Apple touch icons are used as icons when a user adds your webapp to the home +screen of aniOS devices. + +Though the dimensions of the icon can vary between iOS devices and versions +one `180×180px` touch icon named `icon.png` and including the following in +the `` of the page is enough: + +```html + +``` + +For a more comprehensive overview, please refer to Mathias' [article on Touch +Icons](https://mathiasbynens.be/notes/touch-icons). + + +### Apple Touch Startup Image + +Apart from that it is possible to add start-up screens for web apps on iOS. This +basically works by defining `apple-touch-startup-image` with an according link +to the image. Since iOS devices have different screen resolutions it maybe +necessary to add media queries to detect which image to load. Here is an +example for an iPhone: + +```html + +``` + + +### Chrome Mobile web apps + +Chrome Mobile has a specific meta tag for making apps [installable to the +homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen) +which tries to be a more generic replacement to Apple's proprietary meta tag: + +```html + +``` + +Same applies to the touch icons: + +```html + +``` + +### Theme Color + +You can add the [`theme-color` meta extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color) +in the `` of your pages to suggest the color that browsers and +OSes should use if they customize the display of individual pages in +their UIs with varying colors. + +```html + +``` + +The `content` attribute extension can take any valid CSS color. + +Currently, the `theme-color` meta extension is supported by [Chrome 39+ +for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android). + + +## security.txt + +When security risks in web services are discovered by users they often lack the +channels to disclose them properly. As a result, security issues may be left unreported. + +Security.txt defines a standard to help organizations define the process for +users to disclose security vulnerabilities securely. Include a text +file on your server at `.well-known/security.txt` with the relevant contact details. + +Check [https://securitytxt.org/](https://securitytxt.org/) for more details. diff --git a/week3/html5-boilerplate/doc/faq.md b/week3/html5-boilerplate/doc/faq.md new file mode 100644 index 0000000..69ea6d3 --- /dev/null +++ b/week3/html5-boilerplate/doc/faq.md @@ -0,0 +1,40 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation +table of contents](TOC.md) + +# Frequently asked questions + +* [Why is the Google Analytics code at the bottom? Google recommends it be + placed in the ``.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head) +* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is + released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released) +* [Where can I get help with support + questions?](#where-can-i-get-help-with-support-questions) + +--- + +### Why is the Google Analytics code at the bottom? Google recommends it be placed in the ``. + +The main advantage of placing it in the `` is that you will track the +user's `pageview` even if they leave the page before it has been fully loaded. + +Here's a handy quote from [Mathias Bynens](https://mathiasbynens.be/notes/async-analytics-snippet#comment-50) about our placement choice. +>I should point out that it’s Google — not me — recommending to place this +script before all other scripts in the document. The only real advantage is to +catch a pageView call if your page fails to load completely (for example, if +the user aborts loading, or quickly closes the page, etc.). Personally, I +wouldn’t count that as a page view, so I actually prefer to place this script +at the bottom, after all other scripts. This keeps all the scripts together and +reinforces that scripts at the bottom are the right move. (Usually I +concatenate and minify all my scripts into one .js file — the GA snippet being +the suffix.) + +### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released? + +No, just as you don't normally replace the foundation of a house once it +was built. However, there is nothing stopping you from trying to work in the +latest changes, but you'll have to assess the costs/benefits of doing so. + +### Where can I get help with support questions? + +Please ask for help on +[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate). diff --git a/week3/html5-boilerplate/doc/html.md b/week3/html5-boilerplate/doc/html.md new file mode 100644 index 0000000..c1a5c37 --- /dev/null +++ b/week3/html5-boilerplate/doc/html.md @@ -0,0 +1,205 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation +table of contents](TOC.md) + +# The HTML + +By default, HTML5 Boilerplate provides two `html` pages: + +* [`index.html`](#indexhtml) - a default HTML skeleton that should form the + basis of all pages on your website +* `404.html` - a placeholder 404 error page + + +## `index.html` + + +### The `no-js` Class + +The `no-js` class is provided in order to allow you to more easily and +explicitly add custom styles based on whether JavaScript is disabled +(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the +FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/). + + +## Language Attribute + +Please consider specifying the language of your content by adding a [value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang` +attribute in the `` as in this example: + +```html + +``` + +### The order of the `` and `<meta>` tags + +The charset declaration (`<meta charset="utf-8">`) must be included completely +within the [first 1024 bytes of the document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset) +and should be specified as early as possible (before any content that could +be controlled by an attacker, such as a `<title>` element) in order to avoid a +potential [encoding-related security issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki) +in Internet Explorer + +## Meta Description + +The `description` meta tag provides a short description of the page. +In some situations this description is used as a part of the snippet +shown in the search results. + +```html +<meta name="description" content="This is a description"> +``` + +Google's [Create good meta descriptions](https://support.google.com/webmasters/answer/35624?hl=en#meta-descriptions) +documentation has useful tips on creating an effective description. + +## Mobile Viewport + +There are a few different options that you can use with the [`viewport` meta +tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and +Media Queries - The Complete Idiot's Guide"). You can find out more in [the +MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). +HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases. + +```html +<meta name="viewport" content="width=device-width, initial-scale=1"> +``` + +If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do +so with additional viewport parameters. [Check the WebKit blog](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) +for details. + +## Web App Manifest + +HTML5 Boilerplate includes a simple web app manifest file. + +The web app manifest is a simple JSON file that allows you to control how your +app appears on a device's home screen, what it looks like when it launches +in that context and what happens when it is launched. This allows for much greater +control over the UI of a saved site or web app on a mobile device. + +It's linked to from the HTML as follows: + +```html +<link rel="manifest" href="site.webmanifest"> +``` +Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage. +You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest) + +## Favicons and Touch Icon + +The shortcut icons should be put in the root directory of your site. `favicon.ico` +is automatically picked up by browsers if it's placed in the root. HTML5 +Boilerplate comes with a default set of icons (include favicon and one Apple +Touch Icon) that you can use as a baseline to create your own. + +Please refer to the more detailed description in the [Extend section](extend.md) +of these docs. + +## The Content Area + +The central part of the boilerplate template is pretty much empty. This is +intentional, in order to make the boilerplate suitable for both web page and +web app development. + +### Browser Upgrade Prompt + +The main content area of the boilerplate includes a prompt to install an up to +date browser for users of IE 9 and lower. If you intended to support IE, then you +should edit or remove the snippet of code. + +## Modernizr + +HTML5 Boilerplate uses a custom build of Modernizr. + +[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to +the `html` element based on the results of feature test and which ensures that +all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). +This allows you to target parts of your CSS and JavaScript based on the +features supported by a browser. + +Starting with version 3 Modernizr can be customized using the [modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) and the +[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli). + +## What About Polyfills? + +If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill) +in your project, you must make sure those load before any other JavaScript. If you're +using a polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/), +just put it before the other scripts in the bottom of the page: + +```html + <script src="js/vendor/modernizr-3.8.0.min.js"></script> + <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script> + <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> + <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script> + <script src="js/plugins.js"></script> + <script src="js/main.js"></script> +</body> +``` + +If you like to just include the polyfills yourself, you could include them in +`js/plugins.js`. When you have a bunch of polyfills to load in, you could +also create a `polyfills.js` file in the `js/vendor` directory or include the files +individually and combine them using a build tool. Always ensure that the polyfills +are all loaded before any other JavaScript. + +There are some misconceptions about Modernizr and polyfills. It's important +to understand that Modernizr just handles feature checking, not polyfilling +itself. The only thing Modernizr does regarding polyfills is that the team +maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). + +### jQuery CDN for jQuery + +The jQuery CDN version of the jQuery JavaScript library is referenced towards +the bottom of the page. A local fallback of jQuery is included for rare instances +when the CDN version might not be available, and to facilitate offline +development. + +The jQuery CDN version was chosen over other potential candidates +([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/)) +because it's fast ([comparable or faster than Google by some +measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90)) +and, (unlike Google's CDN) is available to China's hundreds of millions of internet users. +For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191) +the Google Hosted version over the jQuery CDN because it was available +over HTTPS (the jQuery CDN was not,) and it offered a better chance of +hitting the cache lottery owing to the popularity of the Google CDN. +The first issue is no longer valid and the second is far outweighed by +being able to serve jQuery to users in China. + +While the jQuery CDN is a strong default solution your site or application may +require a different configuration. Testing your site with services like +[WebPageTest](https://www.webpagetest.org/) and browser tools like +[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real +world performance of your site and can show where you can optimize your specific +site or application. + +### Google Universal Analytics Tracking Code + +Finally, an optimized version of the Google Universal Analytics tracking code is +included. + +We use `analytics.js` rather than the newer `gtag.js` as +[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370) + +The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js). + +Google recommends that this script be placed at the top of the page. +Factors to consider: if you place this script at the top of the page, you’ll +be able to count users who don’t fully load the page, and you’ll incur the max +number of simultaneous connections of the browser. + +Further information: + +- [Introduction to + Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/) +- [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/) + +**N.B.** The Google Analytics snippet is included by default mainly +because Google Analytics is [currently one of the most popular tracking +solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there. +However, its usage isn't set in stone, and you SHOULD consider exploring the +[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software) +and use whatever suits your needs best. + + diff --git a/week3/html5-boilerplate/doc/js.md b/week3/html5-boilerplate/doc/js.md new file mode 100644 index 0000000..a9f5487 --- /dev/null +++ b/week3/html5-boilerplate/doc/js.md @@ -0,0 +1,36 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation +table of contents](TOC.md) + +# The JavaScript + +Information about the default JavaScript included in the project. + +## main.js + +This file can be used to contain or reference your site/app JavaScript code. +If you're working on something more advanced you might replace this file +entirely. That's cool. + +## plugins.js + +This file can be used to contain all your plugins, such as jQuery plugins and +other 3rd party scripts for a simple site. + +One approach is to put jQuery plugins inside of a `(function($){ ... +})(jQuery);` closure to make sure they're in the jQuery namespace safety +blanket. Read more about [jQuery plugin +authoring](https://learn.jquery.com/plugins/#Getting_Started). + +By default the `plugins.js` file contains a small script to avoid `console` +errors in browsers that lack a `console`. The script will make sure that, if +a console method isn't available, that method will have the value of empty +function, thus, preventing the browser from throwing an error. + +## vendor + +This directory can be used to contain all 3rd party library code. + +Minified versions of the latest jQuery and Modernizr libraries are included by +default. You may wish to create your own [custom Modernizr +build with the online builder](https://modernizr.com/download/) or [command +line tool](https://modernizr.com/docs#command-line-config). diff --git a/week3/html5-boilerplate/doc/misc.md b/week3/html5-boilerplate/doc/misc.md new file mode 100644 index 0000000..810fa60 --- /dev/null +++ b/week3/html5-boilerplate/doc/misc.md @@ -0,0 +1,173 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation +table of contents](TOC.md) + +# Miscellaneous + +* [.gitignore](#gitignore) +* [.editorconfig](#editorconfig) +* [Server Configuration](#server-configuration) +* [robots.txt](#robotstxt) +* [humans.txt](#humanstxt) +* [browserconfig.xml](#browserconfigxml) + +-- + +## .gitignore + +HTML5 Boilerplate includes a basic project-level `.gitignore`. This should +primarily be used to avoid certain project-level files and directories from +being kept under source control. Different development-environments will +benefit from different collections of ignores. + +OS-specific and editor-specific files should be ignored using a "global +ignore" that applies to all repositories on your system. + +For example, add the following to your `~/.gitconfig`, where the `.gitignore` +in your HOME directory contains the files and directories you'd like to +globally ignore: + +```gitignore +[core] + excludesfile = ~/.gitignore +``` + +* More on global ignores: https://help.github.com/articles/ignoring-files/ +* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore + + +## .editorconfig + +The `.editorconfig` file is provided in order to encourage and help you and +your team define and maintain consistent coding styles between different +editors and IDEs. + +By default, `.editorconfig` includes some basic +[properties](https://editorconfig.org/#supported-properties) that reflect the +coding styles from the files provided by default, but you can easily change +them to better suit your needs. + +In order for your editor/IDE to apply the +[properties](https://editorconfig.org/#supported-properties) from the +`.editorconfig` file, you may need to [install a +plugin]( https://editorconfig.org/#download). + +__N.B.__ If you aren't using the server configurations provided by HTML5 +Boilerplate, we highly encourage you to configure your server to block +access to `.editorconfig` files, as they can disclose sensitive information! + +For more details, please refer to the [EditorConfig +project](https://editorconfig.org/). + + +## Server Configuration + +H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP +server](https://httpd.apache.org/docs/). If you are not using Apache +as your web server, then you are encouraged to download a +[server configuration](https://github.com/h5bp/server-configs) that +corresponds to your web server and environment. + +A `.htaccess` (hypertext access) file is an [Apache HTTP server +configuration file](https://github.com/h5bp/server-configs-apache). +The `.htaccess` file is mostly used for: + +* Rewriting URLs +* Controlling cache +* Authentication +* Server-side includes +* Redirects +* Gzipping + +If you have access to the main server configuration file (usually called +`httpd.conf`), you should add the logic from the `.htaccess` file in, for +example, a <Directory> section in the main configuration file. This is usually +the recommended way, as using .htaccess files slows down Apache! + +To enable Apache modules locally, please see: +https://github.com/h5bp/server-configs-apache#enable-apache-httpd-modules. + +In the repo the `.htaccess` is used for: + +* Allowing cross-origin access to web fonts +* CORS header for images when browsers request it +* Enable `404.html` as 404 error document +* Making the website experience better for IE users better +* Media UTF-8 as character encoding for `text/html` and `text/plain` +* Enabling the rewrite URLs engine +* Forcing or removing the `www.` at the begin of a URL +* It blocks access to directories without a default document +* It blocks access to files that can expose sensitive information. +* It reduces MIME type security risks +* It forces compressing (gzipping) +* It tells the browser whether they should request a specific file from the + server or whether they should grab it from the browser's cache + +When using `.htaccess` we recommend reading all inline comments (the rules after +a `#`) in the file once. There is a bunch of optional stuff in it. + +If you want to know more about the `.htaccess` file check out the +[Apache HTTP server docs](https://httpd.apache.org/docs/) or more +specifically the [htaccess +section](https://httpd.apache.org/docs/current/howto/htaccess.html). + +Notice that the original repo for the `.htaccess` file is [this +one](https://github.com/h5bp/server-configs-apache). + + +## robots.txt + +The `robots.txt` file is used to give instructions to web robots on what can +be crawled from the website. + +By default, the file provided by this project includes the next two lines: + + * `User-agent: *` - the following rules apply to all web robots + * `Disallow:` - everything on the website is allowed to be crawled + +If you want to disallow certain pages you will need to specify the path in a +`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow +crawling of all content, use `Disallow: /`. + +The `/robots.txt` file is not intended for access control, so don't try to +use it as such. Think of it as a "No Entry" sign, rather than a locked door. +URLs disallowed by the `robots.txt` file might still be indexed without being +crawled, and the content from within the `robots.txt` file can be viewed by +anyone, potentially disclosing the location of your private content! So, if +you want to block access to private content, use proper authentication instead. + +For more information about `robots.txt`, please see: + + * [robotstxt.org](https://www.robotstxt.org/) + * [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt) + +## humans.txt + +The `humans.txt` file is used to provide information about people involved with +the website. + +The provided file contains three sections: + + * `TEAM` - this is intended to list the group of people responsible for the website + * `THANKS` - this is intended to list the group of people that have contributed + to the website + * `TECHNOLOGY COLOPHON` - the section lists technologies used to make the website + +For more information about `humans.txt`, please see: http://humanstxt.org/ + + +## browserconfig.xml + +The `browserconfig.xml` file is used to customize the tile displayed when users +pin your site to the Windows 8.1 start screen. In there you can define custom +tile colors, custom images or even [live tiles](https://msdn.microsoft.com/library/dn455106.aspx#CreatingLiveTiles). + +By default, the file points to 2 placeholder tile images: + +* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles. + This image resizes automatically when necessary. +* `tile-wide.png` (558x270px): user for `Wide` tiles. + +Notice that IE11 uses the same images when adding a site to the `favorites`. + +For more in-depth information about the `browserconfig.xml` file, please +see [MSDN](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)). diff --git a/week3/html5-boilerplate/doc/usage.md b/week3/html5-boilerplate/doc/usage.md new file mode 100644 index 0000000..0493e29 --- /dev/null +++ b/week3/html5-boilerplate/doc/usage.md @@ -0,0 +1,130 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation +table of contents](TOC.md) + +# Usage + +The most basic usage of HTML5 Boilerplate is to create a static site or simple +app. Once you've downloaded or cloned the project, that process looks something +like this: + +1. Set up the basic structure of the site. +2. Add some content, style, and functionality. +3. Run your site locally to see how it looks. +4. Deploy your site. + +Cool, right? _It is_. That said, the smart defaults, baseline elements, default +attribute values and various other utilities that HTML5 Boilerplate offers can +serve as the foundation for whatever you're interested in building. + +Even the basic use-case of a simple static site can be enhanced by manipulating +the code through an automated build process. Moving up in complexity HTML5 +Boilerplate can be integrated with whatever front-end framework, CMS or +e-commerce platform you're working with. Mix-and-match to your heart's content. +Use what you need (toss it in a blender if you need to) and discard the rest. +HTML5 Boilerplate is a starting point, not a destination. + +## Basic structure + +A basic HTML5 Boilerplate site initially looks something like this: + +``` +. +├── css +│ ├── main.css +│ └── normalize.css +├── doc +├── img +├── js +│ ├── main.js +│ ├── plugins.js +│ └── vendor +│ ├── jquery.min.js +│ └── modernizr.min.js +├── .editorconfig +├── .htaccess +├── 404.html +├── browserconfig.xml +├── favicon.ico +├── humans.txt +├── icon.png +├── index.html +├── robots.txt +├── site.webmanifest +├── tile.png +└── tile-wide.png +``` + +What follows is a general overview of each major part and how to use them. + +### css + +This directory should contain all your project's CSS files. It includes some +initial CSS to help get you started from a solid foundation. [About the +CSS](css.md). + +### doc + +This directory contains all the HTML5 Boilerplate documentation. You can use it +as the location and basis for your own project's documentation. + +### js + +This directory should contain all your project's JS files. Libraries, plugins, +and custom code can all be included here. It includes some initial JS to help +get you started. [About the JavaScript](js.md). + +### .htaccess + +The default web server configs are for Apache. For more information, please +refer to the [Apache Server Configs +repository](https://github.com/h5bp/server-configs-apache). + +Host your site on a server other than Apache? You're likely to find the +corresponding server configs project listed in our [Server Configs +](https://github.com/h5bp/server-configs/blob/master/README.md) repository. + +### 404.html + +A helpful custom 404 to get you started. + +### browserconfig.xml + +This file contains all settings regarding custom tiles for IE11 and Edge. + +For more info on this topic, please refer to +[Microsoft's Docs](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)). + +### .editorconfig + +The `.editorconfig` file is provided in order to encourage and help you and +your team to maintain consistent coding styles between different +editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig). + +### index.html + +This is the default HTML skeleton that should form the basis of all pages on +your site. If you are using a server-side templating framework, then you will +need to integrate this starting HTML with your setup. + +Make sure that you update the URLs for the referenced CSS and JavaScript if you +modify the directory structure at all. + +If you are using Google Universal Analytics, make sure that you edit the +corresponding snippet at the bottom to include your analytics ID. + +### humans.txt + +Edit this file to include the team that worked on your site/app, and the +technology powering it. + +### robots.txt + +Edit this file to include any pages you need hidden from search engines. + +### Icons + +Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple +Touch Icon with your own. + +If you want to use different Apple Touch Icons for different resolutions please +refer to the [according documentation](extend.md#apple-touch-icons). diff --git a/week3/html5-boilerplate/favicon.ico b/week3/html5-boilerplate/favicon.ico new file mode 100644 index 0000000..be74abd Binary files /dev/null and b/week3/html5-boilerplate/favicon.ico differ diff --git a/week3/html5-boilerplate/humans.txt b/week3/html5-boilerplate/humans.txt new file mode 100644 index 0000000..8d2330f --- /dev/null +++ b/week3/html5-boilerplate/humans.txt @@ -0,0 +1,15 @@ +# humanstxt.org/ +# The humans responsible & technology colophon + +# TEAM + + <name> -- <role> -- <twitter> + +# THANKS + + <name> + +# TECHNOLOGY COLOPHON + + CSS3, HTML5 + Apache Server Configs, jQuery, Modernizr, Normalize.css diff --git a/week3/html5-boilerplate/icon.png b/week3/html5-boilerplate/icon.png new file mode 100644 index 0000000..8a42581 Binary files /dev/null and b/week3/html5-boilerplate/icon.png differ diff --git a/week3/html5-boilerplate/images/Logo.png b/week3/html5-boilerplate/images/Logo.png new file mode 100644 index 0000000..07f7959 Binary files /dev/null and b/week3/html5-boilerplate/images/Logo.png differ diff --git a/week3/html5-boilerplate/images/backIMG.png b/week3/html5-boilerplate/images/backIMG.png new file mode 100644 index 0000000..7749333 Binary files /dev/null and b/week3/html5-boilerplate/images/backIMG.png differ diff --git a/week3/html5-boilerplate/images/cssdiner.png b/week3/html5-boilerplate/images/cssdiner.png new file mode 100644 index 0000000..e479e24 Binary files /dev/null and b/week3/html5-boilerplate/images/cssdiner.png differ diff --git a/week3/html5-boilerplate/images/divider_white.png b/week3/html5-boilerplate/images/divider_white.png new file mode 100644 index 0000000..876428c Binary files /dev/null and b/week3/html5-boilerplate/images/divider_white.png differ diff --git a/week3/html5-boilerplate/images/udacity.png b/week3/html5-boilerplate/images/udacity.png new file mode 100644 index 0000000..c73f090 Binary files /dev/null and b/week3/html5-boilerplate/images/udacity.png differ diff --git a/week3/html5-boilerplate/img/@media.png b/week3/html5-boilerplate/img/@media.png new file mode 100644 index 0000000..fcc6678 Binary files /dev/null and b/week3/html5-boilerplate/img/@media.png differ diff --git a/week3/html5-boilerplate/img/image.textClipping b/week3/html5-boilerplate/img/image.textClipping new file mode 100644 index 0000000..e9576ed Binary files /dev/null and b/week3/html5-boilerplate/img/image.textClipping differ diff --git a/week3/html5-boilerplate/index.html b/week3/html5-boilerplate/index.html new file mode 100644 index 0000000..c29aec3 --- /dev/null +++ b/week3/html5-boilerplate/index.html @@ -0,0 +1,147 @@ +<!doctype html> +<html class="no-js" lang=""> + +<head> + <meta charset="utf-8"> + <title> + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+ +
+ +
+ +
+ + +
+ + + +
+ + Logo +

MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES

+ white divider +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.Proin gravida dolor sit amet lacus accumsan et viverrra justo commondo.

+ Download + +
+ + + + +
+ +
+ +

Try Your FREE Trial Today

+
+ + + +
+ +
+ +
+
+
+ +
+
+ +
+ +
+ + + + + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/week3/html5-boilerplate/js/plugins.js b/week3/html5-boilerplate/js/plugins.js new file mode 100644 index 0000000..feb7d19 --- /dev/null +++ b/week3/html5-boilerplate/js/plugins.js @@ -0,0 +1,24 @@ +// Avoid `console` errors in browsers that lack a console. +(function() { + var method; + var noop = function () {}; + var methods = [ + 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', + 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', + 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', + 'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn' + ]; + var length = methods.length; + var console = (window.console = window.console || {}); + + while (length--) { + method = methods[length]; + + // Only stub undefined methods. + if (!console[method]) { + console[method] = noop; + } + } +}()); + +// Place any jQuery/helper plugins in here. diff --git a/week3/html5-boilerplate/js/vendor/jquery-3.4.1.min.js b/week3/html5-boilerplate/js/vendor/jquery-3.4.1.min.js new file mode 100644 index 0000000..a1c07fd --- /dev/null +++ b/week3/html5-boilerplate/js/vendor/jquery-3.4.1.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){A(t,!0)}finally{s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[k]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){A(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?k.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?k.grep(e,function(e){return e===n!==r}):"string"!=typeof n?k.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:L.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(E);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;nx",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ee=/^([^.]*)(?:\.(.+)|)/;function ke(){return!0}function Se(){return!1}function Ne(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Se;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}function De(e,i,o){o?(Q.set(e,i,!1),k.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Q.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(k.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Q.set(this,i,r),t=o(this,i),this[i](),r!==(n=Q.get(this,i))||t?Q.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Q.set(this,i,{value:k.event.trigger(k.extend(r[0],k.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Q.get(e,i)&&k.event.add(e,i,ke)}k.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(ie,i),n.guid||(n.guid=k.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof k&&k.event.triggered!==e.type?k.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(R)||[""]).length;while(l--)d=g=(s=Ee.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.hasData(e)&&Q.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(R)||[""]).length;while(l--)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||k.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&Q.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(Q.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t\x20\t\r\n\f]*)[^>]*)\/>/gi,qe=/\s*$/g;function Oe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&k(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Re(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Me(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Q.hasData(e)&&(o=Q.access(e),a=Q.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||k.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Vt,Gt=[],Yt=/(=)\?(?=&|$)|\?\?/;k.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Gt.pop()||k.expando+"_"+kt++;return this[e]=!0,e}}),k.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Yt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Yt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Yt,"$1"+r):!1!==e.jsonp&&(e.url+=(St.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||k.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?k(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Gt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Vt=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Vt.childNodes.length),k.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=we([e],t,o),o&&o.length&&k(o).remove(),k.merge([],i.childNodes)));var r,i,o},k.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(k.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},k.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){k.fn[t]=function(e){return this.on(t,e)}}),k.expr.pseudos.animated=function(t){return k.grep(k.timers,function(e){return t===e.elem}).length},k.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=k.css(e,"position"),c=k(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=k.css(e,"top"),u=k.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,k.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},k.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){k.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===k.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===k.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=k(e).offset()).top+=k.css(e,"borderTopWidth",!0),i.left+=k.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-k.css(r,"marginTop",!0),left:t.left-i.left-k.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===k.css(e,"position"))e=e.offsetParent;return e||ie})}}),k.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;k.fn[t]=function(e){return _(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),k.each(["top","left"],function(e,n){k.cssHooks[n]=ze(y.pixelPosition,function(e,t){if(t)return t=_e(e,n),$e.test(t)?k(e).position()[n]+"px":t})}),k.each({Height:"height",Width:"width"},function(a,s){k.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){k.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return _(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?k.css(e,t,i):k.style(e,t,n,i)},s,n?e:void 0,n)}})}),k.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){k.fn[n]=function(e,t){return 00&&(t+=" "+n+e.join(" "+n)),S?b.className.baseVal=t:b.className=t)}function i(e,t){if("object"==typeof e)for(var n in e)P(e,n)&&i(n,e[n]);else{e=e.toLowerCase();var r=e.split("."),s=Modernizr[r[0]];if(2===r.length&&(s=s[r[1]]),void 0!==s)return Modernizr;t="function"==typeof t?t():t,1===r.length?Modernizr[r[0]]=t:(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=t),o([(t&&!1!==t?"":"no-")+r.join("-")]),Modernizr._trigger(e,t)}return Modernizr}function s(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):S?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function a(){var e=t.body;return e||(e=s(S?"svg":"body"),e.fake=!0),e}function l(e,n,r,o){var i,l,u,f,c="modernizr",d=s("div"),p=a();if(parseInt(r,10))for(;r--;)u=s("div"),u.id=o?o[r]:c+(r+1),d.appendChild(u);return i=s("style"),i.type="text/css",i.id="s"+c,(p.fake?p:d).appendChild(i),p.appendChild(d),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(t.createTextNode(e)),d.id=c,p.fake&&(p.style.background="",p.style.overflow="hidden",f=b.style.overflow,b.style.overflow="hidden",b.appendChild(p)),l=n(d,e),p.fake?(p.parentNode.removeChild(p),b.style.overflow=f,b.offsetHeight):d.parentNode.removeChild(d),!!l}function u(e,t){return!!~(""+e).indexOf(t)}function f(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function c(t,n,r){var o;if("getComputedStyle"in e){o=getComputedStyle.call(e,t,n);var i=e.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(i){var s=i.error?"error":"log";i[s].call(i,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!n&&t.currentStyle&&t.currentStyle[r];return o}function d(t,r){var o=t.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(f(t[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+f(t[o])+":"+r+")");return i=i.join(" or "),l("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"===c(e,null,"position")})}return n}function p(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function m(e,t,o,i){function a(){f&&(delete L.style,delete L.modElem)}if(i=!r(i,"undefined")&&i,!r(o,"undefined")){var l=d(e,o);if(!r(l,"undefined"))return l}for(var f,c,m,h,A,v=["modernizr","tspan","samp"];!L.style&&v.length;)f=!0,L.modElem=s(v.shift()),L.style=L.modElem.style;for(m=e.length,c=0;c