pwarocks / shinydemos Goto Github PK

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?

Just looks like this:

@tagawa, @andreasbovens any ideas?

Clean and nice code of my demo becomes a mess after compiler.

• All tabs are replaces with two spaces
• Half of line endings are removed
• Indentation levels are not respected

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.

Non-scoped styles affects panel badly.

Also we have three different titles on the page:

• URL border-radius-fun
• Panel title Tinkering with Border Radius
• Page title: Border-Radius-O-Matic

…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?

Would make stuff like

less ugly. What do you think, @pepelsbey, possible?

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
});
}

(ignore the fallback message--the layout problems are the same on my galaxy tab in OM12, just screen grabbing from the emulator).

This is what I see:

Some kind of overlapping containers? I don't really understand why it's so different from the desktop version, but I haven't looked at the code.

@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

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:

• remove the JS logic for looping etc, and just stick to a simple "on press, I should hear a sound for a while" idea like in Patrick's demo. This can be achieved with very simple markup and that's good enough for MWC.
• fade out and possible shorten the music notes. You could also re-record them from Garageband or so. Also play with quality levels so as to get small file sizes.
  (- store the notes offline with appcache.)

Doesn't really matter much when looking at the homepage in a desktop-ish browser.

When mobile-ish, it looks like .

Do we care if it's not alphabetized?

When you make the window tiny, so presumably on mobile too:

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)
}

Warholiser isn't working... just throwing SecurityErrors every 100ms.

@shwetank can you look into this?

f18301b is the first attempt to get this working--we have media.shinydemos.com symlinked to shinydemos.com/media.

cc @nimbupani

Just built the site and get this bad boy:

.sd-support::before {content: "•";}

…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?