-
Notifications
You must be signed in to change notification settings - Fork 37
/
config.yaml
388 lines (307 loc) · 17.8 KB
/
config.yaml
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
# Relative to root directory
siteconfig:
deployFolder: 'deploy'
deployRoot: '../shinydemos-misc'
demosFolder: 'demos'
sourceFolder: 'source'
layoutsFolder: 'layouts'
# Allowed tags: css3, svg, multimedia, webgl, canvas, device, getusermedia
# We'll probably add a "belowDemos" field for copy to highlight dev.opera articles in the future.
# Right now there's no visual support for that, but copy has been written.
tags:
- tagName: css3
displayName: 'CSS 3'
tagline: 'CSS 3: CSS was co-invented by Opera’s CTO, Håkon Wium Lie, so that Web pages could have beautiful designs. It started life as a method of specifying fonts and colours, and now provides simple animations, entire layouts and is the underpinning of Responsive Web Design.'
- tagName: svg
displayName: 'SVG'
tagline: 'You want scriptable text and images, that can be manipulated using their own DOM, CSS and script, in all modern browsers? You want to produce graphics that look sharp at phone screen size or widescreen TV size? And you want to be able to make them responsive too? Of course you do — so meet SVG: Scalable Vector Graphics. But you’ll say “Shiny! Very Groovy”. And you’d be right.'
- tagName: audio-video
displayName: 'Audio & Video'
tagline: 'For years, the only way to add audio or video to web pages was with a plugin. Totally lame, daddy-o! These days, media can be embedded straight in the page with the HTML5 <code><audio></code> and <code><video></code> elements then decoded — and video manipulated — natively in the browser.'
- tagName: webgl
displayName: 'WebGL'
tagline: 'WebGL brings OpenGL, the language of games developers, to the Web. Providing 3D graphics and low-level access down to the graphics card, it’s hard to learn but incredibly powerful for graphics and visualizations. The gaming experience is coming to the Web, and plugins can just plug off.<br><br>In Opera 12 desktop, enable webGL by entering <a href="opera:config#UserPrefs|EnableWebGL">Enable WebGL in opera:config</a> by setting the value to 1, and <a href="opera:config#UserPrefs|EnableHardwareAcceleration">Enable Hardware Acceleration</a> similarly.'
- tagName: canvas
displayName: 'Canvas'
tagline: 'Who said images had to be static? Boring people, that’s who. Until <code><canvas></code> was available, you had to move things around the screen using DHTML — which stands for “Damned Hard To Make, Let’sCopyFromSomeWebsite”. Now you can push pixels straight to the screen with JavaScript. It’s not only for first person shooters: by copying from videos or <code>getUserMedia</code> we produce image and video modification tools. Right now, in all modern browsers.'
- tagName: touch
displayName: 'Touch'
tagline: 'Browsers are integrating with native device capabilities to make Web apps ever-closer to native apps. For example, touch input is natural and intuitive, and it’s revolutionised handheld devices. It’s time to get Peter Pointer and Ruby Ring off the mouse and onto the screen. Make sure your designs have big fat hit areas. And colours that shine through grease.'
- tagName: getusermedia
displayName: 'getUserMedia'
tagline: '<code>getUserMedia</code> is an API that began as part of HTML5 and was split off into the W3C WebRTC specification suite. It allows JavaScript access to a device’s cameras and microphones. Think in-browser video-conferencing! Think augmented reality! Think Shiny! Use Opera 12, Opera Mobile 12 or Chrome Canary to see the demos.'
- tagName: websockets
displayName: 'WebSocket'
tagline: 'The <code>WebSocket</code> API allows bi-directional, full-duplex communications channels over a single TCP connection. Also ponies.'
# List of all active demos with description
demos:
- slug: 3d-color-histogram
title: '3D Color Histogram'
legend: 'Visualize frame by frame color decomposition. Choose from different <a href="http://en.wikipedia.org/wiki/HSL_and_HSV">color schemes</a> below. Feel free to pause the video and to zoom/pan the histogram below.'
tags: [webgl, getusermedia]
support: [canvas, getusermedia, video, webgl, webworkers]
- slug: beach
title: 'Beach'
legend: 'Wake up to the sound of waves breaking on shore. Press the button to open up your CSS gradient blinds, and see your room transition from dark to light. The beach is deserted, so why not try {swimsuit: none} ?'
tags: [css3]
support: [csstransitions, cssgradients]
- slug: border-salon
title: 'Border Radius Salon'
legend: 'If you’ve tried the border-fun demo, you’ve made some borders so gorgeous they should be in a gallery. border-salon is a gallery of rounded-corner loveliness — all randomly generated for your delight!'
tags: [css3]
support: [borderradius, borderimage]
- slug: border-radius-fun
title: 'Tinkering with Border Radius'
legend: 'There’s no corner like a rounded corner, said Shakespeare. This demo allows you to try before you buy; use the HTML5 sliders to change your radii in real time, then save the code.'
tags: [css3]
support: [borderradius]
- slug: clock
title: 'A Time of Reflection'
legend: 'Tick, tock, tick, tock. Stare into your webcam. Marvel at the World’s best-looking clock face.'
tags: [css3, getusermedia, svg]
support: [getusermedia, inlinesvg]
- slug: color-picker
title: 'Real Life Color Picker'
legend: 'getUserMedia isn’t just about taking photos. By copying the data into canvas, you can perform image analysis. This demo contructs a pallete of the dominant colours in the image.'
tags: [css3, getusermedia]
support: [getusermedia]
- slug: cracked
title: 'Cracked'
legend: 'In case of emergency, break glass!'
tags: [getusermedia]
support: [getusermedia, canvas, video]
- slug: emberwind
title: 'Emberwind'
legend: 'Help free the city of Grendale from the evil CandleFinger and his gremlin hordes. The grand city of Grendale is under siege by mischievous hordes of gremlins. Emberwind is a 2D platform game, re-written to use Open Web technologies.'
tags: [webgl, canvas]
support: [webgl, canvas, audio]
- slug: explode
title: 'Explode'
legend: 'Blow up the video, and watch as the shards still continue to move. Based on Sean Christmann’s <a href="http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/">exploding HTML5 video experiment</a> with kind permission.'
tags: [getusermedia]
support: [getusermedia, canvas, video]
- slug: facekat
title: 'FaceKat'
legend: 'First there were punched cards for computer input, then the keyboard, the mouse, mouse gestures, the touchscreen — and now the head-wiggle! Avoid the obstacles by steering — with your head. It’s not quite <a href="http://dev.opera.com/articles/view/labs-introducing-opera-face-gestures/">face gestures</a> — yet.'
tags: [getusermedia]
support: [getusermedia, video]
- slug: flying-tweets
title: 'Flying Tweets'
legend: 'Watch automatically-updated tweets fly onto your screen and fly off again. Great as a screensaver replacement or on displays at events. When the page is not visible, animation stops to save precious CPU cycles. Based on <a href="http://visibletweets.com/">Visible Tweets</a> by <a href="https://twitter.com/themaninblue">@themaninblue</a>.'
tags: [css3]
support: [cssanimations, csstransforms, fullscreen, pagevisibility]
# - slug: fence
# title: 'Fence'
# legend: 'Resize the browser window (or click on “danger area”). Notice how you never see half square of chicken wire fence; the browser always ensures you see full squares only. If we say that CSS kicks ass, please don’t take offence.'
# tags: [css3, svg]
# support: [svg, inlinesvg, bgrepeatround]
# - slug: hungry-kittens
# title: 'Hungry Kittens'
# legend: 'Tired of shuffling round the City, looking for a hungry kitty? Load up on catfood - fill your pockets: you're a moggy magnet with your Web Sockets. <br> Relax! There's no need for strolling - farewell to COMET, goodbye long-polling. With Web Sockets they will come to you. Just be careful they don't eat you, too.'
# tags: [audio-video, websockets]
# support: [audio, websockets]
- slug: hixie-keyboard
title: 'Hixie Keyboard'
legend: 'Press any key to make Hixie, the HTML5 editor, speak. Originally an HTML5 homage to <a href="http://www2.b3ta.com/buffyswear/">Buffy’s Swearing Keyboard</a> (NSFW, due to bad language and Flash).'
tags: [audio-video, css3]
support: [audio, video]
- slug: inbox-attack
title: 'Inbox Attack'
legend: 'The 1980s meets 2012. Can you deal with the ever-quickening deluge of emails and keep inbox zero?'
tags: [svg]
support: [svg]
- slug: odin
title: 'ODIN'
legend: 'Opera is the only European browser, proudly based in Norway, where in the long dark winter, trolls roam free, mucking up your Git history by committing without useful commit messages. Every coder needs Odin to protect them, so here he is — through the magic of WebGL.'
tags: [webgl]
support: [webgl, audio]
- slug: paranoid
title: 'Paranoid'
legend: 'DIMENSION-CONTROLLING FORT “DOH” HAS NOW BEEN DEMOLISHED, AND TIME STARTED FLOWING REVERSELY. And when time flows reversely, retro games get remade with HTML5.'
tags: [canvas]
support: [canvas]
- slug: photo-booth
title: 'Photobooth in Your browser'
legend: 'Free online photo booth! Use getUserMedia for taking the shots, then email them to yourself. They are suitable for passports to travel anywhere on the World Wide Web.'
tags: [canvas, getusermedia]
support: [getusermedia, video, canvas]
- slug: picture-organizer
title: 'Picture Organiser'
legend: 'Organising pictures is a drag. Use your touch screen to rotate or drag the pictures around with your finger. This demo combines touch events and CSS transforms and multiple background images.'
tags: [css3, touch]
support: [touch]
- slug: qr-code
title: 'QRY {curie} QR code reader'
legend: 'Use a QR code as input for a website: getUserMedia grabs the image which is the processed using <a href="https://github.com/LazarSoft/jsqrcode">LazarSoft’s jsQRcode implementation</a>. Who knows? You might find yourself featured on <a href="http://picturesofpeoplescanningqrcodes.tumblr.com/">picturesofpeoplescanningqrcodes.tumblr.com</a>.'
tags: [getusermedia]
support: [getusermedia, video]
- slug: rock-piano
title: 'Rock Piano'
legend: 'This Shiny rock piano combines Touch events, classList, HTML5 audio, border-radius, box-shadow, and gradients. Soon, all your friends, neighbours and that cutie from Accounts will call you “HTM-Elton John”. You can also use your keyboard to play: WETYU for black keys and ASDFGHJ for the white.'
tags: [css3, audio-video]
support: [audio]
- slug: tatami
title: 'Tatami'
legend: 'A tatami is a type of mat used as a flooring material in traditional Japanese-style rooms. There are rules concerning auspicious layouts of tatami. In homes, the mats must not be laid in a grid pattern, and in any layout there is never a point where the corners of four mats touch.'
tags: [css3]
support: [csstransitions]
- slug: touch-tracker
title: 'Touch Tracker'
legend: 'Using the magic of multitouch, you can see what robots’ fingerprints would look like.'
tags: [canvas, touch]
support: [canvas, touch]
- slug: warholiser
title: 'Warholiser'
legend: 'Now you can make a Warhol picture with no need for skill or talent, in no time at all. Just like he did.'
tags: [canvas, getusermedia]
support: [canvas, getusermedia, video]
- slug: world-flights
title: 'World Flights'
legend: 'Visualize the major airline routes. Feel free to pan and zoom the Earth.'
tags: [webgl]
support: [canvas, webgl, webworkers]
- slug: hipster-dog
title: 'Hipster Dog'
legend: 'Was it not Wordsworth who said "Earth hath nothing to show more fair / than a hipster dog riding a penny-farthing and bumping into giant shoes"? Tragically, he died without ever seeing Opera 12 move out of beta. In her moving tribute to Wordsworth, Luz has recreated this most elegiac of English poems, using CSS Animations and HTML5 audio instead of metaphor and synecdoche. Music by the incomparable <a href="http://incompetech.com/m/c/royalty-free/index.html?keywords=pixel">Kevin MacLeod</a>'
tags: [css3, audio-video]
support: [csstransitions, cssanimations, audio]
# Supported features list. Based on custom Modernizr build
features:
- slug: applicationcache
title: 'App Cache'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html'
- slug: audio
title: 'HTML Audio'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#audio'
- slug: backgroundsize
title: 'CSS background-size'
link: 'http://www.w3.org/TR/css3-background/#the-background-size'
- slug: bgrepeatround
title: 'CSS background-repeat: round'
link: 'http://www.w3.org/TR/css3-background/#background-repeat'
- slug: bgrepeatspace
title: 'CSS background-repeat: space'
link: 'http://www.w3.org/TR/css3-background/#background-repeat'
- slug: bgrepeatspace
title: 'CSS background-repeat: space'
link: 'http://www.w3.org/TR/css3-background/#background-repeat'
- slug: borderimage
title: 'CSS border-image'
link: 'http://www.w3.org/TR/css3-background/#the-border-image'
- slug: borderradius
title: 'CSS border-radius'
link: 'http://www.w3.org/TR/css3-background/#the-border-radius'
- slug: boxshadow
title: 'CSS box-shadow'
link: 'http://www.w3.org/TR/css3-background/#box-shadow'
- slug: canvas
title: 'Canvas'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element'
- slug: canvastext
title: 'Canvas Text'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-text-to-the-canvas'
- slug: cssanimations
title: 'CSS Animations'
link: 'http://www.w3.org/TR/css3-animations/'
- slug: csscolumns
title: 'CSS Multi-column'
link: 'http://www.w3.org/TR/css3-multicol/'
- slug: cssgradients
title: 'CSS Gradients'
link: 'http://www.w3.org/TR/css3-images/#gradients'
- slug: csstransforms
title: 'CSS 2D Transforms'
link: 'http://www.w3.org/TR/css3-2d-transforms/'
- slug: csstransforms3d
title: 'CSS 3D Trnasforms'
link: 'http://www.w3.org/TR/css3-3d-transforms/'
- slug: csstransitions
title: 'CSS Transitions'
link: 'http://www.w3.org/TR/css3-transitions/'
- slug: draganddrop
title: 'HTML Drag and Drop'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd'
- slug: flexbox
title: 'CSS Flexbox'
link: 'http://www.w3.org/TR/css3-flexbox/'
- slug: fontface
title: 'CSS Web Fonts'
link: 'http://www.w3.org/TR/css3-webfonts/'
- slug: fullscreen
title: 'Fullscreen API'
link: 'http://www.w3.org/TR/fullscreen/'
- slug: generatedcontent
title: 'CSS Generated Content'
link: 'http://www.w3.org/TR/CSS21/generate.html'
- slug: geolocation
title: 'Geolocation API'
link: 'http://www.w3.org/TR/geolocation-API/'
- slug: getusermedia
title: 'WebRTC getUserMedia'
link: 'http://www.w3.org/TR/webrtc/'
- slug: hashchange
title: 'HTML hashChange event'
link: 'http://www.w3.org/TR/html5/history.html#event-hashchange'
- slug: history
title: 'HTML History and Location API'
link: 'http://www.w3.org/TR/html5/history.html'
- slug: hsla
title: 'CSS HSLA colors'
link: 'http://www.w3.org/TR/css3-color/#hsla-color'
- slug: indexeddb
title: 'Indexed Database API'
link: 'http://www.w3.org/TR/IndexedDB/'
- slug: inlinesvg
title: 'Inline SVG'
link: 'http://dev.w3.org/html5/spec/svg-0.html'
- slug: js
title: 'JavaScript'
link: 'http://ecma-international.org/ecma-262/5.1/'
- slug: localstorage
title: 'Web Storage localStorage'
link: 'http://www.w3.org/TR/webstorage/#the-localstorage-attribute'
- slug: multiplebgs
title: 'CSS Multiple Backgrounds'
link: 'http://www.w3.org/TR/css3-background/#layering'
- slug: opacity
title: 'CSS opacity'
link: 'http://www.w3.org/TR/css3-color/#transparency'
- slug: pagedcontent
title: 'CSS Generated Content for Paged Media'
link: 'http://dev.w3.org/csswg/css3-gcpm/'
- slug: pagevisibility
title: 'Page Visibility API'
link: 'http://www.w3.org/TR/page-visibility/'
- slug: postmessage
title: 'HTML postMessage'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#crossDocumentMessages'
- slug: rgba
title: 'CSS RGBA colors'
link: 'http://www.w3.org/TR/css3-color/#rgba-color'
- slug: sessionstorage
title: 'Web Storage sessionStorage'
link: 'http://www.w3.org/TR/webstorage/#the-sessionstorage-attribute'
- slug: smil
title: 'SVG SMIL animation'
link: 'http://www.w3.org/TR/SVG/animate.html'
- slug: svg
title: 'SVG'
link: 'http://www.w3.org/TR/SVG/'
- slug: textshadow
title: 'CSS text-shadow'
link: 'http://www.w3.org/TR/css3-text/#text-shadow'
- slug: touch
title: 'Touch Events'
link: 'http://www.w3.org/TR/touch-events/'
- slug: video
title: 'HTML Video'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#video'
- slug: webgl
title: 'WebGL'
link: 'https://www.khronos.org/registry/webgl/specs/1.0/'
- slug: websockets
title: 'WebSocket API'
link: 'http://www.w3.org/TR/websockets/'
- slug: webworkers
title: 'Web Workers'
link: 'http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html'