<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Steven</title>
    <description>The latest articles on DEV Community by Steven (@styfle).</description>
    <link>https://dev.to/styfle</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F246546%2F0224fdd3-fc68-468d-9379-93ed4526663b.jpeg</url>
      <title>DEV Community: Steven</title>
      <link>https://dev.to/styfle</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/styfle"/>
    <language>en</language>
    <item>
      <title>Software Shepherd</title>
      <dc:creator>Steven</dc:creator>
      <pubDate>Sun, 25 Apr 2021 20:06:56 +0000</pubDate>
      <link>https://dev.to/styfle/software-shepherd-5cnn</link>
      <guid>https://dev.to/styfle/software-shepherd-5cnn</guid>
      <description>&lt;p&gt;A few years ago, I changed my Twitter bio from Software Engineer to &lt;a href="https://twitter.com/styfle/status/1083763630108217344"&gt;Software Shepherd&lt;/a&gt; for a number of reasons. I couldn't fit these reasons into a tweet so I wrote an entire blog post.&lt;/p&gt;

&lt;h2&gt;
  
  
  Title
&lt;/h2&gt;

&lt;p&gt;There are many different titles for very similar jobs and everyone has different ideas about which titles are more prestigious than others. Titles aren't standardized, so the same title could mean two different things at two different organizations. Here are some of the common titles I've seen in the wild:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Coder&lt;/li&gt;
&lt;li&gt;Programmer&lt;/li&gt;
&lt;li&gt;Developer&lt;/li&gt;
&lt;li&gt;Engineer&lt;/li&gt;
&lt;li&gt;Technologist&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And those are just the nouns...slap a few adjectives in front and you get &lt;em&gt;Senior Software Engineer&lt;/em&gt;, &lt;em&gt;Full-Stack Developer&lt;/em&gt;, and even &lt;em&gt;Principal Technologist&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Do these have titles have different meanings? Sometimes. But often they're the same position. Do people people treat these titles differently? I think so. They probably even come with different salaries. But more than the money, some of these titles are better known outside of the industry.&lt;/p&gt;

&lt;p&gt;Take for instance, meeting someone new. When you meet someone new, they typically ask two questions, "What's your name?" followed by "What do you do?" which really means "What's your job title so I can evaluate if you are interesting or wealthy enough to be worth talking to?"&lt;/p&gt;

&lt;p&gt;I remember getting very different reactions when I could finally change my response from "I'm a cashier at BigCorp1" to "I'm a Software Engineer at BigCorp2". The former would usually stop the conversation or at least change the topic. The latter opened new social engagement and carried a higher status.&lt;/p&gt;

&lt;p&gt;All that to say, I found that titles affected how I treated people and how others treated me. So I wanted to invent a title no one had ever heard before so it wouldn't have a good (or bad) connotation associated with it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Shepherd
&lt;/h2&gt;

&lt;p&gt;In my infinite creativity I came up with &lt;em&gt;Shepherd&lt;/em&gt;, a word that doesn't hold the same connotation as &lt;em&gt;Engineer&lt;/em&gt;. I admit, I was influenced by the term &lt;em&gt;Software Gardener&lt;/em&gt;, a title that implies software starts as a seed that evolves and grows over time. This feels more like the software I've worked on.&lt;/p&gt;

&lt;p&gt;Contrast Software Engineering with Civil Engineering where a bridge is engineered to remain steady, durable, constant, and basically "feature complete". Flexibility is designed into the structure itself so it can withstand changes around it, but the structure itself doesn't change.&lt;/p&gt;

&lt;p&gt;Software Gardener is a clever title that captures this difference, but it implies a slow evolution over a long time. It doesn't capture the real-time chaos of Software. That's why I prefer Software Shepherd.&lt;/p&gt;

&lt;p&gt;Software Shepherd implies a fast, autonomous livestock that might break if left unmaintained. Sheep without a shepherd can make &lt;a href="https://twitter.com/TobyonTV/status/1383681839236218885"&gt;poor decisions&lt;/a&gt; so there is an active role for the shepherd.&lt;/p&gt;

&lt;p&gt;Why is software autonomous? Doesn't it only do what we tell it to do?&lt;/p&gt;

&lt;p&gt;Well yes, but when you have many people working on the same code with slightly different intentions distributed in many different time zones, the code doesn't remain the same. It's constantly changing one day to the next. And not just code, but upstream services that your code relies on can change or go down causing unexpected behavior.&lt;/p&gt;

&lt;p&gt;Shepherd is also a title that is not usually considered prestigious. Sometimes they don't even own the sheep, they're just hired hands. They might even live with the livestock. Shepherds sometimes work in groups to keep watch and guide the sheep. They work as a team towards a common goal.&lt;/p&gt;

&lt;p&gt;Finally, Jesus calls himself the &lt;a href="https://www.biblegateway.com/passage/?search=John+10&amp;amp;version=ESV"&gt;good shepherd&lt;/a&gt;, someone who lays down his life for his sheep. This is where my metaphor breaks down a bit, but the idea is that great leaders will set aside their own pride to help others.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I made a fun title to be unique and remind myself how to work together with others, making sure to capture the complexities of both software and people.&lt;/p&gt;

</description>
      <category>career</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Website Redesign 3.0</title>
      <dc:creator>Steven</dc:creator>
      <pubDate>Sun, 10 May 2020 04:15:15 +0000</pubDate>
      <link>https://dev.to/styfle/website-redesign-3-0-4898</link>
      <guid>https://dev.to/styfle/website-redesign-3-0-4898</guid>
      <description>&lt;p&gt;It's been a few years, well &lt;a href="https://styfle.dev/website-redesign-2-0"&gt;5 years&lt;/a&gt;, since the last time I redesigned my website and roughly 2 years since my last blog post, excluding work related &lt;a href="https://vercel.com/blog/social-og-image-cards-as-a-service"&gt;posts&lt;/a&gt;. &lt;/p&gt;

&lt;h2&gt;
  
  
  History
&lt;/h2&gt;

&lt;p&gt;A little history behind my personal website...&lt;/p&gt;

&lt;p&gt;I purchased &lt;a href="https://www.ceriously.com"&gt;ceriously.com&lt;/a&gt; in 2010 because owning a dot com was &lt;a href="https://answers.yahoo.com/question/index?qid=20080104203608AAhuSDZ"&gt;"da bomb"&lt;/a&gt; as we used to say back then. I wanted a place to host personal projects and anyone who was cool owned their own domain. Maybe I would pick up blogging too. Who doesn't like to talk about themselves? &lt;/p&gt;

&lt;p&gt;I cobbled together some PHP pages and uploaded some &lt;code&gt;.jar&lt;/code&gt; files via FTP because Java was a great way to distribute software back then (narrator: it is not). FTP was fine but then Git started becoming popular so I decided to setup SSH so I could &lt;code&gt;git push&lt;/code&gt; to deploy my website.&lt;/p&gt;

&lt;p&gt;For new projects, I found myself using GitHub instead of my personal website because it was much easier to manage source code as well as binary downloads (now called Releases). I started linking from my personal website to GitHub because all of the information was already there.&lt;/p&gt;

&lt;h2&gt;
  
  
  Requirements
&lt;/h2&gt;

&lt;p&gt;Before I could rewrite my website from scratch, I made a few goals:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Fast - perf matters, no one waits for a blog that takes several seconds to load&lt;/li&gt;
&lt;li&gt;No PHP - embrace ~JavaScript~ TypeScript and React&lt;/li&gt;
&lt;li&gt;GitHub - must fetch my projects from GitHub API as source of truth&lt;/li&gt;
&lt;li&gt;Dark Mode - must support both Light Mode and Dark Mode based on system preference&lt;/li&gt;
&lt;li&gt;Markdown - must be able to author blog posts with Markdown&lt;/li&gt;
&lt;li&gt;Domain - must use a sweet gTLD like &lt;a href="https://get.dev"&gt;.dev&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Deploy - must use be hosted on GitHub and use &lt;code&gt;git push&lt;/code&gt; to deploy&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;I decided to use &lt;a href="https://nextjs.org"&gt;Next.js&lt;/a&gt; because of a recent &lt;a href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support"&gt;SSG feature&lt;/a&gt; that feels like SSR but it renders pages at build time. This allowed me to check off number 1 and 2 from the list because I could use TypeScript with React and ensure fast page loads because the generated pages would be static HTML. Next.js also hands &lt;a href="https://nextjs.org/docs/api-reference/next/link"&gt;client-side transitions&lt;/a&gt; which avoids a complete reload when navigating between pages.&lt;/p&gt;

&lt;p&gt;For number 3, I utilized Next.js to fetch my projects at build time from the &lt;a href="https://developer.github.com/v3/repos/#list-repositories-for-the-authenticated-user"&gt;GitHub REST API&lt;/a&gt; using a personal access token. I didn't want to show private or archived repositories so those are filtered out in the query.&lt;/p&gt;

&lt;p&gt;I implemented support for Dark Mode and Light Mode by using the CSS media query &lt;code&gt;prefers-color-scheme&lt;/code&gt;. It looks something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"dark.css"&lt;/span&gt; &lt;span class="na"&gt;media=&lt;/span&gt;&lt;span class="s"&gt;"(prefers-color-scheme: dark)"&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/link&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"light.css"&lt;/span&gt; &lt;span class="na"&gt;media=&lt;/span&gt;&lt;span class="s"&gt;"(prefers-color-scheme: light)"&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/link&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The beauty here is that this media query respects the user's system preference so enabling &lt;a href="https://support.apple.com/en-us/HT208976"&gt;Appearance Auto&lt;/a&gt; in macOS Catalina will use the light appearance during the day, and the dark appearance at night. No more burning your eyes out of their sockets.&lt;/p&gt;

&lt;p&gt;In order to implement Markdown blog post authoring, I reached for &lt;a href="https://github.com/markedjs/marked"&gt;Marked&lt;/a&gt;, a project I help maintain that parses markdown and converts it to HTML. And, as you may have guessed, I used Next.js &lt;a href="https://nextjs.org/docs/routing/introduction#dynamic-route-segments"&gt;dynamic route segments&lt;/a&gt; to dynamically generate a page for each blog post. Is there anything Next.js can't do?&lt;/p&gt;

&lt;p&gt;The domain was easy. I actually purchased &lt;a href="https://twitter.com/styfle/status/1101238620982308864"&gt;styfle.dev&lt;/a&gt; a year ago because &lt;code&gt;.dev&lt;/code&gt; is the new hotness. &lt;a href="https://vercel.com/domains"&gt;Vercel&lt;/a&gt; makes it really easy to purchase a domain and assign it to a project in seconds.&lt;/p&gt;

&lt;p&gt;Which brings me to my last step, deployment. I set up &lt;a href="https://vercel.com/github"&gt;Vercel GitHub Integration&lt;/a&gt; with a few clicks so that each time I &lt;code&gt;git push&lt;/code&gt; to my &lt;a href="https://github.com/styfle/styfle.dev"&gt;repository&lt;/a&gt;, a new deployment is created. The best part here is that Vercel will deploy Pull Requests to a Preview URL and even take screenshots of the modified pages using the &lt;a href="https://vercel.com/integrations/deploy-summary"&gt;Deploy Summary Integration&lt;/a&gt;. For example, see &lt;a href="https://github.com/styfle/styfle.dev/pull/13"&gt;PR 13&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Overall, I'm happy with the new design and productivity boost. Perhaps I'll start blogging again. If you want to see the source code for my website, you can find it on &lt;a href="https://github.com/styfle/styfle.dev"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
