Chris Braccoweb design, engineering, management2022-11-07T00:00:00Zhttps://chrisbracco.comChris Braccohello@chrisbracco.comThinking in Systems by Donella H. Meadows2022-11-07T00:00:00Zhttps://chrisbracco.com/thinking-in-systems-by-donella-h-meadows/<p>Donella Wright devoted her life to analyzing and modeling complex systems. <em>Thinking in Systems</em> takes the reader by the hand and walks them through the evident, the shared, and the mysterious characteristics and behaviors entwined in all kinds of complex systems that we encounter and create in our universe.</p>
<p>The patterns of systems and behaviors therein that Donella lays out are somehow both obvious and shocking at the same time. She is able to break down complex ideas into clear explanations and visuals in a way I’ve yet to encounter until now. This book has cracked my head wide open and has me buzzing about the abstracted but still complex (to me) web engineering systems that I work within, wondering about what leverage I can pull to improve the systems in which I have some agency and influence.</p>
Doughtnut Economics by Kate Raworth2022-06-14T00:00:00Zhttps://chrisbracco.com/doughnut-economics-by-kate-raworth/<p>Kate Raworth encourages us to rethink and redraw economics to restore Earth as a safe and just space for humanity. She provides an insightful historical perspective that was enlightening for someone like me with a barebones economics background.</p>
<p>She appreciates and emphasizes the importance of strong visuals and uses it as a recurring theme in the book, attempting to redraw many classic economic graphs and visualizations to more closely reflect reality and question previous assumptions. I really like her emphasis on systems thinking and complexity science, which can help to identify the levers available to make changes with high impact.</p>
<p>She quotes from some other books I have found impactful, such as <em>Propaganda</em> by Edward Bernays and <em>Ways of Seeing</em> by John Berger. It was interesting how she tied all of these themes together.</p>
<p>While I tend to agree that something like the “doughnut” is a much healthier way to think about macro economics, I am left wondering if we can really steer the ship of global economics before it’s too late.</p>
How To Win Friends and Influence People by Dale Carnegie2022-05-23T00:00:00Zhttps://chrisbracco.com/how-to-win-friends-and-influence-people-by-dale-carnegie/<p>I finally got around to reading this classic, and it did not disappoint. <i>How To Win Friends and Influence People</i> goes well beyond the title, professing the many different ways to behave in order to effectively foster and maintain strong relationships, create opportunities, and lead others. I found the leadership portion of this book especially valuable.</p>
<p>A lot of what Dale preaches around social dynamics sounds like common sense, yet many of us often behave differently in our daily lives. We often get bogged down by our current predicaments and forget to pause, listen to others around us, and act accordingly. This book serves as a great reminder of simply how to be a good person. Dale walks the reader through story after story highlighting the application and effectiveness of his principles, and keeps it simple. What’s also interesting is how some people of great importance and popularity at the time of writing have faded into the background of history. It was interesting to learn about some of these folks in this context.</p>
Notes on networking2022-02-16T00:00:00Zhttps://chrisbracco.com/notes-on-networking/<p><em>Jotted these down after watching <a href="https://www.youtube.com/watch?v=AbQeo6Zob_M">(Coffee Club) Episode 7: Take your Tech Career to the Next Level with Networking</a></em>.</p>
<ul>
<li>Networking is every interaction you have</li>
<li>Focus on relationships first</li>
<li>Begin with a simple question, a small ask or inquisition</li>
<li>Making little deposits all the time add up to something bigger</li>
<li>More about giving than taking</li>
<li>A personal newsletter is a form of networking</li>
<li>Who knows that “you know what you know”?</li>
<li>Build relationships and skillsets before you need them</li>
<li>Ask exactly the question you need the answer to, and let them decide how to answer</li>
<li>Reach people on the platforms they like to use</li>
<li>Follow up with advice givers after you’ve tried the advice</li>
<li>Following up means you are now building a relationship</li>
<li>Person first, resource second</li>
</ul>
The Manager’s Path: A Guide for Tech Leaders Navigating Growth & Change by Camille Fournier2022-02-14T00:00:00Zhttps://chrisbracco.com/the-managers-path-by-camille-fournier/<p><em>The Manager’s Path</em> is a fantastic field guide for tech leaders at any level. As someone who made the leap from software engineer to engineering manager at a rapidly growing tech company, I found tons of useful nuggets and reminders in this book that I am excited to implement, apply, and have earmarked for later.</p>
Crossing the Chasm: Marketing and Selling Disruptive Products to Mainstream Customers by Geoffrey A. Moore2021-12-18T00:00:00Zhttps://chrisbracco.com/crossing-the-chasm-by-geoffrey-a-moore/<p>If you can get past the incessant jargon, there are a lot of really interesting insights and real-world examples offered in <em>Crossing the Chasm</em>. The author identifies many common patterns and pitfalls of high-tech companies, and walks the reader through strategies for successful growth and market domination.</p>
<p>The concept of the “chasm” is easy enough to comprehend. Where I struggled to follow along was in some of the “how”. There are a lot of situational “if this, then that” and “definitely don’t do this, but you must do that” recommendations. This can make some chapters a bit tough to absorb and require several re-reads.</p>
<p>This book was a slog for me, but ultimately a worthwhile one.</p>
An Elegant Puzzle: Systems of Engineering Management by Will Larson2021-12-11T00:00:00Zhttps://chrisbracco.com/an-elegant-puzzle-by-will-larson/<p><em>An Elegant Puzzle</em> is a field guide for engineers who have taken the leap into management and are navigating through the complexities abound. This book is packed with concrete strategies, examples and resources pulled from Will Larson’s prolific blog and elsewhere. As someone new to the pursuit, reading this book has my brain buzzing and excited with ideas to try out with my team to help us stay happy, purposeful, motivated, and productive.</p>
<p>It’s already helped me work through some challenging situations and provides useful frames of reference for fuzzy areas like hiring, career paths and growth, performance reviews, and more. The recommended reading section has helped me build out an informal curriculum for myself so I can continue learning and tailoring my management skills for years to come. It’s one of the few physical books I am most glad to have on my shelf. Thanks Will!</p>
CSS “or” style dividers with a single DOM element2021-12-09T00:00:00Zhttps://chrisbracco.com/css-or-style-dividers/<p>Interfaces often ask folks to choose between a set of actions. Fill out this field or that field. Press this button or that button. A common way to visually represent these "or" choices is to separate the choices visually with a line. A line by itself usually is not enough to imply the "or" choice, though. Accompanying text can help, too.</p>
<p>I wanted to create a component that could provide this solution as a single DOM element with nested text, and support both vertical and horizontal orientations. Something along these lines:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Or<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>A bit of toying around <a href="https://codepen.io/cbracco/pen/mdBEOOx">in Codepen</a>, and I landed on something useful and flexible. The vertical version uses some absolute positioning hacks, and the horizontal version uses some negative margin hacks.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="mdBEOOx" data-default-tab="css,result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
How to Live: 27 conflicting answers and one weird conclusion by Derek Sivers2021-12-01T00:00:00Zhttps://chrisbracco.com/how-to-live-by-derek-sivers/<p>A collection of cliche, quippy, and contradictory statements about how to live life, presented in a tongue-in-cheek sequential summary format. It’s like reading the last page of twenty seven different self-help books all at once.</p>
<p>It’s a fun little book to read through once, collect your favorite quips, and revisit them periodically.</p>
Responsive two-column login page with CSS flexbox2021-10-22T00:00:00Zhttps://chrisbracco.com/css-flexbox-login-page-design/<p>A trend has emerged recently for signup, login and other authentication-style pages that you’ll find in most modern web applications. Several tools I use on a daily basis for work have started using a two-column design for these pages, with the form located on one side and some sort of call-to-action or reminder of the value proposition on the other.</p>
<p>I quite like the trend, so I whipped up a proof-of-concept using CSS flexbox. The layout switches to one-column for smaller devices, and creates some visual separation between the login form and the rest of the page content using white space and shadows.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="JjyRXXx" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
Songs that make me think of family2021-08-12T00:00:00Zhttps://chrisbracco.com/songs-that-make-me-think-of-family/<p>In no particular order:</p>
<ul>
<li>The B-52s - Roam</li>
<li>No Doubt - Just A Girl</li>
<li>U2 - All Because Of You</li>
<li>Cranberries - Zombie</li>
<li>Red Hot Chili Peppers - Parallel Universe</li>
<li>Bruce Springsteen - Thunder Road</li>
<li>Smashing Pumpkins - Tonight, Tonight</li>
<li>Nirvana - Polly</li>
<li>Green Day - Longview</li>
<li>Third Eye Blind - Jumper</li>
<li>Led Zeppelin - Over the Hills and Far Away</li>
<li>Mountain - Mississippi Queen</li>
<li>Andrea Bocelli - Con te partiro</li>
<li>Soundgarden - Burden In My Hand</li>
<li>Bruce Springsteen - Hungry Heart</li>
<li>Oasis - Don’t Look Back In Anger</li>
<li>Alanis Morissette - You Oughta Know</li>
<li>Jane’s Addiction - Mountain Song</li>
<li>Alice In Chains - Rooster</li>
<li>Lucinda Williams - Something About What Happens When We Talk</li>
</ul>
Atomic Habits by James Clear2021-07-28T00:00:00Zhttps://chrisbracco.com/atomic-habits-by-james-clear/<p>James lays out a digestible framework for building and breaking habits. His breakdown of habit formation into the Cue, Craving, Response, Reward (CCRR) feedback loop supports common sense in a lot of ways, and it’s re-assuring to see some formal research and anecdotal evidence to support his claims.</p>
<p>The anecdote about the British cycling team did not age well, but I appreciate that he was able to <a href="https://jamesclear.com/atomic-habits/cycling">link to some updates</a> in a footnote before the book was officially published.</p>
<p>The book uses the same narrative devices that all modern self-help and business books have come to rely on. I found myself speed-reading through certain sections because I could already see where the passage was headed. That said, there are some great nuggets that can be extracted from the book.</p>
<p>While reading I identified several smaller areas of my life where I could immediately apply some of these concepts. <em>Make it obvious</em> can go a long way, especially for smaller habits. When the floss picks are next to my tooth brush on my bathroom vanity, and vitamins are on the kitchen counter, I am more likely to use them.</p>
<p>Mapping back to identity is also a very deep way to sustain habits. Reflecting on whether or not a habit supports the person you want to be can motivate me to keep going in times when I’m feeling bored, lazy, or uninspired. A yearly reflection is also a meaningful way to determine if my habits are actually serving my identity.</p>
<p>Over the years I’ve been using some ideas within this framework at an unconscious level—its nice to have a full-picture view and more tools at my disposal.</p>
Visualize CSS spacing utilities2021-04-09T00:00:00Zhttps://chrisbracco.com/visualize-css-spacing-utilities/<p>Design systems, CSS frameworks, styleguides and more will often provide a set of HTML utility classes meant to be reused in situations where a more custom-tailored solution may not be required.</p>
<p>Here is a really simple way to visualize spacing utilities intended for display in documentation for a framework, web application, design system or otherwise. Basically just different background colors for the parent element and utiltity classes, and then the "space" will be represented by the background color of the parent element.</p>
<p>I am using a SCSS loop for brevity to generate the classes.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="OJWOKEv" data-default-tab="css,result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
Automate a daily to-do list with Apple Notes and Shortcuts2021-04-03T00:00:00Zhttps://chrisbracco.com/automate-a-daily-to-do-list-with-apple-notes-and-shortcuts/<p>When it comes managing daily tasks, I’ve tried everything: sticky notes, bullet journaling, and every productivity app under the sun. I keep coming back to a very simple and boring solution: an automated daily note.</p>
<p>As an iOS user, I realized I can use the <a href="https://en.wikipedia.org/wiki/Shortcuts_(app)">Shortcuts app</a> to automate the creation of a daily to-do note in the <a href="https://support.apple.com/guide/notes/welcome/mac">Apple Notes app</a>, send myself a reminder notification to fill it out, and then keep them all in sync across devices with iCloud.</p>
<p>On my phone I have notifications turned off for nearly every app, but this is one that I welcome. I like being prompted to think about what I have to do well before I have to get started.</p>
<p>Research shows that writing your to-do list the evening beforehand can help improve sleep quality, reduce procrastination, and reduce guilt about enjoying a relaxing evening. It gives me the opportunity to clear this information from my brain’s working memory so that I can either wind down from the day or focus on other things.</p>
<h2>How to set it up</h2>
<ol>
<li>Open the Shortcuts app on your iPhone and create a new Personal Automation</li>
<li>Add a Date action and set <code>Specified Date</code> to <code>Tomorrow</code></li>
<li>Add a Variable action and set <code>Date</code> to a variable named <code>Title</code></li>
<li>Add a Notes action and set "Create note with <code>Title</code> in <code>To Do</code> folder</li>
<li>Add a Notification action and set "Show notification" to whatever message you want to see.</li>
<li>Set the time and interval for when you would like this automation to fire. I chose 8PM, daily.</li>
</ol>
<figure class="figure"><picture>
<source type="image/webp" data-srcset="/assets/images/1fask1xihf-500.webp 500w" data-sizes="65vw" />
<source type="image/jpeg" data-srcset="/assets/images/1fask1xihf-500.jpeg 500w" data-sizes="65vw" />
<img data-src="/assets/images/1fask1xihf-500.jpeg" width="500" height="1083" alt="apple shortcuts app daily to do automation" class="lazyload" loading="lazy" decoding="async" />
</picture>
</figure>
<p>And, voilà! Each evening at 8PM I receive a reminder notification to fill out my to-do list for the following day. No more scrambling every morning to come up with a plan and stressing out over all of my tasks.</p>
<figure class="figure"><picture>
<source type="image/webp" data-srcset="/assets/images/mjZ_lW00kQ-640.webp 640w, /assets/images/mjZ_lW00kQ-1024.webp 1024w, /assets/images/mjZ_lW00kQ-1818.webp 1818w" data-sizes="65vw" />
<source type="image/jpeg" data-srcset="/assets/images/mjZ_lW00kQ-640.jpeg 640w, /assets/images/mjZ_lW00kQ-1024.jpeg 1024w, /assets/images/mjZ_lW00kQ-1818.jpeg 1818w" data-sizes="65vw" />
<img data-src="/assets/images/mjZ_lW00kQ-640.jpeg" width="640" height="466" alt="apple notes app macos" class="lazyload" loading="lazy" decoding="async" />
</picture>
</figure>
CSS “truly center” a single child element horizontally when siblings are present2021-04-01T00:00:00Zhttps://chrisbracco.com/css-truly-center-a-single-child-element-horizontally-when-siblings-are-present/<h2>The problem</h2>
<p>If you have a parent element with multiple children, it is trickier than you might think to “truly center” one of the child elements horizontally. Your first instinct may be to reach for flexbox and text-align.</p>
<div class="truly-center truly-center--problem">
<button class="truly-center__child button button--outline" type="button">×</button>
<div class="truly-center__child truly-center__centered"><span>Center</span></div>
</div>
<pre class="language-css"><code class="language-css"><span class="token selector">.truly-center--problem</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span><br /> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.truly-center--problem .truly-center__centered</span> <span class="token punctuation">{</span><br /> <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br /> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>As you can see, this does not work as intended. The “centered” child element is only horizontally centered within the <strong>remaining space</strong> in the parent element, and not the “true center” of the parent element.</p>
<p>In this case the width of the centered element is equal to the width of the parent element minus any sibling element(s). The centered element can only be “truly centered” if the width of child elements on both the left and right of it are equal.</p>
<div class="truly-center truly-center--problem">
<button class="truly-center__child button button--outline" type="button">×</button>
<div class="truly-center__child truly-center__centered"><span>Center</span></div>
<button class="truly-center__child button button--outline" type="button">×</button>
</div>
<p>But what if you only wanted one non-centered child element, or non-centered siblings with different widths on each side of the centered element?</p>
<h2>Absolute positioning</h2>
<p>A quick fix for this is to remove the non-centered child elements from the document flow and position them absolutely.</p>
<p><strong>Caveat:</strong> You need to know the dimensions of each child element, and then calculate the appropriate padding for the centered element so that it doesn’t overlap the absolutely positioned elements.</p>
<div class="truly-center truly-center--absolute">
<button class="truly-center__child button button--outline" type="button">×</button>
<div class="truly-center__child truly-center__centered"><span>Center</span></div>
</div>
<pre class="language-css"><code class="language-css"><span class="token selector">.truly-center--absolute</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.truly-center--absolute .button</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">margin-top</span><span class="token punctuation">:</span> [SIBLING HEIGHT / 2]<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> [PARENT LEFTHAND PADDING]<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.truly-center--absolute .truly-center__centered</span> <span class="token punctuation">{</span><br /> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Pseudo element</h2>
<p>You could also use the :after pseudo selector as a sort of “spacer” element to nudge the centered element to “true center”.</p>
<p><strong>Caveat:</strong> You need to know the dimensions of each child element, and then calculate the appropriate dimensions for the pseudo element to nudge the centered element to “true center”.</p>
<div class="truly-center truly-center--pseudo">
<button class="truly-center__child button button--outline" type="button">×</button>
<div class="truly-center__child truly-center__centered"><span>Center</span></div>
</div>
<pre class="language-css"><code class="language-css"><span class="token selector">.truly-center--pseudo .truly-center__centered</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br /> <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span><br /> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.truly-center--pseudo .truly-center__centered:after</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span><br /> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> [SIBLING WIDTH]<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Negative margin</h2>
<p>You could also use a negative margin on the centered element to shift it into “true center”.</p>
<p><strong>Caveat:</strong> You need to know the dimensions of each child element, and then calculate the appropriate negative margin to nudge the centered element to “true center”.</p>
<div class="truly-center truly-center--negative-margin parent">
<button class="truly-center__child button button--outline" type="button">×</button>
<div class="truly-center__child truly-center__centered"><span>Center</span></div>
</div>
<pre class="language-css"><code class="language-css"><span class="token selector">.truly-center--negative-margin</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span><br /> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.truly-center--negative-margin .truly-center__centered</span> <span class="token punctuation">{</span><br /> <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br /> <span class="token property">margin-left</span><span class="token punctuation">:</span> [SIBLING WIDTH * -1]<span class="token punctuation">;</span><br /> <span class="token property">padding</span><span class="token punctuation">:</span> 0 [SIBLING WIDTH]<span class="token punctuation">;</span><br /> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>CSS grid</h2>
<p>The above solutions will work in pretty rigid circumstances, but break down if the size of surrounding siblings change across viewport sizes or different UI states. Is there a better way?</p>
<p>CSS grid to the rescue! This solution is the most flexible of the bunch. You can have elements to the left and right, and you don’t need to care about their dimensions.</p>
<div class="truly-center truly-center--grid">
<div class="truly-center__child">
<button class="button button--outline" type="button">×</button>
</div>
<div class="truly-center__child truly-center__centered"><span>Center</span></div>
<div class="truly-center__child">
<button class="button button--outline" type="button">×</button>
</div>
</div>
<pre class="language-css"><code class="language-css"><span class="token selector">.truly-center--grid</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br /> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr auto 1fr<span class="token punctuation">;</span><br /> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /><span class="token selector">.truly-center--grid .truly-center__child:last-child</span> <span class="token punctuation">{</span><br /> <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
Notes on procrastination2021-03-31T00:00:00Zhttps://chrisbracco.com/notes-on-procrastination/<ul>
<li>Planner journal combined with a daily task list helps keep you on track</li>
<li>Write up your to-do list for the following day the night before</li>
<li>Commit to new routines and believe in them</li>
<li>Delay rewards until after a task is completed</li>
<li>Be aware of your procrastination cues</li>
<li>Eat your frogs first</li>
</ul>
A simple sweeping animation for skeleton UI components with HTML and CSS2021-03-31T00:00:00Zhttps://chrisbracco.com/a-simple-sweeping-animation-for-skeleton-ui-components-with-html-and-css/<p>I’m not sure where the terminology originates, but “<a href="https://css-tricks.com/building-skeleton-screens-css-custom-properties/">skeleton UI</a>” has become a popular <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/Perceived_performance">perceived performance</a> technique and is a useful one to have in the ol’ toolbelt.</p>
<p>Depending on the context, this technique can be used to mock entire screens or individual components that may have to load asynchronously. They help communicate to folks that something is indeed happening when they first arrive, and also prevent jumping content and costly layout reflows.</p>
<p>Here is a simple example that uses a “sweeping” gradient animation over a generic “card” component to communicate movement and change.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="YzNNEjR" data-default-tab="css,result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
Simple vanilla JavaScript “component”2021-03-27T00:00:00Zhttps://chrisbracco.com/simple-vanilla-javascript-component/<p>If all you want is a few simple components for a small website or app, you can do so without having to fuss with frameworks, transpilation, or build tools. All it takes is the constructor pattern combined with prototype methods.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="VpZpBp" data-default-tab="js,result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<p>And yes, you can use the newer <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes"><code>class</code> syntactic sugar</a> instead, but then you will have to worry about transpilation for <a href="https://caniuse.com/es6-class">older browsers that do not support the <code>class</code> syntax</a> (namely IE11 and under).</p>
Fill available space on focus with CSS flexbox and transitions2021-03-25T00:00:00Zhttps://chrisbracco.com/fill-available-space-on-focus-with-css-flexbox-and-transitions/<p>It’s all pretty much in the title on this one. A common interaction for search inputs in user interfaces is to expand the width of the input when the user has placed their focus into it. This example is a dead-simple and flexible way to achieve that effect using only CSS flexbox, transitions, and the <code>:focus-wthin</code> pseudo selector.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="YzNwjXX" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
A typical day? What’s that?2021-03-25T00:00:00Zhttps://chrisbracco.com/a-typical-day-whats-that/<p>Ever since we had our first kid, the idea of a “typical day” went out the window. Before dad life, I put myself through varying degrees of time blocking torture in an attempt to make sure I had time set aside to do all of the things I care about. Turns out I was torturing the people around me, too.</p>
<p>Work hard, read and write, hone my career skills, exercise, play music, complete house projects, and on and on. Work a little bit on each thing every day, the conventional wisdom says. My “ideal” daily schedule looked something like this:</p>
<ul>
<li>6:00AM - Rise! Wash face, brush teeth, get dressed, make bed</li>
<li>6:30AM - Breakfast, light reading/feed scrolling</li>
<li>7:00AM - Prep for the day, online coursework or deeper reading</li>
<li>9:00AM - Begin working</li>
<li>11:30AM - Exercise, lunch, shower</li>
<li>12:30AM - Continue working</li>
<li>6:00PM - Dinner, clean up kitchen</li>
<li>7:30PM - Play music, hone career skills, write, read</li>
<li>11:00PM - Sleep</li>
</ul>
<p>I look back at these times and 🤦♂️. I was so militant about my schedule during certain earlier periods of my life that whenever I missed even a single daily task I would reel over it. This reeling would often affect my sleep that night and would spill over into the next day, compounding the issue.</p>
<p>Also, notice the lack of <strong>“spend time with friends in family”</strong> in the above equation? I was most certainly being selfish, and my relationships were suffering for it. While I felt my career skills, projects, and knowledge we’re progressing, it never felt like “enough”.</p>
<p>Becoming both a husband and a parent put a few things into perspective for me. I learned that I don’t have to be so regimented and so hard on myself and I can still get things done, and have unstructured time to spend with friends and family.</p>
<p>I can no longer pursue <em>everything</em> I set my sights on. I have to choose. And that’s okay. Healthy, even. But it was a hard reality for me to face. I had to sit myself down and decide what’s “enough”, and how I could reasonably work towards that.</p>
<p>Today, a typical day for me is more fluid. It can involve a wide variety of things, happening at unexpected moments. Instead of being militant about each minute of my daily schedule and stressing over it, I’ve loosened my grip on my own psyche and allow myself some space in the day for the unexpected to occur.</p>
<p>For example, instead of telling myself “You will workout every day at 11:30AM doing a specific set of workouts, otherwise you have failed”, I’ve shifted my exercising narrative to something more like “Move your body a significant amount, every day.”</p>
<p>This allows for more flexibility and takes some of the pressure off. I can take advantage of lulls that happen during the day to squeeze a workout in, and choose a routine that ”feels” appropriate for that day.</p>
<p>Any particular day for me now can go something like this:</p>
<ul>
<li>7:23AM - Kid’s waking up, so we wake up. Wash face, brush teeth</li>
<li>7:48AM - Make breakfast for everyone, hang out, plan for the day</li>
<li>8:29AM - Get dressed, make bed. Clean up mess from breakfast.</li>
<li>9:14AM - Start working</li>
<li>11:00AM - Meeting</li>
<li>12:00PM - Lull time before next meeting! Exercise, shower, lunch.</li>
<li>1:00PM - Meeting</li>
<li>2:00PM - Focused work time</li>
<li>4:30PM - Go for a walk with family</li>
<li>5:00PM - Work</li>
<li>5:15PM - Help with a kid meltdown</li>
<li>5:30PM - Work</li>
<li>6:00PM - Dinner, get kid ready for bed</li>
<li>7:30PM - Free time. Just hang, catch up on work, play music, hone skills, read, write, whatever. Anything goes.</li>
<li>11:30PM - Sleep</li>
</ul>
<p>I don’t actually have any of this written down, because I know as my family grows our schedules will continue to morph and change, and that’s okay. I’ve worked hard and I am grateful that I can build flexibility into my life as a core value. I feel equipped to adapt to life’s changing circumstances and continue to find opportunities to work towards my ”enough”.</p>
CSS accessible multi-level dropdown hover navigation menu2021-03-24T00:00:00Zhttps://chrisbracco.com/css-accessible-multi-level-dropdown-hover-navigation/<p>After reading a recent article on CSS tricks about <a href="https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/">clickable navigation menus</a>, my inner contrarian was no doubt tempted to explore the opposite.</p>
<p>I’ve been using the <a href="https://fvsch.com/articles/transition-fade/test5.html">CSS “opacity and visibility” trick</a> for smooth two-way transitions for quite some time. Works great in a pinch, except hover-only dropdown menus are not very accessible. Typically I would have to enhance them further with some JavaScript in order to be able to move the focus properly through the nested dropdown menus.</p>
<p>With the <a href="https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo"><code>:focus-within</code> psuedo selector</a>, however, JavaScript is no longer necessary! It’s <a href="https://caniuse.com/css-focus-within">current browser support</a> is fairly wide, implemented by most modern browsers and Internet Explorer 11 and up.</p>
<p>Go ahead and try to <kbd>tab</kbd> through the below menu yourself. Works like a charm!</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="PoWZedV" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<h2>Bonus!</h2>
<p>And if you like drop shadows on your submenus, the example in this post includes a simple hack to prevent the shadows on child submenus from overlapping their parent submenus.</p>
Personal mantras2021-03-23T00:00:00Zhttps://chrisbracco.com/personal-mantras/<p>In no particular order:</p>
<ul>
<li>Start by starting</li>
<li>Focus</li>
<li>Show compassion</li>
<li>Eat slow</li>
<li>Exercise</li>
<li>Be frugal</li>
<li>Do good work</li>
<li>Hone skills</li>
<li>Share music</li>
<li>Read and write</li>
<li>Have fun</li>
<li>Give back</li>
<li>Stay positive</li>
<li>Stay hard</li>
</ul>
How to undo an iCal calendar import2021-03-23T00:00:00Zhttps://chrisbracco.com/how-to-undo-an-ical-calendar-import/<p>I recently imported a busy external calendar into one of my existing personal calendars using the “Import” feature in the macOS Calendar app, which accepts an <code>.ics</code> file. I watched in horror as all of these new external events began populating in my <em>personal</em> calendar. I thought I was doomed and would have to manually delete hundreds of events.</p>
<p>Alas, there was a way out. If you open the <code>.ics</code> file in a text editor (I used <a href="https://code.visualstudio.com/">VS Code</a>), you should be able to use the editor’s “Find & Replace” functionality to create a new <code>.ics</code> file that when imported will cancel all of the events you just added from that calendar.</p>
<p>At the time of writing, my ICS file looked something like this:</p>
<pre><code>BEGIN:VCALENDAR
VERSION:2.0
PRODID:icalendar-ruby
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
DTSTAMP:20210323T151852Z
UID:24e83108-062b-496f-8229-2e2057e3940a
DTSTART;VALUE=DATE:20200427T000000
DTEND;VALUE=DATE:20200428T000000
SUMMARY:Calendar Event Name
END:VEVENT
END:VCALENDAR
</code></pre>
<p>You may notice there is no <code>STATUS</code> property for the event. Using “Find & Replace” I added it to each event by replacing every <code>END:VEVENT</code> line with <code>STATUS:CANCELLED\nEND:VEVENT</code>.</p>
<p>Save the file, re-import it the same way you did the first time, and should start to see the events disappear. Phew!</p>
Core family values2021-03-23T00:00:00Zhttps://chrisbracco.com/core-family-values/<p>I believe these core values to be important regardless of cultural demographics and can be useful building blocks for any family unit.</p>
<ul>
<li>Live below your means</li>
<li>Pause before you speak</li>
<li>Control the temper</li>
<li>Control the hands</li>
<li>If there is a problem, talk about it</li>
<li>Be honest but not hurtful</li>
</ul>
Create an image grid with CSS grid, repeat, and minmax2021-03-22T00:00:00Zhttps://chrisbracco.com/create-an-image-grid-with-css-grid-repeat-and-minmax%20copy/<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="VwjBGby" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<p>This grid layout is very easy to accomplish with CSS grid. The magic lies inside a couple lines of CSS:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br /> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>10<span class="token punctuation">,</span> <span class="token function">minmax</span><span class="token punctuation">(</span>4em<span class="token punctuation">,</span> 8em<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>What’s happening here, exactly?</p>
<ul>
<li><code>repeat</code> tells CSS grid to repeat the rules inside the expression.</li>
<li><code>10</code> represents the desired number of columns before it begins to repeat.</li>
<li><code>minmax</code> sets a minimum and maximum size for each column.</li>
</ul>
<p>To prevent horizontal overflow on smaller devices and keep the entire grid centered also requires two more lines of CSS:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span><br /> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><br /> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<div class="post__embed">
<div data-height="600" data-slug-hash="VwjBGby" data-default-tab="css,result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<p>And if there are more images than can fit inside the grid and still look reasonable, with a touch of JavaScript the images can randomly fade in and out and replace one another until there are no new images left to load.</p>
<div class="post__embed">
<div data-height="600" data-slug-hash="VwjBGby" data-default-tab="js" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
How to build a color palette for the backdrop of a user interface2021-03-21T00:00:00Zhttps://chrisbracco.com/how-to-build-a-color-palette-for-the-backdrop-of-a-user-interface/<p>User interfaces serve a wide variety of purposes, and are built to facilitate many different mediums. Some exist to delight, while others aim to increase productivity and efficiency.</p>
<p>The “backdrop” of a user interface is where some of your most important color decisions will be made. The colors for your UI backdrop have to be neutral enough to stay out of the way of your content and UI components, but if too dull it can make people feel bored and uninspired.</p>
<h1>What’s the intent?</h1>
<p>Before diving in, however, it’s important to first consider how you want people to “feel” when using an interface. Certain palettes can make people feel calm, focused, or productive, while others can create confusion, frustration, or boredom.</p>
<p>Do you want to facilitate calmness and productivity? Cool blues are helpful. Going for something more welcoming and cozy? Consider warmer earth tones. Looking to excite and delight? Drop the notion of neutrality altogether, and dial up the saturation.</p>
<h1>HSL color model to the rescue</h1>
<p>I find the HSL color model<sup class="footnote-ref"><a href="https://chrisbracco.com/how-to-build-a-color-palette-for-the-backdrop-of-a-user-interface/#fn1" id="fnref1">[1]</a></sup> to be the most intuitive for building neutral color palettes for user interfaces. I like to first choose a hue based on intent, and then fine-tune the saturation, lightness, and steps to create a palette that is versatile and has a touch of character, but also stays out of the way and allows the rest of the UI to shine.</p>
<h1>Single palette generator</h1>
<p>I made a simple palette generator app with <a href="https://vuejs.org/">Vue.js</a> to help facilitate this process. Unlike other palette generator apps, this one includes a live preview so you can get some sense of how your palette might look applied to some common user interface elements.</p>
<p>If you understand the HSL color model, it should be fairly simple to use.</p>
<ol>
<li>Select a hue that mirrors your intent</li>
<li>Add a smidge of saturation</li>
<li>Play around with lightness and step up/step down intervals</li>
<li>Have a look at the preview and tweak as you go</li>
</ol>
<p>There isn’t much method to the madness here, and that’s kind of on purpose. Color selection is very subjective and what “feels” good can be good enough in some cases. Play around, have fun.</p>
<div class="post__embed" data-breakout="">
<iframe src="https://codesandbox.io/embed/user-interface-colors-9wc13?fontsize=14&hidenavigation=1&theme=dark&view=preview" style="width:100%;height:800px;border:0;overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
</div>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>HSL stands for Hue, Saturation, Lightness. <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">It’s a useful model for thinking about color</a>, especially in the context of software and interfaces. <a href="https://chrisbracco.com/how-to-build-a-color-palette-for-the-backdrop-of-a-user-interface/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Notes on color2021-03-17T00:00:00Zhttps://chrisbracco.com/notes-on-color/<ul>
<li>Color does not exist in the absence of eyeballs or brains.</li>
<li>Color can evoke emotion and remind us of past experiences.</li>
<li>Color is transitory.</li>
<li>When selecting colors, context is key. Do research.</li>
<li>Consider the cultural impact of color.</li>
<li>Light source affects our perception of color.</li>
<li>Contrast or harmony?</li>
<li>Neutrals in a palette create spaces for the eyes to “rest”.</li>
<li>Colors in proximity can affect one another. This is called simultaneous contrast.<sup class="footnote-ref"><a href="https://chrisbracco.com/notes-on-color/#fn1" id="fnref1">[1]</a></sup></li>
<li>Additive?
<ul>
<li>Add colored light to black</li>
<li>RGB</li>
</ul>
</li>
<li>Subtractive?
<ul>
<li>Absorb some wavelengths, reflect others</li>
<li>CMYK</li>
</ul>
</li>
</ul>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Which is a subset of the broader “<a href="https://en.wikipedia.org/wiki/Contrast_effect#Simultaneous_contrast">Contrast effect</a>” topic. <a href="https://chrisbracco.com/notes-on-color/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Records for the desert island2021-03-11T00:00:00Zhttps://chrisbracco.com/records-for-the-desert-island/<p>In no particular order:</p>
<ul>
<li><em>It's Album Time</em>, Todd Terje</li>
<li><em>Random Access Memories</em>, Daft Punk</li>
<li><em>Bringing It All Back Home</em>, Bob Dylan</li>
<li><em>Dive</em>, Tycho</li>
<li><em>Undercurrent</em>, Bill Evans</li>
<li><em>Broken Social Scene</em>, Broken Social Scene</li>
<li><em>The Devil And God Are Raging Inside Me</em>, Brand New</li>
<li><em>Attack On Memory</em>, Cloud Nothings</li>
<li><em>Either/Or</em>, Elliott Smith</li>
<li><em>Dookie</em>, Green Day</li>
<li><em>Alien Lanes</em>, Guided By Voices</li>
<li><em>This Is Happening</em>, LCD Soundsystem</li>
<li><em>Salad Days</em>, Mac DeMarco</li>
<li><em>Boxer</em>, The National</li>
<li><em>Everything In Between</em>, No Age</li>
<li><em>McCartney II</em>, Paul McCartney</li>
<li><em>In Rainbows</em>, Radiohead</li>
<li><em>Let It Be</em>, The Replacements</li>
<li><em>Treats</em>, Sleigh Bells</li>
<li><em>Seven Swans</em>, Sufjan Stevens</li>
<li><em>The Wild Hunt</em>, The Tallest Man On Earth</li>
<li><em>Full Moon Fever</em>, Tom Petty</li>
<li><em>II</em>, Unknown Mortal Orchestra</li>
<li><em>Nocturne</em>, Wild Nothing</li>
<li><em>It’s Blitz!</em>, Yeah Yeah Yeahs</li>
<li><em>I Can Hear The Heart Beating As One</em>, Yo La Tengo</li>
<li><em>Greatest Hits</em>, Bruce Springsteen</li>
<li><em>Mothership</em>, Led Zeppelin</li>
<li><em>Nirvana</em>, Nirvana</li>
<li><em>Symphonies Nos. 1-9, Beethoven, Nikolaus Harnoncourt</em>, Chamber Orchestra of Europe</li>
<li><em>The Greatest Hits</em>, Al Green</li>
<li><em>Pinback</em>, Pinback</li>
</ul>
Records for focus and productivity2021-03-11T00:00:00Zhttps://chrisbracco.com/records-for-focus-and-productivity/<p>In no particular order:</p>
<ul>
<li><em>Flow State</em>, Shawn Rudiman</li>
<li><em>Dive</em>, Tycho</li>
<li><em>Parking Lot Music</em>, E.Vax</li>
<li><em>It’s Album Time</em>, Todd Terje</li>
<li><em>The Warning</em>, Hot Chip</li>
<li><em>In Rainbows</em>, Radiohead</li>
<li><em>A Love Supreme</em>, John Coltraine</li>
<li><em>Hearing Music</em>, Joanna Brouk</li>
<li><em>Random Access Memories</em>, Daft Punk</li>
<li><em>Warm Blood</em>, Blithe Field</li>
<li><em>Positive Force</em>, Delicate Steve</li>
<li><em>Innerspeaker</em>, Tame Impala</li>
<li><em>Selected Ambient Works Volume II</em>, Aphex Twin</li>
<li><em>Concrete and Glass</em>, Nicolas Godin</li>
<li><em>Digital Rain Systems Vol. 1</em>, Digital Rain Systems</li>
<li><em>Programmer</em>, CORBEN</li>
<li><em>Beautiful You</em>, Khotin</li>
<li><em>Justamente Tres</em>, Dos</li>
<li><em>Oncle Jazz</em>, Men I Trust</li>
<li><em>Silver Ladders</em>, Mary Lattimore</li>
<li><em>The Earth Is Not a Cold Dead Place</em>, Explosions In The Sky</li>
</ul>
Notes on happiness2021-03-11T00:00:00Zhttps://chrisbracco.com/notes-on-happiness/<p>Morgan Housel’s characterization of happiness in his book <em><a href="https://www.goodreads.com/book/show/41881472-the-psychology-of-money">The Psychology of Money</a></em> really stuck with me.</p>
<p>He cites a study<sup class="footnote-ref"><a href="https://chrisbracco.com/notes-on-happiness/#fn1" id="fnref1">[1]</a></sup> performed by <a href="https://www.human.cornell.edu/people/kap6">Karl Pillemer</a> where Karl interviews one thousand elderly individuals looking for important life lessons. Not a single person in one thousand mentioned material objects or being richer than their peers—instead, participants valued meaningful relationships and spending unstructured time with family and friends.</p>
<p>We all have to work and pay the bills though, so how do you get more of this unstructured time? By living below your means, and saving any extra income that comes your way.</p>
<p>The feeling of having more time and options and some wiggle room for error helps to reduce stress. It can make you more comfortable with taking risks that align with your goals and interests. It can make you feel less guilty about “the hustle” so you can focus on what’s really important: the people around you.</p>
<p>It turns out, happiness is control over your time.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>This study was a part of <a href="https://legacyproject.human.cornell.edu/">The Legacy Project</a> and included in Karl’s book <em><a href="https://www.goodreads.com/book/show/11376196-30-lessons-for-living">30 Lessons For Living</a></em>. <a href="https://chrisbracco.com/notes-on-happiness/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Records that make me nostalgic2021-03-11T00:00:00Zhttps://chrisbracco.com/nostalgia-records/<p>In no particular order:</p>
<ul>
<li><em>No Need To Argue</em>, Cranberries</li>
<li><em>Tragic Kingdom</em>, No Doubt</li>
<li><em>Dookie</em>, Green Day</li>
<li><em>Nevermind</em>, Nirvana</li>
<li><em>Siamese Dream</em>, Smashing Pumpkins</li>
<li><em>Houses of the Holy</em>, Led Zeppelin</li>
<li><em>Dirt</em>, Alice in Chains</li>
<li><em>Ten</em>, Pearl Jam</li>
<li><em>Rage Against The Machine</em>, Rage Against The Machine</li>
<li><em>Appetite For Destruction</em>, Guns N’ Roses</li>
<li><em>No Witch</em>, The Cave Singers</li>
<li><em>Born To Run</em>, Bruce Springsteen</li>
<li><em>Everything All The Time</em>, Band of Horses</li>
<li><em>Wincing The Night Away</em>, The Shins</li>
<li><em>Bitte Orca</em>, Dirty Projectors</li>
<li><em>We Are the 21st Century Ambassadors of Peace & Magic</em>, Foxygen</li>
</ul>
Favorite PC games from the 1990s and 2000s2021-03-11T00:00:00Zhttps://chrisbracco.com/favorite-pc-games-1990-2000/<p>In no particular order:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Counter-Strike_(video_game)">Counter-Strike</a></li>
<li><a href="https://en.wikipedia.org/wiki/Need_for_Speed_III:_Hot_Pursuit">Need For Speed III: Hot Pursuit</a></li>
<li><a href="https://en.wikipedia.org/wiki/The_Operative:_No_One_Lives_Forever">No One Lives Forever</a></li>
<li><a href="https://en.wikipedia.org/wiki/Diablo_II">Diablo II</a></li>
<li><a href="https://archive.org/details/msdos_Commander_Keen_1_-_Marooned_on_Mars_1990">Commander Keen</a></li>
<li><a href="https://en.wikipedia.org/wiki/Age_of_Empires_II">Age of Empires II</a></li>
<li><a href="https://en.wikipedia.org/wiki/FIFA_99">FIFA 99</a></li>
<li><a href="https://en.wikipedia.org/wiki/Jazz_Jackrabbit_2">Jazz Jackrabbit 2</a></li>
<li><a href="https://en.wikipedia.org/wiki/Interstate_%2776">Interstate '76</a></li>
<li><a href="https://en.wikipedia.org/wiki/Motocross_Madness_2">Motocross Madness 2</a></li>
</ul>
Let your kids destroy some stuff2021-03-03T00:00:00Zhttps://chrisbracco.com/let-your-kids-destroy-some-stuff/<p>Some kids make sense of the world around them by disassembling it<sup class="footnote-ref"><a href="https://chrisbracco.com/let-your-kids-destroy-some-stuff/#fn1" id="fnref1">[1]</a></sup>. To a stressed parent this can appear like mindless destruction, but if you pause and look again it could be them learning.</p>
<p>Most parents learn to become comfortable with varying levels of chaos, but also set limits on what is and is not acceptable. Humor helps. A deep breath and a chuckle can go a long way. Try to communicate your limits consistently, and your children should feel they have enough freedom to play, disassemble, have fun, and learn.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>I was reminded of this notion after reading an op-ed in The New York Times entitled “<a href="https://www.nytimes.com/2021/03/03/parenting/4-year-old-destroy-play.html">My 4-Year-Old Is a Destroyer</a>”. Thanks, Jessica. <a href="https://chrisbracco.com/let-your-kids-destroy-some-stuff/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Live with your kids, not for them2021-03-02T00:00:00Zhttps://chrisbracco.com/live-with-your-kids-not-for-them/<p>Child-centered activities are great fun for kids, but if that’s all you do with them, you might be detaching them from reality.<sup class="footnote-ref"><a href="https://chrisbracco.com/live-with-your-kids-not-for-them/#fn1" id="fnref1">[1]</a></sup> Don’t treat them like VIPs in your life that you are only looking to please and distract.</p>
<p>If you find yourself wondering “How am I going to get through Saturday with Jane?”, all you need to do is modify the stuff you already do so that your children can help out. Even if they are not really helping at first, it’s often comical and makes them feel included. Over time they will learn and become truly helpful. Don’t give up.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>In the months leading up to becoming a father, I received conflicting advice about how to keep kids entertained. An article published on The Atlantic entitled “<a href="https://www.theatlantic.com/family/archive/2021/03/hunt-gather-parent-timeless-advice-for-modern-parents/618172/">There’s a Better Way to Parent: Less Yelling, Less Praise</a>” helped me gain a foothold and reaffirm some things I had been learning from other parents and books. <a href="https://chrisbracco.com/live-with-your-kids-not-for-them/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The Psychology of Money by Morgan Housel2021-02-26T00:00:00Zhttps://chrisbracco.com/the-psychology-of-money-by-morgan-housel/<p>I really enjoyed this collection of short essays on human behavior in relation to money and investing.</p>
<p>Some key takeaways here are to focus on the things that you can control, figure out what "having enough" means for you, and more money saved means more flexibility and control over how you spend your time.</p>
Propaganda by Edward L. Bernays2021-01-26T00:00:00Zhttps://chrisbracco.com/propaganda-by-edward-l-bernays/<p><em>Propaganda</em> is sobering snapshot of the mind of the "father of public relations" in the late 1920s. I’ve come about it nearly one hundred years past its original publication date. Perhaps not surprisingly, there are parallels in today’s society that mirror scenarios mentioned in this work.</p>
<p>Bernays laments the negative connotation that his (seemingly) most precious word has earned over the years leading up to his writings in <em>Propaganda</em>. He would be disappointed to learn that the connotation remains strong as ever.</p>
<p>You get a feel for type of man Bernays believes himself to be from his written tone—an invisible hand, a master manipulator. His belief is that propaganda is everywhere and influences everything. We can all take part in it, and must if society is to progress and remain civil. Propaganda is perception carefully packaged and distributed wholesale. Think you are in control of your choices? Think again, Bernays insists.</p>
1984 by George Orwell2021-01-19T00:00:00Zhttps://chrisbracco.com/1984-by-george-orwell/<p>It’s the evening before the inauguration of the 46th President-Elect of the United States, Joseph R. Biden Jr., and I just finished re-reading this Orwell classic. <em>1984</em> is a prescient tale of what can happen if we allow fear to ransack love, cease to question orthodoxy, and pursue power for power’s sake.</p>
<p>The current mood of the U.S. is an omnidirectional spattering of red and blue rage, feathered with distrust and frustration. It’s uncertain what good will come tomorrow and over the next four years given the chaotic trajectory of the past four.</p>
<p>A quote from the novel that struck a chord with me:</p>
<blockquote>
<p>“...no one ever seizes power with the intention of relinquishing it. Power is not a means; it is an end. One does not establish a dictatorship in order to safeguard a revolution; one makes the revolution in order to establish the dictatorship.”</p>
</blockquote>
<p>Those currently in power will do all they can to hold onto it, and those who want to overthrow said powers will once established ultimately clutch to those same reigns and hold on as long as possible. Big Brother Tech is already watching, and the far left and right political skirmishes going on right now are untenable.</p>
<p>Democracies are designed to temper and distribute power, but a slow and steady centralization has slithered into our society over the past several decades. This, coupled with an uptick in division, fear, and distrust, has been sown into citizens with misinformation needled between traditional and social media.</p>
<p>The current divisiveness cannot last forever; if democracy is to revive, Americans must emerge from their echo chambers and reinvigorate common ground through a mutual respect and love for one another. Fear and division isn’t the path forward. Maintaining freedom of speech, agreeing on common truths, and holding said truths to power is our only way out of this mess.</p>
<p>Couldn’t hurt to throw your Amazon Echo in the trash, either.</p>
Free-Range Kids: Giving Our Children the Freedom We Had Without Going Nuts with Worry by Lenore Skenazy2019-01-23T00:00:00Zhttps://chrisbracco.com/free-range-kids-giving-our-children-the-freedom-we-had-without-going-nuts-with-worry-by-lenore-skenazy/<p>Yes! So much yes! I agree wholeheartedly with the underlying message of this book. Imagination, independence, failure and responsibility are crucial features of childhood that have been under accelerated attack due to the rise in popularity of helicopter parenting.</p>
<p>The introduction to this book hooked me in. After the first few chapters, however, I noticed the tone begin to shift into a cycle of commentary from worried parents, followed by sarcastic remarks by the author with stories to the contrary. Wash, rinse and repeat. I found it hard to maintain focus after a while because the pattern of writing became so predictable.</p>
<p>That said, I find the bits about child rearing in other cultures beguiling and provided much-needed perspective. I also appreciate the “field guide” of sorts towards the end of the book that dispels and minimizes common dangers that monopolize the conversation among modern American parents. I have the feeling I’ll be referencing that section time and again.</p>
<p>When I hark back to my own childhood, I instantly think of the freedom afforded to me by my parents to ride around town with my friends on my mountain bike. There was no greater feeling of joy for me as a kid. Being able to roam freely with friends and play was so crucial to my growth into an adolescent, I wouldn't dare deprive my own future children of activities that could give them similar feelings of joy, trustworthiness, and free will. Let the kids play.</p>
Ways of Seeing by John Berger2018-07-31T00:00:00Zhttps://chrisbracco.com/ways-of-seeing-by-john-berger/<p>What an odd little book! Based on a 1970s BBC television series, <em>Ways of Seeing</em> is a collection of seven separate essays (some with words, some only imagery) that take the reader through several different themes related to art history and ways of "seeing" art. The tone is highbrow and distant, which I find off-putting, especially in the essay on nudes. However, I do find some of the insights on reproductions of original works to be valuable and worth reading, as well as the differences noted between nakedness and nudity (to be oneself vs. objectification).</p>
<p>The final essay on publicity images (aka advertising) and its relationship to art and capitalism is the most useful, in my opinion. So much of the imagery we see in the world today is publicity. It is important to understand that the goal of publicity is to convince its spectators that transformation into the daydream version of oneself can be achieved by the purchasing of right products. Publicity subverts democracy with consumerism, and without it capitalism would collapse.</p>
Pretty Much Everything by Aaron James Draplin2018-07-30T00:00:00Zhttps://chrisbracco.com/pretty-much-everything-by-aaron-james-draplin/<p>Aaron is one of my favorite designers and personalities. To have all of his work wrapped up in this beautiful bow of a book is an absolute joy. I feel like I own a piece of treasure. It's a "coffee table" book that you will want to read intently instead of skim. Aaron's storytelling tone is conversational, bold, simple, and funny. What's equally impressive as his design chops is his cataloging prowess - he has amassed and produced so many works and uses them brilliantly to chronicle and bring meaning to different periods of his life.</p>
<p>I saw Aaron speak back in 2013 in Portland, Maine during his "Tall Tales from a Large Man" tour, and it had a profound impact on me. He is that rare combination of friendly and assertive, and his outlook on graphic design is simple and admirable—make nice things with nice people, try to have some fun doing it, and remember you are lucky to be doing it at all.</p>
A Little Life by Hanya Yanagihara2018-07-23T00:00:00Zhttps://chrisbracco.com/a-little-life-by-hanya-yanagihara/<p>This novel is so captivating and visceral, yet at the same time so imprisoning and despondent. Hanya Yanagihara brings beauty and meaning to what on the surface seems regular and mundane. She drops the reader down into the shoes of a truly depressed and suicidal soul and you must hobble around in them for hours and hours. This is a deeply humanizing and emotive novel, I’ve yet to read anything quite like it. It’s one of those stories you dread to pick up, but once you do you cannot seem to put it down. It’s a difficult read, but a worthwhile one.</p>
The Shallows: What the Internet Is Doing to Our Brains by Nicholas Carr2017-11-29T00:00:00Zhttps://chrisbracco.com/the-shallows-what-the-internet-is-doing-to-our-brains-by-nicholas-carr/<p><em>The Shallows</em> is a well-researched, in-depth exploration of the widespread human adoption of impactful technology like the Internet. Nicholas Carr examines how the adoption of previous world-altering technologies like books, maps, and the printing press have shaped the evolution of our minds and thought processes. The Internet is another one of these mind-altering technologies, but it may be changing our minds for the worse.</p>
<p>While the Internet provides access to enormous amounts of information, it has unfortunately been designed to distract us, and reap profits from those distractions. Our ability to focus deeply on complex problems and subject matter is declining. We are becoming a species of skimmers, of rocks skipping across ponds, traveling from link to link across the vast pond of the Internet, in search of shallow satiation and connection. We would do well to take pause, and ponder the implications of our hurried acceptance and reverence of the Internet.</p>
The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life by Mark Manson2017-10-16T00:00:00Zhttps://chrisbracco.com/the-subtle-art-of-not-giving-a-f*ck-a-counterintuitive-approach-to-living-a-good-life-by-mark-manson/<p>Self-proclaimed “star” life advice blogger Mark Manson guns through tough topic after topic, addressing how to work through them with his counter-intuitive approach of “not giving a fuck” (which doesn’t mean what you think it means). The book, while sectioned off by topics, feels like one giant rant which turned me off at times. There were, however, some excellent quotes throughout the book that I am happy to have read.</p>
<p>I agree with a lot of Mark’s ideas about how to move through life and pursue happiness, but I found it hard to get past the overall tone and some of his crude remarks. Having already read some of Mark’s material, this book feels like a string of past blog posts repurposed and tied together by this “choose your fucks wisely” theme.</p>
An Inconvenient Sequel: Truth to Power: Your Action Handbook to Learn the Science, Find Your Voice, and Help Solve the Climate Crisis by Al Gore2017-10-11T00:00:00Zhttps://chrisbracco.com/an-inconvenient-sequel-truth-to-power-your-action-handbook-to-learn-the-science-find-your-voice-and-help-solve-the-climate-crisis-by-al-gore/<p><em>An Inconvenient Sequel</em> is the kick in the pants we all need, part deux. Not only does it remind and reinforce the perils of climate change, it provides actionable advice for those who are interested in getting involved in the cause at any level. Really, it should be everyone.</p>
<p>From home composting to eating less red meat to organizing a boycott, there is <em>at least</em> one action in this book that you can take to help reverse the effects of global warming. We must come to terms with reality and align our modes of thinking around this issue, or future generations will suffer at the hands of the monster that is our indifference.</p>
Small Great Things by Jodi Picoult2017-09-16T00:00:00Zhttps://chrisbracco.com/small-great-things-by-jodi-picoult/<p><em>Small Great Things</em> took my breath away. It is one of the best novels you will ever read. It is the book that every white person who proclaims “but I don’t see color” must leave open on their nightstand. This novel taps into every human emotion and will deepen your perspective with each turn of the page.</p>
<p>I can’t recommend this book enough. Please read it. This is the one, folks.</p>
The Millionaire Next Door: The Surprising Secrets of America's Wealthy by Thomas J. Stanley2017-05-27T00:00:00Zhttps://chrisbracco.com/the-millionaire-next-door-the-surprising-secrets-of-americas-wealthy-by-thomas-j-stanley/<p>Though a bit outdated, this book is full of excellent case studies, statistics, and philosophies that preach the importance of frugality in accumulating wealth. I was pleasantly surprised with the deep focus and attention this book gives to family dynamics in relation to money, wealth building, and wealth transfer. There is a lot of practical advice in this book about how to accumulate wealth, avoid the temptations of overconsumption, and how to talk about money around your family members.</p>
Where Do We Go from Here: Chaos or Community? by Martin Luther King Jr.2017-03-13T00:00:00Zhttps://chrisbracco.com/where-do-we-go-from-here-chaos-or-community-by-martin-luther-king-jr/<p>This essay is far and away one of the most impactful works I have ever read. It is a call-to-arms urging that we embrace the warm bodies of one another instead of the cold triggers of our rifles, or the tight reigns of our ideologies. Martin Luther King Jr.’s commitment to nonviolent resistance and his ideas about building community and uniting nations are just as relevant today as they were decades ago.</p>
<p>His words feel especially urgent in today’s global economic and political climate. The challenges of globalization that Dr. King writes about in this essay have only become more grating. Forty years ago it was inexcusable that so many still lived in poverty given the advances in technology and wealth of Western civilizations, yet we are still facing these same problems. We forget our history and therefore repeat it. This essay is a stark reminder that America’s history is riddled with corruption and misdeeds and if we are unable to reconcile with the facts, we are doomed to repeat our bad behavior until it becomes too late to correct.</p>
Interlock: Art, Conspiracy, and the Shadow Worlds of Mark Lombardi by Patricia Goldstone2017-02-07T00:00:00Zhttps://chrisbracco.com/interlock-art-conspiracy-and-the-shadow-worlds-of-mark-lombardi-by-patricia-goldstone/<p>Mark Lombardi dropped onto my radar in 2016 while I was listening to <a href="http://www.ttbook.org/book/art-conspiracy-and-mark-lombardi">a podcast</a> in which his artwork and contentious life story was the subject. I was intrigued and wanted to learn more about Mark and his art, so I picked up this book.</p>
<p><em>Interlock</em> is Patricia Goldstone’s attempt to describe and justify the major events and relationships in artist Mark Lombardi’s life. The book is divided into two parts: the first focused on Mark Lombardi, and the second detailing the scandalous events that Mark portrays so cleanly in his artistic interlocks.</p>
<p>I breezed through part one, engrossed by all the mystery and intrigue swaddling Mark, his controversial artwork, and his untimely death. Mark’s work, while it appears so simple from a distance, shares immense detail when viewed up close. It connects networks of countries, companies, and individuals, showing how money, influence, and power move through each node. Mark’s drawings offer explanations for how scandalous economic and political events are able to take place outside of public knowledge.</p>
<p>Part two was very informative, but I struggled at times to follow. Admittedly, this is due in part to my barebones knowledge of the history and scandals of the 20th century. Run-on sentences packed with factual information also make it easier to lose track of all the people, places, and events that transpire (many times allegedly) in these scandals. Some inferences make pretty strained logical leaps in order to stoke conspiracy, which are inferences I tend to read with caution. It also doesn’t help matters that confusion is a crucial part of the events themselves. Scandals are purposefully obfuscated by their actors so that their misdeeds are more difficult to pinpoint.</p>
<p>All in all, this book has made me more interested in learning about the scandals of the 20th century and further opened my mind to the likelihood that our world economy depends on the actions of a few powerful, shadowy figures far more than we may be willing to believe.</p>
Books v. Cigarettes by George Orwell2016-12-21T00:00:00Zhttps://chrisbracco.com/books-v-cigarettes-by-george-orwell/<p>Admittedly this little book lured me in with its beautiful cover design and curious title. Like most of my peers, I know of George Orwell from his classic novels—<em>Nineteen Eighty-Four</em> and <em>Animal Farm</em>—that we were forced to read in high school. The “doom-and-gloom” attitude of those novels is present in this short collection of essays, though often offset by the subtle humor and absurdity discovered in pivotal events in his life and in the conditions and customs of early 20th-century England.</p>
<p>His description of the state of a public wing of a run-down hospital in Paris are horrifying and grotesque, and the coldness with which he was treated by doctors and their students is unsettling. The disdain of science by his boarding school disciplinarians is telling of the natural resistance to change that lurks within many of us, and that we still cannot seem to quell. Some back-of-napkin calculations reveal that most folks (Orwell included) are willing to part with more money per year on cigarettes and other poisons than on books, "...because reading is a less exciting pastime than going to the dogs, the pictures or the pub...".</p>
<p>These essays are a tinge ranty in nature, but Orwell’s reflections on what seems to be a most unfortunate childhood do help to inform where his writing style and philosophies as an adult came about.</p>
Ragtime by E.L. Doctorow2016-12-18T00:00:00Zhttps://chrisbracco.com/ragtime-by-el-doctorow/<p><em>Ragtime</em> really surprised me. Upon diving in I considered my mental endurance for pretension, lofty language, and droll tendencies. It turns out endurance was not needed. This novel was a fast and exciting read for me. It is a masterful exploration of the culture of a time through the composition of true and untrue events, people, and places. The language is modern and relatable while also capturing the atmosphere of the time. Author E.L. Doctorow’s writing style is super charming, and he produces sentences that halted me in amazement, confusion, and admiration.</p>
<p>The novel’s staying power is remarkable, too. Many of the societal issues in the time period of this novel, 1902-1912, are just as relevant today, and author E.L. Doctorow does an incredible job portraying the effects societal tension can have on the lives of both everyday and prominent individuals. I enjoyed learning over the course of the novel how each character and plot line crossed paths throughout many unforeseen and tricky circumstances.</p>
<p>The third person tense lends itself really well to the rhythm of the novel, which skips around from one plot line to another, occasionally fusing two or three different story lines together to surprise the reader. This book is an absolute joy to read.</p>
Eating on the Wild Side: The Missing Link to Optimum Health by Jo Robinson2016-11-29T00:00:00Zhttps://chrisbracco.com/eating-on-the-wild-side-the-missing-link-to-optimum-health-by-jo-robinson/<p>Growing up I was often skeptical of old adages like “an apple a day keeps the doctor away”, and the variety of food I allowed into my mouth was limited. As I became older my interests in eating healthier and tastier foods increased, and I found myself wondering about the composition of foods and how to better optimize my diet.</p>
<p>_<i><em>Eating on the Wild Side</em> is a treasure trove of information about the health benefits of the many varieties of fruits and vegetables available to us modern day consumers. This book goes deeper than the old adages and reveals that not all fruits and vegetables are created equal. It emphasizes that throughout history, our obsession with taming and enhancing the flavors of wild fruits and vegetables has come with the accidental cost of decreasing their nutritional value.</i></p>
<p>Despite this fact, there are still many varieties of fruits and vegetables available in our supermarkets that have great health benefits, and knowing which varieties to choose is integral. Jo Robinson also provides detailed information on how to identify quality produce, explains how to properly store your food after you bring it home, and demonstrates the best ways to cook produce to maximize its nutritional content. She even shares a few of her favorite recipes that use these methods.</p>
<p>This is an incredible guidebook on produce. I first purchased the electronic version, but I plan to purchase a physical copy so I can notate it and place it on my kitchen counter to use as a reference guide. If you are interested in eating healthy and upping your cooking skills, this book is a total game-changer.</p>
Predictably Irrational: The Hidden Forces That Shape Our Decisions by Dan Ariely2016-09-13T00:00:00Zhttps://chrisbracco.com/predictably-irrational-the-hidden-forces-that-shape-our-decisions-by-dan-ariely/<p>Dan Ariely and his collaborators turn standard economic theory on its head with their simple yet ingenious experiments on human behavior. <em>Predictably Irrational</em> provides an in-depth analysis of how we behave, proving time and again how irrational we can be despite our best intentions.</p>
<p>This book is a real eye-opener with many takeaway lessons that can be applied to scenarios in your own life. A must-read for anyone interested in what makes us tic.</p>
United: Thoughts on Finding Common Ground and Advancing the Common Good by Cory Booker2016-08-31T00:00:00Zhttps://chrisbracco.com/united-thoughts-on-finding-common-ground-and-advancing-the-common-good-by-cory-booker/<p>Cory Booker’s recent rise to political celebrity enticed me to learn more about his ascent and contributions as a public servant. This book, <em>United</em> is a selection of stories across his political career that portray his exceptional character, grace, humility, and effectiveness as a leader who has enacted real positive change in New Jersey communities, most specifically Newark.</p>
<p>Cory weaves together many of the complicated issues that plague the historic city of Newark, revealing the connections between them and their existence across American society. These connections strengthen his fundamental point that we as individuals are also interdependent on each other, and the only way forward is to unite communities on the platform of advancing common good and finding common ground.</p>
<p>This book is enlightening and uplifting, and wields the power to inspire the inactive to take action. I have been thinking a lot about how I can make a positive impact in my own community, and <i>United</i> has inspired me to continue learning and begin searching for opportunities to get involved.</p>
The Shallows: What the Internet Is Doing to Our Brains by Nicholas Carr2016-08-18T00:00:00Zhttps://chrisbracco.com/the-lessons-of-history-by-will-durant/<p><em>The Lessons of History</em> serves as both an introduction to and summary of <a href="https://www.goodreads.com/book/show/78159.The_Story_of_Civilization"><em>The Story of Civilization</em></a> by Will and Ariel Durant, a comprehensive ten-volume collection of nonfiction that attempts to chronicle the most pivotal periods throughout the history of mankind. It is a distillation of this massive work that identifies patterns and draws out conclusions about our existence so we can better understand human behavior and use the past as a predictor for future behaviors and events.</p>
<p>For someone who (regrettably) attended too few history classes in his schoolboy days, the myriad of historical references can be difficult to follow and retain. I found myself having to look up some names and events to provide a bit more context for myself while reading. Even so, the analogies and lessons derived from these historical events are powerful and thought-provoking.</p>
<p>This book has opened my mind to different and difficult ways of viewing humanity, some that even conflict with my current worldview. It jogs the brain and spurs some powerful daydreams. It’s a short read packed to the brim with insight—highly recommended!</p>
American Thrift: A Reader by David Blankenhorn2016-08-11T00:00:00Zhttps://chrisbracco.com/american-thrift-a-reader-by-david-blankenhorn/<p>David Blankenhorn and Andrew F. Kline string together an impassioned collection of essays, articles, and course syllabi from the last 150 years that defines thrift, reflects on its role in United States history, and stresses the importance of thrift as a positive daily virtue that needs to be revived.</p>
<p>Our debt culture has spiraled out of control, and in the wake of the Great Recession many families and individuals want to save money and climb out of debt. Blankenhorn and the Institute for American Values are working hard to bring thrift back into mainstream values and conversations. This book provides hundreds of examples of thrifty practices producing positive outcomes for communities small and large across America.</p>
Rework by Jason Fried2016-07-06T00:00:00Zhttps://chrisbracco.com/rework-by-jason-fried/<p><em>Rework</em> is a collection of bold statements and fierce insights that touch many aspects of running a modern business. Denouncing rigidity for flexibility, caution for trust, growth for sustainability, and reservedness for honesty, Jason Fried attempts to shock us out of the 80’s “growth or bust” mindset that still consumes the minds of many founders and entrepreneurs.</p>
<p>The chapters are broken up into small, digestible sections on various aspects of business. I particularly enjoy and agree with the importance of writing and teaching your craft as cornerstones to building a successful business.</p>
Free as in Freedom: Richard Stallman's Crusade for Free Software by Sam Williams2016-06-21T00:00:00Zhttps://chrisbracco.com/free-as-in-freedom-richard-stallmans-crusade-for-free-software-by-sam-williams/<p>This biography chronicles a large portion of software programmer Richard Stallman’s controversial and storied career. He is often regarded as one of the most prolific, ingenious programmers of our time, a pioneer of the free software movement and a brilliant man who has dedicated his life to programming and activism.</p>
<p>Though his contributions to the software industry are numerous (e.g. launching the GNU Project, GNU Public License, GNU Emacs, and more), his complicated personality and stalwart support of free software has donned him a contentious reputation in the software industry.</p>
<p><em>Free as in Freedom</em> walks you through crucial events in Stallman’s career, touching upon many important figures who also helped shape the software industry and the free software movement, commonly referred to these days as “open-source software.” I enjoyed learning about programming culture in its early days, how certain operating systems and free software were created, and the moral dilemmas of the free vs. commercial software debate.</p>
The Communist Manifesto by Karl Marx2016-06-15T00:00:00Zhttps://chrisbracco.com/the-communist-manifesto-by-karl-marx/<p>In the case of <em>The Communist Manifesto</em>, Karl Marx shines a light on the glaring issues and potential downsides of capitalism and the existing bourgeois class of his time, providing a call-to-arms for an alternative ideology meant to eliminate class antagonisms and decrease the likelihood of exploitation of the many by the few.</p>
<p>Having grown up with American Capitalism™ being shoved down my throat at every junction, it is refreshing to read and ponder alternative ideas about how to build and maintain a good society. I believe it is foolish to dismiss entire philosophies or modes of thinking based on the poor applications of a select, brutal few throughout history. It is a shame that entire ideologies can develop solely negative connotations, because often there exists interesting ideas that can be gleaned from them.</p>
Freakonomics: A Rogue Economist Explores the Hidden Side of Everything by Steve D. Levitt2016-06-13T00:00:00Zhttps://chrisbracco.com/freakonomics-a-rogue-economist-explores-the-hidden-side-of-everything-by-steve-d-levitt/<p>Already an avid listener and fan of the <em>Freakonomics</em> podcast, I finally got around to reading the book, and it does not disappoint. Though without a unifying theory or thesis per say, each chapter explores a set of interesting questions and makes startling connections between seemingly unrelated topics. These conclusions are often based on good data and data analysis techniques, stressing the important difference between correlation and causation.</p>
<p>Having just so happened to read the chapter exploring crime and gun control in the wake of the deadliest mass shooting in United States history, it delivers a stinging, poignant, and emotional reminder of the U.S. Congress’s continued decision as of late to do nothing to help prevent future tragedies like these from unfolding. Perhaps mailing a copy of this book to your Congresswoman or man can help spur the progress this nation so desperately needs.</p>
Design as Art by Bruno Munari2016-06-09T00:00:00Zhttps://chrisbracco.com/design-as-art-by-bruno-munari/<p>Broken up into short chapters on various topics, <em>Design as Art</em> by Bruno Munari feels like a quick read as you zoom through the various topics that encompass Munari’s experiences as a designer. While the pretension is palpable in certain areas, Munari will often follow up with touching allegories that justify his opinions and expertise in design.</p>
<p>The book loosely argues that the traditional artist is metamorphosing into the modern day designer, tasked with finding ways to delight and instruct mass audiences, and reconnect them to art. This notion is sprinkled throughout Munari’s observations and rants on form, function, color theory, useless machines, and much more. Munari asserts that any designed object should be beautiful, functional, and accessible, which are tenets that resonate with me in particular. It’s a great read that will remain on my shelf for future inspiration and guidance.</p>
The Shape of Design by Frank Chimero2016-05-05T00:00:00Zhttps://chrisbracco.com/the-shape-of-design-by-frank-chimero/<p>Frank Chimero is one of my favorite designers, and <em>The Shape of Design</em> is a wonderful, introspective little book about how we shape our world with design. Every line reads like a pull-quote as Frank weaves together the pillars of design with elements of the human experience. The book itself is beautifully designed—it resonates and delights while also providing great utility.</p>
Rewire: Digital Cosmopolitans in the Age of Connection by Ethan Zuckerman2016-04-27T00:00:00Zhttps://chrisbracco.com/rewire-digital-cosmopolitans-in-the-age-of-connection-by-ethan-zuckerman/<p>Author Ethan Zuckerman explores the current state of digital media, the effects of globalization on culture, and what can be done to “rewire” our modes of thinking in an age where everyone and everything can become so easily intertwined. Ethan rifles through dozens of real world examples to support his arguments.</p>
<p>I really enjoyed Ethan’s explanations of bridge figures, xenophiles, local maxima, and the use of serendipity on the web, and how they can be helpful tools for integrating cultures and increasing cosmopolitanism across societies.</p>
<p>Ethan is someone that I hold in high esteem, whose contributions to the web are both controversial and incontrovertible. The serendipitous events of a short trip to western Massachusetts are what brought me to learn about Ethan, and after reading this book I wouldn’t prefer it had happened any other way.</p>
Steal Like an Artist: 10 Things Nobody Told You About Being Creative by Austin Kleon2016-03-31T00:00:00Zhttps://chrisbracco.com/steal-like-an-artist-10-things-nobody-told-you-about-being-creative-by-austin-kleon/<p>Woven together from a collection of quippy drawings, one-liners, and phrases marked down on index cards, <em>Steal Like an Artist</em> by Austin Kleon provides impactful insights about living a fulfilling and creative life. He boils big ideas down to bare essentials and delivers them full-force into your mind. It is an inspiring and fast read that can help re-ignite your creative fire when you are feeling blocked or uncertain about how to proceed.</p>
A Brief History of Progress by Ronald Wright2016-03-29T00:00:00Zhttps://chrisbracco.com/a-brief-history-of-progress-by-ronald-wright/<p>Ronald Wright provides a collection of stern reminders that many times our modern comforts, mindless plundering of resources, and increasing inequities have brought past civilizations to massive collapse and extinction. Continuing down the path of inaction, short-term thinking, and "business as usual" has resulted in crippling blow after crippling blow to civilizations throughout human history.</p>
Work: Capitalism. Economics. Resistance.2016-03-21T00:00:00Zhttps://chrisbracco.com/work-capitalism-economics-resistance/<p>I found myself browsing the cluttered stacks of some anarchist-leaning bookstore in Washington D.C., and this book jumped out, so I decided to roll the dice.</p>
<p>Structured as a collection of short chapters, this book attempts to define Work™, and its many components, and provides insight into how our daily lives have been affected by the rise of capitalism. Certain chapters read like a mouthy five-paragraph essay from a high school student, while others provided really interesting connections between work, capitalism, and the many controversial issues facing our society today.</p>
<p>This book is heavy on complaints about capitalism and how it is ruining our lives. The complaints are mostly legitimate and warranted, as far as I’m concerned. I’ve never been particularly attracted to the notion of authority or “working for the man”, so the book resonated with me in that respect. I was disappointed to find no mention of potential alternatives to capitalism until the last forty pages of this near 400-page piece. 90% rant, 10% action. There is no formal bibliography, either; only a short list of books that were referenced during the course of writing.</p>
<p>I agree a lot with the underlying message of this book, but it’s rant-driven content is an indication of how difficult it is to find and implement alternative solutions to the problems facing modern society. Capitalism has become so engrained in the societies of developed nations around the world, that any alternatives are usually considered dangerous or radical, and labeled as such. A battle against capitalism is a tough one to wage-perhaps the toughest.</p>
The Lessons of History by Will Durant2016-02-24T00:00:00Zhttps://chrisbracco.com/the-invention-of-nature-alexander-von-humboldts-new-world-by-andrea-wulf/<p><em>The Invention Of Nature</em> is a thoroughly researched, in-depth exploration of one of the greatest forgotten scientists to ever live. Andrea Wulf dives deep into the life of Alexander von Humboldt in this book, breeding excitement into the reader around science, nature, economics, and human influence, and reinforcing the notion that these subjects are close-knit and intertwined.</p>
<p>The ideas of Humboldt are engrained in our culture without us realizing it. His works are still relevant and important today, maybe more than ever. It's a shame that his name is no longer mentioned in the many textbooks purchased by students today. The forethought of this individual was unmatched, and he has inspired countless scientists, poets, economists, and environmentalists alike.</p>
<p>Science has become so fragmented and specialized, that we've forgotten how important it is to think about our planet as an entire living, breathing organism unto itself. Humboldt pioneered this form of scientific thought, and we would do well to bring it back into our curriculums as a mainstay and important way of observing the world, analyzing our actions, and predicting their long-term consequences.</p>
A simple, fluid responsive CSS grid system2014-03-13T00:00:00Zhttps://chrisbracco.com/a-simple-responsive-css-grid-system/<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="hjFDL" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
A simple CSS tooltip2013-10-01T00:00:00Zhttps://chrisbracco.com/a-simple-css-tooltip/<p>With pseudo elements, the triangle hack, and data attributes, I created a simple tooltip system in HTML and CSS.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="qzukg" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<p>To give any element a tooltip, simply add the <code>data-tooltip</code> attribute to it, like so:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#!<span class="token punctuation">"</span></span> <span class="token attr-name">data-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I am a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I am a link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>One caveat with this method is that transitions on pseudo elements <a href="http://css-tricks.com/transitions-and-animations-on-css-generated-content/">don’t quite work right</a> in Webkit browsers (Chrome, Safari). It works just fine in Firefox, but if you include the CSS for the transition it will break the tooltip in Webkit, which is annoying. This means you can’t transition the opacity or positioning of the tooltip for a fade or movement effect. But if you don’t care about that extra pizazz, then this method will work just fine.</p>
<h2>Bonus!</h2>
<p>Because boredom, I created a simple directional tooltip system. With class names, you can specify which side you would like the tooltip to appear (top, right, bottom, or left).</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="nufHz" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
CSS sticky (but not fixed) footer2013-09-26T00:00:00Zhttps://chrisbracco.com/css-sticky-footer-effect/<p>When tasked to build a footer that would always stick to the bottom of page, using CSS only, my first instincts were to reach for the <code>position: fixed;</code> property—the problem, though, was that the footer could not be visible all the time. It instead needed to flow naturally, while also following these rules:</p>
<ul>
<li>The footer should be visible if the content above it is shorter than the user’s viewport height.</li>
<li>If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.</li>
<li>This must be done without JavaScript, and without using the <code>position: fixed;</code> property (which would keep the footer at the bottom of the viewport at all times, regardless of the above content).</li>
</ul>
<p>Below is a small pen demonstrating my solution, and it works fabulously. Feel free to use this method on your next project.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="zekgx" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<h2>Update! With flexbox</h2>
<p>Turns out you can also accomplish this particular layout with flexbox. The CSS is a lot simpler, too.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="BaLdqKp" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<h2>Update! With CSS grid</h2>
<p>And finally, you can also achieve this effect using CSS grid.</p>
<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="ZEBmQXo" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
CSS collapsing header effect2013-06-11T00:00:00Zhttps://chrisbracco.com/simple-css3-collapsing-header-effect/<div class="post__embed" data-breakout="">
<div data-height="600" data-slug-hash="corFl" data-default-tab="result" data-user="cbracco" data-border="thick" data-border-color="#18191f" data-tab-bar-color="#3a3c47" data-tab-color="#717482" data-tab-link-color="#dcdee4" data-active-tab-color="#717482" data-link-logo-color="#3a3c47" data-embed-version="1" class="codepen"></div>
<script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script>
</div>
How to Use Curly Quotes on Mac OSX and Windows2013-02-11T00:00:00Zhttps://chrisbracco.com/curly-quotes/<p>The curly (or “smart”) quote is a shifty character. For years I have only been including straight marks in my writing. Recently, I learned about some functional differences between straight and curly quotation marks.</p>
<h2>Straight marks</h2>
<p>Straight marks were invented for use on typewriters. Due to physical and mechanical constraints, you can only fit so many keys on a typewriter’s keyboard. Using straight quotes instead of curly quotes freed up two slots for other characters on the keyboard, which is why these characters were preferable.</p>
<p>When computers came into the fray, they put these straight marks to good use. Most programming languages require the use of straight marks to indicate string literals (e.g. "Hello world"), so they are still very useful today.</p>
<h3>Usage</h3>
<p>On any typical keyboard, simply press <kbd>'</kbd> for a straight single mark ( ' ) and <kbd>Shift</kbd> + <kbd>'</kbd> for a straight double mark ( " ).</p>
<h2>Curly quotes</h2>
<p>Unlike straight marks, curly quotes are usually more legible in paragraphs and long texts, and match the other characters better. They are more suitable for reading, and should be used when writing documents, articles, blog posts, etc.</p>
<h3>Usage</h3>
<p>It turns out that producing curly quotes on a computer is super easy. I’ve committed these simple shortcuts to memory.</p>
<h4>Mac OSX</h4>
<ul>
<li><kbd>Alt</kbd> + <kbd>]</kbd> produces an opening single curly quote ( <strong>‘</strong> )</li>
<li><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>]</kbd> produces a closing single curly quote ( <strong>’</strong> )</li>
<li><kbd>Alt</kbd> + <kbd>[</kbd> produces an opening double curly quote ( <strong>“</strong> )</li>
<li><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>[</kbd> produces a closing double curly quote ( <strong>”</strong> )</li>
</ul>
<h4>Windows</h4>
<ul>
<li><kbd>Alt</kbd> + <kbd>0145</kbd> produces an opening single curly quote ( <strong>‘</strong> )</li>
<li><kbd>Alt</kbd> + <kbd>0146</kbd> produces a closing single curly quote ( <strong>’</strong> )</li>
<li><kbd>Alt</kbd> + <kbd>0147</kbd> produces an opening double curly quote ( <strong>“</strong> )</li>
<li><kbd>Alt</kbd> + <kbd>0148</kbd> produces a closing double curly quote ( <strong>”</strong> )</li>
</ul>
<h2>Converting straight marks to curly quotes</h2>
<p>Some word processors like <a href="https://en.wikipedia.org/wiki/Microsoft_Word">Microsoft Word</a> will automatically convert straight marks to curly quotes for you on the fly, as you type. However, if you copy and paste text that includes straight marks into a word processor, it may not always convert the straight marks properly.</p>
<p>To manually convert straight marks to curly quotes within your word processor, simply use the <strong>search and replace</strong> function to find all instances of the straight single quote ( ' ) and replace them with the same character—a straight single quote ( ' ). You can do the same for straight double marks ( " ) too.</p>
<h2>So what?</h2>
<p>These small details in your writing will go unnoticed by most, no doubt. Snobby typographers, bookworms, and other designers and developers will be among the few who may actually notice. And maybe that significant other you dated back in 2006 who majored in creative writing.</p>
<p>Either way, I like to believe that the devil is in the details. The subtleties of these pesky quotation marks is an interesting tidbit in type history worth rehashing.</p>