Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Build Your Own React

pomb.us

Post reply on HN
Print view View original

91–100 of 114 posts

Re: Build Your Own React

#91

Post by fishnchips »

agumonkey wrote: post #31
leetrout wrote: post #5

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

This might even become standard for most documentations.

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.

Re: Build Your Own React

#92

Post by chvid »

spectramax wrote: post #76
leetrout wrote: post #5

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

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

Boo - this is clearly excellent work by someone with both engineering and design skills. If no-one pushes the envelope then what a sad and boring world we would end up in.

Re: Build Your Own React

#93

Post by allover »

interlocutor wrote: post #59
allover wrote: post #51

Earlier quoted context omitted.

It's not really bananas when you actually start to think of everything 'as components', and consider that 'render' can neatly, declaratively describe behaviour, not just the DOM.

'render' should render, because that's what the function name says. If you're using it for behavior then you're not using it for the intended purpose.

Strongly disagree, and 'because the function is called that' is a very poor reason.

You're not using React to its full potential if you think like this.

Re: Build Your Own React

#94

Post by allover »

thatswrong0 wrote: post #65
interlocutor wrote: post #59

Earlier quoted context omitted.

'render' should render, because that's what the function name says. If you're using it for behavior then you're not using it for the intended purpose.

Now that hooks exist, this should definitely be the case. Before, HoCs / components with render prop functions were actually useful for doing some additional not-directly-render related work.

You can now use hooks for some things you might previously want a component for, e.g. useFetch instead of , but don't agree "this should definitely be the case". Dogma is never good.

Re: Build Your Own React

#95

Post by allover »

uryga wrote: post #57
allover wrote: post #51

Earlier quoted context omitted.

It's not really bananas when you actually start to think of everything 'as components', and consider that 'render' can neatly, declaratively describe behaviour, not just the DOM.

could you recommend any articles/tutorials that describe this approach some more?

This Ryan Florence talk is a great talk that touches on this topic, especially in some of the more creative examples: https://www.youtube.com/watch?v=kp-NOggyz54

Re: Build Your Own React

#96

Post by ath92 »

Silhouette wrote: post #90
spectramax wrote: post #89

Earlier quoted context omitted.

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.

if both sides were moving together, in time it would be a slide deck, in space it would be a scrolling document There is a fundamental difference between reference material, where only the final version is relevant, and tutorial material, where the evolution is also important. You keep making similar comments in this discussion where you compare this tutorial/exposition format to typical reference documentation, but…

Exactly. This presentation style made it much easier for me to see what was being added to the code. I don't like having to continually scan different blocks of code to see what changed, and try to make sense of how the changes fit in the bigger picture.

Re: Build Your Own React

#97

Post by Silhouette »

ath92 wrote: post #96
Silhouette wrote: post #90

Earlier quoted context omitted.

if both sides were moving together, in time it would be a slide deck, in space it would be a scrolling document There is a fundamental difference between reference material, where only the final version is relevant, and tutorial material, where the evolution is also important. You keep making similar comments in this discussion where you compare this tutorial/exposition format to typical reference documentation, but…

Exactly. This presentation style made it much easier for me to see what was being added to the code. I don't like having to continually scan different blocks of code to see what changed, and try to make sense of how the changes fit in the bigger picture.

I don't like having to continually scan different blocks of code to see what changed, and try to make sense of how the changes fit in the bigger picture.

Indeed.

Visual diff tools were invented for a reason, and using a side-by-side layout with some sort of colour coding and some attempt to align equivalent code is now close to universal. No-one would suggest doing code reviews by printing out the last two versions of a source file and comparing them on paper any more.

In presenting tutorial material like this, IME the two most effective formats have been either something like that side-by-side diff, often with some extra annotations like chunky labelled arrows to highlight the specific areas or changes of interest, or something like the style here, with the changes at each step being highlighted and/or animated so it's easy to follow along. Both of these work for code but also other illustrations.

Re: Build Your Own React

#99

Post by karol »

What's interesting is the React team had to implement their own DOM manipulation abstraction, with efficient change management and not interrupting the main JS thread. Their implementation strikes me as a possible general purpose implementation that could eventually replace the way DOM works.

Re: Build Your Own React

#100

Post by palerdot »

leetrout wrote: post #5

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

This is basically unusable in mobile ... but looks nice in desktop though ...
Post reply on HN