Lawrence's Guide to Crushing Google

General Questions

How would you optimize a website's assets/resources?

Make fewer HTTP requests

Making fewer HTTP requests is the quickest way to significantly decrease load time on your page. Typically, this is accomplished by:

• Combining scripts and stylesheets
• Using image sprites
• Avoiding redirects
• Avoiding frames

Use a CDN (Content Delivery Network)

A CDN is a network of servers in different geographical locations which all have access to the same files. Because proximity to server affects overall load time, CDNs make it such that the best server is used in serving files. Sometimes CDNs can be pricey, but there are several that offer their services for free.

CSS & JS files at the top & bottom respectively

Most notable browsers, except Opera, won't begin rendering content until all of the stylesheets are downloaded and parsed. Accordingly, it makes most sense to put them as early as possible.
JS files, however, should be placed as close to the closing body tag as possible. Because JS files can potentially change any content on the page, browsers will block downloads until the JS files are downloaded and parsed. Also an argument for concatenating JS files.

Concatenate stylesheets and scripts

Done to reduce the number of HTTP requests. Despite situational instances where it's advantageous to have more than one stylesheet or JS file, you can often get away with just using one.

Minify HTML, CSS, and JS files

Also known as obfuscating, removing all of the whitespace in your files is a simple way to decrease download size.

Gzip components

A well performing page should serve its HTML, CSS, JS, and any other text files compressed. If your server responds with a JSON object, this can be compressed as well. Most modern browsers support Gzipped files.

Host assets on different domains

Because browsers restrict the number of concurrent downloads per domain, you should split your assets between different domains. Here is the data for current browsers' concurrent downloads.

Browser	HTTP/1.1	HTTP/1.0
IE 6,7	2	4
IE 8	6	6
Firefox 2	2	8
Firefox 3	6	6
Safari 3,4	4	4
Chrome 1,2	6	?
Chrome 3	4	4
Chrome 4+	6	?
iPhone 2	4	?
iPhone 3	6	?
iPhone 4	4	?
Opera 9.63,10.00	4	4
Opera 10.51	8	?

I got a lot of my answers from  here so check em out for more detail.

What is flash of unstyled content (FOUC) and how do you avoid it?

Because I've dealt with this problem a couple times, I figured I should mention it here. In AngularJS, often ng-cloak should work. In typical web pages though, the best solution is put all of your CSS in the head. This puts the styles before the content, so when the content finally loads, it will be styled.
You could also set your body to visibility: hidden; and using javascript display your body. Scripts execute well after content has displayed, hereby avoiding FOUC.

What does CORS stand for and what issue does it address?

"The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests." [citation]

HTML Questions

What does a doctype do?

It tells the browser which version of the markup language it will be parsing. I love this StackOverflow explanation.

What's the difference between standards mode and quirks mode?

Not as much of an immediate concern anymore, but a history lesson. Way back when, the web was written in two versions: Netscape Navigator, and Microsoft Internet Explorer. When web standards were created, browsers could not immediately switch to the new standards, in fear of breaking most existing sites.
Now there technically exists three modes: quirks mode, which emulates the Netscape Navigator and Internet Explorer 5 experience, almost standards mode has trace amounts of quirky behavior, and standards mode, and full standards mode, whose behavior is compliant with HTML and CSS specifications.
"In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode." [citation]

What's the difference between HTML and XHTML?

It determines rules for parsing. Documents served with a 'Content-type: text/html' header are to be parsed using HTML syntax rules, which are typically less strict, whereas a 'Content-type: application/xml+xhtml' header should be parsed using XHTML syntax which is more strict. More info can be read here.

Are there any problems with serving pages as application/xhtml+xml?

From Google HTML/CSS Standards: "Use HTML5. HTML5 (HTML syntax) is preferred for all HTML documents: <!DOCTYPE html>. (It's recommended to use HTML, as text/html. Do not use XHTML. XHTML, as application/xhtml+xml, lacks both browser and infrastructure support and offers less room for optimization than HTML.) Although fine with HTML, do not close void elements, i.e. write <br>, not <br />."

How do you serve a page with content in multiple languages?

Localization and Internationalization

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

HTML5 offers some more sematic text markup, e.g. article, aside, header, footer, input, etc., some of it's largest features come in the realm of multimedia, i.e. canvas and video. There is also new data storage: local storage, session storage, and web database, as opposed to cookies.
Local storage stores data with no expiration date.
Session storage only stores data for one session.
Cookies have far less space reserved.
This StackOverflow thread has a good explanation.
http://stackoverflow.com/questions/3220660/local-storage-vs-cookies

Describe the difference between <script>, <script async> and <script defer> .

David Walsh said it best: "This WebKit blog post explains the difference between defer and async best:

'Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window's load event. This means it's possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document's DOMContentLoaded event.'"

Have you used different HTML templating languages before?

Yo dude, I'm doing that right now! :D

CSS Questions

What is the difference between classes and ID's in CSS?

Classes, denoted by a period, and ID's, denoted by an octothorp, are both used in CSS as selectors. There can exist any number of classes, whereas there can only exist one ID. Accordingly, when an element has two conflicting styles between a class and ID selector, it will choose the style associated with the ID selector; CSS always chooses the most specific selector possible in the event of conflicts.

What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

From this StackOverflow answer:

"Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like sup or sub "just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.
Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS.
Normalize.css doesn't clutter your dev tools. A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.
Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.
Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements."

Describe Floats and how they work.

Floats are meant to simulate the experience with print media, how you have an image left or right of a body of text, with the text wrapping it. The difference with floated elements and absolutely positioned elements is while absolutely positioned elements are removed from the flow of the page - with all remaining elements behaving as if that element isn't there, floated elements contribute to the flow of the page.
Floats can also have wonky behavior, hence its sibling property, clear. More info here.

Describe BFC(Block Formatting Context) and how it works.

Ok, this one's a doozy.
I just tried to digest all of the text from Mozilla's Web Developer guide and a StackOverflow answer and this is what I have. Correct me if I'm wrong, of course.
Let's start with why it's used. BFC is useful because it makes parent elements contain all of its descendents. This is especially important in respect to floated elements, as sometimes they extend beyond their parent container. By creating these BFCs, you create reliable interactions between your block elements.
Because I don't trust my own definition yet, here are some links that helped me understand a bit better.StackOverflow. Thanks again and always.
Mozilla Developer Guide

What are the various clearing techniques and which is appropriate for what context?

Ripped my answers from here no shame.

clear: both;

"If you are in a situation where you always know what the succeeding element is going to be"

The empty div method

<div style="clear: both;"></div>

The overflow method

"relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements."

The easy clearing method

.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Explain CSS sprites, and how you would implement them on a page or site.

CSS sprites are when you have multiple images in one larger image, as to reduce the number of HTTP requests. In order to use them, you set them as a background image, as normal, and then offset its position withbackground-position. If you use Grunt/Gulp/Node, this seems pretty sick. I will have to use it soon. :)

What are some of the "gotchas" for writing efficient CSS?

Efficient is an interesting word.
Efficient, as in easy to understand I use several concepts.

• I use a preprocessor (SASS/SCSS)
• I (try to) alphabetize properites within a selector
• I write modular CSS. I keep partials which house individual components and base styling.
• I try write my CSS where selectors loosely follow the HTML structure. For example, if .section-one comes before .section-two in the HTML, it will in the CSS file as well.
• appropriate, I use variables and mixins to add readability and for decluttering.

Efficiency, as in well-performing I follow these guidelines.

• Avoid styling tag selectors/making rules as specific as possible
• Avoid the * selector
• Allowing child divs to inherit from parent
• Avoid descendent selectors