AtHeartEngineer/html5-boilerplate
1
1
Fork 0
mirror of https://github.com/h5bp/html5-boilerplate.git synced 2026-01-09 16:08:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update docs for v8 (#2245)

Browse Source 
- Fix many site redirects (I used https://github.com/tmcw/linkrot - great tool!)
- Fix a few minor grammatical issues
- Remove jQuery CDN section (no longer needed)
- Update jQuery code snippet to use latest version (3.5.1)
- Remove paragraph on 'Disable implicit prefetching'. This is not widely supported, recommended against and very rarely useful. I don't think its needed here.
This commit is contained in:
Christian Oliff
2020-05-15 20:06:52 +09:00
committed by GitHub
parent 231e047d27
commit 7d88f3551b
6 changed files with 34 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
dist/doc/extend.md vendored
View File

@@ -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
@@ -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
@@ -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.
@@ -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)
@@ -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
@@ -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">
@@ -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
@@ -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.

41
dist/doc/html.md vendored
View File

@@ -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
@@ -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="" />
@@ -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
@@ -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

6
dist/doc/misc.md vendored
View File

@@ -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
@@ -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
@@ -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: