HTML, CSS, & JavaScript Resources Guides, References, Tips, Tricks, Hacks, ...

I keep finding myself looking up the details of various HTML tags and attributes, CSS properties and selectors, and JavaScript methods, properties, etc. So I thought I'd put all the resources I've found useful in one page so I can find and access them more quickly.

HTML
Guides and References
Tips when using <!doctype html> (i.e., HTML5)
  • The W3C Validator will return a validation error when there are consecutive hyphens (e.g. "------") inside HTML comments.
  • Don't put any tags, even comments, before DOCTYPE declaration. They say IE9 and older go bonkers
  • Insert the following CSS into the page to help along the illiterate MSIE browsers:
    header, section, footer, aside, nav, main, article, figure {display: block;}
  • When creating new elements insert "The Shiv" in the head tag to edumacate illiterate version 8 and older of MSIE ("HTML5 Enabling JavaScript" by Sjoerd Visscher)
  • When creating new elements insert the following script in the head tag. It's—as you guess—again for the ignorant IE.
    <script>document.createElement("newElement")</script>
Character References
  • "Character Reference," "Character Entity Reference," "Numeric Character Reference." I can never get those terms straight. Here's the definitive definitions of those terms, straight from the W3C.
  • Bear in mind that character entity references are case-sensitive. So &Pi; will display Π (upper case the Greek letter pi) while &pi; will output π (lower case pi)
  • A very good Character Entity Reference Chart by the W3C. Hovering over an item displays the description of that glyph. The page is searchable (use the find feature in your browser—Ctrl+F in mine). And it lists alternate character entity references. Thus I discovered that &middot; &centerdot; &CenterDot; all refer to the same decimal character reference &#183; and so produce the same glyph.
  • Extensive, if not complete, list of named character references by the W3C. Hovering over the glyphs will display a magnified view. (Note: As of April 2016 the page does not render properly in Opera (v36). No immediately apparent problems in Firefox (v45).
  • amp-whatis "a quick, interactive reference of 14,500 HTML character entities"
HTML5 Custom Elements
HTML Validation
Dublin Core
Miscellaneous Mish-Mash
  • If you need some incomprehensible or nonsensical text to temporarily populate your web page while it's under development, you can use this lorem ipsum generator. It can automatically encapsulate paragraphs in <p> tags. There are options for how long paragraphs are. And there are even alternative texts to choose from.
  • Or if you'd like a little more levity, stuff your page using the Bacon Ipsum Generator
  • The web authoring software that I've been using of late is Notepad++. It's free and feature-filled (alliteration unintended).
  • Good typography, among other things, means using curly quotation marks instead of the default straight quotes we get from the computer keyboard.
  • Here's a handy Markdown syntax cheat sheet.
Cascading Style Sheets (CSS)
Guides and References
Tips
  • By default this page uses Open Sans typeface from Google. It's a beautiful, clean and crisp font. Find Open Sans and a zillion other fonts in Google's font site. To use Open Sans (just Latin and normal non-italicized) choose either of the following methods:
    • Include the following tag in the <head> element <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" />
    • Include the following rule in the CSS stylesheet @import url("http://fonts.googleapis.com/css?family=Open+Sans"); Remember to place @import rules at the very beginning of the stylesheet before any other rules or they won't work.
  • Ways of centering a table using CSS:
    • Specify the width of the table and then let the left and right margins adjust automatically. For example to center a table with a width of 80% use the following rule:table {
        width: 80%;
        margin: auto;
      }
    • Specify the left and right margins and let the table width adjust automatically. For example, to center a table with a width of 80% and zero margins on the top and bottom use the following rule: table {
        width: auto;
        margin: 0 10%;
      }
Flexible Box
Sass and Compass
CSS Validation
JavaScript
Guides and References
Tips and Tricks
  • To convert a decimal integer to a hexadecimal string use the following: decimalinteger.toString(16); // decimalinteger is a variable containing a decimal integer To convert a hexadecimal string to a decimal integer use the following: parseInt(hexstring, 16); // hexstring is a hexadecimal literal or a variable containing a hexadecimal number as a string Likewise, to convert a decimal integer to a binary string and to convert a binary string to a decimal integer use the following respectively: decimalinteger.toString(2); // decimalinteger is a variable containing a decimal integerparseInt(binarystring, 2); // binarystring is a binary literal or a variable containing a binary number as a string In general, the .toString(radix) method can be used to convert a decimal integer to any number as a string with a radix/base from 2 to 36, while parseInt(string, radix) can be used to convert a string to a decimal integer (2 ≤ radix ≤ 36). [source: David Flanagan, JavaScript: The Definitive Guide, 4th ed., O'Reilly & Associates, 2002, p.164-165, 500-501, 509-510.]
jQuery
  • jQuery reference for methods, selectors, events, etc. etc. etc.
  • The .ready() method checks whether the page (html) has finished loading and then executes whatever script is inside. Placing your script within this method will ensure that the script wil automatically run once the web page has been completely loaded. Moreover, the script can be placed anywhere in the page or in an external file and it will still run (only) after the page has been completely loaded.
  • Use $(function() {
      /* your script goes in here */
    })     as a shortcut for $(document).ready(function() {
      /* your script goes in here */
    })
  • Use the following to load the latest Google hosted jQuery library version 1.x.x <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> and the following to load the latest 2.x.x version <script src="https://ajax.googleapis.com/ajax/libs/jquery/2/jquery.min.js"></script>