Fiddled around with it a bit and if you reduce the spacing between the boxes to a few pixels the illusion goes away for me or is barely noticeable. But, the aesthetics of the whole thing are quite different then.
It would be fun to see this with local daylight hours mapped to the squares, so I could get a feel for where my consumption is at within "daylight" vs the whole "day"
That's interesting - didn't cross my mind! Thanks for the pointer.
Btw, the website you linked doesn't work for me. I get the "Uncaught (in promise) TypeError: navigator.geolocation is undefined" on Firefox 98.0.2 on macOS 12.3.1
Your personal project is a pretty cool and interesting way to visualize daylight (especially using the fast forward button to go through a week at a time). Thanks for making it.
Those perspective items don't really provide perspective. I don't hate them, but a Jupiter day means nothing to me. The "average workday" is good and meaningful.
It’s tongue in cheek - the original site had squares not the advertised “rectangles” - even though a square is a type of rectangle most people consider rectangles to be the non-squares.
I did the same thing when my grandfather died: A grid with each square representing a week of his life, and each row representing one year. Then, we mapped as many events from his life as possible.
And yet the vast majority of these rectangles will be spent JUST on maintaining you so you can spend a minority of them on either work or things you actually want to do.
Sleep, eat, exercise, shower, dress, undress, shop, drive (often in traffic), errands, poop, pee, fap (or sex if you are so positioned), then theoretically get a few hours of work done (hopefully productive and fulfilling but often filled with meetings and other drudgery), then babytime if you have one, and THEN there's maybe 1 row of rectangles left for you to spend how you actually please!
It's why I follow the "wake up early, work-out, get something done" organizing principle for my day. My day is usually in pretty good shape by 9am, even if nothing else happens.
I have to say, it took me a very long time as a self-identified "night owl" but I finally came around to this. I schedule an Orangetheory class at 8:15 M-W-F (I could go earlier, and have, but I have a 9 month old now and the nanny comes @ 8) and I certainly feel like I get a lot more done (also my energy starts off high).
Side note, I really appreciated the "no javascript" message:
>Sorry pal, but this won't work without JavaScript. You are probably doing that for privacy reasons, and I do respect that. You can download this website, inspect the source code, and run it locally. Or, you can whitelist it in your browser/script blocker. I don't have any third-party trackers on this website, and the code is open-sourced, so there's not much to be worried about.
It's perhaps a neat UI for a day planner. Being able to drag to select a block of squares and then attach a color/label to them would be a nice next step. Could work entirely client side.
FYI: Hovering over the examples breaks the actual counter if the actual counter is less than the value of the hovered example counter. It causes the actual counter to be set to the value of the hovered example counter.
Cool project! Just a quickie, but might be worth changing "nitty gritty" to "the details". Depending on the etymology you look at, the term could be considered offensive (so probably not worth the risk!).
"It has been suggested that the word originally referred to the debris remaining in the holds of slave ships after the slaves had been disembarked, but there is no evidence of such use before the 20th century when slavery was prevalent." -- Wiktionary
I do not think we should be deprecating colorful words because someone invented a fake etymology for them. Nor, for that matter, because someone somewhere might unreasonably take offense.
Even if hover pseudo classes would work in mobile, we don’t see the grid while looking at the list items, so we would not even notice something has changed.
hehe had a thought in the past a countdown from 100 years old minus your current age, tells you how much longer you have left to live. Not an original idea but yeah.
I remember stumbling upon a website which did this, but instead of just taking 100 years it prompted the user to select his country and gender. The algorithm then used data about the average lifespan of the selected gender in the selected country to tell the user how much they have left to live.
You should hover over the list items, not the individual rectangles. Also, it doesn't work on mobile devices, and I'm not sure what could be done about this.
It is a good idea, but the layout hurts my eyes due to the Hermann grid illusion.
https://en.wikipedia.org/wiki/Grid_illusion
“There are 121 fleeting black dots in a day”
It wasn't intentional!
I experimented with different colors, but seems like all of them produce this illusion :/
I'll see what I can do.
UPDATE:
* rounded corners to make rectangles look more pleasant
* switched to pastel colors to lower the contrast and make the grid less taxing for the eyes
Thanks everyone for the input!
You might have to do 144 circles instead, I think that would have enough whitespace around each one to stop the illusion.
Fiddled around with it a bit and if you reduce the spacing between the boxes to a few pixels the illusion goes away for me or is barely noticeable. But, the aesthetics of the whole thing are quite different then.
Eliminate all space in between rectangles. Aesthetics be damned.
Or add the circles intentionally? At least they wont pop in and out then.
Seems better with a border radius of 1.25rem. Also making the border thickness very thin seems to help, as well as some making it more oblong.
Reduce the contrast, i.e. make the black less black.
Maybe try using circles instead of rectangles, and the progress within each circle is shown like a pie chart?
Rounded corners might help?
Try hexagons, they’re equidistant between centers.
1 reply →
Could rounded corners help here?
It would be fun to see this with local daylight hours mapped to the squares, so I could get a feel for where my consumption is at within "daylight" vs the whole "day"
SunCalc is a good tool for this, if you're interested: https://github.com/mourner/suncalc
(I've used it on a personal project, and the API was a little awkward but the results are good: https://daylight.website/)
That's interesting - didn't cross my mind! Thanks for the pointer.
Btw, the website you linked doesn't work for me. I get the "Uncaught (in promise) TypeError: navigator.geolocation is undefined" on Firefox 98.0.2 on macOS 12.3.1
Your privacy settings / extensions are blocking geolocation
Your personal project is a pretty cool and interesting way to visualize daylight (especially using the fast forward button to go through a week at a time). Thanks for making it.
Thank you, I'm glad you enjoyed it. I love the week skip too, interesting to see the shape change over the year.
Undocumented feature: if you hold down "w" or "shift+w" keys you can skip through weeks even faster.
I love your personal project! Would make an amazing smartwatch face!
There's an Apple watch face called "solar dial" that's pretty similar, and I've seen others like this.
To me this is the most logical watch face — everything else just confuses matters.
2 replies →
Most hackers are active outside of this time range.
Agreed, but still useful IMHO to get a sense of "where" you are in the day.
very cool project!
Those perspective items don't really provide perspective. I don't hate them, but a Jupiter day means nothing to me. The "average workday" is good and meaningful.
Some thoughts on good "perspective" items:
* Average runtime of a film
* Average commuting time (US, presumably)
* 15-minute standup
You do have a point. Replaced Jupiter's day length with a good night's sleep. Thanks!
I am grossly offended by this
That's a square.
Fine, a square is a rectangle. But that's a square.
There's no media queries to eliminate the square. There's no JS that affects the square-ness. It's all squares.
144 squares.
Yikes, I haven't thought anyone would venture there and see that monstrosity...
Well, now they're rectangles!
consider my offense revoked
Can someone clarify?
It’s tongue in cheek - the original site had squares not the advertised “rectangles” - even though a square is a type of rectangle most people consider rectangles to be the non-squares.
5 replies →
I see that I'm not the only one inspired by this blog post [1]. I did a similar visualization with blocks to display my working hours [2].
[1] https://waitbutwhy.com/2016/10/100-blocks-day.html [2] https://github.com/am-on/work-timer
Reminded me of https://waitbutwhy.com/2014/05/life-weeks.html from the same website. One of the few things on the Internet that changed my entire outlook on life.
I did the same thing when my grandfather died: A grid with each square representing a week of his life, and each row representing one year. Then, we mapped as many events from his life as possible.
I am doing an excel sheet, 52 boxes per row, one row per year. Inspired by waitbutwhy article.
2 replies →
Looks pretty neat!
And yet the vast majority of these rectangles will be spent JUST on maintaining you so you can spend a minority of them on either work or things you actually want to do.
Sleep, eat, exercise, shower, dress, undress, shop, drive (often in traffic), errands, poop, pee, fap (or sex if you are so positioned), then theoretically get a few hours of work done (hopefully productive and fulfilling but often filled with meetings and other drudgery), then babytime if you have one, and THEN there's maybe 1 row of rectangles left for you to spend how you actually please!
It's why I follow the "wake up early, work-out, get something done" organizing principle for my day. My day is usually in pretty good shape by 9am, even if nothing else happens.
I have to say, it took me a very long time as a self-identified "night owl" but I finally came around to this. I schedule an Orangetheory class at 8:15 M-W-F (I could go earlier, and have, but I have a 9 month old now and the nanny comes @ 8) and I certainly feel like I get a lot more done (also my energy starts off high).
Side note, I really appreciated the "no javascript" message:
>Sorry pal, but this won't work without JavaScript. You are probably doing that for privacy reasons, and I do respect that. You can download this website, inspect the source code, and run it locally. Or, you can whitelist it in your browser/script blocker. I don't have any third-party trackers on this website, and the code is open-sourced, so there's not much to be worried about.
It's perhaps a neat UI for a day planner. Being able to drag to select a block of squares and then attach a color/label to them would be a nice next step. Could work entirely client side.
Is this what you're looking for: https://144blocks.com ?
Interesting. Thanks for the idea!
Sounds like a good use case for the browser's localeStorage API
1 reply →
This is how bitcoin works, 144 blocks every day, 10mins each on average!
That is far too many rectangles. My cortisol spiked just reading the headline. Please turn it down to a more manageable number, like 3.
Or twelve. And make each a segment of a circle. And put the respective number 1-12 next to it.
So a clock that takes two hours per segment?
Hey OP - are you able to live off of Notion Backup? How's business? How many people work on the project?
Still haven't fully launched it yet. It's only me, and it's not the only thing I do.
FYI: Hovering over the examples breaks the actual counter if the actual counter is less than the value of the hovered example counter. It causes the actual counter to be set to the value of the hovered example counter.
https://imgur.com/a/bzamnie
Spotted it in the morning as well. Fixed, thanks!
Cool project! Just a quickie, but might be worth changing "nitty gritty" to "the details". Depending on the etymology you look at, the term could be considered offensive (so probably not worth the risk!).
I was very confused by this, so I looked it up:
"It has been suggested that the word originally referred to the debris remaining in the holds of slave ships after the slaves had been disembarked, but there is no evidence of such use before the 20th century when slavery was prevalent." -- Wiktionary
I do not think we should be deprecating colorful words because someone invented a fake etymology for them. Nor, for that matter, because someone somewhere might unreasonably take offense.
Done, thanks!
If it were a gauge, it would remind me of a 24h clock [0] or an app that shows the day/night cycle circularly [1].
[0]: https://www.pulju.net/images/products/24h-clock_orig.jpg
[1]: https://apps.apple.com/de/app/sundial-solar-lunar-time/id976...
Two ideas:
1. How about just 48 Pomodoro-sized rectangles?
2. For those of us with a shifted sleep rhythm it would be nice to be able to set the start-of-day time.
I agree that 1 Pomodoro ≅ 1 half hour, and 1 day = 48 half hours. But does 1 day = 48 Pomodoros? Maybe with lots of stimulants.
This is great! I built something similar on itunes here https://apps.apple.com/us/app/timeyet/id1613447823
I feel like tools like this are extremely valuable to those with time blindness from ADHD, Autism, etc...
Love the aesthetics of your app.
> I feel like tools like this are extremely valuable to those with time blindness from ADHD, Autism, etc...
I'll read up on this, thanks for bringing it up!
I was thinking this would be cool as a tree map (https://en.m.wikipedia.org/wiki/Treemapping) since that allows for nicely visualizing hierarchical categories.
It's a cool idea, but what exactly am I supposed to do or get from this?
Visitors on mobile devices can’t hover. Why not just show the examples all the time?
You mean rotating between examples every X seconds?
Perhaps making them toggles would work better.
Even if hover pseudo classes would work in mobile, we don’t see the grid while looking at the list items, so we would not even notice something has changed.
I prefer the day visualized as 86400 rectangles (https://24HourHomepage.com)
I've been using https://144blocks.com, is this inspired by that?
Suggestion: Change the cursor when hovering over the text. I didn't understand whether to hover over the text or the rectangles.
Apart the way to visualize the blocks if you spent 44 blocks to sleep (almost 8 hours) you have exactly 100 blocks (10x10) of 10 minutes.
How did you get .82 rectangles from light taking 8 minutes 20 seconds to reach Earth from the sun? Isn't that .8333... minutes?
You're right. Fixed, thanks!
It wasn't wrong before. The time varies from 8.178 to 8.456 minutes.
"Average psilocybin mushroom trip" nice
Weird you're being downvoted... Looking forward to the day SV finds out about psylocibin!
Is that an april fool's joke?
Jama knows what's important.
So this is like a calendar but just for a day?
should we have some columns grayed out to show downtime similar to a weekend for a week?
See also https://144blocks.com/
In Sydney it's 9pm but by the looks of the Rectangles they think it's 10pm.
Thanks for flagging this! I changed my time zone to Sydney, and it's indeed 1hr ahead of schedule. I'll look into it.
I think our daylight savings started around that day!
hehe had a thought in the past a countdown from 100 years old minus your current age, tells you how much longer you have left to live. Not an original idea but yeah.
I remember stumbling upon a website which did this, but instead of just taking 100 years it prompted the user to select his country and gender. The algorithm then used data about the average lifespan of the selected gender in the selected country to tell the user how much they have left to live.
I’m hovering over on my phone but it’s not doing anything!
It bugs out when you have it open and the day changes
Fixed, thanks!
It happened again :( it was stuck on the last square
Why doesn't this work with Adblock on?
Nothing happens when i hover over the squares.
You should hover over the list items, not the individual rectangles. Also, it doesn't work on mobile devices, and I'm not sure what could be done about this.
Neat. Would make a cool clock on the wall!