10 ms·

Very, very nice. His presentation library is available as well! https://codesurfer.pomb.us/ https://codesurfer.pomb.us/ https://github.com/pomber/code-surfer

Very, very nice. His presentation library is available as well! https://codesurfer.pomb.us/ https://codesurfer.pomb.us/ https://github.com/pomber/code-surfer/blob/code-surfer-v2/readme.md https://github.com/pomber/code-surfer/blob/code-surfer-v2/re...

jermaustin1 7y ago
I love this effect, I was actually just writing a blog post that I didn't save before my tab crashed. I'm actually now GLAD it didn't! This is a lot more effective a medium for the content! I even went ahead an set up a monthly donation to their open collective project [1] because it is so beautiful. 1: https://opencollective.com/code-surfer https://opencollective.com/code-surfer
- pomber 7y ago
  hey, thanks a lot for the donation!
  - jermaustin1 7y ago
    No problem, the tutorial was great and the code-surfer package looks great. Keep up the good work!
agumonkey 7y ago
This might even become standard for most documentations.
- piotrkubisa 7y ago
  > This might even become standard for most documentations. I hope not, because slow, meaningless animation makes me tired and something inside me wants escape that page. Also it affects scrolling, especially noticeable when I am scanning a text instead of reading - you might lose context (note how the presentation reacts on pressing "page-up" / "page-down"). Kindle and all e-reader hates animations[0][1] - any animations (they are just huge black holes for battery). IMHO any documentation SHOULD be able to printed out on paper and sorry - paper is not interactive. However, I will warmly welcome some interaction in dedicated docs section but it would be great if it could be duplicated as a rich-text article. [0]: Not saying about the reader mode in browsers (e.g. Firefox) [1]: Please think also about people that are disabled or use VoiceOver/NarratorMode to be more productive / are just lazy to read text using their eyes :)
  - agumonkey 7y ago
    No worries, i understand, but I felt it told the code History in a valuable way. I usually stay away from shiny presentation.
- regular_person 7y ago
  I found it very slick and cool-looking but not really conducive to absorbing information.
- spectramax 7y ago
  I couldn't disagree more. This is not what a documentation should be like. Unnecessary animations, fixed scrolling, and just useless "snazzy" aspects of user interface has no place in code documentation. I hope this does not become the standard.
  - ckrailo 7y ago
    It's a good thing the post is a teaching tool and not documentation!
- fishnchips 7y ago
  I don't think it would work well for documentation where you may only look for a very specific piece of information and maybe a little bit context. This style of presentation would, in my opinion, work best for tutorials where every new concept builds on top of previous ones, and context is king.
ghego1 7y ago
Is it just me or on mobile it does not render properly?
stockkid 7y ago
Yeah the presentation effect on code is super cool. Yet on mobile I didn't feel that it was particularly helpful as it covered about half the screen height and I couldn't clearly skim the content.
spectramax 7y ago
Please don't perpetuate this type of animated presentation style. Why? 1) Vertical layout is easier to scroll 2) Vertical layout puts the code blocks in-line to know where they belong in the text 3) Author's presentation style has animations that slow down user's ability to scan quickly 4) Scroll position determines the code block's visibility (!!! WTF) 5) Either have the entire page white or black. The contrast changes between reading the document and then reading the code tires the user 6) Scroll wheel feels highjacked because the left pane is static I could go on and on. I strongly discourage people from using this type of documentation. Your users, will get tired of the novelty and when push comes to shove, they will want something like this: https://golang.org/pkg/ https://golang.org/pkg/
- taude 7y ago
  I think static documentation (your link) is a different use case than an interactive tutorial (not documentation). I didn't find the presentation horrible, but it's likely just looking nice and perfect on my computer hooked up to big monitors, and not on a phone or something....
  - spectramax 7y ago
    I think everyone is saying that but presentation or documentation is essentially presenting sequential information to the user, whether it is a word document, a slide deck or a scrolling html page. Also, there is nothing interactive about it - I can't change code on the left side, nor can I do anything with the right side. It is just scrolling, I guess you can call that "interaction".
    - xmprt 7y ago
      You're dismissing scrolling as if it doesn't do anything but when I scroll I can see the code at a point in time as opposed to a point in space.
      - spectramax 7y ago
        That’s precisely the problem - if both sides were moving together, in time it would be a slide deck, in space it would be a scrolling document. Here, we have the left and right side, changing in time and space, respectively, and burdening the user with cognitive dissonance.
palerdot 7y ago
This is basically unusable in mobile ... but looks nice in desktop though ...

jermaustin1 7y ago

I love this effect, I was actually just writing a blog post that I didn't save before my tab crashed. I'm actually now GLAD it didn't! This is a lot more effective a medium for the content! I even went ahead an set up a monthly donation to their open collective project [1] because it is so beautiful. 1: https://opencollective.com/code-surfer https://opencollective.com/code-surfer

pomber 7y ago
hey, thanks a lot for the donation!
- jermaustin1 7y ago
  No problem, the tutorial was great and the code-surfer package looks great. Keep up the good work!

agumonkey 7y ago

This might even become standard for most documentations.

piotrkubisa 7y ago
> This might even become standard for most documentations. I hope not, because slow, meaningless animation makes me tired and something inside me wants escape that page. Also it affects scrolling, especially noticeable when I am scanning a text instead of reading - you might lose context (note how the presentation reacts on pressing "page-up" / "page-down"). Kindle and all e-reader hates animations[0][1] - any animations (they are just huge black holes for battery). IMHO any documentation SHOULD be able to printed out on paper and sorry - paper is not interactive. However, I will warmly welcome some interaction in dedicated docs section but it would be great if it could be duplicated as a rich-text article. [0]: Not saying about the reader mode in browsers (e.g. Firefox) [1]: Please think also about people that are disabled or use VoiceOver/NarratorMode to be more productive / are just lazy to read text using their eyes :)
- agumonkey 7y ago
  No worries, i understand, but I felt it told the code History in a valuable way. I usually stay away from shiny presentation.
regular_person 7y ago
I found it very slick and cool-looking but not really conducive to absorbing information.
spectramax 7y ago
I couldn't disagree more. This is not what a documentation should be like. Unnecessary animations, fixed scrolling, and just useless "snazzy" aspects of user interface has no place in code documentation. I hope this does not become the standard.
- ckrailo 7y ago
  It's a good thing the post is a teaching tool and not documentation!
fishnchips 7y ago
I don't think it would work well for documentation where you may only look for a very specific piece of information and maybe a little bit context. This style of presentation would, in my opinion, work best for tutorials where every new concept builds on top of previous ones, and context is king.

ghego1 7y ago

Is it just me or on mobile it does not render properly?

stockkid 7y ago

Yeah the presentation effect on code is super cool. Yet on mobile I didn't feel that it was particularly helpful as it covered about half the screen height and I couldn't clearly skim the content.

spectramax 7y ago

Please don't perpetuate this type of animated presentation style. Why? 1) Vertical layout is easier to scroll 2) Vertical layout puts the code blocks in-line to know where they belong in the text 3) Author's presentation style has animations that slow down user's ability to scan quickly 4) Scroll position determines the code block's visibility (!!! WTF) 5) Either have the entire page white or black. The contrast changes between reading the document and then reading the code tires the user 6) Scroll wheel feels highjacked because the left pane is static I could go on and on. I strongly discourage people from using this type of documentation. Your users, will get tired of the novelty and when push comes to shove, they will want something like this: https://golang.org/pkg/ https://golang.org/pkg/

taude 7y ago
I think static documentation (your link) is a different use case than an interactive tutorial (not documentation). I didn't find the presentation horrible, but it's likely just looking nice and perfect on my computer hooked up to big monitors, and not on a phone or something....
- spectramax 7y ago
  I think everyone is saying that but presentation or documentation is essentially presenting sequential information to the user, whether it is a word document, a slide deck or a scrolling html page. Also, there is nothing interactive about it - I can't change code on the left side, nor can I do anything with the right side. It is just scrolling, I guess you can call that "interaction".
  - xmprt 7y ago
    You're dismissing scrolling as if it doesn't do anything but when I scroll I can see the code at a point in time as opposed to a point in space.
    - spectramax 7y ago
      That’s precisely the problem - if both sides were moving together, in time it would be a slide deck, in space it would be a scrolling document. Here, we have the left and right side, changing in time and space, respectively, and burdening the user with cognitive dissonance.

palerdot 7y ago

This is basically unusable in mobile ... but looks nice in desktop though ...