<p>Was a little busy last week so this week is a little longer.</p>
<h2 id="👨🏼💻software-development">👨🏼‍💻Software Development</h2>
<p><a href="https://www.joshwcomeau.com/react/why-react-re-renders">Why React Re-Renders</a> - <em>joshwcomeau.com</em></p>
<p><a href="https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/">Things Not Available When Someone Blocks All Cookies</a> - <em>tomayac.com</em></p>
<p><a href="https://mfcallahan.blog/2022/08/26/the-microsoft-edge-dev-tools-extension-for-vs-code-is-so-awesome-that-im-ditching-chrome-for-web-development/">The Microsoft Edge Dev Tools extension for VS Code is so awesome that I&#39;m ditching Chrome for web development</a> - <em>mfcallahan.blog</em></p>
<p><a href="https://devblogs.microsoft.com/dotnet/performance_improvements_in_net_7/">Performance Improvements in .NET 7</a> - <em>devblogs.microsoft.com</em></p>
<p><a href="https://webkit.org/blog/13140/webkit-on-github/">WebKit on GitHub</a> - <em>webkit.org</em></p>
<p><a href="https://blog.appsignal.com/2022/08/31/4-ways-to-minimize-your-dependencies-in-nodejs.html">4 Ways to Minimize Your Dependencies in Node.js</a> - <em>blog.appsignal.com</em></p>
<p><a href="https://beesbuzz.biz/code/439-Falsehoods-programmers-believe-about-email">Falsehoods Programmers Believe About Email</a> - <em>beesbuzz.biz</em></p>
<h2 id="🖥-technology">🖥 Technology</h2>
<p><a href="https://www.theverge.com/23312359/apple-iphone-lightning-cable-anniversary-10-years">Apple&#39;s Lightning cable turns 10, but its time is over</a> - <em>theverge.com</em></p>
<p><a href="https://www.techdirt.com/2022/08/31/france-uses-ai-to-find-swimming-pools-for-tax-purposes/">France Uses AI To Find Swimming Pools For Tax Purposes</a> - <em>techdirt.com</em></p>
<p><a href="https://stratechery.com/2022/rights-laws-and-google/">Rights, Laws, and Google</a> - <em>stratechery.com</em></p>
<h2 id="🎮-gaming">🎮 Gaming</h2>
<p><a href="https://www.theverge.com/2022/9/1/23332738/halo-infinite-season-3-delay-forge-launch-november">Halo Infinite’s co-op and Forge modes delayed to November</a> - <em>theverge.com</em></p>
<p><a href="https://www.destructoid.com/halo-infinite-forge-beta-split-screen-campaign-co-op-november-update">Halo Infinite will get Forge beta in November, but scraps split-screen campaign co-op</a> - <em>destructoid.com</em></p>
<h2 id="🔬-science">🔬 Science</h2>
<p><a href="https://www.economist.com/science-and-technology/2022/08/24/the-space-launch-system-is-yesterdays-rocket">The Space Launch System is Yesterday’s Rocket</a> - 💰- <em>economist.com</em></p>
<p><a href="https://arstechnica.com/science/2022/09/nasa-will-pay-boeing-more-than-twice-as-much-as-spacex-for-crew-seats/">NASA will pay Boeing more than twice as much as SpaceX for crew seats</a> - <em>arstechnica.com</em></p>
<h2 id="🎒-miscellaneous">🎒 Miscellaneous</h2>
<p><a href="https://neal.fun/design-the-next-iphone/">Design the Next iPhone</a> - <em>neal.fun</em></p>
<p><a href="https://brainbaking.com/post/2022/04/cool-things-people-do-with-their-blogs/">Cool Things People Do With Their Blogs</a> - <em>brainbaking.com</em></p>
<h2 id="🎵-a-song-to-leave-you-with">🎵 A Song to Leave You With</h2>
<h3 id="the-wonder-years---i-just-want-to-sell-out-my-funeral">The Wonder Years - I Just Want to Sell Out My Funeral</h3>
<p><YouTubeEmbed
    id="rwrsrsauHfI"
    title="The Wonder Years - I Just Want to Sell Out My Funeral"
/></p>


Reading List for August 20 - September 2

<p>Lately, I’ve been making steady progress on my side project, which I’m currently calling <em>Digital Family Cookbook</em>. I’m making it as a content management system for cooking recipes. As I’ve mentioned previously, I’m writing it using Node.js, React, &amp; GraphQL. It’s been quite a learning curve, but I’m definitely glad I’ve been working on it. The tools are pretty cool and easy-ish to use once you get used to the syntax and some of the idiosyncrasies of React and JSX.</p>
<h2 id="its-different-from-what-im-used-to">It’s different from what I’m used to</h2>
<p>Most of what I’ve written in the past has been Javascript interacting with a server running PHP or .NET, so I’m generally used to the way they work and run. I think the biggest thing that I’ve had to remember is that Node is just javascript and it runs synchronously so I have to be cognizant of that. I’m generally used to my server code running asynchronously and not having to worry as much about race conditions. Getting data from a SQL server in let’s say .NET will run the query and not move on until the query is complete. With Node, I have to make sure I don’t move on before the data fetch is complete. In ES5, this generally meant callback hell. Thankfully with promises, combined with async/await in ES6, this has become a little easier to manage, but it did have me confused for a little bit not thinking.</p>
<h3 id="the-gotcha-moment">The “Gotcha” Moment</h3>
<p>The perfect example of having to remember this difference was with what I’m currently working on. The feature I’m currently working on is the form to create recipes. I managed to get the form working, I got the data sent to the server, the recipe was created, but none of the directions or ingredients were attached to the recipe. I looked in the database and the directions were there, as were the ingredients, but the recipe had no idea they existed. I thought maybe the server wasn’t getting the data, but a console.log quickly showed me it was. What I failed to take into account was that the forEach function on the directions and ingredients array was not being awaited like I thought it was.</p>
<p>I wrote the code to go through each ingredient and direction, add it to the database, and add its ID to an array. Then in the create recipe mutation, add the connections. Because it wasn’t being awaited, the arrays didn’t get populated by the time it was running the create recipe mutation so no link was ever created…oops!</p>
<p>A quick change corrected that problem and all of a sudden, the form worked as expected.</p>
<pre><code class="language-js">const directionCreations = formValues.directions.map(async (d) =&gt; {
    const direction = await ctx.db.mutation.createDirection(
        {
            data: {
                direction: d.direction,
                sortOrder: d.sortOrder,
            },
        },
        ‘{ id }’,
    );

    return direction;
});

const directions = await Promise.all(directionCreations);
</code></pre>
<p>In the end, it was a pretty easy mistake to make, but it’s one I’m going to remember and learn from.</p>
<h2 id="moving-forward">Moving Forward</h2>
<p>I still have quite a bit of work to do on the project, but it’s nice to see some real progress on what I’m working on. I’m definitely enjoying the learning process and am excited to see some of my ideas come to life. I could have built this in a language like PHP, .NET or something I’m more familiar with and be done more quickly, but seeing the power of modern Javascript, GraphQL and Node.js, I’m quite happy with my technology decision. There’s so much to learn, and so much more room to grow.</p>


RSS Feeds

All Posts

Blog Posts

Reading Logs

Photo Blog

Colors

Font

Posts Tagged
Node.js

Reading List for August 20 - September 2

Continuing My Side Project & Learning React

RSS Feeds

All Posts

Blog Posts

Reading Logs

Photo Blog

Colors

Font

Posts TaggedNode.js

Reading List for August 20 - September 2

Continuing My Side Project & Learning React

Posts Tagged
Node.js