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. Hopefully the page may be helpful to others as well.

HTML
Guides and References
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 Π will display Π (upper case the Greek letter pi) while π 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 · · · all refer to the same decimal character reference · 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
Dublin Core
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>
Markup Validation
Markdown
  • Markdown Syntax by John Gruber, the creator of Markdown
  • Use John Gruber's Dingus to write markdown text and see the html markup as well as how it will appear in browsers. Includes a cheat sheet for markdown syntax
  • Here's a handy Markdown syntax cheat sheet.
  • Am currently using MarkdownPad 2 by Evan Wondrasek for writing and saving markdown text.
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.
  • Use favicon.cc to create an icon that appears in the browser tab. Save the image in the appropriate directory and then add the following to the head tag of the page: <link rel="icon" type="image/vnd.microsoft.icon" href="http://mypage.net/images/favicon.ico" /> (assuming that the icon is in the folder named images)
  • HTML Minifier is an online minifier with a host of options for reducing html file size to minimize browser loading time.
  • In August 2016 I switched over to Sublime Text 3 as my default HTML and SCSS/CSS authoring software. With Emmet plug-in installed typing HTML tags has never been easier and in fact has become fun. I tried installing Emmet in Notepad++ but for some reason it won't work—even after fiddling around with the keyboard shortcut assignments.
  • To install Emmet in Sublime Text 3 first install Package Control then in Sublime Text 3 go to Tools > Command Palette and type in "install" and choose "Package Control: Install Package." Then type "emmet" and choose "Emmet."
  • Emmet References:
Cascading Style Sheets (CSS)
Guides and References
CSS Colors
Sass and Compass
  • Sass Basics
  • Learn Sass in 15 Minutes
  • A Sass and Compass Tutorial on Youbtube
  • A Visual Guide to Sass and Compass Color Functions
  • Fearful of using the command line I've opted to use Koala GUI app to compile my Sass files. Don't forget to tick the checkbox for "Autoprefixer" in the compile options for Sass. That'll automatically add/prepend CSS declarations with the necessary vendor-specific prefixes. For example, if your scss contains the declaration display: flex; the Koala Autoprefixer will turn that into display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;     Note: As of May 2016 the Koala Autoprefixer still adds certain outdated prefixes (e.g., display: -webkit-flex;). No harm done except for added memory space and download time.
  • If you want to use the latest Autoprefixer, paste your CSS into Autoprefixer Online.
  • As of May 2016 the Scout page only has the faulty v0.7.1 on its home page. That's strange because they supposedly already have a re-released working version on this GitHub page. That page also contains the beta version of Scout 2.0 which can be downloaded and installed. On Windows machines just donwload the zip file, unpack, and run the exe file.
Flexible Box
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%;
      }
  • Removing the space between inline-block elements
  • A host of CSS reset and normallization stylesheets
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.]
  • Handling Long Words and URLs using CSS magic
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>
Buzz Word: Responsive Web Design Content is like water by Stéphanie Walter