My Web document cheatsheets

cheatsheet.atom

<?xml version="1.0" encoding="utf-8"?>
<feed
 xmlns="http://www.w3.org/2005/Atom"
 xml:lang="ja-JP">

<author>
	<name>Japboy</name>
</author>
<category/>
<contributor/>
<generator/>
<icon/>
<logo/>
<id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>
<link rel="self" href="git://gist.github.com/160000.git/cheatsheet.atom"/>
<rights/>
<subtitle/>
<title>Atom  Syndication Format Cheatsheet</title>
<updated>2003-12-19T11:06:00+09:00</updated>

<entry>

<author/>
<category/>
<content type="xhtml">
<div xmlns="http://www.w3.org/2000/xmlns">

<p>This is the <strong>content</strong>.</p>

</div>
</content>
<contributor/>
<id/>
<link/>
<published/>
<rights/>
<source/>
<summary/>
<title/>
<updated/>

</entry>

</feed>

cheatsheet.css

@charset "UTF-8";

/**
 * Foundation style
 *
 * Appearance order of CSS properties are depends on:
 * http://lab.youck.org/css-property-order.html
 *
 * @project   Name of Project
 * @version   0.0.3
 * @package   com.github.japboy
 * @author    Yu I.
 * @copyright 2011 by Yu I.
 * @cssdoc    version 1.0-pre
 * @license   Public domain
 *
 * @colordef rgb(255,255,255); white
 */

/**
 * Stylesheet initialisation
 * @section reset
 */
@import url("http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css");

/* Minimal reset properties
* {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: rgb(0,0,0);
    line-height: 160%;
    font-size: 100%;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
*/

/**
 * The root element
 * @section structure
 * @see     http://www.w3.org/TR/html5/semantics.html#the-root-element
 */
html {}

/**
 * Document metadata
 * @section structure
 * @see     http://www.w3.org/TR/html5/semantics.html#document-metadata
 */
head,
title,
base,
link,
meta,
style {}

/**
 * Scripting
 * @section structure
 * @see     http://www.w3.org/TR/html5/semantics.html#scripting-1
 */
script,
noscript {}

/**
 * Sections
 * @section structure
 * @see     http://www.w3.org/TR/html5/semantics.html#sections
 */
body,
section,
nav,
article,
aside,
h1,
h2,
h3,
h4,
h5,
h6
hgroup,
header,
footer,
address {}

body {
    padding: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bolder;
}

/**
 * Grouping content
 * @section structure
 * @see     http://www.w3.org/TR/html5/semantics.html#grouping-content
 */
p,
hr,
br,
pre,
dialog,
blockquote,
ol,
ul,
li,
dl,
dt,
dd {}

/**
 * Text-level semantics
 * @section structure
 * @see     http://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics
 */
a,
em,
strong,
small,
cite,
q,
dfn,
abbr,
code,
var,
samp,
kbd,
sub,
sup,
i,
b,
mark,
progress,
meter,
time,
ruby,
rt,
rp,
bdo,
span {}

/**
 * Edits
 * @section structure
 * @see     http://www.w3.org/TR/html5/text-level-semantics.html#edits
 */
ins,
del {}

/**
 * Embedded content
 * @section structure
 * @see     http://www.w3.org/TR/html5/text-level-semantics.html#embedded-content-1
 */
figure,
img,
iframe,
embed,
object,
param,
video,
audio,
source,
canvas,
map,
area {}

/**
 * Tabular data
 * @section structure
 * @see     http://www.w3.org/TR/html5/tabular-data.html#tabular-data
 */
table,
caption,
colgroup,
col,
tbody,
thead,
tfoot,
tr,
td,
th {}

/**
 * Forms
 * @section structure
 * @see     http://www.w3.org/TR/html5/forms.html#forms
 */
form,
fieldset,
label,
input,
button,
select,
datalist,
optgroup,
option,
textarea,
keygen,
output {}

/**
 * Interactive elements
 * @section structure
 * @see     http://www.w3.org/TR/html5/interactive-elements.html#interactive-elements
 */
details,
command,
menu{}

/**
 * Miscellaneous elements
 * @section structure
 * @see     http://www.w3.org/TR/html5/interactive-elements.html#miscellaneous-elements
 */
legend,
div {}

cheatsheet.js

"use strict";

// Script should not have many global objects.
// One for one script is recommended.
var APP = {};

APP.my_property = "I My Me Mine.";

(function () {
    var a = 1,
        b = 2,
        sum = a + b,
        myObject = {}; // Declare all objects first as one line.

    function doForLoop() {
        var i = 0;
            myArray = [1, 2, 3],
            len = myArray.length; // Length of an array should be cached.
        for (i = 0; i < len; i += 1) {
            console.log(myArray[i]);
        }
    }

    function doForInLoop() {
        var i = 0,
            hasOwn = Object.prototype.hasOwnProperty;
            myHash = {
            one: 1,
            two: 2,
            three: 3
        };
        for (i in myHash) {
            // Loop only own properties but extended properties
            if (hasOwn.call(myHash, i)) {
                console.log(i, myHash[i]);
            }
        }
    }

    function doSwitch() {
        var unknown_numer = 0,
            result = '';
        switch (unknown_number) {
        case 0:
            result = "zero";
            break;
        case 1:
            result = "one";
            break;
        default:
            result = "unknown";
        }
    }

    function compareExactly() {
        var zero = 0;
        if (zero === "") {
            // Never be executed.
        }
    }
});

cheatsheet.markdown

Markdown: Syntax cheatsheet

This cheatsheet is originally from http://daringfireball.net/projects/markdown/dingus

Phrase Emphasis

italic bold italic bold

Links

Inline:

An example

Reference-style labels (titles are optional):

An example. Then, anywhere else in the doc, define the link:

Images

Inline (titles are optional):

Reference-style:

Headers

Setext-style:

Header 1

Header 2

atx-style (closing #'s are optional):

Header 1

Header 2

Header 6

Lists

Ordered, without paragraphs:

1. Foo
2. Bar

Unordered, with paragraphs:

• A list item.

  With multiple paragraphs.

• Bar

You can nest them:

• Abacus
  • answer
• Bubbles
  1. bunk
  2. bupkis
     • BELITTLER
  3. burper
• Cunning

Blockquotes

Email-style angle brackets are used for blockquotes.

And, they can be nested.

Headers in blockquotes

• You can quote a list.
• Etc.

Code Spans

<code> spans are delimited by backticks.

You can include literal backticks like `this`.

Preformatted Code Blocks

Indent every line of a code block by at least 4 spaces or 1 tab.

This is a normal paragraph.

This is a preformatted
code block.

Horizontal Rules

Three or more dashes or asterisks:

---

---

---

Manual Line Breaks

End a line with two or more spaces:

Roses are red,
Violets are blue.

cheatsheet.opml

<?xml version="1.0" encoding="UTF-8"?>
<opml
 xmlns="http://www.dlese.org/Metadata/opml"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.dlese.org/Metadata/opml http://www.dlese.org/Metadata/opml/2.0/opml.xsd"
 version="2.0">

<head>

<title>My bookmarks</title>
<dateCreated></dateCreated>
<dateModified></dateModified>
<ownerName>Yu Inao</ownerName>
<ownerEmail>[email protected]</ownerEmail>
<expansionState></expansionState>
<vertScrollState></vertScrollState>
<windowTop></windowTop>
<windowLeft></windowLeft>
<windowBottom></windowBottom>
<windowRight></windowRight>

</head>

<body>

<outline type="text" text="Feeds">
	<outline type="link" text="http://foo.bar/rss/feed.xml"/>
	<outline type="link" text="http://foo.bar/rss.xml"/>
	<outline type="link" text="http://foo.bar/"/>
</outline>

</body>

</opml>

cheatsheet.rst

reStructuredText: Syntax cheatsheet

This is from ReST for Markdown and Textile Users - why ReStructuredText is better | The Lambda meme - all things Lisp, and more

Headers

There are 4 levels of headings.

Section 1.2

See?

Section 1.3

See?

Text Styles

Italics and Bold

Links

Written URL: http://foo.bar/

One sentence including a link: This is something like that and that's all.

One word for link: LINK

One sentence for link: What you see is what you get.

List

1. Ordered listing
2. You see

1. Nest Blank lines between the parent lists are necessary.

1. Nest...

1. You see?

• Unordered listing
• You see

• Nest Blank lines between the parent lists are necessary.

• Nest...

• You see?

Images

See?

Tables

I think this idea is awsome.

Inputs		Output
A	B	A or B
False	False	False
True	False	True
False	True	True
True	True	True

cheatsheet_html5.html

<!DOCTYPE html>
<!--Cheatsheet for HTML 5
I've changed mind... HTML doesn't suit for 72 letters limitting in a line.
Hmmm... I need standards' markup guideline!
 -->
<html lang="ja-JP" dir="ltr" manifest="./cheatsheet_html5.manifest">
  <head>
    <meta charset="UTF-8">
    <meta name="application-name" content="Name if only this is an application">
    <meta name="description" content="Summary of this page">
    <meta name="generator" content="Name if only this page is generated by a program">
    <meta name="keywords" content="A comma-separated list of keywords that describe this page">
    <meta name="robots" content="A comma-separated list of operators explaining how search engine crawlers should treat the content. 'noarchive' to prevent cached versions, 'noindex' to prevent indexing, 'nofollow' works as the link rel value with the same name, 'NOODP' to block from using Open Directory Project, and 'NOYDIR' to block from using Yahoo directory's descriptions.">
    <meta name="rights-standard" content="content;CC:BY:SA">

    <title>Cheatsheet of HTML 5</title>

    <link rel="author" href="mailto:[email protected]" title="Name of Author">
    <link rel="alternate feed" type="application/rss+xml" href="./foo/bar/feed.rss">
    <link rel="icon" href="./foo/bar/favicon.png">
    <link rel="stylesheet" media="screen, tv" type="text/css" href="./style/Main.css">
    <link rel="stylesheet" media="print" type="text/css" href="./style/print.css">
    <script type="text/javascript" charset="UTF-8" src="./foo/bar/script.js">
    </script>
  </head>

  <body>
    <header>
      <h1>HTML 5 Cheatsheet</h1>
    </header>

    <nav>
      <li>Navigation will be here.</li>
    </nav>

    <article>
      <h1>Article heading</h1>

      <section>
        <h2>Introduction</h2>

        <p>HTML is the language for describing the structure of Web pages. HTML gives authors the means to:</p>
        <ul>
          <li>Publish online documents with headings, text, tables, lists, photos, etc.</li>
          <li>Retrieve online information via hypertext links, at the click of a button.</li>
          <li>Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.</li>
          <li>Include spread-sheets, video clips, sound clips, and other applications directly in their documents.</li>
        </ul>
        <p>With HTML, authors describe the structure of pages using <em>markup.</em> The <em>elements</em> of the language label pieces of content such as <em>paragraphs,</em> <em>lists,</em> <em>tables,</em> and so on.</p>
      </section>

      <section>
        <h2>Getting started</h2>

        <p>Something will be written here. Bla bla bla bla bla bla...</p>
      </section>
    </article>

    <aside>
      <h1>Aside heading</h1>

      <p>Sub contents will be here.</p>
    </aside>

    <hr>

    <footer>
      <address>Japboy &lt;[email protected]&gt;</address>
    </footer>
  </body>
</html>

cheatsheet_html5.manifest

CACHE MANIFEST
# List files that you'd like to cache on client-side.
./cheatsheet_html5.html

cheatsheet_webfont.css

@charset "UTF-8";

/**
 * Web fonts definition
 *
 * @project   Webfonts
 * @version   0.0.1
 * @package   cheatsheet
 * @author    Yu I.
 * @copyright 2010 by Yu I.
 * @cssdoc    version 1.0-pre
 * @license   CC-BY-SA 3.0 http://creativecommons.org/licenses/by-sa/3.0/
 */

/**
 * Web fonts
 * @section font
 */
@font-face {
    font-family: "M+ 1p";
    src: local("M+ 1p"),
         url("http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf")
         format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "M+ 1p";
    src: local("M+ 1p"),
         url("http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-bold.ttf")
         format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "M+ 1p";
    src: local("M+ 1p"),
         url("http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-heavy.ttf")
         format("truetype");
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: "M+ 1m";
    src: local("M+ 1m"),
         url("http://mplus-fonts.sourceforge.jp/webfonts/mplus-1m-regular.ttf")
         format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "M+ 1m";
    src: local("M+ 1m"),
         url("http://mplus-fonts.sourceforge.jp/webfonts/mplus-1m-bold.ttf")
         format("truetype");
    font-weight: bold;
    font-style: normal;
}

cheatsheet_xhtml-1.1.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
 xml:lang="en"
 xml:space="preserve"
 dir="ltr" >

<head>
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <meta http-equiv="X-UA-Compatible" content="IE=8" />
 <meta content="Japboy" name="author" />

 <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>

 <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
 <link rel="shortcut icon" href="{Favicon}" />
 <link rev="made" href="mailto:@gmail.com" />
 {block:IndexPage}<link rel="appendix" title="Archive" href="./archive" />{/block:IndexPage}
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">
 <link rel="stylesheet" media="screen, tv" type="text/css" href="./style/Main.css" />
 <link rel="stylesheet" media="print" type="text/css" href="./style/print.css" />
</head>

<body>

<div class="container" id="head">

{block:IndexPage}<h1>{Title} <img src="{PortraitURL-30}" /></h1>{/block:IndexPage}
{block:PostTitle}<h1>{PostTitle}</h1>{/block:PostTitle}

{block:Description}{Description}{/block:Description}

</div>

<hr />

<div class="container" id="body">

{block:IndexPage}

<div class="container" id="main">{block:Posts}

{block:NewDayDate}<h2>{ShortDayOfWeek} {DayOfMonth} {ShortMonth}</h2>{/block:NewDayDate}{block:SameDayDate}{/block:SameDayDate}

{block:Text}<div class="post">
{block:Title} <h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
{Body}
</div>{/block:Text}

{block:Photo}<div class="post">
<p><img src="{PhotoURL-250}" alt="{PhotoAlt}" /></p>
{block:Caption} <p>{Caption}</p>{/block:Caption}
</div>{/block:Photo}

{block:Quote}<div class="post">
<blockquote {block:Source}cite="{Source}"{/block:Source}>
{Quote}
{block:Source}<address>{Source}</address>{/block:Source}
</blockquote>
</div>{/block:Quote}

{block:Link}<div class="post">
<p><a href="{URL}" {Target}>{Name}</a></p>
{block:Description} <p>{Description}</p>{/block:Description}
</div> {/block:Link}

{block:Chat}<div class="post">
{block:Title}<p><a href="{Permalink}">{Title}</a></p>{/block:Title}
{block:Lines}
<ul>
<li class="{Alt} user_{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
</ul>
{/block:Lines}
</div>{/block:Chat}

{block:Video}<div class="post">
{Video-250}
{block:Caption}<p>{Caption}</p>{/block:Caption}
</div>{/block:Video}

{/block:Posts}</div>

<div class="container" id="sub">

<p><a href="http://www.l4d.com/">Left 4 Dead</a> is now on Steam! Why don't you get it and play with <a href="http://steamcommunity.com/profiles/76561197991164452/">me</a>? Aye!</p>

<ul class="toc">
 <li><a href="/archive" tabindex="" accesskey="A">Archive</a></li>
 <li><a href="{RSS}" tabindex="" accesskey="F">Feed</a></li>
</ul>

</div>

{/block:IndexPage}

{block:PermalinkPage}
{/block:PermalinkPage}

</div>

<div class="container" id="foot">

{block:Pagination}
<ul class="snav">
 {block:PreviousPage}<li><a href="{PreviousPage}" tabindex="" accesskey="P">&#171; Previous</a></li>{/block:PreviousPage}
 <li>{CurrentPage} of {TotalPages}</li>
 {block:NextPage}<li><a href="{NextPage}" tabindex="" accesskey="N">Next &#187;</a></li>{/block:NextPage}
{block:PermalinkPagination} {/block:PermalinkPagination}
</ul>
{/block:Pagination}
{block:PermalinkPagination}
<ul class="snav">
{block:PreviousPost}<li><a href="{PreviousPost}s" tabindex="" accesskey="P">&#171; Previous</a></li>{/block:PreviousPost}
 <li>{CurrentPage} of {TotalPages}</li>
{block:NextPost} <li><a href="{NextPost}" tabindex="" accesskey="N">Next &#187;</a></li>{/block:NextPost}
</ul>
{/block:PermalinkPagination}

<hr />

<address>&copy; 2008 Japboy</address>

</div>

</body>

</html>

cheatsheet_xhtml5.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<!--Cheatsheet for HTML5
I would love to follow Python PEP 8 Coding Guide here.
-->
<html
 xmlns="http://www.w3.org/2000/xmlns"
 xml:lang="ja-JP"
 xml:space="preserve"
 dir="ltr"
 manifest="./cheatsheet_html5.manifest">
  <head>
    <meta charset="UTF-8"/>
    <meta
     name="application-name"
     content="Name if only this is an application"/>
    <meta
     name="description"
     content="Summary of this page"/>
    <meta
     name="generator"
     content="Name if only this page is generated by a program"/>
    <meta
     name="keywords"
     content="A comma-separated list of keywords that describe this page"/>
    <meta
     name="robots"
     content="A comma-separated list of operators explaining how search engine crawlers should treat the content. 'noarchive' to prevent cached versions, 'noindex' to prevent indexing, 'nofollow' works as the link rel value with the same name, 'NOODP' to block from using Open Directory Project, and 'NOYDIR' to block from using Yahoo directory's descriptions."/>
    <meta name="rights-standard" content="content;CC:BY:SA"/>

    <title>Cheatsheet of HTML 5</title>

    <link
     rel="author"
     href="mailto:[email protected]"
     title="Name of Author"/>
    <link
     rel="alternate feed"
     type="application/rss+xml"
     href="./foo/bar/feed.rss"/>
    <link
     rel="icon"
     href="./foo/bar/favicon.png"/>
    <link
     rel="stylesheet"
     media="screen, tv"
     type="text/css"
     href="./style/Main.css"/>
    <link
     rel="stylesheet"
     media="print"
     type="text/css"
     href="./style/print.css"/>
    <script
     type="text/javascript"
     charset="UTF-8"
     src="./foo/bar/script.js"/>
  </head>

  <body>
    <header>
      <h1>HTML 5 Cheatsheet</h1>
    </header>

    <nav>
      <li>Navigation will be here.</li>
    </nav>

    <article>
      <h1>Article heading</h1>

      <section>
        <h2>Introduction</h2>

        <p>
          HTML is the language for describing the structure of Web pages.
          HTML gives authors the means to:
        </p>
        <ul>
          <li>
            Publish online documents with headings, text, tables, lists,
            photos, etc.
          </li>
          <li>
            Retrieve online information via hypertext links, at
            the click of a button.
          </li>
          <li>
            Design forms for conducting transactions with remote services,
            for use in searching for information, making reservations,
            ordering products, etc.
          </li>
          <li>
            Include spread-sheets, video clips, sound clips, and other
            applications directly in their documents.
          </li>
        </ul>
        <p>
          With HTML, authors describe the structure of pages using
          <em>markup.</em> The <em>elements</em> of the language label
          pieces of content such as <em>paragraphs,</em> <em>lists,</em>
          <em>tables,<em> and so on.
        </p>
      </section>

      <section>
        <h2>Getting started</h2>

        <p>Something will be written here. Bla bla bla bla bla bla...</p>
      </section>
    </article>

    <aside>
      <h1>Aside heading</h1>

      <p>Sub contents will be here.</p>
    </aside>

    <hr/>

    <footer>
      <address>Japboy &lt;[email protected]&gt;</address>
    </footer>
  </body>
</html>