Snippets for yer computer needs

Markup languages


Application cache


<link rel="prefetch" href="_url_">

Shim for old IE browsers

<!--[if lt IE 9]>
<script src="<>"></script>


<form name="input" action="script.php" method="get">
Username: <input type="text" name="user" />
Favorite color:
<select name="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
<input type="submit" value="Submit" />

Input attributes (HTML 5)

use required to have the browser whine

<input ... required>

Code samples

<code>print 'hello world'</code> prints <samp>hello world</samp>

Canvas (HTML 5)

<canvas id='id' height='600' width='800'>fallback</canvas>
<script type='text/javascript'>
  var canvas = document.getElementById(id)
  if (canvas.getContext) {
    var context = canvas.getContext(type)

Fixed-meter bar (HTML 5)

<meter value='num' min='num' max='num' optimum='num'>
fallback display

Progress bar (HTML 5)

<progress value='num' max='num'>
fallback display

Use JavaScript to move it around

Autofocus input (HTML 5)

<input ... autofocus>

Patterned input (HTML 5)

<!-- Enter 15 digits -->
<input type='text' pattern='[0-9]{15}'>
<input type='text' ... list='listid'>
<datalist id='id'>
  <option label='label1' value='value1'>
  <option label='label2' value='value2'>

Editable content

<p contenteditable="true">

International calling code is required

<a href="tel:+14035555555">403-555-5555</a>

<!-- To handle an extension -->
<a href="tel:+14035555555p23">403-555-5555 ext. 23</a>

<!-- To use a fax line -->
<a href="fax:+14035555555">403-555-5555</a>

Doctype (HTML 5)

<!doctype html>

Semantic tags (HTML 5)

- <section>
- <nav>
- <article>
- <hgroup> (for article tag)
- <p> (In HTML 5, don't use the p tag for paragraph breaks - it *must* be used for paragraphs)
- <figure> (for article tag)
- <figcaption> (for figure tag)
- <aside> (for p tags)

Good meta tags to have

<title>up to 70 characters of relevant text</title>
<meta name="description" content="155 characters of message matching text">


gem install haml
-# This is a comment line, !!! 5 does the HTML 5 doctype
!!! 5
    %meta{charset: "utf-8"}
    -# You can pass variables to attributes
    %meta{variable: attribute_variable}
    %title Demo HAML page
    -# you can use . or # instead of %div if you're using a div tag
    = haml :footer


<!-- Comments are HTML comments, which can show up in the rendered output -->

[//]: # Non-standard way of commenting (avoiding rendering) is using using link to # (a valid URI) and blank line separation

[You can comment in the title box, and rely on :: to not find a reference elsewhere on the page (multiline support not guaranteed)]::

<!-- atx headers -->
# Heading 1
## Heading 2
###### Heading 6

<!-- Emphasis -->
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
_You **can** combine them_
~~This line is using a strikethrough~~
\*Use backslash for literals\*

<!-- Links -->

<> - automatic link

<!-- Images -->
![Alt text](/path/to/img.jpg)

<!-- Lists -->
- unordered
- list

1. ordered
2. list

1.  Multiparagraph list

    Requires 4 spaces/tab

2.  Blockquoted items

    > Need to have the > indented as well

Symbols and glyphs


Modifier e.g. HTML Entity vim CK
Grave à à a!
Acute á á a’
Circumflex â â a>
Tilde ã ã ’?
Umlaut ä ä a:
Cedil ç ç c,

Set theory

desc notation unicode vim CK
empty set \varnothing 8709 /0
set of natural numbers \mathbb{N}    
set of integers \mathbb{Z}    
set of rational numbers \mathbb{Q}    
set of algebraic numbers \mathbb{A}    
set of real numbers \mathbb{R}    
set of complex numbers \mathbb{C}    
is member of 8712 (-
is not member of 8716  
contains as member 8715 -)
is proper subset of 8834 (C
is subset or equal to \subseteq 8838 (_
is proper superset of 8835 )C
is superset or equal to \supseteq 8839 )_
set union 8746 )U
set intersection 8745 (U



tidy -xml -i -m [file]


# Check XML file is well-formed
xmllint --noout $FILE

# Check XML file against local DTD file
xmllint --noout --dtdvalid ./local.dtd $FILE


adding quotes





% Add to the preamble:
% Load biblatex package
% Load bibTeX file
% Add a citation somewhere in your file
Blah blah \autocite{<key>}
% In the backmatter,

document classes


installing on Fedora

Add a draft watermark



\begin{tabular}{||c || c | c ||}
Foo? & Column A & Column B
Bar & Yes & No
Bax & No & Yes


Characters escaped with standard double Mustache syntax: & \ " < > '

| tag           | desc                                                        |
| {{name}}      | search a label in current context (HTML-escaped by default) |
| {{{name}}}    | unescaped variable                                          |
| {{#names}}    | begin section for names (1 or more)                         |
| {{^names}}    | begin section for names (false or empty array)              |
| {{/names}}    | end of a section                                            |
| {{! comment}} | comment                                                     |
| {{> partial}} | partial (rendered at runtime)                               |
| {{=<% %>=}}   | set delimiters to something else (here erb delimiters)      |

If value is callable (ie function or lambda), text block is passed to callable unrendered and unexpanded.



#thing {
  display: flex;
  justify-content: flex-start; /* horizontal alignment */
  align-items: flex-end; /* horizontal alignment */
  align-content: flex-end; /* determine spacing between the lines */
  order: 1; /* adjust the order */
  flex-wrap: wrap;
  flex-direction: row; /* direction of items - this flips justify-content and align-items */

  /* you can also use flex-flow instead of -wrap and -direction */
  flex-flow: row wrap;

.item {
  align-self: flex-end; /* move an item */

Media types

Mobile browsers

<link rel='stylesheet' media='all' href='base.css'
<link rel='stylesheet' media='screen and (max-width: 320px)' href='mobile.css'>

Use a custom font (CSS3)

@font-face {
      font-family: MyFont;
      src: url(myfont.ttf), url(myfont.eot);
selector { font-family: MyFont; }

Rounded corners (CSS3)

border: width style color;
border-radius: radius;

Box shadow (CSS 3)

box-shadow: xpos ypos blur spread color, ...;

Change an element’s background image (CSS 3)

selector {
  background-image: url(imagefile), ...;

Translucent elements (CSS 3)

selector {
  opacity: value;
  filter: alpha(opacity=value);

Center an element

Give it a width and set the margin

margin: 0 auto;
width: 939px;

Create custom borders (CSS 3)

border-image: source slice repeat;
border-width: width;



Defaults for getting feed link:

# Wordpress

# Blogger / blogspot
Atom 1.0:
RSS 2.0:


Syntax cheatsheet:

``fixed-space literal``
.. comment
# Convert rst to HTML
rst2html FILE ...

Liquid templating system

EPUB files

zip -X ../spm.epub mimetype css/style.css META-INF/container.xml book.ncx book.opf solplayaymar.xhtml

ASN.1 (Abstract Syntax Notation One)

Visually similar to Augmented Backus-Naur form, but is for data structures, not syntax.


Security Assertion Markup Language



Virtual Human Markup Language


<div class="mermaid">
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me