Skip to content

Commit

Permalink
Merge pull request #2240 from h5bp/v8
Browse files Browse the repository at this point in the history
Release V8.0.0
  • Loading branch information
roblarsen authored May 15, 2020
2 parents 195ef9f + 7d88f35 commit 97c6616
Show file tree
Hide file tree
Showing 14 changed files with 14,995 additions and 112 deletions.
3 changes: 3 additions & 0 deletions dist/.gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
# Include your project-specific ignores in this file
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
# Useful .gitignore templates: https://github.com/github/gitignore
node_modules
dist
.cache
26 changes: 7 additions & 19 deletions dist/doc/extend.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,6 @@ 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
<meta http-equiv="x-dns-prefetch-control" content="off">
```

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
Expand Down Expand Up @@ -110,7 +98,7 @@ Microsoft Ajax Content Delivery Network:

* 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/
* https://docs.microsoft.com/en-us/archive/blogs/ie/internet-explorer-9-network-performance-improvements


## Google Universal Analytics
Expand Down Expand Up @@ -274,7 +262,7 @@ right-click. Each Task goes to the specified URL, and gets its own mini icon

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/).
blog](https://docs.microsoft.com/en-us/archive/blogs/ie/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.
Expand All @@ -291,7 +279,7 @@ 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/)
schema](https://docs.microsoft.com/en-us/archive/blogs/ie/pinned-sites-in-windows-8)
* [Available badge
values](https://docs.microsoft.com/en-us/uwp/schemas/tiles/badgeschema/element-badge)

Expand All @@ -312,7 +300,7 @@ value is boolean rather than a color. It's all or nothing.

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/)
IE10](https://blogs.windows.com/windowsdeveloper/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)

## Search

Expand Down Expand Up @@ -389,7 +377,7 @@ plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plug
### 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)?
scratch](https://www.rssboard.org/rss-specification)?

```html
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
Expand Down Expand Up @@ -485,7 +473,7 @@ 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
Tool](https://search.google.com/structured-data/testing-tool). Also, please
note that this markup requires to add attributes to your top `html` tag.

```html
Expand Down Expand Up @@ -558,7 +546,7 @@ added to the Home Screen on iOS:
```

For further information please read the [official
documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
on Apple's site.


Expand Down
41 changes: 7 additions & 34 deletions dist/doc/html.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ to the `lang` attribute in the `<html>` as in this example:

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)
document](https://html.spec.whatwg.org/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
Expand Down Expand Up @@ -76,10 +76,10 @@ details.

The [Open Graph Protocol](https://ogp.me/) allows you to define the way your
site is presented when referenced on third party sites and applications
(Facebook, Twitter, Linkedin). The protocol provides a series of meta elements
(Facebook, Twitter, LinkedIn). The protocol provides a series of meta elements
that define the details of your site. The required attributes define the title,
preview image, URL, and [type](https://ogp.me/#types) (e.g., video, music,
website, article.)
website, article).

``` html
<meta property="og:title" content="" />
Expand Down Expand Up @@ -161,7 +161,7 @@ utility](https://www.npmjs.com/package/modernizr-cli).
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 [polyfill.io](https://polyfill.io/), just put
using a polyfill CDN service, like [polyfill.io](https://polyfill.io/v3/), just put
it before the other scripts in the bottom of the page:

```html
Expand Down Expand Up @@ -202,40 +202,13 @@ npm install jQuery
You can then copy the minified file into the `vendor` folder and add jQuery
to the `index.html` manually.

For reference the last version of the snippet we used to include jQuery looked
like the following:
To load jQuery from a CDN with a local fallback you can use the following:

``` html
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.5.0.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.5.1.min.js"><\/script>')</script>
```

#### 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
Expand Down
6 changes: 3 additions & 3 deletions dist/doc/misc.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ globally ignore:
excludesfile = ~/.gitignore
```

* More on global ignores: https://help.github.com/articles/ignoring-files/
* More on global ignores: [https://help.github.com/articles/ignoring-files/](https://help.github.com/en/github/using-git/ignoring-files)
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore

## .editorconfig
Expand Down Expand Up @@ -134,7 +134,7 @@ 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)
* [How Google handles the `robots.txt` file](https://developers.google.com/search/reference/robots_txt)

## humans.txt

Expand All @@ -154,7 +154,7 @@ For more information about `humans.txt`, please see: http://humanstxt.org/

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).
tile colors, custom images or even [live tiles](https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn455106(v=vs.85)).

By default, the file points to 2 placeholder tile images:

Expand Down
Loading

0 comments on commit 97c6616

Please sign in to comment.