{"id":270825,"date":"2018-05-28T08:33:32","date_gmt":"2018-05-28T15:33:32","guid":{"rendered":"http:\/\/css-tricks.com\/?p=270825"},"modified":"2018-05-28T08:33:32","modified_gmt":"2018-05-28T15:33:32","slug":"solving-lifes-problems-with-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/solving-lifes-problems-with-css\/","title":{"rendered":"Solving Life\u2019s Problems with CSS"},"content":{"rendered":"

Or: When all you have is a CSS hammer, the world looks like a CSS nail.<\/strong><\/p>\n

Whenever I hear a perfectly nice comment like, “Yeah, representing the tech<\/strong> field!”<\/em> in response to my pure-CSS art<\/a>, I get a sharp feeling of panic. <\/p>\n

Like many people who work on UIs<\/abbr> for a living, I have difficulty applying the “tech” term to myself without feeling like a fraud. Impostor syndrome is a hard thing to shake. A front-end specialist? Oh, you mean the stuff that isn\u2019t really code?<\/em> That amps up the feeling from impostor<\/em> to villain<\/em>.<\/p>\n

Even though 90% of my daily work revolves around JavaScript, I feel as if the “tech” label is a shiny trophy that I greedily snatched from someone more deserving. As if there are nameless, starving computer science grads out there and I\u2019m stealing the ramen right out of their mouths.<\/p>\n

<\/p>\n

Take for example this scenario that computer-science schooled people are probably familiar with:<\/p>\n

\n

\n CS Course Problem:<\/strong> Write a script that sorts then randomizes this dataset N times, but for every 8th Q print 12 trees stacks queues void flip flop and you don\u2019t stop rockin\u2019 till returning the sum of the results 4x + 3y.<\/p>\n

\n My proposal:<\/strong> (12 hours and eight gallons of coffee later<\/em>) Done! Here are 1,200 lines of beautifully formatted code! There are forty-three loops, thirty-two if\/else conditions, and eighty-three lines of comments because I keep getting lost in the file — but I\u2019ve achieved the exact desired result!\n <\/p>\n

\n CS Course Answer:<\/strong> Use three lines of recursion.\n <\/p>\n

\n My response:<\/strong> …%#@& you.\n <\/p>\n<\/blockquote>\n

An exaggeration, but it\u2019s helpful to be regularly humbled like that. It helps you grow as a programmer, problem-solver, and human. Plus, it prepares you for real-world scenarios in your career where you will regularly come across interesting challenges that require a bit of creative thinking.<\/p>\n

When it comes to the CSS side of things, no employer will ever ask you to produce a detailed painterly CSS art piece. If they do, you really should immediately report that as harassment to HR. But it is<\/em> very common to have a small and sometimes unusual request. One that may not have an obvious solution right away. <\/p>\n

The “tech-free” CSS — with its glaring lack of programming functions — may not immediately come to mind when given such a challenge. But make no mistake, it can be one of the most valuable tools in your algorithm arsenal! For example:<\/p>\n

\n

\n CSS Course Problem:<\/strong> A disclaimer message needs to pop up into view as a warning when a user clicks a certain input field.\n <\/p>\n

\n Proposal:<\/strong> Piece of cake! We use our trusty friend JavaScript to trigger a click or focus event on the input element. Then we load the disclaimer template. Then we make an Ajax call for content. Once our Promise()<\/code> is resolved, we append the element to the page and find where to insert it by way of finding the event.target<\/code>\u2019s parent element. After the disclaimer is loaded, we need to ensure that we\u2019ve handled another click event on the actual disclaimer itself to toggle out of it. Once we\u2019ve toggled out of it, we destroy the element. If the input is clicked again, we repeat this process.\n <\/p>\n

\n CSS Course Solution:<\/strong> input:focus + .disclaimer { display: block; }<\/code>\n <\/p>\n

\n Response:<\/strong> …%#@& off.\n <\/p>\n<\/blockquote>\n

Again, it\u2019s an exaggeration (and the world\u2019s least efficient JavaScript solution), but it\u2019s only a slight exaggeration. I see those types of proposals being put to use way<\/em> more often than you\u2019d expect. Being able to provide ridiculously quick solutions to what have long been thought of as lengthy JavaScript problems? That\u2019s one of the ways in which CSS allows me to feel like a master of tech.<\/strong><\/p>\n

This is just one of the many things I love about CSS. The limited set of rules is exactly what makes it so fun. You don\u2019t expect<\/em> CSS to fulfill all of your needs, which is what makes it all the more rewarding when you end up finding a way that it can.<\/p>\n

Now, say there\u2019s a design challenge. You\u2019re asked to implement this shape in the browser:<\/p>\n

\"A<\/figure>\n
\n

\n Proposal 1<\/strong>: “There\u2019s no “reverse-border-radius” property to create that shape in CSS, so that\u2019s not possible. Just embed an image. Duh.”<\/em>\n <\/p>\n

\n Answer 1:<\/strong> Okay fine, don\u2019t learn CSS for all I care.\n <\/p>\n<\/blockquote>\n

No please come back! I want you to learn.<\/p>\n

It’s true that no one will penalize you for using an image. There are no CSS police enforcing this rule. Hell, there aren\u2019t even any computer science police stopping you from using a terrible billion-line algorithm instead of a beautifully simple recursive one. But if there\u2019s any concept to be shared between CSS and CS<\/abbr> it\u2019s that “not possible” is hardly ever the answer.<\/strong><\/p>\n

So let\u2019s try a brute-force method, shall we?<\/p>\n

\n Proposal 2<\/strong>: Start with a black rectangle, then notch out the sides with two border-radiused <div><\/code> elements that match the white background color, like so:\n<\/p><\/blockquote>\n

\"A<\/figure>\n

\n Answer 2:<\/strong> Alright! Now we\u2019re getting somewhere. The shape is coming together. But what if the background is varying? Or a gradient? Or an image? How would that look?\n<\/p><\/blockquote>\n

\"A<\/figure>\n

Hm. No longer looks quite as nice. So how we do allow our natural background to shine through, while still keeping a sloping-inward shape — something that CSS isn\u2019t natively built to support?<\/p>\n

\n Proposal 3<\/strong>: Keep the rectangle. Keep the curved divs. But don\u2019t fill the rectangle with color, and don\u2019t fill the curved divs with color either. Instead, spread the black color outside<\/em> of the curved divs, using box-shadow<\/code>. The rectangle will simply need an overflow: hidden;<\/code> to keep that box-shadow<\/code> color contained within its boundaries.\n<\/p><\/blockquote>\n

\"The<\/figure>\n

\n Answer 3:<\/strong> Well done! Beautiful!\n<\/p><\/blockquote>\n

The above technique has been described in even better detail in Ana Tudor\u2019s excellent post on scooped corners<\/a>. And it\u2019s an excellent concept to keep in mind when presented with \u201cnot possible with CSS\u201d problems. It\u2019s one that I love to use when creating art.<\/p>\n

Take, for example, this portion of one of my CSS paintings:<\/p>\n

\"A<\/figure>\n

The human neck unfortunately does not usually come conveniently packaged in a perfect rectangular shape. But HTML does, so that\u2019s what we have to work with.<\/p>\n

But wait, isn\u2019t that neck-shape pretty similar to the curvy black shape that we outlined above?<\/p>\n

\"A<\/figure>\n

Yep, it all started with a big rectangle. In this case, our outward-curving divs just used a softer blending on their box-shadow.<\/p>\n

Outside of work, I keep coming back to CSS for artistic inspiration.<\/h3>\n

Because something about those limitations just calls<\/em> to me. I know I\u2019m not alone when I say that a rigid set of restrictions is the best catalyst for creativity. Total artistic freedom can be a paralyzing concept.<\/p>\n

That can sometimes be the case with programming. If you have the most powerful programming languages in the world at your disposal, it starts to seem natural that you should then have no difficulty solving any programming problem. With all these amazing tools offering countless solutions to solve the same problem, it’s no wonder that we sometimes freeze up with information overload.<\/p>\n

Sure, CSS can be thought of as not being a \u201ctrue\u201d component of the tech stack. I would not even argue against that. Let’s face it, pure CSS is not about recursion or data storage or database-querying. Its primary purpose is indeed for prettification — which doesn\u2019t exactly help the stigma of front-enders not being \u201creal\u201d techies or programmers.<\/p>\n

CSS never made any bold claims or promises. It has merely offered assistance, and it just turns out that its assistance can be downright heroic.<\/p>\n

If you are a front-ender who has to deal with a bunch of DevOps folks mocking their CSS, just wait and see what the response is when you sneak a body { display: none; }<\/code> onto production. We’ll see who’s laughing then!*<\/sup><\/p>\n

\n

*<\/sup> They will still be the ones laughing because you will be fired. Please don’t do this.<\/p>\n","protected":false},"excerpt":{"rendered":"

Or: When all you have is a CSS hammer, the world looks like a CSS nail. Whenever I hear a perfectly nice comment like, “Yeah, representing the tech field!” in response to my pure-CSS art, I get a sharp feeling of panic. Like many people who work on UIs for a living, I have difficulty […]<\/p>\n","protected":false},"author":252792,"featured_media":270857,"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":"Solving Life\u2019s Problems with CSS! @cyanharlow shares how she uses limitations for the inspiration behind her CSS art.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[644,1142],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/css-art.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/css-art.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270825"}],"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\/252792"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=270825"}],"version-history":[{"count":18,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270825\/revisions"}],"predecessor-version":[{"id":270872,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270825\/revisions\/270872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/270857"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=270825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=270825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}