Show HN: A React.js yearly calendar component • Hacker News Board

Re: Show HN: A React.js yearly calendar component

#11

Post by GiovanniFrigo » Mon, Nov 16, 2015, 3:14 PM UTC

exizt88 wrote: post #9

100 ms delay on every click (measured in Chrome's Profiles tab). I'm on a 2013 MBP. Seems a bit too much for making a number bold.

Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?

Re: Show HN: A React.js yearly calendar component

#12

Post by GiovanniFrigo » Mon, Nov 16, 2015, 3:15 PM UTC

CharlieTrip wrote: post #10

Thanks. Really useful and you save me a lot of time! If I found some problem I'll contact you ;)

Please do! Also if you have any feature request use github's issues to let me know!

Re: Show HN: A React.js yearly calendar component

#13

Post by hueking » Mon, Nov 16, 2015, 3:26 PM UTC

Sorry for asking this here, but I'm trying wrap my head around React. With the fact that we want to isolate styles for each component, how do we go about theming the components later on?

Re: Show HN: A React.js yearly calendar component

#14

Post by klkvsk » Mon, Nov 16, 2015, 3:30 PM UTC

Is that really worth showing to HN? I mean, I dont want to be rude -- your code is ok, no problem here -- but it's not even a library, it is just a widget in 200 LOC, that renders a single table. What's the achievement here?

Re: Show HN: A React.js yearly calendar component

#15

Post by iandanforth » Mon, Nov 16, 2015, 3:31 PM UTC

GiovanniFrigo wrote: post #11

exizt88 wrote: post #9

100 ms delay on every click (measured in Chrome's Profiles tab). I'm on a 2013 MBP. Seems a bit too much for making a number bold.

Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?

Cacheing? You're doing a lot of work in render that could be computed once. Try saving a few years +/- into state on componentDidMount. And for day clicks, pull rows that arn't touched from the cache.

Re: Show HN: A React.js yearly calendar component

#16

Post by alexmuro » Mon, Nov 16, 2015, 3:34 PM UTC

klkvsk wrote: post #14

Is that really worth showing to HN? I mean, I dont want to be rude -- your code is ok, no problem here -- but it's not even a library, it is just a widget in 200 LOC, that renders a single table. What's the achievement here?

imho, this is worth showing as a piece of design.

Its an innovative calendar layout and while I don't know if I would use it in time / data selection, in terms of visualizing data inside of a year it has a lot of potential.

Re: Show HN: A React.js yearly calendar component

#17

Post by HipstaJules » Mon, Nov 16, 2015, 3:34 PM UTC

klkvsk wrote: post #14

Is that really worth showing to HN? I mean, I dont want to be rude -- your code is ok, no problem here -- but it's not even a library, it is just a widget in 200 LOC, that renders a single table. What's the achievement here?

Is that comment really worth sharing on HN? I mean, I don't want to be rude - the English is ok, no problem here - but it's not useful at all, it's just complaining about a thing upvoted by 50 people. What's the purpose here?

Re: Show HN: A React.js yearly calendar component

#18

Post by GiovanniFrigo » Mon, Nov 16, 2015, 3:39 PM UTC

klkvsk wrote: post #14

Is that really worth showing to HN? I mean, I dont want to be rude -- your code is ok, no problem here -- but it's not even a library, it is just a widget in 200 LOC, that renders a single table. What's the achievement here?

Yeah, that's a component, no more, no less.

I just wanted to share this, I think some people disagree with you if I am in homepage right now

Re: Show HN: A React.js yearly calendar component

#19

Post by GiovanniFrigo » Mon, Nov 16, 2015, 3:40 PM UTC

iandanforth wrote: post #15

GiovanniFrigo wrote: post #11

Earlier quoted context omitted.

Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?

Cacheing? You're doing a lot of work in render that could be computed once. Try saving a few years +/- into state on componentDidMount. And for day clicks, pull rows that arn't touched from the cache.

Will surely do, thanks! Also, how did you test the onClick delay? by spamming timestamps in the code? :D

Re: Show HN: A React.js yearly calendar component

#20

Post by GiovanniFrigo » Mon, Nov 16, 2015, 3:43 PM UTC

alexmuro wrote: post #16

klkvsk wrote: post #14

Is that really worth showing to HN? I mean, I dont want to be rude -- your code is ok, no problem here -- but it's not even a library, it is just a widget in 200 LOC, that renders a single table. What's the achievement here?

imho, this is worth showing as a piece of design. Its an innovative calendar layout and while I don't know if I would use it in time / data selection, in terms of visualizing data inside of a year it has a lot of potential.

You definitely won't use this for date selection, but we found it useful to layout the whole year and to review it at a glance.

Thanks for your kind words anyway! :)