“tabula rasa”<\/a> (clean slate) in art, which is a very similar concept.<\/p>\n\n\n\nIf 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\nForget 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}]}}