<p>New updates about .NET 8 &amp; TypeScript, JavaScript failures &amp; progressive enhancement, and more.</p>
<h2>In Depth</h2>
<p>&lt;InDepthNotes
    source=&quot;Jason Godesky&quot;
    title=&quot;When JavaScript Fails&quot;
    url=&quot;<a href="https://scribe.rip/@jason.godesky/when-javascript-fails-52eef47e90db">https://scribe.rip/@jason.godesky/when-javascript-fails-52eef47e90db</a>&quot;</p>
<blockquote>
</blockquote>
<pre><code>I&#39;ve been guilty of not properly handling my site without JavaScript enabled. I didn&#39;t even necessarily thing about what happens if it fails to load at all. It&#39;s important to think of the edge cases to help produce a good experience. There are obviously some functionality that require JavaScript, but that doesn&#39;t mean you should ignore the user and not have some fallback in place, even if it means alerting the user they need to turn on scripts.
</code></pre>
</InDepthNotes>

<h2>Link Blast</h2>
<h3>👨🏼‍💻 Software Development &amp; Design</h3>
<p><a href="https://blog.container-solutions.com/why-your-desk-is-the-worst-place-to-work-and-other-life-lessons-from-a-lazy-developer">Why Your Desk is the Worst Place to Work, and Other Life Lessons from a Lazy Developer</a> <em>Holly Cummins</em></p>
<p><a href="https://andrewlock.net/working-with-git-in-jetbrains-rider/">Working with Git in JetBrains Rider</a> <em>Andrew Lock</em></p>
<p><a href="https://frankrausch.com/ios-navigation">Modern iOS Navigation Patterns</a> <em>Frank Rausch</em></p>
<p><a href="https://devblogs.microsoft.com/dotnet/announcing-ef8-preview-2/">EF Core 8 Preview 2: Lite and familiar</a> <em>Arthur Vickers</em></p>
<p><a href="https://blogs.windows.com/msedgedev/2023/03/14/taking-control-of-your-applications-title-bar/">Taking control of your application&#39;s title bar</a> <em>Diego Gonzalez</em></p>
<p><a href="https://css-tricks.com/5-mistakes-starting-react/">5 Mistakes I Made When Starting My First React Project</a> <em>Richard Oliver Bray</em></p>
<p><a href="https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules">16 little UI design rules that make a big impact</a> <em>Adham Dannaway</em></p>
<p><a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/">Announcing TypeScript 5.0</a> <em>Daniel Rosenwasser</em></p>
<p><a href="https://luketheweb.dev/blog/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app">What is Vite and Why Should You Use It Instead of Create React App?</a> <em>Luke Twomey</em></p>
<p><a href="https://modernfontstacks.com/">Modern Font Stacks</a> <em>Dan Klammer</em></p>
<p><a href="https://joshcollinsworth.com/blog/great-transitions">Ten tips for better CSS transitions and animations</a> <em>Josh Collinsworth</em></p>
<p><a href="https://react.dev/blog/2023/03/16/introducing-react-dev">Introducing react.dev</a> <em>Dan Abramov &amp; Rachel Nabors</em></p>
<p><a href="https://devblogs.microsoft.com/dotnet/how-async-await-really-works/">How Async/Await Really Works in C# - .NET Blog</a> <em>Stephen Toub</em></p>
<h3>🖥 Technology &amp; the Internet</h3>
<p><a href="https://www.wired.com/story/why-the-floppy-disk-just-wont-die/">Why the Floppy Disk Just Won&#39;t Die</a> <em>Jacopo Prisco</em></p>
<h3>📈 Business &amp; Finance</h3>
<p><a href="https://www.npr.org/sections/money/2023/03/14/1163200179/the-collapse-of-silicon-valley-bank">The Collapse Of Silicon Valley Bank</a> <em>Bobby Allyn, David Gura, Paddy Hirsch &amp; Greg Rosalsky</em></p>
<p><a href="https://www.axios.com/2023/03/16/the-long-anticipated-office-reckoning-is-upon-us">The long-anticipated office reckoning is upon us</a> <em>Emily Peck</em></p>
<h3>🔬 Science</h3>
<p><a href="https://www.theverge.com/2023/3/14/23639474/floating-solar-panels-power-cities-renewable-energy">Floating solar panels could completely power thousands of cities</a> <em>Justine Calma</em></p>
<h3>⚾ Sports</h3>
<p><a href="https://theathletic.com/4257621/2023/03/14/officiating-ncaa-tournament-super-bowl-big-moments/">What&#39;s it like to be an official in the final moments of a huge game? &#39;I was dead and right&#39;</a> <em>Brandon Quinn</em></p>
<h3>🎧 Podcasts</h3>
<p><a href="https://www.techdirt.com/2023/03/15/techdirt-podcast-episode-347-why-is-congress-so-wrong-about-section-230/">Techdirt Podcast #347: Why Is Congress So Wrong About Section 230?</a></p>
<h3>🎵 A Song to Leave You With</h3>
<h4>Jerry Goldsmith - Star Trek: First Credit End Credits</h4>
<p><YouTubeEmbed
    id="q1H_OwK9r5s"
    title="Jerry Goldsmith - Star Trek: First Credit End Credits"
/></p>


New updates about .NET 8 &amp; TypeScript, JavaScript failures &amp; progressive enhancement, and more.

Reading Log - March 17, 2023 (#22)

<p>Spent a bit of time this weekend looking at CSS and web development. Pixels, rems, typography &amp; more!</p>
<p>🧑🏼‍💻 <a href="https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/"><strong>The Surprising Truth About Pixels and Accessibility</strong></a> - Josh does a great job in this article talking about when you should use rems and when you should use pixels, and why. <span className="domain-name">(joshwcomeau.com)</span></p>
<p>🅰 <a href="https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/"><strong>Modern Fluid Typography Using CSS Clamp</strong></a> - I&#39;ve been wanting to improve the typography on what I design and develop. This can help. <span className="domain-name">(smashingmagazine.com)</span></p>
<p>🤔 <a href="https://benfrain.com/where-the-f-is-native-css-nesting/"><strong>Where the f*ck is native CSS nesting?</strong></a> - I&#39;d like to know as well. Hopefully soon as it&#39;d be nice to clean up some CSS. <span className="domain-name">(benfrain.com)</span></p>
<p>💾 <a href="https://chriscoyier.net/2022/05/31/whats-in-a-monorepo/"><strong>What&#39;s in a monorepo</strong></a> - A nice bit talking about the benefits of using a monorepo. <span className="domain-name">(chriscoyier.net)</span></p>
<p>🎚 <a href="https://www.bram.us/2022/05/25/dark-mode-toggles-should-be-a-browser-feature/"><strong>Dark Mode Toggles Should be a Browser Feature</strong></a> - I agree with this. It would be nice as a developer to not have to duplicate code to support both the browser being set to dark mode and the user selecting something different than what the browser is set to. <span className="domain-name">(bram.us)</span></p>


Reading List: May 28 - June 3

<p>After seeing Git Actions at work at my job, I decided that I wanted to see what I could do for my personal projects with GitHub Actions.</p>
<p>At work in order for our PRs to be completed, our code needs to match our ESLint guidelines and our unit tests need to pass. I like those rules so I wanted to apply them to my personal projects on GitHub. I knew GitHub had the ability to do the same thing so I sat down and taught myself how to set them up. A little while later, I was able to get them up and running and am quite happy with the results so I figured I’d share how I did it.</p>
<h2>Some Background</h2>
<p>I set this up for my re-write of <a href="https://github.com/kpwags/digital-family-cookbook" target="_blank" rel="noreferrer">Digital Family Cookbook in .NET</a>. I have my backend broken up into 3 projects.</p>
<ol>
<li>The Web API (DigitalFamilyCookbook)</li>
<li>A “Core” Class Library (DigitalFamilyCookbook.Core)</li>
<li>A “Data” Class Library (Digital Family Cookbook.Data)</li>
</ol>
<p>I have a separate .NET Unit Test project for the Web API and the core class library. One for the data class library will be added soon. Because of this, I ended up creating two actions, one to run the API unit tests, and a second to run the core library unit tests.</p>
<h3>Step 1: Create the Workflows Folder</h3>
<p>In your root directory create a folder named <code>.github</code> and inside that folder create a folder named <code>workflows</code>.</p>
<h3>Step 2: Create an Action</h3>
<p>Create a file called <code>unittests.yml</code></p>
<h3>Step 3: Build the Action</h3>
<p>Start by giving the action a name</p>
<pre><code class="language-yaml">name: DigitalFamilyCookbook Unit Tests
</code></pre>
<p>This is pretty self-explanatory. We want each action to have a name that is descriptive of what the action does.</p>
<p>Next, we want to define when we want the action to be run.</p>
<pre><code class="language-yaml">on:
    push:
        branches: [main]
    pull_request:
        branches: [main]
</code></pre>
<p>This tells GitHub that we want these actions run when we push code to the main branch (I don&#39;t really do this, but put it here anyway), or when a pull request is submitted against the main branch.</p>
<p>Finally, we want to set up the action itself.</p>
<pre><code class="language-yaml">jobs:
    build:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@v2
            - name: Setup .NET
              uses: actions/setup-dotnet@v1
              with:
                  dotnet-version: 6.0.x
            - name: Restore dependencies
              run: dotnet restore
              working-directory: ./backend/tests/DigitalFamilyCookbook.Tests
            - name: Build
              run: dotnet build --no-restore
              working-directory: ./backend/tests/DigitalFamilyCookbook.Tests
            - name: Test
              run: dotnet test --no-build --verbosity normal
              working-directory: ./backend/tests/DigitalFamilyCookbook.Tests
</code></pre>
<p>Let&#39;s look at how this is structured.</p>
<ol>
<li>We tell GitHub to run this on the latest version of Ubuntu.</li>
<li>Next, we define the steps to take to run the action. Each bullet point is basically a step in the process<ol>
<li><code>uses: actions/checkout@v2</code> is the official GitHub action that will checkout the code in order to run the actions we define</li>
<li><code>name: Setup .NET</code> is the name of this step which we use the official GitHub action to setup .NET for the action, specifying we want to use .NET 6. This is important as I am taking advantage of some of the new .NET 6 functionality that will break on previous versions.</li>
<li><code>name: Restore dependencies</code> is where we tell the action to install the project&#39;s dependencies. you can see the next line defines the actual command. Just like we&#39;d do in the terminal on our own machine. We tell the action to run <code>dotnet restore</code> The final part is to specify the directory to run this command in. Since I&#39;m running the tests for the API project, we specify it as <code>./backend/tests/DigitalFamilyCookbook.Tests</code> which is the path from the root of the repository to where the <code>.csproj</code> defining the unit test project lies.</li>
<li><code>name: Build</code> is where we tell the action to build the project, again just like we&#39;d do in our terminal. Again, we need to specify the working folder.</li>
<li><code>name: Test</code> is where the butter is at. This tells us to run the test command to execute our unit tests. Like the <code>restore</code> and <code>build</code> steps, we also need to specify the working folder here as well.</li>
</ol>
</li>
</ol>
<h3>Final Result</h3>
<pre><code class="language-yaml">name: DigitalFamilyCookbook Unit Tests

on:
    push:
        branches: [main]
    pull_request:
        branches: [main]

jobs:
    build:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@v2
            - name: Setup .NET
              uses: actions/setup-dotnet@v1
              with:
                  dotnet-version: 6.0.x
            - name: Restore dependencies
              run: dotnet restore
              working-directory: ./backend/tests/DigitalFamilyCookbook.Tests
            - name: Build
              run: dotnet build --no-restore
              working-directory: ./backend/tests/DigitalFamilyCookbook.Tests
            - name: Test
              run: dotnet test --no-build --verbosity normal
              working-directory: ./backend/tests/DigitalFamilyCookbook.Tests
</code></pre>
<p>That&#39;s it. It was not nearly as difficult to setup as I initially thought. Now whenever I open a pull request, it will run the unit tests and make sure they pass before I can complete it and merge it with the main branch. I ended up creating a second action file and run the same steps, only with the <code>DigitalFamilyCookbook.Core.Tests</code> project.</p>
<h2>Bonus: Run the React Unit Tests Too!</h2>
<p>As an added bonus, I&#39;ll add how I set up the action to run Jest for the frontend unit tests.</p>
<pre><code class="language-yaml">name: Front End Unit Tests

on:
    push:
        branches: [main]
    pull_request:
        branches: [main]

jobs:
    build:
        runs-on: ubuntu-latest

        strategy:
            matrix:
                node-version: [15.x]

        steps:
            - uses: actions/checkout@v2
            - name: Use Node.js ${{ matrix.node-version }}
              uses: actions/setup-node@v1
              with:
                  node-version: ${{ matrix.node-version }}
            - run: npm install
              working-directory: ./frontend
            - run: npm run test
              working-directory: ./frontend
</code></pre>
<p>It&#39;s very similar to the .NET actions, only in this case we specify the node version instead of .NET, and run the npm commands in the frontend directory.</p>


RSS Feeds

Everything

Blog Posts

Reading Logs

Book Notes

Choose Color

Posts Tagged
Git

Reading Log - March 17, 2023 (#22)

Reading List: May 28 - June 3

Setting Up GitHub Actions on .NET Projects

RSS Feeds

Everything

Blog Posts

Reading Logs

Book Notes

Choose Color

Posts TaggedGit

Reading Log - March 17, 2023 (#22)

Reading List: May 28 - June 3

Setting Up GitHub Actions on .NET Projects

Posts Tagged
Git