10 ms·
Show HN: Visualize your day as 144 rectangles
- Jamie9912 5y agoIt bugs out when you have it open and the day changes
- setr 5y agoI 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 5y agoYikes, I haven't thought anyone would venture there and see that monstrosity... Well, now they're rectangles!
- setr 5y agoheight: 4.5rem; - width: 4.5rem; + width: 4.6rem; consider my offense revoked
- jzer0cool 5y agoCan someone clarify?
- bombcar 5y agoIt’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.
- SamBam 5y agoMy 5-year-old knows that squares are a type of rectangle. Her kindergarten teacher corrected her when she said this during a shapes lesson and told her that rectangles always have two sides longer than the other. We haven't bothered to correct the teacher, but used it as a lesson to say that even intelligent people aren't always correct about everything. (She also had a preschool teacher that told her that blood is blue before it gets oxygen. This lesson is one that will be repeated throughout her life.)
- bombcar 5y agoThere's the technical definition where rectangle is a genus of the species square, and there's the colloquial definition - if there are two boxes and one is a cube and the other is elongated, most people will ask for "the rectangular" one and not the "non square" one. And an important part of life is learning when to pick your battles.
- jaclaz 5y ago>where rectangle is a genus of the species square Wrong battle, I know, but to nitpick the species is more likely quadrilateral.
- bombcar 5y agoQuadrilateral would be the family, and rectangle the genus, square the species. Or you could promote quadrilateral to order and designate parallelogram the family.
- 5y ago
- smallerfish 5y agoIt'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.
- aplc0r 5y agoIt is a good idea, but the layout hurts my eyes due to the Hermann grid illusion. https://en.wikipedia.org/wiki/Grid_illusion https://en.wikipedia.org/wiki/Grid_illusion
- jmstfv 5y agoIt wasn't intentional! I experimented with different colors, but seems like all of them produce this illusion :/ I'll see what I can do.
- onychomys 5y agoYou might have to do 144 circles instead, I think that would have enough whitespace around each one to stop the illusion.
- cyberge99 5y agoTry hexagons, they’re equidistant between centers.
- peterburkimsher 5y ago"Hexagons are the bestagons" according to CGP Grey. https://www.youtube.com/watch?v=thOifuHs6eY https://www.youtube.com/watch?v=thOifuHs6eY Personally I prefer fractals. A 6-sided hexagon is just 2* 3-sided triangles. Or 6 of them, depending how you prefer to tile the plane. https://i.pinimg.com/originals/c9/44/99/c94499bb9a0057f8573e8a5a5fede33d.gif https://i.pinimg.com/originals/c9/44/99/c94499bb9a0057f8573e... So how about a day schedule organised by Sierpinski triangles? Lots of space in the middle for resting.
- pan69 5y agoReduce the contrast, i.e. make the black less black.
- randyrand 5y agoOr add the circles intentionally? At least they wont pop in and out then.
- erenst 5y agoI 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 https://waitbutwhy.com/2016/10/100-blocks-day.html [2] https://github.com/am-on/work-timer https://github.com/am-on/work-timer
- jmstfv 5y agoLooks pretty neat!
- leobg 5y agoI 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.
- davchana 5y agoI am doing an excel sheet, 52 boxes per row, one row per year. Inspired by waitbutwhy article.
- netsharc 5y agoDo you find some years need 53 boxes? If you're born April 1, 52 weeks after your birth would be March 31, and after 52 more weeks it would be March 30 (before considering leap years). I guess it can stay 52 boxes, and the last box has a day extra (or two, on leap years).
- davchana 5y agoOh no, I don't go in that details, simply, every month, the weeks start on 1st, 8th, 15th, 22nd. Only Jan, Jun, July, Dec gets another week, 5th one, on 27th. So all months have 4 columns, labeled 1,8,15,22. Jan, Jun, Jul, Dec have 5 columns. Whole sheet is a fillable grid of 52 columns and 90 rows. A pre column list the year like 2002, 2003, 2004 etc. Next pre column list my age like 0,1,2,3 till 90. Then above explained grid. Then again, first two pre columns copied. Each cell has light grey border. Border darkens to black between months columns. Border also darkens at every decade row. If an event (like travel) happens on certain date (like 13th), it simply fills the whole week. I assume that in overall big picture of life, a rounding off of week will not matter much.
- kipple 5y agoIt 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 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/ https://daylight.website/)
- jmstfv 5y agoThat'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
- aiden120000 5y agoYour privacy settings / extensions are blocking geolocation
- cableshaft 5y agoYour 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.
- kipple 5y agoThank 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.
- nsriv 5y agoI love your personal project! Would make an amazing smartwatch face!
- perilunar 5y ago
- lfkdev 5y ago"Average psilocybin mushroom trip" nice
- pmarreck 5y agoAnd 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!
- browningstreet 5y agoIt'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.
- pmarreck 5y agoI 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).
- victor22 5y agoThis is how bitcoin works, 144 blocks every day, 10mins each on average!
- _def 5y agoNeat. Would make a cool clock on the wall!
- lkbm 5y agoThose 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 5y agoYou do have a point. Replaced Jupiter's day length with a good night's sleep. Thanks!
- klyrs 5y agoThat is far too many rectangles. My cortisol spiked just reading the headline. Please turn it down to a more manageable number, like 3.
- layer8 5y agoTwo 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.
- gmfawcett 5y agoI agree that 1 Pomodoro ≅ 1 half hour, and 1 day = 48 half hours. But does 1 day = 48 Pomodoros? Maybe with lots of stimulants.
- bertr4nd 5y agoI was thinking this would be cool as a tree map (https://en.m.wikipedia.org/wiki/Treemapping https://en.m.wikipedia.org/wiki/Treemapping) since that allows for nicely visualizing hierarchical categories.
- jmarchello 5y agoThis is great! I built something similar on itunes here https://apps.apple.com/us/app/timeyet/id1613447823 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 5y agoLove 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!
- jaqalopes 5y agoHow did you get .82 rectangles from light taking 8 minutes 20 seconds to reach Earth from the sun? Isn't that .8333... minutes?
- jmstfv 5y agoYou're right. Fixed, thanks!
- Dylan16807 5y agoIt wasn't wrong before. The time varies from 8.178 to 8.456 minutes.
- teaearlgraycold 5y agoHey OP - are you able to live off of Notion Backup? How's business? How many people work on the project?
- jmstfv 5y agoStill haven't fully launched it yet. It's only me, and it's not the only thing I do.
- raldi 5y agoVisitors on mobile devices can’t hover. Why not just show the examples all the time?
- supermatt 5y agoFYI: 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 https://imgur.com/a/bzamnie
- jmstfv 5y agoSpotted it in the morning as well. Fixed, thanks!
- albert_e 5y agoSo 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?
- GrumpyNl 5y agoNothing happens when i hover over the squares.
- jmstfv 5y agoYou 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.
- eadz 5y agoSee also https://144blocks.com/ https://144blocks.com/
- iamben 5y agoCool 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!).
- jmstfv 5y agoDone, thanks!
- dTal 5y agoI 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.
- jiehong 5y agoIf 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 https://www.pulju.net/images/products/24h-clock_orig.jpg [1]: https://apps.apple.com/de/app/sundial-solar-lunar-time/id976460540?l=en https://apps.apple.com/de/app/sundial-solar-lunar-time/id976...
- ge96 5y agohehe 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.
- flipdot 5y agoI 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.
- mhb 5y agoSuggestion: Change the cursor when hovering over the text. I didn't understand whether to hover over the text or the rectangles.
- jaclaz 5y agoSide 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.
- sombremesa 5y agoI've been using https://144blocks.com https://144blocks.com, is this inspired by that?
- paxvinci 5y agoApart 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.
- Waterluvian 5y agoI’m hovering over on my phone but it’s not doing anything!
- HardwareLust 5y agoIt's a cool idea, but what exactly am I supposed to do or get from this?
- chadlavi 5y agoWhy doesn't this work with Adblock on?
- deleted 5y ago[deleted]
- yesenadam 5y agoIn Sydney it's 9pm but by the looks of the Rectangles they think it's 10pm.
- higgins 5y agoI prefer the day visualized as 86400 rectangles (https://24HourHomepage.com https://24HourHomepage.com)