English translations for nearly everything.

Need to translate jQuery: selectors & JavaScript. My brain is too
fried at the moment. :P

src/documents/bonus/en/bye.html.md

@@ -0,0 +1,18 @@
+---
+order: 2
+title: That's it for today!
+---
+
+<div class="img-right">
+  <img id="geek-31" src="http://assets.browserdiet.com/img/31.png" alt="Geek #31" width="162" height="275" />
+</div>
+
+We hope that after reading this guide you can get your site in shape. :)
+
+And remember, like all things in life, [there's no such thing as a silver bullet](http://www.cs.nott.ac.uk/~cah/G51ISS/Documents/NoSilverBullet.html). Performance tuning of your application is a worthwhile venture, but should not be the sole basis of all your development decisions&mdash;at times you'll need to weigh out the costs and beneifts.
+
+Want to learn more? Check out the [References](https://github.com/zenorocha/browser-diet/wiki/References) that we used to write this guide.
+
+Have suggestions? Send a tweet to [@zenorocha](http://twitter.com/zenorocha/) or a [pull request](https://github.com/zenorocha/browser-diet) on Github.
+
+Don't forget to share with your friends, let's make a faster web for everyone. \o/

src/documents/bonus/en/tools.html.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title: Diagnosis tools: your best friend
+---
+
+<div class="img-left">
+  <img id="geek-43" src="http://assets.browserdiet.com/img/43.png" alt="Geek #43" width="157" height="275" />
+</div>
+
+If you'd like to venture into this world of web performance, it's crucial to install the [YSlow](http://yslow.org/) and [PageSpeed](https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR) extensions in your browser&mdash;they'll be your best friends from now on.
+
+Or, if you prefer online tools, visit the [WebPageTest](http://www.webpagetest.org/), [HTTP Archive](http://httparchive.org/) or [PageSpeed](http://pagespeed.googlelabs.com/) sites.
+
+In general each will analise your site's performance and create a report that gives your site a grade coupled with invaluable advice to help you resolve the potential problems.

src/documents/css/en/combine.html.md

@@ -0,0 +1,26 @@
+---
+order: 2
+title: Combining multiple CSS files
+---
+
+Another best practice for organization and maintenance of styles is to separate them into modular components.
+
+```html
+<link rel="stylesheet" href="structure.css" media="all">
+<link rel="stylesheet" href="banner.css" media="all">
+<link rel="stylesheet" href="layout.css" media="all">
+<link rel="stylesheet" href="component.css" media="all">
+<link rel="stylesheet" href="plugin.css" media="all">
+```
+
+However, an HTTP request is required for each one of these files (and we know that browsers can only download a limited number resources in parallel).
+
+```html
+<link rel="stylesheet" href="main.css" media="all">
+```
+
+So combine your CSS. Having a smaller number of files will result in a smaller number of requests and a faster loading page. 
+
+Want to have the best of both worlds? Automate this process through a build tool.
+
+*> Useful tools: [Grunt](http://gruntjs.com/).*

src/documents/css/en/key-selector.html.md

@@ -0,0 +1,21 @@
+---
+order: 5
+title: Think about (and rethink) your Key Selector
+---
+
+The *Key selector* is the key to your CSS expression. In general, developers don't focus on this because they don't know exactly how it works.
+
+```css
+header nav ul li a {}
+```
+
+Take a look at the above expression. What happens is the browser begins evaluating the CSS expression beginning from the right—in this case the *key selector* is `a`. This particular expression is asking the browser to do a lot of work. First it finds all the `a` elements in the HTML, after all the `li` elements that contain an `a` element, and so on until it finds `header nav ul li a`.
+
+```css
+header nav ul li * { /* Bad */ }
+header nav ul li a { /* Worse */ }
+nav a { /* Bad */ }
+nav a.nav-link { /* Better */ }
+nav .nav-link { /* Better */ }
+.nav-link { /* Better */ }
+```

src/documents/css/en/link-import.html.md

@@ -0,0 +1,18 @@
+---
+order: 4
+title: Prefer <link> over @import
+---
+
+There's two ways to include an external stylesheet in your page: either via the `<link>` tag:
+
+```html
+<link rel="stylesheet" href="style.css">
+```
+
+Or through the `@import` directive (inside an external stylesheet or in an inline `<style>` tag):
+
+```css
+@import url('style.css');
+```
+
+When you use the second option through an external stylesheet, the browser is incapable of downloading the asset in parallel, which can block the download of other assets.

src/documents/css/en/minify.html.md

@@ -0,0 +1,32 @@
+---
+order: 1
+title: Minify your stylesheets
+---
+
+To maintain readible code, it's a good idea to write comments and use indentation:
+
+```css
+.center {
+  width: 960px;
+  margin: 0 auto;
+}
+
+/* --- Structure --- */
+
+.intro {
+  margin: 100px;
+  position: relative;
+}
+```
+
+But to the browser, none of this actually matters. For this reason, always remember to minify your CSS through automated tools.
+
+```css
+.center{width:960px;margin:0 auto;}.intro{margin:100px;position:relative;}
+```
+
+This will shave bytes from the filesize, which results in faster downloads, parsing and execution.
+
+For those that use pre-processors like *Sass*, *Less* and *Stylus*, it's possible to configure your compiled CSS output to be minified.
+
+*> Usefull tools: [YUI Compressor](http://developer.yahoo.com/yui/compressor/), [CSS Minifier](http://www.cssminifier.com/) e [cssmin.js](http://www.phpied.com/cssmin-js/).*

src/documents/css/en/seletor-universal.html.md

@@ -0,0 +1,26 @@
+---
+order: 3
+title: Don't use the universal selector
+---
+
+Avoid using the universal selector as it forces the browser to search over **all**  HTML elements in the page, and after apply the rule to each one.
+
+<div class="img-right">
+  <img src="http://assets.browserdiet.com/img/4.png" alt="Geek #4" width="162" height="275" />
+</div>
+
+```CSS
+* {
+  margin: 0;
+  padding: 0;
+  border: none;
+  text-decoration: none;
+  outline: 0;
+}
+```
+
+There will also be many elements that certain attributes just won't have any effect on.
+
+For this reason, we recommend that you use a CSS Reset, our roll your own.
+
+*> Useful tools: [Yahoo! Reset](http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css), [Normalize](http://necolas.github.com/normalize.css/) e [Eric Meyer's Reset](http://meyerweb.com/eric/tools/css/reset/).*

src/documents/html/en/async.html.md

@@ -0,0 +1,28 @@
+---
+order: 4
+title: Try out async and defer
+---
+
+To explain how these attributes are useful for better performance, it's better to understand what happens when we don't use them.
+
+<div class="img-left">
+  <img id="geek-20" src="http://assets.browserdiet.com/img/20.png" alt="Geek #20" width="118" height="275" />
+</div>
+
+``` html
+<script src="example.js"></script>
+```
+
+In this form, the page has to wait for the script to be fully downloaded, parsed and executed before being able to parse and render any following HTML. This can significantly add to the load time of your page. Sometimes this behavior might be desired, but generally not.
+
+``` html
+<script async src="example.js"></script>
+```
+
+The script is downloaded asynchronously while the rest of the page continues to get parsed. The script is guaranteed to be executed as soon as the download is complete.
+
+``` html
+<script defer src="example.js"></script>
+```
+
+Just like the example above, the script is downloaded in an asynchronous manner. But it's executed only when the page has been completely parsed.

src/documents/html/en/compress.html.md

@@ -0,0 +1,27 @@
+---
+order: 3
+title: Minify your HTML
+---
+
+To maintain readible code, it's a good idea to write comments and use indentation.
+
+```html
+<p>Lorem ipsum dolor sit amet.</p>
+
+<!-- My List -->
+<ul>
+  <li><a href="#"></a></li>
+  <li><a href="#"></a></li>
+  <li><a href="#"></a></li>
+</ul>
+```
+
+But to the browser, none of this actually matters. For this reason, it can be useful to minify your HTML with automated tools.
+
+```html
+<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
+```
+
+This will shave bytes from the filesize, and as a result, your users will enjoy faster downloads, parsing and execution.
+
+*> Usefull tools: [HTML Compressor](http://code.google.com/p/htmlcompressor/).*

src/documents/html/en/css-on-top-js-on-bottom.html.md

@@ -0,0 +1,33 @@
+---
+order: 2
+title: Styles up top, scripts down bottom
+---
+
+When we put stylesheets in the `<head>` we allow the page to render progressively, which gives the impression to our users that the page is loading quickly.
+
+But if we put them at the end of the page, the page will be rendered without styles until the CSS is downloaded and applied.
+
+On the other hand, when dealing with JavaScript, it's important to place scripts at the bottom of the page as they block rendering while they're being loaded and executed.
+
+```html
+<!doctype html>
+<html>
+<head>
+
+  <meta charset="UTF-8">
+  <title>Browser Diet</title>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="style.css" media="all">
+
+</head>
+<body>
+
+  <p>Lorem ipsum dolor sit amet.</p>
+
+  <!-- JS -->
+  <script src="script.js"></script>
+
+</body>
+</html>
+```

src/documents/html/en/external.html.md

@@ -0,0 +1,16 @@
+---
+order: 1
+title: Avoid inline code
+---
+
+There are two basic ways for you to include CSS or JavaScript on your page.
+
+**1) Inline:** the CSS is defined inside a `<style>` tag and the JavaScript inside a `<script>` tag.
+
+**2) External:** the CSS is loaded from a `<link>` tag and the JavaScript from the `src` attribute of the `<script>` tag.
+
+The first option, despite reducing the number of HTTP requests, actually increases the size of your HTML document. But this can be useful when you have small assets and the cost of making a request is greater. In this case, run tests to evaluate if there's any actual gains in speed. Also be sure to evaluate the purpose of your page and its audience: if you expect people to only visit it once, for example for some tempororay campaign where you never expect return visitors, inlining code will help in reducing the number of HTTP requests.
+
+*> Avoid manually authoring CSS/JS in the middle of your HTML (automating this process with tools is preferred).*
+
+The second option not only improves the organization of your code, but also makes it possible for the browser to cache it. This option should be preferred for the majority of cases, especially when working with large files and the cost of inlining is larger.

src/documents/images/en/optimize.html.md

@@ -0,0 +1,12 @@
+---
+order: 3
+title: Optimize your images
+---
+
+Image files contains a lot of information that is useless on the Web. For example, a JPEG photo can have Exif metadata from the camera (date, camera model, location, etc.). A PNG contains information about colors, metadata, and sometimes even a miniature embedded thumbnail. None of this is used by the browser and contributes to filesize bloat.
+
+There are tools that exist for image optimization that will remove all this unnecessary data and give you a slimmer file without degrading quality. Online, you can find [Kraken.io](http://kraken.io), and [Smush.it](http://www.smushit.com), among others. If you prefer an installable application, there's [ImageOptim](http://imageoptim.com/) (Mac) or [RIOT](http://luci.criosweb.ro/riot/download/) (Windows). There are also various commandline tools like *pngout*, *jpegtran*, *gifsicle* and more.
+
+All these tools are simple to use and generate smaller files that won't degrade image quality—in other words, they perform *lossless* compression. Another way to optimize images is to compress them at the cost of visual quality. We call these *lossy* optimizations.
+
+When you export a JPEG, for example, you can choose the quality level (a number between 0 and 100).  Thinking about performance, always choose the lowest number possible where the visual quality is still acceptable. There's an online tool that will help you lower JPEG quality without perceptibly affecting visual quality, [JPEGmini](http://jpegmini.com/). Another common lossy technique is to reduce the color palette in a PNG or to convert PNG-24 files into PNG-8.

src/documents/images/en/scale.html.md

@@ -0,0 +1,16 @@
+---
+order: 2
+title: Don't scale images in markup
+---
+
+Always define the `width` and `height` attributes of an image. This will help avoid unnecessary repaints and reflows during rendering.
+
+```html
+<img width="100" height="100" src="logo.jpg" alt="Logo">
+```
+
+Knowing this, John Q. Developer who has a *700x700px* image decides to use this technique to display the image as *50x50px*.
+
+What Mr. Developer doesn't realize is that dozens of unnecessary *kilobytes* will be sent over the wire.
+
+Alway keep in mind: just because you can define with width and height of an image in HTML doesn't mean you should do this to scale down large images.

src/documents/images/en/sprites.html.md

@@ -0,0 +1,30 @@
+---
+order: 1
+title: Use CSS Sprites
+---
+
+This technique is all about grouping various images into a single file.
+
+<img id="img-sprite" src="http://assets.browserdiet.com/img/sprite-example.jpg" alt="CSS Sprite Example">
+
+And then positioning them with CSS.
+
+```css
+.icon-foo {
+  background-image: url('mySprite.png');
+  background-position: -10px -10px;
+}
+
+.icon-bar {
+  background-image: url('mySprite.png');
+  background-position: -5px -5px;
+}
+```
+
+As a result, you've dramatically reduced the number of HTTP requests and avoided any potential delay of other resouces on your page.
+
+When using your *sprite*, avoid leaving too much white space between images. This won't affect the size of the file, but will have an effect on memory consumption.
+
+And despite nearly everyone knowing about sprites, this technique isn't widely used&mdash;perhaps due to developers not using automated tools to generate sprites. We've highlighted a few that can help you out with this.
+
+ *> Useful tools: [SpritePad](http://wearekiss.com/spritepad), [Compass](http://compass-style.org/help/tutorials/spriting/), [SpriteMe](http://www.spriteme.org/) and [Sprite Cow](http://www.spritecow.com/).*

src/documents/intro/en/intro.html.md

@@ -0,0 +1,21 @@
+---
+title: 'Meet the warriors who will help you out with this!'
+category: team
+order: 0
+layout: default
+---
+
+<div class="article">
+
+  <div class="content-right">
+    <p>And what if we got together a bunch of experts who work on large sites to create a definitive front-end performance guide?</p>
+
+    <p>And not just one of those boring guides made for robots, what if we did something fun? What about getting together Briza Bueno **(Americanas.com)**, Davidson Fellipe **(Globo.com)**, Giovanni Keppelen **(ex-Peixe Urbano)**, Jaydson Gomes **(Terra)**, Marcel Duran **(Twitter)**, Mike Taylor **(Opera)**, Renato Mangini **(Google)** e Sérgio Lopes **(Caelum)** to make the best reference possible? </p>
+
+    <p>That's exactly what we've done! And we'll guide you in this battle to create even faster sites.</p>
+
+    <p class="project-leader">&mdash; Zeno Rocha, project lead.</p>
+
+  </div>
+
+</div>

src/documents/intro/en/performance-matters.html.md

@@ -0,0 +1,29 @@
+---
+title: Does performance really matter?
+order: ??
+---
+
+<div class="article">
+
+  <h1 id="performance-importa">
+    <a class="tip-title" href="#performance-importa">Does performance really matter?</a>
+    <a title="Link" class="anchor" href="#performance-importa">∞</a>
+  </h1>
+  <div class="line">
+    <span class="order">??</span>
+    <a title="Editar" class="edit" href="https://github.com/zenorocha/browser-diet/blob/master/src/documents/index.html.md.eco">✎</a>
+  </div>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio hic rerum consectetur deleniti facere repellendus eum quam nostrum quos fugiat corrupti aut dolore explicabo dolorem expedita excepturi tenetur ipsum magni!</p>
+
+  <!-- http://www.slideshare.net/keppelen/performance-frontend-front-in-macei
+
+  http://jaydson.org/talks/x-web-performance/
+
+  http://fellipe.com/slides/performance-javascript/
+
+  http://www.slideshare.net/davidsonfellipe/jqueryperf
+
+  http://www.slideshare.net/luiztiago/por-que-investir-em-performance-frontend -->
+
+</div>