rss.xml

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">

<channel>
    <title>Travis Southard Blog</title>
    <link>https://travissouthard.com/</link>
    <description>
        Travis Southard is a software engineer, cyclist, and artist living in Philadelphia, PA
    </description>
    <image>
        <url>https://travissouthard.com/assets/images/art/headshot-32.png</url>
        <title>Travis Southard Blog</title>
        <link>https://travissouthard.com/</link>
        <width>144</width>
        <height>144</height>
    </image>
    <language>en-us</language>
    <pubDate>Fri, 14 Mar 2025 22:55:00 GMT</pubDate>
    <lastBuildDate>Fri, 14 Mar 2025 22:55:00 GMT</lastBuildDate>
    <atom:link href="https://travissouthard.com/rss.xml" rel="self" type="application/rss+xml" />
    
        <item>
            <title>The Rhythm of the Work</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/profile2025.png&quot; alt=&quot;Me smiling in a green sweater in front of a green block wall&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                I started a &lt;a href=&quot;https://travissouthard.com/resume&quot;&gt;new role&lt;/a&gt; at &lt;a href=&quot;https://clsphila.org&quot; target=&quot;_blank&quot;&gt;CLS&lt;/a&gt;
                at the beginning of the year. My previous supervisor, Nate, moved on to work at a new workplace, and now
                I am the sole developer at CLS. In fact, I am now a &lt;em&gt;Senior&lt;/em&gt; Developer &amp; Data Analyst. It&apos;s
                certainly been an adjustment to be managing our projects, administering our case management system, and
                being my own project manager. But I am making it happen and have finally gotten into a groove.
            &lt;/p&gt;
            &lt;p&gt;
                I don&apos;t think I&apos;ll be &lt;em&gt;comfortable&lt;/em&gt; with managing all these projects until summer (hopefully),
                but I have found the rhythm of the work. Juggling projects and having many different things to work on
                is fun for me and thrilling, for better or worse. The projects themselves are often exciting for the
                tech they use, the topics they address, or even just being a satisfying new way to interact with a
                tedious task. I&apos;ve been &lt;em&gt;busy&lt;/em&gt; but not overwhelmed.
            &lt;/p&gt;
            &lt;p&gt;
                I&apos;m also adjusting to the &lt;em&gt;Senior&lt;/em&gt; in the title too. It certainly fits the work I&apos;m doing and all
                of the tasks I need to keep up with to make the work happen, but I&apos;m not sure yet if it fits
                &lt;em&gt;me&lt;/em&gt;. Only two years ago did I start to feel solidly in the &quot;midlevel&quot; category. But I have
                learned throughout my career that meeting the needs in the space is the work. A bike needs fixing. Data
                needs to be delivered to DHS. A spreadsheet has gotten too complicated and should be a database instead.
                They need to get done, so I need to make them happen. Regardless of my feelings about new words in my title.
            &lt;/p&gt;
            &lt;p&gt;
                Over the last ten weeks, I have felt myself leveling up and it feels fantastic. Already I was grateful
                to have a job where I get to work on cool projects that help Philadelphians, or at least help our
                caseworkers help Philadelphians. Five days a week I get to do meaningful and autonomous work. A dreamy
                state for a worker. None of this is to gloat, rather to express gratitude and reflect on how I&apos;m
                growing as a developer. I am genuinely enjoying this job and especially the work I get to do.
            &lt;/p&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/the-rhythm-of-the-work.html</link>
            <pubDate>Fri, 14 Mar 2025 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/the-rhythm-of-the-work.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>It&apos;s okay to let things end</title>
            <description>
  
            &lt;p&gt;
                Last week, I was listening to Spotify for the last time. Already I was planning a breakup and starting
                to collect more physical and digital albums, but this particular session was genuinely the proverbial
                last straw. I had queued up a few albums while I was working. I had planned that when they ended I would
                wrap up what I was working on and go take a walk. But after the last album ended and the queue was over,
                Spotify had already loaded another album I did not choose into the &quot;Next Up&quot; section underneath (and
                separate from?) the queue. Because it was by the same artist as the previous one, it took me a few songs
                to notice.
            &lt;/p&gt;
            &lt;p&gt;
                I had had a plan for how I wanted to listen and Spotify overwrote that plan and overstayed the party. It
                all but refused to let me wrap up, sit back in the silence after the album ended, feel the music linger
                in me a moment, and then get up to take a walk. This is part of a pattern that has been wearing on me a
                long time, but I didn&apos;t know the exact issue yet: Most contemporary media platforms don&apos;t let things
                end.
            &lt;/p&gt;
            &lt;p&gt;
                I often have a slight tension with friends at a movie theatre about 30-60 seconds into the end credits
                of a movie. The sometimes-animated cast and highlighted crew names has ended and the white names and
                titles on a black background is scrolling up. My friends have all stood and have started to grab their
                things and I am planted watching the text scroll up and listening to the credits music. There&apos;s a pause
                before we clock each others&apos; intention and plead with each other, first silently, then out loud to
                persuade the other to join us. My mom often points out that I have always been like this. That, long
                before blockbusters were doing end-credits scenes, I always sat through all the way until the final
                production card flashed.
            &lt;/p&gt;
            &lt;p&gt;
                For me, that&apos;s a part of the movie experience. More for the soundtrack than anything else, but also
                because I was always fascinated with how movies are made and was genuinely curious what people worked
                on. It&apos;s also a great time to sit in the context of the movie with your friends and talk about what
                stood out to you, good or bad, or just to process what you just took in for 90 to 200 minutes.
            &lt;/p&gt;
            &lt;p&gt;
                Watching movies and series on streaming platforms is such an obvious part of this &quot;Don&apos;t let it end&quot;
                problem: As soon as the credits roll, they are minimized to a corner, a new flashy poster (or trailer in
                the worst sins) is put center stage and a 5-10 second timer starts winding up in the lower right corner.
                By the time you get a hand on a remote or keyboard, the next thing is already playing. The music and
                moment are interrupted and thrown away. Instead of reflecting on themes, scenes, or costumes, your brain
                has been hijacked by either the new movie or the &quot;Oh wait, shit, where is the remote?&quot; scramble. &quot;The
                content is dead! Long live the content!&quot;
            &lt;/p&gt;
            &lt;p&gt;
                YouTube and other video streaming platforms also have by-default autoplay. As soon as the video is over,
                you often aren&apos;t even given a timer and are just thrown into the next video they clumsily recommend.
                With a playlist along a series or theme it&apos;s one thing, but jumping from a quiet contemplation on the
                finer points of the &lt;a href=&quot;https://www.youtube.com/watch?v=2oqxqs2Q78c&quot; target=&quot;_blank&quot;&gt;80s/90s Ninja
                    Turtles Movies by Mikey Neumann&lt;/a&gt; to being screamed at about how Honey was a scam the whole time
                is horrifically jarring to put it mildly.
            &lt;/p&gt;
            &lt;p&gt;
                When I finish a book on my e-reader, Kobo immediately suggests the next book to read (often a sequel or
                thematically relevant), rather than just let me close it and stare out the window meditating on what I
                just finished reading. When you get to the end of the loaded posts on Tumblr or Reddit, the next page
                has already loaded for what is literally called &quot;Endless Scrolling.&quot; And yes, closing a tab, hitting the
                menu button, or putting the device down are certainly options. An even better option is turning off
                autoplay on everything you watch or listen with, but &lt;a
                    href=&quot;https://en.wikipedia.org/wiki/United_States_v._Microsoft_Corp.&quot; target=&quot;_blank&quot;&gt;the default
                    option matters&lt;/a&gt;. Also, please disable autoplay. It&apos;s so much better this way.
            &lt;/p&gt;
            &lt;p&gt;
                We don&apos;t have to design things this way. Granted, corporations are incentivized to keep people on their
                platforms for as long as possible to juice every last drop of advertising money and psychographic data
                out of each pair of eyeballs they come across, but even free software nonprofits like Mastodon or
                Pixelfed have endless scrolling by default. &quot;Opt out&quot; design for anything will almost always suck. Many
                people have no idea that some websites, apps, etc. even &lt;em&gt;have&lt;/em&gt; settings, let alone thinking to
                change them. We as developers, designers, writers, and creators can design for a better experience
                though. And we should.
            &lt;/p&gt;
            &lt;p&gt;
                It&apos;s okay to let things end. The album can end and you can sit while your brain finishes buzzing and you
                get up and do something else. The playlist of videos can end and you can look out the window, charmed
                by whatever you were watching. When the film ends, you can letthe credits roll and allow the ending
                music carry you out of that world and back into your own. When the book ends you can close it, sit with
                the texture of the pages in your hands, process the themes of the work and look around you, with
                different eyes than you had when you started. It&apos;s okay to let things end.
            &lt;/p&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/it's-okay-to-let-things-end.html</link>
            <pubDate>Wed, 12 Feb 2025 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/it's-okay-to-let-things-end.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Hourly Comics Day 2025</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/HCD25-1.JPG&quot; alt=&quot;Panel 1: 12am. POV of Alan and Ruby sitting in our living room. &apos;Talking about last night&apos;s plane crash&apos; Panel 2: 1-8am. A bunch of Zs in the dark. Panel 3: 8am. Travis showering (from the chest up). Panel 4: 9am. Travis sitting on the couch with a laptop next to a lampshade and cup of hot coffee. &apos;News + email + budget + puzzles + blog + more budget&apos;&quot;/&gt;
      &lt;/a&gt;
  &lt;img src=&quot;https://travissouthard.com/assets/images/art/HCD25-2.JPG&quot;
                alt=&quot;Panel 1: 10am. A scratchy looking Travis drawing this comic in a small sketchbook. &apos;Wow I am out of practice at drawing&apos; &apos;Still fun though&apos; Panel 2: 11am. &apos;Freshly toasted bagels from Downtime Bakery&apos; Panel 3: Noon. A view of the Wissahickon looking from the Kitchen&apos;s Lane Bridge. &apos;A walk in the Wiss&apos; Panel 4: Travis and Ruby as penguins. &apos;Forbidden Drive was slippery!&apos;&quot; /&gt;
            &lt;img src=&quot;https://travissouthard.com/assets/images/art/HCD25-3.JPG&quot;
                alt=&quot;Panel 1: 2pm. &apos;The BEST Grilled Cheese&apos; Panel 2: 3pm. &apos;Struggling at Balatro&apos; &apos;27 tokens (to illustrate my struggles)&apos; Panel 3: 4pm. Ruby and Travis at the thrift store comparing shirts to the Eagles logo fabric we got. &apos;But with one matches better?&apos; &apos;Thrifting clothes to Eagles up for the SUPER BOWL&apos; Panel 4: 5pm. Travis at a sewing machine facing away. &apos;Read the manual for the sewing machine so I could thread it&apos;&quot; /&gt;
            &lt;img src=&quot;https://travissouthard.com/assets/images/art/HCD25-4.JPG&quot;
                alt=&quot;Panel 1: 6pm. Travis standing in a long plaid shirt. &apos;The shirt I  picked is Loooooooong&apos; &apos;height of hands&apos; &apos;height of waist&apos; Panel 2: 7pm. Travis&apos; hands cutting the shirt. &apos;Gotta hem it and prep it&apos; Panel 3: 8pm. An Eagles logo with zigzag stitches holding it down. &apos;So we can add some DIY Eagles patches! From a rad fabric we got at Gaffney&apos;s&apos; Panel 4: 9pm. Ruby and Travis modeling their modified shirts. &apos;And look cute!&apos;&quot; /&gt;
            &lt;img src=&quot;https://travissouthard.com/assets/images/art/HCD25-5.JPG&quot;
                alt=&quot;Panel 1: 10pm. Travis drawing at a table again, but clearly improved drawing through the day. &apos;Remembering how to draw (kinda)&apos; &apos;Wis I skipped that mouth in the last one&apos; Panel 2: 11pm. Travis brushing his teeth. &apos;Winding down + getting ready for sleeps...&apos; Panel 3: Midnight. A bunch of Zs in the dark. Panel 4: &apos;A reflection: It&apos;s fun to make tangible things. Between sewing &amp; drawing today, I made things I am proud to show, even if both have errors or mistakes (heart)&apos;&quot; /&gt;
            &lt;p&gt;It&apos;s fun to make tangible things. Between sewing &amp; drawing today, I made things I am proud to show, even
                if both have errors or mistakes.&lt;/p&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/hourly-comics-day-2025.html</link>
            <pubDate>Sat, 01 Feb 2025 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/hourly-comics-day-2025.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>insteadofai.site</title>
            <description>&lt;a href=&quot;https://insteadofai.site&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/no-ai-big.png&quot; alt=&quot;A no robots sign very similar to a no smoking sign&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A webpage that lists resources to use instead of Generative AI.&lt;/p&gt;See the &lt;a href=&quot;https://github.com/travissouthard/insteadofai_site&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://insteadofai.site</link>
            <pubDate>Sun, 17 Nov 2024 05:00:00 GMT</pubDate>
            <guid>https://insteadofai.site</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>insteadofai.site icon</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/no-ai-big.png&quot; alt=&quot;A no robots sign very similar to a no smoking sign&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A 48x48 pixel image I made as the favicon for &lt;a href=&quot;https://insteadofai.site&quot; target=&quot;_blank&quot;&gt;insteadofai.site&lt;/a&gt;.&lt;/p&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/insteadofaisite-icon.html</link>
            <pubDate>Sun, 17 Nov 2024 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/insteadofaisite-icon.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Building the web I want to see</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/webring.png&quot; alt=&quot;A brick-like pattern of white rectangles with blue outlines, blue names like Ruby Gertz, Clotheshorse, and many other names of people and projects, plus each rectangle has blue labels with the topics each person/project covers&quot;/&gt;
      &lt;/a&gt;
  
        &lt;p&gt;
            &lt;b&gt;I have made a webring!&lt;/b&gt; This feels important to me as I try (along with many others) to build a better
            web. This was a project I have been meaning to take on for some time. I did start with a basic set of
            links to friends in the footer of my website, but I wanted to use it more to show the web I usually interact
            with.
        &lt;/p&gt;
        &lt;p&gt;
            I would still like to add a little flair and some organization to the webring page, but I am trying to build
            this website without delivering any JavaScript, if possible. I do think the current iteration could go into
            a &lt;code&gt;noscript&lt;/code&gt; block and then go and implement the immediate method I am thinking of. I did spend
            quite some time trying to use a &lt;a href=&quot;https://editor.p5js.org/travissouthard/sketches/RUw3LR7cIO&quot;
                target=&quot;_blank&quot;&gt;force-directed graph&lt;/a&gt; to help me layout the Venn-diagram-like design I was
            originally imagining. In this case, a &quot;Done is better than perfect&quot; approach had to be taken.
        &lt;/p&gt;
        &lt;p&gt;
            The web has &lt;a href=&quot;https://xoxofest.com/2024/videos/molly-white/&quot; target=&quot;_blank&quot;&gt;become less magical&lt;/a&gt;.
            There is &lt;a
                href=&quot;https://pluralistic.net/2024/04/24/naming-names/#prabhakar-raghavan&quot;
                target=&quot;_blank&quot;&gt;a lot of evidence&lt;/a&gt; pointing to search engines largely getting worse
            and nigh unusable and the state of the web (as most people use it) has become &lt;a
                href=&quot;https://twitter.com/tveastman/status/1069674780826071040&quot; target=&quot;_blank&quot;&gt;&quot;five websites, each
                consisting of screenshots of text from the other four.&quot;&lt;/a&gt;
        &lt;/p&gt;
        &lt;p&gt;
            I remember the web feeling very magical and largely found the best websites from word of mouth from people I
            knew. The exception to this largely was finding webcomics from the footers of &lt;a
                href=&quot;https://rice-boy.com/&quot; target=&quot;_blank&quot;&gt;webcomics&lt;/a&gt; &lt;a href=&quot;https://www.nedroid.com/&quot;
                target=&quot;_blank&quot;&gt;I&lt;/a&gt; &lt;a href=&quot;https://www.kcgportfolio.site/&quot; target=&quot;_blank&quot;&gt;was&lt;/a&gt; &lt;a
                href=&quot;https://www.octopuspie.com/&quot; target=&quot;_blank&quot;&gt;already&lt;/a&gt; &lt;a href=&quot;https://www.smbc-comics.com/&quot;
                target=&quot;_blank&quot;&gt;reading&lt;/a&gt;. Many of the comics I was reading would have a &quot;My friends&quot; section with
            links to their comics. Even then that felt very powerful and community-oriented, but as discovery and
            recommendation algorithms have dominated those five website we go to, that kind of list feels almost
            transgressive.
        &lt;/p&gt;
        &lt;p&gt;
            Facebook and Twitter both punish users for linking to anything that&apos;s outside their walled gardens.
            Instagram only allows for one external link per account (the famous &quot;link in bio&quot;), which has led to
            services like Linktree because of course we all have more than one link to share. But these are all
            platforms where, if you were to be banned, you would lose access to everything if it was the only place you
            kept your photos, videos, jokes, etc. Or &lt;a
                href=&quot;https://www.nytimes.com/2019/03/19/business/myspace-user-data.html&quot; target=&quot;_blank&quot;&gt;the site may
                have a catastrophic data failure&lt;/a&gt; and lose everything.
        &lt;/p&gt;
        &lt;p&gt;
            The method I have appreciated for avoiding getting shut out by some billionaire has been &lt;a
                href=&quot;https://indieweb.org/POSSE&quot; target=&quot;_blank&quot;&gt;POSSE&lt;/a&gt; (Publish (on your) Own Site; Syndicate
            Elsewhere). I post blogs, art, and projects on my own site first, then share them to social media I use.
            Having your own website is a way to have aesthetic control over your own space as well! Almost none of the
            large platforms allow you to customize your page with more than a profile picture, banner, and
            &lt;em&gt;MAYBE&lt;/em&gt; a highlight color. But those aeshetics matter. They help set us apart, express ourselves, and
            signal to others that we may be aligned just on sight.
        &lt;/p&gt;
        &lt;p&gt;
            Making a website can certainly seem daunting. You don&apos;t have to handcraft code for a website (though it is
            fun, and I like it myself). There are many WYSIWYG (What You See Is What You Get (pronounced &lt;em&gt;wizzy
                wig&lt;/em&gt;)) options out there from the big corporate spaces or more indie spaces like &lt;a
                href=&quot;https://noblogs.org/&quot; target=&quot;_blank&quot;&gt;NoBlogs&lt;/a&gt; or &lt;a href=&quot;https://neocities.org/&quot;
                target=&quot;_blank&quot;&gt;NeoCities&lt;/a&gt;. In an increasingly online space, having your own little place to call
            your own feels more and more necessary. And if you want to jump into the deep end, you could learn to code
            and also &lt;a href=&quot;https://github.com/iffybooks/host-a-website-at-home&quot; target=&quot;_blank&quot;&gt;how to self-host a
                website in your own home&lt;/a&gt;.
        &lt;/p&gt;
        &lt;p&gt;
            We all have cool businesses, practices, hobbies, and more that we would like to share with others, so we
            should have control over how we present that, and how we connect to each other. So please, build your own
            sites. Make them how you want them (which may include making something crazily maximalist, go for it), and
            link to your friends and the people whose work you like most. The &lt;a href=&quot;https://indieweb.org/&quot;
                target=&quot;_blank&quot;&gt;Indie Web&lt;/a&gt; is already a growing movement and there&apos;s some great things being built.
            The future of the web is many more small connected sites each with cool, niche, resource-rich pages.
        &lt;/p&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/building-the-web-i-want-to-see.html</link>
            <pubDate>Sun, 20 Oct 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/building-the-web-i-want-to-see.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Over the Garden Wall poster</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/over_the_garden_wall_poster.png&quot; alt=&quot;A pixel art image of a pumpkin man, a horror creature, many cartoon faces including a frog, and two boys and a bird facing them all.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;Very excited to watch &lt;em&gt;Over the Garden Wall&lt;/em&gt; again with some friends! This is easily one of my favorite pieces of media in general.&lt;/p&gt;
                &lt;p&gt;It is a wonderful piece of Americana and plays with nostalgia in a delightfully bittersweet way. Beware the beast!&lt;/p&gt;
                &lt;p&gt;This piece was a little more of a challenge with wanting to use a 1-point perspective and shading, but I am happy with how it came out! I used a great  
                    &lt;a href=&quot;https://lospec.com/palette-list/hidden-library&quot; target=&quot;_blank&quot;&gt;color palette by Pixel Hoo&lt;/a&gt;!
                &lt;/p&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/over-the-garden-wall-poster.html</link>
            <pubDate>Tue, 15 Oct 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/over-the-garden-wall-poster.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Underhill from Red Mars</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/red-mars.png&quot; alt=&quot;A pixel art image of an astronaut in a spacesuit looking down a path in a Martian settlement. The path ends at a massive salt pyramid with a tiny figure on top and one blue dot among the stars.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;I&apos;ve been reading the &lt;a href=&quot;https://en.wikipedia.org/wiki/Mars_trilogy&quot; target=&quot;_blank&quot;&gt;Mars Trilogy&lt;/a&gt; by Kim Stanley Robinson. I&apos;ve been loving these books and flying through them. This was how I imagined the initial settlement, Underhill, with it&apos;s barrel-shaped shelters and giant salt pyramid.&lt;/p&gt;
                &lt;p&gt;I also read his more recent &lt;a href=&quot;https://www.orbitbooks.net/orbit-excerpts/the-ministry-for-the-future/&quot; target=&quot;_blank&quot;&gt;&lt;em&gt;The Ministry for the Future&lt;/em&gt;&lt;/a&gt;, which I would highly recommend for some great speculative fiction on addressing the climate crisis.&lt;/p&gt;
                &lt;p&gt;This piece was a little more of a challenge with wanting to use a 1-point perspective and shading, but I am happy with how it came out! I used a great  
                    &lt;a href=&quot;https://lospec.com/palette-list/coldwood8&quot; target=&quot;_blank&quot;&gt;color palette by Anubi&lt;/a&gt;!
                &lt;/p&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/underhill-from-red-mars.html</link>
            <pubDate>Thu, 15 Aug 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/underhill-from-red-mars.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Your project is worth it</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/grinduro-2024.png&quot; alt=&quot;A dithered photo of Travis riding a mountain bike in the woods&quot;/&gt;
      &lt;/a&gt;
  
                &lt;p&gt;
                    After reading a blog post from &lt;a href=&quot;https://www.solarshades.club/p/against-thermochauvinism&quot;
                        target=&quot;_blank&quot;&gt;Andrew Dana Hudson about thermochauvinism&lt;/a&gt;, I have begun referring to July as &quot;Hot
                    Winter,&quot; a time of year when I spend most of my time indoors because it is uncomfortable and even dangerous
                    to be outside. I tend to spend my free time similarly to actual winter: video games, home DIY, reading,
                    taking care of house plants, and wishing I could ride my bike or work in my garden.
                &lt;/p&gt;
                &lt;p&gt;
                    As soon as the heat broke last week I went out and went on a longer mountain bike ride than usual. It felt
                    wonderful to be out on the trails, using my body, and just gazing at water, birds, and plants. Riding a bike
                    is almost always just a shortcut to feeling better for me. Physical exertion and fresh air do wonderful for
                    my dopamine producers.
                &lt;/p&gt;
                &lt;p&gt;
                    In the first week of June, I rode with a friend on &lt;a href=&quot;https://grinduro.com/pennsylvania/&quot;
                        target=&quot;_blank&quot;&gt;Grinduro PA&lt;/a&gt;, a 70(-ish) mile gravel and single-track ride in and out of Loyalsock
                    State Forest. It was a challenge but I was pretty in shape for it, though I could certainly have used more
                    training on climbing specifically. It was a great time and worth doing if for nothing else than reminding me
                    I am capable and enjoy days where &quot;all you have to do is ride you bike&quot; as one of my Bike &amp; Build teammates
                    puts it.
                &lt;/p&gt;
                &lt;p&gt;
                    Having done that ride towards the start of the summer has been good for me in riding casually afterward and
                    having a recent difficult accomplishment to comapre against when a ride or section of a ride starts feeling
                    like a slog. I have also been feeling this in my day job lately. Getting stuck on a particular issue and
                    strugglig to find a solution, but pushing through with memories of solving past tough problems or errors and
                    remembering the satisfaction of having beat those.
                &lt;/p&gt;
                &lt;p&gt;
                    That is such a hard thing to overcome when working on any project: A problem without an obvious solution and
                    little findable community support. These are awful and can end a project without enough skill, motivation,
                    or some combination of the two. I have always struggled with asking for help and been too stubborn with
                    myself that I can &lt;em&gt;definitely&lt;/em&gt; find the answer on this next search around. Luckily I have great
                    colleagues and peers who are happy to work through a problem with me.
                &lt;/p&gt;
                &lt;p&gt;
                    For other developers (or anyone working on any shape of project): Please ask your peers, community, and
                    colleagues for help. Your project is worth completing &lt;em&gt;or at least worth getting to a proof-of-concept
                        well enough to know it&apos;s worth abandoning&lt;/em&gt;.
                &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/your-project-is-worth-it.html</link>
            <pubDate>Sun, 21 Jul 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/your-project-is-worth-it.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>We cannot afford to skip repairs</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/june-flowers.png&quot; alt=&quot;A dithered image of a flowering sage plant in my backyard&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Maintenance and repair are essential to a more sustainable, and frankly pleasant world. Well-maintained
                bikes feel, sound, and ride better. Well-maintained roads are easier and safer for everyone to navigate.
                Well-maintained gardens look and smell better and are more productive. Maintenance is boring and tedious
                though compared to starting fresh. Repairing a broken thing is harder than repairing something regularly
                maintained.
            &lt;/p&gt;
            &lt;p&gt;
                What I particularly find difficult is perceiving that something that has gradually worn over time is at an
                optimal time to repair. A squeaky bike chain is past time for cleaning and lubing. A thirsty throat is
                already partially dehydrated. Those are easy fixes though usually, and if you already have the supplies,
                nearly instant repairs to make. What&apos;s harder is seeing pants wear out, masonry decay, or street markings
                disappear. Some of these need specialized skills, licenses, or interaction with government. These take more
                time and care and sometimes convincing the maintainer it is the time to make that repair.
            &lt;/p&gt;
            &lt;p&gt;
                Especially in the case of city, county, or state infrastructure, convincing the city, county, or state that
                the time has come to make a repair can be a herculean task. Often the &quot;We can&apos;t afford to do it now&quot; excuse
                leads to putting off the repair, only adding to the cost. We see this in health insurance plans as well,
                where the insurance companies refuse to pay for preventative healthcare, leading to suffering, and often
                more expensive and more painful medical interventions. Typically, if you can&apos;t afford to make the repair,
                you definitely can&apos;t afford to skip the repair either.
            &lt;/p&gt;
            &lt;p&gt;
                I am currently thinking about this because of reading the great work by &lt;a
                    href=&quot;https://www.ifixit.com/Right-to-Repair&quot; target=&quot;_blank&quot;&gt;iFixit&lt;/a&gt;, &lt;a
                    href=&quot;https://pluralistic.net/&quot; target=&quot;_blank&quot;&gt;Cory Doctorow&lt;/a&gt;, and others in the ongoing fight for
                the right to repair our own things. But also because my house does need a masonry fix, and we have some
                bikes in our house past the need for some regular maintenance that I have the skills, but haven&apos;t made the
                time for yet. The longer I wait on any of these, the harder it will be to get those things back into good
                repair (and the more expensive it will be).
            &lt;/p&gt;
            &lt;p&gt;
                For example, I was letting a bike chain stay squeaky for a little too long. Part of this was not noticing
                until I was leaving for work and not wanting to take the time to take care of it so I could get to work
                faster. But then I would just store the bike when I got home and not pay attention til the next day riding
                out again. I managed a bike shop for years and certainly know better, but it is incredibly easy to just let
                those little things slide. We tell ourselves &quot;It won&apos;t hurt that much really.&quot; But that does build up over
                time and effectively shortens the lifespan of the chain, meaning I may have to prematurely buy a new one.
                Grand scheme of things, it won&apos;t cost that much, but over the lifetime of the bike (I plan to ride that
                thing forever), I will likely spend more on chains than I would have to if I was keeping it regularly lubed
                and clean. (I recommend every two weeks, 100 miles, or rainy ride, whichever comes first) And once I did
                lube the chain, it was easier to ride!
            &lt;/p&gt;
            &lt;p&gt;
                In Pennsylvania, due to some large federal money coming in, we are finally &lt;a
                    href=&quot;https://whyy.org/articles/buttigieg-touts-1-6-billion-for-pa-bridges-as-part-of-biden-infrastructure-bill/&quot;
                    target=&quot;_blank&quot;&gt;making some long-past-needed
                    repairs on bridges&lt;/a&gt; that have been failing evaluations for years. These repairs are far more
                expensive than if we were
                doing regular maintenance on them. But like I said above, maintenance is boring. New bridges are exciting.
                Or &lt;a
                    href=&quot;https://www.inquirer.com/news/i95-philadelphia-schedule-construction-reopen-detours-lanes-20230621.html&quot;
                    target=&quot;_blank&quot;&gt;novel ways to repair a collapsed highway bridge in less than two weeks&lt;/a&gt; when it also
                took two years to
                &lt;a href=&quot;https://www.phila.gov/2022-09-09-wissahickon-valley-park-trail-bridges-to-reopen-on-september-16/&quot;
                    target=&quot;_blank&quot;&gt;fix riverpath bridges with smaller repairs&lt;/a&gt; or more years than that to update the
                same highway.
            &lt;/p&gt;
            &lt;p&gt;
                In a &lt;a href=&quot;https://travissouthard.com/art/abolish-landlords.html&quot; target=&quot;_blank&quot;&gt;recent piece of art I made&lt;/a&gt;, I expressed
                that it will be better for everyone to own their own home, but with prospective homeowners in Philadelphia
                &lt;a href=&quot;https://whyy.org/articles/philadelphia-real-estate-market-spring-prices-mortgage-rates/&quot;
                    target=&quot;_blank&quot;&gt;needing an annual income of $75,000 to be able to buy and keep a home&lt;/a&gt; (including
                maintenance costs), that
                means that the &lt;a
                    href=&quot;https://www.census.gov/quickfacts/fact/table/philadelphiacitypennsylvania,US/PST045222&quot;
                    target=&quot;_blank&quot;&gt;50% of Philadelphians who make less than $57,537 each year&lt;/a&gt; just do not have that as
                an option. Housing costs must come down. Homelessness is a policy choice. Repairing that worn-out spot of
                our society will certainly cost us so much more than if we had always ensured people would be housed and
                fed, but it is still a necessary repair.
            &lt;/p&gt;
            &lt;p&gt;
                Maintenance is boring and tedious but essential to a more sustainable and more pleasant world. We constantly
                feel as if we can&apos;t afford to make the repairs, but we definitely can&apos;t afford to skip the repairs either.
            &lt;/p&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/we-cannot-afford-to-skip-repairs.html</link>
            <pubDate>Sun, 02 Jun 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/we-cannot-afford-to-skip-repairs.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>My Kingdom for a Paper Map</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/initiation-well.png&quot; alt=&quot;A dithered view from the bottom of the Initiation Well at Quinta de Regaleira in Portugal. The well is a large stone sprial staircase with ornate arches twisting up to the sunlight. Strongly recommend visiting if you can.&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Recently returned from a ten day vacation in Lisbon, Portugal to celebrate my mother-in-law&apos;s birthday. This
                is the longest trip I&apos;ve taken since Ruby and I spent three weeks in Ireland for our honeymoon in 2022. We
                stayed in a cute apartment with a garden and walking proximity to the city center. In and around Lisbon, we
                were able to walk and ride trains and busses to most of the places we wanted to visit and that was such a
                great way to get to know the city. Any time we took a cab or ride share, I would very quickly lose my sense
                of space.
            &lt;/p&gt;
            &lt;p&gt;
                We visited a few places like &lt;a href=&quot;https://en.wikipedia.org/wiki/Sintra-Cascais_Natural_Park&quot;
                    target=&quot;_blank&quot;&gt;Sintra National Park&lt;/a&gt;, the &lt;a href=&quot;https://en.wikipedia.org/wiki/Lisbon_Oceanarium&quot;
                    target=&quot;_blank&quot;&gt;Oceanarium&lt;/a&gt; and even some of the airports we flew
                through where having a physical map would have helped. Since my &lt;a href=&quot;https://www.thelightphone.com/&quot;
                    target=&quot;_blank&quot;&gt;dumb phone&lt;/a&gt; only works in North America, I brought my iPhone I used to use with me to
                make sure I could communicate easily with my travel companions. So I had access to mobile map apps, but
                those maps do not often have the context needed to navigate from one airport terminal to another. Each of
                these places had some sort of &quot;you are here&quot;-style map that I could take a photo of and reference. But
                trying to pinch to zoom to find small features in a photo of a map taken through glass is a rough user
                experience to say the least.
            &lt;/p&gt;
            &lt;p&gt;
                The &lt;a href=&quot;https://en.wikipedia.org/wiki/Quinta_da_Regaleira&quot; target=&quot;_blank&quot;&gt;Quinta de Regaleira&lt;/a&gt;
                palace and ground had a QR code with a &lt;a href=&quot;https://www.regaleira.pt/en/mapa&quot; target=&quot;_blank&quot;&gt;PDF
                    map&lt;/a&gt; that was much clearer to use but still had the pinch to zoom issue of zooming in to see small
                things but losing the overall layout. What I really wanted in each of these circumstances, was a
                theme-park-style paper map that would give a sense of scale for the places and provide place-specific
                context for where to find restaurants, features, toilets, and transit routes. Near the Sintra train station
                one kiosk had these displayed but was closed so we couldn&apos;t grab one.
            &lt;/p&gt;
            &lt;p&gt;
                Great maps like these were regularly posted around on small billboards but were unavailable to carry. And
                yes, handing these out by default to every visitor to a place would create a lot of waste since not everyone
                is a map nerd like me who will frame and hang maps on their walls. But having these available to visitors by
                request or purchase would be a good compromise.
            &lt;/p&gt;
            &lt;p&gt;
                Having a paper map in a park or region really adds to the sense of exploration that many tourists and
                visitors want to experience. Of course, most places are set up with a plethora of wayfinding that means
                moving around is more navigating than exploring uncharted territory, but the place is new to that visitor so
                the feeling is still one of exploration. Filling out the map in their mind by connecting their understanding
                of the symbols on the map with the physical features in a new-to-the-visitor place is a satisfying
                experience.
            &lt;/p&gt;
            &lt;p&gt;
                The City of Philadelphia recently reprinted an &lt;a
                    href=&quot;https://www.phila.gov/media/20220511131100/Bicycle-Map_2022.pdf&quot; target=&quot;_blank&quot;&gt;updated bike
                    infrastructure map&lt;/a&gt; that they stopped printing in 2015 or 2016, and having a new tangible map of the
                city felt so special and I was so excited to see it in my local bike shop. One of the owners knew I would be
                excited by it and set one aside for me. I have a strong mental map in my head of our bike lanes already
                (complete with my own (sometimes snarky) notes and updates), but having that map to look at, point to, mark
                on, and show guests is such a valuable asset.
            &lt;/p&gt;
            &lt;p&gt;
                Making a good map is hard, and like drawing anything else, the choices involved in what to include or omit
                are daunting and require expertise of the thing itself and the experience of viewing that map or drawing.
                What features, colors, icons, etc. will all also vary depending on who the map is for. The best map of a
                single place will be incredibly different for a tourist, a courier, or a telecommunications engineer.
            &lt;/p&gt;
            &lt;p&gt;
                Maybe its just because I use a dumb phone now, or maybe I have always been this nerd, but I really value
                having a paper map to walk around a place with to navigate and also as a tool to enhance my mental map. I&apos;d
                like to make more maps for fun, especially something in the realm of the &lt;a
                    href=&quot;https://phillybookstoremap.com/&quot; target=&quot;_blank&quot;&gt;Philly Bookstore Map&lt;/a&gt; or theme park maps of
                neighborhoods. I would especially like to learn to design maps for print. I have experience designing maps
                for the web, but recently learned how much harder it is to design a static map since you can&apos;t click an icon
                on a paper map for more context. Do you know any good map design books?
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/my-kingdom-for-a-paper-map.html</link>
            <pubDate>Mon, 27 May 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/my-kingdom-for-a-paper-map.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>My interest in Solarpunk</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/lisbon-view.png&quot; alt=&quot;A dithered view of Lisbon showing its castle, hills, and many homes and buildings in pastel colors with orange tile roofs&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Over the past few years, I have been taking in a lot of &lt;a
                    href=&quot;https://www.youtube.com/watch?v=hHI61GHNGJM&quot; target=&quot;_blank&quot;&gt;&lt;em&gt;Solarpunk&lt;/em&gt;&lt;/a&gt; influences.
                Solarpunk is a movement/genre/aesthetic/practice based around ultra-sustainability, averting climate climate
                catastrophe, and community-centric social organization that has been growing and evolving over the past 15
                years, largely starting in Latin America, and I first came across it with Andrew Sage&apos;s &lt;a
                    href=&quot;https://www.youtube.com/watch?v=hHI61GHNGJM&quot; target=&quot;_blank&quot;&gt;&quot;What is Solarpunk&quot;&lt;/a&gt; video and got
                such a craving for more things like this.
            &lt;/p&gt;
            &lt;p&gt;
                Already, I had been looking for more art and literature that makes sustainability look desirable in a
                way that wasn&apos;t just corporate greenwashing, but also wasn&apos;t just the &lt;a
                    href=&quot;https://grist.org/climate/why-is-cottagecore-so-white/&quot; target=&quot;_blank&quot;&gt;cottage-core fantasy&lt;/a&gt;
                or the machismo-filled bushcraft stuff. I read a lot of dystopian fiction as a teen and young adult, and
                like many others, I tired of that sort of imagery being a warning and co-opted by venture capital funded
                companies. I wanted something that could actually serve as both a cultural escape and as a playbook of how
                to improve our odds as a society against climate damage, rising fascism, and increasing apathy in the face
                of both.
            &lt;/p&gt;
            &lt;p&gt;
                Solarpunk has already been included in &lt;a href=&quot;https://www.youtube.com/watch?v=UqJJktxCY9U&quot;
                    target=&quot;_blank&quot;&gt;greeenwashing campaigns of corporations&lt;/a&gt; and is often reduced to &quot;glass towers with
                greenery poking out,&quot; but is, and can be so much more. I enjoy reading Solarpunk books like
                &lt;em&gt;Walkaway&lt;/em&gt; and &lt;em&gt;Inifinite Detail&lt;/em&gt; (both of which have excellent playbooks for decentralized,
                community-based living) as well as art when I can, but I am especially interested in trying to incorporate
                as many of these things into my daily life as I can.
            &lt;/p&gt;
            &lt;p&gt;
                Of course, I would love to stick solar panels and a battery on our house and retrofit it to be as
                sustainable as possible, but that is expensive (to do quickly) and there are smaller things to make life
                more sustainable like remembering that &quot;reduce, reuse, and&quot; are the words that come before &quot;recycle&quot;,
                repairing whatever I can, and only buying new things when I need them. In finding a new aesthetic, many of
                us (Americans, especially) are drawn to throw out our current possessions and buy the starter pack of the
                &lt;em&gt;New Thing&amp;trade;&lt;/em&gt;. Typically, the answer to &quot;what is the most sustainable ___?&quot; is &quot;The one you
                already have.&quot; Of course, if the object in question is a fuel-hungry thing that creates a lot of waste, that
                may be worth retiring and replacing.
            &lt;/p&gt;
            &lt;p&gt;
                &lt;a href=&quot;https://spokesandstitches.com/pages/workshops&quot; target=&quot;_blank&quot;&gt;Ruby&lt;/a&gt; has taught me a lot about
                repairing clothes, and I know how to maintain our bikes and some parts of our house. But, I have been
                recently trying to learn more about repairing electronics like my early 2015 Macbook I bought used from a
                previous employer and I would love to &lt;a href=&quot;https://github.com/iffybooks/host-a-website-at-home&quot;
                    target=&quot;_blank&quot;&gt;migrate this website from GitHub Pages to my own device&lt;/a&gt; in our home. Even as it is,
                using a static site that delivers a few kilobytes per page is far more sustainable than serving
                gigabyte-sized packages for websites made of mostly text.
            &lt;/p&gt;
            &lt;p&gt;
                Like many things, living sustainably is an iterative process and we all learn more each day. Even as &lt;a
                    href=&quot;https://travissouthard.com/art/abolish-landlords.html&quot; target=&quot;_blank&quot;&gt;my own work&lt;/a&gt; is influenced by it, my interest in
                Solarpunk is less trying to &lt;em&gt;look&lt;/em&gt; a certain way, but rather how to &lt;em&gt;behave&lt;/em&gt;. I certainly
                don&apos;t claim to be doing this perfectly, but I aspire to it and am currently slowly transforming an empty lot
                by our house into a garden/pocket-park, learning to repair electronics and clothes, and engaging my local
                communities in these as much as I can. What small, slow progress are you making?
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/my-interest-in-solarpunk.html</link>
            <pubDate>Mon, 20 May 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/my-interest-in-solarpunk.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Abolish Landlords</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/abolish-landlords.png&quot; alt=&quot;A pixel art image of an apartment building with letters in the windows that spell out: &apos;No one gets seconds til  EBERYBODY gets a home; ABOLISH LANDLORDS&apos;. The building also has various plants, lights and books in the windows and there are people watering plants, sitting on benches and toasting.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;No one gets seconds til &lt;b&gt;everybody gets a home&lt;/b&gt;. Hunger and homelessness are policy choices.&lt;/p&gt;
                &lt;p&gt;This was a fun piece to work on and I was happy to have found a great 
                    &lt;a href=&quot;https://lospec.com/palette-list/color-city-8&quot; target=&quot;_blank&quot;&gt;color palette by polyphrog&lt;/a&gt; to make this with! It was a great study in making some low-res people.
                &lt;/p&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/abolish-landlords.html</link>
            <pubDate>Thu, 16 May 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/abolish-landlords.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Sketches of the Real</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/may-11-sketch.png&quot; alt=&quot;A dithered image of a spiral-bound sketchbook with a pen sketch of a Victorian house with a hoophouse in front of it and a tree branch ot the right&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                I have been sketching lately. Mostly sitting in a place and drawing a building or plant within view. Some of
                these sketches are better than others, but these sketches are mental exercise more than making final pieces. I
                have been wanting to get back into making more art, whether pixel art like I have on this site already or more
                algorithmically made works. So sketching in this case is to help me understand what shapes I am seeing and
                thinking about them and what details to include and not include when trying to render something.
            &lt;/p&gt;
            &lt;p&gt;
                These have been fun to work on and it has been serene just spending 30-60 minutes sitting and just observing the
                details of one object in the same space as me. An object I might glance at regularly but not really take in
                beyond a quick glance of &quot;That&apos;s pretty&quot; or &quot;Huh, neat&quot;. I have been trying to notice regular patterns in
                texture and struggling to render irregular stone wall textures.
            &lt;/p&gt;
            &lt;p&gt;
                A lot of this process is frustrating and hard, but I keep doing it because it is ultimately very satisfying to
                see the drawings come together. A large part of that satisfaction comes from the drawings being tangible objects
                with &lt;em&gt;many&lt;/em&gt; flaws and irregularities. I was &lt;a
                    href=&quot;https://branch.climateaction.tech/issues/issue-8/the-wabi-sabi-web/&quot; target=&quot;_blank&quot;&gt;reading
                    recently&lt;/a&gt; about adding more irregularity into our websites. As I mentioned before, rendering irregularity
                into something you want to be clear and read well is very hard, and something I struggle with personally. All
                the same, especially with appreciating these textures in the sketches and the subjects I&apos;m sketching, I want to
                start trying to add these qualities to the sites I build. Especially this site, since ultimately this site is
                meant to be a reflection of my current work and skills.
            &lt;/p&gt;
            &lt;p&gt;
                A few months back I introduced new fonts to my portfolio site, something I chose for looking more like text
                hand-written with markers or pens. I would like to add some more hand-drawn qualities to the site, but doing
                this with CSS alone is tricky as far as I know now. I will try to do some research and see what I can find
                because I think having a rougher, textured web with some human fingerprints on it will make it more friendly to
                us, the humans.
            &lt;/p&gt;
            &lt;p&gt;
                In the past years since going from working as a bicycle mechanic and working every day with my hands directly
                touching the things I was working on to now, where I manipulate abstract, intangible things through a keyboard
                and mouse, I have found a new desire to make tangible, physical things. The sketches are part of this, but I
                also want to make some &quot;final works&quot; that can be touched, felt, heard. Some of this desire has gone into my
                garden and the empty lot behind our house I have been caring for with some neighbors.
            &lt;/p&gt;
            &lt;p&gt;
                Creating and working on tangible things is important to me and my wellbeing, especially as my professional and
                volunteer work both involve manipulating digital objects. Wrenching, planting, drawing, watering, painting,
                sculpting, sweeping, and pedaling will all be incredibly important in keeping me happy. One thought that comes
                up is that my roles at work and at Code for Philly involve building community, connections, understanding, and
                empathy; none of which are tanglible but all are vital in making our city a tangibly, perceptively better place.
                Rough edges and all.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/sketches-of-the-real.html</link>
            <pubDate>Sun, 12 May 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/sketches-of-the-real.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>I am the hand, not the tool</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/clock-tower.jpg&quot; alt=&quot;A dithered image of a clock tower atop a storage warehouse looming over a tree-filled neighborhood&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Despite a very full schedule leading up to the &lt;a href=&quot;https://socialjusticehackathon.com/about.html&quot;
                    target=&quot;_blank&quot;&gt;Social Justice Hackathon&lt;/a&gt;, I have been really enjoying springtime this year. Some warm
                days where we were lucky enough to be able to clear out a lot near my house that had previously invited dumping.
                But also some last cold days that threatened this year&apos;s early cherry and magnolia blossoms, but was gentle
                enough to leave them alone.
            &lt;/p&gt;
            &lt;p&gt;
                Part of enjoying spring has been trying to change some habits this year. The tl:dr; is that I severely cut down
                on phone time by switching to a phone that is extremely limited: It only does calls, texts, music, podcasts,
                directions, notes, and a hotspot. This has helped to let me use my time better and be more intentional in
                spending time.
            &lt;/p&gt;
            &lt;p&gt;
                For the past 8 years or so I have used some shape of iPhone, and even for about 3 years before that I used some
                odd smartphone or other (often something I found cheap enough at the time). Until my first bike shop job, I
                would just let every notification bubble up to the surface on both my handheld and desktop devices. Every social
                media like (or worse just those &quot;Your friend liked a thing you may like&quot; ones that should not be a
                notification).
            &lt;/p&gt;
            &lt;p&gt;
                I mention the bike shop job specifically because I remember the moment it was pointed out to me that &lt;i&gt;every
                    time&lt;/i&gt; my phone buzzed I looked at it, even if I had &lt;i&gt;just&lt;/i&gt; put it down a moment ago. Once it was
                pointed out I noticed it each time: the weird habit that now seemed so strange and obviously time-consuming. I
                started by turning off any &quot;like&quot; notifications and just leaving messages and comments for the social media I
                used at the time.
            &lt;/p&gt;
            &lt;p&gt;
                But of course, each new platform and client has its own settings. So moving to one or starting a new one means
                going through settings and unchecking almost every box except the ones that were about people specifically
                reaching out to me (you know, the actual social part). I have historically always turned off all notifications
                off on laptops and computers since they are the same as the ones popping up on my phone.
            &lt;/p&gt;
            &lt;p&gt;
                I thought this worked pretty well for a while, but then I noticed another weird habit I had: In a moment of
                boredom, I would just open Twitter and scroll two thumb lengths and stare at the screen for a few minutes, close
                it, then do it again. I also would do this for Instragram, just opening it and not really taking in anything
                about current events or my friends&apos; lives. I would just scroll a little. In thinking about it now, the motion is
                not that different from using a worry stone.
            &lt;/p&gt;
            &lt;p&gt;
                I tried deleting those apps from my phone and using the web-browser versions instead which did an okay job
                cutting down on scrolling, but not really enough. I was still spending hours a day doing that and would really
                prefer to spend that time doing something else. Nothing specific, but just more active and intentional (or in
                some cases, sleeping). Ultimately I deactivated or deleted my accounts on each of those and really only use &lt;a
                    href=&quot;https://jawns.club/@travissouthard&quot; target=&quot;_blank&quot;&gt;Mastodon&lt;/a&gt; for social media now.
            &lt;/p&gt;
            &lt;p&gt;
                I do love short-form video (RIP Vine) and I tried Tiktok for a few days but recognized quickly that it was a
                genuine attention-sink and that I could not handle that so it went away quickly. I do still enjoy YouTube and
                want to keep it (or at least the videos I regularly watch there), but the Shorts feature also just sucks hours
                from a day. To help my time, I use a &lt;a href=&quot;https://github.com/Vulpelo/hide-youtube-shorts&quot;
                    target=&quot;_blank&quot;&gt;browser extension&lt;/a&gt; to completely remove Shorts from the site.
            &lt;/p&gt;
            &lt;p&gt;
                One of the biggest changes has been switching away from iPhones entirely and using a &lt;a
                    href=&quot;https://www.thelightphone.com/&quot; target=&quot;_blank&quot;&gt;LightPhone 2&lt;/a&gt; which has an e-ink screen, and can
                only do calls, texts, music, podcasts, directions, notes, and a hotspot. While they are improving it a lot
                regularly, it is a little rough around the edges, though I kind of like that. It does not do email or web
                browsing so that is now just something I do exclusively from a laptop.
            &lt;/p&gt;
            &lt;p&gt;
                Without having social media or scrollable media on my phone I find myself reaching for it less and have
                taken to carrying an e-reader with me loaded with at least one library book. In the past three months I&apos;ve read
                more books than I did all last year. I also find myself listening to more podcasts and music when I want some
                stimulation.
            &lt;/p&gt;
            &lt;p&gt;
                The podcasts app works like most: subscribe to shows, download or stream as they come in. The music app is much
                more like the early days of mp3 players: Put the tracks you want into a playlist and upload them. I tend to
                prefer listening to albums so I added a bunch of digitized albums I own into the phone and have been enjoying
                that. I do wish the interface made it easier to both upload, order, and select albums specifically, but it
                certainly does its job.
            &lt;/p&gt;
            &lt;p&gt;
                This is certainly not a panacea for giving me my attention back. I do find myself still getting stuck in
                scroll-holes (often before bed just clickig &quot;one more&quot; YouTube video), or over-analyzing my budget. But what&apos;s
                great is that I have genuinely retaken hours of my days back. And this has changed my relationship to
                notifications. When they aren&apos;t flowing in constantly on my phone, they actually feel somewhat useful, though I
                am still very strictly only wanting any that are people actually talking to me. No &quot;likes&quot;. I have actually
                turned on some notifications on my work laptop even.
            &lt;/p&gt;
            &lt;p&gt;
                I also have needed to change how I take in news. I have subscribed to daily newsletters from local news orgs,
                and to RSS feeds of other news orgs and blogs I regularly like to keep up with. I do still feel a little behind
                on news (maybe a day or two?), but considering the other positive changes I&apos;ve seen this feels like a fine
                compromise until I can find a way to get RSS feeds to automatically go to my e-reader.
            &lt;/p&gt;
            &lt;p&gt;
                I like these changes so far and am still trying to find a better balance between being connected to others but
                not being burdened by tech. I do not want to be watched, followed, or harassed by advertisers, scammers, and
                data brokers. I want to be reachable by those who need me. I want to be able to reach out to friends. I am the
                hand, not the tool. And today, this hand wants to go o a bike ride.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/i-am-the-hand-not-the-tool.html</link>
            <pubDate>Sun, 24 Mar 2024 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/i-am-the-hand-not-the-tool.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Finding my best duck-ness</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/rittenhousetown.jpg&quot; alt=&quot;A dithered image of my mountain bike on a small bridge in front of an old homestead&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Coming through feeling sick and just in time for day light savings, which snuck up on me this year. Usually I am
                watching for it like a hawk, but this winter I was very focused on trying to enjoy what wintriness we got. With
                less than two weeks from the spring equinox, I am hoping we get a few weeks of actual spring weather before the
                heat of summer sets in.
            &lt;/p&gt;
            &lt;p&gt;
                I was grateful we got some snow this year, even if we got much more rain and warm weather overall. For a bunch
                of years of my adulthood (and probaly before as well), I would yearn for spring to come and bring warm weather,
                but the last few years I&apos;ve noticed that rather than a longing, I have been asking spring to take its time and
                stick around when it does arrive. I no longer yearn for spring to come, I rather find myself begging it to stay
                as June comes around.
            &lt;/p&gt;
            &lt;p&gt;
                All the same, it really does bring me joy to see snowdrops, some early daffodils, and crocuses in people&apos;s
                little
                curbside gardens (and in some more remote areas of the woods). Today on a bike ride in &lt;a
                    href=&quot;https://fow.org/&quot; target=&quot;_blank&quot;&gt;the Wissahickon&lt;/a&gt; I was lucky enough to see those flowers, many
                buds on the early trees, including some starts of cherry buds, as well as some wood ducks, and &lt;i&gt;maybe&lt;/i&gt; some
                &lt;a href=&quot;https://en.wikipedia.org/wiki/Greater_Scaup&quot; target=&quot;_blank&quot;&gt;Greater Scaups&lt;/a&gt;, but I am not as
                confident that these ducks were those.
            &lt;/p&gt;
            &lt;p&gt;
                While I am certainy not a birder, per se, I do tend to pay attention to the animals at the edges of domains or
                ones that are straddling two worlds. I&apos;ve alwayes like amphibious animals like ducks, turtles, and frogs. As a
                kid moving around lots of places and with a mix of cultural influences from my family and the places I&apos;ve lived,
                I&apos;ve always felt like I&apos;m only ever at the shore of a space. This has been less so since living my adulthood in
                Philly and getting deep into the bike scene, and lately the civic technology scene. But I often still have that
                feeling of existing at the shores between spaces, never wholly belonging to one or another.
            &lt;/p&gt;
            &lt;p&gt;
                This certainly isn&apos;t a bad thing since I have found that I have skills in making connections between those
                spaces and helping to tie them together or to move seamlessly between them (though I often feel clumsy about
                it). There are a lot of benefits to this skillset/position as well including finding multiple perspectives on
                issues, learning different ways to solve problems, and ideally to learn the best parts of each space (though
                that is still something I&apos;m constantly learning).
            &lt;/p&gt;
            &lt;p&gt;
                Once I get through this busy March (culminating in the &lt;a href=&quot;https://socialjusticehackathon.com&quot;
                    target=&quot;_blank&quot;&gt;Social Justice Hackathon April 5-7&lt;/a&gt;), I have a few projects I&apos;d like to work on including
                some &lt;a href=&quot;https://codeforphilly.org/&quot; target=&quot;_blank&quot;&gt;Code for Philly&lt;/a&gt; project ideas, some &lt;a
                    href=&quot;https://p5js.org/reference/&quot; target=&quot;_blank&quot;&gt;P5.js&lt;/a&gt; things I&apos;ve been wanting to play with, and some
                home projects that unfortunately won&apos;t maike it to this blog. Until then I will be trying to be my best duck.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/finding-my-best-duck-ness.html</link>
            <pubDate>Sun, 10 Mar 2024 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/finding-my-best-duck-ness.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>After vacation; before spring</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/assilah-walking.jpg&quot; alt=&quot;A dithered photo of people walking down a street of the medina in Assilah, Morocco&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Excited to see that the sunlight is just starting to stick around after 6pm lately. A few hours of extra
                sunlight really makes a difference to my mood. Weirdly enough the snow in Philadelphia the past few weeks
                has had a similar effect. Ruby and I have been taking the time to go hiking or walking on some good local
                trails and walking over snow and seeing the snowdrops peeking out of the ground has been a big boost against our
                winter dreading. (Also I recently found out &lt;a href=&quot;https://extension.psu.edu/snowdrops&quot; target=&quot;_blank&quot;&gt;are
                    poisonous if ingested&lt;/a&gt;!)
            &lt;/p&gt;
            &lt;p&gt;
                Ruby and I just spent a week in Morocco visiting a friend who has been living there. It was delightful to
                visit our friends, walk around some ancient cities, and exercise our language skills (I retained more
                conversational French than I thought!). We were very happy to have a friend who has been living as a local as
                out guide since there were some serious cultural differences around tipping for services, shopping, and police
                state activity than Ruby and I were used to. Plus she was great at picking out interesting places to visit, like
                the &lt;a href=&quot;https://en.wikipedia.org/wiki/Caves_of_Hercules&quot; target=&quot;_blank&quot;&gt;Caves of Hercules&lt;/a&gt; and
                Tangier&apos;s Phoenician Tombs!
            &lt;/p&gt;
            &lt;p&gt;
                Now recovering from some post-travel sickness (not COVID, just yucky) we&apos;re both diving back into our respective
                works. In particular work is ramping up for me as an organizer of the &lt;a
                    href=&quot;https://socialjusticehackathon.com/about.html&quot; target=&quot;_blank&quot;&gt;Social Justice Hackathon&lt;/a&gt; coming up
                this &lt;a href=&quot;https://www.eventbrite.com/e/philadelphia-social-justice-hackathon-2024-tickets-829209476867&quot;
                    target=&quot;_blank&quot;&gt;April 5-7&lt;/a&gt;. Besides that main event, we&apos;ll also be hosting weekly hack nights starting
                with our first one &lt;a href=&quot;https://www.meetup.com/legalhackerspa/events/299578460/&quot; target=&quot;_blank&quot;&gt;this
                    Thursday&lt;/a&gt;! We are still looking for volunteers for the event as well, especially volunteers who can serve
                as project leads. For that role, ideal volunteers have project, product, or volunteer management experience,
                especially in tech settings.
            &lt;/p&gt;
            &lt;p&gt;
                As spring creeps closer and snowdrops give way to daffodils over the next few weeks, I have a lot of work ahead
                of me. Between the above hackathon, Code for Philly, and my work at Community Legal Services. But also I gotta
                keep riding and exercising when I can because I am still planning to &lt;a
                    href=&quot;https://travissouthard.com/blog/back-in-the-saddle.html&quot;&gt;ride a 70-mile gravel ride in June&lt;/a&gt;. I promise I am not becoming
                one of those hustle-culture tech bros, I just have a busy March ahead of me. Just have to keep reminding myself
                to keep it moving one day at a time.
            &lt;/p&gt;
            &lt;p&gt;
                Despite it being so busy, I am really looking forward to spring and especially our neighborhood starting to wake
                up from its sleepy winter mode. As much as I can, I am looking to get social and outside as much as possible!
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/after-vacation-before-spring.html</link>
            <pubDate>Sun, 03 Mar 2024 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/after-vacation-before-spring.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Social Justice Hackathon Website</title>
            <description>&lt;a href=&quot;https://socialjusticehackathon.com/about.html&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/sjh-site.png&quot; alt=&quot;Screenshot of the Social Justice Hackathon website&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;The website for the Philadelphia Social Justice Hackathon. Built with Michael Chow, Hao Ye, Jake Riley, and Iliana Miltiadous. For an event happening April 5-7, 2024.&lt;/p&gt;See the &lt;a href=&quot;https://github.com/socialjusticehackathon/website&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://socialjusticehackathon.com/about.html</link>
            <pubDate>Wed, 14 Feb 2024 05:00:00 GMT</pubDate>
            <guid>https://socialjusticehackathon.com/about.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Back in the saddle</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/trail_01.jpg&quot; alt=&quot;A dithered photo of a wooded trail going off into the trees&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                After a few weeks working at my new job and settling into new habits, there&apos;s a part of me that feels like I&apos;m
                waking up from something. I really did not enjoy my last job. While I knew it was temporary, I still resented
                the forty hours a week spent working with no benefits on a project that I found equally interesting and
                frustrating to work on.
            &lt;/p&gt;
            &lt;p&gt;
                My therapist mentioned back in December that I had been stressed about work for about a year at that point since
                it had just been announced that Azavea would be acquired &lt;i&gt;while&lt;/i&gt; I was going through a performance
                improvement plan. And for the months leading up to and following the acquisition felt like shaky ground before
                being laid off in May.
            &lt;/p&gt;
            &lt;p&gt;
                Happily, after taking a few weeks off before starting at CLS, and with two weeks of learning new tools, legal
                terms, and company culture, I have really felt myself standing up straighter. I have felt like I am more aware
                of my surroundings. I have felt like that feeling where I suddenly come into focus and realize I have been
                staring into space for a while.
            &lt;/p&gt;
            &lt;p&gt;
                I remarked to Ruby a few weeks ago that I was feeling a low-level anxiety that was a similar feeling to
                waking up from a nightmare. That feeling where you know you&apos;re safe, but are still feeling scared and processing
                what it was you just went through. My last job was far from a nightmare, but I really wanted to be in a
                values-based space and really have been enjoying having that again.
            &lt;/p&gt;
            &lt;p&gt;
                I&apos;ve also been biking more including mountain biking and that feels wonderful! My friend, Pat, convinced me to
                sign up for &lt;a href=&quot;https://grinduro.com/pennsylvania/&quot; target=&quot;_blank&quot;&gt;Grinduro PA&lt;/a&gt; this coming June. It&apos;s
                a 70-mile gravel ride through Central PA and I have not done any ride that long in over four years, let alone on
                unpaved roads. I said yes, first because I love riding with Pat, but also I have been wanting to get back into
                good riding shape and this essentially puts a deadline on that. &lt;i&gt;Note: &quot;In shape&quot; is incredibly relative and
                    for me it&apos;s the ability to spontaneously be able to do a 60+ mile ride (if my schedule allows) when a friend
                    asks me.&lt;/i&gt;
            &lt;/p&gt;
            &lt;p&gt;
                Getting back out on my mountain bike feels great and I am happy to be spending more time in the woods. A few
                days ago was my first ride since probably last July or August. While I felt shaky that first ride, a few days in
                I am starting to feel more confident again and able to get past some of the tricky obstacles I learned to
                navigate last year.
            &lt;/p&gt;
            &lt;p&gt;
                Between my new job, co-directing &lt;a href=&quot;https://codeforphilly.org/&quot; target=&quot;_blank&quot;&gt;Code for Philly&lt;/a&gt;,
                organizing &lt;a href=&quot;https://socialjusticehackathon.github.io/website/about.html&quot; target=&quot;_blank&quot;&gt;a hackathon&lt;/a&gt;
                and a renewed cycling habit, I am feeling great both inside and out and hopefully I&apos;m setting a sustainable pace
                for myself. Because I genuinely love how this is feeling.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/back-in-the-saddle.html</link>
            <pubDate>Sun, 11 Feb 2024 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/back-in-the-saddle.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>New year. New job. New habits.</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/snowyard.jpg&quot; alt=&quot;A dithered photo of our backyard lightly coated in snow, a rarity now in Philly. A mostly brown landscape features some orange pots, a blue umbrella, and white snow.&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                New year. I am newly 35 years old and just came through a tough but still good year. Many
                years have been tough for me, but in the grand scheme of tough years, 2023 was pretty easy on me. This year I
                was laid off from a dream job, joined the leadership at &lt;a href=&quot;https://codeforphilly.org/&quot;
                    target=&quot;_blank&quot;&gt;Code for Philly&lt;/a&gt;, didn&apos;t ride my bike enough, worked in a large corporate environment
                that I dislike, but ended the year by securing a job that fits my values. Ruby and I also have some travel plans
                that I will talk about more once we&apos;re back home!
            &lt;/p&gt;
            &lt;p&gt;
                New job. I will be joining &lt;a href=&quot;https://clsphila.org/&quot; target=&quot;_blank&quot;&gt;Community Legal Services&lt;/a&gt; this
                week as a Developer and Data Analyst in their Digital Innovation Lab. I am excited to be working on local issues
                and helping Philadelphians, but I am also just excited to be working at a values-driven organization once again!
                CLS is a great organization and I have been a fan of their work for some time.
            &lt;/p&gt;
            &lt;p&gt;
                New habits. I have a new &lt;a href=&quot;https://bonk.lol/2024A&quot; target=&quot;_blank&quot;&gt;Bonk planner&lt;/a&gt; and want to leverage
                it to build up some new habits and routines I have been wanting to build. I am using it as part tracker and part
                journal. Each day I note: How many cups of coffee I&apos;ve had (less than I thought). Which meals I&apos;ve prepared.
                When I woke up and went to bed. What exercise I did that day. What 3rd place I visited. What tasks I need to do
                and which I did. And finally a highlight list of what happened that day. I have been doing it for a week now and
                it&apos;s already given me some insight into my habits and helped me build some new ones.
            &lt;/p&gt;
            &lt;p&gt;
                I was expecting that I would have more reflections I&apos;d like to share from my usual birthday/new year
                introspection, but I think most of that is best left private. I am looking forward to this year, even if it is
                starting with winter (as Gregorian years typically do), but time with friends should at least make that easier.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/new-year-new-job-new-habits.html</link>
            <pubDate>Sun, 07 Jan 2024 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/new-year-new-job-new-habits.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>A personal financial project</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/debt-snowball.png&quot; alt=&quot;A screenshot of the debt snowball chart showing the paydown of the debts compared to the traditional payment plan&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Earlier this year &lt;a href=&quot;https://travissouthard.com/snowball/index.html&quot; target=&quot;_blank&quot;&gt;I built a project&lt;/a&gt;
                that came from a personal need. I have three student loans from my time at University of the Arts, my time at
                Temple University, and my coding bootcamp. My spouse Ruby has her own loans from undergraduate and graduate
                school. We also share a mortgage on our home. I have been exploring different options to ideally pay down these
                debts early and save both money on interest and time for ourselves in the future with less debt payment burden.
            &lt;/p&gt;
            &lt;p&gt;
                As part of my research, the most personally compelling plan I found is called the &lt;a
                    href=&quot;https://en.wikipedia.org/wiki/Debt_snowball_method&quot; target=&quot;_blank&quot;&gt;debt snowball plan&lt;/a&gt;. The
                essence of the plan is:
            &lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;Order your debts from smallest to largest by remaining principle on each loan.&lt;/li&gt;
                &lt;li&gt;Pay only the minimums on each loan.&lt;/li&gt;
                &lt;li&gt;Optionally if you are able and want to pay extra to accelerate the process, only apply the extra amount to
                    the smallest loan’s monthly payments.&lt;/li&gt;
                &lt;li&gt;Once the smallest is paid off, take what you were paying each month and add that to the monthly payment of
                    the next smallest plan.&lt;/li&gt;
                &lt;li&gt;Repeat the last step until all of your debts are paid off.&lt;/li&gt;
            &lt;/ul&gt;
            &lt;p&gt;
                What is nice about this plan is that, unless you are adding extra each month to accelerate the plan, the amount
                you pay towards your debts each month stays the same. Arguably this is also a drawback, since the monthly
                payment burden stays the same, even as debts are resolved. I am not a financial expert but appreciate the
                simplicity and effectiveness of this plan. There are similar approaches like the debt avalanche, which works
                similarly except that the first step is to order the debts from highest interest rate to lowest. My
                understanding is that while also effective, the avalanche is slower overall, but especially slower to start
                feeling the benefits of paying off the first debt in the sequence.
            &lt;/p&gt;
            &lt;p&gt;
                For our situation, without going too deeply into our personal finances, following this plan would allow us to
                pay off our student loans a few years early. However, the much bigger effect is that our mortgage would be paid
                off about 14 years earlier than the 30 years our mortgage is planned for. If all goes to plan, this would save
                us a lot in interest and dramatically cut down our living expenses. Granted, all our loan terms allow us to pay
                down the principal ahead of schedule, and not all loans allow this (although they absolutely should). You should
                check your terms on your loans before making any plans.
            &lt;/p&gt;
            &lt;p&gt;
                Now that I understood this plan, I wanted to show Ruby how this may benefit us, but needed a way to show her how
                it works. There are many debt snowball calculators, and most have great written descriptions, but almost none of
                the ones I came across had any sort of chart showing how the plan is paid off over time. I am always one to make
                a plan with a spreadsheet (including vacation plans) and my favorite part of any spreadsheet is creating charts.
            &lt;/p&gt;
            &lt;p&gt;
                Having charts would also help me explain the concept and benefits to Ruby, but also would help me visualize for
                myself the differences between different plans and also continuing to pay the minimums. Faced with a serious
                dearth of charts amongst the existing resources, I did what all engineers do when faced with a missing tool: I
                began to build it myself.
            &lt;/p&gt;
            &lt;p&gt;
                To build this out I had to do some research on &lt;a href=&quot;https://en.wikipedia.org/wiki/Amortizing_loan&quot;
                    target=&quot;_blank&quot;&gt;how loans, interest, and amortization work&lt;/a&gt; at a more detailed level than I had really
                thought about since learning about complex and simple interest in high school math classes. I started with a
                spreadsheet for myself, but quickly realized that what I wanted was a webpage. I found it much easier to create
                loops and recursive functions with JavaScript than with spreadsheet macros. Besides, if I was looking for debt
                snowball charts, others likely were too, so once I had a complete site, I could share it publicly as well. You
                should &lt;a href=&quot;https://travissouthard.com/snowball/index.html&quot; target=&quot;_blank&quot;&gt;try it out&lt;/a&gt; and see if a plan
                like this might work for you.
            &lt;/p&gt;
            &lt;p&gt;
                I built this early on in my learnings about &lt;a href=&quot;http://permacomputing.net/&quot;
                    target=&quot;_blank&quot;&gt;permacomputing&lt;/a&gt; and &lt;a href=&quot;https://travissouthard.com/blog/smaller-code-and-bigger-plans.html
                    target=&quot;_blank&quot;&gt;building out smaller websites&lt;/a&gt; with just HTML, CSS, and JavaScript. I wanted to lean on
                and design around the HTML tags as they exist. I think I did an okay job with this but some of the parts of how
                this is built go against some of my better design sensibilities.
            &lt;/p&gt;
            &lt;p&gt;
                In particular, I think the site uses too much text without intentional visual hierarchy and too little color to
                help orient a person to what to use or read first. I do still think this project works but I learned some things
                about designing a project from scratch and would like to revisit the aesthetics of this project sometime.
                Overall, I am still happy with how it came out for a weekend project. Plus, I do still use this to occasionally
                to recheck my own financial plans as our life and the world around us changes.
            &lt;/p&gt;
            &lt;p&gt;
                Excitingly, we have our snowball rolling down the hill and are just this week starting to see it picking up some
                momentum. My loans from my time at UArts were fully paid off at the beginning of this month and I was able to use
                what I was paying towards that and put it towards my boot camp loan payments. It feels wonderful so far and I look
                forward to completing this plan.
            &lt;/p&gt;
            See the &lt;a href=&quot;https://github.com/travissouthard/travissouthard.github.io/tree/master/snowball&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/a-personal-financial-project.html</link>
            <pubDate>Sun, 12 Nov 2023 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/a-personal-financial-project.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Season of Change</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/wiss-fall.jpg&quot; alt=&quot;The Wissahickon Creek flowing from around the corner through orange leaved tees that have dropped about 20% of their leaves&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Autumn is in full show here in Philadelphia, at least up in the Northwest of Philly where I now live. The colors
                are a great time to reflect on the passage of time. It being the weekend daylight savings ends is also a big
                hint that time is always changing, even if only arbitrarily.
            &lt;/p&gt;
            &lt;p&gt;
                I am grateful to see the leaves change like this and for consistent access to more trees in general than I had
                experienced in South Philly. Despite being much closer to the Wissahickon park, I still don&apos;t go there often
                enough (at least not as often as I&apos;d like to). I also appreciate the irony that as a teenager, I completely took
                for granted the massive forests around me in Northeast PA, but mostly because I wanted to be closer to my
                friends.
            &lt;/p&gt;
            &lt;p&gt;
                I&apos;ve gone through a lot of changes to my daily life this year: My employer got acquired, the new employer laid
                me off, I am
                joining the &lt;a href=&quot;https://codeforphilly.org/&quot; target=&quot;_blank&quot;&gt;Code for Philly&lt;/a&gt; leadership team, and &lt;a
                    href=&quot;https://spokesandstitches.com/&quot; target=&quot;_blank&quot;&gt;Ruby is kicking up her business again&lt;/a&gt;! I&apos;m still
                expecting more changes to my daily life before the end of the year.
            &lt;/p&gt;
            &lt;p&gt;
                Changes can be very hard, and many people are resistant to them. I had to learn to weather changes as a child
                who attended at least one new school every year until the sixth grade. Then in my late teens and early twenties
                I welcomed changes to help get me into better places. When I can afford to, I also bring on daily changes as
                recreation in the form of bike tours. Each day is a different ride to a different place and I rarely wake up in
                the same place twice on those trips. I even &lt;a
                    href=&quot;https://www.instagram.com/explore/tags/ridealongecg/&quot;&gt;planned a trip&lt;/a&gt; in 2019 along the &lt;a
                    href=&quot;https://www.greenway.org/&quot;&gt;East Coast Greenway&lt;/a&gt; to follow the beginning of the changing leaves that
                year.
            &lt;/p&gt;
            &lt;p&gt;
                A huge change for me in the last year was buying a house with Ruby. What&apos;s especially wild about that is that we
                effectively signed up to be involved with this one house and piece of land for thirty years! Granted, we don&apos;t
                &lt;em&gt;have&lt;/em&gt; to stay here for thirty years if we don&apos;t want, but a mortgage is still on that &lt;em&gt;scale&lt;/em&gt; of
                financial planning. And for most future plans, selling this house would lead to buying another.
            &lt;/p&gt;
            &lt;p&gt;
                This is often a &quot;stage&quot; of American life where a person really wants to stop changes. They want to keep their
                neighborhood exactly like it was when they bought their home. But I try to remember change is inevitable.
                Planets and stars continue moving through space. Water pulls mountains down towards oceans. Winds push leaves
                and seeds off plants. I hope I can continue to take on changes with grace and never try to lock my life in
                place.
            &lt;/p&gt;
            &lt;p&gt;
                I still don&apos;t feel ready for winter, but there is certainly still time to prepare. And arguably, that is the
                purpose of a transitional time like the fall to help us get ready for the cold and dark. That we can slowly
                approach the hard things and steel ourselves to them as they creep closer. I tend to be an optimist and one way
                that hurts me is that I spend most of the winter just looking ahead to springtime rather than embracing what
                winter has to offer.
            &lt;/p&gt;
            &lt;p&gt;
                This year I want to commit to changing my approach to winter: To use the inside time to improve my engineering
                and my art. To make more time for friends to get together. To take advantage of the slowed plant growth to
                prepare an overgrown lot to become a garden. To spend time decorating my house. This winter I want to resist
                hibernating.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/season-of-change.html</link>
            <pubDate>Sun, 05 Nov 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/season-of-change.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Smaller code and bigger plans</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/ruby-beach.jpg&quot; alt=&quot;Ruby standing on an autumn beach on her birthday weekend&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                Over the past few weeks I have released a tutorial to make the classic video game, Minesweeper, from scratch
                using native web tools (being HTML, CSS, and Javascript). (Check out parts &lt;a 
                    href=&quot;https://travissouthard.com/blog/how-to-make-minesweeper-part-1.html&quot; target=&quot;_blank&quot;&gt;1&lt;/a&gt;, &lt;a 
                    href=&quot;https://travissouthard.com/blog/how-to-make-minesweeper-part-2.html&quot; target=&quot;_blank&quot;&gt;2&lt;/a&gt;, &amp; &lt;a 
                    href=&quot;https://travissouthard.com/blog/how-to-make-minesweeper-part-3.html&quot; target=&quot;_blank&quot;&gt;3&lt;/a&gt;!) I was motivated to write tutorials in general to help
                new developers bridge the gap between what they currently know and what they need to know to get a job
                developing code. The other half of that motivation is to help me become a better developer by teaching.
            &lt;/p&gt;
            &lt;p&gt;
                I chose to write tutorials about native web tools because developers do need to know what the browser is
                actually reading and rendering and why it does what it does. Part of this is that frameworks and libraries
                compile down to HTML, CSS, and Javascript, so developers should be aware of what is happening &apos;under the hood.&apos; I
                was taught to try to be aware of how the tech is working at least one or two layers down to ensure my code will
                behave how I want it to. The other part of that motivation has been feeling more and more that we should be
                delivering smaller websites to end users.
            &lt;/p&gt;
            &lt;p&gt;
                I have been reading a lot of work around &lt;a href=&quot;http://permacomputing.net/&quot;
                    target=&quot;_blank&quot;&gt;permacomputing&lt;/a&gt;, &lt;a href=&quot;https://solar.lowtechmagazine.com/&quot; target=&quot;_blank&quot;&gt;more
                    sustainable technology&lt;/a&gt;, and &lt;a
                    href=&quot;https://bookshop.org/p/books/the-digital-closet-how-the-internet-became-straight-alexander-monea/17170660?ean=9780262545952&quot;
                    target=&quot;_blank&quot;&gt;making the web better for
                    people&lt;/a&gt;, including &lt;a href=&quot;https://abookapart.com/products/you-deserve-a-tech-union&quot;
                    target=&quot;_blank&quot;&gt;developers&lt;/a&gt;. And one of the easiest ways I can do that as a developer is to write my
                own code that is easier on both storage and compute power and also to encourage others to do the same. One of
                &lt;a href=&quot;http://permacomputing.net/Principles/&quot; target=&quot;_blank&quot;&gt;permacomputing&apos;s principles&lt;/a&gt; is to &quot;Keep
                it small&quot; since:
            &lt;/p&gt;
            &lt;blockquote&gt;
                Small systems are more likely to have small hardware and energy requirements, as well as high understandability.
                They are easier to understand, manage, refactor and repurpose. -&lt;a href=&quot;http://permacomputing.net/Principles/&quot;
                    target=&quot;_blank&quot;&gt;Permacomputing Principles page&lt;/a&gt;
            &lt;/blockquote&gt;
            &lt;p&gt;
                There&apos;s certainly more to permacomputing and sustainability than just making things smaller, and there is also a
                &lt;a href=&quot;https://en.wikipedia.org/wiki/Code_golf&quot; target=&quot;_blank&quot;&gt;&quot;code golf&quot;&lt;/a&gt; tradeoff where the code
                becomes so small that it makes it harder to understand and thus will be harder to maintain. This blog and my
                portfolio site in general are built as just a static webpage and the only library I&apos;m using is JQuery, though it
                could be rewritten in vanilla Javascript. Granted, there are downsides to this setup: one is that I cannot tell how many
                people are visiting the site unless they tell me directly. For now this is fine since I am writing these for fun
                and practice more than relying on them for any sort of income just yet.
            &lt;/p&gt;
            &lt;p&gt;
                Along the lines of not knowing who is reading, I have no plans to track readers ever. User tracking is
                creepy and invasive. I personally use tools to protect my privacy as much as I can, and I recommend you do too.
                At some point, I will want to know how many times posts are being read (and if possible how many unique readers,
                if there is a non-tracking way to do that). I currently have the site and blog hosted on GitHub Pages, which is
                easy to use and free. But to start seeing some readership numbers, I would have to set up my own server. I would
                like to do this anyway to improve how I&apos;m coding the different posts, to fulfill my own DIY desires, and to take
                more control over my work and the resources it uses.
            &lt;/p&gt;
            &lt;p&gt;
                In the meantime, I am reasonably happy with this site. It serves my need of having a consistent site for software
                projects, pixel art, and blog posts. One of my &lt;code&gt;TODOs&lt;/code&gt; is to create a &lt;code&gt;resume.html&lt;/code&gt; page
                with a list of all my past jobs and download link for &lt;a
                    href=&quot;https://travissouthard.com/assets/travis_southard_software_engineer_resume.pdf&quot; target=&quot;_blank&quot;&gt;the PDF&lt;/a&gt;. If you enjoy what
                I&apos;m building here, please consider &lt;a href=&quot;https://ko-fi.com/travissouthard&quot;&gt;supporting my work&lt;/a&gt; to help me
                make more tutorials, blogs, pixel art, and everything.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/smaller-code-and-bigger-plans.html</link>
            <pubDate>Sun, 29 Oct 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/smaller-code-and-bigger-plans.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>How to make Minesweeper part 3</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper19.jpg&quot; alt=&quot;Our fully done Minesweeper game with styling to make it look like cut stone.&quot;/&gt;
      &lt;/a&gt;
  
            &lt;h3 id=&quot;how-to-make-minesweeper-part-2&quot;&gt;How to make Minesweeper part 3&lt;/h3&gt;
    &lt;p&gt;This is the final part of this 3-part series! I recommend starting with &lt;a href=&quot;https://travissouthard.com/blog/how-to-make-minesweeper-part-1&quot;&gt;part 1&lt;/a&gt; and also working through &lt;a href=&quot;https://travissouthard.com/blog.html?post=how-to-make-minesweeper-part-2.html&gt;part 2&lt;/a&gt; before moving on
        to this one. If you have already worked through parts 1 and 2, welcome back! In the previous parts, we built a board of
        100 squares with variable amount of bombs depending on the difficulty, randomized them around the board, and gave the player ways to find those bombs. In this part we will finish the gameplay, including adding the win condition and styling the board to look nice.&lt;/p&gt;
            &lt;h3 id=&quot;show-all-bombs-when-one-is-clicked&quot;&gt;Show all bombs when one is clicked&lt;/h3&gt;
&lt;p&gt;Another feature of Minesweeper is that when the player clicks a bomb, we want to show them all the bombs so that they can see where they made their mistake. So in &lt;code&gt;handleClick&lt;/code&gt; let&amp;#39;s add the following to our &lt;code&gt;if (squareObj.classList.contains(&amp;quot;bomb&amp;quot;))&lt;/code&gt; block between setting &lt;code&gt;isGameOver&lt;/code&gt; to &lt;code&gt;true&lt;/code&gt; and setting the clicked bomb to an explosion:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const &lt;span class=&quot;hljs-keyword&quot;&gt;bombs &lt;/span&gt;= document.querySelectorAll(&lt;span class=&quot;hljs-string&quot;&gt;&quot;.bomb&quot;&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;bombs.forEach((bomb) &lt;/span&gt;=&amp;gt; {
    &lt;span class=&quot;hljs-keyword&quot;&gt;bomb.innerHTML &lt;/span&gt;= &lt;span class=&quot;hljs-string&quot;&gt;&quot;💣&quot;&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;hljs-keyword&quot;&gt;bomb.classList.add(&quot;clicked&quot;);
&lt;/span&gt;})&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll&quot;&gt;&lt;code&gt;document.querySelectorAll&lt;/code&gt;&lt;/a&gt; method is pretty powerful. It takes a CSS selector string as an argument (e.g. &lt;code&gt;.clicked&lt;/code&gt; for the clicked class, &lt;code&gt;p&lt;/code&gt; for paragraph elements) and returns a &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/NodeList&quot;&gt;&lt;code&gt;NodeList&lt;/code&gt;&lt;/a&gt; which acts &lt;strong&gt;kind of&lt;/strong&gt; like an array and has many of the same methods and properties as an array like &lt;code&gt;.length&lt;/code&gt; and &lt;code&gt;.forEach()&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;We want to use the &lt;code&gt;.forEach()&lt;/code&gt; method to both set set each bomb square to show a bomb emoji and to add the &amp;quot;clicked&amp;quot; class for styling later. We want to add the above code &lt;strong&gt;before&lt;/strong&gt; setting the square-that-was-clicked to an explosion so that we don&amp;#39;t overwrite that explosion when we set all the bombs to bomb emojis.&lt;/p&gt;
&lt;p&gt;Let&amp;#39;s refresh and check and immediately click a bomb to see all the bombs show up and to see the one we clicked explode!&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper13.jpg&quot;
alt=&quot;Our Minesweeper board in game over mode showing all the bombs in the pink squares&quot; /&gt;
&lt;h3 id=&quot;add-feature-to-place-flag&quot;&gt;Add feature to place flag&lt;/h3&gt;
&lt;p&gt;Finally we can start making it so the player can actually win the game! In minesweeper, the player can click to see how many bombs are nearby. But once they think they know where a bomb is, they can right-click to place a flag. The flag tells the player where they already think bombs are and to help them no click on them. And for us, we can keep track of them later to let us know when the player has found them all!&lt;/p&gt;
&lt;p&gt;But first, let&amp;#39;s allow the player to right-click the squares at all. We&amp;#39;ll start by adding a function after the &lt;code&gt;handleClick&lt;/code&gt; function:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const handlePlaceFlag = &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;(squareObj)&lt;/span&gt; =&amp;gt;&lt;/span&gt; {
    &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (isGameOver) &lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt;;
    &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (!squareObj.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;clicked&quot;&lt;/span&gt;)) {
        squareObj.innerHTML = squareObj.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;flag&quot;&lt;/span&gt;) ? &lt;span class=&quot;hljs-string&quot;&gt;&quot;🚩&quot;&lt;/span&gt; : &lt;span class=&quot;hljs-string&quot;&gt;&quot;&quot;&lt;/span&gt;;
        squareObj.classList.toggle(&lt;span class=&quot;hljs-string&quot;&gt;&quot;flag&quot;&lt;/span&gt;);
    }
};
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The above function makes sure the game is not over, makes sure the square that was right-clicked has not already been clicked, and then fills in the appropriate text and class. This function as written will add a flag if there isn&amp;#39;t one and will remove a flag if there is one.&lt;/p&gt;
&lt;p&gt;We are using a &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator&quot;&gt;ternary operator&lt;/a&gt; to set the &lt;code&gt;square.innerHTML&lt;/code&gt;. If you haven&amp;#39;t seen these before the following phrases work the same:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;// With ternary operator
squareObj.&lt;span class=&quot;hljs-attr&quot;&gt;innerHTML&lt;/span&gt; = squareObj.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;flag&quot;&lt;/span&gt;) ? &lt;span class=&quot;hljs-string&quot;&gt;&quot;🚩&quot;&lt;/span&gt; : &lt;span class=&quot;hljs-string&quot;&gt;&quot;&quot;&lt;/span&gt;;

// With &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt;/&lt;span class=&quot;hljs-keyword&quot;&gt;else&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (squareObj.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;flag&quot;&lt;/span&gt;)) {
    squareObj.&lt;span class=&quot;hljs-attr&quot;&gt;innerHTML&lt;/span&gt; = &lt;span class=&quot;hljs-string&quot;&gt;&quot;🚩&quot;&lt;/span&gt;
} &lt;span class=&quot;hljs-keyword&quot;&gt;else&lt;/span&gt; {
    squareObj.&lt;span class=&quot;hljs-attr&quot;&gt;innerHTML&lt;/span&gt; = &lt;span class=&quot;hljs-string&quot;&gt;&quot;&quot;&lt;/span&gt;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now that we have our function, we can call it with a new event listener. Add the following after the &lt;code&gt;click&lt;/code&gt; event listener in &lt;code&gt;createBoard&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;square.addEventListener(&lt;span class=&quot;hljs-string&quot;&gt;&quot;contextmenu&quot;&lt;/span&gt;, &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;()&lt;/span&gt; =&amp;gt;&lt;/span&gt;
    handlePlaceFlag(square)
);
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&amp;quot;contextmenu&amp;quot; is the event that is called with the player right-clicks. When we refresh and check, we can now add and remove flags whenever. Except that the actual context menu (the right-click menu) is getting in the way! We can prevent that by adding the &lt;code&gt;event&lt;/code&gt; as an argument to &lt;code&gt;handlePlaceFlag&lt;/code&gt;. So let&amp;#39;s change the anonymous callback we just added to be:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;square.addEventListener(&lt;span class=&quot;hljs-string&quot;&gt;&quot;contextmenu&quot;&lt;/span&gt;, &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;(e)&lt;/span&gt; =&amp;gt;&lt;/span&gt; handlePlaceFlag(e, square));
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We don&amp;#39;t have to call the &lt;code&gt;event&lt;/code&gt; &lt;code&gt;e&lt;/code&gt;, but that is a pretty established pattern that other developers will also understand. Also we do have to use the &lt;code&gt;e&lt;/code&gt; argument &lt;strong&gt;before&lt;/strong&gt; the &lt;code&gt;square&lt;/code&gt; argument, this is an odd JavaScript thing, but it is required. Now let&amp;#39;s add the &lt;code&gt;e&lt;/code&gt; to the &lt;code&gt;handlePlaceFlag&lt;/code&gt; parameters which should now look like:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const handlePlaceFlag = &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;(e, squareObj)&lt;/span&gt; =&amp;gt;&lt;/span&gt; {
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And then before anything else in the &lt;code&gt;handlePlaceFlag&lt;/code&gt; function we&amp;#39;ll add &lt;code&gt;e.preventDefault();&lt;/code&gt; This is a great little &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault&quot;&gt;method&lt;/a&gt; that helps us stop that context menu from appearing.&lt;/p&gt;
&lt;p&gt;Now another refresh and check will let us place and remove flags as much as we want. No menus in the way anymore.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper14.jpg&quot;
alt=&quot;Our Minesweeper board showing mostly green squares as well as pink squares, some of which have flags in them&quot; /&gt;
&lt;h3 id=&quot;make-it-so-only-finite-flags-can-be-placed&quot;&gt;Make it so only finite flags can be placed&lt;/h3&gt;
&lt;p&gt;Now we are able to place flags, but we are able to place infinite flags. This does not make for very fun gameplay so we should limit the amount of flags to the amount of bombs on the field. This way if the player has placed 10 flags and there are 10 bombs, but they haven&amp;#39;t won, then it lets them know that one or more of their flags are misplaced.&lt;/p&gt;
&lt;p&gt;Similar to adding our difficulty levels above, let&amp;#39;s first create a DOM element to place our number. Let&amp;#39;s place it between the buttons and the board:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-html&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-selector-tag&quot;&gt;p&lt;/span&gt; id=&lt;span class=&quot;hljs-string&quot;&gt;&quot;flagCounter&quot;&lt;/span&gt;&amp;gt;Flags &lt;span class=&quot;hljs-attribute&quot;&gt;left&lt;/span&gt;:&amp;lt;/p&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Next we&amp;#39;ll grab with with &lt;code&gt;document.getElementByID&lt;/code&gt; calling this in a similar place to our other &lt;code&gt;document&lt;/code&gt; calls:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; flagCounter = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;&quot;flagCounter&quot;&lt;/span&gt;);
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We want this element to update each time a flag is removed or placed and when the game updates. So we will need to have a variable that keeps track of how many flags are left, functionality to change that value when necessary, and a function to update the DOM element whenever the variable is changed.&lt;/p&gt;
&lt;p&gt;Let&amp;#39;s start by adding &lt;code&gt;let flagsLeft = bombCount[diffculty];&lt;/code&gt; up in our constants and variables at the top of the JS file (It can go anywhere in that block as long as it&amp;#39;s after both &lt;code&gt;bombCount&lt;/code&gt; &amp;amp; &lt;code&gt;difficulty&lt;/code&gt;).&lt;/p&gt;
&lt;p&gt;Next we&amp;#39;ll add an &lt;code&gt;updateFlagCounter&lt;/code&gt; function above our &lt;code&gt;resetGame&lt;/code&gt; function:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; updateFlagCounter = &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;()&lt;/span&gt; =&amp;gt;&lt;/span&gt; {
    flagCounter.innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;`Flags left: &lt;span class=&quot;hljs-subst&quot;&gt;${flagsLeft}&lt;/span&gt;`&lt;/span&gt;;
};
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And then within &lt;code&gt;resetGame&lt;/code&gt;, before we build our array of square values, we&amp;#39;ll also reset the &lt;code&gt;flagsLeft&lt;/code&gt; and update the &lt;code&gt;flagCounter&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-attribute&quot;&gt;flagsLeft&lt;/span&gt; = bombCount[difficulty]&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
updateFlagCounter()&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Finally, we will change our &lt;code&gt;handlePlaceFlag&lt;/code&gt; logic. When the player right-clicks, a flag should only be placed if:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;they right click an unclicked square&lt;/li&gt;
&lt;li&gt;AND there are flags left to place
And they should only be removed if that square has a flag to remove.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;In both scnarios we want to show the right icon in the square, add or remove the &amp;quot;flag&amp;quot; class, increment or decrement the &lt;code&gt;flagsLeft&lt;/code&gt;, and update the &lt;code&gt;flagCounter&lt;/code&gt;. But if has no flag and there are no more flags we want to do nothing. So in this case we&amp;#39;ll actually remove the ternary operator and &lt;code&gt;classList.toggle&lt;/code&gt; method and add the following in their place:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;if (squareObj.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;flag&quot;&lt;/span&gt;)) {
    squareObj.innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    squareObj.classList.remove(&lt;span class=&quot;hljs-string&quot;&gt;&quot;flag&quot;&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    flagsLeft++&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    updateFlagCounter()&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
} else if (flagsLeft &amp;gt; &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;) {
    squareObj.innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;&quot;🚩&quot;&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    squareObj.classList.&lt;span class=&quot;hljs-keyword&quot;&gt;add(&quot;flag&quot;);
&lt;/span&gt;    flagsLeft--&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    updateFlagCounter()&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now when we refresh and check, we should be able to place 10 flags anywhere but not an 11th flag. We should also be able to remove flags once they have been placed. For each addition or removal, the counter above the board should display the correct amount of flags remaining.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper15.jpg&quot;
alt=&quot;Under our Minesweeper board&apos;s difficulty and reset buttons, is now text that reads &apos;Flags left: 10&apos; and we expect the number to decrease as we add flags to the board.&quot; /&gt;
&lt;h3 id=&quot;add-win-condition&quot;&gt;Add win condition&lt;/h3&gt;
&lt;p&gt;One last bit of functionality we need to add is the ability for the player to win the game (and for us to tell them). There are two win conditions:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;the player places a flag correctly on each bomb&lt;/li&gt;
&lt;li&gt;the player clears all of the non-bomb spaces without hitting a bomb first?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;So there are two values we want to check:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How many squares have both the &amp;quot;bomb&amp;quot; and &amp;quot;flag&amp;quot; classes?&lt;/li&gt;
&lt;li&gt;How many squares have the &amp;quot;clicked&amp;quot; class&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;So for this a great way to check the classes of the squares is to once again use &lt;code&gt;document.querySelectorAll()&lt;/code&gt; to check the entire document for those values. As above, &lt;code&gt;document.querySelectorAll()&lt;/code&gt; receives one argument of a CSS Selector string and returns a &lt;code&gt;NodeList&lt;/code&gt; that behaves very similarly to an array. For the values we want to grab, we can use the &lt;code&gt;.length&lt;/code&gt; property to figure out how many of each type we have.&lt;/p&gt;
&lt;p&gt;But to make it very obvious the player has won, we&amp;#39;ll take advantage of the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach&quot;&gt;&lt;code&gt;.forEach()&lt;/code&gt; method&lt;/a&gt; to change the board to be fully revealed and show all the squares.&lt;/p&gt;
&lt;p&gt;So we need a function that will check that at least one of our two win conditions is met and then change the board to show the player they won. Let&amp;#39;s add a &lt;code&gt;checkForWin&lt;/code&gt; function after the &lt;code&gt;resetGame&lt;/code&gt; function:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; checkForWin = () =&amp;gt; {
    &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; flaggedBombsCount = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-built_in&quot;&gt;querySelectorAll&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;&quot;.flag.bomb&quot;&lt;/span&gt;).length;
    &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; clickedCount = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-built_in&quot;&gt;querySelectorAll&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;&quot;.clicked&quot;&lt;/span&gt;).length;
    &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (
        flaggedBombsCount === bombCount[difficulty] ||
        clickedCount === boardSize - bombCount[difficulty]
    ) {
        isGameOver = &lt;span class=&quot;hljs-keyword&quot;&gt;true&lt;/span&gt;;
        &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-built_in&quot;&gt;querySelector&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;&quot;h1&quot;&lt;/span&gt;).innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;&quot;You win!&quot;&lt;/span&gt;;
        &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-built_in&quot;&gt;querySelectorAll&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;&quot;.bomb&quot;&lt;/span&gt;).forEach((b) =&amp;gt; (b.innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;&quot;💣&quot;&lt;/span&gt;));
        &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;
            .&lt;span class=&quot;hljs-built_in&quot;&gt;querySelectorAll&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;&quot;#board p&quot;&lt;/span&gt;)
            .forEach((p) =&amp;gt; p.classList.add(&lt;span class=&quot;hljs-string&quot;&gt;&quot;clicked&quot;&lt;/span&gt;));
    }
};
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And you can see above, since we want to check for both the &amp;quot;flag&amp;quot; and &amp;quot;bomb&amp;quot; classes, we can use &lt;code&gt;.flag.bomb&lt;/code&gt;, which for CSS reads as &amp;quot;flag class AND bomb class&amp;quot;. But then lower down since we only want to grab &lt;code&gt;p&lt;/code&gt; elements that are inside the board (specifically to exclude the flag counter element), we we &lt;code&gt;#board p&lt;/code&gt; which reads to CSS as &amp;quot;paragraphs IN the board ID&amp;quot;. I strongly recommend learning &lt;a href=&quot;https://css-tricks.com/how-css-selectors-work/&quot;&gt;how CSS selectors work&lt;/a&gt; because it&amp;#39;s pretty powerful. But also this is a &lt;a href=&quot;https://www.w3schools.com/cssref/css_selectors.php&quot;&gt;great CSS selector reference resource&lt;/a&gt; for you to look through to see all the neat tricks.&lt;/p&gt;
&lt;p&gt;The last thing we have to do then is to call &lt;code&gt;checkForWin&lt;/code&gt; in both places where the player interacts with the board to see if that interaction won or lost the game. So well add those calls to the end of both the &lt;code&gt;handlePlaceFlag&lt;/code&gt; and &lt;code&gt;handleClick&lt;/code&gt; functions.&lt;/p&gt;
&lt;p&gt;Now when we refresh and check we should be able to flag each bomb and trigger a win, and then reset the game and click each of the non-bomb squares and trigger a win. And now we have a fully playable Minesweeper game!&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper16.jpg&quot;
alt=&quot;Our Minesweeper board but the title text has changed to &apos;You win!&apos; and the board is fully marked as clicked&quot; /&gt;
&lt;h3 id=&quot;style-the-board&quot;&gt;Style the board&lt;/h3&gt;
&lt;p&gt;Before we&amp;#39;re done though we should make the game look good. We have all of our functionality together but we are still revealing where the bombs are and do want to make our game look attractive.&lt;/p&gt;
&lt;p&gt;Aesthetically, I wanted to imitate some early looks of the game, but also I wanted to have a chiseled stone look similar to an old chess game my grandmother had on her computer in the late nineties.&lt;/p&gt;
&lt;p&gt;Note: Like I said above, CSS invokes the fear of the ancients in many developers, but it really is a powerful thing to learn. Even if you mostly use component libraries like Bootstrap or Tailwind, understanding CSS means you will understand how those components work &amp;quot;under the hood&amp;quot; and how best to interact with those libraries&amp;#39; APIs.&lt;/p&gt;
&lt;p&gt;The first things we will change is to remove out current &lt;code&gt;.clicked&lt;/code&gt; and &lt;code&gt;.bomb&lt;/code&gt; blocks. They only existed for us to test the game with but don&amp;#39;t really contribute to the look of the game. And now let&amp;#39;s make our &lt;code&gt;#board&lt;/code&gt; block look like:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;500px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt; auto;
    &lt;span class=&quot;hljs-attribute&quot;&gt;display&lt;/span&gt;: flex;
    &lt;span class=&quot;hljs-attribute&quot;&gt;flex-flow&lt;/span&gt;: row wrap;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid lightgray;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid gray;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid gray;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid lightgray;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The &lt;code&gt;border&lt;/code&gt; attribute (as well as other box model striibutes like &lt;code&gt;padding&lt;/code&gt;) can be broken out into its individual sides. This lets us color and size the sides individually and in this case let&amp;#39;s us create a faux-shadow effect that looks like of like a flat-topped pyramid.&lt;/p&gt;
&lt;p&gt;Next we want to style each of our squares. The squares are all &lt;code&gt;p&lt;/code&gt; elements in the board so we can use the same selector we want our existing &lt;code&gt;#board p&lt;/code&gt; block to look like this:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; &lt;span class=&quot;hljs-selector-tag&quot;&gt;p&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;42px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;42px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;padding&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;line-height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;42px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;text-align&lt;/span&gt;: center;
    &lt;span class=&quot;hljs-attribute&quot;&gt;background-color&lt;/span&gt;: darkgray;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid lightgray;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid gray;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid gray;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid lightgray;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;It was noted towards the beginning of the project that borders, margin, and padding add to the  width and to keep the squares only 50 pixels wide so we have to subtract both sides&amp;#39; border and  from the &lt;code&gt;width&lt;/code&gt; and &lt;code&gt;line-height&lt;/code&gt;. In this case the borders will also give a faux-shadow look for each of the squares.&lt;/p&gt;
&lt;p&gt;Finally we want to re-add a &lt;code&gt;.clicked&lt;/code&gt; block to show a clear difference when the squares are clicked. So let&amp;#39;s add a &lt;code&gt;#board .clicked&lt;/code&gt; block:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; &lt;span class=&quot;hljs-selector-class&quot;&gt;.clicked&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;50px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;50px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border&lt;/span&gt;: none;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;So now when we refresh and check, the board should appear like raised stone except when we click on a square and then clicked squares should appear flat. Also this is the first time we&amp;#39;re seeing the game as a fully-working game where you aren&amp;#39;t shown where all the bombs are at the start. So now is a good time to test the game and check over how it&amp;#39;s playing in full.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper17.jpg&quot;
alt=&quot;Our Minesweeper board styled to look like cut stone with raised squares representing that they are unclicked&quot; /&gt;
&lt;h3 id=&quot;color-the-numbers&quot;&gt;Color the numbers&lt;/h3&gt;
&lt;p&gt;Another feature of most Minesweeper implementations is color-coding the different numbers to see the &amp;quot;urgency&amp;quot; of squares at a glance, but also I have a bias towards color-coding because it helps my particular way of thinking. This will require adding a little more JavaScript to set those colors with more classes.&lt;/p&gt;
&lt;p&gt;So back in our &lt;code&gt;app.js&lt;/code&gt; file, let&amp;#39;s add a little extra code to our &lt;code&gt;checkNeighbors&lt;/code&gt; function starting with a new constant after the &lt;code&gt;neighborEdgesAndIndexes&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-attribute&quot;&gt;const numberClasses&lt;/span&gt; = [
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;one&quot;&lt;/span&gt;,
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;two&quot;&lt;/span&gt;,
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;three&quot;&lt;/span&gt;,
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;four&quot;&lt;/span&gt;,
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;five&quot;&lt;/span&gt;,
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;six&quot;&lt;/span&gt;,
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;seven&quot;&lt;/span&gt;,
    &lt;span class=&quot;hljs-string&quot;&gt;&quot;eight&quot;&lt;/span&gt;,
];
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Then at the bottom inside our &lt;code&gt;if (count &amp;gt; 0)&lt;/code&gt; block, we will add &lt;code&gt;squareObj.classList.add(numberClasses[count - 1]);&lt;/code&gt;. CSS classes don&amp;#39;t like to start with numbers so we want to manually set the classes with the number words instead. Once we&amp;#39;ve set these classes we can update our CSS:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-class&quot;&gt;.one&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: blue;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.two&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: green;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.three&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: yellow;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.four&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: darkorange;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.five&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: red;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.six&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: purple;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.seven&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: pink;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.eight&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: blue;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;When we refresh and check the game, if we find as many number as we can we can see the different number colors. The top half of the numbers are pretty rare, but you can also edit the classes in the Elements inspector so that you can check the different classes are working (and whether or not you like the colors.)&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper18.jpg&quot;
alt=&quot;Our Minesweeper board with blue 1s and green 2s to help differentiate them and make them easier to read&quot; /&gt;
&lt;h3 id=&quot;finish-styling-rest-of-game&quot;&gt;Finish styling rest of game&lt;/h3&gt;
&lt;p&gt;Now we have a pretty well put together game and just need to add some polish. To better accomplish this, we&amp;#39;ll rearrange our HTML a little bit:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-html&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;body&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;header&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;Minesweeper&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;nav&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;reset&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Reset&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;easy&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Easy&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;medium&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Medium&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;hard&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Hard&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;flagCounter&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Flags left:&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;p&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;nav&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;header&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;main&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;board&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;main&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;app.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;undefined&quot;&gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;body&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now we have some specific elements to grab and arrange better. Next we&amp;#39;ll change our CSS file to look like:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-pseudo&quot;&gt;:root&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;--highlight&lt;/span&gt;: &lt;span class=&quot;hljs-built_in&quot;&gt;rgba&lt;/span&gt;(255, 255, 255, 0.5);
    &lt;span class=&quot;hljs-attribute&quot;&gt;--lowlight&lt;/span&gt;: &lt;span class=&quot;hljs-built_in&quot;&gt;rgba&lt;/span&gt;(0, 0, 0, 0.3);
}

&lt;span class=&quot;hljs-selector-tag&quot;&gt;html&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;font-family&lt;/span&gt;: monospace;
    &lt;span class=&quot;hljs-attribute&quot;&gt;background-color&lt;/span&gt;: lightgray;
}

&lt;span class=&quot;hljs-selector-tag&quot;&gt;header&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;492px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt; auto;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;8px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;8px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;8px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;8px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
}

&lt;span class=&quot;hljs-selector-tag&quot;&gt;h1&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;text-align&lt;/span&gt;: center;
}

&lt;span class=&quot;hljs-selector-tag&quot;&gt;nav&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;display&lt;/span&gt;: flex;
    &lt;span class=&quot;hljs-attribute&quot;&gt;flex-flow&lt;/span&gt;: row nowrap;
    &lt;span class=&quot;hljs-attribute&quot;&gt;justify-content&lt;/span&gt;: space-around;
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;476px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt; auto;
    &lt;span class=&quot;hljs-attribute&quot;&gt;padding&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;8px&lt;/span&gt;;
}

&lt;span class=&quot;hljs-selector-tag&quot;&gt;nav&lt;/span&gt; &lt;span class=&quot;hljs-selector-tag&quot;&gt;button&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-radius&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;background-color&lt;/span&gt;: transparent;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
}

&lt;span class=&quot;hljs-selector-tag&quot;&gt;nav&lt;/span&gt; &lt;span class=&quot;hljs-selector-tag&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;hljs-selector-pseudo&quot;&gt;:hover&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;background-color&lt;/span&gt;: &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
}

&lt;span class=&quot;hljs-selector-tag&quot;&gt;nav&lt;/span&gt; &lt;span class=&quot;hljs-selector-tag&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;hljs-selector-pseudo&quot;&gt;:active&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.one&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: blue;
}
&lt;span class=&quot;hljs-selector-class&quot;&gt;.two&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: green;
}
&lt;span class=&quot;hljs-selector-class&quot;&gt;.three&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: yellow;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.four&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: darkorange;
}

&lt;span class=&quot;hljs-selector-class&quot;&gt;.five&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: red;
}
&lt;span class=&quot;hljs-selector-class&quot;&gt;.six&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: purple;
}
&lt;span class=&quot;hljs-selector-class&quot;&gt;.seven&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: pink;
}
&lt;span class=&quot;hljs-selector-class&quot;&gt;.eight&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: blue;
}
&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;500px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt; auto;
    &lt;span class=&quot;hljs-attribute&quot;&gt;display&lt;/span&gt;: flex;
    &lt;span class=&quot;hljs-attribute&quot;&gt;flex-flow&lt;/span&gt;: row wrap;
    &lt;span class=&quot;hljs-attribute&quot;&gt;cursor&lt;/span&gt;: pointer;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
}

&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; &lt;span class=&quot;hljs-selector-tag&quot;&gt;p&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;42px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;42px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;padding&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;line-height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;42px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;text-align&lt;/span&gt;: center;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
}

&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; &lt;span class=&quot;hljs-selector-tag&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;hljs-selector-pseudo&quot;&gt;:active&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-top&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-right&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-bottom&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--highlight);
    &lt;span class=&quot;hljs-attribute&quot;&gt;border-left&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;4px&lt;/span&gt; solid &lt;span class=&quot;hljs-built_in&quot;&gt;var&lt;/span&gt;(--lowlight);
}

&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; &lt;span class=&quot;hljs-selector-class&quot;&gt;.clicked&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;50px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;50px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border&lt;/span&gt;: none;
}

&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; &lt;span class=&quot;hljs-selector-class&quot;&gt;.clicked&lt;/span&gt;&lt;span class=&quot;hljs-selector-pseudo&quot;&gt;:active&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;border&lt;/span&gt;: none;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And we&amp;#39;ll go through what that changes from top to bottom. If you refresh and check, you can see the changes as you read about them below: &lt;/p&gt;
&lt;p&gt;At the very top with the &lt;code&gt;:root&lt;/code&gt; block we set some custom colors that add a somewhat transparent highlight or shadow to the borders instead of using &lt;code&gt;lightgray&lt;/code&gt; and &lt;code&gt;gray&lt;/code&gt;. That transparency will also help later if we want to set different background colors to the game.&lt;/p&gt;
&lt;p&gt;Speaking of in the &lt;code&gt;html&lt;/code&gt; block we set a new &lt;code&gt;background-color&lt;/code&gt; attribute. Doing so at this level sets that color for the whole page (with some exceptions, elements have a &lt;code&gt;transparent&lt;/code&gt; background by default). Also you can change the &lt;code&gt;background-color&lt;/code&gt; to any color you like and the board will now still create realistic(-ish) looking shadows since the custom colors are just lightly-transparent white and black. Try some colors out!&lt;/p&gt;
&lt;p&gt;Next we add a &lt;code&gt;header&lt;/code&gt; block to get the page&amp;#39;s header to match the decor of the game board. The notable change here is that we are using the &lt;code&gt;var()&lt;/code&gt; function to set our custom colors from the &lt;code&gt;:root&lt;/code&gt; block.&lt;/p&gt;
&lt;p&gt;Now we move on to the &lt;code&gt;nav&lt;/code&gt; where we want to use Flexbox to arrange the buttons as a row with space around them. The buttons are one of those rare elements that come with some default styling. So to get them to match the styling pattern we&amp;#39;ve been using so far, we have to undo the &lt;code&gt;border-radius&lt;/code&gt; &amp;amp; &lt;code&gt;background-color&lt;/code&gt;. The other attribute that has a default is the &lt;code&gt;border&lt;/code&gt;, but we want to style that anyway so that&amp;#39;s taken care of.&lt;/p&gt;
&lt;p&gt;The buttons have some &lt;code&gt;:hover&lt;/code&gt; and &lt;code&gt;:active&lt;/code&gt; state defaults as well. But also if we switch the colors of the border segments while the player is clicking (aka: the element is &lt;code&gt;:active&lt;/code&gt;), the shadow appears to invert creating an illusion that the button is now concave. We&amp;#39;ll also visit these with the squares in a second.&lt;/p&gt;
&lt;p&gt;Most of the rest of the changes are switching the border colors to use the custom colors and use the transparency that comes with them. Notably we also are adding an &lt;code&gt;:active&lt;/code&gt; state to the squares that also invert the border colors and help make the squares look &amp;quot;pressed in&amp;quot; when the player clicks on them. &lt;/p&gt;
&lt;p&gt;And finally the last change here is to set an &lt;code&gt;:active&lt;/code&gt; state for the &lt;code&gt;.clicked&lt;/code&gt; squares that takes away the &lt;code&gt;border&lt;/code&gt; so that there is no difference than the regular &lt;code&gt;.clicked&lt;/code&gt; squares. If the player clicks a square that is otherwise unclickable, but responds as if it should be doing something that will confuse the player.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper19.jpg&quot;
alt=&quot;Our fully done Minesweeper game with styling to make it look like cut stone.&quot;/&gt;
&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;We have a fully working game built entirely in native web tooling. This is just a static page that takes very little data to store or run (about 78 kilobytes as built here)! Web pages are pretty powerful and (while sometimes opaque or obtuse) the JavaScript and CSS can do a lot with very little.&lt;/p&gt;
&lt;p&gt;Lately I have found myself interested in &lt;a href=&quot;https://permacomputing.net/&quot;&gt;permacomputing principles&lt;/a&gt; and one of the principles is to &lt;a href=&quot;https://permacomputing.net/Principles/&quot;&gt;&amp;quot;Keep it small&amp;quot;&lt;/a&gt;. Making pages smaller also helps users use less resources to play your games or visit your sites, and to put less burdern on the user to &amp;quot;keep up&amp;quot; with system requirements for more and more complex games and sites. As I continue building out more tutorials, this is going to be a driving part of how I design projects. Small games like this will be similarly complex, but even more complex works will be designed to use as few dependencies and power as possible.&lt;/p&gt;
&lt;p&gt;Thanks for following along with this tutorial! Find more of my projects and writing at &lt;a href=&quot;https://travissouthard.com/&quot;&gt;my portfolio&lt;/a&gt; and &lt;a href=&quot;https://travissouthard.com/blog/&quot;&gt;blog&lt;/a&gt;.&lt;/p&gt;

            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/how-to-make-minesweeper-part-3.html</link>
            <pubDate>Sun, 22 Oct 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/how-to-make-minesweeper-part-3.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>How to make Minesweeper part 2</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper12.jpg&quot; alt=&quot;Our partially done Minesweeper game with blank squares, some pink ones, and an array of buttons reading &apos;reset&apos;, &apos;easy&apos;, &apos;medium&apos;, and &apos;hard&apos;&quot;/&gt;
      &lt;/a&gt;
  
            &lt;h3 id=&quot;how-to-make-minesweeper-part-2&quot;&gt;How to make Minesweeper part 2&lt;/h3&gt;
    &lt;p&gt;This is part 2 of 3 and I recommend starting with &lt;a
            href=&quot;https://travissouthard.com/blog/how-to-make-minesweeper-part-1.html&gt;part 1&lt;/a&gt; before moving on
        to this part. If you have already worked through part 1, welcome back! In the previous part, we built a board of
        100 squares with 20 bombs, and randomized them around the board. In this part we will build out most of the
        gameplay.&lt;/p&gt;
    &lt;h3 id=&quot;refactor-click-handler-to-own-function&quot;&gt;Refactor click handler to own function&lt;/h3&gt;
    &lt;p&gt;To help keep our &lt;code&gt;createBoard&lt;/code&gt; function from getting too cluttered, we can start refactoring out some
        functionality into its own function.&lt;/p&gt;
    &lt;p&gt;Note: Refactoring is a specific action in which the functionality of our code stays the same, but we change the
        code to (ideally) be more readable or more efficient. At the end of any refactor, nothing should be different
        from the user perspective.&lt;/p&gt;
    &lt;p&gt;A great candidate here is to take our callback code in the &lt;code&gt;addEventListener&lt;/code&gt; to its own function. So
        we will add the following above our &lt;code&gt;createBoard&lt;/code&gt; function.&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; handleClick = &lt;span class=&quot;hljs-function&quot;&gt;(&lt;span class=&quot;hljs-params&quot;&gt;squareObj&lt;/span&gt;) =&amp;gt;&lt;/span&gt; {
                &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; clickedClass = &lt;span class=&quot;hljs-string&quot;&gt;&quot;clicked&quot;&lt;/span&gt;;
                &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (!squareObj.classList.contains(clickedClass)) {
                    squareObj.classList.add(clickedClass);
                }
            };
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;And the &lt;code&gt;addEventListener&lt;/code&gt; line will be:
        &lt;code&gt;square.addEventListener(&amp;quot;click&amp;quot;, () =&amp;gt; handleClick(square));&lt;/code&gt;
    &lt;/p&gt;
    &lt;p&gt;Note: The &lt;code&gt;clickedClass&lt;/code&gt; declaration is also likely a good candidate for a global constant or a
        &lt;code&gt;classes&lt;/code&gt; object if we find ourselves adding other classes later. Especially if we create bigger
        boards, we want to be mindful of memory efficiency, and not be redeclaring the same string every loop.
    &lt;/p&gt;
    &lt;h3 id=&quot;add-reset-feature-and-game-over-if-click-bomb&quot;&gt;Add reset feature and game over if click bomb&lt;/h3&gt;
    &lt;p&gt;And now we should add one last bit of infrastructure before adding in gameplay. We want to be able to reset the
        board without refreshing the whole page. Let&amp;#39;s start that by adding a new button to the page by adding
        &lt;code&gt;&amp;lt;button id=&amp;quot;reset&amp;quot;&amp;gt;Reset&amp;lt;/button&amp;gt;&lt;/code&gt; between the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; and
        board.
    &lt;/p&gt;
    &lt;p&gt;Now let&amp;#39;s set up the reset logic. At the top of &lt;code&gt;app.js&lt;/code&gt;: we&amp;#39;ll add
        &lt;code&gt;let isGameOver = false;&lt;/code&gt; to the bottom of our constants block. We&amp;#39;ll use this more in the next
        section.
    &lt;/p&gt;
    &lt;p&gt;Next we&amp;#39;ll go down to where we select and declare the board and add
        &lt;code&gt;const reset = document.getElementById(&amp;quot;reset&amp;quot;);&lt;/code&gt;
    &lt;/p&gt;
    &lt;p&gt;Then, just above our &lt;code&gt;handleClick&lt;/code&gt; function, we&amp;#39;ll add in our reset function:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const resetGame = &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;()&lt;/span&gt; =&amp;gt;&lt;/span&gt; {
                isGameOver = &lt;span class=&quot;hljs-literal&quot;&gt;false&lt;/span&gt;;
                board.innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;&quot;&quot;&lt;/span&gt;;
            };
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;At the top of our &lt;code&gt;createBoard&lt;/code&gt; function, we will call &lt;code&gt;resetGame();&lt;/code&gt; to ensure we clear
        the board before building it again.&lt;/p&gt;
    &lt;p&gt;And finally we will add an event listener to the &lt;code&gt;reset&lt;/code&gt; DOM object just before we create the board at
        the bottom.&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-selector-tag&quot;&gt;reset&lt;/span&gt;&lt;span class=&quot;hljs-selector-class&quot;&gt;.addEventListener&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;&quot;click&quot;&lt;/span&gt;, createBoard);
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Note: On looking at this again, it may make more sense to call &lt;code&gt;createBoard&lt;/code&gt; at the bottom of the
        &lt;code&gt;resetGame&lt;/code&gt; function and have the &lt;code&gt;onClick&lt;/code&gt; callback be &lt;code&gt;resetGame&lt;/code&gt; instead.
        This will need some rearranging but is very likely worth the work for a little clarity.
    &lt;/p&gt;
    &lt;p&gt;Refresh and check to make sure the reset button does what we expect. Right now the two ways to see if it&amp;#39;s
        working is to see the squares get rearranged. If there are any green squares from clicking on the board, those
        should also be cleared from the board during the reset.&lt;/p&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper07.jpg&quot;
        alt=&quot;Our Minesweeper board with a few green selected squares and one exploded one&quot; /&gt;
    &lt;h3 id=&quot;add-game-over-condition-and-bomb-to-click-handler&quot;&gt;Add game over condition and bomb to click handler&lt;/h3&gt;
    &lt;p&gt;Let&amp;#39;s add some actual gameplay features! The one we&amp;#39;ll start with is getting a game over, which is not
        the most fun feature, but is one that we&amp;#39;ll need a lot going forward. We already have an
        &lt;code&gt;isGameOver&lt;/code&gt; boolean, and our reset function already sets it back to &lt;code&gt;false&lt;/code&gt; but we
        haven&amp;#39;t set it to &lt;code&gt;true&lt;/code&gt; anywhere yet.
    &lt;/p&gt;
    &lt;p&gt;In Minesweeper, there&amp;#39;s only two reasons why the game would be over:&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;The player successfully flagged all the bombs or revealed all the valid squares, thus winning&lt;/li&gt;
        &lt;li&gt;The player clicked on a bomb, thus losing&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;We don&amp;#39;t have the ability to flag bombs yet, but the player is able to click them. What we will want to do is
        check if the square that was clicked has a &amp;quot;bomb&amp;quot; class. DOM objects have a &lt;code&gt;classList&lt;/code&gt;
        object and we can check if a string is among those classes with the &lt;code&gt;classList.contains()&lt;/code&gt; method. So
        at the top of &lt;code&gt;handleClick&lt;/code&gt; let&amp;#39;s add:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (squareObj.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;bomb&quot;&lt;/span&gt;)) {
                &lt;span class=&quot;hljs-attr&quot;&gt;isGameOver&lt;/span&gt; = &lt;span class=&quot;hljs-literal&quot;&gt;true&lt;/span&gt;;
                squareObj.&lt;span class=&quot;hljs-attr&quot;&gt;innerHTML&lt;/span&gt; = &lt;span class=&quot;hljs-string&quot;&gt;&quot;💥&quot;&lt;/span&gt;;
            }
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Once the game is over, we want to make the board stay put and no longer be clickable. So we can add a check to
        &lt;code&gt;handleClick&lt;/code&gt; to check if the game is over, and in that case return from the function early,
        effectively stopping the click action. At the top of &lt;code&gt;handleClick&lt;/code&gt; add
        &lt;code&gt;if (isGameOver) return;&lt;/code&gt;
    &lt;/p&gt;
    &lt;p&gt;Refresh and check and let&amp;#39;s test a few things now. Click some smiley faces, and these should still turn
        green. Click a bomb and it should &amp;quot;explode&amp;quot;. Then click more smiley faces or bombs to confirm that no
        click actions are happening now that the game is over. Finally click the reset button to reset the game and be
        able to click in the game again.&lt;/p&gt;
    &lt;h3 id=&quot;add-ability-to-check-neighbors&quot;&gt;Add ability to check neighbors&lt;/h3&gt;
    &lt;p&gt;A key feature in minesweeper is to check how many bombs are next to the square you just clicked. This helps the
        player know which square to click next or where a bomb might be. Each square that&amp;#39;s not on an edge has eight
        neighbors, and we can visualize how to access those neighbors by displaying their array index numbers instead of
        the emojis.&lt;/p&gt;
    &lt;p&gt;We do still want to keeo track of where the bombs are, so let&amp;#39;s add the following to the CSS file:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-class&quot;&gt;.bomb&lt;/span&gt; {
                &lt;span class=&quot;hljs-attribute&quot;&gt;background-color&lt;/span&gt;: pink;
            }
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Now instead of adding emojis let&amp;#39;s change the line in &lt;code&gt;createBoard&lt;/code&gt; where we declare the
        square&amp;#39;s &lt;code&gt;innerHTML&lt;/code&gt; to: &lt;code&gt;square.innerHTML = `${i}`;&lt;/code&gt;&lt;/p&gt;
    &lt;p&gt;Also rather than adding the &lt;code&gt;i&lt;/code&gt; as a class; we know these will be unique to each square and would be a
        good candidate to set the squares&amp;#39; &lt;code&gt;id&lt;/code&gt; attributes to that &lt;code&gt;i&lt;/code&gt; value. Under our
        &lt;code&gt;square.innerHTML&lt;/code&gt; line let&amp;#39;s add: &lt;code&gt;square.id = `${i}`;&lt;/code&gt;
    &lt;/p&gt;
    &lt;p&gt;When we refresh and check we should see the squares numbered 0-99 with 20 randomly-placed pink squares.&lt;/p&gt;
    &lt;p&gt;Now that we can see the numbers, we can examine how we can use those numbers to check each of the square&amp;#39;s
        neighbors. Let&amp;#39;s look at square 12, it&amp;#39;s neighbors are (top to bottom, left to right):
        1, 2, 3, 11, 13, 21, 22, 23
        In our case, the difference between each and 12 is:
        -11, -10, -9, -1, +1, +9, +10, +11&lt;/p&gt;
    &lt;p&gt;Every board with 10 squared squares will follow this pattern, but for us wanting to choose any size in the
        future, we can make the top and bottom neighbors relative to the &lt;code&gt;width&lt;/code&gt; of the board. For example to
        get 1 from an &lt;code&gt;index&lt;/code&gt; of 12 we would say it is &lt;code&gt;index - width - 1&lt;/code&gt; and extrapolate our
        other neighbor values from that.&lt;/p&gt;
    &lt;p&gt;Let&amp;#39;s add a &lt;code&gt;checkNeighbors&lt;/code&gt; function above the &lt;code&gt;handleClick&lt;/code&gt; function that looks like
        this and then break that down:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; checkNeighbors = &lt;span class=&quot;hljs-function&quot;&gt;(&lt;span class=&quot;hljs-params&quot;&gt;squareObj&lt;/span&gt;) =&amp;gt;&lt;/span&gt; {
                &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; index = &lt;span class=&quot;hljs-built_in&quot;&gt;parseInt&lt;/span&gt;(squareObj.id);
                &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; neighborIndexes = [
                    index - width - &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;,
                    index - width,
                    index - width + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;,
                    index - &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;,
                    index + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;,
                    index + width - &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;,
                    index + width,
                    index + width + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;,
                ];
                &lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; count = &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
            
                &lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; neighborId &lt;span class=&quot;hljs-keyword&quot;&gt;of&lt;/span&gt; neighborIndexes) {
                    &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; neighbor = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;`&lt;span class=&quot;hljs-subst&quot;&gt;${neighborId}&lt;/span&gt;`&lt;/span&gt;);
                    &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (neighbor &amp;amp;&amp;amp; neighbor.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;bomb&quot;&lt;/span&gt;)) {
                        count++;
                    }
                }
            
                squareObj.innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;`&lt;span class=&quot;hljs-subst&quot;&gt;${count}&lt;/span&gt;`&lt;/span&gt;;
            };
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;There are three steps to this function:&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Establish our constants and variables&lt;/li&gt;
        &lt;li&gt;For each neighbor in the array, increment the &lt;code&gt;count&lt;/code&gt; when that neighbor has a bomb&lt;/li&gt;
        &lt;li&gt;Set the &lt;code&gt;innerHTML&lt;/code&gt; of the clicked square to be the &lt;code&gt;count&lt;/code&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;And then of course we have to call &lt;code&gt;checkNeighbors&lt;/code&gt; as part of our &lt;code&gt;handleClick&lt;/code&gt; function.
        So we&amp;#39;ll add &lt;code&gt;checkNeighbors(squareObj);&lt;/code&gt; within the &lt;code&gt;if&lt;/code&gt; block where we check if the
        square is not clicked.&lt;/p&gt;
    &lt;p&gt;When we refresh and check now, we should be able to click any non-pink square and be shown the number of pink
        squares next to each clicked square.&lt;/p&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper08.jpg&quot;
        alt=&quot;Our Minesweeper board with a few green selected squares that show how many bombs are next to them&quot; /&gt;
    &lt;h3 id=&quot; fix-counting-for-squares-at-edges&quot;&gt;Fix counting for squares at edges&lt;/h3&gt;
    &lt;p&gt;Our function to check neighbors is working pretty well, but if you can find a board configuration where a square
        on the left edge has a pink square in the right-most square of the row above or a square on the right has a pink
        square on the left-most square of the row below, you may notice that the count has too many bombs in it.&lt;/p&gt;
    &lt;p&gt;From the user perspective a square on an edge only has five neighbors, and a corner square only has three. But
        our array-based method has a drawback: It doesn&amp;#39;t know where the edges are. An array has no concept of
        edges. It is only a line of numbers we tricked into forming rows. So we will have to add a way to check the
        edges in our &lt;code&gt;checkNeighbors&lt;/code&gt; function.&lt;/p&gt;
    &lt;p&gt;Because we are asking the DOM for elements with specific IDs (the &lt;code&gt;neighbor&lt;/code&gt; in the loop above) if it
        doesn&amp;#39;t exist then it will return &lt;code&gt;undefined&lt;/code&gt;. Naturally, an &lt;code&gt;undefined&lt;/code&gt; object
        won&amp;#39;t have a &amp;quot;bomb&amp;quot; and will not increment our &lt;code&gt;count&lt;/code&gt;. For example, if we&amp;#39;re on
        square &amp;quot;94&amp;quot; it&amp;#39;s nonexistent lower neighbors would be 103, 104, &amp;amp; 105 and would return
        &lt;code&gt;undefined&lt;/code&gt; when we try to &lt;code&gt;getElementById&lt;/code&gt; for those values.
    &lt;/p&gt;
    &lt;p&gt;However, for square &amp;quot;90&amp;quot; its left neighbors are 79, 89, &amp;amp; 99, which all exist, but are all over on
        the right side of the board, and for our gameplay need to not be checked. For the purposes of this tutorial and
        showing the concept we will check for all the edges. This will also make our loop skip unnecessary checks and
        make it more efficient, even if by a little.&lt;/p&gt;
    &lt;p&gt;So let&amp;#39;s define some edges. Top and bottom will be pretty easy since those are rows made of consecutive
        numbers and we have a constant defined for how big our rows are. The top row is
        &lt;code&gt;0, 1, 2, 3, 4, 5, 6, 7, 8, 9&lt;/code&gt;, so we know that they are all less than 10. But like above, we want
        our boards to be variably sized and don&amp;#39;t want to update this check every time, so we can use the
        &lt;code&gt;width&lt;/code&gt; constant. We know our square is on the top edge if &lt;code&gt;index &amp;lt; width&lt;/code&gt;.
    &lt;/p&gt;
    &lt;p&gt;Likewise we know that the bottom row indeces (&lt;code&gt;90, 91, 92, 93, 94, 95, 96, 97, 98, 99&lt;/code&gt;) are all within
        one &lt;code&gt;width&lt;/code&gt; of 100. We are storing 100 in the constant &lt;code&gt;boardSize&lt;/code&gt; that we haven&amp;#39;t
        used in a while. So we know a square is in the bottom row if &lt;code&gt;index &amp;gt;= boardSize - width&lt;/code&gt;.&lt;/p&gt;
    &lt;p&gt;So we can add to our &lt;code&gt;checkNeighbors&lt;/code&gt; function after we define our &lt;code&gt;index&lt;/code&gt; but before we
        define the &lt;code&gt;neighborIndexes&lt;/code&gt; the following:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; topEdge = index &amp;lt; &lt;span class=&quot;hljs-built_in&quot;&gt;width&lt;/span&gt;;
            &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; bottomEdge = index &amp;gt;= boardSize - &lt;span class=&quot;hljs-built_in&quot;&gt;width&lt;/span&gt;;
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;The right and left edges will also be kind of paired so let&amp;#39;s look at the numbers for our 10x10 grid:&lt;/p&gt;
    &lt;pre&gt;&lt;code&gt;&lt;span class=&quot;hljs-symbol&quot;&gt;Left:&lt;/span&gt; &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;10&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;20&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;30&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;40&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;50&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;60&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;70&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;80&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;90&lt;/span&gt;
            &lt;span class=&quot;hljs-symbol&quot;&gt;Right:&lt;/span&gt; &lt;span class=&quot;hljs-number&quot;&gt;9&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;19&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;29&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;39&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;49&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;59&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;69&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;79&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;89&lt;/span&gt;, &lt;span class=&quot;hljs-number&quot;&gt;99&lt;/span&gt;
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;The &amp;quot;ones&amp;quot; digit of each number has the same value. This looks like multiples of 10 (and 0) and numbers
        that are each 1 off of multiples of 10. For multiples of any number we can check the &lt;a
            href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder&quot;&gt;modulo&lt;/a&gt; of
        that number.&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; leftEdge = index % &lt;span class=&quot;hljs-built_in&quot;&gt;width&lt;/span&gt; === &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
            &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; rightEdge = (index + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;) % &lt;span class=&quot;hljs-built_in&quot;&gt;width&lt;/span&gt; === &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Note: Those parens in &lt;code&gt;rightEdge&lt;/code&gt; are key if you are using Prettier for formatting because it loves
        autoformatting to &lt;code&gt;index + (1 % width)&lt;/code&gt; which will never work how you want and only lead to
        frustration. But also because modulo comes before addition in the order of operations and the parens help give
        you control.&lt;/p&gt;
    &lt;p&gt;So once these four get added we will want to change our &lt;code&gt;neighborIndexes&lt;/code&gt; to include our edge checks.
        While I feel like this next part was pretty clever, clever solutions make me nervous:&lt;/p&gt;
    &lt;p&gt;&lt;code&gt;Everyone knows that debugging is twice as hard as writing a program in the first place. So if you&amp;#39;re as clever as you can be when you write it, how will you ever debug it?&lt;/code&gt;
        - &lt;a href=&quot;http://www.linusakesson.net/programming/kernighans-lever/&quot;&gt;Kernighan&amp;#39;s lever&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;We&amp;#39;ll be changing &lt;code&gt;neighborIndexes&lt;/code&gt; to be a 2D array (an array full of arrays), each inner array
        will be a pair of values being: the edge check logic and the index of that neighbor. In this case we&amp;#39;ll also
        rename the constant to &lt;code&gt;neighborEdgesAndIndexes&lt;/code&gt; though this likely still needs a better name.&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const neighborEdgesAndIndexes = [
                [ !leftEdge &amp;amp;&amp;amp; !topEdge    , index - width - &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt; ],
                [ !topEdge                 , index - width     ],
                [ !rightEdge &amp;amp;&amp;amp; !topEdge   , index - width + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt; ],
                [ !leftEdge                , index - &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;         ],
                [ !rightEdge               , index + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;         ],
                [ !leftEdge &amp;amp;&amp;amp; !bottomEdge , index + width - &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt; ],
                [ !bottomEdge              , index + width     ],
                [ !rightEdge &amp;amp;&amp;amp; !bottomEdge, index + width + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt; ],
            ];
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Most of my trepidation with this constant is that it looks pretty intimidating at first glance, but I did give it
        some whitespace here to make it a little clearer what&amp;#39;s what. What I like about it is how it gets used in
        our loop for each neighbor, because we&amp;#39;ll be using destructuring! Instead of just &lt;code&gt;neighborId&lt;/code&gt;,
        we&amp;#39;ll have &lt;code&gt;shouldCheck and neighborId&lt;/code&gt; and make it very easy to skip if we should not check.&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; [shouldCheck, neighborId] &lt;span class=&quot;hljs-keyword&quot;&gt;of&lt;/span&gt; neighborEdgesAndIndexes) {
                &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (!shouldCheck) &lt;span class=&quot;hljs-keyword&quot;&gt;continue&lt;/span&gt;;
                &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; neighbor = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;`&lt;span class=&quot;hljs-subst&quot;&gt;${neighborId}&lt;/span&gt;`&lt;/span&gt;);
                &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (neighbor &amp;amp;&amp;amp; neighbor.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;bomb&quot;&lt;/span&gt;)) {
                    count++;
                }
            }
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Note: On second look, the &lt;code&gt;shouldCheck&lt;/code&gt; value is a bit of a double negative how we&amp;#39;re using it.
        Rather than all those &lt;code&gt;!&lt;/code&gt;s in the arrays and the &lt;code&gt;!&lt;/code&gt; in the &lt;code&gt;if&lt;/code&gt;, we could
        remove all the &lt;code&gt;!&lt;/code&gt;s and rename &lt;code&gt;shouldCheck&lt;/code&gt; to &lt;code&gt;shouldNotCheck&lt;/code&gt; or
        &lt;code&gt;shouldSkip&lt;/code&gt;.
    &lt;/p&gt;
    &lt;p&gt;Now with a refresh and check we should see accurate counts of pink squares when we click on the non-pink squares.
        We should check corners and edges to make sure they work as expected.&lt;/p&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper09.jpg&quot;
        alt=&quot;Our Minesweeper board with a few green selected squares that show the correct counts of bombs at the edges&quot; /&gt;
    &lt;h3 id=&quot;add-recursive-calls-if-square-is-zero&quot;&gt;Add recursive calls if square is zero&lt;/h3&gt;
    &lt;p&gt;One of the more satisfying parts about playing minesweeper is clicking on an empty square with no bombs
        surrounding it because it then reveals all its neighbors and if those neighbors are empty then &lt;strong&gt;each of
            those neaighbors&amp;#39;&lt;/strong&gt; neighbors are revealed and then &lt;strong&gt;each of THOSE
            neaighbors&amp;#39;&lt;/strong&gt; neighbors are revealed and so on. When we see a pattern like that it&amp;#39;s probably
        a good case for recursion!&lt;/p&gt;
    &lt;p&gt;Note: Recursion can be a scary concept and in our case the recursion will be a little removed but is still there.
        One thing to remember with recursion is that we want to avoid infinite loops and thus need an exit condition.
        Luckily we already have one built in, and I&amp;#39;ll explain below.&lt;/p&gt;
    &lt;p&gt;Let&amp;#39;s add the following chunk after the &lt;code&gt;for&lt;/code&gt; loop where we increment the &lt;code&gt;count&lt;/code&gt;:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (count === &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;) {
                &lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; [shouldCheck, neighborId] &lt;span class=&quot;hljs-keyword&quot;&gt;of&lt;/span&gt; neighborEdgesAndIndexes) {
                    &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (!shouldCheck) &lt;span class=&quot;hljs-keyword&quot;&gt;continue&lt;/span&gt;;
                    &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; neighbor = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;`&lt;span class=&quot;hljs-subst&quot;&gt;${neighborId}&lt;/span&gt;`&lt;/span&gt;);
                    handleClick(neighbor);
                }
            }
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;What does this loop do? If the count for this square is 0, loop over each of its neighbors, if we should check
        them, and run &lt;code&gt;handleClick&lt;/code&gt; on that neighbor. &lt;code&gt;handleClick&lt;/code&gt; will check if the neighbor has
        already been clicked and if not, will run &lt;code&gt;checkNeighbors&lt;/code&gt; on it. This is our recursive call:
        &lt;code&gt;checkNeighbors&lt;/code&gt; will call &lt;code&gt;handleClick&lt;/code&gt; on those neighbors it&amp;#39;s checking which will
        call &lt;code&gt;checkNeighbors&lt;/code&gt; which will call &lt;code&gt;handleClick&lt;/code&gt; and so on until all the 0s and their
        neighbors have been clicked.
    &lt;/p&gt;
    &lt;p&gt;Above I mentioned we have a buit in exit condition for our recursion, which is that in &lt;code&gt;handleClick&lt;/code&gt;,
        this only calls &lt;code&gt;checkNeighbors&lt;/code&gt; if the square hasn&amp;#39;t been clicked. If it has been, then we end
        the function there. This prevents a square checking all eight of its neighbors and then those neighbors checking
        the original square that checked them causing an infinite loop.&lt;/p&gt;
    &lt;p&gt;Refresh and check by clicking on a square with no pink squares around it so we can see all those 0s appear!
        Groups of 0s should now show up like little seas with continents of bombs with shores of 1s and 2s.&lt;/p&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper10.jpg&quot;
        alt=&quot;Our Minesweeper board with many green selected squares showing that many squares have zero bombs next to them&quot; /&gt;
    &lt;h3 id=&quot;refactor-our-repeated-loops-into-own-function&quot;&gt;Refactor our repeated loops into own function&lt;/h3&gt;
    &lt;p&gt;Eagle-eyed learners will notice that we have two nearly identical loops. stepping through neighbors and doing
        something to them. The principle of &lt;a href=&quot;https://en.wikipedia.org/wiki/Don%27t_repeat_yourself&quot;&gt;DRY code
            (Don&amp;#39;t repeat yourself)&lt;/a&gt; tells us this loop should be its own function that gets called multiple
        times to make our code easier to read, debug, and develop in the future.&lt;/p&gt;
    &lt;p&gt;Let&amp;#39;s start by writing out what code is shared in both loops:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; [shouldCheck, neighborId] &lt;span class=&quot;hljs-keyword&quot;&gt;of&lt;/span&gt; neighborEdgesAndIndexes) {
                &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (!shouldCheck) &lt;span class=&quot;hljs-keyword&quot;&gt;continue&lt;/span&gt;;
                &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; neighbor = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;`&lt;span class=&quot;hljs-subst&quot;&gt;${neighborId}&lt;/span&gt;`&lt;/span&gt;);
                &lt;span class=&quot;hljs-comment&quot;&gt;// Some stuff we want to do to the neighbor&lt;/span&gt;
            }
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;We do still want access to &lt;code&gt;neighborEdgesAndIndexes&lt;/code&gt; so we should keep our new function inside
        &lt;code&gt;checkNeighbors&lt;/code&gt; and I think we should declare our new function in between where we declare
        &lt;code&gt;neighborEdgesAndIndexes&lt;/code&gt; and where we declare &lt;code&gt;count&lt;/code&gt;:
    &lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; doForEachNeighbor = &lt;span class=&quot;hljs-function&quot;&gt;(&lt;span class=&quot;hljs-params&quot;&gt;callBack&lt;/span&gt;) =&amp;gt;&lt;/span&gt; {
                &lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; [shouldCheck, neighborId] &lt;span class=&quot;hljs-keyword&quot;&gt;of&lt;/span&gt; neighborEdgesAndIndexes) {
                    &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (!shouldCheck) &lt;span class=&quot;hljs-keyword&quot;&gt;continue&lt;/span&gt;;
                    &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; neighbor = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;`&lt;span class=&quot;hljs-subst&quot;&gt;${neighborId}&lt;/span&gt;`&lt;/span&gt;);
                    callBack(neighbor);
                }
            };
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Where we want to &amp;quot;do stuff&amp;quot; to the neighbor, we will use a &lt;code&gt;callBack&lt;/code&gt; function or one that
        we give as an argument to our new function. And when we call &lt;code&gt;doForEachNeighbor&lt;/code&gt;, we will have to set
        a parameter that will accept &lt;code&gt;neighbor&lt;/code&gt; as an argument in our callbacks. This is starting to sound
        like recursion again, but it really is just an oddity of callback functions.&lt;/p&gt;
    &lt;p&gt;So instead of our two loops, let&amp;#39;s replace them with:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;doForEachNeighbor(&lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;(neighborObj)&lt;/span&gt; =&amp;gt;&lt;/span&gt; {
                &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (neighborObj.classList.contains(&lt;span class=&quot;hljs-string&quot;&gt;&quot;bomb&quot;&lt;/span&gt;)) {
                    count++;
                }
            });
            &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (count === &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;) {
                doForEachNeighbor(&lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;(neighborObj)&lt;/span&gt; =&amp;gt;&lt;/span&gt; handleClick(neighborObj));
            }
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;And let&amp;#39;s break this down. First we call &lt;code&gt;doForEachNeighbor&lt;/code&gt; and our anonymous callback accepts a
        &lt;code&gt;neighborObj&lt;/code&gt; parameter and checks if that &lt;code&gt;neighborObj&lt;/code&gt; contains a bomb class. If it
        does, it increments the count. Once that&amp;#39;s complete, if &lt;code&gt;count&lt;/code&gt; is 0, we call
        &lt;code&gt;doForEachNeighbor&lt;/code&gt; again, but this time, we pass in an anonymous function that also accepts a
        &lt;code&gt;neighborObj&lt;/code&gt; parameter and calls &lt;code&gt;handleClick&lt;/code&gt; on that &lt;code&gt;neighborObj&lt;/code&gt;.
    &lt;/p&gt;
    &lt;p&gt;Like I wrote up above, refactoring means changing our code but that the functionality remains the same as before
        we changed anything. So let&amp;#39;s refresh and check and make sure that everything is still working as before.
    &lt;/p&gt;
    &lt;h3 id=&quot;show-number-only-if-count-is-greater-than-0&quot;&gt;Show number only if count is greater than 0&lt;/h3&gt;
    &lt;p&gt;Now that we have the ability to show empty areas of the board with our recursive checks, let&amp;#39;s make the board
        a little less noisy. Rather than showing &lt;code&gt;0&lt;/code&gt; in squares that have no bombs as neighbors, let&amp;#39;s
        only show the &lt;code&gt;count&lt;/code&gt; if the &lt;code&gt;count&lt;/code&gt; is greater than 0. So then these empty areas will
        also be visually empty and the board will be easier to look at.&lt;/p&gt;
    &lt;p&gt;To do this let&amp;#39;s cut &lt;code&gt;squareObj.innerHTML = `${count}`;&lt;/code&gt; from the bottom of
        &lt;code&gt;checkNeighbors&lt;/code&gt;. We&amp;#39;ll then change our &lt;code&gt;if (count === 0)&lt;/code&gt; block to be:
    &lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (count &amp;gt; &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;) {
                squareObj.innerHTML = `&lt;span class=&quot;javascript&quot;&gt;${count}&lt;/span&gt;`;
            } &lt;span class=&quot;hljs-keyword&quot;&gt;else&lt;/span&gt; {
                doForEachNeighbor(&lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;(neighborObj)&lt;/span&gt; =&amp;gt;&lt;/span&gt; handleClick(neighborObj));
            }
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;So now, we will only print the &lt;code&gt;count&lt;/code&gt; if it actually indicates a nearby bomb and otherwise just let
        the squares be empty. This will cut down on visual overload to the player.&lt;/p&gt;
    &lt;p&gt;Another bit of visual overload we can remove is our &lt;code&gt;index&lt;/code&gt; values since we only needed that to write
        and debug &lt;code&gt;checkNeighbors&lt;/code&gt;. So remove &lt;code&gt;square.innerHTML = `${i}`;&lt;/code&gt; from the
        &lt;code&gt;createBoard&lt;/code&gt; function.
    &lt;/p&gt;
    &lt;p&gt;When we refresh and check we should see blank squares but still be able to identify our bombs by the pink squares
        they&amp;#39;re sitting in. Now the game should be much easier to parse. Also if the black-text-on-green-squares
        bother you, you can also add &lt;code&gt;color: white;&lt;/code&gt; to the &lt;code&gt;.clicked&lt;/code&gt; block in the CSS.&lt;/p&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper11.jpg&quot;
        alt=&quot;Our Minesweeper boardthat only shows numbers for squares with known bomb counts of more than zero&quot; /&gt;
    &lt;h3 id=&quot;add-difficulty-settings&quot;&gt;Add difficulty settings&lt;/h3&gt;
    &lt;p&gt;Next it makes sense to me to add some difficulty settings to our game. Yes, this may seem early since our player
        cannot actually win yet, so why add multiple difficulties? To make testing easier too. Later when we add flags,
        20 flags are a lot to place over and over.&lt;/p&gt;
    &lt;p&gt;Different implementations of the game had different settings but for a board of 100, it seems to me to make sense
        that &amp;quot;easy&amp;quot; have 10 bombs, &amp;quot;medium&amp;quot; have 20, and &amp;quot;hard&amp;quot; have 40. But on different
        sized boards those may be way too many or too little, so let&amp;#39;s set this up with a ratio instead.&lt;/p&gt;
    &lt;p&gt;An object make sense to store these values so instead of setting &lt;code&gt;bombCount&lt;/code&gt; as &lt;code&gt;20&lt;/code&gt;,
        let&amp;#39;s declare: &lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const &lt;span class=&quot;hljs-keyword&quot;&gt;bombCount &lt;/span&gt;= { 
            &lt;span class=&quot;hljs-symbol&quot;&gt;    easy:&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;boardSize &lt;/span&gt;* .&lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;,
            &lt;span class=&quot;hljs-symbol&quot;&gt;    medium:&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;boardSize &lt;/span&gt;* .&lt;span class=&quot;hljs-number&quot;&gt;2&lt;/span&gt;,
            &lt;span class=&quot;hljs-symbol&quot;&gt;    hard:&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;boardSize &lt;/span&gt;* .&lt;span class=&quot;hljs-number&quot;&gt;4&lt;/span&gt; 
            }&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
            let &lt;span class=&quot;hljs-keyword&quot;&gt;difficulty &lt;/span&gt;= &lt;span class=&quot;hljs-string&quot;&gt;&quot;easy&quot;&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Now in our loop where we populate &lt;code&gt;squareValues&lt;/code&gt; we&amp;#39;ll check if
        &lt;code&gt;i &amp;lt; bombCount[difficulty]&lt;/code&gt;. Also this loop is a little odd sitting between our constants and our
        DOM elements, especially since we will want to create the array more than just on loading now. We will want to
        build this array every time we reset the game, so let&amp;#39;s add it to the end of &lt;code&gt;resetGame&lt;/code&gt;!
    &lt;/p&gt;
    &lt;p&gt;If we refresh and check everything should work the same, except that when we hit reset, will will have too many
        extra squares! This is because that loop is just pushing new values into the array and the array isn&amp;#39;t
        actually be reset to empty. We got away with this before since we were also scrambling the array with
        &lt;code&gt;shuffleValues&lt;/code&gt; everytime the board was created.
    &lt;/p&gt;
    &lt;p&gt;To fix this we just have to add &lt;code&gt;squareValues.length = 0;&lt;/code&gt; right before the loop which effectively
        deletes all the elements in the &lt;code&gt;squareValues&lt;/code&gt; array.&lt;/p&gt;
    &lt;p&gt;Okay now that we have the ability to build different difficulties, let&amp;#39;s add a way for the player to choose
        their difficulty. In the HTML (which we haven&amp;#39;t touched in a while), lets add the following between the
        reset button and the board &lt;code&gt;div&lt;/code&gt;:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-html&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;easy&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Easy&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;medium&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Medium&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;hard&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Hard&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Then back in our &lt;code&gt;js&lt;/code&gt; file, we&amp;#39;ll add the following after we declare &lt;code&gt;board&lt;/code&gt; and
        &lt;code&gt;reset&lt;/code&gt;:
    &lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; easy = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;&quot;easy&quot;&lt;/span&gt;);
            &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; medium = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;&quot;medium&quot;&lt;/span&gt;);
            &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; hard = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;&quot;hard&quot;&lt;/span&gt;);
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;So now we have the buttons and a way to access them, so we&amp;#39;ll write a simple function that takes in a string,
        sets the &lt;code&gt;difficulty&lt;/code&gt; to that string, and immediately creates the board anew:&lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const setDifficultyAndReset = (&lt;span class=&quot;hljs-keyword&quot;&gt;difficultyStr) &lt;/span&gt;=&amp;gt; {
                &lt;span class=&quot;hljs-keyword&quot;&gt;difficulty &lt;/span&gt;= &lt;span class=&quot;hljs-keyword&quot;&gt;difficultyStr;
            &lt;/span&gt;    createBoard()&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
            }&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Finally we have to call &lt;code&gt;setDifficultyAndReset&lt;/code&gt; whenever those buttons are clicked: so between the
        &lt;code&gt;reset.addEventListener&lt;/code&gt; and the &lt;code&gt;createBoard&lt;/code&gt; call at the bottom of the &lt;code&gt;js&lt;/code&gt;
        file add:
    &lt;/p&gt;
    &lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;easy.addEventListener(&lt;span class=&quot;hljs-string&quot;&gt;&quot;click&quot;&lt;/span&gt;, &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;()&lt;/span&gt; =&amp;gt;&lt;/span&gt; setDifficultyAndReset(&lt;span class=&quot;hljs-string&quot;&gt;&quot;easy&quot;&lt;/span&gt;));
            medium.addEventListener(&lt;span class=&quot;hljs-string&quot;&gt;&quot;click&quot;&lt;/span&gt;, &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;()&lt;/span&gt; =&amp;gt;&lt;/span&gt; setDifficultyAndReset(&lt;span class=&quot;hljs-string&quot;&gt;&quot;medium&quot;&lt;/span&gt;));
            hard.addEventListener(&lt;span class=&quot;hljs-string&quot;&gt;&quot;click&quot;&lt;/span&gt;, &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;()&lt;/span&gt; =&amp;gt;&lt;/span&gt; setDifficultyAndReset(&lt;span class=&quot;hljs-string&quot;&gt;&quot;hard&quot;&lt;/span&gt;));
            &lt;/code&gt;&lt;/pre&gt;
    &lt;p&gt;Let&amp;#39;s do a refresh and check to make sure that our reset button still works, we can click squares and rest as
        many times as we like. Then each of the difficulty buttons also reset the game and we can see they change the
        number of bombs (by roughly counting the pink squares).&lt;/p&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper12.jpg&quot;
        alt=&quot;Our Minesweeper board alongside the reset, easy, medium, and hard difficulty buttons&quot; /&gt;
        &lt;h3&gt;Finish your game!&lt;/h3&gt;
        &lt;p&gt;&lt;a href=&quot;https://travissouthard.com/blog/how-to-make-minesweeper-part-3&quot;&gt;Finish the gameplay and style the board in part 3&lt;/a&gt;! Add the &lt;a href=&quot;https://travissouthard.com/rss.xml&quot; target=&quot;_blank.html&gt;RSS feed&lt;/a&gt; to your favorite RSS reader for more tutorials and blogs every Sunday!&lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/how-to-make-minesweeper-part-2.html</link>
            <pubDate>Sun, 15 Oct 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/how-to-make-minesweeper-part-2.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>How to make Minesweeper part 1</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper06.jpg&quot; alt=&quot;Our partially done Minesweeper game with randomly placed bombs and safe squares&quot;/&gt;
      &lt;/a&gt;
  
&lt;h3 id=&quot;overview&quot;&gt;Overview&lt;/h3&gt;
&lt;p&gt;Let’s make minesweeper with just native web tools! Using only native web components we can build this classic video game using some loops, array methods, and recursion. Specifically we&amp;#39;ll be using HTML5, CSS3 with Flexbox, and ES6 JavaScript.&lt;/p&gt;
&lt;h3 id=&quot;prerequisites&quot;&gt;Prerequisites&lt;/h3&gt;
&lt;p&gt;To make this project you will need:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A code editor (I’ll be using VS Code)&lt;/li&gt;
&lt;li&gt;A web browser&lt;/li&gt;
&lt;li&gt;A basic understanding of HTML, JavaScript, and CSS&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;how-to-make-minesweeper-part-1-&quot;&gt;How to make Minesweeper part 1:&lt;/h3&gt;
&lt;h3 id=&quot;make-your-files&quot;&gt;Make your files&lt;/h3&gt;
&lt;p&gt;Start a project folder called “minesweeper” and in it create 3 files:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;index.html&lt;/li&gt;
&lt;li&gt;style.css&lt;/li&gt;
&lt;li&gt;app.js&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Note: If you don’t already navigate your machine and manage your code files in the terminal or shell I recommend it! To do the above:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-sh&quot;&gt;# Make your folder &lt;span class=&quot;hljs-built_in&quot;&gt;and&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;change&lt;/span&gt; directories &lt;span class=&quot;hljs-keyword&quot;&gt;to&lt;/span&gt; it
&lt;span class=&quot;hljs-built_in&quot;&gt;mkdir&lt;/span&gt; minesweeper
&lt;span class=&quot;hljs-keyword&quot;&gt;cd&lt;/span&gt; minesweeper

# Create the &lt;span class=&quot;hljs-keyword&quot;&gt;files&lt;/span&gt;
touch &lt;span class=&quot;hljs-built_in&quot;&gt;index&lt;/span&gt;.html style.css app.js
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;add-your-boilerplate-code&quot;&gt;Add your boilerplate code&lt;/h3&gt;
&lt;p&gt;Open all three files into your editor of choice. In index.html start with the boilerplate code (in VS Code you can type &lt;code&gt;!&lt;/code&gt; and click the first option, this fills it out as a snippet):&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-html&quot;&gt;&lt;span class=&quot;hljs-meta&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;lang&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;en&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;head&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;meta&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;charset&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;UTF-8&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;meta&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;name&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;viewport&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;content&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;width=device-width, initial-scale=1.0&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;title&lt;/span&gt;&amp;gt;&lt;/span&gt;Title&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;title&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;head&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;body&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;body&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;html&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;In the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; section, add: &lt;code&gt;&amp;lt;h1&amp;gt;Minesweeper&amp;lt;/h1&amp;gt;&lt;/code&gt; and change the text in the &lt;code&gt;&amp;lt;title&amp;gt;&lt;/code&gt; tag to also read Minesweeper.
Open index.html in your browser. You can drag and drop the file into the browser or use &lt;code&gt;open index.html&lt;/code&gt; in your terminal or even use the &lt;code&gt;file://&lt;/code&gt; protocol if you’re feeling fancy.&lt;/p&gt;
&lt;p&gt;This isn’t much of a website yet, and certainly not a game or stylish. But to get either of those qualities we need to connect our &lt;code&gt;app.js&lt;/code&gt; and &lt;code&gt;style.css&lt;/code&gt; files. To do so we need two lines in the head section of the html:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-html&quot;&gt;    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;link&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;rel&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;stylesheet&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;href&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;style.css&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;app.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;undefined&quot;&gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Then in the &lt;code&gt;style.css&lt;/code&gt; file we will need the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-tag&quot;&gt;h1&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;color&lt;/span&gt;: pink;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;It doesn&amp;#39;t have to be pink, but it does help to have something stand out pretty dramatically. Now in our &lt;code&gt;app.js&lt;/code&gt; file let&amp;#39;s add:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;console.log(&lt;span class=&quot;hljs-string&quot;&gt;&quot;This is connected&quot;&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note: I want to establish a pattern here that whenever we add new code to our files, we should test it. In this case, we’ll refresh the browser to see what we changed. So each time we make a change I’ll refer to this step as “refresh and check”. Also, each section in this is designed to be its own commit (and the titles of the sections work as &lt;a href=&quot;https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages/&quot;&gt;good commit messages&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;When we refresh and check, we should see our title on a pink background. To see the console.log message, we’ll have to right-click, and choose “inspect” from the context menu. If it’s your first time opening the inspector, welcome! Most browsers open by default to to the Elements inspector tab to let you see the html and css as it’s rendered on the page. And we’ll come back to that later. For now, let’s choose the Console tab and we should see our message!&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper01.jpg&quot; alt=&quot;Our Minesweeper title with a pink background and message in the console&quot; /&gt;
&lt;h3 id=&quot;add-the-board-and-put-stuff-in-it&quot;&gt;Add the board and put stuff in it&lt;/h3&gt;
&lt;p&gt;A key part of the minesweeper game is a board of squares on a grid. So let’s add a &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; element with the id: “board” (this will look like &lt;code&gt;&amp;lt;div id=&amp;quot;board&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;). A div by itself will not really do much. So we&amp;#39;ll add our squares with JavaScript.&lt;/p&gt;
&lt;p&gt;There’s no prescriptive size that our “minefield” should be, and in fact many implementations use many different sizes, but a 10x10 grid has an appeal for both easy numbers and a nice size for playing.&lt;/p&gt;
&lt;p&gt;So to make a 10x10 board we will need to make 100 squares. But rather than using 10 and 100, let’s use variables like &lt;code&gt;width&lt;/code&gt; and &lt;code&gt;boardSize&lt;/code&gt; so we can make this easier to work on later. So in our &lt;code&gt;app.js&lt;/code&gt; file we&amp;#39;ll replace our &lt;code&gt;console.log&lt;/code&gt; line with:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; width = &lt;span class=&quot;hljs-number&quot;&gt;10&lt;/span&gt;;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; boardSize = width * width;

&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; board = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.getElementById(&lt;span class=&quot;hljs-string&quot;&gt;&quot;board&quot;&lt;/span&gt;);

&lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; i = &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;; i &amp;lt; &lt;span class=&quot;hljs-number&quot;&gt;100&lt;/span&gt;; i++) {
    &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; square = &lt;span class=&quot;hljs-built_in&quot;&gt;document&lt;/span&gt;.createElement(&lt;span class=&quot;hljs-string&quot;&gt;&quot;p&quot;&lt;/span&gt;);
    square.innerHTML = &lt;span class=&quot;hljs-string&quot;&gt;`&lt;span class=&quot;hljs-subst&quot;&gt;${i + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;}&lt;/span&gt;`&lt;/span&gt;;
    board.appendChild(square);
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Let&amp;#39;s check and refresh. Here we run into an interesting bit of trouble, there should be 100 numbers on the screen and there are none and an error is in the console telling us no element exists with an id of &amp;quot;board.&amp;quot; Code in HTML, CSS, and JS is read by the browser from top to bottom. The HTML file asks for the &lt;code&gt;&amp;lt;link&amp;gt;&lt;/code&gt; to the style sheet in the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; and then asks for the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; containing the Javascript. Then once the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; is read and rendered, the browser executes the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; code.&lt;/p&gt;
&lt;p&gt;This means that in this case the &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; with the id of &amp;quot;board&amp;quot; hasn&amp;#39;t been rendered yet when the JavaScript is executed. There is a &lt;code&gt;window.load&lt;/code&gt; event we can ask for, but another way to handle this is to move the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tag to the bottom of the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; section. This way the Javascript is only run once the whole page is rendered.&lt;/p&gt;
&lt;p&gt;Refresh and check again and we have 100 numbers in our &amp;quot;board&amp;quot;.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper02.jpg&quot; alt=&quot;Our Minesweeper title with a vertical list of increasing integers&quot; /&gt;
&lt;h3 id=&quot;style-the-board-to-be-square&quot;&gt;Style the board to be square&lt;/h3&gt;
&lt;p&gt;Now we have 100 numbers in a weirdly long list, but that’s not much of a board. For a moment we will need to write some CSS. &lt;/p&gt;
&lt;p&gt;Note: For a lot of engineers, CSS can be very daunting, especially where page layout is concerned. And yes there are many component libraries that will handle this for us, but those libraries compile or otherwise eventually render CSS. Therefore, knowing how CSS works natively, it will help us to diagnose and solve design and UX issues because they come up with libraries too.&lt;/p&gt;
&lt;p&gt;We will worry about the aesthetic style of the game later, for now we want to get the board to be functional. And for now, we only have a few elements on the page to worry about first. We have the board itself and 100 &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; elements within it.&lt;/p&gt;
&lt;p&gt;The board is a &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; with an &lt;code&gt;id&lt;/code&gt; of &amp;quot;board&amp;quot; so we can easily grab that with &lt;code&gt;#board&lt;/code&gt; in our CSS. We&amp;#39;ll set an arbitrary width (ideally one that will make math easy later), center it, and add a border so we can see the board.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;500px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt; auto;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;1px&lt;/span&gt; solid black;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;A refresh and check shows us a square with a border at the center of our page, but the numbers are still falling down the page. There&amp;#39;s a few ways to get our elements to sit in a grid in the board, and my go-to is Flexbox, which is natively supported in CSS3. In this case it&amp;#39;s appropriate since we have one array that we are arranging as a 2-dimensional grid and flexbox will treat them that way as well.&lt;/p&gt;
&lt;p&gt;Note: &lt;a href=&quot;https://flexboxfroggy.com/&quot;&gt;Flexbox Froggy&lt;/a&gt; is a great way to learn how to use the basics of Flexbox and CSS Tricks has &lt;a href=&quot;https://css-tricks.com/snippets/css/a-guide-to-flexbox/&quot;&gt;an excellent reference guide&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Let&amp;#39;s add the following lines to our &lt;code&gt;#board&lt;/code&gt; CSS block to use Flexbox and display its children (our squares) as rows that wrap to the next row when they run out of horizontal space.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-attribute&quot;&gt;display&lt;/span&gt;: flex;
&lt;span class=&quot;hljs-attribute&quot;&gt;flex-flow&lt;/span&gt;: row wrap;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We still need to style the numbers to get them to fit nicely since their defaults will change depending on what text is in them. We will want to give them a fixed width and height, a border so we can see them for now, and center the text in each square.&lt;/p&gt;
&lt;p&gt;Above, we (completely arbitrarily) chose &lt;code&gt;500px&lt;/code&gt; as our board width and a game board size of 10 squares by 10 squares. So each square should be &lt;code&gt;50px&lt;/code&gt;, but if we just set height and width to be &lt;code&gt;50px&lt;/code&gt;, the squares wouldn&amp;#39;t fit. HTML elements render width as the content (in this case: text) width. Padding, border, and margin will add more size to the box and will not fit on our grid.&lt;/p&gt;
&lt;p&gt;We don&amp;#39;t want any margin, since each square will sit directly against its neighbors. We also don&amp;#39;t want padding since we&amp;#39;re just centering with &lt;code&gt;text-align&lt;/code&gt;. However, we do want a border so we can see where the boxes are.&lt;/p&gt;
&lt;p&gt;So, we will start our squares with the following styles: A width and height of &lt;code&gt;48px&lt;/code&gt; to leave room for the &lt;code&gt;1px&lt;/code&gt; of border on each side (e.g. for width, the left and right borders both add to the overall width).&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-id&quot;&gt;#board&lt;/span&gt; &lt;span class=&quot;hljs-selector-tag&quot;&gt;p&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;48px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;48px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;margin&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;padding&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;line-height&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;48px&lt;/span&gt;;
    &lt;span class=&quot;hljs-attribute&quot;&gt;text-align&lt;/span&gt;: center;
    &lt;span class=&quot;hljs-attribute&quot;&gt;border&lt;/span&gt;: &lt;span class=&quot;hljs-number&quot;&gt;1px&lt;/span&gt; solid gray;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;A refresh and check should now show us a board with 100 squares arranged in a nice grid.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper03.jpg&quot; alt=&quot;Our Minesweeper title with a square of squares with numbers in them&quot; /&gt;
&lt;h3 id=&quot;make-the-squares-clickable&quot;&gt;Make the squares clickable&lt;/h3&gt;
&lt;p&gt;Now that we have a grid, let&amp;#39;s make it interactive! This is typically an expectation of any video game. The &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Document&quot;&gt;&lt;code&gt;document&lt;/code&gt; API&lt;/a&gt; has an &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener&quot;&gt;&lt;code&gt;addEventListener&lt;/code&gt; method&lt;/a&gt; that is incredibly useful for this. The best place to add these event listeners will be as we make each square. So let&amp;#39;s make our loop that creates the squares look like this.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;for (&lt;span class=&quot;hljs-name&quot;&gt;let&lt;/span&gt; i = &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;; i &amp;lt; 100; i++) {&lt;/span&gt;
    const clickedClass = &lt;span class=&quot;hljs-string&quot;&gt;&quot;clicked&quot;&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    const square = document.createElement(&lt;span class=&quot;hljs-string&quot;&gt;&quot;p&quot;&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    square.innerHTML = `${i + &lt;span class=&quot;hljs-number&quot;&gt;1&lt;/span&gt;}`&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    square.addEventListener(&lt;span class=&quot;hljs-string&quot;&gt;&quot;click&quot;&lt;/span&gt;, (&lt;span class=&quot;hljs-name&quot;&gt;e&lt;/span&gt;) =&amp;gt; {
        if (!square.classList.contains(&lt;span class=&quot;hljs-name&quot;&gt;clickedClass&lt;/span&gt;)) {
            square.classList.add(&lt;span class=&quot;hljs-name&quot;&gt;clickedClass&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
        }
    })&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    board.appendChild(&lt;span class=&quot;hljs-name&quot;&gt;square&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note: &lt;code&gt;clickedClass&lt;/code&gt; may be extraneous for now, but we wanted to use the string &lt;code&gt;&amp;quot;clicked&amp;quot;&lt;/code&gt; more than once and it often helps to set that with a constant to ensure they match (and to make changing it easier later). I have had plenty of projects get stalled for a little too long trying to find a typo in a string.&lt;/p&gt;
&lt;p&gt;And now that we are adding a &amp;quot;clicked&amp;quot; class to each square, let&amp;#39;s change the color to see if our event handling works by adding this to our CSS:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-css&quot;&gt;&lt;span class=&quot;hljs-selector-class&quot;&gt;.clicked&lt;/span&gt; {
    &lt;span class=&quot;hljs-attribute&quot;&gt;background-color&lt;/span&gt;: green;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Refresh and check and click around the board. Any unclicked squares will change color now! However, as it&amp;#39;s written above, we are only adding a class if it&amp;#39;s not already there. If you&amp;#39;d like it to change the color back on the second click instead, try &lt;code&gt;square.classList.toggle(clickedClass)&lt;/code&gt;&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper04.jpg&quot; alt=&quot;Our board now with green squares indicating which have been clicked&quot; /&gt;
&lt;h3 id=&quot;refactor-board-to-build-from-array-of-values&quot;&gt;Refactor board to build from array of values&lt;/h3&gt;
&lt;p&gt;Now that we have a grid of 100 numbers ready to be built and clicked, let&amp;#39;s add some mines to our minefield! In our javascript, let&amp;#39;s create an array of 100 elements, with 20 bombs and 80 empties.&lt;/p&gt;
&lt;p&gt;But what data should we put in this array? We have a lot of options, but since we are developing this as a webpage, adding classes to our square elements gives us an easy way to check if that square is a bomb (and then style it) by checking &lt;code&gt;square.classList.contains()&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Note: For a savvy game player, this does expose the locations via the inspector if a player wanted to cheat. If we were building something that needed to be competitive, a better choice would be to refer back to our array and check the value there. While less likely, that savvy player could still have access to that array via the console. In that case, a backend server would probably be necessary to keep things competitive. This is certainly outside our scope here, but it&amp;#39;s always worth thinking about security especially when practicing.&lt;/p&gt;
&lt;p&gt;So if we are going to use classes on each square, an array of strings would be a good choice. The strings in this case will be &amp;quot;bomb&amp;quot; and &amp;quot;valid&amp;quot;, as in: There is either a bomb in this square or this square is a valid place to click. Booleans like &lt;code&gt;true&lt;/code&gt; and &lt;code&gt;false&lt;/code&gt; could also work, however, with enough distance it may become muddy wondering if it&amp;#39;s &lt;code&gt;true&lt;/code&gt; this is a bomb or &lt;code&gt;true&lt;/code&gt; that we can safely click it.&lt;/p&gt;
&lt;p&gt;Note: In this case I&amp;#39;ve chosen the word &amp;quot;bomb&amp;quot; instead of &amp;quot;mine&amp;quot; since &amp;quot;mine&amp;quot; has a few common meanings (place to dig for ores, belonging to me, etc), but &amp;quot;bomb&amp;quot; commonly is just that (though I suppose it is also sometimes a cake). But the goal of naming like this is to choose something as clear as possible.&lt;/p&gt;
&lt;p&gt;In our &lt;code&gt;app.js&lt;/code&gt; file let&amp;#39;s add the following after the &lt;code&gt;boardSize&lt;/code&gt; is declared but before the &lt;code&gt;board&lt;/code&gt; is defined:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;const &lt;span class=&quot;hljs-keyword&quot;&gt;bombCount &lt;/span&gt;= &lt;span class=&quot;hljs-number&quot;&gt;20&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
const validCount = &lt;span class=&quot;hljs-keyword&quot;&gt;boardSize &lt;/span&gt;- &lt;span class=&quot;hljs-keyword&quot;&gt;bombCount;
&lt;/span&gt;const squareValues = []&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;

for (let i = &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;hljs-comment&quot;&gt;; i &amp;lt; boardSize; i++) {&lt;/span&gt;
    if (i &amp;lt; &lt;span class=&quot;hljs-keyword&quot;&gt;bombCount) &lt;/span&gt;{
        squareValues.push(&lt;span class=&quot;hljs-string&quot;&gt;&quot;bomb&quot;&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    } else {
        squareValues.push(&lt;span class=&quot;hljs-string&quot;&gt;&quot;valid&quot;&lt;/span&gt;)&lt;span class=&quot;hljs-comment&quot;&gt;;&lt;/span&gt;
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now we have an array of 20 bombs and 80 valids. We&amp;#39;ll randomize that later so that the board is not just bombs at the top. But for now, let&amp;#39;s use this array to create the board. So let&amp;#39;s change our loop to live within a function (with a clear name) and use that array:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; createBoard = () =&amp;gt; {
    &lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;value&lt;/span&gt; of squareValues) {
        &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; clickedClass = &lt;span class=&quot;hljs-string&quot;&gt;&quot;clicked&quot;&lt;/span&gt;;
        &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; square = document.createElement(&lt;span class=&quot;hljs-string&quot;&gt;&quot;p&quot;&lt;/span&gt;);
        square.innerHTML = &lt;span class=&quot;hljs-keyword&quot;&gt;value&lt;/span&gt; === &lt;span class=&quot;hljs-string&quot;&gt;&quot;bomb&quot;&lt;/span&gt; ? &lt;span class=&quot;hljs-string&quot;&gt;&quot;💣&quot;&lt;/span&gt; : &lt;span class=&quot;hljs-string&quot;&gt;&quot;😀&quot;&lt;/span&gt;;
        square.classList.&lt;span class=&quot;hljs-keyword&quot;&gt;add&lt;/span&gt;(&lt;span class=&quot;hljs-keyword&quot;&gt;value&lt;/span&gt;);
        square.addEventListener(&lt;span class=&quot;hljs-string&quot;&gt;&quot;click&quot;&lt;/span&gt;, (e) =&amp;gt; {
            &lt;span class=&quot;hljs-keyword&quot;&gt;if&lt;/span&gt; (!square.classList.contains(clickedClass)) {
                square.classList.&lt;span class=&quot;hljs-keyword&quot;&gt;add&lt;/span&gt;(clickedClass);
            }
        });
        board.appendChild(square);
    }
};

createBoard();
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note: If you&amp;#39;re not familiar with &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of&quot;&gt;for...of loops&lt;/a&gt;, they are very useful for iterating over every value in an array. Another option could be using &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach&quot;&gt;&lt;code&gt;squareValues.forEach()&lt;/code&gt;&lt;/a&gt;, but in this case I prefer how the for...of loop looks.&lt;/p&gt;
&lt;p&gt;Now when we refresh and check, we should see the 20 bomb icons in the top two rows of the board and the remaining of the board should be smiley faces.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper05.jpg&quot; alt=&quot;Our Minesweeper board with two rows of bombs and many others of smiley faces&quot; /&gt;
&lt;h3 id=&quot;randomize-the-board-when-building&quot;&gt;Randomize the board when building&lt;/h3&gt;
&lt;p&gt;Our minesweeper game is going to get very stale very fast if the board is always populated with all the bombs up at the very top. So let&amp;#39;s randomize the array we are building the board from each time we build the board.&lt;/p&gt;
&lt;p&gt;Let&amp;#39;s make a &lt;code&gt;shuffleValues&lt;/code&gt; function and call it on the first line inside the &lt;code&gt;createBoard&lt;/code&gt; function.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-js&quot;&gt;&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; shuffleValues = &lt;span class=&quot;hljs-function&quot;&gt;&lt;span class=&quot;hljs-params&quot;&gt;()&lt;/span&gt; =&amp;gt;&lt;/span&gt; {
    &lt;span class=&quot;hljs-keyword&quot;&gt;for&lt;/span&gt; (&lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; i = &lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;; i &amp;lt; squareValues.length; i++) {
        &lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; randomIndex = &lt;span class=&quot;hljs-built_in&quot;&gt;Math&lt;/span&gt;.floor(&lt;span class=&quot;hljs-built_in&quot;&gt;Math&lt;/span&gt;.random() * squareValues.length);
        &lt;span class=&quot;hljs-keyword&quot;&gt;let&lt;/span&gt; temp = squareValues[i];
        squareValues[i] = squareValues[randomIndex];
        squareValues[randomIndex] = temp;
    }
};
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This is a very simple method of scrambling our array, but it is pretty sufficient. Every element will switch with a random element, which could mean that an element will switch with itself, but that&amp;#39;s okay since it&amp;#39;s unlikely all 100 will switch with just themselves.&lt;/p&gt;
&lt;p&gt;There&amp;#39;s two steps to this function, for every element:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Choose a random index&lt;/li&gt;
&lt;li&gt;Switch the element&amp;#39;s value with the value at that index&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Note: Instead of the temp switch method, another option with ES6 is to use destructuring: &lt;code&gt;[squareValues[i], squareValues[randomIndex]] = [squareValues[randomIndex], squareValues[i]]&lt;/code&gt; to switch them in a single line. Both are valid, though neither are immediately better than the other so choose accordingly.&lt;/p&gt;
&lt;p&gt;Refresh and check and now our values should be randomized for every time we refresh the page.&lt;/p&gt;
&lt;img src=&quot;https://travissouthard.com/assets/images/blog/minesweeper06.jpg&quot; alt=&quot;Our Minesweeper board with randomized bombs and smiley faces&quot; /&gt;
&lt;h3&gt;Part 2 out now! Part 3 coming soon!&lt;/h3&gt;
&lt;p&gt; Check out &lt;a href=&quot;https://travissouthard.com/blog/how-to-make-minesweeper-part-2&quot;&gt;part 2&lt;/a&gt; to build out most of the gameplay. Add the &lt;a href=&quot;https://travissouthard.com/rss.xml&quot; target=&quot;_blank.html&gt;RSS feed&lt;/a&gt; to your favorite RSS reader to get it as soon as it comes out&lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/how-to-make-minesweeper-part-1.html</link>
            <pubDate>Sun, 08 Oct 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/how-to-make-minesweeper-part-1.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>September Updates and October Upcoming</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/sunset-graveyard.jpg&quot; alt=&quot;Sunset over a local church and graveyard&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                I have some updates from the past week and a &lt;em&gt;content schedule&lt;/em&gt; for the next month!
            &lt;/p&gt;
            &lt;p&gt;
                Firstly I am honored that last Monday I was named one of &lt;a href=&quot;https://technical.ly/&quot;
                    target=&quot;_blank&quot;&gt;Technical.ly&lt;/a&gt;&apos;s &lt;a
                    href=&quot;https://technical.ly/software-development/philly-reallist-engineers-2023/&quot; target=&quot;_blank&quot;&gt;RealLIST
                    Engineers of Philadephia for 2023&lt;/a&gt;! It always feels nice to be recognized for work and this is the first
                professional recognition I&apos;ve received since transitioning into tech. I am especially honored that my work with
                &lt;a href=&quot;https://codeforphilly.org/&quot; target=&quot;_blank&quot;&gt;Code for Philly&lt;/a&gt; was specifically mentioned because I am
                incredibly proud of the work that I&apos;ve done there over the past three years.
            &lt;/p&gt;
            &lt;p&gt;
                Speaking of Code for Philly, my second update this week is that I am stepping up to join Code for Philly&apos;s
                leadership team as the Operations Lead. Over the next few months I will be learning more about the different
                projects we facilitate, who the players are (that I don&apos;t already know), and what needs and strengths each
                project team has. I will also be supporting the teams&apos; operational needs like making sure teams have the tools
                they need to thrive. I have loved volunteering on the &lt;a
                    href=&quot;https://codeforphilly.org/projects/philadelphia_lawyers_for_social_equity_-_record_expungement&quot;
                    target=&quot;_blank&quot;&gt;PLSE Expungement team&lt;/a&gt; for
                the past three years and will continue to support them as team lead until a new lead is fully in place.
            &lt;/p&gt;
            &lt;p&gt;
                My final update from the week is that I have put in some work on updates to &lt;a
                    href=&quot;https://travissouthard.com/&quot;&gt;my personal website and portfolio&lt;/a&gt;! I
                have made the home page a little less scattered so that now it only shows my most recent
                projects, blogs, and pixel art pieces. There is also a separate about page so that it is easier to link to. The
                biggest change is that the projects, blogs, and pixel art all have their own pages. Each of the pages shows a
                list of the content and when clicked on, shows a detailed view with the ability to navigate to previous and next
                posts.
            &lt;/p&gt;
            &lt;p&gt;
                This change felt relevant to my interest in writing blogs, doing streams, and making more pixel art. The thought
                was &quot;If I will be making more content, it should be easier to look at content on my portfolio.&quot; Granted this has
                been an
                upgrade to my website I have been wanting to do for a long time. But of course, priorities for a long time were
                elsewhere and finally I was able to make those changes. There&apos;s always more to do but I&apos;m pleased with this
                update and excited to post more and find need for things like pagination and a more robust database than a JSON
                file.
            &lt;/p&gt;
            &lt;p&gt;
                Speaking of content: I made a content schedule for myself for the next month! I am still figuring out a good way
                to do streams from my refurbished early-2015 MacBook Pro, so those will not be announced yet, but I will be sure
                to post them when they are officially scheduled. For now what I can say is that they will be Mondays from 7-9pm
                Eastern Time. The blogs though are certainly ready to be sheduled! In the month of October, I will be
                publishing:
            &lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;b&gt;October 8&lt;/b&gt;: Minesweeper Tutorial (this is a big post)&lt;/li&gt;
                &lt;li&gt;&lt;b&gt;October 15&lt;/b&gt;: Money, Tech, &amp; Motivation&lt;/li&gt;
                &lt;li&gt;&lt;b&gt;October 22&lt;/b&gt;: Code Should Be Smaller&lt;/li&gt;
                &lt;li&gt;&lt;b&gt;October 28&lt;/b&gt;: Monthly updates and next schedule (similar to this post)&lt;/li&gt;
            &lt;/ul&gt;
            &lt;p&gt;
                The titles and topics may change, like everything in life, really. And once streaming is figured out I will add
                that to the schedule as well. But, like always, the best way to keep up with this blog is to subscribe to &lt;a
                    href=&quot;https://travissouthard.com/rss.xml&quot; target=&quot;_blank&quot;&gt;this blog&apos;s RSS feed&lt;/a&gt; and to my &lt;a
                    href=&quot;https://www.youtube.com/channel/UCv75JMz-8JkuhGZVRBbrZbQ&quot; target=&quot;_blank&quot;&gt;subscribe to my
                    YouTube channel&lt;/a&gt; where I&apos;ll be streaming (once I figure out the tech for it). You&apos;re also welcome to join
                the test streams as they pop up.
            &lt;/p&gt;
            </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/september-updates-and-october-upcoming.html</link>
            <pubDate>Sun, 01 Oct 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/september-updates-and-october-upcoming.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Web development streams coming soon!</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/travis-flowers.jpg&quot; alt=&quot;Travis holding a bouquet of flowers in a field of flowers!&quot;/&gt;
      &lt;/a&gt;
  
            &lt;p&gt;
                I have been working on personal projects in my spare time for a few weeks: stepping into a leadership role at &lt;a
                    href=&quot;https://codeforphilly.org&quot; target=&quot;_blank&quot;&gt;Code for
                    Philly&lt;/a&gt;, writing tutorials for upcoming streaming I&apos;ll be doing, and working with Ruby to improve our
                house.
            &lt;/p&gt;
            &lt;p&gt;
                The &lt;a href=&quot;https://codeforphilly.org/projects/philadelphia_lawyers_for_social_equity_-_record_expungement&quot;
                    target=&quot;_blank&quot;&gt;PLSE Expungement team at Code for Philly&lt;/a&gt; has been putting in a ton of work lately and I
                am thrilled to work with such stellar volunteers. I recently wrote a &lt;a
                    href=&quot;https://codeforphilly.org/projects/philadelphia_lawyers_for_social_equity_-_record_expungement/updates/5&quot;
                    target=&quot;_blank&quot;&gt;new
                    update&lt;/a&gt; for our project page
                talking about the progress we&apos;ve made over the past year. We&apos;re actively accepting new volunteers if
                you live in Philly and are interested in meaningful work and expanding your skills.
            &lt;/p&gt;
            &lt;p&gt;
                I decided to start writing out tutorials for weekend-sized projects in browser-only,
                native tech (i.e. just HTML, CSS and JavaScript). I have one tutorial completely done, a second almost ready,
                and
                a third one in the wings. Once I have all three done I will start hosting &lt;a
                    href=&quot;https://www.youtube.com/channel/UCv75JMz-8JkuhGZVRBbrZbQ&quot; target=&quot;_blank&quot;&gt;weekly streams&lt;/a&gt;
                teaching those
                tutorials as well as working through personal projects and pixel art. I plan to do those bigger tutorials
                monthly and edit them into more digestible videos and written blogs. I have found a lack of beginner-friendly
                written content in this area and am seeking to fill that gap.
            &lt;/p&gt;
            &lt;p&gt;
                There&apos;s a few motivations for doing the streaming and content creation despite &lt;a
                    href=&quot;https://travissouthard.com/blog/cautiously-considering-creating-content.html
                    target=&quot;_blank&quot;&gt;being concerned about getting back into creating content&lt;/a&gt;. One is that I do like making
                videos. I spent years growing my video production skills and genuinely love making them. Another is that with
                the streaming, writing, and developing, I will become a better developer and
                continue growing my skills. The last is that I am interested in doing more independent work and that likely
                means trying to grow an audience (Hi!) and build out some options beyond just working for a boss.
            &lt;/p&gt;
            &lt;p&gt;
                That being said, I still plan to work full-time and you should&lt;a
                    href=&quot;https://travissouthard.com/assets/Travis_Southard_Software_Engineer_Resume.pdf&quot; target=&quot;_blank&quot;&gt;hire
                    me full time as a Software Engineer&lt;/a&gt;, I am certainly still interested in working on
                civic technology and geospatial projects that improve people&apos;s lives. Doing work that is meaningful to me will
                always be one of the most important factors in how I choose to spend my days. A salary and healthcare are
                important to
                me but I work best when I am working to make the world a better place. And that&apos;s a huge part of why I&apos;m
                interested in trying to take more of my workday decisions into my own hands. My goal with these projects is to
                plant seeds so that I can begin to cultivate a career aligned with my values.
            &lt;/p&gt;
            &lt;p&gt;
                The best way to keep up with what&apos;s happening is to check here or subscribe to &lt;a
                    href=&quot;https://travissouthard.com/rss.xml&quot; target=&quot;_blank&quot;&gt;this blog&apos;s RSS feed&lt;/a&gt;. To see my upcoming
                streams &lt;a href=&quot;https://www.youtube.com/channel/UCv75JMz-8JkuhGZVRBbrZbQ&quot; target=&quot;_blank&quot;&gt;subscribe to my
                    YouTube channel&lt;/a&gt; where I&apos;ll be streaming them.
            &lt;/p&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/web-development-streams-coming-soon.html</link>
            <pubDate>Sun, 24 Sep 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/web-development-streams-coming-soon.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Expungement Petition Generator</title>
            <description>&lt;a href=&quot;https://codeforphilly.org/projects/philadelphia_lawyers_for_social_equity_-_record_expungement&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/plse-expungement.png&quot; alt=&quot;Screenshot of the Expungement Petition Generator&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;From the project page: The project we are 
                currently working on is building out an expungement 
                petition generator for PLSE. The application takes in 
                PDFs of clients&apos; criminal dockets and returns fully 
                formatted petitions to expunge the clients&apos; criminal 
                records. Having a clear criminal record helps those 
                clients to better find work, housing, and services.&lt;/p&gt;</description>
            <author>Travis Southard</author>
            <link>https://codeforphilly.org/projects/philadelphia_lawyers_for_social_equity_-_record_expungement</link>
            <pubDate>Mon, 11 Sep 2023 04:00:00 GMT</pubDate>
            <guid>https://codeforphilly.org/projects/philadelphia_lawyers_for_social_equity_-_record_expungement</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Cautiously considering creating content</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/cityview.jpg&quot; alt=&quot;Gray buildings amongst green trees under a blue sky. A dithered pixel-art of a view of Fairmount, The Art Museum, the Schuylkill River, and the ridges beyond.&quot;/&gt;
      &lt;/a&gt;
  
      &lt;p&gt;
        I have been arguing with myself for a while now about getting back into &lt;b&gt;&lt;em&gt;content creation&lt;/em&gt;&lt;/b&gt; for the
        past few years. I have started and &lt;s&gt;abandoned&lt;/s&gt; moved on from &lt;a
            href=&quot;https://www.youtube.com/watch?v=99BRZOOC30s&amp;list=PL8hP1JY9f2dh7vnCpoVDSIknMWIk4s55H&amp;pp=gAQBiAQB&quot;
            target=&quot;_blank&quot;&gt;so many projects&lt;/a&gt; over the years. None of them necessarily &quot;gained traction&quot;, but I also
        never gave things enough time to really find their audience. I&apos;ve been consistently thinking for a year now that
        I did enjoy making those things at the time and probably would again.
      &lt;/p&gt;
      &lt;p&gt;
          Theoretically this is the &quot;right reason&quot; to be &lt;b&gt;&lt;em&gt;creating content&lt;/em&gt;&lt;/b&gt;: Just feeling a drive to make
          things. However, I really despise the phrase/title &lt;em&gt;&lt;b&gt;content creator&lt;/b&gt;&lt;/em&gt; for both its
          hand-wavey vagueness and especially the implication that one is not a filmmaker or an illustrator or a writer
          but a machine akin to a meat grinder whose main output is &quot;stuff&quot;. This is especially shakey ground to even
          acknowledge considering AI generated &lt;em&gt;&lt;b&gt;content&lt;/b&gt;&lt;/em&gt;.
      &lt;/p&gt;
      &lt;p&gt;But I suppose I am considering making intentional, scheduled work again. And while I am not quitting my day job
          (certainly not in week 3), I do have an interest in trying to grow an audience and add some commerce to the art.
          And thats where I start to get nervous: When I have started to treat making things for fun as a job they have
          gotten less fun. Specifically resenting time pressure, feeling like I &lt;em&gt;have&lt;/em&gt; to make a thing &lt;em&gt;or
              else&lt;/em&gt;, and that the things I am making are just not good. Often I felt like the &quot;just to get it done&quot;
          factor was hurting how I felt about making things.
      &lt;/p&gt;
      &lt;p&gt;
          Granted, I say all that and yet: I was always far happier having made the thing and seeing it posted than I ever
          was not posting the things that didn&apos;t make it. I genuinely enjoy the act of editing a video, hand-placing a
          pixel, and writing a blog post. Making things is fun, and as long as it stays fun I&apos;ll be happy to make things.
          If I can continue to make things that make me happy &lt;em&gt;and&lt;/em&gt; make some income from it without feeling burned
          out by it, then that would be genuinely dreamy.
      &lt;/p&gt;
      &lt;p&gt;
          This is not an announcement of anything in particular. I don&apos;t have a specific plan right now, but I suppose
          keep an ear out because I&apos;ll be making &lt;em&gt;something&lt;/em&gt; soon. Which of course reminds me to remind you that
          you can get this blog delivered to you automatically by subscribing to &lt;a
              href=&quot;https://travissouthard.com/rss.xml&quot; target=&quot;_blank&quot;&gt;the RSS
              feed&lt;/a&gt; I maintain for &lt;a href=&quot;https://travissouthard.com&quot;&gt;this website&lt;/a&gt;!
      &lt;/p&gt;
      &lt;p&gt;
          So definitely no promises, but lately I have been interested in:
          &lt;ul&gt;
            &lt;li&gt;making code tutorials at an intermediate level for both small projects and language proficiencies&lt;/li&gt;
            &lt;li&gt;writing articles about better documentation and project/code organizing&lt;/li&gt;
            &lt;li&gt;posting about current projects I&apos;m working on in a journal blog style&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/p&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/cautiously-considering-creating-content.html</link>
            <pubDate>Mon, 31 Jul 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/cautiously-considering-creating-content.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Bike &amp; Build Sendoff Poster</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/bike-and-build-sendoff.png&quot; alt=&quot;A low-color pixel art illustration of a road going off into the mountains and on the horizon is a sunset where the sun is the Bike &amp; Build logo, a bicycle wheel with a home icon at the hub. Text reads &apos;The Last Wheel Dip; 6pm Mon Aug 21 [2023]; Love City Brewing&apos;&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;
                    A pixel art poster I made advertising a party in Philly to acknowledge 
                        &lt;a href=&quot;https://bikeandbuild.org&quot; target=&quot;_blank&quot;&gt;Bike &amp; Build&lt;/a&gt;
                    &apos;s last ever trip ending and to celebrate with alumni and share trip stories.
                &lt;/p&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/bike--build-sendoff-poster.html</link>
            <pubDate>Sat, 29 Jul 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/bike--build-sendoff-poster.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Now with permalinks!</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/permalink.png&quot; alt=&quot;A recursive screenshot of this blog post in tinier and tinier images as they recursively recede into themselves.&quot;/&gt;
      &lt;/a&gt;
  
      &lt;p&gt;I have been trying to keep &lt;a href=&quot;https://travissouthard.com/&quot;&gt;this portfolio&lt;/a&gt; and its parts pretty simple
        and lightweight. Part of this is wanting to
        use free services as much as possible, but part of it is to keep my vanilla Javascript skills up to snuff. It
        also may be my recent interest in &lt;a href=&quot;https://permacomputing.net/&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;permacomputing as
        well as a great disdain for overcomplicated (and data-sucking) big tech products.&lt;/p&gt;
      &lt;p&gt;Sometimes though it means I miss out on some features that come a little more &quot;out of the box.&quot; I met up with a
          former colleague last week and we were talking about just this issue. He pointed out that while he has been
          enjoying reading these, there was no way to link to a particular post. Well no more!&lt;/p&gt;
      &lt;p&gt;I did some work this morning to add support for permalinks with these posts despite not using a backend or
          database. The solution I adopted here was to use query parameters from the url and a custom function to create
          slugs from the post titles as unique-ish identifiers. This was pretty easy to set up, luckily, and you can look
          at &lt;a href=&quot;https://github.com/travissouthard/travissouthard.github.io/pull/23&quot; target=&quot;_blank&quot;&gt;what I did to
              put this
              together here&lt;/a&gt;. This also gave the the ability to refactor some functions to better organize what is
          happening where and add the navigation buttons to the top of &lt;a href=&quot;https://travissouthard.com/blog.html&quot;&gt;the
              blog page&lt;/a&gt; as well.&lt;/p&gt;
      &lt;p&gt;Granted, this current system using a javascript array in a &lt;code&gt;.js&lt;/code&gt; file will only last so many more
          posts before I want to convert this to using a database, but I have genuinely been enjoying this set up and &lt;a
              href=&quot;https://travissouthard.com/blog/brand-new-rss-feed.html&gt;the custom RSS generator&lt;/a&gt; to put
          these together. My tolerance for a too-long file may grow as that file does.&lt;/p&gt;
      &lt;p&gt;There is something powerful about mastering the &quot;simpler&quot; or lower-level skills in coding. I felt this way when
          digging more deeply into bash scripting, C, and SQL queries the last few years. But I think that since I am most
          interested in building out things for the web, I will continue to work in vanilla (or close to) Javascript and
          try to make things as lightweight as can also be readable (and maintainable).&lt;/p&gt;
      &lt;p&gt;Moreso than feeling more like a wizard with code, I am feeling good about having my own online space to put the
          weird
          things I am working on or just what is interesting me at any time. It is also nice to feel like I have more
          control over the presentation of that space and its &lt;em&gt;content&lt;/em&gt;. I am not necessarily interested in
          becoming a &lt;em&gt;Content Creator&amp;trade;&lt;/em&gt;, I am interested in sharing what I make, how I make it, and
          especially in helping others to learn how to create spaces like these for themselves.&lt;/p&gt;
      &lt;p&gt;These posts still feel good to write and especially to see them update in my RSS reader. These will likely
          continue to be a mix of project updates and personal blogs. I got a lot of good feedback on &lt;a
              href=&quot;https://travissouthard.com/blog/i-need-a-better-routine.html&gt;&lt;/a&gt; and
          have &lt;em&gt;somewhat&lt;/em&gt; improved the way I am spending my days, but that is a whole other work in progress.&lt;/p&gt;
      &lt;p&gt;Thanks for reading!&lt;/p&gt;
      See the &lt;a href=&quot;https://github.com/travissouthard/travissouthard.github.io/pull/23&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/now-with-permalinks.html</link>
            <pubDate>Tue, 27 Jun 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/now-with-permalinks.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>I need a better routine</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/raystown-camp.jpg&quot; alt=&quot;A dithered photo of our campsite from our recent vacation to Raystown Lake PA. Featureing our camp chairs in front of our campfire pizza, our borrowed tent and our two hammocks near the lake.&quot;/&gt;
      &lt;/a&gt;
  
      &lt;p&gt;I am still very much on &lt;a href=&quot;https://travissouthard.com/assets/Travis_Southard_Software_Engineer_Resume.pdf&quot; target=&quot;_blank&quot;&gt;the job
            search&lt;/a&gt;. I am actively seeking a full-time (though ideally 32-hours-a-week) software engineering position
        in civic technology with geospatial work. I have had some great conversations and opportunities so far and I
        hope I can find something I love very soon.&lt;/p&gt;
    &lt;p&gt;While I have been home, I was hoping to establish a new routine that honors my physical, emotional, and
        interpersonal needs. Ruby recently prompted me to imagine my ideal life and I struggled to even begin. I
        have the ability and strength to imagine a better world, improvements to my city, and even fantasy elements, but
        apparently not my ideal day. I also recently thought about this issue because of a &lt;a
            href=&quot;https://www.raptitude.com/2010/07/your-lifestyle-has-already-been-designed/&quot; target=&quot;_blank&quot;&gt;great
            (13-year-old) blog post about feeling helpless about how we spend our non-work time&lt;/a&gt;.&lt;/p&gt;
    &lt;p&gt;But recently, Ruby and I did a 4-day camping trip at Raystown Lake in Central PA. We drove out on a Monday,
        brought our mountain bikes, an enormous borrowed tent, and a new cooler full of lovely foods to eat. At camp, I
        found I was able to live more like I want:&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;woke up at about 7am&lt;/li&gt;
        &lt;li&gt;took care of my morning hygiene routine&lt;/li&gt;
        &lt;li&gt;started making coffee and read a book&lt;/li&gt;
        &lt;li&gt;made breakfast while Ruby writes her morning pages&lt;/li&gt;
        &lt;li&gt;eat breakfast and review my plan for the day&lt;/li&gt;
        &lt;li&gt;do the plan for the morning (ride mountain bikes!)&lt;/li&gt;
        &lt;li&gt;make and eat lunch&lt;/li&gt;
        &lt;li&gt;do the plan for the afternoon (swim, read, explore)&lt;/li&gt;
        &lt;li&gt;make and eat dinner&lt;/li&gt;
        &lt;li&gt;enjoy a drink and spend quality time with loved ones (look at stars, birds, and bugs with Ruby)&lt;/li&gt;
        &lt;li&gt;take care of my evening hygiene routine&lt;/li&gt;
        &lt;li&gt;in bed at about 10pm&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;I have felt this feeling before; that I feel better at camp than I do at home. This was a large part of why I did
        so much bike camping from 2016 to 2019 and tried to make bike touring my job a few years back. I have recognized
        that a campsite is a better environment for me than the one I make for myself at home.&lt;/p&gt;
    &lt;p&gt;Granted, that does not mean I understand the solution suddenly. When Ruby and I were talking about this the other
        day, she asked me what made the difference. I wasn&apos;t really sure, but I did say, &quot;WiFi.&quot; And I think there&apos;s
        some truth to that. I tend to stay up too late clicking on another YouTube video, or scrolling down a social
        media feed, or finding another reason to avoid bedtime. Part of this is a very ADHD struggle with transitioning
        activities, but I think I also feel resistant to be done with the day (even though all of those activities just
        reinforce that I am, in fact, done). Those late nights make it harder to get up when I want to and everything
        gets thrown off.&lt;/p&gt;
    &lt;p&gt;I have come to recognize that I am far more capable of harder and more complex tasks in the morning, whether
        that&apos;s work, chores, or even a hobby. I was good at building that into my last job by blocking off the start of
        my day through 1 or 2pm. I think trying to build my day more like that above schedule is going to really help me
        just feel like I&apos;m living more fully.&lt;/p&gt;
    &lt;p&gt;Especially the idea that I would have a morning block for harder things to do and an afternoon block for easier
        or less complex things to do. Another huge thing that I have really been needing more and more is to
        specifically leave the house and bring my computer to a cafe or do chores outside the house (including outside
        my own backyard). I just don&apos;t go outside nearly enough if I don&apos;t already have a &quot;thing&quot; to go to. So it&apos;s up
        to me and my adult self to make that happen.&lt;/p&gt;
    &lt;p&gt;Yes, the schedule above is simple, but having that as an established habit will be better than the current habit:
        Just throwing myself at tasks and feeling paralyzed so I just avoid them while falling in scroll holes until
        they are too urgent to avoid. To
        no surprise; that feels awful. &lt;/p&gt;
    &lt;p&gt;I genuinely believe that establishing such a routine would help me shake some of
        the executive dysfunction I&apos;ve
        been feeling lately. Not to mention it will help me really feel like I&apos;m living up to my potential and living a
        fulfilling and
        actually restful life. Building habits is very hard, but I have done it before and can do it again.&lt;/p&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/i-need-a-better-routine.html</link>
            <pubDate>Fri, 16 Jun 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/i-need-a-better-routine.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Solved a tricky (for me) docker-compose error!</title>
            <description>
  
      &lt;p&gt;I am currently volunteering on a project as part of &lt;a
            href=&quot;https://codeforphilly.org/projects/third_places_project-launchpad_2023&quot; target=&quot;_blank&quot;&gt;Code for
            Philly&apos;s Launchpad 2023&lt;/a&gt;. I am working with a small team of developers and UXers to develop a project
        that will seek to connect Philadelphians to comfortable public spaces, with the focus being on finding places
        spontaneously.&lt;/p&gt;
      &lt;a href=&quot;https://travissouthard.com/blog/solved-a-tricky-for-me-docker-compose-error.html#solution&quot;&gt;
          &lt;p&gt;Jump to code solution.&lt;/p&gt;
      &lt;/a&gt;
      &lt;p&gt;We got started at the end of March this year and the launchpad demos will be &lt;a
              href=&quot;https://opencollective.com/code-for-philly/events/2023-code-for-philly-launchpad-project-showcase-c95b1dc3&quot;
              target=&quot;_blank&quot;&gt;on May 10&lt;/a&gt; as part of
          &lt;a href=&quot;https://2023.phillytechweek.com/&quot; target=&quot;_blank&quot;&gt;Philly Tech Week 2023&lt;/a&gt;. Come see our presentation!
          For the past few weeks we have been simultaneously going
          through the discovery of what we want to build and setting up the boilerplate to build our code on.
      &lt;/p&gt;
      &lt;p&gt;One speed bump I ran into was setting up a &lt;code&gt;docker-compose.yml&lt;/code&gt; file. In my work life and in my &lt;a
              href=&quot;https://codeforphilly.org/projects/philadelphia_lawyers_for_social_equity_-_record_expungement&quot;&gt;other
              Code for
              Philly project&lt;/a&gt;, we use these to build, run, and manage our Docker containers for the frontend, backend,
          and
          database. However, I realized this week I have never set one up from scratch since those above projects were
          either already built or built from a template we couldn&apos;t use for this project.&lt;/p&gt;
      &lt;p&gt;For context, we are going to be building a React frontend with Leaflet for our map component, and a Django
          backend with PostgreSQL and PostGIS. We also decided to set up React with Vite to avoid create-react-app.&lt;/p&gt;
      &lt;p&gt;Setting up the Dockerfiles and docker-compose.yml file were easy enough using the Docker setup documentation. I
          made sure each docker container built and ran on its own, but when putting them together with compose, I was
          getting this error from Docker:&lt;/p&gt;
      &lt;pre&gt;&lt;code&gt;error: cannot resolve import from &apos;vite&apos; from vite.config.ts&lt;/code&gt;&lt;/pre&gt;
      &lt;p&gt;After a lot of searching, looking at forums and docs, and trying many different things, this error mostly pointed
          to the idea that vite is missing. Where a lot of the solutions pointed to an old issue with Node 14, Typescript,
          and Vite and that solving it with updating Node to 16, that wouldn&apos;t work for us since we are using Node 18.&lt;/p&gt;
      &lt;p&gt;I checked to make sure it was in the package.json, and making sure that npm install was running successfully. And
          there I found it: Despite, the Dockerfile calling for &lt;code&gt;npm install&lt;/code&gt; to run when building, the logs
          showed it wasn&apos;t actually running.&lt;/p&gt;
      &lt;p id=&quot;solution&quot;&gt;The solution I found pointed to using the following line in the Dockerfile in our React app:&lt;/p&gt;
      &lt;pre&gt;&lt;code&gt;
      # From: 
      ADD . .
      RUN npm install
      CMD [&quot;npm&quot;, &quot;run&quot;, &quot;dev&quot;, &quot;--host&quot;]
      # To: 
      # See the PR for the full Dockerfile.
      ADD . .
      ENTRYPOINT [ &quot;/entrypoint.sh&quot; ]
      CMD [&quot;npm&quot;, &quot;run&quot;, &quot;dev&quot;, &quot;--host&quot;]
      &lt;/code&gt;&lt;/pre&gt;
      &lt;p&gt;And of course adding that entrypoint.hs file with:&lt;/p&gt;
      &lt;pre&gt;&lt;code&gt;
      #!/bin/sh
      npm install
      npm rebuild esbuild
      exec &quot;$@&quot;
      &lt;/code&gt;&lt;/pre&gt;
      &lt;p&gt;The &lt;code&gt;npm rebuild&lt;/code&gt; is there as a precaution for a problem I was running into with the wrong esbuild
          coming from the Docker host, but using that entry point file did successfully get the node_modules installed
          with the correct esbuild and now we are happily boilerplated and ready to roll building out as much of our demo
          as we can in the next week!&lt;/p&gt;
      &lt;em&gt;&lt;p&gt;Edit: 6/16/23 - Fixed a tab error in the code portions.&lt;/p&gt;&lt;/em&gt;
      See the &lt;a href=&quot;https://github.com/CodeForPhilly/third-places/pull/10&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/solved-a-tricky-for-me-docker-compose-error.html</link>
            <pubDate>Thu, 15 Jun 2023 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/solved-a-tricky-for-me-docker-compose-error.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>PhilaVibes</title>
            <description>&lt;a href=&quot;https://codeforphilly.org/projects/third_places_project-launchpad_2023&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/phila-vibes.png&quot; alt=&quot;Screenshot of the PhilaVibes project page on the Code for Philly website.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;PhilaVibes is a map application that helps people in 
        Philadelphia at point A with more time than they need to get to point B 
        find a comfortable place to be between those spaces. The map will 
        feature points surrounded by word clouds describing the spaces (and 
        will show the name, address, etc, once the user clicks on that space). 
        The user can see choose to see spaces around them, along their route, 
        or around their destination. Philavibes started as a 
        &lt;a href=&quot;https://codeforphilly.org/&quot; target=&quot;_blank&quot;&gt;Code for Philly&lt;/a&gt; Launchpad 2023
        project.&lt;/p&gt;See the &lt;a href=&quot;https://github.com/CodeForPhilly/third-places&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://codeforphilly.org/projects/third_places_project-launchpad_2023</link>
            <pubDate>Wed, 10 May 2023 04:00:00 GMT</pubDate>
            <guid>https://codeforphilly.org/projects/third_places_project-launchpad_2023</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Green Equity Demo</title>
            <description>&lt;a href=&quot;https://github.com/azavea/green-equity-demo&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/green-equity.png&quot; alt=&quot;Screenshot of the Green Equity Demo map showing BIL spending by state.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A demo project by Azavea (now Element 84) developers to show Bipartisan Infrastructure Bill Spending by state.&lt;/p&gt;See the &lt;a href=&quot;https://github.com/azavea/green-equity-demo&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://github.com/azavea/green-equity-demo</link>
            <pubDate>Wed, 19 Apr 2023 04:00:00 GMT</pubDate>
            <guid>https://github.com/azavea/green-equity-demo</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>1-Bit Beach Scene</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/beach.png&quot; alt=&quot;A 1-bit, low-res pixel art image of an outlet pipe and it protective beams on a beach&quot;/&gt;
      &lt;/a&gt;
  </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/1-bit-beach-scene.html</link>
            <pubDate>Sun, 26 Feb 2023 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/1-bit-beach-scene.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>32x32 Self Portrait</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/headshot-32.png&quot; alt=&quot;A low-color low-res pixel art portait of a man with a mustache&quot;/&gt;
      &lt;/a&gt;
  </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/32x32-self-portrait.html</link>
            <pubDate>Sun, 26 Feb 2023 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/32x32-self-portrait.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Azavea CS Fundamentals Group</title>
            <description>&lt;a href=&quot;https://github.com/azavea/cs-fundamentals-group&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/cs-fundamentals.png&quot; alt=&quot;Screenshot of the README from the CS fundamentals group repository.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A repository of the work that fellow Azavea co-workers and I went through to learn computer science fundamentals.&lt;/p&gt;See the &lt;a href=&quot;https://github.com/azavea/cs-fundamentals-group&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://github.com/azavea/cs-fundamentals-group</link>
            <pubDate>Tue, 31 Jan 2023 05:00:00 GMT</pubDate>
            <guid>https://github.com/azavea/cs-fundamentals-group</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Debt Snowball Calculator</title>
            <description>&lt;a href=&quot;https://travissouthard.com/snowball/index.html&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/debt-snowball.png&quot; alt=&quot;Screenshot of my debt snowball calculator app.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A debt snowball calculator with a chart showing how the 
        different debts pays down as you follow the plan&lt;/p&gt;See the &lt;a href=&quot;https://github.com/travissouthard/travissouthard.github.io/tree/master/snowball&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/snowball/index.html</link>
            <pubDate>Fri, 13 Jan 2023 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/snowball/index.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Why is some documentation better than others?</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/blog/azavea-blog-1.webp&quot; alt=&quot;Outline of a person holding a pen with screenshots of documentation text including &apos;README.md&apos;, &apos;Start Huddle in #CivicApps&apos;, &apos;Conversation (23)&apos;, &apos;Requirements&apos;, &apos;doc/arch&apos;,&apos;user merged 5 commits into develop&apos;, and the github logo&quot;/&gt;
      &lt;/a&gt;
  
    &lt;p&gt;
        &lt;em&gt;Note: This was originally published on &lt;a
                href=&quot;https://www.azavea.com/blog/2022/12/06/why-is-some-documentation-better-than-others/&quot;
                target=&quot;_blank&quot;&gt;the Azavea blog&lt;/a&gt;, but I wanted to put this here in case that blog
            disappeared.&lt;/em&gt;
    &lt;/p&gt;
    &lt;h3 id=&quot;and_how_to_make_sure_your_documentation_is_the_best_of_the_best&quot;&gt;And how to
        make sure your documentation is the best of the best&lt;/h3&gt;
    &lt;p&gt;Documentation is vital for anything open source; from open hardware, to free recipes, to DIY repair
        tutorials, but it is especially vital when it comes to software. Whether you’re a user or a developer,
        documentation provides the “how to” for interacting with any piece of software.&lt;/p&gt;
    &lt;p&gt;Since I first started getting into software development two years ago, I’ve learned that documentation
        frequently assumes you already know how to use the item in question, and are using the docs as a reference.
        While acting as a reference material is one of documentation’s important functions, it cannot be the only
        function, but more on that later.&lt;/p&gt;

    &lt;h3&gt;What is documentation?&lt;/h3&gt;
    &lt;p&gt;First off, what counts as documentation? It’s not just the README.md in a project’s repository. Documentation
        also includes websites, other files in a project repository, comments in your code, commits in your
        codebase, and also chat app channels and threads. Developers also often look to Stack Overflow and GitHub
        discussions when looking for existing solutions for a given problem.&lt;/p&gt;
    &lt;p&gt;Having a single “source of truth” for documentation is ideal, but also largely impossible since there are so
        many different places we talk about our projects. Even so, there are good ways to distill these
        conversations into good documentation. At Azavea we are good at taking big architecture decisions and
        recording them in our repos as Architectural Decision Records, also known as ADRs.&lt;/p&gt;
    &lt;p&gt;ADRs are excellent for decisions with project-wide implications, but teams also make a lot of decisions in
        seemingly innocuous conversations. Sometimes we have a conversation on Slack, a conference call, or even,
        sometimes, in person. In many cases, any learnings from these conversations goes unrecorded. On the Civic
        Applications team (my team), we try to remedy this issue by putting notes from these chats into a relevant
        issue or pull request on the project’s Github repo.&lt;/p&gt;

    &lt;h3&gt;Who is documentation for?&lt;/h3&gt;
    &lt;p&gt;Knowing who you are writing your documentation for is key to recording the most important elements. When it
        comes to software, there are two primary types of people trying to learn how it works: developers and users.
    &lt;/p&gt;
    &lt;p&gt;You want your users to know how to use the app, especially parts that they won’t need to touch often and
        therefore won’t have as much practice and experience with. While it is important to do your best to design
        the app itself to be intuitive and to be usable without explanation, there will always be users who need an
        explicit explanation of how to use most features.&lt;/p&gt;
    &lt;p&gt;In &lt;a href=&quot;https://www.azavea.com/blog/2022/08/17/1-for-open-source-financial-support-for-tools-we-use/&quot;
            target=&quot;_blank&quot;&gt;open source&lt;/a&gt; spaces we also want to ensure our contributors
        know how to develop the app. By writing our issues and documentation as clearly as possible, contributors
        are more able to seamlessly jump into a project and follow the conventions of your project without issue.
    &lt;/p&gt;
    &lt;p&gt;Documentation is often frequently used as reference for developers who are experienced with this codebase.
        Having a skimmable documentation that is clearly visually and logically broken up helps to improve
        reference-ability so much.&amp;nbsp;&lt;/p&gt;
    &lt;p&gt;Creating documentation that works for both users and developers is a mutually beneficial effort.&amp;nbsp; When
        contributing developers know how to use the app in question, it is much easier to develop a smooth user
        experience. This being said, users do not need to know how to develop the app. My colleague, Terence,
        pointed out this is similar to a driver not needing to know how the car works to drive it; they just need to
        understand how to use the pedals, wheel, and signals.&amp;nbsp;&lt;/p&gt;

    &lt;h3&gt;How much does the reader know?&lt;/h3&gt;
    &lt;p&gt;One question repeatedly surfaced during my discussions with colleagues about this topic: How much information
        should the documentation assume the reader already has? According to &lt;a
            href=&quot;https://www.freecodecamp.org/news/how-to-write-good-documentation/&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;existing&lt;/a&gt; &lt;a
            href=&quot;https://www.writethedocs.org/guide/writing/beginners-guide-to-docs/&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;research&lt;/a&gt;, it’s &lt;a
            href=&quot;https://www.oreilly.com/content/the-eight-rules-of-good-documentation/&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;important to assume nothing&lt;/a&gt; about the reader. Even though it’s important
        to provide content that avoids leaving readers in the dark, it’s also crucial to avoid overwhelming the
        reader with a giant wall of text or presenting the reader with extraneous, repetitive information.&lt;/p&gt;
    &lt;p&gt;In order to prevent overwhelming the reader we recommend visually breaking up the documentation so that it is
        easier to skim or scan through for important information.&amp;nbsp; Breaking up large documents into smaller
        chunks is especially important while generating documentation for a library of components.&lt;/p&gt;

    &lt;h3&gt;The shape of docs&lt;/h3&gt;
    &lt;p&gt;In journalism, there is a concept called the “inverted pyramid of information” where the broadest, most
        important concepts are at the top of the piece and smaller, less relevant details appear later in the
        article. In talking with our User Experience Team Lead, &lt;a
            href=&quot;https://www.azavea.com/about/teammate/catherine-oldershaw/&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;Catherine Oldershaw&lt;/a&gt;, she told me that in UX this concept is often
        reversed, and instead manifests by managing the cognitive load of an application with a technique called
        “bubble up; drill down”. In other words, more digestible pieces of information bubble to the top and the
        author drills down to more complex details as the documentation is written.&amp;nbsp;&lt;/p&gt;
    &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;“A great way to check this is to see if the&amp;nbsp; information hierarchy matches the visual hierarchy. Key
            information (high in the information hierarchy) should also be visually prominent (high in the visual
            hierarchy), and more nuanced, detailed information should be lower in the information hierarchy and
            visual hierarchy.”&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Catherine Oldershaw&lt;/b&gt;&lt;/p&gt;
    &lt;/blockquote&gt;

    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/azavea-blog-2.webp&quot;
        alt=&quot;An image with big text in the middle that says &amp;quot;you will read this first&amp;quot;, slightly smaller text below that reading &amp;quot;and then you will read this&amp;quot;, slightly smaller text below that readying &amp;quot;then this one&amp;quot;, and finally a line at the top in little print that says &amp;quot;And you will read this last&amp;quot;.&quot;&gt;

    &lt;p&gt;During our conversation, Catherine also shared that developers tend to write documentation that follows the
        structure of the project, instead of following a structure that would improve readability. In order to
        maximize readability, it is much more helpful to structure the documentation in a manner that a developer
        new to the project would expect (i.e. with clear and skimmable sections), but this is not the norm. There is
        some serious discretion needed to determine this, but following an organization design the reader is
        familiar with can lead to great success.&lt;/p&gt;
    &lt;p&gt;Although it may seem counterintuitive to many developers, repeating important information while generating
        documentation is crucial and doesn’t take away from the piece’s skimmability. As devs, we are taught to
        write DRY code (Don’t Repeat Yourself) which certainly makes more maintainable code. This being
        said,documentation is for teaching as much for reference, and in a previous career I was trained that
        repetition is good for teaching. American reading teachers are trained with the idea that you begin to
        understand a word after you have heard or read it seven times.&amp;nbsp;&lt;/p&gt;
    &lt;p&gt;While repetition may seem tedious to read, good documentation will explain a concept or abstraction just
        about any time it comes up. This reduces how much the reader needs to move back and forth to understand what
        they are reading and helps to avoid splitting their attention while reading about how to use or develop the
        app. Repetition also helps to make the documentation more skimmable, which is very desirable.&lt;/p&gt;

    &lt;h3&gt;A Good Example:&lt;/h3&gt;
    &lt;p&gt;&lt;a href=&quot;https://ant.design/docs/react/introduce&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;Ant Design&lt;/a&gt; is
        a library of React components and represents a great example of effective documentation. When looking
        through their components pages, there is a consistent shape to each component’s write-up.&lt;/p&gt;
    &lt;p&gt;There is a small description of what each component is and what it is for, followed by a more in-depth
        description of the particulars of the components and why one may need those different settings. After these
        descriptions, there are examples of variations on the component that show what the different settings and
        props do.&lt;/p&gt;

    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/azavea-blog-3.webp&quot;
        alt=&quot;A screenshot of text that reads &amp;quot;Radio. When To Use: Used to select a single state from multiple options. The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn&apos;t be too many of them.&amp;quot;&quot; /&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/azavea-blog-4.webp&quot; alt=&quot;Screenshots of a variety of buttons &quot; /&gt;


    &lt;p&gt;AntD’s component docs also have code examples and interactive sandboxes that are entirely either “opt-in” or
        collapsed so as not to overwhelm the reader. The documentation finishes out with an API reference chart for
        experienced developers to find the particular details like default values or the list of options for any
        specific quality the dev is looking for.&lt;/p&gt;

    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/azavea-blog-5.webp&quot;
        alt=&quot;Interactive examples from Antd of buttons, with one code example open&quot;&gt;
    &lt;img src=&quot;https://travissouthard.com/assets/images/blog/azavea-blog-6.webp&quot;
        alt=&quot;A screenshot of an API reference example for Antd’s radio button&quot;&gt;

    &lt;p&gt;The shape of these documents make it easy for devs new to AntD to easily get a descriptive walk through what
        this component does and why its different pieces are useful. Having an API chart at the bottom is also great
        for veteran AntD users to quickly look up specifics like default values, types, and a quick reminder. Having
        benefits for both audiences doesn’t detract from either experience, and the consistency of this format
        amongst all the different components means once you understand the pattern it’s very easy to look through
        any component’s doc for the details of any specific needs.&lt;/p&gt;

    &lt;h3&gt;A specific odd example&lt;/h3&gt;

    &lt;p&gt;As said above, documentation is more than just README.md and /docs pages. One of the bits we do well at
        Azavea, especially on the Civic Applications team, is using commit messages as documentation. This may seem
        odd to some developers, since many do not consider this to be documentation.&lt;/p&gt;
    &lt;p&gt;When looking at what may read at first as an odd piece of code, we check the git blame and see what commit
        and PR this piece of code came from. Ideally this PR will say what was trying to be solved as a whole and
        the commit will say what was specifically changed to do this.&lt;/p&gt;
    &lt;p&gt;Our local master of this technique is Senior Software Engineer, &lt;a
            href=&quot;https://www.azavea.com/about/teammate/terence-tuhinanshu/&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;Terence Tuhinanshu&lt;/a&gt; of the Climate Applications team, who gave some great
        insight into this. At Azavea we try to write pull requests that address a particular issue and contain a
        list of commits that each make one change and title that change clearly in less than 50 characters (the
        limit to display in one line in GitHub), with optional details for further motivation. Each of these commits
        should appear in order, start with a present tense verb, and ideally read like steps in a recipe for how to
        make this PR.&lt;/p&gt;
    &lt;p&gt;
        &lt;a href=&quot;https://github.com/azavea/iow-boundary-tool/pull/50/commits&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;Here are&lt;/a&gt;
        &lt;a href=&quot;https://github.com/WikiWatershed/model-my-watershed/pull/3432/commits&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;a few&lt;/a&gt;
        &lt;a href=&quot;https://github.com/WikiWatershed/model-my-watershed/pull/3406/commits&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;examples&lt;/a&gt; of this that Terence has put together over the years, including
        &lt;a href=&quot;https://github.com/WikiWatershed/model-my-watershed/pull/2527/commits&quot; target=&quot;_blank&quot;
            rel=&quot;noreferrer noopener&quot;&gt;one&lt;/a&gt; while Terence was into
        &lt;a href=&quot;https://gitmoji.dev/&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;Gitmoji&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;The recipe part here is a nice analogy since recipes often fit a clear format that we often skim through and
        recheck each time we want to make a particular piece of craft. These steps should each be performed on their
        own and written with simple language to describe the action taken. A developer looking through this should
        be able to look through these steps and see how to recreate this themself or undo this work.&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;So, what makes good documentation?&lt;/strong&gt;&lt;/p&gt;
    &lt;p&gt;There are many things that contribute to quality of documentation but to boil it down to a referenceable list
        we can say that good documentation is:&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Skimmable&lt;/li&gt;
        &lt;li&gt;Centralized (as much as possible)&lt;/li&gt;
        &lt;li&gt;Consistently shaped&lt;/li&gt;
        &lt;li&gt;Structured to the needs of the reader&lt;/li&gt;
        &lt;li&gt;Holistic&lt;/li&gt;
        &lt;li&gt;But also referenceable&lt;/li&gt;
    &lt;/ul&gt;
      </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/blog/why-is-some-documentation-better-than-others.html</link>
            <pubDate>Tue, 06 Dec 2022 05:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/blog/why-is-some-documentation-better-than-others.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>CRT Flower</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/crt-flower.png&quot; alt=&quot;A low-color pixel art image of a potted flowering plant growing inside of an empty CRT TV&quot;/&gt;
      &lt;/a&gt;
  </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/crt-flower.html</link>
            <pubDate>Sun, 06 Nov 2022 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/crt-flower.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>House Portrait</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/house.png&quot; alt=&quot;A 4-color grayscale art image of a rowhome&quot;/&gt;
      &lt;/a&gt;
  </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/house-portrait.html</link>
            <pubDate>Sun, 30 Oct 2022 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/house-portrait.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>1-bit Self Portrait</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/pixel-art-portrait.png&quot; alt=&quot;A 1-bit art self portrait of a man using a keyboard&quot;/&gt;
      &lt;/a&gt;
  </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/1-bit-self-portrait.html</link>
            <pubDate>Sun, 16 Oct 2022 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/1-bit-self-portrait.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>1-bit Mushroom</title>
            <description>&lt;a href=&quot;https://travissouthard.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/art/mushroom.png&quot; alt=&quot;A 1-bit art closeup image of a whitecap mushroom&quot;/&gt;
      &lt;/a&gt;
  </description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/art/1-bit-mushroom.html</link>
            <pubDate>Mon, 10 Oct 2022 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/art/1-bit-mushroom.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Gravity Play</title>
            <description>&lt;a href=&quot;https://editor.p5js.org/travissouthard/full/Fq_vEfA8O&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/gravity-play.png&quot; alt=&quot;Screenshot of small colorful planets orbiting each other in a gravity simulation.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A small 2D simulation of particles enacting gravity on 
        each other and combining as they get close together.&lt;/p&gt;See the &lt;a href=&quot;https://editor.p5js.org/travissouthard/sketches/Fq_vEfA8O&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://editor.p5js.org/travissouthard/full/Fq_vEfA8O</link>
            <pubDate>Sat, 16 Jan 2021 05:00:00 GMT</pubDate>
            <guid>https://editor.p5js.org/travissouthard/full/Fq_vEfA8O</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Minesweeper Clone</title>
            <description>&lt;a href=&quot;https://travissouthard.com/games/minesweeper/index.html&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/minesweeper.png&quot; alt=&quot;Screenshot of my Minesweeper game.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A clone of the classic computer game, Minesweeper.&lt;/p&gt;See the &lt;a href=&quot;https://github.com/travissouthard/travissouthard.github.io/tree/master/games/minesweeper&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/games/minesweeper/index.html</link>
            <pubDate>Sun, 30 Aug 2020 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/games/minesweeper/index.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
        <item>
            <title>Bike Camping PHL</title>
            <description>&lt;a href=&quot;https://travissouthard.com/bike_camping_PHL/index.html&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;https://travissouthard.com/assets/images/projects/bike_camping_phl.png&quot; alt=&quot;Screenshot of my Bike Camping PHL checklist app.&quot;/&gt;
      &lt;/a&gt;
  &lt;p&gt;A Philadelphia-specific weather based packing 
        list for bike camping trips.&lt;/p&gt;See the &lt;a href=&quot;https://github.com/travissouthard/travissouthard.github.io/tree/master/bike_camping_PHL&quot; target=&quot;blank&quot;&gt;code here&lt;/a&gt;</description>
            <author>Travis Southard</author>
            <link>https://travissouthard.com/bike_camping_PHL/index.html</link>
            <pubDate>Wed, 01 Jul 2020 04:00:00 GMT</pubDate>
            <guid>https://travissouthard.com/bike_camping_PHL/index.html</guid>
            <source url="https://travissouthard.com/rss.xml">Travis Southard's Blog</source>
        </item>
</channel>

</rss>