Normalize THICSS! PLUS (Inline HTML5 Inline ConverCSSion by Premailer for NoCSSterous!)

Header Group Heading 1

Header Group Heading 2

• First Page
• Second Page
• Third Page
• Last Page

Section Heading 1

#boxsize button, #boxsize input, #boxsize select, #boxsize textarea { width: 200px; padding: 5px; border: 1px solid #333; }

Grouped Heading 1

Grouped Heading 2

• navigation item #1
• navigation item #2
• navigation item #3

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Section Heading 1

Article Heading 2

Address: somewhere, world

Minification v Obfuscation

March 6, 2006 at 7:08 pm by Douglas Crockford | In Development | 61 Comments JavaScript is a load-and-go language. Programs are delivered to the execution site as text (not as executable or semi-compiled class files) where it is compiled and executed. JavaScript works well with the Web, which is a text delivery system, because it is delivered as text.
There are two downsides of textual delivery of programs. The first is code size. The source can contain material (such as whitespace and comments) which aids in the human interpretability of the program, but which is not needed for its execution. Transmitting superfluous material can significantly delay the download process, which keeps people waiting. If we could first strip out the whitespace and comments, our pages would load faster.
The second downside is code privacy. There might be a concern that someone could read the program and learn our techniques, and worse, compromise our security by learning the secrets that are embedded in the code.
There are two classes of tools which deal with these problems: minifiers and obfuscators.
A minifier removes the comments and unnecessary whitespace from a program. Depending on how the program is written, this can reduce the size by about half. An obfuscator also minifies, but it will also make modifications to the program, changing the names of variables, functions, and members, making the program much harder to understand, and further reducing its size in the bargain. Some obfuscators are quite aggressive in their transformations. Some require special annotations in the source program to indicate what changes might or might not be safe.
Any transformation carries the risk of introducing a bug. Even if the obfuscator didn’t cause the bug, the fact that it might have is a distraction which will slow down the debugging process. The modifications to the program also add significantly to the difficulty of debugging.
After minifying or obfuscating, you should GZIP. GZIP can further reduce the size of the program. GZIP is so effective that the difference in the efficiency between minification and obfuscation becomes insignificant. So I prefer minification with GZIP because I don’t have time for programming tools that can inject bugs into good programs.

	Full Source	Minified
Uncompressed	78151	38051
Compressed with gzip	15207	10799

The table shows the results of using a minifer and gzip on a 78K source file. The result of using the two techniques together produced a result that is only 14% the size of the original source file.
Then finally, there is that question of code privacy. This is a lost cause. There is no transformation that will keep a determined hacker from understanding your program. This turns out to be true for all programs in all languages, it is just more obviously true with JavaScript because it is delivered in source form. The privacy benefit provided by obfuscation is an illusion. If you don’t want people to see your programs, unplug your server.

Text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The
del element
example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The var element example
The u element example

Embedded content

audio

img

svg

video

Grouping content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

<html> <head> </head> <body> <div class="main"> <div> </body> </html>

blockquote

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.

ordered list

1. list item 1
2. list item 1
   1. list item 2
   2. list item 2
      1. list item 3
      2. list item 3
   3. list item 2
   4. list item 2
3. list item 1
4. list item 1

unordered list

• list item 1
• list item 1
  • list item 2
  • list item 2
    • list item 3
    • list item 3
  • list item 2
  • list item 2
• list item 1
• list item 1

description list

Description name

Description value

Description name

Description value

Description value

Description name

Description name

Description value

figure

Figcaption content

Tabular data

Jimi Hendrix - albums

Album	Year	Price
Album	Year	Price
Are You Experienced	1967	$10.00
Axis: Bold as Love	1967	$12.00
Electric Ladyland	1968	$10.00
Band of Gypsys	1970	$12.00

Forms

Inputs as descendents of labels (form legend)

Text input
Email input
Search input
Tel input
URL input
Password input
File input
Radio input
Checkbox input
Radio input
Checkbox input
Select field Option 01Option 02
Textarea Textarea text

Inputs as siblings of labels

Color input
Number input
Range input
Date input
Month input
Week input
Datetime input
Datetime-local input
Radio input
Checkbox input
Radio input
Checkbox input
Select field Option 01Option 02
Textarea Textarea text

Clickable inputs and buttons

box-sizing tests

Option 01Option 02

Textarea text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

Section Heading 2

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

Section Heading 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Article Heading 4

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

Article Heading 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Article Heading 6

Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.

1. Sed ut perspiciatis unde
2. omnis iste natus error
3. sit voluptatem accusantium

• doloremque laudantium
• totam rem aperiam eaque
• ipsa quae ab illo

Definition list term #1

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Definition list term #2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• navigation item #1
• navigation item #2
• navigation item #3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Confucius, The Confucian Cite, (551 BC - 479 BC)

Jimi Hendrix - albums

Album	Year	Price
Album	Year	Price
Are You Experienced	1967	$10.00
Axis: Bold as Love	1967	$12.00
Electric Ladyland	1968	$10.00
Band of Gypsys	1970	$12.00

Lorem ipsum dolor a element sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur abbr element adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor b element sit amet, consectetur i element adipisicing elit, sed s element do eiusmod tempor u element incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor code element sit amet, consectetur kbd element adipisicing elit, sed samp element do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur strong element adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor cite element sit amet, consectetur dfn element adipisicing elit, sed em element do eiusmod tempor q element incididunt ut labore var element et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur
del element
adipisicing elit, sed strike element do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur
ins element
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed _{sub element} do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore ^{sup element} et dolore magna aliqua.