WingNews logo WingNews GitHub [2]
top | item 30881096

Show HN: Visualize your day as 144 rectangles

201 points| jmstfv | 4 years ago |rectangles.app

102 comments

order
[+] aplc0r|4 years ago|reply
It is a good idea, but the layout hurts my eyes due to the Hermann grid illusion.

https://en.wikipedia.org/wiki/Grid_illusion

[+] zagrebian|4 years ago|reply
“There are 121 fleeting black dots in a day”
[+] jmstfv|4 years ago|reply
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.

[+] kipple|4 years ago|reply
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/)

[+] jmstfv|4 years ago|reply
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

[+] cableshaft|4 years ago|reply
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.
[+] nsriv|4 years ago|reply
I love your personal project! Would make an amazing smartwatch face!
[+] amelius|4 years ago|reply
Most hackers are active outside of this time range.
[+] lkbm|4 years ago|reply
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

[+] jmstfv|4 years ago|reply
You do have a point. Replaced Jupiter's day length with a good night's sleep. Thanks!
[+] setr|4 years ago|reply
I am grossly offended by this

    .grid-item {
      ...
      height: 4.5rem;
      width: 4.5rem;
    }
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.

[+] jmstfv|4 years ago|reply
Yikes, I haven't thought anyone would venture there and see that monstrosity...

Well, now they're rectangles!

[+] jzer0cool|4 years ago|reply
Can someone clarify?
[+] pmarreck|4 years ago|reply
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!

[+] jaclaz|4 years ago|reply
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.

[+] smallerfish|4 years ago|reply
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.
[+] jmstfv|4 years ago|reply
Interesting. Thanks for the idea!
[+] victor22|4 years ago|reply
This is how bitcoin works, 144 blocks every day, 10mins each on average!
[+] klyrs|4 years ago|reply
That is far too many rectangles. My cortisol spiked just reading the headline. Please turn it down to a more manageable number, like 3.
[+] nkozyra|4 years ago|reply
Or twelve. And make each a segment of a circle. And put the respective number 1-12 next to it.
[+] teaearlgraycold|4 years ago|reply
Hey OP - are you able to live off of Notion Backup? How's business? How many people work on the project?
[+] jmstfv|4 years ago|reply
Still haven't fully launched it yet. It's only me, and it's not the only thing I do.
[+] supermatt|4 years ago|reply
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

[+] jmstfv|4 years ago|reply
Spotted it in the morning as well. Fixed, thanks!
[+] iamben|4 years ago|reply
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!).
[+] layer8|4 years ago|reply
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.

[+] jmarchello|4 years ago|reply
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...

[+] jmstfv|4 years ago|reply
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!

[+] HardwareLust|4 years ago|reply
It's a cool idea, but what exactly am I supposed to do or get from this?
[+] raldi|4 years ago|reply
Visitors on mobile devices can’t hover. Why not just show the examples all the time?