<p>When I first started seriously writing in early 2019, it was because I committed to a 30-day blogging challenge. My main goal of this challenge was to see if I even liked blogging and sharing my ideas so publicly. I&#39;m still here and telling you about my process, so hopefully it&#39;s clear that I like it!</p>
<h2 id="why-i-needed-something-different">Why I Needed Something Different</h2>
<p>What I discovered is that publishing a post a day wasn&#39;t sustainable for me. I think it takes a special kind of person and a special kind of content to publish daily and I applaud anyone who does that. I personally can&#39;t keep up with a schedule like that because I have chronic issues that make my spoon levels unpredictable. As I write this, I&#39;m pretty low on spoons but I&#39;ve been looking forward to this post for several weeks, so that&#39;s what&#39;s motivating me. :)</p>
<p>Not only was I looking for a schedule so that I can get back to writing at a regular cadence, but I&#39;m also launching a support site soon where folks can do monthly subscriptions to support my work and get some fun benefits in return. One of the membership tiers includes 2-week early access to blog posts I write for my website. That means I need to have posts written and scheduled ahead of time.</p>
<h2 id="how-i-came-up-with-a-new-process">How I Came up with a New Process</h2>
<p>Once I figured out I needed something different, I started thinking about all the things I love doing. I love writing about accessibility. I also love sharing the little things I learn every once in a while, such as <a href="/set-up-a-react-app-for-testing-with-jest-and-enzyme">setting up a React App for testing with Jest and Enzyme</a> or <a href="/how-to-dynamically-create-many-similar-css-classes-with-sass">how to dynamically create many similar CSS classes with Sass</a>. I knew for sure that I wanted to write more technical content this year than I have in the past.</p>
<p>Then I thought about live streaming on Twitch. I love it too! I have my <a href="/series/build-an-accessible-react-component">Build an Accessible React Component</a> live series that I plan to continue and knitting on stream is a nice change of pace. I knew I wanted to be able to publish posts regularly and also be able to stream on Twitch a couple of times a week.</p>
<p>In November 2020, <a href="https://twitter.com/AshleeMBoyer/status/1331636783768096770">I wrote a tweet asking if anyone batched blog posts</a>. It&#39;s more common than I thought! This thread is also where I was connected with <a href="https://twitter.com/radiomorillo">Stephanie Morillo</a> (pronounced moh-REE-yoh) and signed up to have a 1:1 content coaching session with her. It went very well and she gave me a lot of great ideas! She also checked in with me afterwards to see how I was doing. I highly recommend following her and reading her content! She&#39;s the same person that inspired me to <a href="https://twitter.com/AshleeMBoyer/status/1345569348652568576">create a /links page and share it on social media</a>. (My /links page is <a href="/links">here</a>).</p>
<h2 id="what-im-doing-now">What I&#39;m Doing Now</h2>
<p>I use 3 tools to stay organized: Google Calendar, Trello, and GitHub. It might sound like a lot to some, but I promise I keep the work for each to a minimum. Gotta save spoons everywhere I can! Let me tell you how I use each one. You can click on any of the screenshots to see them full-size.</p>
<h3 id="google-calendar">Google Calendar</h3>
<p>I&#39;m a very visual person. When I plan an appointment or video call, I always have to look at my calendar. My brain works in calendar weeks. So for a high-level view of what I&#39;m streaming on Twitch and when I stream it, I use Google Calendar. I stream twice a week. On Tuesdays, I code. On Thursdays, I knit. I make sure to distinguish between those two. For Twitch streams that are planned ahead of time, such as the ones where I build an accessible React component, I make sure that goes in the title as well. Those have not been scripted in the past, but they will be for future streams to save me some time and energy. That means I have to plan them ahead of time and to do that, I have to know exactly when they&#39;re happening. I&#39;ve also been numbering the streams but I&#39;m not sure why. I guess that part is just for fun! :)</p>
<p><a href="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fmy-writing-and-planning-process%2FCleanShot%202021-02-11%20at%2023.50.42.png?alt=media&amp;token=a564af5c-987e-4f23-a640-9690c862e3e1"><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fmy-writing-and-planning-process%2FCleanShot%202021-02-11%20at%2023.50.42.png?alt=media&token=a564af5c-987e-4f23-a640-9690c862e3e1" alt="A window with Ashlee&#39;s calendar for February."></a></p>
<h3 id="trello">Trello</h3>
<p>I keep track of all of my writing ideas, plans, and newsletter dates with a &quot;Writing&quot; board in Trello. It has 6 columns:</p>
<ul>
<li><strong>Ideas:</strong> This is like a backlog of ideas for posts. They&#39;re not guaranteed to be written, but getting them out of my brain ensures I won&#39;t forget them and also makes room for other things I want to think about.</li>
<li><strong>To Do:</strong> These are planned posts and newsletters. They have due dates and titles and will definitely be written.</li>
<li><strong>Outlining:</strong> This is the first step in my writing process. Some posts almost skip this step because they can be written in one sitting. Longer posts are on a feature branch for my repository and they have a draft PR in GitHub. We&#39;ll get into that more in the next section.</li>
<li><strong>Writing:</strong> Posts in this column are ones I&#39;ve started filling in the outline on. This column is also for posts that are being reviewed. I&#39;m a pretty interactive reviewer/editor and still consider editing to be writing because I might re-word whole sections after a post is written out.</li>
<li><strong>Ready &amp; Scheduled:</strong> This column holds cards for newsletters that have been scheduled for delivery and posts that have PRs that just need me to press &quot;Merge&quot;.</li>
<li><strong>Live:</strong> Things in this column have been sent or published. The whole world can see them.</li>
</ul>
<p>The columns are laid out so that a task moves through each step from left to right. And as I mentioned in the last section, I&#39;m a very visual person. I use my one free power-up for the Calendar that lets me view all of my tasks by week or month. I use these views to ensure that I&#39;ve spaced out my topics appropriately and so I can group ideas if I feel like writing a series about a broader topic.</p>
<p><a href="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fmy-writing-and-planning-process%2FCleanShot%202021-02-08%20at%2022.23.46.png?alt=media&amp;token=73366deb-df54-475c-b391-3f0bb59e4e2b"><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fmy-writing-and-planning-process%2FCleanShot%202021-02-08%20at%2022.23.46.png?alt=media&token=73366deb-df54-475c-b391-3f0bb59e4e2b" alt="Trello board showing 5 columns: To Do, Outlining, Writing, Ready &amp; Scheduled, and Live. The background of the board is a desk in a dark room with a computer screen that reads &quot;Do what is great.&quot;"></a></p>
<h3 id="github-and-vercel">GitHub (and Vercel)</h3>
<p>The code for this website is stored in a GitHub repository. Each post is a markdown file and it&#39;s treated just like any other file in a pull request. When I want to create a new post, I first create a branch called <code>post/&lt;blog-post-slug&gt;</code>. The <code>post</code> prefix is only there to help me keep things organized. I don&#39;t do anything special for CI/CD. Second, I create a new file for the post and put it in the appropriate directory. My directory structure for posts looks like this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">posts/</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  2019/</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    01/</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    02/</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    ...</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  2020/</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    01/</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">    02/</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    ...</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">  2021/</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">    01/</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">    02/</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code">      my-writing-and-planning-process.md</span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code">    ...</span>||</div>||<div>||<span class="line-number">15</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>After I&#39;ve outlined a post, I commit and push the changes and open a draft PR on GitHub. This enables me to see all the in progress posts I have at once and also allows me to work on many posts at once. When I was writing my <a href="/series/nextjs-firebase-blog">Build a Blog Site with Next.js and Firebase series</a>, all 5 parts of the series where in their own pull requests at the same time.</p>
<p>I use Next.js for this site and deploy it to <a href="https://vercel.com">Vercel</a>. Vercel automatically builds previews for every PR and I use them when reviewing posts to make sure all links work correctly and that the post looks nice on my site. When I&#39;m ready to publish a post, all I have to do is hit the &quot;Merge&quot; button on the PR and Vercel automatically builds the updated version of my site.</p>
<p><a href="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fmy-writing-and-planning-process%2FCleanShot%202021-01-03%20at%2019.13.14.png?alt=media&amp;token=325f2884-65c0-4128-afbc-8c3eba7385cd"><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F02%2Fmy-writing-and-planning-process%2FCleanShot%202021-01-03%20at%2019.13.14.png?alt=media&token=325f2884-65c0-4128-afbc-8c3eba7385cd" alt="A list of pull requests in Ashlee&#39;s website GitHub repository. It&#39;s showing one pull request for each part in her Build a Blog Site with Next.js and Firebase series."></a></p>
<h2 id="in-summary">In Summary</h2>
<p>I love my new process. The tools I use can easily have redudant overlaps in their uses, but I feel confident that the setup I have keeps everything organized for very intentional usage. I schedule my streams in Google Calendar. I schedule my posts and newsletters in Trello. I manage reviewing, testing, and publishing in GitHub. I can write as many or as few posts as I want at the same time.</p>
<p>If this post sparked any ideas for you or if you already do something that&#39;s just slightly different, I&#39;d love to hear about it. <a href="https://twitter.com/ashleemboyer">Send me a tweet</a> or <a href="mailto:hello@ashleemboyer.com">send me an email</a>!</p>


<p>It&#39;s been awhile since I&#39;ve set up a React app for testing with Jest and Enzyme. Since I had to look up more than one of these steps to remind myself how to accomplish this, I decided to write a super quick guide in case it helps anyone else.</p>
<h2 id="dec-8th-correction">Dec. 8th Correction</h2>
<p>Enzyme is not yet compatible with React 17. You should make sure the highest version of React you are using is <code>16.14.0</code> if you want to use Enzyme with your tests. <a href="https://github.com/enzymejs/enzyme/pull/2430">This PR</a> will add an adapter for React 17. <em>Please do not ask them when it will be done, it will be done when they get it done!</em></p>
<h2 id="step-1-create-the-app-with-create-react-app">Step 1: Create the app with <code>create-react-app</code></h2>
<p>This requires having <code>npx</code> installed. You can read about it <a href="https://www.npmjs.com/package/npx">here</a>.</p>
<pre class="language-bash">||<div>||<span class="line-number">1</span>||<span class="line-of-code">npx create-react-app <app-name></span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-2-if-you-use-sass-modules-like-me-install-node-sass">Step 2: If you use Sass modules, like me, install <code>node-sass</code></h2>
<p>At the time of this writing, <code>node-sass@5.0.0</code> in incompatible and <code>node-sass@4.14.1</code> must be installed instead. There&#39;s a Stack Overflow answer about it <a href="https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0/64626556#64626556">here</a>.</p>
<pre class="language-bash">||<div>||<span class="line-number">1</span>||<span class="line-of-code">yarn add node-sass@4.14.1</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-3-install-the-dev-dependencies-for-enzyme">Step 3. Install the dev dependencies for Enzyme</h2>
<p>The <code>--dev</code> option is what saves these under <code>devDependencies</code> in your <code>package.json</code> file. Why do they need to be under <code>devDependencies</code>? Because these kinds of dependences are &quot;Packages that are only needed for local development and testing.&quot; You can read a little more on that <a href="https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file">here</a>.</p>
<pre class="language-bash">||<div>||<span class="line-number">1</span>||<span class="line-of-code">yarn add --dev enzyme enzyme-adapter-react-16</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-4-configure-enzyme-with-an-adapter-in-setuptestsjs">Step 4. Configure Enzyme with an adapter in <code>setupTests.js</code></h2>
<p>Enzyme needs to know what adapter you want to use. We tell it in the <code>setupTests.js</code> file in the <code>src</code> directory of your project. You can get more details about setting up Enzyme <a href="https://enzymejs.github.io/enzyme/">here</a>.</p>
<p>Your <code>setupTests.js</code> should only have some comments and one <code>import</code> statement right now. Just add these lines right after that <code>import</code>:</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code">import Enzyme from 'enzyme';</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">import Adapter from 'enzyme-adapter-react-16';</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">Enzyme.configure({ adapter: new Adapter() });</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-5-get-to-testing-💪">Step 5. Get to testing! 💪</h2>
<p>Everything you need is installed and now you just need to write up some tests. Here are some Jest and Enzyme docs to help you get started:</p>
<ul>
<li><a href="https://jestjs.io/docs/en/getting-started">Jest &quot;Getting Started&quot; Guide</a></li>
<li><a href="https://jestjs.io/docs/en/tutorial-react">Jest &quot;Testing React Apps&quot; Guide</a></li>
<li><a href="https://enzymejs.github.io/enzyme/docs/guides/jest.html">Enzyme&#39;s &quot;Using enzyme with Jest&quot; Guide</a></li>
<li><a href="https://enzymejs.github.io/enzyme/docs/api/">Enzyme API Reference</a></li>
</ul>


<p>Scroll-to-top buttons are great for pages that are long enough to require a few scrolls to read everything. They&#39;re even better for extremely long pages. Scrolling is a lot of work for some users, especially on a mobile device. We (website creators) can greatly reduce the amount of work it takes to scroll our pages with surprisingly little effort on our part.</p>
<p>One example is the <a href="https://www.w3.org/TR/wai-aria-practices-1.1">WAI-ARIA Authoring Practices</a>, which is 140,923 pixels tall at the time of this writing. I&#39;m not calling them out, it&#39;s just one of my favorite pages on the entire internet! <a href="https://ashleemboyer.com/my-favorite-resource-for-making-accessible-custom-components">It&#39;s a great resource for making accessible custom components</a>.</p>
<p>Making a scroll-to-top button and making it scroll smoothly is probably a lot easier than you think. It&#39;s definitely a lot easier than <em>I</em> thought! The code bits I&#39;m about to show are for React and SCSS, but you don&#39;t need to know either. The basic concepts here are for JavaScript and CSS. We&#39;ll also cover how to get rid of the smooth scrolling when it&#39;s an accessibility concern.</p>
<h2 id="the-scss-code">The SCSS Code</h2>
<p>First, let&#39;s make sure this scroll will happen smoothly. To do so, set <code>scroll-behavior</code> to <code>smooth</code> in a global stylesheet under the <code>html</code> element. The media query I&#39;ve added is for accessibility. Animations can be distracting or for some users, like myself, have vestibular disorders where animations can cause harmful physical effects. These effects can include dizziness, nausea, and headaches or migraines.</p>
<p>We can prevent this harm to these users who have set up their device to reduce motion by using the <code>prefers-reduced-motion</code> CSS media query. Inside of it, we set the <code>scroll-behavior</code> to <code>auto</code>, which is the default. If you&#39;d like to read more about this technique, it&#39;s thoroughly covered in <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C39">WCAG 2.1</a>.</p>
<pre class="language-scss">||<div>||<span class="line-number">1</span>||<span class="line-of-code">html {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  scroll-behavior: smooth;</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  @media (prefers-reduced-motion: reduce) {</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    scroll-behavior: auto;</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="the-react-code">The React Code</h2>
<p>Now, add a button to the bottom of your page with lots of content. The important line of code here is <code>window.scrollTo(0, 0)</code>. This is what will scroll your page to the top. You can read more about this function <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo">on MDN</a>.</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code"><button</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  onClick={() => {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    window.scrollTo(0, 0);</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  }}</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">></span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  Scroll to top</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code"></button></span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="managing-focus">Managing focus</h2>
<p>Finally, we must also address focus management when adding a scroll-to-top button to our sites. If we add nothing else to our code from above, the button will still have focus after it is clicked. What this means for users who navigate pages with a keyboard is that the page&#39;s focus is not where they expect it to be. They expect it to be at the top of the page when it&#39;s not.</p>
<p>In your button&#39;s <code>onClick</code> listener, after <code>window.scrollTo(0, 0)</code>, you need to manually put something at the top of your page in focus. In this article, for example, I can call <code>focus</code> on the <code>&lt;h1&gt;</code> element containing the article title. We just need to add one thing to that element in order for this to work without interrupting normal keyboard navigation. That thing is <code>tabindex=&quot;-1&quot;</code>.</p>
<p>My <code>&lt;h1&gt;</code> element will then look like this (in React):</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code"><h1 id="article-title" tabIndex="-1"></span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  Accessible, Smooth Scroll-to-top Buttons with Little Code</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></h1></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>And here&#39;s what button will look like with this specific example:</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code"><button</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  onClick={() => {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    window.scrollTo(0, 0);</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    // focus management</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">    const title = document.getElementById('article-title');</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    title.focus();</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">  }}</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">></span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">  Scroll to top</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code"></button></span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="conclusion">Conclusion</h2>
<p>That&#39;s it! It really is just a few lines of code. After you add this, everyone will be able to quickly scroll to the top of your website. You&#39;ve also made it so your site doesn&#39;t accidentally harm someone who can&#39;t tolerate animations! Well done. I am proud of you!</p>


<p>Great news! I&#39;m joining the 30-day Just F*ing Ship It challenge to launch <a href="https://nocodeoverlays.com">No-Code Overlays</a> on October 31st, 2020. If you want to read all the background information on the project, how I came up with my idea, and what the next few days will be like, make sure to check out the <a href="https://nocodeoverlays.com/blog">No-Code Overlays blog</a>! I&#39;ll keep posting updates there as well, so keep your eye out every few days or so.</p>
<p><img src="https://github.com/NoCodeOverlays/nocodeoverlays.com/raw/master/public/preview.png" alt="A white page with black text. At the top is the site title &quot;No-Code Overlays&quot;. Below it, smaller body text reads, &quot;Empowering anyone to create interactive streaming overlays without learning how to code.&quot; At the bottom is small text and a link that reads &quot;Made by Ashlee M Boyer&quot;. In the middle is a yellow square that looks like a sticky note. It is turned at an angle. It has 4 lines of text with the most emphasis on the third line, a countdown. It reads, &quot;Coming Soon! October 21st, 2020 5pm ET. 35d 3h 5m 40s. Check in periodically for details.&quot;"></p>


<p>Interviewing requires <em>a lot</em> of time and energy. Maybe you need to study some technical topics ahead of time. You probably already have commitments that require a lot of your focus&mdash;like another job or children. That&#39;s why it&#39;s important to be selective where you can about companies you want to interview with.</p>
<p>Here are the ten questions I&#39;m using to decide whether or not I&#39;m interested in interviewing with a company:</p>
<ol>
<li>How large is the engineering team?</li>
<li>What is the make-up of the engineering team? Such as, how many managers are there, who do they manage, etc.</li>
<li>How often are one-on-ones?</li>
<li>Who are the one-on-ones with?</li>
<li>Is there career coaching?</li>
<li>Are there performance reviews?</li>
<li>How have you handled performance reviews with the pandemic?</li>
<li>What&#39;s the development process like? For example, do you work in sprints?</li>
<li>How tasks are estimated and assigned?</li>
<li>Are there regular team retrospectives?</li>
</ol>


<p>Accessibility can be pretty overwhelming at first. There are a lot of things to consider and it&#39;s really hard to figure out what you don&#39;t know when you&#39;re just starting out. I hope you find this short list useful to help your first dive into making accessible digital content. My focus is usually on websites, but a lot of this is good for things like mobile apps, ebooks, and slideshows, too!</p>
<h2 id="1-color-contrast">1. Color Contrast</h2>
<p>Ensuring you have a good contrast between text color and background color ensures nearly everyone can consume your content. People with vision disabilities (vision loss or color blindness) need high contrasting colors. Your minimum goal here is to meet contrast standards for normal and large sized text.</p>
<p>My favorite tool for this is the <a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a>. You can input your foreground and background text colors and it will tell you how they fare under the WCAG level AA and level AAA standards.</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/headers%2F2020%2F07%2F26-three-thigns%2FScreen%20Shot%202020-07-26%20at%209.53.28%20PM.png?alt=media&token=aa6423ce-f0b1-4b2d-b43d-bb23765d0c40" alt="A screenshot of the WebAIM Contrast Checker in action. It shows the overall contrast ratio of two colors to the right of two inputs, and below that it shows whether the contrast passes level AA and AAA standards for both normal and large sized texts."></p>
<h2 id="2-alternative-text">2. Alternative Text</h2>
<p>Alternative text is also important for people with vision disabilities. There are two ways you can go about alternative text depending on your platform.</p>
<p>When you&#39;re making a website by writing your own HTML, writing blog posts, or posting to social media sites like Twitter, you can add alt text to images. In HTML, make sure you&#39;re providing an <code>alt</code> attribute all <code>img</code> elements. When writing blog posts, a lot of blogging platforms will have a text input for you to provide alternative text. On Twitter, you can add alternative text as you&#39;re about to tweet an image or GIF.</p>
<p>The previous points are only going to be useful for people using a screen reader. These devices pick up those attributes to present images to the person consuming them. However, not all users with vision disabilities use screen readers. So, if you feel like you&#39;d rather make your alternative text available for everyone, it&#39;s common practice to surround an image description in square brackets and preface it with &quot;Image description&quot;, like this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">[Image description: ...]</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>As for actually writing the image descriptions, that&#39;s going to take some practice. Imagine you are sitting socially distanced from a friend and you want to show them a picture you&#39;ve come across on your phone, but you&#39;d have to break social distance to physically show them. How would you describe the image to them in one or two sentences?</p>
<h2 id="3-semantic-html">3. Semantic HTML</h2>
<p>This point is a little more technical, but also useful for folks that use blogging platforms that provide text editors. The main lesson for this section? Use the elements that we have been given for their intended uses.</p>
<ul>
<li>Need to display things in a list format? Use a bullet (<code>&lt;ul&gt;</code> element) or numbered list (<code>&lt;ol&gt;</code> element).</li>
<li>Have a navigation menu at the top of your site? Use a <code>&lt;nav&gt;</code> element.</li>
<li>Have an element that users can click on to perform an important action? PLEASE use a <code>&lt;button&gt;</code> element. 😁</li>
</ul>
<p>Using semantic HTML elments is so important because they&#39;re already able to be presented by assistive devices without much addition. You&#39;re going to start adding ARIA roles and properties the minute you start using <code>&lt;div&gt;</code>s for <code>&lt;button&gt;</code>s, and if you don&#39;t know what you&#39;re doing there, you can severely and negatively impact a screen reader user&#39;s experience.</p>
<p>You can read and practice with HTML semantic elements <a href="https://www.w3schools.com/html/html5_semantic_elements.asp">here</a>, on W3Schools.</p>


<h2 id="first-of-all-thank-you-so-much-🎉">First of all, Thank you so much! 🎉</h2>
<p>The &quot;Build a React &amp; Firebase Blog Site&quot; live stream was fantastic! I now have two posts to add to my <a href="https://dev.to/ashleemboyer/build-a-react-firebase-blog-site-part-1-4gn0">&quot;Build a React &amp; Firebase Blog Site&quot; Series</a> and am considering packaging the series up in an ebook format! You can watch the video on YouTube!</p>
<iframe width="100%" height="400px" src="https://www.youtube.com/embed/UA0-DWfIuts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<h2 id="whats-this-about-🤔">What&#39;s this about? 🤔</h2>
<p>In the meantime, I&#39;ve been thinking about topics for upcoming live coding streams and have decided to make a whole series about building accessible React components. I have GitHub repository with a couple of things in it already, but needed a break from all things outside of work for a while. What better way to pick things back up than with a live series to add to the repository?</p>
<h2 id="neat-hows-it-going-to-work-✨">Neat! How&#39;s it going to work? ✨</h2>
<p>Here&#39;s the idea: we&#39;ll pick a random widget from the <a href="https://www.w3.org/TR/wai-aria-practices">WAI-ARIA Authoring Practices</a> with an on-screen wheel, then build it in React! If a really complex component is chosen, it might take an extra stream to finish it, but we&#39;ll walk through the whole thing from start to finish!</p>
<h2 id="lets-gooo-🏃♀️">Let&#39;s gooo! 🏃‍♀️</h2>
<p>To get notified when I go live on stream, you can <a href="https://twitch.tv/ashleemboyer">follow me on Twitch</a>. If you can&#39;t catch the stream live, it&#39;ll still be available afterwards to re-watch! I also plan on uploading my videos to YouTube since they don&#39;t stay on Twitch forever. I&#39;ll also add to the bottom of this post as we make it though the series so everything is nicely grouped together.</p>


<p>I&#39;ll admit: making web apps accessible can be challenging, especially when you&#39;re new to it. It requires thinking from the perspective of disabled users and having some knowledge about the assistive tools they use, such as screen readers. You may also feel overwhelmed when you start reading documentation. There is a ton of information out there! So I&#39;m going to share with you my favorite resource that I use when making accessible custom components and I&#39;ll also tell you about how I like to use it.</p>
<h1 id="w3cs-wai-aria-authoring-practices">W3C&#39;s WAI-ARIA Authoring Practices</h1>
<p>If you don&#39;t already know, W3C (The World Wide Web Consortium) is &quot;an international community that develops open standards to ensure the long-term growth of the Web.&quot; They have an initiative called The Web Accessibility Initiative (WAI), which provides &quot;strategies, standards, and resources&quot; for making the web more accessible to disabled people. There is a wealth of information here and it&#39;s easy to get overwhelmed by it. That&#39;s why I recommend starting with the <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> when you&#39;re ready to start looking at some technical documentation on accessibility.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/n12gavis3ns73vbhfx7i.png" alt="Screenshot of the WAI-ARIA Authoring Practices webpage."></p>
<h2 id="what-youll-find">What you&#39;ll find</h2>
<p>There are 9 sections. I use the third section the most.</p>
<ul>
<li><p><strong>Introduction:</strong> Talks about the purpose of the document and what will be discussed throughout.</p>
</li>
<li><p><strong>Read Me First:</strong> Covers a couple of ARIA principles, the importance of testing assistive technologies, and warns that the document doesn&#39;t cover mobile and touch support.</p>
</li>
<li><p><strong>Design Patterns and Widgets:</strong> Shows how to make accessible &quot;widgets&quot; (or components) using WAI-ARIA roles, states, and properties and has requirements for implementing keyboard support. There are 27 examples!</p>
</li>
<li><p><strong>Landmark Regions:</strong> Introduces HTML sectioning elements and ARIA landmark roles and explains how they help assistive technology users understand how a web page is laid out.</p>
</li>
<li><p><strong>Providing Accessible Names and Descriptions:</strong> Talks about the purpose of accessible names and descriptions, when to use them, how browsers assemble them, and rules for making them.</p>
</li>
<li><p><strong>Developing a Keyboard Interface:</strong> Covers the principles of coding keyboard support and why it&#39;s important.</p>
</li>
<li><p><strong>Grid and Table Properties:</strong> Talks about the ARIA properties that help make grids and tables accessible and how to use them.</p>
</li>
<li><p><strong>Intentionally Hiding Semantics with the <code>presentation</code> Role:</strong> Discusses what the <code>presentation</code> role does and when it&#39;s commonly used.</p>
</li>
<li><p><strong>Roles That Automatically Hide Semantics by Making Their Descendants Presentational:</strong> Lists the roles/elements that make all of their children have the previously discussed <code>presentation</code> role.</p>
</li>
</ul>
<h2 id="how-i-use-it">How I use it</h2>
<p>Section 3, &quot;Design Patterns and Widgets&quot;, is my favorite and the one I read the most. There are so many widgets discussed! Let&#39;s look at <a href="https://www.w3.org/TR/wai-aria-practices/#button">the Button subsection</a> as an example.</p>
<p>Each section starts by explaining what the widget does and what it&#39;s used for. If there are multiple types of the widget, it&#39;ll briefly cover those too. There are 2 additional types of buttons supported by WAI-ARIA: toggle and menu. I use this section to fully understand the functionality of a widget and also to learn any new terminology I should be using when documenting my own components.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/3rhs8nantuv03eua50ia.png" alt="Screenshot of the first section of the Button widget."></p>
<p>Sometimes there will be NOTE sections that discuss caveats or additional resources. The one for this widget discusses cases when links need to look like buttons or when buttons need to function like links.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/zlp5ppilfkehbqpliufj.png" alt="Screenshot of the note for the Button widget."></p>
<p>Next up, there will be a list of links to examples. <a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">The Button widget examples</a> show how to correctly make a <code>div</code> element a button and a toggle button created with an <code>a</code> element. I like to read the code examples then use them as a reference when I make a rough initial version of the component in a code sandbox. Making an isolated practice copy prevents any unexpected behavior caused by my codebase and I can do manual testing with assistive technologies with ease.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/tynhp8eh33i2laie7rmb.png" alt="Screenshot of the examples section for the Button widget."></p>
<p>After that, there&#39;s a section about keyboard interaction. For the Button widget, it explains that <code>Space</code> and <code>Enter</code> activate the button and then goes into deep detail about what happens to focus based on the action performed by the button. The format of this section usually makes it very straightforward to come up with a todo list of what I need to code to make a component accessible to keyboard interaction.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/r39znxw9eupjd1apt3nd.png" alt="Screenshot of the keyboard interaction section for the Button widget."></p>
<p>Finally, you&#39;ll come across a section about the WAI-ARIA roles, states, and properties associated with the component. Like the previous section, it&#39;s formatted in such a way that lets me test the effects of each role, state, or property one-by-one in my isolated code sandbox. There are also links to the main documentation for each which I use to better understand their purpose.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/x5ntbkr93815gs4y3m3p.png" alt="Screenshot of the WAI-ARIA roles, states, and properties section for the Button widget."></p>
<h2 id="good-luck-and-have-fun">Good luck, and have fun!</h2>
<p>When I am approaching something new and potentially daunting, I always try to keep the mentality that the experience will be a fun challenge. It&#39;s totally okay if you don&#39;t get it right on your first try! That&#39;s how coding works in general. It takes practice and patience.</p>
<p>If you ever want to chat with me about accessibility, send me a DM or tweet on Twitter! I love a good accessibility conversation. :)</p>


<h2 id="table-of-contents">Table of Contents</h2>
<ol>
<li>Personal Blog Stats</li>
<li>DEV Stats</li>
<li>2020 Plans</li>
</ol>
<p>In April of 2019, I knew I needed to change my life. I was extremely unhappy in a toxic workplace, had no involvement in my community, and the only tech people I knew in my area worked at the same place and none of us talked to each other. I decided to <a href="https://ashleemboyer.com/why-and-how-you-should-use-twitter-for-networking">join Twitter to network</a> and figure out what was going on in the tech world. (Side note: I&#39;ve gained 1,800 followers since!)</p>
<p>Then, I discovered <a href="https://dev.to">DEV Community</a>. It seemed like a great place to start writing. I needed to do <em>something</em> with all of the emotions I was feeling at the time. So, I wrote about my process for looking for a new job: <a href="https://ashleemboyer.com/how-to-identify-your-knowledge-gaps-in-under-an-hour">How to Identify Your Knowledge Gaps in Under an Hour</a>. It got 187 views, 8 reactions, and 1 comment.</p>
<p>I&#39;d never gotten so many views on one post before! So, I decided to write another one the next day: <a href="https://ashleemboyer.com/it-s-ok-to-be-scared">It&#39;s OK to be Scared</a> (204 views and 6 reactions). Then I wrote my first &quot;hit&quot; the following day: <a href="neither-you-nor-your-work-has-to-be-perfect">Neither You nor Your Work Has to be Perfect</a> (1234 views, 82 reactions, 24 comments). I think that was my first post that DEV Community (<a href="https://twitter.com/ThePracticalDev">@ThePracticalDev</a>) tweeted out. It felt so validating having my post shared by an account with hundreds of thousands of followers.</p>
<p>I think it was at this time that I decided to do a 30-day blogging challenge. I&#39;ve always loved to write, but never succeeded in making it a habit. My goal was to write regularly. This is something I&#39;m still trying to figure out, and I think most other people are too. Life is unpredictable and very hard to plan for. Habits and hobbies are hard to keep up with.</p>
<p>So, I did my challenge, and I was hooked. Some posts did really well, some got less than 100 views. It helped me gauage what I really wanted to write about and what people liked reading about. If you want to read about the results of the challenge, I wrote about it: <a href="https://dev.to/ashleemboyer/after-30-days-of-writing-on-dev-to-a08">After 30 Days of Writing on DEV.to</a>.</p>
<p>The challenge did exactly what I wanted it to. I felt confident in what I had to say and decided to spend some time to work on my own blog site. I&#39;d cross-post everything and keep track of stats with Google Analytics. I started recording stats on my personal site on August 11, 2019. I&#39;ll spend the rest of this post sharing some of those stats and also the ones I can get on DEV.</p>


<p>Let&#39;s say you allow 5 sizes of icons in your web application and they&#39;re in 6-pixel increments: 12, 18, 24, 30, and 36. Your Sass file might have something like the following to handle this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  &--size-12 {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    width: 12px;</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    height: 12px;</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    font-size: 12px;</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">  &--size-18 {</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    width: 18px;</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">    height: 18px;</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">    font-size: 18px;</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code">  &--size-24 {</span>||</div>||<div>||<span class="line-number">15</span>||<span class="line-of-code">    width: 24px;</span>||</div>||<div>||<span class="line-number">16</span>||<span class="line-of-code">    height: 24px;</span>||</div>||<div>||<span class="line-number">17</span>||<span class="line-of-code">    font-size: 24px;</span>||</div>||<div>||<span class="line-number">18</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">19</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">20</span>||<span class="line-of-code">  &--size-30 {</span>||</div>||<div>||<span class="line-number">21</span>||<span class="line-of-code">    width: 30px;</span>||</div>||<div>||<span class="line-number">22</span>||<span class="line-of-code">    height: 30px;</span>||</div>||<div>||<span class="line-number">23</span>||<span class="line-of-code">    font-size: 30px;</span>||</div>||<div>||<span class="line-number">24</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">25</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">26</span>||<span class="line-of-code">  &--size-36 {</span>||</div>||<div>||<span class="line-number">27</span>||<span class="line-of-code">    width: 36px;</span>||</div>||<div>||<span class="line-number">28</span>||<span class="line-of-code">    height: 36px;</span>||</div>||<div>||<span class="line-number">29</span>||<span class="line-of-code">    font-size: 36px;</span>||</div>||<div>||<span class="line-number">30</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">31</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">32</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>These all look really similar, right? The class names all have the same format, and each one sets a <code>width</code>, <code>height</code>, and <code>font-size</code> to be the same thing. Would you believe me if I told you that it&#39;s possible to dynamically create blocks of CSS for class names in Sass?</p>
<p>Well, believe me! It&#39;s true!</p>
<p>Here&#39;s one way you can introduce a <code>@for</code> to do this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  @for $i from 1 through 5 {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    $base-size: 12;</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    $increment: 6;</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    $calculated-size: $base-size + ($i * $increment);</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    &--size-#{$calculated-size} {</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">      width: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">      height: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">      font-size: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">    }</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>What if you don&#39;t have even increments, though? You can also loop through an array of values like this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">$icon-sizes: 12, 16, 32, 48;</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  @each $size in $icon-sizes {</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    &--size-#{$size} {</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">      width: #{size}px;</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">      height: #{size}px;</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">      font-size: #{size}px;</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    }</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code"></span>||</div>||</pre>


<p>Dear Women &amp; Girls,</p>
<p>Take up space. You are smart and deserving. If a man or boy tries to make you feel otherwise, refer to this list of statements below. Thanks to <a href="https://twitter.com/necessaryaf/status/1193608467904368642">@necessaryaf</a> on Twitter for this list.</p>
<ol>
<li>You interrupted me, I’m not finished talking.</li>
<li>No.</li>
<li>That isn’t funny.</li>
<li>That isn’t appropriate.</li>
<li>I already know that.</li>
<li>That won’t be necessary.</li>
<li>Leave me alone.</li>
<li>You&#39;re making me uncomfortable.</li>
<li>Stop ignoring what I’m saying.</li>
<li>You owe me an apology.</li>
<li>You don&#39;t need to be that close to me.</li>
<li>If you insist on speaking to me in this manner, I’m going to ask you to leave/I will not continue this conversation with you.</li>
</ol>
<p>We&#39;re socially trained to soften our language, but we can change that.</p>
<p>Signed,</p>
<p>A Tired Woman in Tech</p>


<p>To be completely honest: I have no idea what the answer is here. I don&#39;t think there&#39;s just one correct answer. Burnout is so unique to every individual, which become more obvious to me after I asked my followers about how they cope with feeling uninspired:</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">💫🌟✨ Quick question 💫🌟✨<br><br>What do you do for yourself when you start to feel uninspired? I haven&#39;t been coding much outside of work like I used to. My brain is telling me, &quot;Write some code!&quot; but when I open my laptop my body tells me, &quot;Meh, close the lid.&quot;</p>&mdash; ashlee boo-yer 🐯🧶🍂 (@ashleemboyer) <a href="https://twitter.com/ashleemboyer/status/1187018680405643265?ref_src=twsrc%5Etfw">October 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p>Some people take a break, some try to push through, and a lot of people said that they try to consume inspiring content.</p>
<p>This isn&#39;t the first time I&#39;ve gone through burnout. It also happened at the beginning of this year when I finally figured out I needed a different work environment. With less than a year of professional experience at the time, I knew I&#39;d have to work hard if I wanted to stand out from other folks with more years of experience. That&#39;s when I started <a href="https://ashleemboyer.com/after-30-days-of-writing-on-dev-to">writing more</a>, <a href="https://ashleemboyer.com/why-and-how-you-should-use-twitter-for-networking">networking on Twitter</a>, and <a href="https://ashleemboyer.com/what-it-means-to-learn-out-loud">learning out loud</a>.</p>
<p>Along the way, I discovered how much work there is to be done in my local community (and the world <span role="img" aria-label="exploding head">🤯</span>) when it comes to web accessibility. In the developer community, a lot of folks are under the impression that accessibility is hard or expensive. Outside of it, people are ignorant to how accessibility tools, such as screen readers, actually work and ableism is rampant.</p>
<p>When news about the [Supreme Court rejecting an appeal from Domino&#39;s] came out, it was really exciting to hear, until I read the comments. There were far too many people with far too little understanding of web accessibility sharing their opinions on whether or not companies should be sued for making inaccessible products. I tried to do my part in educating people by explaining that screen readers only read things correctly if a site is built to work with tools. I also argued with people about whether or not discrimination should be legal.</p>
<p>My overwhelming need to speak and educate along with the incredible amount of ableism I&#39;ve come across in the last several weeks are what I think have mostly contributed to the burnout I&#39;m experiencing. It&#39;s vastly different from the burnout I experienced earlier this year. As such, I had no idea how to fix it. I fell into this cycle of feeling guilty for not writing or coding on side projects, which led to feeling <em>even more</em> burned out.</p>
<p>So what&#39;s starting to bring me out of this now?</p>
<ul>
<li><span role="img" aria-label="talking head">🗣</span>️ talking about it</li>
<li><span role="img" aria-label="handshake">🤝</span>️ supportive friends</li>
<li><span role="img" aria-label="hourglass">⏳</span> taking a break</li>
<li><span role="img" aria-label="yarn">🧶</span> hours of knitting</li>
<li><span role="img" aria-label="sparkles">✨</span> inspirational content</li>
</ul>
<p>If you&#39;re struggling with burnout, I suggest trying all of these things. Some of them will work and some of them won&#39;t. Everyone is different and even every time you experience burnout can be different. The people who matter will understand what you&#39;re going through. The ones who don&#39;t might judge you and try to make you feel bad rather than lend a hand.</p>
<p>Stick around the folks that lend a hand and support you. They&#39;ll see you through this. You&#39;ll make it to the other side.</p>


<blockquote>
<p><em>Trigger Warning: violence against women</em></p>
</blockquote>


<p>A few days ago, I came across a tweet thread by my e-friend, <a href="https://twitter.com/TheCodePixi">@TheCodePixi</a>. She&#39;s working on making <a href="https://twitter.com/hashtag/SpooniesWhoCode">#SpooniesWhoCode</a> a thing, so make sure you join in if you&#39;re a spoonie who codes!</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Looking to connect with more <a href="https://twitter.com/hashtag/SpooniesWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#SpooniesWhoCode</a>! Or maybe I&#39;m already connected and don&#39;t know it? Leave a reply with a little about yourself and your tips for other <a href="https://twitter.com/hashtag/spoonies?src=hash&amp;ref_src=twsrc%5Etfw">#spoonies</a> (IE: Me!) on how you keep coding when you&#39;re low on spoons. Gimme all your tech self care tips 👇</p>&mdash; Pixi v1.6 (@TheCodePixi) <a href="https://twitter.com/TheCodePixi/status/1166495789658624000?ref_src=twsrc%5Etfw">August 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<h2 id="but-wait-whats-a-spoonie">But wait, what&#39;s a spoonie?</h2>
<p>A spoonie is someone who deals with a chronic condition that frequently or randomly takes away their capacity to live life how they want to. If someone says, &quot;I&#39;m low on spoons,&quot; it means they probably don&#39;t have the energy to do something specific. This doesn&#39;t mean they don&#39;t have energy for <em>anything</em>.</p>
<p>Being a spoonie is a balancing act. We have to be picky about what we spend our spoons on. This is where the tweet comes in. It&#39;s <strong>hard</strong> to figure out the balance of what you <em>want</em> to do, what you <em>need</em> to do, and what you <em>should</em> do.</p>
<p>You may <em>want</em> to go out to dinner with your friends because you cancelled the last time. You may <em>need</em> to do the dishes or some laundry because it&#39;s piled up over the past few days.</p>
<p>But what <em>should</em> you do? Are you in pain? Are you tired? What are your limits?</p>
<h2 id="a-little-bit-about-me-a-spoonie">A little bit about me, a spoonie</h2>
<p>I haven&#39;t always been a spoonie.</p>
<p>For 13 years, I played soccer nearly all-year-round. I quit after my first year of college. Rose-Hulman is an extremely fast-paced school, all the time, and I couldn&#39;t keep dedicated 3-4 hours a day to soccer and not get any playing time in return. This was a really hard change for me, emotionally and physically.</p>
<p>That last season, I was in my second car accident. The impact passed from my foot on the brake, up my leg, and into my SI (sacroiliac) joints. This is where your spine connects to your pelvis. Since then, I&#39;ve had a lot of inflammation and pain in the area.</p>
<p>Two years prior, in my first accident, the vehicle I was driving rolled on its side after spinning out on ice. I never really got a full diagnosis from this, but had back spasms on the lower-right side of my back briefly treated by a chiropractor.</p>
<p>Just last year, I found out I have a slipped disc in my lower spine. It was a relief finally having an answer to all my back pain, but I was still sad about all the time I&#39;d lost to the pain preventing me from functioning. I&#39;d gained a lot weight because I couldn&#39;t exercise (and lots of college stress).</p>
<p>Aside from my back problems, I also started getting migraines very regularly my freshman year. I was taking &quot;as needed&quot; medication every single day. I ended up going to the ER for the first time due to a migraine a couple of years later. (2017, I think?) That&#39;s when I finally got <em>real</em> treatment for them. I saw a neurologist and a found a GP experienced with treating migraines.</p>
<p>I took a lot of medication after that which, thankfully, slowed down all the migraines. Not thankfully, I had about every side effect in the book for some medications. I couldn&#39;t hold conversations, my face and fingers were going numb, and I felt like a zombie.</p>
<p>This is when I truly realized I couldn&#39;t keep doing all the things. Something had to give. It couldn&#39;t be school; I was already past the &quot;normal&quot; 4 years. I just needed to finish college. So, I stopped doing anything else. Some days, it was literally all I could do to drag myself to classes and group project meetings. I ended up missing a lot of classes. My grades in some of them suffered beyond repair. (I made it out though, woo!) My mental health suffered greatly too.</p>
<p>If <em>anything</em> good has come out of these experiences, it&#39;s that I&#39;ve learned a lot about self care.</p>
<h2 id="how-i-keep-coding-or-doing-anything">How I keep coding, or doing anything</h2>
<p><em>This is a summary of the tweet thread I made in response to the one above.</em></p>
<p>I usually have no idea what a day will be like until I wake up and get moving. Sometimes, I&#39;ll wake up with a migraine. If I have it all day and fall asleep with it, I will probably wake up with it the next day too.</p>
<p>My back doesn&#39;t bother me as much anymore, but I&#39;m usually pretty stiff when I first wake up. The chronic pain typically is in my legs. On the bad days, it feels a bit like growing pains I guess. Like a heavy ache from my thighs through my toes.</p>
<p>My advice is to know your limitations. I&#39;m pretty upfront with employers about the conditions I have. Some are judgy about it, some are fine. My current job has unlimited PTO and I can also work from home from time to time. Both of these are super helpful for me.</p>
<p>For example, if I have a migraine, it&#39;s helpful for me to work from home so I can minimize my environment as much as possible. Driving to work, walking through the city, and working in an open office layout with fluorescent lights only exacerbates migraines. At home, I can find a comfy spot to sit in with my laptop, turn off some lights, and close curtains to block out more light.</p>
<p>As for the unlimited PTO, that mainly eases my fears of being judged for &quot;needing a day.&quot; Whether that&#39;s for resting because of pain or taking a mental health day.</p>
<blockquote>
<p>Spoiler alert: you probably won&#39;t need as many mental health days if you work in a supportive environment.</p>
</blockquote>
<p>But let&#39;s talk about the other times where these things aren&#39;t applicable. If you <em>have</em> to go to work, try to express to your team if you&#39;re not operating at 100%. I hope they understand that. (Is anyone ever at 100%?)</p>
<p>Once you&#39;re home, use your remedies! I have 3 or 4 things I try before declaring my migraines as &quot;impossible.&quot; After that, all I can do is lock myself away and sleep. That seems to help some of the other conditions too!</p>
<h3 id="moral-of-the-story">Moral of the story</h3>
<p><a href="https://ashleemboyer.com/don-t-forget-to-take-breaks">Just take a break</a>. You are one person and can only do so much. Don&#39;t overextend yourself. You and your work will suffer.</p>


<p>We&#39;ve reached the third part of our React &amp; Firebase series. In <a href="https://ashleemboyer.com/react-firebase-blog-01">part one</a>, we learned how to set everything up. <a href="https://ashleemboyer.com/react-firebase-blog-02">Last time</a>, we made a page for creating new blog posts. Today, we&#39;re going to read single posts from our Firebase Realtime Database and show them in our app.</p>
<p>If you haven&#39;t read the first two posts, I have some starter code you can use instead. Just make sure you follow steps 1, 2, &amp; 5 from <a href="https://ashleemboyer.com/react-firebase-blog-01">the first part</a> before you go any further.</p>
<h2 id="table-of-contents">Table of Contents</h2>
<ol>
<li>Clone the (Part 3) Starter Code [Optional]</li>
<li>Inspect the <code>Post</code> Component</li>
<li>Connect the <code>Post</code> Component to Firebase</li>
</ol>
<h2 id="1-clone-the-part-3-starter-code-optional">1. Clone the (Part 3) Starter Code [Optional]</h2>
<p>Skip this step if you&#39;ve successfully completed Part 2. Otherwise, you can clone the code by running the following command in the terminal:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">git clone https://github.com/ashleemboyer/react-firebase-blog-starter-part-3.git</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>You&#39;ll need to change one file before continuing: <code>src/firebase.js</code>. If you open it, you&#39;ll see the following <code>config</code> constant:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">const config = {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  apiKey: "<YOUR-API-KEY>",</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">  authDomain: "<YOUR-AUTH-DOMAIN>",</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  databaseURL: "<YOUR-DATABASE-URL>",</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">  projectId: "<YOUR-PROJECT-ID>",</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  storageBucket: "<YOUR-STORAGE-BUCKET>",</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">  appId: "<YOUR-APP-ID>"</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">};</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>The attributes within the constant are used to connect your app to your Firebase project. To find these values, go to your project settings using through the gear icon in the left sidebar of the <a href="https://console.firebase.google.com">Firebase console</a>. Scroll down to the &quot;Firebase SDK snippet&quot; under &quot;Your apps&quot; and copy the attributes from what they&#39;re calling <code>firebaseConfig</code>. Replace the attributes in your <code>config</code> constant with these values.</p>
<p>Now you can run <code>npm install</code> and then <code>npm run start</code> to see your project in a browser.</p>
<h2 id="2-inspect-the-post-component">2. Inspect the <code>Post</code> Component</h2>
<p>You can find this component in the <code>src/pages/post.js</code> file. Let&#39;s take a look at what it does right now.</p>
<p>First, it grabs the slug from the URL using the <code>Router</code> we have set up in <code>src/App.js</code>. Components passed in to <code>Route</code> components within a <code>Router</code> have a <code>match</code> prop sent to them. There are other ways this prop is sent to components, and you can read more about that <a href="https://reacttraining.com/react-router/web/api/match">over here</a>.</p>
<p>Next, we have a <code>postSlugs</code> constant which is an array of slugs that exist with a real blog post. If you look at the database, these match the slugs we&#39;ve given to the first and second blog posts. The problem is that this code isn&#39;t dynamic and it&#39;s also not connected to the database. We&#39;ll come back to this in a few.</p>
<p>Next, we&#39;re checking if the <code>slug</code> in the URL bar is one of the <code>postSlugs</code>. If it isn&#39;t, then the user is trying to see a post that doesn&#39;t actually exist. So, we return a <code>Redirect</code> to our <code>404</code> component. You can read more about the <code>Redirect</code> <a href="https://reacttraining.com/react-router/web/api/Redirect">over here</a>.</p>
<p>Finally, we have our return statement. Right now, it returns the same thing for every valid post <code>slug</code>. Instead, we want to show the real blog post content that we have stored in Firebase.</p>
<h2 id="3-connect-the-post-component-to-firebase">3. Connect the <code>Post</code> Component to Firebase</h2>
<p>First, let&#39;s add import our <code>getFirebase</code> function so we can try to read from the database. While we&#39;re at it, we should also import <code>useState</code> to help manage a couple of things.</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">import React, { useState } from "react";</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">import { getFirebase } from "../firebase";</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>Next, let&#39;s think about how what we want to manage with <code>useState</code>. The first thing that comes to mind is a <code>loading</code> state. This will be a boolean that describes whether or not we are trying to load something from the database. We also want a variable for our <code>currentPost</code> that we&#39;re trying to read from the database. Replace the <code>postSlugs</code> line with the following two lines of code:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">const [loading, setLoading] = useState(true);</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">const [currentPost, setCurrentPost] = useState();</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>We want to start in a loading state so the page can show something different to indicate to a user that the page is loading. You can show an animation, GIF, plain text, whatever you please. We&#39;ll keep it simple for now and just return some text like this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">if (loading) {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  return <h1>Loading...</h1>;</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>Our database call needs to go right before this <code>if</code> statement, however. If we place it after, it will never be reached because the <code>if</code> statement is making the code return early. Here&#39;s what we&#39;ll add after our calls to <code>useState</code> and before the <code>if</code> statement we just wrote:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">if (loading && !currentPost) {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  getFirebase()</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    .database()</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    .ref()</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    .child(`/posts/${slug}`)</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">    .once("value")</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    .then(snapshot => {</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">      if (snapshot.val()) {</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">        setCurrentPost(snapshot.val());</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">      }</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">      setLoading(false);</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">    });</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>Let&#39;s update our check on whether a post exists or not. Update <code>postDoesNotExist</code> to the following:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">const postDoesNotExist = !currentPost;</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>These conditions might be a little confusing at first. What are we checking for? It might help to list the steps of execution here, which you can play around with yourself by adding some console logs to the file.</p>
<ol>
<li>On first load: <code>loading</code> is true and <code>setCurrentPost</code> is undefined, so we go inside of the <code>if</code> statement. Once we make it into the <code>then</code>, if <code>snapshot.val()</code> returns an object (it&#39;ll be null if no post exists with the given <code>slug</code>), we call <code>setCurrentPost</code>, making <code>currentPost</code> no longer undefined.</li>
<li>After <code>setCurrentPost</code> call: Making this call will re-render the component. We reach our <code>if (loading &amp;&amp; !currentPost)</code> statement again. Since <code>currentPost</code> is now defined, we do not go in the code block again, thus keep ourselves from unnecessarily making calls to the database. We reach the <code>if (loading)</code> statement. <code>loading</code> is still true, so the component returns some text and doesn&#39;t do anything else.</li>
<li>After <code>setLoading</code> call: Making this call will re-render the component. <code>loading</code> is now false and <code>currentPost</code> might be undefined or an object. That&#39;s where the <code>if (postDoesNotExist)</code> check comes in. If we didn&#39;t get a post back from the database, we return a <code>Redirect</code>, like before. Otherwise, we continue on to our final <code>return</code> where we show the post.</li>
</ol>
<p><em>I hope these steps aren&#39;t overwhelming and they help you see the power of hooks and state management! They&#39;re some of the coolest things about React, to me.</em></p>
<p>Here&#39;s how I&#39;m displaying posts:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">return (</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  <></span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    <img src={currentPost.coverImage} alt={currentPost.coverImageAlt}></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    <h1>{currentPost.title}</h1></span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    <em>{currentPost.datePretty}</em></span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">    <p dangerouslySetInnerHTML={{ __html: currentPost.content }}></p></span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">  </img></span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">);</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>I also added a <code>12px</code> margin to the top of <code>&lt;p&gt;</code> elements in <code>src/index.js</code>.</p>
<p>Now, when you click a &quot;Continue reading...&quot; link or manually navigate to one of your posts, you should see something like this:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-03%2Fpost.png?alt=media&token=4a9abd6a-9549-467f-a473-ff86ae47357a" alt="Screenshot of a single blog post&#39;s page."></p>
<p>Please <a href="mailto:hello@ashleemboyer.com">send me an email</a> or <a href="https://twitter.com/ashleemboyer">a Twitter DM</a> if you have any questions or concerns. I love hearing from you! 😊</p>


<p>Welcome! This is the first in a series of posts that will teach you how to build a blog site using React and Firebase. This one will probably be the longest because there are few things to do to set everything up.</p>
<p>At the end of this post, you&#39;ll have learned how to connect your app to Firebase and pull some data from <a href="https://firebase.google.com/docs/database">Firebase&#39;s Realtime Database</a>. Next time, we&#39;ll start setting up our CRUD functions with a &quot;Create Post&quot; feature. After that, we&#39;ll see what we can do to make an interface on the frontend that will make it easy to call our CRUD functions and easy to create more interesting functions.</p>
<p>Ready to get started? :)</p>
<h2 id="table-of-contents">Table of Contents</h2>
<ol>
<li>Sign up for Firebase</li>
<li>Create a project</li>
<li>Clone the Starter Code</li>
<li>Connect Firebase to the Application</li>
<li>Add Data to the Database</li>
<li>Read from the Database</li>
<li>Wrapping Up</li>
</ol>
<h2 id="1-sign-up-for-firebase">1. Sign up for Firebase</h2>
<p>This one is easy! Head over to <a href="https://firebase.google.com/">Firebase&#39;s website</a> and click the &quot;Get started&quot; button. The page looks like this:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-home.png?alt=media&token=44402b1f-339f-4343-817d-952bc6c3bbe4" alt="Firebase&#39;s home page with a &quot;Get started&quot; button."></p>
<p>You&#39;ll be prompted to choose a Google account if you&#39;re not already signed in to one. Once you&#39;re signed in, you can create a project. Here&#39;s what that page will look like if you&#39;re brand-new to Firebase:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Ffirebase-welcome.png?alt=media&token=8433b1fc-49ff-42a3-8bb1-21e52cb966be" alt="The Firebase console where a project can be created."></p>
<h2 id="2-create-a-project">2. Create a Project</h2>
<p>Click the &quot;Create a project&quot; button to begin the three step process. First, you&#39;ll be prompted for a project name. I&#39;m naming my project <code>react-firebase-blog</code>. You can change your project ID if you want, but going with the automatically generated one is fine too.</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-01.png?alt=media&token=c238d4b6-3580-4f3d-9a92-4651cd01662d" alt="Step 1 of the process."></p>
<p>Step 2 asks us if we want to set up Google Analytics for the project. I&#39;m selecting &quot;Not right now&quot;. If you choose this option, the process ends here. Otherwise, there&#39;s another step</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-02.png?alt=media&token=fb748ae2-44fb-4626-ada7-f2b31e73a510" alt="Step 2 of the process."></p>
<p>Click &quot;Create project&quot; and you&#39;ll be brought to a loading screen. When it says, &quot;Your new project is ready,&quot; click the &quot;Continue&quot; button.</p>
<p style="text-align:center;">
  <img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fcreate-project-ready.png?alt=media&token=3f419470-28e2-4a07-8b36-92b32f8a5b3a" />
</p>

<h2 id="3-clone-the-starter-code">3. Clone the Starter Code</h2>
<p>You can clone the starter code by running the following command in a terminal:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">git clone https://github.com/ashleemboyer/react-firebase-blog-starter.git</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>Let&#39;s see what we&#39;ve got! Go ahead and get the project rolling by changing into the <code>react-firebase-blog-starter</code> directory, running <code>npm install</code>, and finally running <code>npm run start</code>. Here&#39;s what you should see:</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fstarter-site.png?alt=media&token=a0e21d1e-a951-4871-a98f-a9c42f588697" alt=""></p>
<p>Hooray! Go ahead and explore the project a little. I&#39;ll highlight a few areas for you to begin.</p>
<ol>
<li><p><code>src/App.js</code></p>
<p>We have 4 <code>Routes</code>: the home page, a 404, and another for handling blog post slugs (aka URLs). You might be wondering why there&#39;s not one for handling non-matching paths. Good catch! We&#39;re actually handling that in the <code>Post</code> component (<code>src/pages/post.js</code>). Let&#39;s go ahead and look at that one.</p>
</li>
<li><p><code>src/pages/post.js</code></p>
<p>Because we&#39;re using a Router in <code>src/App.js</code> (comes from <code>react-router-dom</code>), the components we name in <code>Route</code> elements will have a <a href="https://reacttraining.com/react-router/web/api/match"><code>match</code></a> passed into their props. We can get the slug for a post from the URL bar with <code>match.params.slug</code>, then compare that to a list of slugs we support on the site. Those are hard-coded into a <code>postSlugs</code> variable for now. If the slug does not exist, we return a <code>Redirect</code> to our 404 page. Otherwise, we&#39;ll display the correct post.</p>
</li>
<li><p><code>src/pages/home.js</code></p>
<p>First, you&#39;ll se the <code>blogPosts</code> variable. We&#39;re hard-coding our posts until we connect our app to Firebase. All this page does is return a <code>section</code> element for every blog post in the <code>blogPosts</code> array. You shouldn&#39;t need to change anything after the <code>return</code> statement as we make our way through this series.</p>
</li>
</ol>
<h2 id="4-connect-firebase-to-the-application">4. Connect Firebase to the application</h2>
<p>First, install the <a href="https://www.npmjs.com/package/firebase"><code>firebase</code> package</a> by running <code>npm install firebase</code> in the root directory of the project.</p>
<p>Now, create a JavaScript file in the <code>src</code> directory of the project and call it <code>firebase.js</code>. This is where we&#39;ll define our Firebase configs and initialize the Firebase objects.</p>
<p>Before we add some code to this file, let&#39;s get the config data we need about our Firebase project. Go to the Firebase project settings by clicking the settings gear in the left sidebar and selecting &quot;Project settings&quot; from the menu. Scroll down to the &quot;Your apps&quot; section of the page. It&#39;s probably at the bottom. It should say, &quot;There are no apps in your project.&quot;</p>
<p style="text-align:center;">
  <img alt="Screenshot of the 'Your apps' section of the project settings." src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fproject-settings.png?alt=media&token=63cb601f-0eb7-49eb-a7c9-dbb5f6bf53ac" />
</p>

<p>Click the circle that looks like <code>&lt;/&gt;</code> in order to add Firebase to a web app. You&#39;ll be prompted for the App&#39;s nickname. I&#39;m calling mine <code>React Firebase Blog</code>.</p>
<p style="text-align:center;">
  <img alt="Screenshot of the prompt for the app's nickname." src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fapp-nickname.png?alt=media&token=513f98b4-37ef-42aa-b45f-f793e5e37c6c" />
</p>

<p>Click the &quot;Register app&quot; button, and after the page finishes loading, you&#39;ll see some HTML code that has a variable called <code>firebaseConfig</code>. Copy the JSON attributes from that variable and hold on to them for our <code>firebase.json</code> file. Click the &quot;Continue to console&quot; button to get back to your project settings. If you lose the JSON attributes you copied previously, you can find them again here, under the &quot;Your apps&quot; section that now has our app listed.</p>
<p>Let&#39;s go back to our <code>firebase.js</code>. Have your config data ready and plug it in to the following code:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">import firebase from "firebase/app";</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">import database from "firebase/database";</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">const config = {</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">  apiKey: "<YOUR-API-KEY>",</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  authDomain: "<YOUR-AUTH-DOMAIN>",</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">  databaseURL: "<YOUR-DATABASE-URL>",</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">  projectId: "<YOUR-PROJECT-ID>",</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">  storageBucket: "<YOUR-STORAGE-BUCKET>",</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">  appId: "<YOUR-APP-ID>",</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">};</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code">let firebaseCache;</span>||</div>||<div>||<span class="line-number">15</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">16</span>||<span class="line-of-code">export const getFirebase = () => {</span>||</div>||<div>||<span class="line-number">17</span>||<span class="line-of-code">  if (firebaseCache) {</span>||</div>||<div>||<span class="line-number">18</span>||<span class="line-of-code">    return firebaseCache;</span>||</div>||<div>||<span class="line-number">19</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">20</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">21</span>||<span class="line-of-code">  firebase.initializeApp(config);</span>||</div>||<div>||<span class="line-number">22</span>||<span class="line-of-code">  firebaseCache = firebase;</span>||</div>||<div>||<span class="line-number">23</span>||<span class="line-of-code">  return firebase;</span>||</div>||<div>||<span class="line-number">24</span>||<span class="line-of-code">};</span>||</div>||<div>||<span class="line-number">25</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>The <code>getFirebase()</code> function will ensure we only call <code>initializeApp</code> one time.</p>
<h2 id="5-add-data-to-the-database">5. Add Data to the Database</h2>
<p>We can&#39;t read any data from our database until we actually add to it! Go back to your Firebase project and click the &quot;Database&quot; option under the &quot;Develop&quot; heading in the sidebar. You&#39;ll have to scroll down the page a little until you find the &quot;Realtime Database&quot; section.</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Frealtime-database.png?alt=media&token=2bc78aa3-e902-46fd-a775-95042cd5cc0e" alt="Screenshot of the Realtime Database section."></p>
<p>Click the &quot;Create database&quot; button within this section. You&#39;ll see a modal come up asking you about the security rules for your database.</p>
<p style="text-align:center;">
  <img alt="The 'security rules' modal." src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fsecurity-rules.png?alt=media&token=fbd9e6fc-63ac-41d3-b8c9-779a9224c598" />
</p>

<p>Select &quot;Start in <strong>test mode</strong>&quot; and click the &quot;Enable&quot; button. Your database will be empty and read something like:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code"><YOUR-PROJECT-ID>: null</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>If you didn&#39;t already know, the Realtime Database is just a JSON object. You can read more about that <a href="https://firebase.google.com/docs/database">here</a>.</p>
<p>The quickest way to get started is to import data using a JSON file. I&#39;m also providing this for you in case you&#39;re following along closely and want to have the same things show as what I have here. You can find this file in the root directory of the starter project. Click the three dots menu and select &quot;Import JSON&quot; to get to the file upload. Browse for your file, and then click the &quot;Import&quot; button.</p>
<p>Now you should have some data attributes you can expand and explore!</p>
<p style="text-align:center;">
  <img alt="The data imported into the Realtime Database." src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Freact-firebase-blog%2Fpart-01%2Fdata.png?alt=media&token=70461f67-df46-41b4-b15a-c53fc343d3b4" />
</p>

<h2 id="6-read-from-the-database">6. Read from the Database</h2>
<p>Finally! The moment we&#39;ve all been waiting for. Let&#39;s head over to <code>src/home.js</code> and see if we can get some stuff from the database!</p>
<p>First, add some imports to the top of the file:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">// You only need to add the `{ useState }` portion here.</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">import React, { useState } from "react";</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">// This is new.</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">import { getFirebase } from "../firebase";</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>Now, let&#39;s get <code>blogPosts</code> into a state and try to read them from the database. You can read more about the <code>useState</code> hook over <a href="https://reactjs.org/docs/hooks-state.html">here</a>. We&#39;re also going to add a <code>loading</code> state so we can easily do two things:</p>
<ol>
<li>Make sure we only call <code>getFirebase</code> once</li>
<li>Show the user a loading screen while we wait for data</li>
</ol>
<p>Replace the <code>blogPosts</code> constant with the following code:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">const [loading, setLoading] = useState(true);</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">const [blogPosts, setBlogPosts] = useState([]);</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">if (loading && !blogPosts.length) {</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">  getFirebase()</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">    .database()</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    .ref("/posts")</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">    .orderByChild("dateFormatted")</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    .once("value")</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">    .then(snapshot => {</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">      let posts = [];</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">      const snapshotVal = snapshot.val();</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code">      for (let slug in snapshotVal) {</span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code">        posts.push(snapshotVal[slug]);</span>||</div>||<div>||<span class="line-number">15</span>||<span class="line-of-code">      }</span>||</div>||<div>||<span class="line-number">16</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">17</span>||<span class="line-of-code">      const newestFirst = posts.reverse();</span>||</div>||<div>||<span class="line-number">18</span>||<span class="line-of-code">      setBlogPosts(newestFirst);</span>||</div>||<div>||<span class="line-number">19</span>||<span class="line-of-code">      setLoading(false);</span>||</div>||<div>||<span class="line-number">20</span>||<span class="line-of-code">    });</span>||</div>||<div>||<span class="line-number">21</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">22</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">23</span>||<span class="line-of-code">if (loading) {</span>||</div>||<div>||<span class="line-number">24</span>||<span class="line-of-code">  return <h1>Loading...</h1>;</span>||</div>||<div>||<span class="line-number">25</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">26</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>Tada! You should see the exact same thing we had before. 🎉</p>
<h2 id="7-wrapping-up">7. Wrapping Up</h2>
<p>There was a ton of stuff here. If you have any questions or concerned, please <a href="mailto:hello@ashleemboyer.com">send me an email</a> or <a href="https://twitter.com/ashleemboyer">DM me on Twitter</a>! I&#39;ll try to give you a hand if you&#39;re feeling stuck or overwhelmed. Stay tuned for tomorrow&#39;s post where we will cover writing CRUD functions for our new, fancy blog site! If you&#39;re feeling squirrely and want to give it a go before then, I encourage you to check out the <a href="https://firebase.google.com/docs/database/web/start">Firebase documentation</a>.</p>


<p>Hey, friends! It&#39;s been a while, but I&#39;m back with something fun. Yesterday, I tweeted out about an image I analyzed and then re-created with my name. It&#39;s garnered quite a bit of attention so I figured I&#39;d tell everyone how I did it! It involves the HTML <code>canvas</code> element and a little bit of looping over data from that to get information about the colors within the image. Let&#39;s get started!</p>
<p><em>Quick note: There will be a CodeSandbox at the end of every step so you can follow along and check your work as you go.</em></p>
<h2 id="table-of-contents">Table of Contents</h2>
<ol>
<li>Set up Your HTML &amp; JS</li>
<li>Draw Your Image on the <code>canvas</code></li>
<li>Get the <code>ImageData</code></li>
<li>Iterate to Get Pixel Colors</li>
<li>Append Some Containers</li>
<li>Resources</li>
</ol>


<p>I started college in the fall of 2013 as a Chemical Engineering major at a small private engineering school in Indiana. That first quarter ended very poorly for me and had me questioning whether or not I could make it at the school. From what I could see, everyone else was so smart and doing so well! (In reality, I think a ton of us were struggling silently and alone.)</p>
<p>The next two quarters went much better. I loved my chemistry courses and had to work really hard in my math and physics ones. That spring term, I had an Excel programming course. That was my first time ever writing code and I loved it! It was probably the first time outside of the chemistry classes that I really felt like I knew what I was doing. So, I decided to take the introductory programming course the next fall.</p>
<p>They taught us how to program in Python. (I highly recommend Python for learning to code!) It was amazing to me. Having power over my computer and telling it exactly what I wanted to do gave me such a feeling of accomplishment. For the term project, we had to program an iRobot. I learned how to program a <em>robot</em>! What a rush. I felt so smart until...</p>
<p>I got my final grades for all the other courses I was taking. I did terrible in my Chemical Engineering courses. I could handle chemistry and physics individually, but I couldn&#39;t seem to put the two together. I did decent in organic chemistry, but I really didn&#39;t love chemistry anymore. I had a decision to make.</p>
<ol>
<li>Take the classes over either in the summer or fall, depending on when they&#39;d be offered</li>
<li>Switch to a different major</li>
<li>Drop out of the school altogether</li>
</ol>
<p>The third wasn&#39;t really an option for me. I&#39;d moved out of my parents&#39; at this point and was completely independent. There&#39;s no way I&#39;d be able to pay off what loans I already had if I didn&#39;t get that degree. The first option was terrifying: there was no guarantee I&#39;d pass the second time around. The material just didn&#39;t make sense to me. With how well I did in the introductory programming course, and how much I enjoyed writing code, I went with the second option.</p>
<p>The journey from then until I got out of college felt like actual hell, but it wasn&#39;t because of the courses. I enjoyed almost every single Software Engineering course I took. I even took some of them twice. 😉 Being on my own was really hard, and there were a lot of things that got in the way of my education.</p>
<p>When I look back, I wish I had known about all of my options and not felt so pressured to hurry up and graduate college. I&#39;m not sure I&#39;d recommend the college route to everyone. Especially in the last several months, I don&#39;t see why someone who&#39;s self-taught can&#39;t be as successful as someone with a heckin&#39; expensive piece of paper. It&#39;s all about hard work, which you can&#39;t see at surface level. The same thing is true about GPA, something that might as well have not existed for me.</p>
<p>Hearing everyone&#39;s stories over the past few days has really opened my eyes. There&#39;s a ton of talent in this industry coming from all backgrounds. Let&#39;s continue to build an inclusive culture in tech! So much possibility awaits.</p>


<p>Next time you walk around some city streets, take a look around.</p>
<p>What&#39;s the sidewalk like? If it&#39;s made out of bricks, does it look very smooth or are probably half of them loose and uneven? When you come to an intersection, does the ramp to the crosswalk smoothly meet the street? And how about the street between sidewalks? Are there potholes or is the road nicely paved?</p>
<p>If there are stores and restaurants, are they at the ground level or is there a step or two or more to get inside? Are there buttons to activate the doors? When you&#39;re in the seating area, are there any booths or extra sets of tables that have steps to get to? If the restaurant has a patio, how much space is there outside of the railings surrounding that area? Is it large enough for a wheelchair going in one direction and a person walking in the other?</p>
<p>These are some of the thoughts that have gone through my head over the past few days. It&#39;s actually pretty appalling, the quality of some of our sidewalks and crosswalks. These are just the visible issues most people could see if they&#39;d just stop and look.</p>
<p>Can you imagine what accessibility issues exist that aren&#39;t as visible?</p>


<h1 id="the-am">The AM</h1>
<p>The CEO took some time to talk about the company&#39;s vision this morning, but not before we had a tornado drill! 😉 It was an interesting event. Thankfully, we’re only on the fourth floor and didn’t have too far to walk to make it to the basement (which happens to be a cigar bar, by the way 😂).</p>
<p>The building we’re in is pretty old (finished in 1923), so when I had to walk on the steepest and narrowest steps of my life, I couldn’t help but wonder if people hadn’t micro feet back when the building was built. A fun fact I learned about the building today: when it was built, there was a 150-foot height limit on buildings so they wouldn’t shadow the Soldiers’ and Sailors’ Monument. I’ve lived here my whole life and never knew that!</p>
<h1 id="the-pm">The PM</h1>
<p>I tried another new restaurant for lunch: Pearl Street Pizzeria and Pub. A major perk of working downtown is having teammates that know of DELICIOUS places to eat. A less than perky thing about working downtown is that there are too many tempting restaurants and my wallet is very stubborn. I should probably start bringing my lunch now that I’m settling in. 😁</p>
<p>At the end of (my) work day, my hiring class was taken to Pearings Cafe and Frozen Yogurt to celebrate having nearly finished our first week on the job! Let’s just take some time to note that their Buckeye flavored frozen yogurt is amazing. 😍 The place also has great coffee and tea, so I’ll be heading back ASAP for all the yummy treats.</p>
<h1 id="the-post-pm">The post-PM</h1>
<p>I went to Powderkeg’s Pitch Night as a volunteer for Women Who Code Indianapolis, a group I’m working to get more deeply involved with in the next several weeks. I found out while at frozen yogurt that someone from my company was no longer able to attend the event, and that we needed someone to walk up after the company name was announced for being one of fifty finalists for the 2019 Indiana Breakout Tech Cultures Awards!</p>
<p>So on my fourth day I was able to have my picture taken with folx from 49 other awesome companies. The networking at this event was great as well. It quickly became clear to me what this event was about and why a lot of the exhibitors were in attendance. Everyone was there to be a part of building a supportive community. That’s a movement I can 100% support, and I’m jumping in head first.</p>


<h1 id="the-morning">The morning</h1>
<p>I can&#39;t help but find myself fascinated by everything here. While I&#39;m doing my 10-minute walk from my car to the office, I wonder about the stories other people on the street might have to tell. Where do they work? Do they have kids? How long have they been doing this? People watching is quickly becoming such a fun thing to do when I&#39;m out and about the city streets.</p>
<h1 id="the-afternoon">The afternoon</h1>
<p>We were still having some issues with my set up in the system, so we decided it was time to take a lunch. 😅 I tried another new place: Potbelly Sandwich Shop!</p>
<p>It 👏🏻 was 👏🏻 amazing 👏🏻</p>
<p>I also met the CEO! He walked up to me right after I had picked up my lunch sandwich, so we fist-bumped instead of shaking hands. 🤣 After lunch, I was expecting to go into a meeting, but it was rescheduled so the team and I continued to look at my setup so I could get coding. We figured it out, and the team lead walked me through my first ticket! I learned about so many things, and am taking note of them to eventually do some further reading:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructing</a></li>
<li><a href="https://reactjs.org/docs/typechecking-with-proptypes.html">PropTypes</a></li>
<li>Mobx injectors</li>
<li><code>const</code> vs <code>let</code></li>
</ul>
<h1 id="the-evening">The evening</h1>
<p>Tonight I went to the first event of an author series at The Vogue Nightclub in Broad Ripple. Max Yoder, CEO of Lessonly, talked about his book, <em>Do Better Work</em>, answered a few questions, and played a few of his songs for us. It was a really great time!</p>
<p>{% tweet 1141329976727408641 %}</p>
<p>I paid extra for a guaranteed floor seat and that ticket also came with the book. It&#39;s going to be a good one, especially after hearing Max give an overview of each chapter. What he had to say and how he said it as a CEO was incredibly refreshing. You can 100% tell how passionate he is about making the world a better place.</p>
<p>I also feel so validated. It’s overwhelming. And while I’m still not sure about the most productive way to talk about the past year, I know I <em>have</em> to and that it’s part of my story I want to share. I want people to know that they don’t have to roll over and take bad treatment from people in leadership positions just because they sign your paychecks.</p>
<p>You can get out of bad situations (and you <em>should</em>). You are not trapped forever. Ask someone you trust for help. Put yourself out there. You <em>will</em> get out. You <em>will</em> find where you&#39;re celebrated, not just tolerated.</p>


<p>Day 2 was pretty quiet and smooth, but still exciting. I had two on-boarding meetings and will have one or two per day through next week. These are chances to learn more about the start of the company, how things work, and the company&#39;s values. It&#39;s also a great chance to meet people from different teams, which is pretty cool! Everyone is incredibly friendly.</p>
<p>I tried another new (to me) food place! It&#39;s a cross between Qdoba and Chipotle. I&#39;m really enjoying all the walking involved with working in the middle of a big city. Speaking of which: I purchased a monthly parking pass! The walk is twice as long as the one from today and yesterday, but that&#39;s what I was shooting for. With my bad back, walking is one of the only ways for me to start working out again. 😊</p>
<p>I&#39;d say the only negative thing about the day was traffic on the way home. I&#39;ve heard that while traffic in this state isn&#39;t nearly as bad as cities with higher populations, the people are excessively rude and full of road rage. I already knew it&#39;d be like this, but it&#39;s still gross. I wish more people would just be kind and realize that everyone on the road has a story.</p>
<p>Stay tuned for day 3! I&#39;ll get to start looking at the code more closely, so things should get extra interesting. 😀</p>


<p>My new job is downtown Indianapolis. Today was my first day for a whole list of things!</p>
<ul style="list-style: none;margin-left: 0;">
  <li><span style="margin-right: 12px">🚗</span>Parked in a parking garage all day</li>
  <li><span style="margin-right: 12px">🚶🏼‍♀️</span>Walked 5 minutes to work</li>
  <li><span style="margin-right: 12px">🍳</span>Had breakfast by myself downtown</li>
  <li><span style="margin-right: 12px">🛍</span>Shopped in two stores by myself downtown</li>
  <li><span style="margin-right: 12px">🍕</span>Had lunch at Giordano’s</li>
  <li><span style="margin-right: 12px">💻</span>Thoroughly used a MacBook Pro</li>
</ul>

<p>I’m sure there’ll be lots of firsts in the coming months. I finally feel like I’m in an environment and community where I can grow. Everyone was so friendly and welcoming. They care about your wellbeing. You’re encouraged to learn and educate yourself all the time.</p>
<p>Supporting your team matters. It makes an entire world of difference.</p>


<p>Did you know you can add captions to <code>&lt;video&gt;</code> elements with a little HTML and a VTT file? I didn&#39;t know until today! It&#39;s really easy to do (so long as you format your VTT file correctly... shout out to <a href="https://twitter.com/CallMeWuz">Conlin Durbin</a> for helping me find that error 😄). At a minimum, you need 3 files:</p>
<ol>
<li>Video, probably <code>.mp4</code></li>
<li>WebVTT, where the captions are</li>
<li>HTML</li>
</ol>
<h2 id="lets-get-started">Let&#39;s get started</h2>
<h3 id="the-html">The HTML</h3>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/rpz0edrfb6otzqfuxlnz.png" alt=""></p>
<p>This is the easiest step. You only need 3 elements. On the <code>&lt;video&gt;</code> element, make you sure you include the <a href="https://www.w3schools.com/tags/att_video_controls.asp"><code>controls</code></a> attribute. This will allow users to toggle captions or switch to a different langue, if applicable.</p>
<p>The <code>&lt;source&gt;</code> element should be your video. Specify its <code>src</code> and <code>type</code> attributes. The <code>&lt;track&gt;</code> element is for the <code>.vtt</code> file you&#39;ll create in the next step. There are multiple attributes to include here.</p>
<ul>
<li><code>kind</code> defaults to &quot;subtitles&quot;, but if you specify it you must also include the <code>srclang</code> attribute.</li>
<li><code>label</code> is the title of the track and will be displayed in the video controls menu where captions can be toggled.</li>
<li><code>default</code> is included to set a track as enabled.</li>
</ul>
<h3 id="webvtt">WebVTT</h3>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/1fzurld4xwpnzy3x5nsw.png" alt=""></p>
<p>The format for this file is very specific. You must include &quot;WEBVTT&quot; at the top of the file, and then there are sections with white space in between which are called &quot;cues&quot;. In the example file I&#39;ve attached above, the first line of each cue is called the identifier. The next line specifies the timing for the cue. Finally, we have the cue payload. This is where you include the content for each caption. You can do <em>some</em> styling here.</p>
<h3 id="the-final-product">The final product</h3>
<p>The cover image has a quick preview of the captions I added to a video of a puppy playing on a sandy beach. Here&#39;s a GIF of the whole thing. You can also see my little project live <a href="https://ashleemboyer.github.io/video-captions/">here</a>.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/0c29s1oopy8xoutfow4b.gif" alt=""></p>
<h3 id="more-resources">More resources</h3>
<p>I wasn&#39;t able to find a ton of examples out there, but there are plenty of resources that get into the differences between subtitles and captions, styling abilities, and additional ways to accomplish the same thing as above but with different transcript formats or third-party libraries.</p>
<ul>
<li><a href="https://a11yproject.com/posts/using-caption-services-with-html5-video/">&quot;How-to: Using captions with HTML&#39;s video element&quot;</a> (The A11Y Project)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">&quot;Web Video Text Tracks Format (WebVTT)&quot;</a> (MDN)</li>
<li><a href="https://www.w3schools.com/tags/tag_track.asp">&quot;HTML <code>&lt;track&gt;</code> Tag&quot;</a> (w3schools)</li>
</ul>
<p>If you have experience with captions that you&#39;d like to share, or know of even more helpful resources, please do so in the comments! 😊</p>


<p><a href="https://twitter.com/fionalikes">Fiona Thomas</a>, author of <a href="https://www.amazon.com/Depression-Digital-Age-Highs-Perfectionism/dp/1912478501"><em>Depression in a Digital Age</em></a>, has a free ebook called <a href="https://fionalikestoblog.com/2017/09/19/getstuffdone/?fbclid=IwAR3l2_kzCXyUB6SbGbPU9f6p8ga4HOfkB9-ad4eyb0MfgiIAqo3mUhs54jA"><em>How to Get Stuff Done with Depression</em></a>. In it, I found advice that helped me in my worst times. A little over a year ago, I was still on campus at Rose and was so depressed and anxious I could hardly function. It&#39;s an evil cycle: I felt bad about being unable to be a good student, employee at my part-time job, dog mom to the lovely Trooper, or partner to Zach; then I felt worse because I couldn&#39;t perform pretty simple tasks around our place such as loading the dishwasher.</p>
<p>At some point, I Googled for any online resource or support group I could find. I was desperate to pick myself back up again. That&#39;s where I found Fiona&#39;s free ebook. There are several good pieces of information in there, but what I&#39;ve found that helps me the most is this:</p>
<blockquote>
<p>All you have to do to get stuff done is be productive for ten minutes. Out of your entire day, all you need to do is make a promise to do a little work for ten minutes.</p>
</blockquote>
<p>It sounds a bit silly at first, but what just 10 minutes of productivity can do is start to build momentum for the rest of your day. It&#39;s the same concept as what <a href="https://news.utexas.edu/2014/05/16/mcraven-urges-graduates-to-find-courage-to-change-the-world/">Naval Adm. William H. McRaven</a> explains about why you should make your bed every day:</p>
<blockquote>
<p>If you make your bed every morning you will have accomplished the first task of the day. It will give you a small sense of pride, and it will encourage you to do another task and another and another. By the end of the day, that one task completed will have turned into many tasks completed.</p>
</blockquote>
<p>What I&#39;ve also learned is that we must be OK with just one 10-minute task. We need to be always gentle with ourselves because this tactic (probably all others, too) is not a fail-safe or it alone will not solve everything. Definitely consult a professional for help when you&#39;re so deep in anxiety and/or depression that you&#39;re unable to function. But this is one thing that continues to help me personally, even as I&#39;m mostly doing better than I was 1 year ago.</p>


<p>Last week, I was feeling <a href="https://youtu.be/5AhRqg0ADbk">fired up and ready to go</a>. I wrote a whole post about some exciting things and plans.</p>
<p>But here&#39;s the thing: I&#39;ve thought some more about my plans for writing, and I&#39;m changing my mind. Let me get into the &quot;why&quot;. The plans I made were way too strict for me. This is probably because of the spontaneous nature of <a href="https://dev.to/ashleemboyer/after-30-days-of-writing-on-dev-to-a08">my recent 30-day blogging challenge</a>, but I think it also has to do with deadlines.</p>
<p>For more than 80% of my life, I&#39;ve dealt with a whole lot of deadlines. That&#39;s two decades! Don&#39;t get me wrong, I don&#39;t think deadlines aren&#39;t something we can totally get away from. I do think we can dramatically reduce the number of deadlines we encounter, however.</p>
<p>So, that&#39;s what I&#39;m doing. Here&#39;s my new plan:</p>
<blockquote>
<p>I&#39;ll be blogging 4 days a week: Monday through Thursday.</p>
</blockquote>
<p>How&#39;s that different from what I originally planned? Well, I wanted to write a bit more about the things I&#39;m learning in my Software Architecture course, but:</p>
<ol>
<li>Making half of my posts about it is way too much</li>
<li>I would love to &quot;teach&quot; technical material, but Software Architecture isn&#39;t where my passion lies</li>
</ol>
<p>Today&#39;s post was &quot;supposed&quot; to be about Software Architecture, as a matter of fact, but writing it to my standards was far more stressful than it needed to be. I&#39;d rather save that energy for something I plan to immerse myself in by choice, not because I have to.</p>
<p>Here&#39;s the moral of the story: you can change your mind whenever you want to. I was a little nervous about changing my mind on this because I really was excited to write about Software Architecture. Some people showed interest in it, and I also don&#39;t want to appear like I&#39;m not holding my word or something.</p>
<p>But then I remembered: I <em>started</em> blogging for <em>me</em>. People finding value in what I write is an added benefit! Of course, I still want people to enjoy reading what I write, but I also need to enjoy what I&#39;m writing or I&#39;ll burn right out.</p>
<p>You are your primary stakeholder. Keep doing the things you enjoy, and if you&#39;re not enjoying what you&#39;re doing, give it your very best shot to turn that around.</p>


<p><em>Disclaimer: This post isn&#39;t for bragging. I&#39;ve had people ask me whether or not Twitter is worth it.</em></p>
<p>I joined Twitter less than 60 days ago. As of this writing, I have 358 followers, am following 460 other awesome people, and have written almost 1300 tweets. My tweets have also earned over 600k impressions. (I&#39;m especially proud that my top two tweets hold roughly 20% of those impressions and they both have to do with web accessibility. 😊)</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/05kj0j110n03m6raxnhn.png" alt="Screenshot of my current Twitter profile stats"></p>
<p>Joining Twitter is also the biggest action I took in April that lead me to my new job I&#39;m about to start.</p>
<h1 id="why-should-i-even-bother">Why should I even bother?</h1>
<p>There are a lot of inspiring people doing big things on Twitter. For me, it has been so empowering to see successful women in tech. Here are a couple of lists if you&#39;re looking for more people to follow.</p>
<ol>
<li><a href="https://twitter.com/ladyleet/lists/fempire">fempire</a>, by <a href="https://twitter.com/ladyleet">Tracy Lee</a></li>
<li><a href="https://twitter.com/dev_avocado/lists/dev-to">dev.to</a>, by <a href="https://twitter.com/dev_avocado">Developer Avocado</a></li>
<li><a href="https://twitter.com/TheCodePixi/lists/tech-ladies-master-list">Tech Ladies Master List</a>, by <a href="https://twitter.com/TheCodePixi">Emily A. Pixi</a></li>
</ol>
<p>Twitter is also a great place to learn about what technology or frameworks are being used by people outside of your bubble. It&#39;s easy for us to get tunnel vision about the stacks we use, so seeing what others are learning <em>and</em> what they have to say about it is very enlightening. These are some great hashtags to pay attention to if you &#39;re not sure where to start.</p>
<ol>
<li><a href="https://twitter.com/hashtag/CodeNewbie?src=hash">#CodeNewbie</a></li>
<li><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash">#100DaysOfCode</a></li>
<li><a href="https://twitter.com/hashtag/freeCodeCamp?src=hash">#freeCodeCamp</a></li>
</ol>
<p>Finally, Twitter is great for job networking and/or meeting people in your area. As I said up top, Twitter is <strong>the</strong> reason I got my foot in the door at the company I&#39;m about to start working for. About 1 month after creating my profile, I decided to message another woman in tech about any ideas she had on people hiring front end developers focused on accessibility. She introduced me to a developer in my city, and then he introduced me to my future boss. Seriously, social media is like magic. Not only did I end up finding a job from this exchange, but also found some really great friends who are supportive and full of wisdom.</p>
<h1 id="ok-so-how-do-i-get-started">Ok, so how do I get started?</h1>
<p>My biggest is advice is this: just put yourself out there. Be unapologetically authentic. If people like you, great. If not, it&#39;s just the internet. You&#39;re (hopefully) not there just to impress strangers. If you&#39;re not hurting anyone, keep moving forward and being yourself.</p>
<p>My second piece of advice: go out of your comfort zone. Interact with &quot;famous&quot; people. Ask questions. Answer questions! We&#39;re all learning here. If people make you feel bad about yourself because you&#39;re new to the field or trying something new, that&#39;s not on you. There are plenty of supportive folx who will have your back and don&#39;t mind <em>whatsoever</em> where you&#39;re at in your career or skillset.</p>
<p>My final piece of advice: learn out loud. It may seem like no one is listening at first, but that&#39;s what handy hashtags are for! People <em>do</em> follow those. If you created a static site with Gatsby, @ them. They&#39;ll probably retweet it! This is just one good way to get some exposure and even feedback on what you&#39;re working on.</p>


<p>I made some shouty tweets on Sunday. <a href="https://twitter.com/ashleemboyer/status/1135403356506198017">Here&#39;s the first one</a>, and the one I want to focus on for this conversation.</p>
<p>You can go read the other tweets and think whatever you want about them as a whole, but I&#39;m here to elaborate a bit on what I was (and still am) feeling.</p>
<p>Side note: if you have any inclination to make excuses for the boss in the tweet or anything of the like, please hop out now. This is not a debate. How I feel about being minimized as a disabled person is not up for discussion.</p>
<p>Another side note: this topic goes beyond people who sign the paychecks. Everyone should know about the identities of their co-workers, but those people way up in the hierarchy should <em>especially</em> know the people they expect to do a good job.</p>
<p>So, why should we get to know the people we pay?</p>
<h1 id="you-can-lead-them-better">You can lead them better</h1>
<p>Knowing how people tick makes it easier for you to lead them. You&#39;ll know what they can and can&#39;t handle, when they can handle it, and how to get them where they need to be to actually handle it. Leadership isn&#39;t just about telling people what to do.</p>
<h1 id="youll-have-a-chance-to-understand-their-perspective">You&#39;ll have a chance to understand their perspective</h1>
<p>It&#39;s not really possible to know *exactly what someone else is going through unless you&#39;ve actually been through it yourself. Even still, every single person is different and copes with life in their own ways. Your best chance at knowing what someone else is going through; however, is by listening and remembering what people tell you.</p>
<h1 id="you-wont-make-them-feel-isolated">You won&#39;t make them feel isolated</h1>
<p>Going back to my above-mentioned situation specifically, it&#39;s hard to describe how it felt to learn that my boss didn&#39;t know for 10 months that I have hearing aids. I am a disabled woman. It&#39;s the biggest piece of my identity because it affects my quality of life in every possible way. It&#39;s not a difficult fact to learn. I talk about it daily.</p>
<p>I keep trying to write the next sentence and they keep coming out wrong. It&#39;s a really strange feeling to know I was sitting for months on end putting in so much effort, and the simplest effort wasn&#39;t being put back into me. It feels lonely and isolating.</p>
<p>Bottom line, just do the right thing. Don&#39;t let your employees feel like that. All it takes is a few conversations and a little bit of effort towards remembering facts about people. Make the people you pay feel important.</p>


<p>Thank you to everyone who replied to <a href="https://twitter.com/ashleemboyer/status/1133927062039867392">my tweet about coding challenges</a>! It&#39;s an excellent list of sites people like to use.</p>
<p>I did a quick look over all of these sites and am providing my immediate impressions from them. It&#39;s very possible they might be missing something. :) If a correction needs to be made, or if there&#39;s another really awesome thing about any of these sites that I missed, just drop a comment and I can update this post.</p>
<h2 id="1-codewars">1. <a href="https://www.codewars.com/">codewars</a></h2>
<ul>
<li>20+ languages available</li>
<li>Others&#39; solutions are available for review</li>
<li>You can practice writing your own tests</li>
</ul>
<h2 id="2-hackerrank">2. <a href="https://www.hackerrank.com">HackerRank</a></h2>
<ul>
<li>20+ languages available</li>
<li>Many skills categories and challenges to explore</li>
<li>Job board seems like an added benefit :)</li>
</ul>
<h2 id="3-exercism">3. <a href="https://exercism.io/">exercism</a></h2>
<ul>
<li>50+ languages available</li>
<li><a href="https://exercism.io/mentored-mode-vs-independent-mode">&quot;Mentored mode&quot;</a>&mdash;the linked page has a ton of information about the structure of this</li>
<li>There&#39;s a lot of steps for each challenge, with downloading the code and then having to resubmit it. I have a preference for interactive challenge sites.</li>
</ul>
<h2 id="4-codingame">4. <a href="https://www.codingame.com/start">CodinGame</a></h2>
<ul>
<li>Several languages available (I didn&#39;t count, they were in a select)</li>
<li>Multiple types of challenges of varying skill levels</li>
<li>A bit overwhelming to me, there&#39;s a lot happening on each screen</li>
</ul>
<h2 id="5-projecteuler">5. <a href="https://projecteuler.net/archives">ProjectEuler</a></h2>
<ul>
<li>Not an interactive coding website, BUT</li>
<li>A lot of <em>great</em> challenges for writing software solutions to</li>
</ul>


<p>I came across some issues on touch screens where I have a navigation menu expanded and the common &quot;shadow&quot; showing on the non-menu portion of the screen. When I tried tapping on the &quot;shadow&quot; to close the menu, way too many things were happening! Here&#39;s a quick illustration of what sort of screen I&#39;m talking about:</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/ql9hc8t6rgeghdx1ikgw.png" alt="Mobile screenshot of a menu and its shadow"></p>
<p>When a user taps on the &quot;shadow&quot; portion of the screen, they expect the menu to close. Nothing else should happen. You can handle this by adding a <code>touchstart</code> event listener to the element used for the shadow, but there are a couple of things to watch out for. It won&#39;t behave the same as a <code>click</code> event listener you use for the desktop version of your app.</p>
<p>It&#39;s all about when events are fired. A <code>click</code> event doesn&#39;t go until after a click is over and a mouse button is released. So, when a user clicks on the &quot;shadow&quot; with their mouse, there aren&#39;t any side effects. It&#39;s a different story for touchscreens, however.</p>
<p>If the items &quot;behind&quot; the &quot;shadow&quot; are clickable, a user touching the &quot;shadow&quot; to close the menu will also cause fire off the click events on those items. It&#39;s a pretty simple fix. In your <code>touchstart</code> listener, all you have to do is call <code>preventDefault</code> on the event passed into the listener. It might go something like this:</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/llil1vy7msaoswf3dbtf.png" alt="Screenshot of touchstart event listener code showing call to preventDefault and some example lines of code for hiding the shadow and menu"></p>
<p>It&#39;s really that easy&mdash;a one-line fix. It wasn&#39;t super obvious to me at first, so I hope this helps clear things up for anyone else in the same boat as me. Have you ever run into similar issues? If so, enlighten us in the comments and save us some pain! :)</p>


<p><em>Life is really hard sometimes. We&#39;re all going through something. You&#39;re not alone.</em></p>
<p>What you&#39;re doing is hard work. It&#39;s taking up a lot of your energy. You don&#39;t feel valued for all of your efforts. It&#39;s not fair, I know. But if you&#39;re reading this and strongly relate, chances are you can&#39;t stop just yet. It&#39;s just not the right time.</p>
<p>So, what now? You have to keep moving. Give it everything you&#39;ve got. It&#39;s OK if that&#39;s not much. Do whatever it takes. We all have our days and need a moment. Some people need more moments than others.</p>
<p>If you&#39;re not connecting with this article in your life right now, make sure you let other people take their moments. We have no idea what other people are going through in their personal lives. Some people have it really bad. Don&#39;t anyone&#39;s life harder than it has to be.</p>


<p>This past month of publishing one post per day far exceeded my expectations. I was inspired to do this challenge by the co-hosts of the <a href="https://discoverpraxis.com/office-hours/">Office Hours Podcast</a>, <a href="https://twitter.com/TK_Coleman">T.K. Coleman</a> and <a href="https://twitter.com/isaacmorehouse">Isaac Morehouse</a>. They talk about the challenge a lot, so I decided to just dive in. Here are my results.</p>
<h1 id="my-top-three-posts-by-views">My top three posts by views</h1>
<p>Reactions are a bit weird on this site and I don&#39;t really think they consistently express the success of a post. For the following three posts, these are the view counts at the time of this writing: 4595, 2331, &amp; 1623.</p>
<p>{% link ashleemboyer/the-perfect-first-project-for-exploring-any-js-framework-48ip %}
{% link ashleemboyer/yes-you-should-have-hobbies-outside-of-code-4ao9 %}
{% link ashleemboyer/things-you-shouldn-t-say-to-a-disabled-person-about-why-your-app-isn-t-accessible-eg5 %}</p>
<h1 id="my-total-reaction-and-view-counts">My total reaction and view counts</h1>
<p>My view count is beyond what I could have guessed it would be. There are a few things I think helped a lot with this:</p>
<ul>
<li>The DEV Community admins are really supportive on Twitter</li>
<li>A lot of devs read and share posts from this site on Twitter</li>
<li>I posted every single day (except once, I was sick)&mdash;that&#39;s a lot</li>
</ul>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/cbj6kz6a0wh71g6bjh9l.png" alt="Screenshot of the counts from the dashboard page"></p>
<h1 id="my-follower-counts">My follower counts</h1>
<p>Publishing here and sharing my posts on Twitter really spiked my follower counts for both sites. I have 2061 on DEV and 238 on Twitter. I can&#39;t remember exactly how many followers I had on Twitter when my challenge started, but it wasn&#39;t too many. I started the account sometime in mid-April.</p>
<h1 id="the-unexpected-side-effects">The unexpected side effects</h1>
<p>I joined Twitter mainly for networking. I felt like I was missing out on knowing devs in my area, and Twitter seemed like an easy way to see what events were happening as well. Turns out, a lot of really cool and inspiring devs are over there. I think one of the coolest things I&#39;ve seen on Twitter is the #100daysofcode hashtag. I&#39;m so proud of the tech community and the educational environment over there.</p>
<p>Twitter for networking was a great idea. Interacting in various discussion threads, reading wisdom from experienced devs, and e-meeting all kinds of cool people has literally changed my life.</p>
<ul>
<li>I discovered my love for web accessibility advocacy</li>
<li>This summer, I&#39;m attending my first conference in years</li>
<li>I released textua11y, my first React app</li>
<li>I&#39;ve found a ton of meetup opportunities in my area</li>
</ul>
<p>Overall, this blogging challenge has been one of the best decisions I&#39;ve ever made. If you&#39;re an aspiring writer, my best advice is to just do the damn thing. I don&#39;t know if I&#39;ll be posting on the DEV site every single day, but I plan to continue posting daily on my personal blog site to get out of the tech headspace sometimes.</p>
<p>Finally, thanks for being here. You&#39;ve helped make this a helluva ride. Hope you&#39;ll stick around for more! I have massive dreams. 😊</p>


<p>Yesterday, I made a post about ideas and going after them. Every idea is a learning experience. There are no dumb ideas.</p>
<p>{% link ashleemboyer/just-make-that-app-59gl %}</p>
<p>Well, writing that post pushed me to elaborate on a super simple color tool I created for a post about generating Gatsby sites from JSON files. This site shows you whether to use black or white text on a colorful background. All of the colors come from the <a href="https://material.io/tools/color/#!/">Material Design color palette</a>.</p>
<p>{% link ashleemboyer/build-a-multi-page-gatsby-site-from-json-3kp %}</p>
<p>I&#39;d like to introduce you to <a href="https://ashleemboyer.github.io/textua11y/">textua11y</a>. You can choose a text and background color, then use the Chrome developer tools to hover over the text elements and check your color contrast ratio. There&#39;s a lot to work with here.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/gzt7rxfx2y83qldxosyw.gif" alt="A demonstration of the app&#39;s first version"></p>
<p>I have multiple ideas on how to keep going with this, but I also want to hear from you! When you go to the site and click around, what do you feel like is missing? Anything random and cool you&#39;d like to see? I&#39;m excited to keep working on the tool this week.</p>
<p>Current top todos:</p>
<ol>
<li>&quot;Go back&quot; between steps in the color pickers</li>
<li>Display text with the contrast score</li>
<li>Show the selected color hex values in addition to the names</li>
</ol>


<p>As someone who&#39;s new to the web dev game, I find it hard to accept all my ideas as good ones. Yes, you read that right, <em>all</em> ideas are good ideas. Ideas are similar to questions, it&#39;s all about the timing. Every single idea you have leads to a learning experience.</p>
<p>{% link ashleemboyer/don-t-be-afraid-to-ask-questions-5g99 %}</p>
<p>There&#39;s a lot of pressure to make something <em>cool</em> or <em>super useful</em> and <em>profitable</em>. You don&#39;t have to do that right now, especially if you&#39;re learning a new framework. You can make any app you want to, for whatever reason you want to. If no one is getting hurt, just do it!</p>
<p>There are no dumb ideas. Some ideas are better than others obviously, but all ideas keep our creative juices flowing. Once you get started, it&#39;ll be hard to stop. Eventually, you&#39;ll find the best idea to suit your current situation. All you have to do is sit and listen to your thoughts without judgment. Let them all pour out freely.</p>
<p>Now, let&#39;s hear those app ideas! Maybe you&#39;ll find someone with a similar idea. Maybe get in touch and think about collabing. :)</p>


<p><a href="https://twitter.com/cduhigg">Charles Duhigg</a>&#39;s <a href="https://www.amazon.com/Power-Habit-What-Life-Business/dp/B007EJSMC8/ref=tmm_aud_swatch_0?_encoding=UTF8&amp;qid=&amp;sr="><em>The Power of Habit</em></a> is an awesome book that gets into the science of decision-making and forming habits. My favorite takeaway from the book is that habits are things we end up doing automatically, meaning we don&#39;t even have to use as much energy to think about doing them.</p>
<p>If you&#39;re like me, you think waaay too much.</p>
<p><img src="https://media.giphy.com/media/JSgDJLtBZnx9m/giphy.gif" alt="A little kid leaning on a table and thinking"></p>
<p>Thinking isn&#39;t inherently a bad thing. People tend to associate overthinking with being emotional, and that&#39;s fine. There&#39;s nothing wrong with being an emotional person. Accept it; run with it. :)</p>
<p>But there a lot of things we tend to overthink that can be easily simplified. For example, some people wear the same jeans and shirts every day so they don&#39;t have to think about what to wear. Some eat the same breakfast, drive the same commute, or walk their dogs on the same path. I get bored with super rigid routines, so it takes practice finding what works.</p>
<p>Where does minimalism come into creating habits? Well, think of the first example: wearing the same outfit every day. That requires minimizing your closet and getting rid of all your clothing that doesn&#39;t align with that outfit. I like to see minimalism as a tool in addition to a lifestyle. Usually, it helps me set myself up for even bigger forward steps.</p>
<p>Think of it as clearing mental space for doing what&#39;s most important. If you need some help getting started, I recommend cleaning out your email subscriptions. I&#39;ve been needing to do this for weeks and I&#39;ll probably avoid checking my inbox as often as I should until it&#39;s done. 🙈</p>
<p>{% link <a href="https://dev.to/ashleemboyer/throw-all-of-your-email-subscriptions-in-the-garbage-25ah">https://dev.to/ashleemboyer/throw-all-of-your-email-subscriptions-in-the-garbage-25ah</a> %}</p>
<p>What habits are you working on or wanting to get started? Where could spend time minimizing things to make room for the habits you want to create?</p>


<p>I came across an excellent tweet last night by Twitter user <a href="https://twitter.com/AmarachiAmaechi">Amycruz</a>:</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">To be a good developer you don’t have to spend 99% of your time writing, reading about coding. Do other activities. it helps to be more creative and to enrich your knowledge.<br><br>What other activities do you engage in aside coding 🤔🤔</p>&mdash; Amycruz 👩‍💻 👩‍💻 👩‍💻 (@AmarachiAmaechi) <a href="https://twitter.com/AmarachiAmaechi/status/1132018328988454912?ref_src=twsrc%5Etfw">May 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p>This is such a great point. I see many devs talking about how hard it is to cope with the insane amount of information online. On the one hand: <em>it feels a little bit competitive</em>. Who can learn the newest framework the fastest and build a super cool app and start making money? On the other hand: it&#39;s hard to choose which things to learn in what order because you&#39;re scared of falling behind.</p>
<p>Let&#39;s start by acknowledging we&#39;ll never learn everything. First of all, it&#39;s impossible. Second of all, it&#39;s not necessary. Learn the skills you need for the job you want. Then, you can fill in the gaps as needed. However, all of you learnaholics like myself might be wondering how to fit your extra learning into that mindset. The answer is balance.</p>
<p>You <em>must</em> balance learning with other activities. Without balance, you risk burnout, as is the case with most things. So, find some hobbies! I personally enjoy knitting, crocheting, cross-stitching, and reading memoirs. Creative hobbies are very beneficial. You can meet new people who share the same hobby, have interesting things to talk about yourself in job interviews, and clear your mind for a while from stressful things.</p>
<p>Have any non-code hobbies you&#39;d like to share? Drop a comment! :)</p>


<p>Still feeling under the weather, but I mustered up the brain energy to write this little haiku:</p>
<p>“I’m not really sure
If it is against the rules
Blog challenge is paused”</p>
<p>Hopefully I’ll be back at it again tomorrow with some more exciting content, but no promises.</p>
<p>Until then, keep pushing! Unless you get sick, of course. :) Either way, you’ve got this.</p>


<p>I’ve said this before, and I’ll say it forever: your health is more important than anything else. Take care of your body. Feed it good things. Rest it when it hurts. You’re not a bad person if you need a break or to step back from something. Sacrifice your well-being for no one.</p>
<p><em>This post is short because</em> I <em>need a break. Hope to be back tomorrow with our regularly-lengthed posts. 💕</em></p>


<p>Since I&#39;ve lived in apartments for the entire 3 years I&#39;ve had my dog, Trooper, Zach and I have always had to walk him with a leash. Our current apartment has a nice bark park, which helps him get some energy out, but for the most part, he&#39;s on a leash.</p>
<p>It&#39;s easy to get bored while walking your dog on a leash. Sometimes, I pull my phone out to take a quick peek at an app (this is a whole separate issue, really 😜) while he&#39;s staring off into space or letting out little huffs at other dogs/humans.</p>
<p>After a while of him standing still, I think (rather impatiently), <em>&quot;What are you</em> looking <em>at? Can you just do your business already?&quot;</em>. Here&#39;s the thing: he has no choice but to be present in every single moment. Their brains aren&#39;t wired like ours to think about the future.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/b84s2n8z4k0eq8wa4pi0.JPG" alt=""></p>
<p>Bonus! Here&#39;s another picture of Trooper. :)</p>
<p>Trooper can really only think about what&#39;s right in front of him. Who knows if nature intended this, but I assume that animals are like this for a reason. <em>Wild</em> animals don&#39;t have time to worry about things that aren&#39;t even happening&mdash;they&#39;re too busy trying to survive predators and starvation.</p>
<p>Most of us don&#39;t really have to do that, at least not to the same degree. Trooper doesn&#39;t have to do that either since we take care of him, but what&#39;s the coolest side effect about him still having a limited perception? He&#39;s an extremely happy pup. He&#39;s content watching birds, sniffing flowers and poles, and sunbathing.</p>
<p>So, what can we learn about mindfulness from our dogs? You&#39;ll be a lot happier if you practice it. Try not to worry too much about things until they&#39;re actually a problem. Try to use your phone a little less. Look up. Look around. See the beauty in your surroundings.</p>


<p>With my crazy schedule of driving 1.5 hours one-way for a class four days a week, I haven&#39;t had as much time to write code outside of work. I also see tons of people on Twitter talking about React or Gatbsy, which makes me want to dig into them even more.</p>
<p>So, I&#39;m making an informational website on Discrete and Combinatorial Mathematics II to study <em>and</em> practice my Gatsby skills. 😉 The course material is separated very nicely already: 7 advanced topics and 6 core topics. So far, there&#39;s one page for each which are linked from the home page with a little summary description.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/4az0rsudygy5gq04uy0q.png" alt=""></p>
<figcaption>Preview of the home page.</figcaption>

<p>On each page, I plan on showing a list at the top of the important terms and definitions the relevant textbook section and I&#39;m also inserting the examples most helpful to me.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/yhov3ts4yi3ygi26xjd0.png" alt=""></p>
<figcaption>Preview of a topic's page.</figcaption>

<p>Finally, I&#39;m also creating a glossary page where all of the important terms and definitions will be formally described and linked to from any of the other site pages.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/bkyxf8891q4t2wcsdm4h.png" alt=""></p>
<figcaption>Preview of the terms page.</figcaption>

<p>I feel extremely nerdy for doing this and it&#39;s <em>actually</em> incredibly fun. I&#39;m trying to pick up on little things along the way too, such as practicing semantic HTML. I found this really cool post while looking up the differences between <code>&lt;section&gt;</code> and <code>&lt;article&gt;</code> elements.</p>
<p>{% link <a href="https://dev.to/zac_heisey/7-alternatives-to-the-div-tag-in-html-62i">https://dev.to/zac_heisey/7-alternatives-to-the-div-tag-in-html-62i</a> %}</p>
<p>I hope this post inspires you to do whatever it takes to accomplish your goals. Figure out what tactics work for you, and <a href="https://dev.to/ashleemboyer/just-do-the-thing-10el">just get it done</a>.</p>


<p>You will never know everything. There&#39;s too much information out there and not enough time to learn it all. What this means is, sometimes we&#39;re wrong because we just don&#39;t know all of the answers. And that&#39;s fine&mdash;it&#39;s 100% OK to be wrong!</p>
<p>If you&#39;re wrong about something, it&#39;s not a big deal. It&#39;s an opportunity to do better, to learn something new, and grow. Your teammate <em>will</em> know more about a topic than you, just like you know more about a topic than them. That&#39;s the great thing about working on a team! You can teach each other about these topics, and your skills will probably compliment one another to the benefit of everyone.</p>
<p>My brain is pretty tired today and words are hard, so I&#39;d like to open the comments for people to share their favorite resources for learning new things. Where do you like to learn about productivity? What books do you recommend on philosophy or ethics? Who&#39;s your favorite author of UI/UX books? Whatever you got, I want to hear it. :)</p>


<p>There&#39;s no such thing as a stupid question. There may be stupid timing for it, such as a student asking when an exam is 5 minutes after the teacher already announced that information. But that was still a good question, they just asked it at a horrible time.</p>
<p>In general, there are not too many restrictions on asking questions. It&#39;s a lot about timing them. For example, you don&#39;t want to ask too many specific questions about implementation details if you&#39;re still trying to find out what a client needs in a potential product. Their needs are <em>probably</em> going to change every time you talk to them at this point and planning the implementation too rigorously could be a waste of time.</p>
<p>So, what are the benefits of breaking out of your fear of asking questions and just doing it?</p>
<h2 id="learning-learning-learning">Learning, learning, learning</h2>
<p>To an extent, who cares how they feel about you asking a bunch of questions? Your career is yours and only you can be responsible for taking it to the next level.</p>
<h2 id="making-new-friends">Making new friends</h2>
<p>I can&#39;t tell you how many people I&#39;ve met through the DEV Community site and Twitter over this past month. It&#39;s really exciting how much support you can find in this industry if you put yourself out there.</p>
<h2 id="building-your-confidence">Building your confidence</h2>
<p>Sometimes the scariest part about asking questions is knowing <em>how</em> to ask them. You can make 10 attempts at Googling something and Google isn&#39;t going to judge you for doing it. Re-wording a question to a human a few times to make sure you&#39;re getting the right information? That can potentially be frustrating for both of you. But good news! The more you ask questions, the better you get at wording them.</p>
<p>Have any insight on questions that you&#39;d like to share? Leave a comment or <a href="https://twitter.com/ashleemboyer">send me a tweet</a>! :)</p>


<p>I do. not. care. about inbox zero. :) Too often, it becomes less about efficiently managing your inbox and more about rushing to have no emails for any reason. I prefer to make sure I&#39;m adequately handling messages instead of emptying my box. But still, my number one tip for a clean inbox?</p>
<h3 id="get-rid-of-all-of-your-subscriptions">Get rid of all of your subscriptions.</h3>
<p>Yes. I mean <strong><em>all</em></strong> of them. Start over. You know for a fact you have too many. Just take an hour and do it. It&#39;s a huge step, but what you&#39;ll gain is learning which subscriptions you actually love and want to hold on to. If it&#39;s worth the work to go find it again, it&#39;s worth the space it takes up in your inbox.</p>
<p>For fun, here are a few things I love that I currently subscribe to:</p>
<ol>
<li><a href="https://www.theminimalists.com/start/">The Minimalists</a> - Life and minimalism</li>
<li><a href="https://discoverpraxis.com/newsletter/">Praxis Newsletter</a> - Professional advice</li>
<li>My local knit shop - One of my favorite places to go for fun</li>
</ol>
<p>This post is short, but seriously, it&#39;s that simple. Unsubscribe from everything. Throw it all in the garbage. Once you&#39;ve figured out what you&#39;re re-subscribing to, share them with us in the comments or <a href="https://twitter.com/ashleemboyer">send me a tweet</a>. :)</p>


<p>Do you know what it means when you can admit your weaknesses? It means you&#39;ve probably recognized the following:</p>
<ol>
<li>You are less afraid to be wrong</li>
<li>You aren&#39;t perfect</li>
<li>You have things to work on</li>
<li>You are working on the things</li>
</ol>
<p>Other people figure these things <em>about</em> you when you openly admit your weaknesses. On Mother&#39;s Day, I was having dinner with my mom and grandma and we were talking about air fryers and cooking. <em>My grandma is an</em> <strong><em>exceptional</em></strong> <em>cook so it&#39;s a common topic of discussion.</em></p>
<p>I haven&#39;t cooked in nearly 3 months because of my long commute, so they asked what I&#39;ve been eating. I said something along the lines of, &quot;Mostly microwave dinners, but I have a problem with impulsively buying fast-food during my drives.&quot; To that, my mom said, &quot;You&#39;re openly admitting that???&quot; And then my grandma swooped in with, &quot;No, it&#39;s good she can admit it!&quot;</p>
<p>I get that they are my family and the dynamic is different than that of one in the professional workplace, so I&#39;ll give you another example if you&#39;re still feeling skeptical.</p>
<p>A few years ago, I attended a weekend-long leadership workshop at my school. At one of the follow-up dinners, we went around the room and named something we wanted to spend 30 days improving. I named &quot;road rage&quot; because that&#39;s something I can be pretty bad about. The speaker was very surprised and we all laughed about it because it was relieving to hear such an honest answer.</p>
<p>People appreciate honesty and vulnerability. Good people will thank you for being open. It&#39;s how we relate.</p>


<p>I don&#39;t know where <a href="https://twitter.com/JFM">Joshua Fields Millburn</a> was inspired by his advice, but <a href="https://twitter.com/SPressfield">Steven Pressfield</a>, Nike, and he all have roughly the same thing to say: &quot;Just do it.&quot;</p>
<p><img src="https://media.giphy.com/media/3o7TKPVo3SMEMMwISY/giphy.gif" alt="Shelly-Ann Fraser-Pryce dancing with the words &quot;Just do it&quot; moving with her"></p>
<p>JFM said in <em><a href="https://www.theminimalists.com/how-to-improve-writing/">&quot;How to Improve Your Writing: 3 Tips&quot;</a></em></p>
<blockquote>
<p>I didn’t become a writer until I developed a writing habit. People don’t learn how to write via osmosis; it takes work. So forget word count or page count, and don’t worry about creating the perfect writing space—focus instead on <strong>sitting in the chair</strong> [emphasis mine] distraction-free, writing for at least an hour a day. Do this for a month and you will improve more than you thought possible.</p>
</blockquote>
<p>In <em><a href="https://www.amazon.com/War-Art-Steven-Pressfield-ebook/dp/B007A4SDCG/ref=tmm_kin_swatch_0?_encoding=UTF8&amp;qid=&amp;sr=">The War of Art</a></em>, Pressfield talks about Resistance numerous factors surrounding it. I haven&#39;t gotten too deep in it yet, but Resistance is what we have to fight every time we want to do something meaningful. You could be avoiding doing The Thing out of fear, worry, sheer boredom, whatever. At the very beginning of his book, he says</p>
<blockquote>
<p>There&#39;s a secret that real writers know about that wannabe writers don&#39;t, and the secret is this: It&#39;s not the writing that&#39;s hard. What&#39;s hard is sitting down to write.</p>
</blockquote>
<blockquote>
<p>What keeps us from sitting down is Resistance.</p>
</blockquote>
<p>This is the 15th day of my 30-day blogging challenge, so I&#39;m over halfway there. I have to agree that the hardest part about it all was sitting down to write and get started. There&#39;s always something to be distracted by: watching <a href="https://twitter.com/nbcbrooklyn99">Brooklyn Nine-Nine</a> on Hulu, playing with my dog, scrolling through the Twitter, ...</p>
<p>But all of those things will be there <em>after</em> The Thing is done. You might also find that The Thing wasn&#39;t so bad or it didn&#39;t take as long as you thought it would. Just sit down and do it. You&#39;ve got this!</p>
<p><img src="https://media.giphy.com/media/d2ZeMUDQSSsCP9FC/giphy.gif" alt="Jake Peralta excitedly giving Amy Santiago an encouraging thumbs up"></p>


<p>I&#39;m finishing up my degree at one of the top undergraduate engineering schools in the country. Applicants are typically at the very top of their high school class and have great SAT and ACT scores. I did pretty well during the last few years of high school and worked extremely hard to get into the school.</p>
<p>My first quarter, I took Calculus II (out of III), Rhetoric and Composition, General Chemistry I (I started out as a Chemical Engineering major <em>gasp</em>), and College and Life Skills. Calc II was a nightmare for me. I &quot;skipped&quot; Calc I because of my AP Calc score, and there seemed to be this insane assumption that I was a calculus expert at this point. I got lost so fast.</p>
<p>As for Rhetoric and Composition, I did fairly well for most of the class. The very last paper was supposed to be Wikipedia-style, but I honestly had no idea how to write a research paper. Small, country high schools don&#39;t really prepare you to write a college-level paper. 😳 Even after the professor questioned me about my ability to write the paper, he still reported me for plagiarism and I got a 0 on the paper.</p>
<p>Know what the next part of the story is? I failed both of those classes and got a D letter grade, meaning I had to retake them at some point. This was absolutely devasting at the time. My GPA was a 2.0 after only 1 quarter at this school where I was expected to perform much, MUCH higher. I questioned whether or not I should be there because who knew if I could even make the grades?</p>
<p>That was the fall of 2013. Since then, I&#39;ve had internships every single summer and have also been working full-time since last summer while finishing up my last few classes. This isn&#39;t typical for graduates from my school. Most people finish &quot;on time&quot; (4 years), and some even do it in <strong><em>three years</em></strong> or with <strong><em>two majors</em></strong>. Bravo to y&#39;all, there&#39;s no way I could have done that.</p>
<p>So, how did I manage to still lock-in great opportunities? First of all, I feel very fortunate for the number of companies that come to the fall career fair on campus&mdash;somewhere around 300 of them.</p>
<p>Second and most importantly, in my opinion, is that I&#39;ve always been honest about my situation. For whatever reason, my personal life outside of classes was regularly a living hell. I&#39;m mostly grateful for those times, because they led me to get help with my mental health and I would not be where I am today without the things I learned back then.</p>
<p>Anyways, I always made sure to be transparent with people about my life. I wouldn&#39;t go into every single detail, but just enough to let them know that I came from a different background than most of the other students and had to fight harder for what I wanted.</p>
<p>I also always emphasized the fact that I had a plan for correcting my path. When I failed a class (it happened quite a few times), I made sure to tell them exactly when I was taking it over again. This had a huge impact on how I got my third internship. The HR gentleman flat-out said, &quot;Good, you have a plan for fixing this and you&#39;ve already begun.&quot;</p>
<p>My GPA never even reached a 3.0. I tried <em>so hard</em> to get it there. But things just kept happening. Life got in the way over and over again, but you know what? I&#39;m almost there, and I&#39;m doing just fine. GPA is not the only factor to the kind of person someone is, and if a company filters you out based on what that number is? Forget them. There&#39;s a 90% chance they aren&#39;t the kind of company you want to work for anyways.</p>
<p>You have a <strong>story</strong>. It is <strong>important</strong>. Anyone who isn&#39;t willing to listen to it before shrugging you off isn&#39;t <strong>worth your time</strong>.</p>


<p>I decided to take this approach when I made <a href="https://blackbirthdays.com">https://blackbirthdays.com</a>. Originally, for the month of February, it showed a different person each day for their birthday. So, since there was very static data for the site, I decided to just feed the information into it with a JSON file. I wanted to practice something with Gatsby, so I got to practice <a href="https://www.gatsbyjs.org/tutorial/part-seven/">programmatically creating pages from data</a> and <a href="https://www.gatsbyjs.org/tutorial/part-four/">using GraphQL for getting data</a>.</p>
<p>I couldn&#39;t remember exactly every step for doing this, so <a href="https://ashleemboyer.github.io/colors/">I made a new site</a> for this post specifically. No worries, I plan on making it way better soon. I hope it can become a helpful tool for looking at text color/background color contrasts eventually. Anyways, here we go!</p>
<h3 id="1-create-your-project">1. Create your project</h3>
<p>The easiest step. :) Head over to the <a href="https://www.gatsbyjs.org/docs/quick-start/">Gatsby tutorials</a> if you have any issues or need help setting things up.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/d89dd76oml8yy3rsepy6.png" alt="Terminal commands for setting up a new Gatsby project"></p>
<h3 id="2-create-the-json-file">2. Create the JSON file</h3>
<p>Put a new JSON file in the root directory of your project. I had a little bit of issue with the data structure itself, but I think it just takes practice. It&#39;s easier to read data from GraphQL with arrays, so try to put your data into that sort of format.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/peuhc2g8ovcrkvoajzj5.png" alt="How I formatted the color data"></p>
<h3 id="3-create-a-template-file">3. Create a template file</h3>
<p>This template file defines how all of your dynamically created pages will be displayed. Cool, huh??! You can read a bit more about this <a href="https://www.gatsbyjs.org/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/#creating-a-page-template">on Gatsby&#39;s site</a>.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/6jbcscj813zgm4ekuyeb.png" alt="Code for the template file"></p>
<h3 id="4-make-the-gatsby-nodejs-file-create-all-the-pages">4. Make the <code>gatsby-node.js</code> file create all the pages</h3>
<p>This file should already be in your root directory from the <code>gatsby new</code> command from step 1. This is where you implement the <code>createPages</code> API function and tell the site about the template file you created in the previous step. On the second line of the screenshot below, I specify the JSON file from step 2.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/x42s5fslzctbnfrpurs0.png" alt="Code for the gatsby-node.js file"></p>
<h3 id="5-restart-the-development-server-and-preview-your-site">5. Restart the development server and preview your site</h3>
<p>Everything should be good to go at this point and you can start styling. Have at it! Share your results if you give this a try, or let me know if something seems off in any of the steps. Enjoy! :)</p>


<p>Rejection sucks, and for some reason, rejection from acquaintances and strangers <em>especially</em> sucks. Maybe you submitted a proposal to give a talk at an event and weren&#39;t selected for it. Maybe you applied for a job and they didn&#39;t give you an interview. Maybe you asked for a promotion or salary raise and couldn&#39;t get what you needed. How do we move on from rejection like this?</p>
<p>First of all, don&#39;t immediately take it personally. You&#39;re definitely awesome, but let&#39;s take a breather and analyze the situation more closely. There are more than likely some good reasons for the rejection from the other person&#39;s perspective. Your talk topic may not have aligned closely enough for the event&#39;s purpose. Another applicant may have been more qualified for the job. Your company might not have an open position to promote you to or enough money to raise your salary.</p>
<p>Before you ask any follow-up questions, make sure you genuinely <strong>thank</strong> the person who rejected you for their time. Doing so will increase your chances of them keeping you mind for future opportunities.</p>
<p>Once you&#39;ve thanked them, then consider some potential questions for feedback. You want to make sure they don&#39;t sound bitter, so if you want to double-check your wording and tone, see if you can find someone to review them before you move forward. You can ask what would have made your talk proposition more desirable, what skills or qualifications you were missing from your application, or what you can do at your job to be more seriously considered for a promotion/raise next time.</p>
<p>This is where you can take the answers to these questions and run with them. Hopefully, you receive positive, helpful feedback. Build on it and make yourself an even stronger candidate. If the feedback wasn&#39;t helpful or you get shrugged off, however, it might be time to look deeper into the situation. In this case, find an outside perspective to talk to about it. They may see something you don&#39;t.</p>
<p>Regardless, keep in mind that you are not alone in being rejected. It happens to everyone, every day. Don&#39;t be afraid to put yourself out there. You might come across the opportunity of a lifetime.</p>


<p>Work (hopefully) doesn&#39;t consume our entire lives. Every single one of us comes from a different background and we&#39;re also all in very different stages. Despite this obvious fact, there&#39;s still a ridiculous stigma against people expressing emotions at work. We aren&#39;t robots, so what&#39;s the deal?</p>
<p>Let&#39;s first think about what people consider &quot;emotional&quot; behavior based on gender biases&mdash;I think it&#39;s important. If someone says a woman is being emotional at work, they might think she&#39;s angry or aggressive when disagreeing with a statement or correcting someone if they interrupt her. These same people think this is normal behavior for men and don&#39;t call them emotional for it. Come to think of it, do men ever degradingly get called emotional for any of their behavior at work? I&#39;ve never seen it in my own personal experiences.</p>
<p>But what if we all could show some emotions at work without it being seen as a bad thing? Our jobs are frustrating. Software is frustrating. Clients are frustrating. <em>So what</em> if someone gets mad at their desk for 30 seconds because the bug they&#39;ve been working on for a few days or a week is still not fixed? As long as they aren&#39;t being disruptive to their teammates, I don&#39;t see a problem.</p>
<p>If someone is going through something in their personal life, such as losing a loved one, let them have some space when for a while. They&#39;re probably going to be really quiet for a few days. They might cry at their desk or hide in the bathroom. If you see them do either, just be supportive. It&#39;s not hard and it doesn&#39;t have to be awkward. Also, keep it to yourself if they confide in you. It&#39;s not your place to chit-chat about someone else&#39;s situation.</p>
<p>So, let&#39;s normalize people being human at work. I get that it&#39;s a society-wide issue, but I can&#39;t think of a better place to start fixing it than at your work, with people you interact with on a daily basis.</p>


<p>I first heard the phrase &quot;learn out loud&quot; from the <a href="https://discoverpraxis.com/office-hours/">Office Hours podcast</a>. In <a href="https://discoverpraxis.com/3-reasons-learn-loud/">this article</a>, podcast co-host T.K. Coleman gives us three reasons to do so. I&#39;d like to focus on the first reason he gives and show you how to apply it to the job search.</p>
<p>Say you&#39;re in an interview and they ask you a difficult question you&#39;re not sure of the answer to. The pressure to immediately respond and sound smart is on and it builds as the awkward silence grows between you and the interviewer. You get more and more uncomfortable and your mind goes blank. No answer is coming to mind.</p>
<p>It doesn&#39;t have to turn out like that. You can, and I believe most would interviewers appreciate it, think and learn out loud instead. T.K. made two key points relevant to this.</p>
<blockquote>
<p>Knowing what a person knows is very different from knowing what it’s like to work with that person when they don’t know. The latter is far more important to the people who have to work with you. And since everyone has things they need to learn, it’s highly valuable when you can signal your ability to do that very thing with patience and persistence.</p>
</blockquote>
<blockquote>
<p>...</p>
</blockquote>
<blockquote>
<p>When people can watch you learn, they’ll still get to see how effective you can be when you’re in the know. But more importantly, they’ll get to see how consistent and composed you can be when you have no clue.</p>
</blockquote>
<p>Some days, you&#39;re going to be visiting Google and Stack Overflow dozens of times. Others, you may only need to go there once or twice. Both are fine. No sensible person is going to expect you to have every single thing about your job memorized. There&#39;s just <em>too much</em> information out there so we have to keep our minds tidy with only the most important bits.</p>
<p>Since learning is the expectation of any job, what <em>should</em> be important to interviewers is how someone learns, not whether or not they have every Big O notation memorized. The best way for you to showcase your learning skills is by doing so out loud. When you get a difficult question during your whiteboard pseudocode test, step through your thought process. If you get stuck, say so! Then proceed by explaining what you would do next.</p>
<p>What will your search terms be? Have you seen this kind of problem before? What questions would you ask a fellow teammate? Answer these questions well by <em>doing</em>, and your chances of impressing the interviewer are huge.</p>


<p>I hate reading more than one book at a time, but here I am, reading three. I think? I can&#39;t even be sure. This is why I should practice self-control and only do one at a time.</p>
<p>Since discovering how much I love studying user experience and accessibility, I&#39;ve come across <strong>several</strong> books that had to be added to my list of books to read. Some are about UX and design, others are about creation and productivity.</p>
<p>For each, I&#39;ve linked the Amazon listing and also pasted the synopsis. I love, love, LOVE reading, so if you have any recommendations or lists of your own, <em>please</em> share them! My already-full bookshelf won&#39;t appreciate it, but I sure will. 😊</p>
<h1 id="1-mike-monteiros-ruined-by-design">1. Mike Monteiro&#39;s <a href="https://www.amazon.com/Ruined-Design-Designers-Destroyed-World/dp/1090532083/ref=sr_1_1?keywords=ruined+by+design&amp;qid=1557279824&amp;s=gateway&amp;sr=8-1"><em>Ruined by Design</em></a></h1>
<p>The world is working exactly as designed. The combustion engine which is destroying our planet’s atmosphere and rapidly making it inhospitable is working exactly as we designed it. Guns, which lead to so much death, work exactly as they’re designed to work. And every time we “improve” their design, they get better at killing. Facebook’s privacy settings, which have outed gay teens to their conservative parents, are working exactly as designed. Their “real names” initiative, which makes it easier for stalkers to re-find their victims, is working exactly as designed. Twitter’s toxicity and lack of civil discourse is working exactly as it’s designed to work. The world is working exactly as designed. And it’s not working very well. Which means we need to do a better job of designing it. Design is a craft with an amazing amount of power. The power to choose. The power to influence. As designers, we need to see ourselves as gatekeepers of what we are bringing into the world, and what we choose not to bring into the world. Design is a craft with responsibility. The responsibility to help create a better world for all. Design is also a craft with a lot of blood on its hands. Every cigarette ad is on us. Every gun is on us. Every ballot that a voter cannot understand is on us. Every time social network’s interface allows a stalker to find their victim, that’s on us. The monsters we unleash into the world will carry your name. This book will make you see that design is a political act. What we choose to design is a political act. Who we choose to work for is a political act. Who we choose to work with is a political act. And, most importantly, the people we’ve excluded from these decisions is the biggest (and stupidest) political act we’ve made as a society. If you’re a designer, this book might make you angry. It should make you angry. But it will also give you the tools you need to make better decisions. You will learn how to evaluate the potential benefits and harm of what you’re working on. You’ll learn how to present your concerns. You’ll learn the importance of building and working with diverse teams who can approach problems from multiple points-of-view. You’ll learn how to make a case using data and good storytelling. You’ll learn to say NO in a way that’ll make people listen. But mostly, this book will fill you with the confidence to do the job the way you always wanted to be able to do it. This book will help you understand your responsibilities.</p>
<h1 id="2-erika-halls-just-enough-research">2. Erika Hall&#39;s <a href="https://www.amazon.com/Just-Enough-Research-Erika-Hall/dp/1937557103/ref=sr_1_fkmr0_1?crid=225WHYZ7RCHMQ&amp;keywords=erika+hall+just+enough+research&amp;qid=1557280061&amp;s=gateway&amp;sprefix=erika+hall+just+enou%2Caps%2C165&amp;sr=8-1-fkmr0"><em>Just Enough Research</em></a></h1>
<p>Design research is a hard slog that takes years to learn and time away from the real work of design, right? Wrong. Good research is about asking more and better questions, and thinking critically about the answers. It&#39;s something every member of your team can and should do, and which everyone can learn, quickly. And done well, it will save you time and money by reducing unknowns and creating a solid foundation to build the right thing, in the most effective way. In Just Enough Research, co-founder of Mule Design Erika Hall distills her experience into a brief cookbook of research methods. Learn how to discover your competitive advantages, spot your own blind spots and biases, understand and harness your findings, and why you should never, ever hold a focus group. You&#39;ll start doing good research faster than you can plan your next pitch. Erika Hall has been working in web design and development since the late 20th century. In 2001, she co-founded Mule Design Studio where she directs the research, interaction design, and strategy practices. Erika speaks and writes frequently about cross-disciplinary collaboration and the importance of natural language in user interfaces. In her spare time, she battles empty corporate jargon at Unsuck It. She also co-hosts Running from the Law, a weekly podcast on business law and endurance fitness, and can probably outrun you.</p>
<h1 id="3-steven-pressfields-the-war-of-art">3. Steven Pressfield&#39;s <a href="https://www.amazon.com/War-Art-Steven-Pressfield-ebook/dp/B007A4SDCG/ref=tmm_kin_swatch_0?_encoding=UTF8&amp;qid=&amp;sr="><em>The War of Art</em></a></h1>
<p>Think of The War of Art as tough love... for yourself. Since 2002, The War of Art has inspired people around the world to defeat &quot;Resistance&quot;; to recognize and knock down dream-blocking barriers and to silence the naysayers within us. Resistance kicks everyone&#39;s butt, and the desire to defeat it is equally as universal. The War of Art identifies the enemy that every one of us must face, outlines a battle plan to conquer this internal foe, then pinpoints just how to achieve the greatest success. Though it was written for writers, it has been embraced by business entrepreneurs, actors, dancers, painters, photographers, filmmakers, military service members and thousands of others around the world.</p>
<h1 id="4-laura-kleins-ux-for-lean-startups">4. Laura Klein&#39;s <a href="https://www.amazon.com/UX-Lean-Startups-Experience-Research/dp/1449334911/ref=sr_1_2?crid=1ZYI5TIDLFFFJ&amp;keywords=ux+for+lean+startups&amp;qid=1557280161&amp;s=gateway&amp;sprefix=ux+for+lean+start%2Caps%2C177&amp;sr=8-2"><em>UX for Lean Startups</em></a></h1>
<p>Great user experiences (UX) are essential for products today, but designing one can be a lengthy and expensive process. With this practical, hands-on book, you’ll learn how to do it faster and smarter using Lean UX techniques. UX expert Laura Klein shows you what it takes to gather valuable input from customers, build something they’ll truly love, and reduce the time it takes to get your product to market.</p>
<p>No prior experience in UX or design is necessary to get started. If you’re an entrepreneur or an innovator, this book puts you right to work with proven tips and tools for researching, identifying, and designing an intuitive, easy-to-use product.</p>
<ul>
<li>Determine whether people will buy your product before you build it</li>
<li>Listen to your customers throughout the product’s lifecycle</li>
<li>Understand why you should design a test before you design a product</li>
<li>Get nine tools that are critical to designing your product</li>
<li>Discern the difference between necessary features and nice-to-haves</li>
<li>Learn how a Minimum Viable Product affects your UX decisions</li>
<li>Use A/B testing in conjunction with good UX practices</li>
<li>Speed up your product development process without sacrificing quality</li>
</ul>
<h1 id="5-jeremy-bainess--clive-howards-ux-lifecycle">5. Jeremy Baines&#39;s &amp; Clive Howard&#39;s <a href="https://www.amazon.com/UX-Lifecycle-business-implementing-experiences/dp/1522768300"><em>UX Lifecycle</em></a></h1>
<p>This book is for organisations starting their UX journey. It will help to address the basics such as defining what UX is; the importance of research; how UX is a process and not a job title; and where business value comes from improving efficiency, effectiveness, and satisfaction. There is practical guidance for building a business case and identifying the key investments required in people and process that will bring about the change needed to deliver success. Implementing UX is brought to life through the UX Lifecycle, a methodology framework that was born out of real life successes. At the heart of the UX process is the most important stakeholder - the user! Clive and Jeremy have helped businesses from start-ups to enterprises derive value from UX. While running their own UX consultancy they created and applied the UX Lifecycle. Since then they have both continued to grow their knowledge through implementing UX solutions and learning from others. This book will answer the questions that they have been asked time and again by businesses seeking to embrace and leverage UX.</p>


<p>The worst part of finishing a tutorial is not knowing what to do next. You <em>could</em> go look up some app ideas online, but aren&#39;t you tired of making to-do lists and calculators you probably won&#39;t use? It probably feels like there&#39;s nothing left to make.</p>
<p><img src="https://media.giphy.com/media/FeiQbJ2BjZLoHdD5oB/giphy.gif" alt="Jack Tripper saying, &quot;Well, as a matter of fact, there is something&quot;"></p>
<p>What about a resume? I spent today coding mine up using Gatsby (I really needed to use the typography and icon plugins), then I did a swift little <code>ctrl-p</code> &gt; &quot;Save to PDF&quot;. It was much easier for me to do it this way than to make something in LibreOffice Draw. The program always seems to distort colors and such anyways.</p>
<p>So... what makes a resume the <em>perfect</em> project?</p>
<ul>
<li>It&#39;s only one page&mdash;that&#39;s not too much work.</li>
<li>You can practice laying things out with CSS if you do what I did and use two columns.</li>
<li>There&#39;s all types of elements you can practice with: headers, paragraphs, links, and lists.</li>
<li>Again, if you use two columns, you can practice placing your elements in the correct order for accessibility.</li>
<li>You can use get some extra practice with tools like <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> that test accessibility, performance, and best practices.</li>
<li>After it&#39;s done, you can add it to your personal/portfolio site(s) and have something great-looking to brag about. 😉</li>
</ul>
<p>Still feeling a little uninspired about design? Take a look at these sites for some resume examples:</p>
<ul>
<li><a href="https://piktochart.com/blog/well-designed-resume-examples-inspiration/">Piktochart</a></li>
<li><a href="https://dribbble.com/search?q=resume">Dribbble</a></li>
<li><a href="https://www.awwwards.com/inspiration/search?text=resume">Awwwards</a></li>
</ul>
<p>If you have any other ideas, or would like to share your work, please do leave it in the comments below or <a href="https://twitter.com/ashleemboyer">send me a tweet</a>! I love seeing what other people create. 😊</p>


<p>Not that I feel the need to explain myself, but I want to share that I&#39;m hard-of-hearing. It&#39;s genetic and just about everyone on my family&#39;s maternal side suffers significant hearing loss. I&#39;ve had hearing aids since I was 10 years old, and as I&#39;ve grown up, it becomes more and more clear to me how little people understand about the importance of accessibility.</p>
<p>This post is a bit of a rant since all of the below have been said to me personally (all in one conversation, actually 🤦🏼‍♀️). These are all the things I wish I could&#39;ve said at the time, but you don&#39;t always get to speak out when you&#39;re like me. It&#39;s exhausting, and I&#39;m writing this post as an ask to <strong>please be more aware of the things you say and how you say them</strong>. You might mean well, but your words can still be incredibly hurtful.</p>
<h2 id="its-low-priority">&quot;It&#39;s low priority.&quot;</h2>
<p>That&#39;s pretty clear at this point, but why is that? What&#39;s your excuse? Is it too hard? Do you not want to spend the time learning about it? Are there not enough of us that exist for you to be concerned about our needs?</p>
<h2 id="we-need-to-beat-competitors-to-market">&quot;We need to beat competitors to market.&quot;</h2>
<p>Based on my experience in this industry, I wonder if <em>they</em> are even concerned about accessibility. Consumers value companies that value them. You should be trying to stand out beyond having a large number of software features.</p>
<h2 id="i-get-it-but">&quot;I get it, but...&quot;</h2>
<p>No, you obviously don&#39;t. If you did, you wouldn&#39;t be saying any of these things to my face. You either think you&#39;re super woke <em>or</em> you completely forgot that you&#39;re talking to a disabled person. I&#39;m kind of afraid of how you talk about disabled people when you&#39;re away from us.</p>
<h2 id="theres-no-point-if-no-one-is-using-it">&quot;There&#39;s no point if no one is using it.&quot;</h2>
<p>So, when people start using it, how do you plan on figuring out how many of them need a more accessible tool if we can&#39;t actually use it to tell you? We don&#39;t have the time for you to play catch up. We&#39;ll just go somewhere else.</p>


<p>Sometimes, you need a day. When you have a job in tech, the amount of available knowledge to us can both incredible and staggering. We fear to look unintelligent to our peers and colleagues, so feel obligated to learn everything we can. The desire to learn is not the issue here, though. What&#39;s important to remember, is that it&#39;s impossible to learn <em>everything</em>.</p>
<p>You can spend hours on end reading up on the newest frameworks and testing them out, but you know what? That framework will still be there tomorrow. You don&#39;t have to spend every waking or free hour writing code. I&#39;m <em>not</em> saying you should procrastinate learning or <a href="https://www.amazon.com/gp/product/B007A4SDCG/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&amp;psc=1">give in to Resistance</a>. All I&#39;m saying is, really listen to your body. If you&#39;re falling asleep while sitting at your desk or on the couch, it&#39;s probably time to take a nap or go to bed. If it&#39;s taking you 3 or 4 times as long to complete a task because you&#39;re feeling anxious, it&#39;s probably time to step away.</p>
<p>Don&#39;t be afraid to put some things down for a minute. Your best work is done when you&#39;re feeling your best. But if you can&#39;t put the things down right now, make sure you are <a href="https://ashleemboyer.com/don-t-forget-to-take-breaks">taking breaks</a>. Please don&#39;t put your own health on the line for this. One day will not put you behind. Care for yourself. You deserve it.</p>


<p>Do you want to know what I most often forget to do when I&#39;m working really hard? <em>I forget to eat.</em> That&#39;s a funny thought at first. Like, how do you forget something so vital to your existence? (I have zero ideas, so please tell me if you know the answer. My stomach will appreciate it.)</p>
<p>My point is, I get it. It&#39;s hard to take breaks and for various reasons. We often feel a ton of pressure to get all of our work done as quickly as possible. Guess what? It&#39;s never done. Ever. If you work in a food service business, there are always people wanting food. If you work on a support call line, there are always people needing help. If you write software for a living, there are always people asking for more features or telling you how you need to do better.</p>
<p>What do these examples have in common? They&#39;re focused on other people. Most of us are happy giving our time and effort to others and we don&#39;t want to let them down. If you&#39;re like me, you try your hardest to keep everyone happy, and might even put others&#39; happiness and well-being before your own.</p>
<p>Let&#39;s do less of that. Take care of yourself too. It&#39;s not one bit selfish to take the time you need to do whatever it is that&#39;ll help you refresh (as long as you aren&#39;t hurting anyone or yourself!). You&#39;ll be in much better shape to do you your job effectively.</p>
<p>Here are a few of my own suggestions you might want to try when you need a break:</p>
<ul>
<li>Take a 5-minute walk outside or around the office</li>
<li>Stand up and do a few stretches by your desk</li>
<li>Have a snack (or the meal you forgot about 😅)</li>
<li>Spend a few minutes just focusing on your breathing</li>
<li>Drink a glass of water or a cup of tea</li>
</ul>
<p>If you have any of your own suggestions you&#39;d like to share, please do leave them in the comments or <a href="https://twitter.com/ashleemboyer">send me a tweet</a>.</p>


<p>Why, yes, I would love to be done with the set up of my sites so I could focus more on the side projects I want to post on my portfolio.</p>
<p><em>Didn&#39;t you</em> just <em><a href="https://ashleemboyer.com/neither-you-nor-your-work-has-to-be-perfect">post about perfectionism</a> yesterday?</em></p>
<p>Sure did! But this is different. Software will forever be a road with many twists, turns, and hills. 😉</p>
<p>In all seriousness, I hadn&#39;t tried Gatsby out before publishing the current Angular version of my sites. I finally gave in over this past weekend and decided to give it a go. It was SO. FUN. <strong>First of all</strong>, their documentation is excellent. They explain things well enough that people with any level of coding experience can work out what to do.</p>
<p><strong>Second of all</strong>, the framework is just incredibly easy to use. Make some files in a well-named directory, and you have some magical pages. You can make pages <em>dynamically</em> too, which is one of the reasons I&#39;m switching.</p>
<p><strong>Finally</strong>, it&#39;s just too easy to do everything you want using their plugins. For example, with the <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet"><code>gatsby-plugin-react-helmet</code></a> plugin, you can handle SEO <em>and</em> Open Graph metadata dynamically. Which means you can have cool Twitter cards with images when you share your posts in a tweet. Which blows my mind! <em>(Is this possible in Angular? Too late for me, but maybe someone else could use that knowledge.)</em></p>
<p>And let&#39;s be honest, I just want to play around with Gatsby some more. You see a ton of people who use it for their blog sites, so I want to take that information and use it to challenge myself to make something that&#39;ll really stand out. 💪🏻</p>
<p>So, what about you? Do you use Gatsby for your sites, or do you plan to? I&#39;d love to hear about your projects in the comments or <a href="https://twitter.com/ashleemboyer">on Twitter</a>.</p>


<p>Let&#39;s face it: nothing you make will ever be absolutely perfect. Some people may not like the final product. Maybe you could remove a paragraph or two from your blog post or reword a few sentences. Your code could probably be refactored in a few different places. That drawing might look cleaner if you erase a couple of smudges.</p>
<p>We all know what happens to projects once we start falling down these rabbit holes. &quot;I&#39;ll just spend a couple of minutes fixing this little thing,&quot; can turn into a few hours or longer if you&#39;re not careful. In my experience with code, it could take even longer because you might accidentally break something totally different while trying to clean up a few functions.</p>
<p>Obviously, there&#39;s a time and a place for everything. Projects put you through various phases of pressure. Sometimes, you don&#39;t have the chance to make the code as beautiful as you want. Functionality is almost always more important because your client probably won&#39;t ever see your code. All they care about is that their product works well. So, when it comes time to punch, try not to worry too much about making the code perfect.</p>
<p>Rather, make some quick notes about where the code needs some help and what you might to do make it better. Hopefully, you can go back later and make the improvements, but if that isn&#39;t the case, you can either pass those notes along to the next person or use them to explain what you learned about the project experience. People expect you to learn more than anything. They will value the experience you have to share.</p>


<p><em>Originally written in late February 2019</em></p>
<p>The unknown is absolutely terrifying, probably because we can&#39;t control what we don&#39;t know. But have you ever taken the time to think about how it feels to have all the information you need about something and still know you can&#39;t control it? It&#39;s terrifying <em>and</em> infuriating.</p>
<p>Next week is the beginning of a totally new challenge for me. I&#39;ll be taking a class ~2 hours away from my job, and I have to change my work schedule to accommodate for the commute. 4 days per week, I&#39;ll be working from 6am - 2pm and then traveling to a lecture that lasts less than an hour.</p>
<p>Most of my fear about how the next 3 months will go has manifested as anger at the past. I think a lot about all the things that could and <em>should have</em> gone differently for me. When I went to campus a few weeks ago in preparation for the term, I couldn&#39;t help but walk the hallways feeling sad for my younger self. She deserved so much better than she got at the time.</p>
<p>Then I think about where I am now. I live with my best friend and the life we&#39;ve built together is something beyond I ever dreamed. We have a lovely home and handsome pup we share it with. The past year has involved so much growth in our relationship and I&#39;ve never connected with another human more.</p>
<p>What if just one thing had gone differently while I was in college? Would I still be where I am? I probably wouldn&#39;t be the same person. All I know about right now is that am completely content with my life and my relationship with myself.</p>
<p>It took a while for everything to feel OK. But it got there, and I made it too. I have arrived and I am resting for the next trip. Nearly a year of rest has given me the space to realize that it was definitely OK to be scared all those times.</p>
<p>Fear keeps us moving, whether or not it&#39;s in the right direction. What&#39;s important is that we look at our surroundings periodically to make sure we&#39;re on the right track. When you see something scary looking you dead in the eyes, just keep faith that you <em>will</em> be OK.</p>
<p>Everything will turn out exactly as it should.</p>


<p>The vast knowledge of the tech world can be so overwhelming. People throw out buzzwords all the time on Twitter: Kubernetes, Rails, React, Angular, Elixir, etc. What are all of these things and how does everyone else know about them?</p>
<p>If you&#39;re like me and don&#39;t know that many people in your area who are part of the same industry, it can be hard to figure out what frameworks everyone is hyping up through regular discussion. It doesn&#39;t have to be that hard, though. The internet is <em>right here</em>! You might be wondering, &quot;But how am I supposed to know what words to Google for results about things I have no clue about?&quot;</p>
<p>It&#39;s so easy, you already have the answer in your head. Just go over to a job search site (I&#39;m recommending <a href="www.glassdoor.com">Glassdoor</a> because it helps you get a good idea of salaries and whether or not companies are credible), search for either your current job title or the one you&#39;re interested in getting, then grab some good job listings.</p>
<p>You&#39;ll want to look at listings for positions that are higher than your current one. For example, being a junior-level front-end web developer, I might look at some senior-level positions. As another example, I&#39;m really interested in learning more about web UI/UX, but don&#39;t know any of the terminology or what jobs with that focus even look like. I might search for &quot;UX Researcher&quot;, &quot;UX Designer&quot;, or &quot;UX Intern&quot; in that case.</p>
<p>Use all of these flashy and intimidating job listings to your benefit. The more buzzwords, the better. Also, don&#39;t be afraid to dream big. Who knows what you may come across?</p>


Ashlee M Boyer

Journey of a Disabled Web Developer

My Writing and Planning Process

Build a Blog Site with Next.js and Firebase Part 5 - Editing & Deleting Posts

Build a Blog Site with Next.js and Firebase Part 4 - Adding Authentication

Build a Blog Site with Next.js and Firebase Part 3 - Reading Each Post

Build a Blog Site with Next.js and Firebase Part 2 - Creating New Posts