Is Today A Bones Day?
What is a “Bones Day”?
If you’ve spent any time on the meme-heavy parts of the internet the past few weeks (especially TikTok), you are probably all too familiar with the concept. If you haven’t, this probably seems like a nonsensical phrase. Over the past few weeks, the internet has become enamored with a 13-year-old pug named Noodle. Every morning, Noodle’s owner Jonathan Graziano tries to pick Noodle up. On some days, Noodle just flops back down to the ground as if he has no bones in his body — a “no bones” day. On other days, he is able to stand upright and make use of his skeletal system — a “bones” day. These days have morphed into a prediction of the type of day we can expect to have, reminiscent of astrology or a groundhog seeing its shadow. On a Bones Day, you can expect a day of productivity, risks paying off, and treating yourself. On a No Bones Day, it is better to take it easy, indulge in some self-care, and, for some TikTok users, take the day off of work. With over 4 million followers for Graziano, countless Noodle-inspired TikToks from fans, and write-ups from the likes of CNN and The New York Times, it is safe to say Noodle and his oracle-like tendencies have taken the internet by storm.
Inspired by the way I’ve seen friends, family, and strangers on the internet anxiously await the pug’s prediction each morning, I decided to create a site that will let users know if it is a Bones or No Bones Day.
Building the Site: Planning
The idea behind the site was simple — let people know if today is a Bones Day or a No Bones Day. I knew I wanted the site’s aesthetic to be reminiscent of early 2000s/early 2010s meme sites or the site IsMercuryInRetrograde — simple, plain, and focused on nothing but the answer the users came to see. While in an ideal world I would be able to pull the data on the day’s predictions from an API or another source automatically, that does not seem to exist for Noodle. As a result, I will have to manually update it every day as predictions come in. Because of this, I knew I wanted to build it in something that would be easily reusable and make the amount of time I’d have to spend on updating each day minimal — making React the best choice.
Building the Site: Components
Before starting on the components, I built out App.js to contain the components I would need. Since I knew I would want a header displaying the text “Is Today A Bones Day?” on the page no matter what, I included that. Below that h1 tag is where our components will go — but first they need to be built.
I created four components — Bones, NoBones, Footer, and Updated. Bones and NoBones are very similar — they both contain large text indicating it is a Bones Day or a No Bones Day, a photo of Noodle and Graziano in either a Bones or No Bones position, and a description of what that prediction means. I then created the Updated component, which is simply text letting the user know when it was last updated so that they do not confuse a previous prediction with today, in the case that a prediction has not been made yet for the current day. I placed that component within both the Bones and NoBones components so that it was easier to update manually. Finally, I built the Footer component, which provides credit and directs the user to Graziano’s TikTok page to check out the content for themselves.
Once these components were built, I imported them into App.js. I place either <Bones /> or <NoBones /> below the “Is Today a Bones Day” text each morning when a prediction is made — a very easy and reusable way of manually updating. Then I add the <Footer /> component below that, although that does not change.
In the end, my App.js code is very clean and easy to update:
Building the Site: Styling
As I mentioned before, I felt that the aesthetic people would expect for this site would be a plain one reminiscent of the early days of web design. As much as it pained me to make such simple styling choices, I felt it was important. The entire site essentially lives centered on the page on a tan background with simple fonts. I added some padding, alignment, etc. to make all of the elements cohesive, but I essentially left it at that.
More Information
To see the site in action, you can visit IsItABonesDay.
To see my code, you can check out my git repo.
To see Noodle in action, you can check out Jonathan Graziano’s TikTok.
If you’ve spent any time on the meme-heavy parts of the internet the past few weeks (especially TikTok), you probably understand what this question is referring to. If you haven’t, this probably seems like a nonsensical question. Over the past few weeks,
