<!DOCTYPE html>
<html>
<head>
<style>html,body,table { line-height:1.5; } body { margin:0;padding:0; } h1,h2,h3,h4,h5,h6 { font-weight:bold;font-style:normal;font-size:1em;margin:0; } h2 { margin:1em 0; } h3 { margin:1em 0; } h5 { font-style:italic; } h6 { font-weight:normal;font-style:italic; } p,ol,ul,figure,blockquote,.spaced-block { margin:1em 0; } img { border:0;height:auto;line-height:100%;outline:none;-webkit-text-decoration:none;text-decoration:none; } body,table,td,a { -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table,td { border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt; } table td { vertical-align:top; } img { -ms-interpolation-mode:bicubic;max-width:100%; } * { -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } hr { margin:36px 0;border:0;height:1px;background:#eee; } ul,ol { margin-left:1em;padding:0;list-style-position:outside; } ol ol,ul ul,ol ul,ul ol { padding:0 0 0 1em; } li { padding:0 0 0 1em;margin:0 0 0 1em; } .email-button { border:0 none; } .built-with { width:100%;max-width:640px;margin-left:auto;margin-right:auto; } </style>
<style>.ck-link { text-decoration: underline; }</style>
<style>.ck-link { text-decoration: underline; }</style>
<style>@media only screen and (max-width:600px) { .email-container { padding:0 !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen and (max-width:600px) { .ck-padding-left-none { padding-left:0px !important; } .ck-padding-right-none { padding-right:0px !important; } .ck-padding-left-mobile-friendly { padding-left:18px !important; } .ck-padding-right-mobile-friendly { padding-right:18px !important; } }
@media only screen and (max-width:600px) { .ck-layout-block.ck-layout-stack td { display:block !important;width:100% !important;padding:0 !important; } .ck-column.ck-column-stack { margin-bottom:32px !important; } .ck-padding-3-top-mobile-friendly { padding-top:12px !important; } .ck-padding-3-right-mobile-friendly { padding-right:12px !important; } .ck-padding-3-bottom-mobile-friendly { padding-bottom:12px !important; } .ck-padding-3-left-mobile-friendly { padding-left:12px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="background-color:#ffffff"><table role="presentation" cellpadding="0" cellspacing="0" class="email" style="background:#ffffff !important;width:100%" bgcolor="#ffffff"><tbody><tr>
<td><div class="email-container normal" style="padding-top:0;padding-left:0;padding-bottom:30px;padding-right:0;margin:0 auto;max-width:100%"><table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:100%;margin:0 auto;background-color:#ffffff"><tbody><tr><td>
<div class="ck-section" style="margin:30px auto 7px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="border-radius:0px;box-sizing:border-box;mso-padding-alt:0px 4px 0px 4px"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:0px 4px 0px 4px"><div style="margin-left:auto;margin-right:auto">
<table class="ck-layout-block" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5" style="background-color:#f5f5f5;padding:18px 18px 18px 18px;margin:24px 0px 24px 0px;border-radius:6px 6px 6px 6px;overflow:hidden"><tbody><tr><td as="td" class="ck-column ck-column-1" width="100%" style="background-size:cover;background-position:center;border-radius:0px;box-sizing:border-box;vertical-align:top"><div style="padding:0px 0px 0px 0px"><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:15px;color:#353535;font-weight:400;line-height:1.5;margin-top:8px;margin-bottom:8px" class=""><strong>PRE-S:</strong> With my course CSS Demystified about to relaunch, I'm going to be sending a lot more emails than usual. If you'd like, you can stay on my regular Sunday list, but <a href="https://b59b20d1.click.convertkit-mail4.com/zlu50moeophnhk6qqdkfphwg7env5t6h8geo/n2hqn6xwfvhvq6zw72u0/aHR0cHM6Ly93d3cua2V2aW5wb3dlbGwuY28vdXBkYXRlZC8=" trigger-id="5625195" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1842947053">opt-out of the extra emails</a>.</p></div></td></tr></tbody></table>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Hello my front-end friend,</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">I’m sure you’ve seen this before.</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align:left;table-layout:fixed;float:none" class="email-image"><tbody><tr><td align="left"><figure style="margin-top:12px;margin-bottom:12px;margin-left:0;margin-right:0;max-width:288px;width:100%"><div style="display:block"><img src="https://embed.filekitcdn.com/e/2FGnzMxCkLji5nfXx8Zaar/5awUK1XLSVar9U1hDhjSTr" alt="CSS is awesome meme, where the word awesome is overflowing the box that the text is in" width="288" height="auto" style="display:block;border-radius:4px 4px 4px 4px;width:288px;height:auto;object-fit:contain"></div></figure></td></tr></tbody></table>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Most people use it to poke fun at CSS and use it as an example of one of the many problems with CSS.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">The thing is, <strong>it’s actually an example of how CSS solves a problem</strong> the user created.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Most problems we run into don’t happen because CSS is broken or a bad language. They happen because we’re not approaching CSS with the right mindset.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">CSS was created and continues to evolve based on a very important principle: <strong>the author of the CSS doesn’t control how the content is displayed, the user does</strong>.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">This makes it very different from other languages because we have to try and style things without all the information.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">We don’t know:</p>
<ul class="unordered_list" style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;text-align:left">
<li class="list_item"><span>What device the user is on</span></li>
<li class="list_item"><span>The size of their viewport</span></li>
<li class="list_item"><span>What browser are they using</span></li>
<li class="list_item"><span>Whether they’re even using a browser</span></li>
<li class="list_item"><span>Their input device (mouse, keyboard, touch, voice)</span></li>
<li class="list_item"><span>And the list goes on</span></li>
</ul>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class=""><strong>CSS was designed for this uncertainty.</strong> It’s not a bug, it’s the entire point.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">That’s why we have the CSS is Awesome meme. The text is overflowing outside of the box. People laugh and say “there goes CSS being weird again” and point to it as a problem with the language, rather than realizing if that were to happen, it's because they declared a fixed width on the box.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">In other words, it would have worked fine, but they wrote CSS that got in the way and caused a problem. </p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">If a user visited a page on their phone and the font size was too big (or there is a long word that's causing a problem), would it be better if the title was cut off and we are missing half the word, or would it be better if there was some overflow and the user could scroll to the side to be able to read it all?</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Ideally, the text wouldn’t overflow at all, but if it does, <strong>we wrote the CSS that caused it</strong>. CSS just tried to work around our mistake.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Our job, when writing CSS (whether that’s regular CSS or using something like Tailwind, or maybe a preprocessor like SCSS), is to consider that someone might be on a small or very big viewport, and write CSS that can adapt to those situations, along with everything in between.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">We need to make accommodations in our layouts and styles, not because CSS is broken, but because <strong>the web is a medium of unknowns, and CSS is the only language that has to deal with that head-on</strong>.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">We can’t hard-code things because CSS doesn’t exist in a hard-coded world. It lives in a world of variables we can’t control.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">But we <em>can</em> learn to work with it instead of against it. More on that tomorrow.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Cheers, <br>Kevin</p>
<div>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto"><tbody><tr><td><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">P.S. I’ll be in your inbox quite a bit over the next week or so. If that’s not for you and you’d like to just get my regular Sunday emails, <a href="https://b59b20d1.click.convertkit-mail4.com/zlu50moeophnhk6qqdkfphwg7env5t6h8geo/vqhqe4w7hrho0ez2wmaw/aHR0cHM6Ly93d3cua2V2aW5wb3dlbGwuY28vdXBkYXRlZC8=" trigger-id="5625201" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1842947053">click here to opt out of these extra emails</a>.</p></td></tr></tbody></table></div>
<hr style="margin-top:48px;margin-bottom:48px">
</div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
<div class="ck-section" style="margin:0px auto 24px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="background-color:#f7f7f7;border-radius:0px;box-sizing:border-box;mso-padding-alt:18px 18px 18px 18px" bgcolor="#f7f7f7"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:18px 18px 18px 18px"><div style="margin-left:auto;margin-right:auto;max-width:640px"><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:15px;color:#747474;font-weight:400;line-height:1.5" class=""><a href="https://b59b20d1.unsubscribe.convertkit-mail4.com/zlu50moeophnhk6qqdkfphwg7env5t6h8geo" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">Unsubscribe</a> · <a href="https://preferences.convertkit-mail4.com/zlu50moeophnhk6qqdkfphwg7env5t6h8geo" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">Preferences</a><br>600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246</p></div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
</td></tr></tbody></table></div></td>
<td></td>
</tr></tbody></table></div>
<!-- -->
<img src="https://b59b20d1.open.convertkit-mail4.com/zlu50moeophnhk6qqdkfphwg7env5t6h8geo" alt="" style="display:block">
</body>
</html>