<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>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>


<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>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>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>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>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>


Ashlee M Boyer

Posts with the "web-development" tag

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

Build a Blog Site with Next.js and Firebase Part 1 - Getting Set Up