{"id":321187,"date":"2020-09-23T15:34:52","date_gmt":"2020-09-23T22:34:52","guid":{"rendered":"https:\/\/css-tricks.com\/?p=321187"},"modified":"2020-10-05T07:58:14","modified_gmt":"2020-10-05T14:58:14","slug":"the-empty-box","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-empty-box\/","title":{"rendered":"The Empty Box"},"content":{"rendered":"\n

When I was in high school, we learned about \u201cThe Black Box<\/a>\u201d which is concept in theater. If memory serves me right, the approach was a simple and elegant one: that you can take any space, any black box, and make it come to life with a story. I liked the idea that it’s possible to convey anything, tell any story, and create any reality \u2014 all in the confines of what equates to a black box, a simple room that requires a curtain and very little else.<\/p>\n\n\n\n

It\u2019s an exciting concept. You see something extremely polished like a studio-produced movie. One might think, \u201cNo way I could do that.\u201d All the scripts, the actors, the production, animation, set, props, everything. Where do you even begin?<\/p>\n\n\n\n\n\n\n\n

But looking at things through The Black Box model, we distill the movie down to its essence, the story. We can see it as some folks telling a story in a stark, empty room. Take Thor: Ragnarok<\/em><\/a>, a movie I really enjoy. It has incredible special effects, bits of humor, tension, relationships and stories that are well told. Sibling rivalry?<\/em> Most of us know of or have seen something like that. Someone confronting you and you’d like to escape?<\/em> We have all likely dealt with a challenge like that.<\/p>\n\n\n\n

Those are the stories. The special effects and polished production? Those merely dress up the stories but aren’t necessary to convey the story. But still, how do you get from a black box to a large scale production?<\/p>\n\n\n\n

Or, put in a different context: how do we get from an idea to a full-fledged website or app? You see all of these incredible sites around you and could easily fall into a trap of thinking anything you put out needs to meet the same scale and production. But let’s pull the curtain back on that and play with the idea that…<\/p>\n\n\n

Apps are the box<\/strong><\/h3>\n\n\n

Programmers are literal creatures, so instead of a \u201cblack box,\u201d which has different connotations in tech, I\u2019ll switch it up and call it an \u201cempty box\u201d \u2014 even though that also has roots in other metaphors, such as a the “tabula rasa”<\/a> (clean slate) in art, which is a very similar concept.<\/p>\n\n\n\n

If you look at an apps like Notion, Airbnb, or Etsy as newcomers to the industry, the yes, it might seem impossible how you might get from learning basic CRUD operations to working on an application at the same scale, state and complexity as those apps. But what happens if we flip the script? Instead of thinking about building the entire universe from scratch, maybe we start with an empty box, one that only holds the core use case or problem that’s being solved. We can decide what we’re going to create with this small bit of space we have in the world.<\/p>\n\n\n\n

It’s a nice way to dial back the scope. Of course, people might use our sites in myriad ways, but when you peel back every usage, every feature, and compare what else is out there, what is the purpose? Sometimes we work at big companies with lots of competing priorities \u2014 so many that if you ask different folks, you’ll likely get a wide range of answers. And certainly any app with any level of complexity has to cater to many user needs.<\/p>\n\n\n\n

However, I wonder if it might serve us to be able to answer that question with clarity. Particularly when we’re just starting out.<\/p>\n\n\n\n

You have an empty box.<\/strong> What can you build in that space? You can engage people all around the world instantly in any way. You can create any interaction. What is that interaction and what is it trying to convey? What is going to make it relatable? What’s going to get the message across?<\/p>\n\n\n\n

Forget about all the production and complexity you could<\/em> build. What’s the purpose you want to convey at the core? What are you most excited about? What’s the solution to the problem right in front of you?<\/p>\n","protected":false},"excerpt":{"rendered":"

When I was in high school, we learned about \u201cThe Black Box\u201d which is concept in theater. If memory serves me right, the approach was a simple and elegant one: that you can take any space, any black box, and make it come to life with a story. I liked the idea that it’s possible […]<\/p>\n","protected":false},"author":7699,"featured_media":321200,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18714,18715,18716],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/b63f8a3d565c7c6e3737f950cb032131dcfee5ee.jpeg?fit=767%2C512&ssl=1","jetpack-related-posts":[{"id":161608,"url":"https:\/\/css-tricks.com\/international-box-sizing-awareness-day\/","url_meta":{"origin":321187,"position":0},"title":"International box-sizing Awareness Day","date":"February 1, 2014","format":false,"excerpt":"It's February 1st today, which I've decided to declare International box-sizing Awareness Day. In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing. The date corresponds to Paul Irish's post where he introduced the concept of using it on every single element\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":209210,"url":"https:\/\/css-tricks.com\/using-multi-step-animations-transitions\/","url_meta":{"origin":321187,"position":1},"title":"Using Multi-Step Animations and Transitions","date":"December 10, 2015","format":false,"excerpt":"CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation on an element. If you haven't worked with them, you can level up on the syntax right here in the Almanac. While the concept is simple, there\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5380,"url":"https:\/\/css-tricks.com\/new-screencast-css3-slideup-box\/","url_meta":{"origin":321187,"position":2},"title":"New Screencast: CSS3 Slideup Boxes","date":"November 8, 2010","format":false,"excerpt":"Follow along as we use a few very simple CSS3 transitions to create a \"slideup\" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":255404,"url":"https:\/\/css-tricks.com\/aspect-ratio-boxes\/","url_meta":{"origin":321187,"position":3},"title":"Aspect Ratio Boxes","date":"June 8, 2017","format":false,"excerpt":"I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/bad-design-territory.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":338290,"url":"https:\/\/css-tricks.com\/float-an-element-to-the-bottom-corner\/","url_meta":{"origin":321187,"position":4},"title":"Float an Element to the Bottom Corner","date":"April 19, 2021","format":false,"excerpt":"Need to lay out an element to the right or the left, such that text wraps around it? That\u2019s an easy task for the float property. But what about if you also want to push that element (let\u2019s call it an image) to one of the bottom corners while we\u2019re\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":261309,"url":"https:\/\/css-tricks.com\/breaking-css-box-shadow-vs-drop-shadow\/","url_meta":{"origin":321187,"position":5},"title":"Breaking down CSS Box Shadow vs. Drop Shadow","date":"October 20, 2017","format":false,"excerpt":"Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property. I still reach for drop shadows often in my work because they add\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/10\/box-drop-shadow-compare.png?fit=651%2C422&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321187"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=321187"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321187\/revisions"}],"predecessor-version":[{"id":322677,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321187\/revisions\/322677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/321200"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=321187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=321187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=321187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}