pwarocks / shinydemos Goto Github PK
View Code? Open in Web Editor NEWShiny Demos is a growing set of demos of the latest Open Web Standards, made by the Opera developer relations team.
Home Page: http://shinydemos.com
License: Other
Shiny Demos is a growing set of demos of the latest Open Web Standards, made by the Opera developer relations team.
Home Page: http://shinydemos.com
License: Other
Uncaught exception: TypeError: 'Modernizr.prefixed' is not a function
My fault.
For our build system to work, all demos have to be in an index.html. I tried embedding the inbox_attack.svg file directly in an html page, but I couldn't get it to render. I also tried putting the svg in an <object>
, but everything just looked messed up.
Could someone with more expertise here help out? There's a more or less empty index.html
in the inbox-attack folder so I can build the project.
ping @andreasbovens @tagawa
AFAICT it's not needed given the way the demos and tag pages are generated now:
<ifmodule mod_rewrite.c>
RewriteEngine on
RewriteCond %{DOCUMENT_ROOT}/$1 -f [OR]
RewriteCond %{DOCUMENT_ROOT}/$1 -d
RewriteRule (.*) - [S=2]
RewriteCond %{DOCUMENT_ROOT}/demos/$1 -f [OR]
RewriteCond %{DOCUMENT_ROOT}/demos/$1 -d
RewriteRule (.*) /demos/$1 [L]
RewriteRule (.*) /$1 [L]
</ifmodule>
Safe to remove?
The blurb for the Explode demo has an A element in it which isn't parsed, so should be removed.
@andreasbovens writes:
testing the photo booth demo on Samsung Note
I noticed that it's sort of zoomed in on initial load
it's because of the initial-scale=1
that it zooms in
you don't need that
We host videos at media.shinydemos.com, so that sets the origin-clean flag to false. We need to think of the best way to handle this for the fallback.
Time to microoptimize. Maybe use Typed Arrays for pixel manip.
@andreasbovens are they missing something here? Works in Chrome.
I'd add a hint to the painting in the right, for example like an arrow
(one of those like a square with a triangle facing right that appears 1/2
a second after the page is loaded to capture the user's attention and then
fades away). Just to make sure that people know there's more. I think this
should point people to the arrows and/or clicking on the painting.
A lot of the demos use classList
. Should we include a global polyfill at the template level? Just include a classList tag/feature test for the header? The polyfill I use at https://github.com/operasoftware/shinydemos/blob/master/demos/border-salon/scripts/bordersalon.js#L1-2 is small enough that it might be worth just polyfilling it rather than having it be a blocker.
miket at omg in ~/Opera/git/shinydemos on master
$ egrep -rl "classList" demos/
demos/beach/index.html
demos/border-radius-fun/scripts/js.js
demos/border-radius-fun/scripts/lib.js
demos/border-salon/scripts/borderbox.js
demos/border-salon/scripts/bordersalon.js
demos/css_image_transitions/index.html
demos/fence/scripts/script.js
demos/hixie-keyboard/scripts/script.js
demos/isometric-city/index.html
demos/planetarium/scripts/classlist.js
demos/rock-piano/scripts/script.js
demos/slideshows/mike2.html
demos/tatami/index.html
demos/travel-memories/scripts/js.js
demos/tweetmap/d3.min.js
Currently we have /demo/thumbnail.png
for every single demo folder. But it's just impossible to have the same for submodule demos like Odin. So it makes sense to have thumbs
folder in source folder with demo-slug.png
thumbnails which could be automatically copied to the demos' folders or stay in one folder — but it would require paths changes for tags pages.
This could also solve problem with optimal format for some thumbnails (PNG or JPG?)
It would be nicer to have a video (anything that we currently have on media.shinydemos.com) for a fallback to see the color-picker in action.
This can wait until after MWC.
…as it affects (at least) panel switcher.
button {
border-radius: 3px
}
We should gzip all non-binary content. The HTML5 boilerplate .htaccess file can be used for reference (and for copying other stuff):
https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess
"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!"
…so css3
text inside link should be uppercased and contain space:
<li class="css3"><a href="css3/">css3</a></li>
because displayName is CSS 3
tags:
- tagName: css3
displayName: "CSS 3"
After launch, let's create a "template" demo (unlinked from config.yml) that has the correct folder structure, DOM, links, etc. This will make it easier for contributions and also allow our demos to have a similar look and feel (well, the source anyways).
See http://pastie.org/private/eu6pr4irc3gaqlek1b08qa. No real reason for the <div>
, probably something jsdom is doing?
@tagawa, @andreasbovens any ideas?
Clean and nice code of my demo becomes a mess after compiler.
At very leas we should fix tabs and line endings make our source code work like good practice tutorial.
If in any case it's impossible, we should just strip all spaces, tabs and new lines.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17110734-4']);
_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>
Non-scoped styles affects panel badly.
Also we have three different titles on the page:
…to avoid this kind of output on multimedia page:
Hixie Keyboard
multimedia css3
Rock Piano
css3 multimedia
Reddit doesn't make much sense to me, as a reddit user: won't this encourage multiple duplicate submissions?
None of the other demos have any kind of social "share" badges, why this one?
On my phone, trying the demo with Chrome Android: "Uh oh, it appears your browser doesn't support this feature. Please try with a browser that has camera support."
It should point to Opera Mobile 12, not the labs builds.
I'd use http://www.google.com/webfonts/specimen/Lobster rather than hosting various Lobster webfonts ourselves.
@shwetank can you put the "credit" part somewhere in the comments of the source? HTML, JS, whatever--I think it's a little distracting, especially for MWC.
should be removed as they're not currently rendered as visible markup, not links
Quite a lot of the getusermedia demos don't work in chrome canary, since chrome changed their spec in chrome 20+ from:
navigator.webkitGetUserMedia('video', successfunction, errorfunction)
to:
navigator.webkitGetUserMedia({video : true}, successfunction, errorfunction)
which aligns with how everyone else is doing it.
In the facekat demo we used this workaround:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.getUserMedia) {
var videoSelector = {video : true};
if (window.navigator.appVersion.match(/Chrome/(.*?) /)) {
var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome/(\d+)./)[1], 10);
if (chromeVersion < 20) {
videoSelector = "video";
}
};
// set up stream
navigator.getUserMedia(videoSelector, function( stream ) {
// success
}, function() {
// error
});
}
@tagawa Do you think the cracked demo could benefit from some kind of header with instructions? Something up top that disappears after a second like "Don't touch the screen!"
I can do that if you think it's useful.
When a browser is used that does not support one of the required features, the panel will show:
"This demo works on [opera browsers] and [these browsers].
[opera browsers]: This snippet will be specified in config.yaml
per demo
[these browsers]: This will be a list of browsers OTHER THAN OPERA that support these features (by referencing all features required for each demo) from api.html5please.com (using noagent
option).
Could you please make drop down menus to close on tap outside it? http://people.opera.com/pepelsbey/experiments/shiny/ and http://people.opera.com/pepelsbey/experiments/shiny/demos/linen/
here's the script: http://people.opera.com/pepelsbey/experiments/shiny/scripts/script.js
the problem is that I can't handle ontouchstart on document without blue outline
well, I can do e.preventDefault(); — but it disable all touches
miket at omg in ~/tmp/shinydemos on master
$ node .
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: ENOENT, no such file or directory 'deploy/thumbs'
at Object.readdirSync (fs.js:398:18)
at Object.<anonymous> (/Users/miket/tmp/shinydemos/lib/filename.js:2:18)
at Module._compile (module.js:441:26)
at Object..js (module.js:459:10)
at Module.load (module.js:348:31)
at Function._load (module.js:308:12)
at Module.require (module.js:354:17)
at require (module.js:370:17)
at Object.<anonymous> (/Users/miket/tmp/shinydemos/compiler/index.js:9:15)
at Module._compile (module.js:441:26)
Not sure if this was intentional, but the main tech in these demos is getUserMedia or alternatively canvas.
http://www.google.com/webfonts#UsePlace:use/Collection:Maiden+Orange
This will allow us to remove the whole font folder, and make loading a bit snappier.
Should be just like https://github.com/operasoftware/shinydemos/tree/master/source
fonts/
images/
scripts/
styles/
Still gobbling whitespace, which breaks Hixie Keyboard.
@pepelsbey suggests we hard link to options.js in the markup and have the compiler just dump the config.yml-generated js to the file system.
This is the only reason that JSDOM is touching our files, so it should probably fix it for us.
Would be cooler if the demo falls back to one of the videos we have on media.shinydemos.com (can keep the message somewhere)--especially since it's based on a
(def. a post-MWC thing)
I've played around with Patrick's beatbox demo and replaced the beats with piano notes, and this performs very well without reverb. Check http://people.opera.com/andreasb/exp/rock/beatpiano.html on tablet.
So, my suggestion would be to do the following:
There should be four files in http://media.shinydemos.com/hipster-dog/
folder:
polka.mp3
polka.ogg
effect.mp3
effect.ogg
All paths for the demo are already fixed:
<audio loop id="music">
<source src="http://media.shinydemos.com/hipster-dog/polka.mp3" type="audio/mpeg">
<source src="http://media.shinydemos.com/hipster-dog/polka.ogg" type="audio/ogg">
</audio>
<audio id="effect">
<source src="http://media.shinydemos.com/hipster-dog/effect.mp3" type="audio/mpeg">
<source src="http://media.shinydemos.com/hipster-dog/effect.ogg" type="audio/ogg">
</audio>
Vadim pointed out it's .ttf only... but I thought Chrome supported .ttf? Problem with the font file?
@font-face {
font-family: "Adore64";
src: url(../Adore64.ttf)
}
…because a { color: #f00; }
and // not implemented yet?
in CSS are kind of destructive to the panel, especially the first one.
"Based on Sean Christmann’s exploding HTML5 video experiment with kind permission." appears twice in the demo. In the body and in the panel.
I think I prefer the attribution in the panel as it's less "in your face."
http://miketaylr.com/post/9c294636.png
@andreasbovens Is this something they're missing and we should add to the feature detection?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.