Show HN: Visualize your day as 144 rectangles

#1

Post by jmstfv » Fri, Apr 01, 2022, 5:49 PM UTC

Show HN: Visualize your day as 144 rectangles
rectangles.app

Re: Show HN: Visualize your day as 144 rectangles

#2

Post by setr » Fri, Apr 01, 2022, 6:34 PM UTC

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.

Re: Show HN: Visualize your day as 144 rectangles

#3

Post by smallerfish » Fri, Apr 01, 2022, 6:39 PM UTC

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.

Re: Show HN: Visualize your day as 144 rectangles

#4

Post by jmstfv » Fri, Apr 01, 2022, 6:42 PM UTC

setr wrote: post #2

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.

Yikes, I haven't thought anyone would venture there and see that monstrosity...

Well, now they're rectangles!

Re: Show HN: Visualize your day as 144 rectangles

#5

Post by jmstfv » Fri, Apr 01, 2022, 6:45 PM UTC

smallerfish wrote: post #3

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.

Interesting. Thanks for the idea!

Re: Show HN: Visualize your day as 144 rectangles

#6

Post by aplc0r » Fri, Apr 01, 2022, 6:55 PM UTC

It is a good idea, but the layout hurts my eyes due to the Hermann grid illusion.

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

Re: Show HN: Visualize your day as 144 rectangles

#7

Post by jmstfv » Fri, Apr 01, 2022, 6:59 PM UTC

aplc0r wrote: post #6

It is a good idea, but the layout hurts my eyes due to the Hermann grid illusion. https://en.wikipedia.org/wiki/Grid_illusion

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.

Re: Show HN: Visualize your day as 144 rectangles

#8

Post by erenst » Fri, Apr 01, 2022, 6:59 PM UTC

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

Re: Show HN: Visualize your day as 144 rectangles

#9

Post by jmstfv » Fri, Apr 01, 2022, 7:03 PM UTC

erenst wrote: post #8

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

Looks pretty neat!

Re: Show HN: Visualize your day as 144 rectangles

#10

Post by setr » Fri, Apr 01, 2022, 7:27 PM UTC

jmstfv wrote: post #4

setr wrote: post #2

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.

Yikes, I haven't thought anyone would venture there and see that monstrosity... Well, now they're rectangles!

      height: 4.5rem;
    - width: 4.5rem;
    + width: 4.6rem;

consider my offense revoked