forked from samdutton/simpl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (120 loc) · 8.95 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
130
131
132
133
134
135
136
137
<!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.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<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>
<a href="https://twitter.com/sw12" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @sw12</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<p>This site aims to provide simplest possible examples of HTML, CSS and JavaScript.</p>
<p>There are shortcuts for many of these pages (see <a href="shortcuts" title="Full list of redirect URL shortcuts">full list</a>). For example, <a href="../video" title="Video element demo">simpl.info/v</a> redirects to <a href="../video" title="Video element demo">simpl.info/video</a>.</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="https://simpl.info/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="mediafragments" title="Media Fragments API">Media Fragments</a>
<a href="mse" title="Media Source Extensions example">Media Source Extensions (MSE)</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="notification" title="Notification API example">Notification</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="vibrate" title="navigator.vibrate() example">Vibrate</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" 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>