Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>CSS</h1> <p>CSS is loaded in the <code>&lt;head&gt;</code> to prevent Flash Of Unstyled Content (FOUC), a situation where your page shows up with no styles for a split second. Loading them in the <code>&lt;head&gt;</code> is a minor sacrifice to ensure your page looks perfect when the content gets rendered.</p> <h1>JS</h1> <h3>General Case:</h3> <p>JS is loaded at the bottom for several (but not limited to the following) reasons:</p> <ul> <li><p>So that it does not block the loading of other resources and the rendering of the page.</p></li> <li><p>The traditional use of JS is for enhancement, like client-side validation and minor special effects. These are usually optional and do not affect the overall purpose of the page. Therefore they are loaded last.</p></li> <li><p>Adding scripts after the content ensures that the elements referred to by your scripts are safely accessed, because they're already on the DOM.</p></li> </ul> <h3>Exceptions:</h3> <p>But there are some exceptions to the rule like:</p> <ul> <li><p>"Pre-flight libraries" like Modernizr</p> <p>Modernizr applies classes on the <code>&lt;html&gt;</code> tag to signify availability of features, which can be used for JS and CSS purposes. Delaying this might cause sudden shift of style due to class addition, as well as broken JS because checking wasn't done earlier.</p></li> <li><p>CSS parsers like LESS/SASS and scripts that affect styles</p> <p>Remote LESS/SASS styles are loaded via AJAX, therefore the page renders regardless if the styles are ready or not. Loading them in the head will make them load the styles as early as possible to avoid FOUC.</p></li> <li><p>"Bootloader libraries" like RequireJS need to be loaded as early as possible to download the other scripts in parallel.</p></li> <li><p>Web apps need JS as a platform. It's best you load these libraries early in the head. Besides, in a webapp, there is minimal page content before the app runs.</p></li> </ul> <h3>Edge Cases:</h3> <p>There are two attributes of script worth mentioning here as well, and they are <a href="http://caniuse.com/#search=defer" rel="nofollow noreferrer"><code>defer</code></a> and <a href="http://caniuse.com/#search=async" rel="nofollow noreferrer"><code>async</code></a>. </p> <p>Basically, the idea is that a script tag with <code>defer</code> runs only after the DOM is parsed, and script tags with <code>async</code> loads scripts asynchronously without blocking the other operations. It would be implied that you can use scripts in the head, apply <code>async</code> to load them in parallel, and <code>defer</code> to assure the DOM is ready when executed, but each has it's own problems.</p> <p>Here's an <a href="https://developer.mozilla.org/en/HTML/Element/script#Attributes" rel="nofollow noreferrer">MDN documentation</a> explaining more about what they are and <a href="https://stackoverflow.com/a/3982619/575527">an answer</a> that pretty much speaks about their history, support and current status.</p>
    singulars
    1. This table or related slice is empty.
    1. POWhat JavaScript should be included in the <head> and what included in the <body>?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USJoseph
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI always used to use the term FOBUC (Flash of Butt-Ugly content) but I suppose it's "FOUC".
      singulars
      1. PO
      1. USWesley Murch
    2. COIf the CSS is external and cache-able the hit only occurs once so its still best in the HEAD. If a WebApp, beware of what your JS does... putting it at the bottom may frustrate some users that are expecting elements to be interactive once visually rendered.
      singulars
      1. PO
      1. USscunliffe
    3. COha ha classic @WesleyMurch +1 :) "FOBUC"
      singulars
      1. PO
      1. USTats_innit
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload