<p>Too much Musk this week.</p>
<h2 id="in-depth">In-Depth</h2>
<p>&lt;InDepthNotes
    source=&quot;Nilay Patel&quot;
    title=&quot;Welcome to Hell, Elon&quot;
    url=&quot;<a href="https://www.theverge.com/2022/10/28/23428132/elon-musk-twitter-acquisition-problems-speech-moderation&quot;">https://www.theverge.com/2022/10/28/23428132/elon-musk-twitter-acquisition-problems-speech-moderation&quot;</a></p>
<blockquote>
</blockquote>
<pre><code>Twitter is now in Elon Musk&#39;s hands and I suspect he&#39;s in well over his head. I myself am probably leaving Twitter and am already more active on [Mastodon](https://mastodon.social/@kpwags). Free speech is what makes this country great but time and time again this has proven to turn online platforms into cesspools. Assuming Musk treats Twitter the same way as Gab, Parler and the like, I would imagine that Twitter would probably head down that route too, though probably to a lesser extent.
</code></pre>
</InDepthNotes>

<p>&lt;InDepthNotes
    source=&quot;Vercel&quot;
    title=&quot;Next.js 13&quot;
    url=&quot;<a href="https://nextjs.org/blog/next-13&quot;">https://nextjs.org/blog/next-13&quot;</a></p>
<blockquote>
</blockquote>
<pre><code>My blog runs on Next.js and I&#39;m curious as to the new improvements, especially with regards to [Turbopack](https://nextjs.org/blog/next-13#introducing-turbopack-alpha)
</code></pre>
</InDepthNotes>

<h2 id="link-blast">Link Blast</h2>
<h3 className="text">👨🏼‍💻 Software Development</h3>

<p><a href="https://www.stefanjudis.com/snippets/a-centered-css-grid-with-full-width-components/">A centered CSS grid with full-width components</a> <em>(Stefan Judis)</em></p>
<p><a href="https://steven-giesel.com/blogPost/bc82fda9-eb47-47bd-850b-9d115a59a571">Throwing exceptions - Why is my stack trace lost?</a> <em>(Steven Giesel)</em></p>
<p><a href="https://bradfrost.com/blog/post/lets-talk-about-web-components/">Let&#39;s talk about web components</a> <em>(Brad Frost)</em></p>
<p><a href="https://dev.to/elliot_brenyasarfo_18749/its-ok-to-write-garbage-code-once-in-a-while-3bjp">It&#39;s OK to write garbage code once in a while.</a> <em>(Elliot Brenya sarfo)</em></p>
<p><a href="https://cloudfour.com/thinks/highly-customizable-background-gradients/">Highly Customizable Background Gradients</a> <em>(Scott Vandehey)</em></p>
<p><a href="https://enterprisecraftsmanship.com/posts/generic-types-arguments-specific-types-return-values/">Generic types are for arguments, specific types are for return values</a> <em>(Vladimir Khorikov)</em></p>
<p><a href="https://blog.ndepend.com/c-11-file-scoped-types/">C# 11 File Scoped Types</a> <em>(Patrick Smacchia)</em></p>
<p><a href="https://dev.to/integerman/differences-between-net-collection-interfaces-g3i">Differences between .NET Collection Interfaces</a> <em>(Matt Eland)</em></p>
<h3 className="text">🖥 Technology</h3>

<p><a href="https://arstechnica.com/gadgets/2022/10/lego-to-discontinue-mindstorms-robot-line-after-a-24-year-run/">Lego to discontinue Mindstorms robot line after a 24-year run</a> <em>(Benj Edwards)</em></p>
<p><a href="https://arstechnica.com/gadgets/2022/10/linux-kernel-needs-your-help-testing-backlight-drivers-on-old-weird-laptops/">&quot;Old/weird laptops&quot; sought to help test Linux kernel backlight drivers</a> <em>(Kevin Purdy)</em></p>
<h3 className="text">🎮 Gaming</h3>

<p><a href="https://www.polygon.com/23423466/age-of-empires-definitive-edition-xbox-console-release-date">Age of Empires is coming for your Xbox</a> <em>(Ana Diaz)</em></p>
<p><a href="https://www.polygon.com/23423009/call-of-duty-modern-warfare-2-de-escalation-trailer-park-press-f">Modern Warfare 2 teaches players the worst way to ‘de-escalate’ a risky situation</a> <em>(Owen S. Good)</em></p>
<h3 className="text">📈 Business and Finance</h3>

<p><a href="https://www.economist.com/business/2022/10/24/the-end-of-apples-affair-with-china">The end of Apple&#39;s affair with China</a> <em>(💰 The Economist)</em></p>
<p><a href="https://arstechnica.com/tech-policy/2022/10/elon-musk-completes-twitter-purchase-immediately-fires-ceo-and-other-execs/">Elon Musk completes Twitter purchase, immediately fires CEO and other execs</a> <em>(Jon Brodkin)</em></p>
<h3 className="text">🔬 Science</h3>

<p><a href="https://arstechnica.com/science/2022/10/top-covid-symptoms-shift-from-fever-cough-to-sore-throat-stuffy-nose/">With shots and infections, the most common COVID symptoms have shifted</a> <em>(Beth Mole)</em></p>
<h3 className="text">⚾ Sports</h3>

<p><a href="https://blogs.fangraphs.com/bryce-harpers-game-5-home-run-was-a-master-class-in-hitting/">Bryce Harper&#39;s Game 5 Home Run Was a Master Class in Hitting</a> <em>(Esteban Rivera)</em></p>
<h3 className="text">🎧 Podcasts</h3>

<p><a href="https://www.npr.org/2022/10/20/1130379581/the-uks-productivity-problem">The Indicator: The UK&#39;s productivity problem</a></p>
<p><a href="https://radiolab.org/episodes/helen-keller-exorcism">Radiolab: The Helen Keller Exorcism</a></p>
<p><a href="https://changelog.com/jsparty/216">JS Party #216: Enabling performance-centric engineering orgs</a></p>
<p><a href="https://www.marketplace.org/shows/marketplace-tech/cryptocurrency-has-a-trust-problem/">Marketplace Tech: Cryptocurrency has a trust problem</a></p>
<h3 className="text">🎒 Everything Else</h3>

<p><a href="https://www.gq.com/story/wrexham-fc-ryan-reynolds-rob-mcelhenney">Inside Ryan Reynolds and Rob McElhenney’s Great Wrexham Gambit</a> <em>(Tom Lamont)</em></p>
<h3 className="text">🎵 A Song to Leave You With</h3>

<h4 id="the-scandals---lucky-sevens">The Scandals - Lucky Sevens</h4>
<p><YouTubeEmbed
    id="6eBfX_a9_o4"
    title="The Scandals - Lucky Sevens"
/></p>


Reading Log - October 28 (#3)

<p>I&#39;ve been tweaking my site here and there and the one thing I recently did was change how I populate my &#39;<a href="/likes">likes</a>&#39; page. Previously I had been doing it manually, but recently after having listened to the founder of <a href="https://feedbin.com">Feedbin</a> on the <a href="https://changelog.com/podcast/499">Changelog Podcast</a>, I decided to try something different. I wanted to use a nice feature Feedbin has to make the page better.</p>
<p>I&#39;m a subscriber to <a href="https://feedbin.com">Feedbin</a> and the one feature it provides is the ability to view the items you&#39;ve starred as a feed in and of itself. That means that for any article on any of my feeds, when I star it, it gets added to its own RSS feed that is public. I decided that I was going to use that to populate my <a href="/likes">likes page</a>.</p>
<p>The first thing I needed to do was to create a TypeScript model for it.</p>
<pre><code class="language-ts">interface FeedbinItem {
    title: string
    link: string
    domain: string
}
</code></pre>
<p>It&#39;s a pretty simple model, I want the title, the URL, and the domain.</p>
<p>The next thing I needed to do was to find a good way to parse the XML returned from Feedbin. Since I&#39;m using Node, the DOM Parser the browser uses is a no go as the Node backend doesn&#39;t support it. Fortunately I found <a href="https://github.com/NaturalIntelligence/fast-xml-parser">fast-xml-parser</a> which does a fantastic job of converting an XML string into a JSON object that would allow me to easily go through the data returned.</p>
<pre><code class="language-ts">import { FeedbinItem } from &#39;@models/FeedbinItem&#39;;
import { XMLParser } from &#39;fast-xml-parser&#39;;

export const getFeedbinItems = async (): Promise&lt;FeedbinItem[]&gt; =&gt; {
    const items: FeedbinItem[] = [];

    const res = await fetch(&#39;https://feedbin.com/starred/starred-items.xml&#39;);

    if (!res.ok) {
        // handle error logic
        return [];
    }

    const response = await res.text();

    const parser = new XMLParser();
    const data = parser.parse(response);

    data.rss.channel.item.forEach((i: any) =&gt; {
        const domain = (new URL(i.link));

        items.push({
            title: i.title,
            link: i.link,
            domain: domain.hostname,
        });
    });

    return items;
};
</code></pre>
<p>The first thing I do in the code is to declare the array of items to return. I then make a fetch call to Feedbin to retrieve my starred items.</p>
<pre><code class="language-ts">const res = await fetch(&#39;https://feedbin.com/starred/starred-items.xml&#39;);
</code></pre>
<p>Assuming the call was successful, I create the parser and have it parse the XML into a JSON object.</p>
<pre><code class="language-ts">const parser = new XMLParser();
const data = parser.parse(response);
</code></pre>
<p>After that, it&#39;s simply parsing the returned items and adding them to the items array.</p>
<pre><code class="language-ts">data.rss.channel.item.forEach((i: any) =&gt; {
    const domain = (new URL(i.link));

    items.push({
        title: i.title,
        link: i.link,
        domain: domain.hostname,
    });
});
</code></pre>
<p>The only slight complication is me getting the domain or hostname from the article&#39;s link to add that to the model. For that, I simply create a new <code>URL</code> object and pass the link in and then grab the hostname.</p>
<p>The next step was to pull the data into the page in Next.js. Originally I was just using a <code>.ts</code> file with an array of my likes. Since it was static data, I just used Next.js&#39; <code>getStaticProps</code> to get the data from the <code>.ts</code> file and load it into the component. Since I need this to now be dynamic, I switched to the <code>getServerSideProps</code> so that the call is made on the server, rendered on the server, and sent down to the client after.</p>
<p>I wrapped the fetch code above into its own file to make the <code>likes.tsx</code> component a little cleaner.</p>
<pre><code class="language-ts">import { getFeedbinItems } from &#39;@lib/feedbin&#39;;
import { FeedbinItem } from &#39;@models/FeedbinItem&#39;;

export const getServerSideProps: GetStaticProps = async () =&gt; {
    const data = await getFeedbinItems();

    return {
        props: {
            // only return most recent 25
            likedItems: data.slice(0, 25),
        },
    };
};

type LikeProps = {
    likedItems: FeedbinItem[];
};

const Likes = ({ likedItems }: LikeProps): JSX.Element =&gt; {
    // the render code
}
</code></pre>
<p>It&#39;s pretty simple. When the page is to be rendered, it loads the starred items from my custom RSS feed, and passes the items into the React component.</p>
<p>So there you have it. It&#39;s a pretty simple thing to setup, and it provides me a way to keep my likes page a little more up-to-date without having to manually add items. Of course it means that the items I star have to be part of an RSS feed, but that&#39;s why everyone should have a blog of their own WITH an RSS feed.</p>
<p><em>Edited 8/3/2022 - Typo/Grammar Edit</em></p>


Updating My Likes Page with Feedbin

<p>A little bit of everything this week from new features coming to .NET and Next.js, to working from home, and prediting the future.</p>
<p>🧑🏼‍💻 <a href="https://www.telerik.com/blogs/build-2022-updates-aspnet-core-developers"><strong>Build 2022 Updates for ASP.NET Core Developers</strong></a> - As a .NET developer, always keeping up with all the awesome features they&#39;re adding. <span className="domain-name">(telerik.com)</span></p>
<p>🧑🏼‍💻 <a href="https://nextjs.org/blog/layouts-rfc"><strong>NEXT.js Layouts RFC</strong></a> - I&#39;m excited to try this out when they release it. This blog is built on Next.js! <span className="domain-name">(nextjs.org)</span></p>
<p>🕵🏻‍♂️ <a href="https://world.hey.com/dhh/employee-surveillance-software-is-managerial-bankruptcy-94e48a08"><strong>Employee surveillance software is managerial bankruptcy</strong></a> - I&#39;m a firm believer in trusting your employees to do their work. It&#39;s pretty obvious when they aren&#39;t, you don&#39;t need spyware to do it. <span className="domain-name">(hey.com)</span></p>
<p>🔮 <a href="https://www.techdirt.com/2022/04/05/techdirt-podcast-episode-316-predicting-the-future/"><strong>Techdirt Podcast #316: Predicting the Future</strong></a> - Interesting discussion on making predictions about the future and getting better at it. <span className="domain-name">(techdirt.com)</span></p>


Reading List: June 4 - June 10

<p>I&#39;ve been using Jekyll to run this blog for the better part of the last six years. But recently, I&#39;ve been giving serious consideration to switching to Gatsby or Next.js.</p>
<p>I have several reasons for making the move away from Jekyll. Some is pure personal preference, some involves the technology used, and part of it is to learn something new.</p>
<h2 id="missing-features--personal-preference">Missing Features &amp; Personal Preference</h2>
<p>There are several features I&#39;ve been wanting to add to my blog. The biggest one is probably search. I&#39;ve been looking into adding search, and while possible, doesn&#39;t seem as easy as I would hope it to be. Part of this also comes down to the fact the Jekyll is built on Ruby, which is not a language I know all that well. I&#39;ve been able to keep this going, but it&#39;s still a hill to climb. This is the personal preference part of things. I&#39;m a .NET &amp; Javascript developer primarily, and that&#39;s where my comfort zone is. It&#39;s not a knock on Ruby, just not something I want to spend a lot of time delving into.</p>
<h2 id="the-tech-stack">The Tech Stack</h2>
<p>I also wanted to move to a stack I better understood. I&#39;ve been working with React for a couple years on the side, and now I&#39;m using it professionally as well. I thought it would be beneficial and easier to work with if I had a better understanding of the tools &amp; language used.</p>
<p>Another thing I was looking into improving was my build/deployment process. I host my blog on AWS using their S3 storage. The upside is that hosting is dirt cheap for me (granted there&#39;s very little processing power for my site, nor do I have many visitors). The downside is that there&#39;s a lot of caching involved so any changes can take a day or so to be reflected. There are ways around this of course, but I&#39;m a little cost-conscious and am worried about racking up too large a bill. This can also cause any embarassing bugs or typos (or anything else really) to be visible for much longer than I&#39;d like.</p>
<h2 id="making-the-switch">Making the Switch</h2>
<PostImage src="/images/posts/2021-04-27-switching-platforms/nextjs.svg" alt="Next.js Logo" width={207} height={124} centered shadowed={false} />

<p>I&#39;ve given it a fair amount of thought and right now I believe I will be starting the design and implementation of my blog using Next.js. I used Next.js with <a href="https://advancedreact.com/">Wes Bos&#39; Advanced React &amp; GraphQL Course</a> &amp; <a href="https://github.com/kpwags/digitalfamilycookbook">Digital Family Cookbook</a> so I have some familiarity with it over Gatsby. But while I have some familiarity with it, it wasn&#39;t heavily used in either project so I figure this will also be a learning project.</p>
<h2 id="the-process">The Process</h2>
<p>I plan on building this out in the open and will be starting with a <a href="https://github.com/kpwags/new.kpwags.com">brand new public repository on GitHub</a>. I&#39;m going to build it using feature branches (like I&#39;ve been doing with my fitness tracker) with issues created for most work. Unlike my current blog where I mostly just work off of the main branch, I&#39;ll be doing this one the &quot;proper&quot; way. I&#39;m even planning on keeping at it with future posts.</p>
<p>I&#39;m also hoping to write about how things are going and the progress I&#39;m making as well as why I&#39;ve chosen doing things the way I do. I&#39;ve also been toying with streaming some of the development on <a href="https://www.twitch.tv/kpwags">Twitch</a>.</p>
<p>There&#39;s no rush to build this, so while I&#39;m going to try to devote some time on it regularly, I also want to continue to work on my fitness tracker. So keep checking back as I&#39;m sure there will be more posts between now and when I officially make the switch.</p>


RSS Feeds

All Posts

Blog Posts

Reading Logs

Photo Blog

Colors

Font

Posts Tagged
Next.js

Reading Log - October 28 (#3)

Updating My Likes Page with Feedbin

Reading List: June 4 - June 10

Switching Platforms

RSS Feeds

All Posts

Blog Posts

Reading Logs

Photo Blog

Colors

Font

Posts TaggedNext.js

Reading Log - October 28 (#3)

Updating My Likes Page with Feedbin

Reading List: June 4 - June 10

Switching Platforms

Posts Tagged
Next.js