Skip to content

Instantly share code, notes, and snippets.

@bjesuiter
Last active August 10, 2019 14:23
Show Gist options
  • Save bjesuiter/9c3b2c946e053afdfca3754b123c985f to your computer and use it in GitHub Desktop.
Save bjesuiter/9c3b2c946e053afdfca3754b123c985f to your computer and use it in GitHub Desktop.
DeckDeckGo Bugs / Improvements

DeckDeckGo Bugs / Improvements

Improvements

Show Slides in Presenter Mode

The presenter mode does not show the slide contents of the current slide. This is very unfortunate, since it requires looking at the beamer when presenting, especially when no notes are attached to a specific slide.

Allow 'reveal' effect for all child elements, not only li, p and img

Maybe you need some kind of marker on the elements, which should 'reveal' which have to be added by the slide developer, like a class 'reveal'. Then you could query all elements with class 'reveal' from the 'content' slot and change their properties.

Or we, the users, have to encapsulate all things, which should be revealable with an extra component or attribute. (I'm thinking, that the way angular directives work would be nice, but I think, stencil can't to these). You could allow p, li and img to be revealed per default and all other elements need an extra tag for that.

Add a deckgo-console slide type

Most developers doing presentations with this stuff need some console tooling. So it would be nice, to have a special type of slide for that. I tried to do it with the code slide, but wasn't successful for some reason I forgot until now. In the end, I build my console things from scratch with a simple <deckgo-slide-content> and css classes.

Replace the deckgo-lazy-img with plain ion-img (or at least highlight the benefits of deckgo-lazy-image over ion-img)

For some reason, lazy image did not load my images at all. So i used ion-img instead, which also does intersection observer and lazy loading now, in version 4. https://ionicframework.com/docs/api/img So maybe you don't need your own component anymore for that, which would be one thing less to maintain in the future :)

Bugs

Low: update dependencies

You have a warning vulnerability in your deckdeckgo webpack plugin, see

Moderate │ Regular Expression Denial of Service │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ underscore.string │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=3.3.5 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ deckdeckgo-webpack-plugins [dev] │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ deckdeckgo-webpack-plugins > remarkable > argparse > │ │ │ underscore.string │

Low: Template Examples on deckdeckgo.com look broken / not understandable

see https://docs.deckdeckgo.com/slides/concept

Idea: mark the slots with different background-colors to show the distinction, that you mean the areas of the slide with slots.

Gif Slide fails to load gifs

For some reason, the gif slide does not load my gifs. I tried integrating som giffy ones and they didn't load. So I made my own slide with <deckgo-slide-content> again to display my gif.

Sidenote: Is it allowed to pass the gif url as video format, like vp9? I think this would improve performance and giphy does offer it :)

@peterpeterparker
Copy link

Super cool, thx for the detailed answer 👍

Improvements

Show Slides in Presenter Mode

Well the presenter mode isn't implemented yet ;) I opened a feature request in May but unfortunately didn't had the time so far to look at it.

deckgo/deckdeckgo#111

Allow 'reveal' effect for all child elements, not only li, p and img

That was per design mostly because I thought that doing so it would be easier when you edit your talk. But if you think this feature is kind of a must we could happily open a feature request and do that in the future.

Add a deckgo-console slide type

I don't sure I get what you are meaning but I'm SUPER curious about it, sound like an awesome idea. Could you describe a bit better or show me an example?

Replace the deckgo-lazy-img ...

Well firstly I can't reproduce the issue, if you could provide a sample repo I'm happy to look at it. Maybe there was a bug in a previous version of the core?

Anyway meantime I also published a component https://www.npmjs.com/package/@deckdeckgo/lazy-img which gonna be use in DeckDeckGo. Furthermore than lazy loading we have also the need to obfuscate content in a specific way for our upcoming web editor

Bugs

Low: update dependencies

Classic node_modules, I don't have direct references on these, so I hope that soon the derived libs will be updated

Low: Template Examples on deckdeckgo.com look broken / not understandable

Probably also the fact that my English/phasing isn't good enough to describe the concept, really sorry for that. Could you help to rephrase it or tell me if one or wich sentences are gibberish ?

Gif Slide fails to load gifs

The slide basically parse the src to an src of an img so as long as the URL is valid, regardless of the provider or even local, it should work. Maybe it wasn't rendered for the same reason as lazy-img before. Same if you could provide a repo, I'm happy to have a look.

Side note: My test link https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/200w_d.gif and otherwise not really related but in the upcoming editor we have integrated Tenor

Wow again thx for all these feedbacks, super interesting!!!

@bjesuiter
Copy link
Author

bjesuiter commented Jul 15, 2019

Yeah! I love talking about technical things on nice projects :D -

Improvements

Show Slides in Presenter Mode

Ah, so maybe there is a misunderstanding.
I like casting the presentation to an external device, like your issue suggests,
but this was not the problem i had.

I meant to add a preview of the current slide to the remote control mode.
This should not be too complicated, since it's all web-components, or is it complicated?

Allow 'reveal' effect for all child elements, not only li, p and img

Yeah, I understand what you mean. But the current situation would be that you must build this functionality yourself if you want to use another tag as these three. For example, I could think of a content slide with three topics on it, each topic represented by a material card and I want to show my cards with this reveal logic.

Maybe another possibility would be to allow an array to be passed into a reveal-tags property, like reveal-tags="['div', 'my-tag']",
so that you don't have to wrap another tag around each content item for reveal functionality.

Add a deckgo-console slide type

Yes, i can describe it further:

I imagine a slide type similar to the deckgo-code slide type, but for shell content.
I imagine a black background with monotype font with syntax highlighting for (Unix) sh, bash, zsh, (Windows) powershell, cmd syntax to easily show development commands like so:

Bildschirmfoto 2019-07-15 um 19 22 44

As the first step, showing the commands with proper formatting and syntax highlighting would be great.
A second step could be to integrate a full terminal emulator component to be able to show some commands directly while presenting.
But I imagine this to be more tricky because you have to fill in the execution environment for the commands, like a vm-baked console or ssh. So, this is why I consider it the second step.

Replace the deckgo-lazy-img ...

Ok, I see the reason to use an own component for a custom web editor.
I don't think I can reproduce the issues right now, because I'm very busy with some work stuff, but if I'm looking into it again, i'll test the lazy-img component again and send you feedback :)

Bugs

Node Dependencies

Ah ok , so the bugs are deeper in your dependency tree. So nevermind.

Low: Template Examples on deckdeckgo.com look broken / not understandable

No, the text is good as it is. The problem is the example slide renderer, you included for showing of the templates.
This is your first example for the Title slide type template:

Bildschirmfoto 2019-07-15 um 19 57 27

This looks technically fine, but I would improve the visibility of the different areas affected by the slots, by adding a horizontal line between the title slot and the content slot or making their background-colors different.
I think that having only the labels with the slot names is not enough to convey the information, that all content with this slot name will be rendered at the position in the example.

Or you could draw box-outlines for each slot to better visualize them.
A little bit like this image from the css-tricks complete guide to css-grit tutorial.
Bildschirmfoto 2019-07-15 um 20 03 01
https://css-tricks.com/snippets/css/complete-guide-grid/#grid-introduction

The thing I wanted to point out is that these slide examples do not look good sometimes, when scaled.
Bildschirmfoto 2019-07-15 um 20 12 10

The Author template looks badly scaled for the test (maybe simple fix to increase height of demo slide?).
And the QR Code Slide example looks all over the place, possible caused by responsiveness.
I think these examples should look great to improve adoption.

Also, the QR Code had a glitch earlier, when it was filling the complete right side of the demo slide,
but I couldn't recreate it for this screenshot.

Gif Support

Ah ok, yes, maybe the reason it didn't load was the same as lazy-img.
As with lazy-img I may test it again in the future, but I can't provide a date for that ^^.
The integration of tenor sounds great, looking forward to that!

Maybe you could make this gif-slide autodetect, if this is an image (gif) or a video (gif like mp4, vp9, etc.) and render it with the correct element? (img for git and video for all others)?
Using videos would really improve performance.

One problems with video though is autoplay. I can see this, so therefore you should keep the option to pass in normal gifs :)

Nice to help you :)

@peterpeterparker
Copy link

Show Slides in Presenter Mode

I actually thought about it, it's of course technically possible but it leads to some questioning regarding design notably (format, transporting style and assets, etc.). Maybe something we will solve someday first in our upcoming editor, but yes agree

Allow 'reveal' effect for all child elements, not only li, p and img

Fair point, I opened a feature request about it deckgo/deckdeckgo#198

Add a deckgo-console slide type

Thx for the details, I understand now. I think it's another version or it goes with an existing feature request deckgo/deckdeckgo#190. Not sure in wich way but definitely a cool idea

Low: Template Examples

I see, good point, I opened a feature request about it deckgo/deckdeckgo#199

Gif Support

"Using videos would really improve performance" in terms of download speed or quality? integrated about that. But sure autoplay is a must

@peterpeterparker
Copy link

Some news:

  • the docs, the display of the slots has been improved and its already online. we received a cool PR from a contributor for that purpose (deckgo/deckdeckgo#214) 👍

  • I began to work on the "reveal" subject. I'm far of being done with the subject but the first concept already would allow the user to have more flexibility, let him/her select which elements should or should not be set as "revealed" (deckgo/deckdeckgo#224)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment