forked from samdutton/simpl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (114 loc) · 7.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Sam Dutton, HTML5, JavaScript" />
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<base target="_blank">
<title>simpl.info</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/png" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/touch-icon-ipad.png" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="container">
<h1>simpl.info</h1>
<p>This site aims to provide the simplest possible examples of HTML, CSS and JavaScript.</p>
<p>I also maintain a <a href="https://docs.google.com/document/d/1Uy7zybjFecFWmW2xTbYKN8t-JhG0_hlJzW6xJjkUA-I" title="HTML, CSS and JavaScript resources">list of resources</a> for tutorials, documentation and reference material.</p>
<p>Submit bug reports, requests and comments at <a href="https://github.com/samdutton/simpl" title="simpl.info github repo">github.com/samdutton/simpl</a>.</p>
<p class="borderBelow">Thanks!</p>
<div id="links">
<a href="xhr" title="Ajax (aka XMLHttpRequest) example">Ajax (aka XMLHttpRequest)</a>
<a href="appcache" title="Application Cache">AppCache</a>
<a href="array" title="Array methods">Array methods: some, every, filter, forEach, map</a>
<a href="audio" title="Audio element"><audio></a>
<a href="audiodata" title="Audio Data API">Audio Data</a>
<a href="battery" title="Battery API">Battery API</a>
<a href="canplaytype" title="canPlayType()">canPlayType()</a>
<a href="canvas" title="Canvas element example"><canvas></a>
<a href="cssfilters" title="CSS filters">CSS filters</a>
<a href="flexboxcenter" title="CSS flexbox center">CSS flexbox: center</a>
<a href="flexboxexpand" title="CSS flexbox expand-to-fit example">CSS flexbox: expand to fit</a>
<a href="cssnegativeselector" title="CSS negative selector example">CSS negative selector</a>
<!-- <a href="cssoverflowscrolling" title="CSS overflow-scrolling example">CSS overflow-scrolling</a>
-->
<a href="csstextindent" title="CSS text-indent example">CSS text-indent</a>
<a href="csstransition" title="CSS transition example">CSS transition</a>
<a href="rtcdatachannel" title="RTCDataChannel example">Data channels</a>
<a href="datalist" title="Input datalist element example"><datalist></a>
<a href="details" title="Details/summary element example"><details> and <summary></a>
<a href="devicemotion" title="Device Motion example">Device Motion</a>
<a href="deviceorientation" title="Device Orientation example">Device Orientation</a>
<a href="eventsource" title="EventSource (Server-Sent Events) example">EventSource (aka Server-Sent Events)</a>
<a href="localstorage" title="Fieldset example">Fieldset (localStorage example)</a>
<a href="filesystem" title="FileSystem example">FileSystem</a>
<a href="filesystem/blob" title="FileSystem example using the Blob API">FileSystem using Blob</a>
<a href="fullscreen" title="Fullscren">Fullscreen</a>
<a href="geolocation" title="Geolocation example">Geolocation</a>
<a href="getusermedia" title="getUserMedia() example">getUserMedia</a>
<a href="https://simpl.info/getusermedia/constraints" title="getUserMedia() example with constraints">getUserMedia with constraints</a>
<a href="https://simpl.info/getusermedia/sources" title="getUserMedia() example using MediaStreamTrack.getSources()">getUserMedia: select camera and microphone</a>
<a href="screencapture" title="Screen capture example">getUserMedia: screen capture</a>
<a href="history" title="History method example">History pushState() and popState()</a>
<a href="softhyphen" title="Soft hyphen (&shy;) example">Hyphenation (soft hyphen)</a>
<a href="iframe" title="iframe element example"><iframe></a>
<a href="bigimage" title="Example of an image with large file size">Image: a big one (20MB)</a>
<a href="inputtypes" title="Examples of input elements with different types">Input types: email, tel, url, date, time, colour</a>
<!-- <a href="indexeddb" title="IndexedDB example">IndexedDB</a> -->
<a href="localstorage" title="localStorage">localStorage</a>
<a href="mediacapture" title="Media Capture API">Media Capture (using <input>)</a>
<a href="https://simpl.info/getusermedia/sources" title="getUserMedia() example using MediaStreamTrack.getSources()">MediaStreamTrack.getSources()</a>
<a href="mediarecorder" title="MediaStream Recording API">MediaStream Recording API</a>
<a href="mutationobserver" title="MutationObserver example">MutationObserver</a>
<a href="observe" title="Object.observe() example">Object.observe()</a>
<a href="navigationtiming" title="Navigation Timing demo">Navigation Timing (window.performance)</a>
<a href="useragent" title="navigator.userAgent">navigator.userAgent</a>
<a href="pagevisibility" title="Page Visibility API example">Page Visibility API</a>
<a href="postmessage" title="postMessage() example">postMessage()</a>
<a href="queryselector" title="querySelector() and querySelectorAll() examples">querySelector() and querySelectorAll()</a>
<a href="resourcetiming" title="Resource Timing demo">Resource Timing</a>
<a href="rtcdatachannel" title="RTCDataChannel">RTCDataChannel (WebRTC)</a>
<a href="rtcpeerconnection" title="RTCPeerConnection">RTCPeerConnection (WebRTC)</a>
<a href="screencapture" title="Screen capture example">Screen capture (getUserMedia + RTCPeerConnection)</a>
<a href="eventsource" title="EventSource (Server-Sent Events) example">Server-Sent Events (aka EventSource)</a>
<a href="sessionstorage" title="sessionStorage example">sessionStorage</a>
<a href="https://simpl.info/stt" title="Web Speech API: speech to text">speech recognition</a>
<a href="tts" title="Web Speech API: text to speech">speech synthesis</a>
<a href="svg" title="SVG example">SVG</a>
<a href="track" title="Track element"><track> with <video></a>
<a href="track/audio" title="Track element"><track> with <audio></a>
<a href="useragent" title="User agent example">user agent</a>
<a href="video" title="Video element"><video> (with autoplay)</a>
<a href="videoalpha" title="Video with alpha transparency"><video> (with alpha transparency)</a>
<a href="video/scripted.html" title="Video with scripted playback"><video> (with scripted playback)</a>
<a href="longvideo" title="Long video example (~380MB)">long video (~380MB)</a>
<a href="videomedia" title="Video media query attribute">video with src media query</a>
<a href="videooverlay" title="Long video example (~380MB)">video with <div> overlay</a>
<a href="webaudio" title="Web Audio">Web Audio</a>
<a href="webfonts" title="Web fonts">Web Fonts</a>
<a href="webgl" title="Fullscren">WebGL</a>
<a href="webp" title="WebP">WebP</a>
<a href="webrtc" title="WebRTC home">WebRTC (getUserMedia, RTCPeerConnection, RTCDataChannel)</a>
<a href="screencapture" title="Screencapture example">getUserMedia screen capture</a>
<a href="https://simpl.info/stt" title="Web Speech API: speech to text">Web Speech: speech recognition</a>
<a href="tts" title="Web Speech API: text to speech">Web Speech: speech synthesis</a>
<a href="websql" title="WebSQL">WebSQL</a>
<a href="webworkers" title="Web Workers example">Web Workers</a>
<a href="xhr" title="XMLHttpRequest (aka Ajax) example">XMLHttpRequest (aka Ajax)</a>
</div>
</div> <!-- container -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33848682-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>