othree @ HappyDesigner Meetup 4

Ian HicksonWe have to write big test suites and that’s going to take a long time. That’s what the last 10 years of the timetable are about.
<!DOCTYPE HTML>
<meta charset="UTF-8"/>
text/htmlapplication/xhtml+xml
application/xml<img src="" alt="" ><img src="" alt="" /><input readonly value=1 ><img src=blah.png alt ><input readonly="" value="1" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<h1>I'm valid !</h1>
<!DOCTYPE HTML>
<h1>I'm valid !</h1>
<table>
<tr>
<td colspan="2">A Big Title</td>
</tr>
<tr>
<td>Navigator</td>
<td rowspan="2">This is Sidebar</td>
</tr>
<tr>
<td>Main Content</td>
</tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</table>
<table>
<tr>
<td>A Big Title</td>
</tr>
<tr>
<td>Navigator</td>
</tr>
<tr>
<td>Main Content</td>
</tr>
<tr>
<td>Links, RSS, Copyright</td>
</tr>
<tr>
<td>Footer</td>
</tr>
</table>
<div id="header">A Big Title</div>
<div id="navigator">Navigator</div>
<div id="content">Main Content</div>
<div id="sidebar">Links, RSS, Copyright</div>
<div id="footer">Footer</div>
#navigator { float: left; width: 68%; }
#contet { clear: left; float: left; width: 68%; }
#sidebar { float: right; width: 30%; }
#footer { clear: both; }
<div id="header">a big title</div>
<div id="navigator">navigator</div>
<div id="content">main content</div>
<div id="sub-content">links, rss, copyright</div>
<div id="something-else">footer</div>
<header>A Big Title</header>
<nav>Navigator</nav>
<article>Kero</article>
<article>Giro</article>
<aside>Links, RSS, Copyright</aside>
<footer>Something else</footer>
<item>
<title>nginx on windows</title>
<description><p>這兩天想說在windows上裝個 ......</description>
<link>http://feeds.feedburner.com/~r/othree/~3/441844548/</link>
<category>software</category>
<pubDate>2008-11-04 15:45</pubDate>
</item>
<div class="hfeed"> <div class="hentry">
<h2 class="entry-title"><a href="http://feeds.feedburner.com/~r/othree/~3/441844548/" rel="bookmark">nginx on windows</a></h2>
<div class="entry-content">
<p>這兩天想說在windows上裝個 ......</p>
</div>
<dl>
<dt>pubDate</dt>
<dd><abbr title="2008-11-04 15:45">2008-11-04 15:45</abbr></dd>
<dt>Category</dt>
<dd><a href="http://blog.othree.net/log/software/" rel="tag">software</a></dd>
<dt>Author</dt> <dd class="author vcard">othree</dd>
</dl>
</div> </div>
<article>
<header>
<h2><a href="http://feeds.feedburner.com/~r/othree/~3/441844548/">nginx on windows</a></h2>
<dl>
<dt>pubDate</dt>
<dd><time datetime="2008-11-04 15:45">2008-11-04 15:45</time></dd>
<dt>Category</dt> <dd>software</dd>
<dt>Author</dt> <dd>othree</dd>
</dl>
</header>
<p>這兩天想說在windows上裝個 ......</p>
</article>
<h1>This is a top level heading</h1>
<p>....</p>
<p>....</p>
<h2>This is a second-level heading</h2>
<p>....</p>
<p>....</p>
<h2>This is another second-level heading</h2>
<p>....</p>
<h3>This is a third-level heading</h3>
<p>....</p>
<h>This is a top level heading</h>
<p>....</p>
<section>
<p>....</p>
<h>This is a second-level heading</h>
<p>....</p>
</section>
<section>
<p>....</p>
<h>This is another second-level heading</h>
<p>....</p>
<section>
<h>This is a third-level heading</h>
<p>....</p>
</section>
</section>
<h1>This is a top level heading</h1>
<p>....</p>
<section>
<p>....</p>
<h2>This is a second-level heading</h2>
<p>....</p>
</section>
<section>
<p>....</p>
<h2>This is another second-level heading</h2>
<p>....</p>
<section>
<h3>This is a third-level heading</h3>
<p>....</p>
</section>
</section>
<h1>This is a top level heading</h1>
<p>....</p>
<p>....</p>
<h2>This is a second-level heading</h2>
<p>....</p>
<p>....</p>
<h2>This is another second-level heading</h2>
<p>....</p>
<h3>This is a third-level heading</h3>
<p>....</p>
<dialog>
<dt>陌生人</dt><dd>哈囉</dd>
<dt>藍藍路</dt><dd>請問你是?</dd>
<dt>陌生人</dt><dd>就是之前那個</dd>
<dt>藍藍路</dt><dd>之前那個??</dd>
<dt>陌生人</dt><dd>您似乎忘記啦..</dd>
<dt>藍藍路</dt><dd>就是忘了才用問的</dd>
<dt>陌生人</dt><dd>我是跟你問虛擬主機的人阿..</dd>
<dt>藍藍路</dt><dd>很多人問我</dd>
<dt>陌生人</dt><dd>就是其中一個阿..</dd>
</dialog>
<blockquote cite="http://blogs.techrepublic.com.com/programming-and-development/?p=718">
<p>We have to write big <mark>test suites</mark>
and that’s going to take a long time. That's what the <mark>
last 10 years</mark> of the timetable are about.</p>
</blockquote>
<cite>Ian Hickson</cite>
<meter>75%</meter>
<meter>750‰</meter>
<meter>3/4</meter>
<meter min="0" max="20" value="12">12cm</meter>
<time datetime="2006-09-23">a Saturday</time>
<time datetime="2006-09-24 05:00 -7">5am, next morning</time>
<time>08:00</time>
山の端 月は滿ち
息づくあなたの森
夏草浴びて眠る
愛おしい 橫顏
おぼろな この星
大地に 銀の淚
繭たる蛹たちは
七たび身をかえる
<embed src="/support/flash/ts/documents/myflashmovie.swf"
quality="high" bgcolor="#ffffff" width="550" height="400"
name="mymoviename" align=""
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="550" height="400" id="mymoviename">
<param name="movie" value="myflashmovie.swf">
<param name="quality" value=high>
<param name="bgcolor" value=#ffffff>
</object>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="550" height="400" id="mymoviename">
<param name=movie value="myflashmovie.swf">
<param name=quality value="high">
<param name=bgcolor value="#ffffff">
<embed src="/support/flash/ts/documents/myflashmovie.swf"
quality="high" bgcolor="#ffffff" width="550" height="400"
name="mymoviename" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
<video src="42.ogg">替代內容</video>
<audio src="42.ogg">替代內容</audio>
play(), pause() ...etc
<video src="42.ogg">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="550" height="400" id="mymoviename">
<param name=movie value="myflashmovie.swf">
<param name=quality value="high">
<param name=bgcolor value="#ffffff">
<embed src="/support/flash/ts/documents/myflashmovie.swf"
quality="high" bgcolor="#ffffff" width="550" height="400"
name="mymoviename" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
替代內容
</embed>
</object>
</video>
<input name="a" type="number" step="any" value="0"> *
<input name="b" type="number" step="any" value="0"> =
<output name="result" onforminput="value = a.value * b.value">
0</output>
ondragstart, ondrop, ondragenter, ondragover ...etc
pushState()
onpopstate
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
sessionStorage.removeItem(key);
本投影片換頁了幾次:
var tags = ['header', 'section', 'footer', 'figure', 'dialog', 'article'];
for (var i = 0; i < tags.length; i++ ) {
document.createElement(tags[i]);
}