leaverou / inspire.js Goto Github PK

I am using CSSS with Ubuntu, Google Chrome.
Reloading CSSS presentation file is slow.

I tested in 2 machines, and the presentation file is local.
Is this environment specific issue, or because of heavy Javascript process?
Do you think this problem can be decreased?

I've got Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.22) Gecko/20110902 Firefox/3.6.22 and when I open index.html it freezes there:
http://img163.imageshack.us/img163/7929/progressfk.png

If I open it while firebug is open then it starts normally.
No errors are reported in the console (in either case).

Don't know why this happens.

The portfolio at http://lea.verou.me/projects/ links to http://leaverou.github.com/CSSS/ which is a 404; only http://leaverou.github.com/csss/ (lowercase) works.

I want to make nested "delayed" class.

`

• hogehoge
  
  
  
  • foofoo
  
  

When "foo" is shown,
"hoge" is added "displayed" class, and "foo" is added "current" class.

`

• hoge
  • foo

But, class "delayed", "displayed" and "current" use "opacity" property.
"opacity" property influence child node.
Then

`

• hoge
  • foo

result

• hoge
  • foo

It does NOT work on Chorome, Opera and Safari.
"foo" is shown by "opacity 0.3".

But, I designate "color" property by "rgba".

`

• hoge
  • foo

result

• hoge
  • foo

And, I use "visibility" property in order to appear characters.
So I change "slideshow.css".

.delayed,
.delayed-children > * {
visibility: hidden;
color: rgba(0,0,0,0);

-webkit-transition:1s color;

/*-moz-transition:.7s opacity;
-o-transition:.7s opacity;
transition:.7s opacity;
*/

}

.delayed.current,
.delayed-children > .current,
.delayed.displayed.non-dismissable,
.delayed-children > .displayed.non-dismissable {
visibility: visible;
color: rgba(255,255,255,1);
}

.delayed.displayed,
.delayed-children > .displayed {
visibility: visible;
color: rgba(255,255,255,0.3);
}

It works on Safari.

https://github.com/pepelsbey/shower

would be nice to see a slide comparing it with csss :-)

I'm a little bit confused about how to do this.

One of the biggest issues of CSSS currently is the complete lack of support for mobile devices. I'm not really that experienced with mobile, so I'd welcome a pull request about this.
Requirements would be:
a) It's small (so no huge libraries please like jQuery touch or whatever)
b) It works on at least Safari iPhone and Opera Mobile on touch-enabled devices.

Thanks in advance to anyone that decides to work on this.

• commit cf3799c (HEAD, refs/bisect/bad)
  | Author: Lea Verou [email protected]
  | Date: Thu Oct 20 02:49:56 2011
  |
  | -prefix-free integration, dropped older css-prefix.js

This commit added a regression since you are referencing prefixfree outside of the scope of the project, which assumes that users of CSSS will have prefixfree installed at the exact same location as you have locally.

Prefixfree should be should be added as a submodule to fix this.

When using class="delayed" on items they don't seem to show up on the projector when they do on the presenter screen.

Seems to be related to the prism plugin

I've tried the demo slideshow in Chrome 22, Firefox 13.0, Safari 5.1.7 and Opera 12 on Windows 7 Pro.

With all browsers, when I try the Shift+H shortcut all I see is the bottom-right corner of the first slide, which I can click to go to that slide, but no others. The "By Lea Verou" text is also partially visible in the same place as on the first slide, and clicking it will also go to the first slide.

As seen here: http://i.imgur.com/8esYN.jpg

When you switch a slide, part of it is displayed clipped in the top left corner of the page.

See e.g. my slides: http://l10n.mozilla.org/~marcoos/slides/2011/meetjs-krakow/index-en.html

This also happens on http://leaverou.me/csss/sample-slideshow.html#navigation but is almost unnoticable thanks to the background image and colors used in those slides. Set background to #666 instead of the image, to see it there, too.

E.g. click Open in CodePen in this slide: https://designftw.mit.edu/lectures/html/#no-v-app

The internet / your CDN is going to go down exactly five minutes before my talk begins. Discuss.

The slideshow JS maps all arrow keys and PageUp / PageDown keys to the next/previous slide behavior. This means that if a slide is created that is too long to display in the viewport, there is no keyboard-only way to scroll it.

As much as a well-designed slide wouldn't have scroll bars, not everyone is design focused (came across this problem trying to read a slideshow in which each slide was a full page of text). And even if the slides are sized correctly for display on a projector, they might be distributed to people who just want to read the text on their smaller-screen device.

Background: I want to add a WebGL canvas to one of my slides, and cue different phases of an animation when I use the arrow keys to proceed to the next slide. Clearly it's not desirable to use separate slides for this, but to do something similar to what delayed-children does.

Looking over the source I've found a data-steps attribute that I can use to assign a number of steps to a slide, but I'm not sure how its supposed to be used. I see that it must be set to an integer, and doing so creates a number of <span> elements that progressively have displayed added to their class, but I don't understand what these elements are supposed to do, and there doesn't seem to be anything demonstrating the feature in the example slide deck.

Furthermore, I was hoping to hook into the slidechange event to trigger different phases of the animation, but this only fires for a complete slide change, not for progressive changes on a slide with delayed-children or data-steps.

I suppose I could use DOM Mutation Observers to watch these changes to these dummy elements, but this seems unwieldy as I'd need to find the child index of each to know which one was just displayed.

At this point I thought I'd ask the community what I might be missing about data-steps, and if there's an opportunity for a feature to fire an event as each of these steps are progressed through, which I'd be happy to submit a PR for. Thoughts?

Hi @LeaVerou,

I hope you are doing well. Sorry for this issue, but I was stumbled by the broken link to CSSS while looking through projects list on your blog. The typo is hidden in capital letters. You should replace CSSS -> csss. Last but not least, it will be better to replace http -> https also.

Best regards,
Vitalii

https://inspirejs.org/#media-plugin

This how it looks in Chrome/Edge (Win):

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

@LeaVerou. Thanks for this awesome repo. I'm going to use it for my next presentation :)

Just wondering, will you be interested to add sass + browsersync into CSSS to help make development quicker? I can do a pull request if you're open to it.

Seems like there is now way to navigate between slides on mobile devices.

Sometimes displays/projectors/whatnot used to give presentations are in very different sizes scaling images and content could be useful.

Example code from some projects I have used.

// when resizing
var denominator = Math.max(
        body.clientWidth / window.innerWidth,
        body.clientHeight / window.innerHeight
);

var transform =  'scale(' + (1 / denominator) + ')';

// scale body  individual slides scale at the same time
// if background is not supposed to scale set it to html
body.style.WebkitTransform = transform;
body.style.MozTransform = transform;
body.style.msTransform = transform;
body.style.OTransform = transform;
body.style.transform = transform;

Navigate forward, about half way, go back, then go forward, the numbers get confused.

CSSS keyboard shortcuts conflict with firefox defaults and contol-shift is not an escape option. Example: control h opens the history sidebar, and control-shift h opens the history sidebar in its own window.

I think a better approach would be to delegate the choice of the modifier to the browser. Just issue some hidden navigation elements (anchors?) with the appropriate accesskey attribute. It is suitable only for keystrokes that produce printable characters but I think it is more straightforward and extensible. And hopefully every decent browser supports it.

In firefox the default modifier for web content shortcuts is alt-shit (probably command-shift on mac).

Also I had various problems with snippet editing but I am unable to reproduce them now. Either they were automagically fixed or I was doing something wrong.