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

101–110 of 114 posts

Re: Build Your Own React

#101

Post by jtms »

thatswrong0 wrote: post #26
rajeev-k wrote: post #18

Earlier quoted context omitted.

> webcomponent based router Routers can be (and should be, IMO) written to be independent of UI component libraries such as React and webcomponents. See an example here: https://github.com/Rajeev-K/mvc-router You can use it with React---and in some ways it works better than react-router.

Yeah I'm not a fan at all of react-router because it's too dependent on React. For redirecting, for example, they recommend you render a component. Which is just bananas to me.

It’s bananas to you that a library with the word react in the name would be dependent on react? It’s an add on you would literally never use unless you are building a react app

Re: Build Your Own React

#102

Post by kaycebasques »

proc0 wrote: post #9

Wasn't there a very similar article recently? Wouldn't mind if this is a new tutorial trend. Regardless the presentation of this article is great! I hope this also catches on, it has maximum scanning efficiency.

What’s the trend here?

Re: Build Your Own React

#103

Post by tomcooks »

kybernetikos wrote: post #37
tomcooks wrote: post #19

WOAH amazing presentation, this is how code should be explained. Quick validation: would you pay for good bits of code explained well by the author?

I have once already: https://www.amazon.com/Beautiful-Code-Leading-Programmers-Pr... I liked it, but I'm not going to be paying for this sort of thing often. I think a lot would hinge on having content that was high quality, and being able to persuade me that it would be high quality before I paid for it might be challenging.

Thank you very much, challenge accepted

Re: Build Your Own React

#104

Post by reggieband »

pomber wrote: post #23
reggieband wrote: post #14

Excellent content. I did find that the code previews in the side bar occasionally changed before or after I expected. I understand the intent with having them adjacent rather than inline ... but I'd probably prefer inline. It would be nice to make this an option of the presentation format.

Is it because you read closer to the top or bottom of the viewport? I want to add a print mode that would have each code step inline.

I tend to flip back and forth from hacker news articles (e.g. check slack, check build progress). I try to position the page while scrolling so I can find my place back in the text. That alternates from "align top of content section to top of scroll pane" and "align bottom of section content to bottom of scroll pane" depending on the length of the section. I also do it unconsciously as I read, like a habit, to prepare the page in case I need to jump away.

Of the two, I probably favour aligning to the top. But since I alternate I would probably have changed to inline.

Re: Build Your Own React

#105

Post by jsf01 »

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…

It’s the best presentation for this style of content that I’ve ever seen. Having a description of what’s going on with a particular code block, plus highlighting the relevant parts, and moving that highlight or swapping out specific parts of it as I go through the content made it much faster for me to grasp what was important and what changed between blocks than would have been the case if the author used traditional static sections of code. This isn’t documentation, it’s a follow-along tutorial, and for that purpose this presentation style is 100% appropriate.

Re: Build Your Own React

#106

Post by jsf01 »

harel wrote: post #61
jolmg wrote: post #60

Earlier quoted context omitted.

I agree, though, it's a shame there's no fallback for when there's no javascript.

I'll assume this was meant with irony, and applaud you for this comment.

It’s a legitimate comment. You should be able to browse and view readable text without js enabled, whether or not the contents of that text discuss JavaScript.

Re: Build Your Own React

#107

Post by uryga »

allover wrote: post #95
uryga wrote: post #57

Earlier quoted context omitted.

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

thanks!

Re: Build Your Own React

#108

Post by uryga »

jjcm wrote: post #75
interlocutor wrote: post #56

Earlier quoted context omitted.

HTML custom elements (basis for web components) are intended for things that should be added to DOM. Using it for any other purpose is probably a misuse.

In my personal case I'm using it so the DOM is more literal as to what's happening on the page. I'm of the naive opinion that you should be able to read the DOM and have a general sense of what the site looks like. Since I'm making a single-page site that loads everything at once, I have a webcomponent based router that declaratively states what route will be active given the URL. For example: 𝚖𝚢-𝚛𝚘𝚞𝚝𝚎𝚛 𝚖𝚢-…

not sure what happened, but your code example is almost all tofu (unicode [X]) to me. looks like it's using characters like "mathematical monospace lowercase letter 'm'" etc

edit: unidecoded:

  my-router
        my-route(pattern="/home")
        // some home page
        my-route(pattern="/news")
        // some news page

Re: Build Your Own React

#109

Post by scarlet_lovah »

spectramax wrote: post #82
jsjohnst wrote: post #81

Earlier quoted context omitted.

You felt so passionately that you needed to say the same thing three times? This isn’t documentation, think of it more like a slide deck or tutorial. If it’s not your cup of tea, read the source material on Github or look elsewhere for the knowledge. While I somewhat agree with you on it’s a bit overkill, harping on that point repetitively is pointless.

Documentation, presentation, etc. - fundamentally, it is presenting sequential information to the user. And yes, I will say it again, this is NOT the way to do presentations. This is the programming presentation equivalent of designer things like this: https://www.ibm.com/plex/ Absolutely dreadful. But, thanks for the insight and advice about harping on something that I feel passionate about.

> thanks for the insight and advice about harping on something that I feel passionate about.

Given they are helping you out by pointing out a situation where you're being a bit obtuse and socially awkward (and thus helping you avoid similar situations in the future), I'd think that's pretty good. =)

Re: Build Your Own React

#110

Post by ckrailo »

spectramax wrote: post #73
agumonkey wrote: post #31

Earlier quoted context omitted.

This might even become standard for most documentations.

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.

It's a good thing the post is a teaching tool and not documentation!
Post reply on HN