Ever wake up feeling groggy, even though you thought you had enough sleep? It turns out that by timing your wake up time based on REM cycles, you can wake up more refreshed and more productive.
This got me thinking, why don't I put my front-end web development skills to the test and build a tool that will help people optimize their sleep schedule?
So, I built a bedtime calculator with React JS, as well as some fancy CSS animations.
Looking forward to your feedback and suggestions :)
my last comment seems to have been removed by the moderators for being contrary to the tone of the rest of the forum, so i will say this:
this is like some sort of sponsorship for a mattress company or something if you check the bottom of the page.
i don't know why, but it is just very upsetting to me to see that some kid is reviving so much praise for being interested in something as meaningless as web development. As if you learned an instrument or joined a sports team or something. I think this will eventually lead you down the road of forming an identity around work as a programmer, which is not a good thing especially considering the low barrier of entry of becoming a programmer.
When i was your age I too got into these sorts of things, and in retrospect I would not have made the decisions I did.
FB is paying $300,000+ per year for React developers. This is an extremely valuable skill to acquire. Even better at such a young age. This kid has a bright future.
There are few things that aren't improved by a good financial situation. This kid is doing very well. Developing marketable skills at such a young age is impressive.
OP having these skills now means more free time in University or easier time finding first dev jobs which will pay off in the future. Compound interest and all that.
I got into software because I loved it as a kid. I'm also surrounded by people constantly complaining about crippling student debt, expensive housing, the current job market, unhappiness at work, a lack of satisfaction in their life - problems I don't have to deal with because I made good money doing what I love at a young age.
Am I missing any other "more important" things? Give the kid a break - this is cool and I'm glad they're showing off a project here.
I have nothing to say other than to encourage you to keep going and ignore any haters. This is really great - I wish I was doing things like this when I was your age.
This is great. It's the sort of project that reminds me of the early days of the web; back then people would have an idea, build it, and put it out there on the web for other people to use just because they thought it was useful. Very cool.
You've launched something and you've managed to get some very positive feedback. That's more than a lot of other people manage. Make sure you remember how good it feels, and use it as motivation to keep building and launching more projects. I hope we see more 'Show HN's from you.
That's a bit redundant with current top post, but I think this site is really cool, not because of the calculator.
I think the calculator itself isn't really useful, though I could be wrong. (The reason why I think it's not really useful is that I think the "90 minutes" cycles varies quite a lot between people, and the time between going to bed and to sleep can vary by half that length between people)
But what I really like, is that it is kinda (reasonably) click-baity, while it actually is a short, sourced, clean, no-ad, straight to the point, FAQ about sleep, which is useful to raise awareness of those issues.
This is quite nice but I feel a bit too simple. Sleep cycles vary widely from 70-120 minutes per person. I think an advanced mode where a person can input their own record of sleep duration would be nice. Or even getting a couple of sliders to play with varying REM, NREM cycles would be nice.
Or hook into some wrist heart rate monitors / accelerometers (Garmin, Apple, etc) and correlate heart rate and movement with REM cycles. Wouldn't be surprised if this was already done too but no reason not to try it for a hobby endeavor. Gotta be tons of public research on the correlational methods available on Google Scholar.
A good sleep tracking device with an accelerometer can generally record light sleep vs heavy sleep periods. See worn devices like Fitbit Versa 2 or (with the new watchOS 7) Apple Watch 3 and later, or devices that sit on the mattress itself like Withings Sleep.
with way, way less JavaScript. Sleepytime jQuery plus HTML is 40 KB. This new
site with all JavaScript and HTML is over 600 KB. Seems much of the JavaScript
is in creating the time picker. Thats disappointing, as you can do pretty close
to the same thing with one line of HTML:
I think that could have been worded much more nicely, but I get the OPs objection - it's sad kids are getting taught "this is the way to do things" and have no idea there was a better cleaner way.
I don't think this is the standard 'oh assembly in my granddads day, c in my dads day, ruby in my day, these young tigers and their js' either, there is no benefit to modern frameworks besides vendor lockin, which is an antibenefit. Its mostly a heaping pile that just seems to have more bugs and generally is making the web a horrible place.
I'm a long time user of sleepyti.me but i like this interface better.
It would be even better if the times displayed and the "try another time" was all on the same page. I dislike having to scroll for instant one off information bytes...
Thank you so much! I tried hard to make the interface nice by adding cool CSS animations (check out the moons glow!)
Good point about the "try another time" feature. I also want to add a "Go to bed now" feature, that will tell you what time to wake up if you want to fall asleep right now.
Wow! The site and its functionality are cool. I am not a web dev, so I can’t say much more than that.
What really impresses me is the site’s collection of information and its presentation. It is very thoughtful. Not too much. Not too little. You even included sources for most of your information. Fantastic! Don’t lose focus on your writing skills as you develop your technical skills. Both will serve you well. Great work!
If I may make a few suggestions, please consider:
1. The calculator says you should try to “fall asleep at <time>.” Maybe calculate a “bedtime” by including “time to fall asleep.” Default to 20 minutes, but allow the user to adjust.
2. The first sentence tripped me up. “ You should go to bed 5-6 90 minute sleep cycles before your wake up time.”
b. Consider breaking it into smaller sentences that lead the reader to your point. Something like:
People sleep in 90-minute cycles. They need five or six complete cycles to feel refreshed. Waking up mid-cycle feels worse than waking up earlier at a cycle boundary. Use this calculator to determine an ideal bedtime based on when you need to wake up.
Anyhow, just some minor thoughts. Overall, it is a great site, and not just a for a 15-year-old.
Write in active voice. That's the single most important lesson I learnt when writing technical specifications.
The #1 goal of technical writing is to be clear and accurate, so passive voice should take a back seat unless you cannot phrase it otherwise. Active voice lets you convey clearer, more concise statements that describe a concept.
Take for example "the ball was thrown by the man" vs "the man threw the ball". The latter is much more concise and easier to parse because the active object preceeds the passive one and so the concept unfolds linearly.
If you're using Word for writing, go into options > proofing > find 'writing style' and hit 'settings' > turn on 'passive sentences'. I just throw it to the default 'grammar & style' because I'd prefer to know of and actively decide against style issues than not. It's helped drill my writing significantly.
2. 30 Days to a More Powerful Vocabulary by Norman Lewis. Some the words I have inly encountered once or twice in the intervening 25 years since I read it, but many others I hear every day.
3. The Elements of Style by Strunk and White. It’s like any other instruction manual. It’s worth reading, even if you don’t follow them.
That's the beauty of the good old scroll bar: if it's there, you know you can scroll! This does not happen on smartphones and tablets due to the limited space.
This is really cool and nicely made! Congratulations! I'm assuming you don't have years of programming experience (feel free to correct me!) which makes it even more impressive when looking at the things you got right. This include the idea/functionality, layout, source and that cool Moon animation!
I would suggest improving a couple of things:
1) defaults:
a) some people don't like pickers (especially this "modern" hour then time thingy) and would like to just click the "Calculate" button. I think that the value that you have already set in the picker is good enough for most.
b) eliminates issues where the value is not visible in the GUI but it is set in the program. Right now, if you open the picker and click on "Cancel" (or outside the picker) without selecting a time, the input does not show a value but you can click on the "Calculate" button and it calculates using the default value.
2) tables of data: if there's not much data in a table, like in the one the recommended sleep time, do consider copying the data instead of rendering the image. It makes the data searchable (accessibility is important) and, usually, saves an additional request for that resource.
This is great. I've traditionally eye-balled it to be 90 min or 3hr cycles which works as a quick hack, but I'll consider this calculator next time. Can I just say, it looks like you have good design instincts, I hope it takes you far.
Does your site explain how to calculate ones own sleep cycle? I couldn't find it, and it's a simple trick I learned from a teacher many years ago.
Just choose an evening where you wait until you're feeling sleepy but don't go to bed, start a timer, stay up and after 20 minutes or so you'll start becoming less sleepy.
It might help to do something like watching a video program or playing a game.
After a while you'll start getting sleepy again, hit the timer. That's a rough estimate of your cycle. Because everyone is different.
I've recently started going to bed at 2000-2100 and it's nice to not need to worry about this stuff anymore. I start work at ~0800 and I'm usually awake from 0400-0600 so I never risk oversleeping, and my body gets as much sleep as necessary.
I'm also a morning person, so using the first two hours of the day to work on personal projects or stuff I want to learn is working out well. I guess my professional work can suffer as I start to lose concentration about 1400 but I can live with that!
I've been using https://sleepyti.me for many years. It's simple and easy, which is usually good when I'm tired near bedtime.
I actually like your time picker better, but amusingly since I actually wanted to get up at 8am, I had to flick it slightly back and forth first.
Also, sleepyti.me gives me more options, including the "not so healthy" options, which I sometimes need because I don't do the calculation till late in the night but I still want to time my REM cycles.
They also have the "I'm going to bed now" button, which tells you when to wake up, accounting for the 14 minutes to fall asleep. I use that button a lot.
Overall this is great! Just wanted to provide some comparative analysis.
My two best changes for my sleep quality and restfulness were waking up very early (normally between 4 and 5), and usually sleeping for only 6h (7.5 when especially tired).
I add 20 minutes as buffer to fall asleep.
My Alarm Clock lets me choose between setting an alarm at a certain time, as usual, but also for a certain time span. I have it preset to the time span, so I just enter 6h20m (which is normally already picked from the night before) and I’m good to go.
I thought sleep cycle length is variable to an extent. I once calculated my own to be around 110 minutes per cycle, rather than 90 minutes. Using that as a base for calculating bed time has worked well for me. If cycle length variability is indeed a thing, it would be an interesting parameter to add to the calculator. Thanks for sharing!
The site looks pretty nice.
I have no experience in web design, so no real technical input from my side, but I noticed it is inconsistent with the time representation.
You use the 12-hour AM/PM representation in the "I have to wake up at..." picker and in your text below that.
But the actual calculated bed time uses the (imo better) 24-hour format. This could lead to confusion, but at least is somewhat inconsistent.
139 comments
[ 4.2 ms ] story [ 126 ms ] threadThis got me thinking, why don't I put my front-end web development skills to the test and build a tool that will help people optimize their sleep schedule?
So, I built a bedtime calculator with React JS, as well as some fancy CSS animations.
Looking forward to your feedback and suggestions :)
this is like some sort of sponsorship for a mattress company or something if you check the bottom of the page.
i don't know why, but it is just very upsetting to me to see that some kid is reviving so much praise for being interested in something as meaningless as web development. As if you learned an instrument or joined a sports team or something. I think this will eventually lead you down the road of forming an identity around work as a programmer, which is not a good thing especially considering the low barrier of entry of becoming a programmer.
When i was your age I too got into these sorts of things, and in retrospect I would not have made the decisions I did.
FB is paying $300,000+ per year for React developers. This is an extremely valuable skill to acquire. Even better at such a young age. This kid has a bright future.
You've launched something and you've managed to get some very positive feedback. That's more than a lot of other people manage. Make sure you remember how good it feels, and use it as motivation to keep building and launching more projects. I hope we see more 'Show HN's from you.
I think the calculator itself isn't really useful, though I could be wrong. (The reason why I think it's not really useful is that I think the "90 minutes" cycles varies quite a lot between people, and the time between going to bed and to sleep can vary by half that length between people)
But what I really like, is that it is kinda (reasonably) click-baity, while it actually is a short, sourced, clean, no-ad, straight to the point, FAQ about sleep, which is useful to raise awareness of those issues.
https://sleepyti.me
with way, way less JavaScript. Sleepytime jQuery plus HTML is 40 KB. This new site with all JavaScript and HTML is over 600 KB. Seems much of the JavaScript is in creating the time picker. Thats disappointing, as you can do pretty close to the same thing with one line of HTML:
https://developer.mozilla.org/Web/HTML/Element/input/timeAlso, why is your name Josh Ternyak, but source of the page has this:
Why not try being encouraging instead of.. whatever that was.
I don't think this is the standard 'oh assembly in my granddads day, c in my dads day, ruby in my day, these young tigers and their js' either, there is no benefit to modern frameworks besides vendor lockin, which is an antibenefit. Its mostly a heaping pile that just seems to have more bugs and generally is making the web a horrible place.
If you want to get the site-size down, like the top-comment suggested, you can switch from React to preact.
Doing things like this get you valuable experience, more useful to actually working than school.
It would be even better if the times displayed and the "try another time" was all on the same page. I dislike having to scroll for instant one off information bytes...
Good point about the "try another time" feature. I also want to add a "Go to bed now" feature, that will tell you what time to wake up if you want to fall asleep right now.
What really impresses me is the site’s collection of information and its presentation. It is very thoughtful. Not too much. Not too little. You even included sources for most of your information. Fantastic! Don’t lose focus on your writing skills as you develop your technical skills. Both will serve you well. Great work!
If I may make a few suggestions, please consider:
1. The calculator says you should try to “fall asleep at <time>.” Maybe calculate a “bedtime” by including “time to fall asleep.” Default to 20 minutes, but allow the user to adjust.
2. The first sentence tripped me up. “ You should go to bed 5-6 90 minute sleep cycles before your wake up time.”
a. It should be 90-minute. See rule 4: https://www.grammarbook.com/punctuation/hyphens.asp
b. Consider breaking it into smaller sentences that lead the reader to your point. Something like:
People sleep in 90-minute cycles. They need five or six complete cycles to feel refreshed. Waking up mid-cycle feels worse than waking up earlier at a cycle boundary. Use this calculator to determine an ideal bedtime based on when you need to wake up.
Anyhow, just some minor thoughts. Overall, it is a great site, and not just a for a 15-year-old.
I will definitely use this feedback to improve the page. Thank you again for all the encouragement and advice.
The #1 goal of technical writing is to be clear and accurate, so passive voice should take a back seat unless you cannot phrase it otherwise. Active voice lets you convey clearer, more concise statements that describe a concept.
Take for example "the ball was thrown by the man" vs "the man threw the ball". The latter is much more concise and easier to parse because the active object preceeds the passive one and so the concept unfolds linearly.
If you're using Word for writing, go into options > proofing > find 'writing style' and hit 'settings' > turn on 'passive sentences'. I just throw it to the default 'grammar & style' because I'd prefer to know of and actively decide against style issues than not. It's helped drill my writing significantly.
1. Read lots.
2. 30 Days to a More Powerful Vocabulary by Norman Lewis. Some the words I have inly encountered once or twice in the intervening 25 years since I read it, but many others I hear every day.
3. The Elements of Style by Strunk and White. It’s like any other instruction manual. It’s worth reading, even if you don’t follow them.
I hope this kid has found a way to make money out of this.
I would suggest improving a couple of things:
1) defaults:
2) tables of data: if there's not much data in a table, like in the one the recommended sleep time, do consider copying the data instead of rendering the image. It makes the data searchable (accessibility is important) and, usually, saves an additional request for that resource.Definitely continue! You're on the right path.
Just choose an evening where you wait until you're feeling sleepy but don't go to bed, start a timer, stay up and after 20 minutes or so you'll start becoming less sleepy.
It might help to do something like watching a video program or playing a game.
After a while you'll start getting sleepy again, hit the timer. That's a rough estimate of your cycle. Because everyone is different.
I like the UI & UX of your website.
All the best!
I'm also a morning person, so using the first two hours of the day to work on personal projects or stuff I want to learn is working out well. I guess my professional work can suffer as I start to lose concentration about 1400 but I can live with that!
I actually like your time picker better, but amusingly since I actually wanted to get up at 8am, I had to flick it slightly back and forth first.
Also, sleepyti.me gives me more options, including the "not so healthy" options, which I sometimes need because I don't do the calculation till late in the night but I still want to time my REM cycles.
They also have the "I'm going to bed now" button, which tells you when to wake up, accounting for the 14 minutes to fall asleep. I use that button a lot.
Overall this is great! Just wanted to provide some comparative analysis.
I add 20 minutes as buffer to fall asleep.
My Alarm Clock lets me choose between setting an alarm at a certain time, as usual, but also for a certain time span. I have it preset to the time span, so I just enter 6h20m (which is normally already picked from the night before) and I’m good to go.
You use the 12-hour AM/PM representation in the "I have to wake up at..." picker and in your text below that.
But the actual calculated bed time uses the (imo better) 24-hour format. This could lead to confusion, but at least is somewhat inconsistent.