DEV Community: Ryan Furrer

Getting Better with Figma: Day 1

Ryan Furrer — Mon, 23 Jun 2025 16:30:00 +0000

Day One was me reacquainting myself with Figma. I started by reviewing the basics of the interface and exploring the various tools and features available. I also took some time to familiarize myself with the keyboard shortcuts and the different ways to navigate the canvas. Juxtopposed video on this was super helpful and is what kicked off this idea!

Who doesn't like cards on websites. They come in all sorts of... well not shapes but sizes and designs. I've seen truly beautiful ones and wanted to get better with playing with multiple layers.

I knew I wanted a simple card consisting of a header, small paragraph, an icon, and a gradient. I often see cards come in threes and when I'm playing with colors in counts of three it's very difficult for me to not think of Pokémon, so I just went with it!

There are actually several layers to each card:

A circle with it's midpoint roughly anchored to the card's bottom right corner.
A rectangle above it acting as a mask for the circle and bringing in the darker emerald/blue/rose colors.
A rectangle of the same size above that with a semi-opaque and lighter emerald/blue/rose color with an inner-shadow of the darker color.
The text and icon are the final layers.

Even the button has a semi-transparent background which allows the main color to bleed through, as well as a semi-transparent border.

These are simple but I like them!

There is no goal to do one per day, but I’d like to do at least four three week so I can see progress. I also plan to write a short blog (or micro-blog, if you will) about each design I create or copy. If you’re in a similar boat, I encourage you to jump on board and do the same!

I’ll be sharing my progress on X/Twitter and LinkedIn. If you’re interested in following along, feel free to follow me on those platforms!

Getting Better with Figma: One Design at a Time

Ryan Furrer — Sat, 21 Jun 2025 23:47:24 +0000

Figma is a powerful design tool that allows designers to create, collaborate, and share designs in real-time. The fact is that it’s an industry standard, and with me being part designer/part engineer, I think it’s time I get more comfortable with it.

I take pride in my “design chops,” as I genuinely feel I have an eye for it. You can teach people as much as you want about color theory and typography, but I’m a firm believer that, based on how our brains are wired, we all have different strengths and weaknesses.

It’s time I start leaning into one of my strengths more — my creative side!

Being a former musician (violinist and violist), music was my creative and emotional outlet! While web design is not a 1:1 replacement, it lets me flex those creative muscles; this is part of the reason I’ve leaned into Frontend Engineering.

With that, I’ve never gotten very comfortable with design tools. I used Photoshop at a previous job and figured out enough to get by. I own V1 of the Affinity suite of products and have used it to get what I need out of it. I’ve used Figma to the same extent. However, I’m tired of limping through creating something, or not being able to create the effect I want.

By the way, I highly recommend the Affinity suite for a one-time charge rather than paying for an Adobe Creative Cloud subscription.

So I’m going to start doing more in Figma. I’ll start with making my own basic designs (which I’ve done before); however, I think I’ll be better served by copying others’ designs. Of course, I'll also be adding proper attribution to the original designers as I certainly do not want to be accused of stealing their work.

I’ll be sharing my progress on X/Twitter and LinkedIn. If you’re interested in following along, feel free to follow me on those platforms!

How to use multiple JSX frameworks in Astro

Ryan Furrer — Mon, 03 Feb 2025 01:21:52 +0000

Did you know Astro is the "framework agnostic framework" - meaning it lets you use multiple frontend frameworks together?

While Astro itself is a framework, you can use other frameworks in it for interactive elements or parts of the web page that aren’t static. This makes it an incredibly powerful tool for rapid development, content-heavy sites, or teams of devs with different specialties need to ship quickly.

Astro supports the following frameworks:

Alpine
Preact
React
Svelte
SolidJS
Vue

While most of these work out of the box without a problem, you will run into an issue if using multiple JSX frameworks such as React, Preact, and Solid in the same project.

Let’s talk about that and how you can ensure you don’t run into the same issues I did when learning this.

Project Structure

While Astro’s documentation states that using separate directories per framework is optional, I personally prefer to do so; we’ll talk more about that later.

Let’s say we are using React and Solid inside the same Astro project. You would create directories inside your components folder; one for React and one for Solid.

src
|__components
|____Nav.astro
|____react
|______CounterReact.jsx
|____solid
|______LoginSolid.jsx
|__layouts
|____BaseLayout.astro
|__pages
|____index.astro

While the file names are up to you, I like appending the framework name to them so I know what framework they are using and where they are coming from no matter where in the code they are being called.

Installing your frameworks

I’m not going to repeat everything in Astro’s docs as they’re so good I implore you to use them for 99% of your issues; check the docs.

However, let’s go over how to install your frameworks.

React

# npm
npx astro add react
# pnpm
pnpm astro add react
# yarn
yarn astro add react

SolidJS

# npm
npx astro add solid
# pnpm
pnpm astro add solid
# yarn
yarn astro add solid

If the CLI doesn’t it for you automatically, we’ll have to add these integrations into our Astro config file as described in the next section.

Astro config file

While this file is not required for every project, most will have something you need to configure in it, which we definitely do here. If you are using frameworks in your Astro project, you’ll need this file.

If you don’t have one already, create a file at the root of your project called astro.config.mjs and input the following snippet into it:

import { defineConfig } from ‘astro/config’

export default defineConfig({
  // your configuration options here…
})

Next, we need to add our integrations; this is for any Astro integration you are using.

import { defineConfig } from "astro/config";
import preact from "@astrojs/preact";
import react from "@astrojs/react";
import solidJs from "@astrojs/solid-js";

export default defineConfig({
    integrations: [
        preact(),
        solidJs(),
    ],
});

Lastly, we need to tell Astro which files belong to which framework. We can achieve this using the include: [] syntax. This is required when using multiple JSX frameworks.

Optionally, you can also use the exclude: [] syntax, however, I did not find that necessary in my project.

import { defineConfig } from "astro/config";
import preact from "@astrojs/preact";
import react from "@astrojs/react";
import solidJs from "@astrojs/solid-js";

export default defineConfig({
    integrations: [
    react({
      experimentalReactChildren: true,
        include: ["**/react/*"],
    }),
    solidJs({
        include: ["**/solid/*"],
    }),
  ],
});

This is why I highly encourage you to store all components for different frameworks in their own directory.

💡
experimentalReactChildren
This flag is only necessary if you are using a library that expects more than one child element to be passed. This is a result of Astro's parsing of React components; they are parsed as plain strings, not React nodes. Read more on this

TypeScript config file

Astro comes with support for Typescript out of the box and I highly advise you use it. Not only do you need a TypeScript config file for your Astro project, but Astro’s Content Collection API is incredibly powerful when paired with TypeScript.

Inside the root of your project, create a file named tsconfig.json and place the code below in it.

{
  "extends": "astro/tsconfigs/base",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}

Now then, for each JSX framework we add, we’ll need to add more to our tsconfig . We add overrides as by default the "jsxImportSource" is set to react.

{
  // Other tsconfig options...
  "compilerOptions": {
    "strictNullChecks": true,
    "allowJs": true,
    "jsx": "preserve"
  },
  "overrides": [
    {
      "files": ["src/components/react/**/*"],
      "compilerOptions": {
        "jsx": "preserve",
        "jsxImportSource": "react"
    },
    {
      "files": ["src/components/solid/**/*"],
      "compilerOptions": {
        "jsx": "preserve",
        "jsxImportSource": "solid-js"
    }
  ]
}

This tells your project to override the base settings based on your file locations as well as overrides the compilerOptions for those individual frameworks. You can see now why I prefer storing my framework components inside their own directory.

Rendering these components

This is the easy and fun part! Now you get to build out those features, components, and more that you did all the prep work for.

Take this CounterReact.jsx component I built:

import { useState } from "react";
import MinusIconReact from "./MinusIconReact.jsx";
import PlusIconReact from "./PlusIconReact.jsx";

export default function CounterReact() {
  const [count, setCount] = useState(0);

  const incrementReact = () => {
    setCount(count + 1);
  };

  const decrementReact = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p className="text-lg text-cyan-50">Counter: {count}</p>
      <div className="flex gap-2">
        <button
          onClick={incrementReact}
          className="bg-success text-success-foreground px-4 py-2 rounded-sm">
          <PlusIconReact>
            <span className="sr-only">Increase count</span>
          </PlusIconReact>
        </button>
        <button
          onClick={decrementReact}
          className="bg-destructive text-destructive-foreground px-4 py-2 rounded-sm">
          <MinusIconReact>
            <span className="sr-only">Decrease count</span>
          </MinusIconReact>
        </button>
      </div>
    </div>
  );
}

And here is the SolidJS one:

import { createSignal } from "solid-js";
import MinusIconSolid from "./MinusIconSolid.jsx";
import PlusIconSolid from "./PlusIconSolid.jsx";

export default function CounterSolid() {
  const [count, setCount] = createSignal(0);

  const incrementSolid = () => {
    setCount(count() + 1);
  };

  const decrementSolid = () => {
    setCount(count() - 1);
  };

  return (
    <div>
      <p className="text-lg text-blue-50">Counter: {count()}</p>
      <div className="flex gap-2">
        <button
          onClick={incrementSolid}
          className="bg-success text-success-foreground px-4 py-2 rounded-sm">
          <PlusIconSolid>
            <span className="sr-only">Increase count</span>
          </PlusIconSolid>
        </button>
        <button
          onClick={decrementSolid}
          className="bg-destructive text-destructive-foreground px-4 py-2 rounded-sm">
          <MinusIconSolid>
            <span className="sr-only">Decrease count</span>
          </MinusIconSolid>
        </button>
      </div>
    </div>
  );
}

We are importing useState in the React file and createSignal in the Solid file like you normally would, and then importing a couple of icons which are just SVGs. Typical React stuff, right?

Then we’re creating our components which starts with a Functional Component. It is important to note that with Preact, React, and Solid, Astro insists you use Functional Components and export them in the same line.

Moving on, our Functional components start with setting our state, creating a couple of functions to increase the count and decrease it, then building out the UI of the component itself. Since we already exported it in line 5, all we have to do now is go to our Astro file where we’d like to render the component, import it, and call it.

Here is an example of my Astro component, CounterSection.astro

---
import CounterReact from "../react/CounterReact.jsx";
import CounterSolid from "../solid/CounterSolid.jsx";
import Heading from "../Heading.astro";
---

<section class="flex gap-4 w-fit">
  <div
    id="react"
    class="border w-fit border-cyan-700 rounded-md p-4 bg-cyan-900 scroll-mt-12">
    <div class="col-span-1">
      <Heading
        level="h2"
        size="2xl"
        class="text-cyan-50"
        >React</Heading
      >
      <CounterReact client:visible />
    </div>
  </div>
  <div
    id="solid"
    class="border w-fit border-blue-700 rounded-md p-4 bg-blue-900 scroll-mt-12">
    <div class="col-span-1">
      <Heading
        level="h2"
        size="2xl"
        class="text-blue-50"
        >Solid</Heading
      >
      <CounterSolid client:visible />
    </div>
  </div>
</section>

The components will end up looking like this:

Client Directives

The keen eye among you may have spotted something in our code I didn’t mention above. When calling our components, there is a client:visible property:

<CounterReact client:visible />
<CounterSolid client:visible />

These client directives control how framework components are hydrated on a page. In our example, they are hydrated as soon as the component is visible. If you do not specify which directive to use, the component will be shipped as static HTML and you will have no interactivity!

Astro offers several different options and I encourage you to read the docs and see which is best for your application. However, the three I feel will be most commonly used are:

client:load - hydrates the component on page load
client:idle - hydrates the component when the page’s initial load is complete
client:visible / client:visible={{rootMargin}} - hydrates the component when it comes into view / hydrates the component when a margin around the component enters the viewport.

Summary

Wrapping up, using multiple JSX frameworks in Astro is quite simple, however, it does require some setup before you jump right in.

If you’d like to see my talk on Astro, you can find all relevant links below. And if you have any questions I am more than happy to talk shop! You can find me everywhere on line via my bento.

Watch my Astro talk with This Dot

View my demo site

Get the slides

2024 Retrospective

Ryan Furrer — Fri, 27 Dec 2024 19:08:36 +0000

How it started

The very end of 2023 was an earth-shattering moment for me. It was December 16, 2023 that I learned that my wife of two years – partner of six – was having an affair. In an instant my world came crumbling down; that feeling followed me into 2024 where I wondered where life would take me now.

I felt lost, insecure, and was questioning everything. What was I going to do? How could I ever move on? Where do I go?

I didn’t (and still don’t) have the money to move into an apartment by myself on Long Island where a studio apartment goes for $2,000.00/month which is just over 50% of my monthly take-home income.

I didn’t (and still don’t) have a remote job, so while friend’s graciously offered me rooms in their homes outside Albany, NY and Houston, TX, that wasn’t an option either.

So, I went to my parents and asked if I could move back in knowing full well there was not a room available in the house. Thankfully, they agreed to rent a storage unit to store their stuff in so I could claim a 120 sq. ft. bedroom for myself. Note, the storage unit is larger than my bedroom 😂

That’s a bleak onset of the year, but that’s life. I don’t tell you all of this so for your pity, but so you can see the massive turnaround one event had on me; that event was my first tech conference.

Entering the tech community

Some quick background: I have been studying web development on and off for several years. I started in late 2018/early 2019 and wandered from frontend web development —> IT Helpdesk work —> cloud engineering —> frontend web development/engineering ♻️. Through the years my discipline would come and go like waves upon a shore. While I joined Twitter (now X) in April 2018, I was not very active and more of a lurker.

However, in 2023 I won a ticket to attend THAT Conference in Round Rock, TX (outside Austin) which was from January 29, 2024 - January 31. Little did I know how impactful that one event would be.

I’ve written about THAT Conference on my blog before, and The Power of Community on my newsletter, but here is the number one thing THAT Conference did for me:

It gave me a place where I felt like I belonged once again. I hadn’t felt that since I was in the music education and performance community prior to 2018.

The people I met at THAT quickly became friends that I now cannot imagine my life without! Not only that but I truly believe that it is only because of these connections I was afforded and was able to succeed in the other opportunities I’ve had this year, including but not limited to:

Working with James Q. Quick on Deals for Devs
Working with Shashi Lo on Gridiron Survivor
Taking part in the Dallas Software Developers cohort led by Danny Thompson
Starting my Twitch Channel
Starting my podcast, Web Dev Dialogues

All that to boot, I firmly believe my first job in tech will stem from the connections I have made and continue to make in the community.

Thank you to everyone that has shown me nothing but kindness, support, friendship, and more through this year. I would not have gotten through this year as well as I did without you all.

Leaning into me

Over the last 5 - 6 years I’ve started being more comfortable with who I am. That’s not to say I’ve settled and do not want to continue to improve, but instead of trying to be a version of myself others seem to want me to be I am leaning into being the version of myself I want to be.

In 2024 I leaned even more into this.

This might be obvious to some but for me it’s only come to light in recent years how much effort I was putting in to be a version of myself to appease others rather than myself. Through self-care including therapy, journaling, and meditation I am finally happy with some of the things I am doing and am celebrating all wins no matter the size . There is of course, room for improvement; for example, my physical health is in rough shape and has been an ongoing struggle for years but that is entirely in my control.

Worrying about only what you can control

This is an extension of my self-development, but I have really tried my hardest to only worry about only what I can directly control.

For example, a major push I made this year is making the effort to lift others up. I have been a negative person for many years – living with my parents again makes me see where I got it – and this year I wanted to change that. Guess what? That is something I am in direct control of.

While you cannot control everything, there is always something you can control in any situation. I cannot control the fact that my ex-wife had an affair; what I can control is how I let it affect me. I can feel the anxiety and emotions, however, I can instead put that energy into what I can do to bounce back from it.

“Remember: You don’t control what happens, you control how you respond.” - Ryan Holiday

Being selfish

Being selfish was alwas surrounded with a negative connotation in my life, however, I truly believe that if you are not putting yourself first you are doing yourself a disservice.

There are, of course, circumstances where you cannot; caring for a sick loved one, caring for a newborn, etc. But you cannot assume anyone else will put you first, so you ought to ensure you do it for you.

This is something I’ve really been trying to do and havce both succeeded and failed this year. There are a few friends who know I bit off more than I could chew at times as I did not say “no” enough this year. These are all lessons I am continuing to learn and boundaries I am learning to set.

How it ended

I’m closing out this year with my head held high and excited for 2025. In an almost poetic manner, I attended another tech conference in the beginning of December; the Commit Your Code Conference (CYC Conference) which took place in Plano, TX (outside of Dallas).

These conferences that book-ended my year were very similar in vibes but very different in personal execution.

I went into THAT Conference knowing about 3 - 5 people in the community. I went into the CYC Conference knowing hundreds.

I went into THAT Conference feeling alone. I went into the CYC Conference feeling more connected than ever.

However, I came out of both feeling energized, excited, and thankful.

At the CYC Conference I had the opportunity to meet legends such as Leon and Quincy Larson, as well as my Dallas Software Developers cohort lead, Yoon! I had people coming up to me recognizing who I was from the community. It was a humbling experience to say the least and I am so thankful to the team that pulled it off: Danny Thompson, Braydon Coyer, Devyn Coyer, Dennis Garcia, and Erik Anderson.

I don’t say this all to brag, but to point out how one catalyst turned a year I wanted to forget into a year I could never forget.

If you want to connect, here is where you can find me:

X/Twitter: @ryandotfurrer
Bluesky: @ryandotfurrer
LinkedIn: @Ryan Furrer
Twitch*: @ryandotfurrer

*I aim to start streaming weekly again in 2025 because I miss it.

Photo dump

Here’s a quick photo dump from some things I did this year

THAT Conference • January 2024

Attending an IMSA Race at Watkins Glen • June 2024

Met a few friends (middle row) from an online racing league I helped form.

I also got to spend some extra time with my best friend of ~26 years, Anthony, his wife Kat, and their son (my nephew), Vincent. On the right is my twin brother, Wally.

CYC Conference • December 2024

Closed out the year with more time with my best friend at a holiday party after the CYC Conference.

CodingCatchup: 9/1/24 - 9/8/24

Ryan Furrer — Mon, 09 Sep 2024 13:00:00 +0000

When I began blogging on Dev back in 2019, I had a weekly series where I blogged and talked about what I had been up to in that last week. In an effort to get back to blogging I figured this was a perfect way to jump back in.

In massive news, Gridiron Survivor (GIS) launched the alpha version of our app! I’m so happy to be a part of this team and now that we have real users is even more exciting. Feel free to check it out and sign up at gridironsurvivor.com!

Day by Day

Sunday

Reviewed a PR for Deals for Devs.

Monday

Opened a PR for my ticket for OpenSauced.

Tuesday

Reviewed two PRs for Gridiron Survivor.
Reviewed a PR for Deals for Devs.

Wednesday

Worked on my OpenSauced ticket.
Worked on a Gridiron Survivor ticket.
Reviewed three PRs for Gridiron Survivor.
Reviewed the current status of GIS and opened two issues.

Thursday

Reviewed three PRs for Gridiron Survivor.
Released the alpha for Gridiron Survivor!

Friday

Reviewed three PRs for Deals for Devs.
Made some updates on a client's website.

Saturday

Created a draft PR for Gridiron Survivor.

// Detect dark theme var iframe = document.getElementById('tweet-1832594622360530984-916'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1832594622360530984&theme=dark" }

Summary

This is everything I could grab from my GitHub Contributions. There was more I did, but nothing that was captured on my GitHub contributions. I find a lot of my weekly work feels like “busy” work and I want to get better at eliminating that. The more time I can put into actual work the better I’ll feel as I can then more quickly progress toward my goals.

What is not tracked cannot be measured and improved on; with that, my goal this week is to track where my time goes so I can review it and work towards being as efficient as possible with the limited time that I do have.

My Experience with Astro

Ryan Furrer — Mon, 12 Feb 2024 19:00:00 +0000

What is Astro?

Astro is a web framework designed for building content-driven websites such as blogs, marketing, and e-commerce sites. It differentiates itself by shipping as little client-side JavaScript as possible, unless otherwise specified by the user. This approach, known as "Islands architecture," allows developers to combine different UI frameworks like React, Svelte, and Vue within the same project.

Astro's focus on content-first, SEO-friendly websites, and its DX (developer experience) make it a compelling choice for building modern static web applications.

My experience with frameworks

While I've worked with React (which is a library) and dabbled with Gatsby and Next, Astro is the first framework I fully dove into. It felt very approachable from the start which made me even more excited to work with it.

I decided to use Astro, Tailwind CSS, and Storyblok CMS for my new portfolio site.

In fact, in my time using Astro, I have learned so much that I am already going back to improve my site by cleaning up the code and taking advantage of what Astro offers. What are some of those offerings?

What Astro Offers

Ships zero client-side JavaScript by default
Islands
View Transitions
Great DX
Official and user-submitted starter templates and themes
Official and user-submitted integrations for React, Vercel, Tailwind, and much more

All of these together, plus a great support team and community, excite me to continue working with Astro as it evolves.

Why I love Astro

Writing astro feels like HTML on steroids. Take this snippet from my Conference page, for example:

<Layout title={title} description={description}>
  <main class="flow container mx-auto">
    <Section2XL>
      <SectionXL>
        <h2 class="mb-12 lg:text-center">A little reminder about me</h2>
        <div
          class="flow lg:noflow grid lg:grid-cols-2 lg:place-items-center lg:gap-8"
        >
          <div id="greeting-container" class="flow col-span-1">
            <Image src={profilePicture} alt=`Ryan Furrer` class="rounded-md" />
            <SocialLinks />
          </div>
          <div
            id="greeting-container-verbiage-container"
            class="flow col-span-1"
          >
            <p>
              My name is Ryan Furrer and I am a highly enthusiastic Front-End
              Web Developer, with a focus on Design and UI/UX.
            </p>

From my experience, Astro feels like it has a far lower barrier to entry than other frameworks. Firstly, writing Astro Components is just like writing HTML, as you can see in the code example above - but with some optional extras that can enhance the experience.

Secondly, you get access to frontmatter; frontmatter in Astro can be metadata such as the title, description, og:image, and more. Frontmatter can also be used to define props for components; look at the {title} and {description} attributes in the code above. Those are props I've declared in the Layout.astro component, and defined in the frontmatter for that specific page. Check out the code below to see how it was defined:

---
import Layout from "../layouts/Layout.astro";
import SectionXL from "../components/SectionXL.astro";
import Section2XL from "../components/Section2XL.astro";

import { Image } from "astro:assets";
import profilePicture from "../assets/photos/rf-real-teal-bg.webp";
import SocialLinks from "../layouts/SocialLinks.astro";

const title = "It was nice to meet you!";
const description =
  "If you're visiting this page, we must have met in person, and what a pleasure it was.";
---

title and description are required Props that must be defined wherever you use said component.

Why do I love Astro? It's ease of use, fantastic documentation, and flexibility to work with whatever tools you prefer. If you know HTML and are somewhat familiar with JavaScript syntax, you can use Astro.

What I've learned

Choosing three new tools to learn at once was a lot, but learning by doing is what works best for me. Here are the top three things working with Astro has taught or reminded me.

1. Front-End Framework Syntax

While writing Astro was easier for me than React/NextJS, the syntax and project file structure are similar. I was able to learn how to navigate and find what I needed in a relatively large project, compared to the HTML/CSS/JS projects I have built previously.

2. Make it work, then make it pretty

You could also call this "create an MVP (minmal viable product), then iterate on it." I often get stuck trying to code things to perfection the first time around that I end up wasting time on the project. There is no sense optimizing something if you're just going to do it from an entirely different approach later on.

So, just a reminder, that your project does not need to be perfect the first, second or third time around. Make it work, then make it pretty.

Get it functional, then go back and iterate over it.

3. Read the docs

Reading the documentation, or docs, of a new coding language or tool is essential for understanding core concepts, avoiding mistakes, and increasing efficiency. In reading the docs I learned about Astro's Image component which is awesome, but naturally did not learn about it until my website was already deployed and out in the world. Why not? Because I did not take the time to read through the docs.

What did I learn? Go through the docs first.

You'll learn about more features of the language/tool you are using, increase your code's efficiency, and save some time by not needing to refactor as much down the road.

Takeaways

Please, learn from my mistakes if you are new to Frameworks, or even just Astro!

1. Read the docs

See above 😂

2. Use Layout Components properly

I made a rookie mistake when developing my site at first, and instead of using a Layout Component, I copied and pasted the same code across all the pages of my site. This is just one of the refinements I am making to my site now, and damn do I wish I had done it before. That goes for other front-end Frameworks as well!

3. You don't need a CMS

Astro comes with fantastic markdown and MDX support out the box. I chose to use a CMS so I could have experience integrating one into my site, but you certainly do not need one.

Moving Forward

I enjoyed using Astro so much that I am going to continue using it for content-heavy and static sites. You can take advantage of Server-Side Rendering (SSR) for places you need it too, just aiding the Astro hype.

I'll continue working with NextJS, but I'm glad I took the time to learn Astro.

Speaking of NextJS, I built incredibly basic (and slightly opinionated) boilerplates for both Astro and NextJS - both using Tailwind, of course. Links are below if you're interested. Just go to the GitHub repo and click the "Use this template" button to get started.

View my Astro & Tailwind Starter

View my NextJS & Tailwind Starter

Conclusion

I hope I taught you a little bit about Astro and maybe even persuaded you to give it a shot. If you're a front-end dev that's new to frameworks, I recommend diving into Astro first!. Let me know if you agree or disagree with me over on X!

Also, don't miss out on these sweet wallpapers Astro has on their website for free!

THAT Conference

Ryan Furrer — Mon, 05 Feb 2024 22:16:07 +0000

What is THAT Conference?

THAT Conference is a conference that focuses on full-stack web development and the tech community. It is organized by Clark Sell, who holds two events per year: one in Wisconsin, USA, and the other in Texas, USA. THAT Conference has had a significant impact on many individuals, and I am honored to be included in the list of people who have been greatly influenced by it.

THAT Experience

Let me start by saying that this was my first tech conference. I've attended other conferences before, but those were related to Viola Performance and Music Education. Based on my experience and what others have told me, I can now say that I have been spoiled by THAT.

THAT conference was divided into 3.5 days, starting on Sunday, January 28, and ending on Wednesday, January 31.

Day 0 | Sunday, January 28

A few things were scheduled for Day 0, including:

Sponsor Meeting and Kickoff
THAT Crew Meeting
Early Registration and Meet & Greet
Get the most out of THAT - Conference 101
- A 60-minute presentation on how to get the most out of THAT, the ins and outs of it, and learning how you can stay connected throughout the year.

Additionally, Taylor Desseyn, a Talent Advocate at Gun.io, organized a meetup at a coffee shop in Austin, TX. Since it took a long time to get my rental car, I skipped the Sponsor Meeting and Kickoff. Instead, I went straight from the airport to my hotel and then headed to Barrett's Coffee.

The coffee was excellent, the company was even better, and it was really nice to have already met someone I was excited about. Taylor's energy is contagious, and my time in Texas was off to a fantastic start.

After the meetup, I brought Taylor to the hotel and convention center. This worked out well since I was already planning to be there for the Early Registration and Meet & Greet. While waiting in line for registration, I met someone I had been following on Twitter, Sarah Shook! Sarah and I were both lucky to win tickets to THAT Conference; without those tickets, neither of us would have been able to attend. After that, I completed the conference registration, received my badge and swag bag, and started networking.

Networking seems like a very administrative word to me. According to Google, networking is defined as “the action or process of interacting with others to exchange information and develop professional or social contacts.” Regardless of how you phrase it, I was thrilled to start meeting people in the tech industry, the industry I aspire to be a part of. I couldn't keep track of everyone I had met that night, but there are a few individuals who I was excited to meet ahead of that night:

After the official meet & greet, we headed to one of the hotel bars to grab a couple of drinks and keep chatting. Eventually, we all went our separate ways to get some rest for Day 1. THAT was already starting off on a high note, and it hadn't even really begun!

Days 1 through 3

The rest of the days followed the same schedule:

THAT 5k
Breakfast
Opening from Clark Sell
Featured Keynote
Talk Breakout 1
Lunch
Open Spaces
Talk Breakout 2
Talk Breakout 3
Networking Event/Dinner

Clark starts each day by briefly discussing the conference and general administrative matters. He refers to each day as a milestone: Day 1 is Mile 1, Day 2 is Mile 2, and Day 3 is Mile 3.

What are Open Spaces?

Open Spaces were great. They were a sort of open forum where we could talk about anything and everything. There were 12+ numbered tables, and any attendee could go to a board with a grid of time slots and table numbers and place a post-it note in the desired spot and table for a discussion.

I attended the following Open Spaces:

Educating Developers
React’s Identify Crisis
Unconventional Paths in Tech

The conversations I sat in on were some of the best I've had in a long time. Connecting with people with common goals and interests was incredibly refreshing. I can't wait to continue these conversations virtually, and I’m also excited to introduce them to the local JavaScript meetup I attend.

Mile 1 | Monday, January 29

Clark asked us several questions to consider, answer, and act on during our time at THAT. Here are my responses from Monday morning:

Why are you here?
1. I am here to learn, network, and meet the digital friends I’ve interacted with.
Who do you want to meet and why?
1. The people I’ve conversed with and learned from online to create a personal connection with them.
What can you give?
1. Support, my experiences, and friendship.
What will you do after?
1. Take the things I’ve learned and the wisdom I’ve gained to push my career search forward. I want to continue to build and maintain the relationships I made.

Featured Keynote

From Cold Calls to Code Calls: Leveraging Transferable Skills

Presented by Shaundai Person

Keynote Description:

In this keynote, we will discuss the transferable skills that have proven invaluable in my career transition. Whether you’re looking for your first job in tech or whether you’re a tenured engineer, you will learn how to leverage your own transferable skills to get a unique competitive edge in the tech industry.

Shaundai delivered an excellent keynote speech to kick off the conference. Her talk focused on the importance of recognizing and utilizing transferable skills to enter or advance in the tech industry. She was smart, funny, and inspiring, leaving the audience motivated and ready to take action.

View my notes.

View the keynote.

Day 1 Talks/Presentations

Data-Driven UX Decisions by Shashi Lo

Talk Description:

User Research is a great way to find out if you're going to implement something that is going to make an impact to your customers, or if you should reconsider the direction. It's always easier to pivot before going into development because there are so many variables and time it takes to develop a feature. Being able to reconsider the user experience to ensure the feature you are implementing will provide value, this could very well save your team time and effort in the end.

View my notes.

Building Custom GitHub Actions with Docker by Brian Morrison

Talk Description:

Have you ever searched the GitHub Marketplace for an Action to perform a very specific task, only to find that nothing exists? How about copying and pasting code between workflows to perform repetitive tasks?

In this talk, learn how to create your own GitHub Actions that can be shared across workflows in your organization, or with the world via the GitHub Actions marketplace. We’ll explore what defines a custom GitHub Action, how to create one using a Docker container and test it locally, and cover utilizing actions within your own pipelines, with and without publishing them. Finally, we’ll touch on some best practices and considerations for building your own Actions based on my own experience creating the first set of GitHub Actions for PlanetScale.

I split my time between this and Braydon’s talk below, as such I did not get any notes.

View Brain’s GitHub Repo.

View Brian’s presentation.

Choosing Blog Topics and Boosting Content with SEO by Braydon Coyer

Talk Description:

This presentation is chalked full of tangible tips and tricks that I've picked up by taking my technical blog to over 1,000,000 article reads, with many topics taking the #1 search result on Google.

View my notes - note that these are not complete as I split my time between this and Brian’s talk above.

View the recorded talk.

Why Building Community & Content Can Launch You Career by Taylor Desseyn

Talk Description:

So many times folks do not realize that your community is everything. It plays into your career trajectory, it allows you to make new friends, and it gives you something to fall back on if things go south with your job. The biggest hurdle for individuals is they don't know how to get started let alone all the benefits community brings to you. In this talk I will dive into how to get started building community and how to leverage your community throughout your career!

While I have notes from Taylor’s talk, it was much more interactive than a typical talk. You can view my notes, but you’ll be better served by visiting Taylor’s YouTube channel.

Open Space | Educating Developers

PJ Metz, who is an Education Community Manager at GitHub Education and a former English Teacher, led an Open Space discussion. I was surprised to learn that there were a large number of former educators present at the discussion. During the session, we had some great discussions covering topics related to educating developers, learning as developers, common pain points with documentation, and the need for multi-level documentation categorized as beginner, intermediate, and expert.

Post Talks/Presentations

After everything was said and done, there was a Happy Hour sponsored by Gun.io, followed by a board game night. I didn’t participate in game night, but the happy hour was a great way to continue networking and getting comfortable meeting new people.

A very successful Mile 1 was in the books!

Mile 2 | Tuesday, January 30

Like Mile 1, Mile 2 started with a banger of a keynote from Danny Thompson and ended with some killer, authentic Texas BBQ.

Featured Keynote

From Gas Stations to International Community Builder, the guide to a great tech community!

Presented by Danny Thompson

Keynote Description:

Danny Thompson had an interesting journey into tech and communities were pivotal to his success. He has since made different communities in different cities while also helping build communities in other countries and organizing events there too! This will cover major tips on building a very successful development community.

This was another intoxicatingly motivating keynote, so Mile 2 started just as strong as Mile 1, this one featuring Danny Thompson. He touched on so much, but two things stood out to me.

Danny encourages people to focus on themselves over others. I’ve only started doing this within the last year or so, and it’s definitely an odd feeling at first. Just because it’s odd doesn’t mean it’s bad; it’s one of the best things I could do for myself.
“Don’t be so focused on where you’re going that you forget to pause in the moment and celebrate what you’ve done.”

I have always struggled with celebrating my own achievements, no matter how small they may be. However, I have always been good at celebrating the successes of others, regardless of their magnitude. I recognize that this is a period in my life where I need to be kinder to myself and appreciate any accomplishment, no matter how small.

View the keynote.

Day 2 Talks/Presentations

How to fall in love with CSS by Kevin Powell

Talk Description:

In this talk, I'll be talking about how we can overcome many of the common pain points by changing our mindset in how we approach writing CSS, how we can work with the browser for simpler solutions, and I'll squeeze in some modern (yet well supported) CSS features that make life so much easier.

View Kevin’s slideshow

From React to Next.js: Adjusting The Thought Process by Dave Gray

Talk Description:

Next.js is a React framework and as such, it is opinionated. Even though you may be very familiar with React, creating an application with Next.js requires a change in your thought processes. In this presentation, you will go from the client-side focus of React to the server-side focus of Next.js. You will learn about the benefits Next.js provides with this server-first approach and when these benefits may be desirable. You will learn the difference between static, static-site generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR). There will also be time for Q&A to help answer questions you may have.

View my notes

View Dave’s free Next.JS course on YouTube

Git Internals for VS Code Users: Bridging the Gap by Cori Drew

Talk Description:

For many, the graphical user interface of VSCode simplifies git, streamlining commands into digestible, one-click operations. However, this simplicity prevents many from truly understanding what actually happens when commands such as 'push', 'pull', 'fetch', and 'rebase' are executed. This talk aims to shed light on these inner workings, illuminating the depth of git within the VSCode environment.

View Julia Evans’ Git Cheatsheet

Open Space | React’s Identity Crisis

Brooks Lybrand, a Remix Developer Relations Manager at Shopify, prompted this Open Space. I felt a bit foolish jumping in here, but once again, everyone was so incredibly welcoming and even wanted to hear what I, a very junior developer, had to say. I certainly felt validated that a fellow Junior Web Developer, Dominick Monaco, was there and expressed similar pain points.

This Open Space lead to some very interseting points, takes, and thoughts on React from several people. Even if Brooks was a bit biased as he is a Developer Relations Manager for Remix, a Next.js competitor, I’m glad they opened the floor for this discussion.

Post Talks/Presentations

At the end of the day we were treated to some authentic Texas BBQ and it was absolutely amazing. I got to sit at a table of people I hadn’t met yet and they were all great people! After that, there was a bonfire and bar takeover at the hotel/resort, where I spent the rest of the night.

Mile 3 | Wednesday, January 31

Mile 3 started differently than the rest; instead of Clark introducing the keynote speaker, he was doing the speaking! Instead, Tejas Kumar did the introductions. I had never heard of Tejas before, but he is well-liked in the community, and his talk “Getting the Most out of Today’s Web Industry” was well-received.

Featured Keynote

Hindsight is 20/20, Design A Better Life

Presented by Clark Sell

Keynote Description:

After 25 years in tech, I find myself in a position where I'm not sure I've ever belonged. I'm standing here at the age of 48, asking myself:

"What is my purpose?"

"How do I find it? "

"What is it? "

"Where is it? "

"Is it even valuable? "

"Do I have a life balance? "

"Am I happy?"

But if those are the questions we’re asking ourselves, it begs the question, are you actually doing the work to design the life you want to live? We don't build software without a design; why would we live life without a designer

I can't and won't solve your problems; those are for you, but I can share my experience and hope you will take that as input to create the life you want to live.

Clark crushed this talk. He did not try to solve anyone’s problems but instead spoke about his own experiences, which I believe, is paramount in life. It was emotional, riveting, and motivating to get out there and do the right thing for you.

View the keynote.

Day 3 Talks/Presentations

Customizing the Web Platform with Web Components by Raymond Camden

Talk Description:

This talk will cover what you need to know to begin extending the web with web components. We'll look at the what, why, and how of creating and using web components, including the history of the various technologies behind components, how to start building them now, and digging into plenty of examples.

Cultivating Confidence by Nate Emerson

Talk Description:

Confidence principally comes from 3 components: permission, community, and curiosity. In this talk we will dive in on how confidence is created, cultivated, and affirmed. Each one of us can use this information to instill more confidence in ourselves and those around us starting today!

I know Nate is looking to share these slides, and I will update this post when he does. For now, here are the key takeaways from his talk:

Instill confidence in those around you
Nurture your own confidence
Encourage and empower others to safely “try on” confidence

The actor model, behind the scenes by David Khourshid

Talk Description:

This talk will guide you through the principles behind the actor model, showcasing how it aids in building robust, scalable, and concurrent systems.

The actor model was brand new to me, but David did a great job explaining it, and I see how it can come in handy when visualizing and managing state.

Use swimlanes.io to create sequence diagrams

Post Talks/Presentations

This was the final night, meal, and time spent with these new friends and colleagues… for now. We ended the trip by eating at the steakhouse on the grounds of the Kalahari Resort in Round Rock, TX. We laughed, ate food, and eventually parted ways as some people were leaving for home that night, some the next day, or some people were just exhausted.

Final Thoughts

THAT Conference. Firstly, I cannot thank Clark Sell enough for organizing such a fantastic event. Secondly, I would not have been able to attend THAT Conference without Brian Morrison, as I was fortunate to win a ticket from him. Thank you, Brian.

I consider myself incredibly fortunate to have won the ticket and been able to attend; it was truly one of the best experiences of my life. To say it was life-changing is an understatement, and I implore you to go to the Wisconsin event in July or attend the one in Texas next year; I know I’ll be there.

Another Modern CSS Reset

Ryan Furrer — Sat, 05 Feb 2022 18:20:44 +0000

View it on GitHub

What is a CSS Reset and why is it useful?

In its simplest form, a CSS Reset is a stylesheet used to remove any unwanted default styling a browser might apply to your HTML elements. Many people - myself included - choose to use CSS Resets to add their preferred default styling to their projects so there is some form of consistency and continuity between their projects.

While browsers have pared down their default stylings and brought them more in line with one another, a CSS Reset can still offer you a handful of benefits. We’ll dig more into those as we move along in my CSS reset, but first, let us take a look at the reset in its entirety. Today's blog will be a bit lengthy but stick with me.

NOTE

This CSS Reset is a conglomerate of cherry-picked properties for my use case from Andy Bell's CSS Reset, Josh Commeau’s CSS Reset, and some properties I found from Kent C. Dodds' website.

The Entire Reset

View it on GitHub

/*
  This CSS Reset is a conglomerate of Andy Bell's, Josh Commeau, and some properties I found from Kent C. Dodds' website.
*/

/*
  Andy's Custom CSS Reset
  https://piccalil.li/blog/a-modern-css-reset/
*/

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

/*
  Kent C. Dodds
  https://kentcdodds.com/
*/

/*-----Universal Styles-----*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/*-----Core Styles-----*/
html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

footer {
  border-top: 1px solid black;
  margin-top: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

body > footer {
  position: sticky;
  top: 100vh;
}

/*-----Element Styles-----*/
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.15;
}

small {
  font-size: 80%;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/*-----Browser Inconsistancy Fixes-----*/
button,
input,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/*-----Media Queries-----*/
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Part 1: Universal Styles

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
}

If you only chose to include these two stylings, you would be set up for success, to be sure - this would be a perfectly acceptable simple and minimal CSS Reset. It makes sizing elements easier and removes all margin and padding on all elements by taking advantage of the universal selector, *.

Part 2: Default Body Styles

html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
    padding: 0 1rem;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

footer {
  margin-top: var(—size-5);
  padding-top: var(—size-8);
  border-top: var(—border-size-1) solid var(—bg-tertiary);
  padding-bottom: var(—size-5);
}

body > footer {
  position: sticky;
  top: 100vh;
}

This part is a bit lengthy so let’s break it down further.

html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

First, we set text-size-adjust and its accompanying browser pre-fixes to none. When Apple released the first iPhone, and you would rotate your device when viewing a site, the text size would enlarge to make things easier to see. This made sense before responsive websites; however, it is archaic and unnecessary. That being said, Apple still makes it happen. text-size-adjust disables it from occurring.

Next up is html:focus-within - this enables smooth scrolling without an issue pointed out in this article on CSS-Tricks. I highly encourage you to read and understand why using html { scroll-behavior: smooth;} is not currently advised.

Lastly, adding height: 100%; to our <html> and <body> tags allows us to use percentage-based heights on elements on our page. I always wondered by this did not work as you’d expect, and as Josh explains, “…the height of an element is calculated based on its children.”

I don’t use vh on mobile sites because all the browsers are different and often show/hide elements based on what direction the user is scrolling; as such, using vh can cause unexpected effects.

body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
    padding: 0 1rem;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

footer {
  margin-top: var(—size-5);
  padding-top: var(—size-8);
  border-top: var(—border-size-1) solid var(—bg-tertiary);
  padding-bottom: var(—size-5);
}

body > footer {
  position: sticky;
  top: 100vh;
}

This part is a bit magical for me; we’ll break this down piece by piece again. You may see some reused styles, such as display: flex; - that is because, in my reset, I don’t like to do much nesting or truncating so that I can easily see what is happening if I need to fix any issues.

body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
    padding: 0 1rem;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

Since I work from a mobile-first approach, as I encourage most to do, I make my content into a column from a meta-level using display: flex; and flex-direction: column;. Though this is how the page is typically rendered, I’ve run into some weird things in the past and prefer to add two lines of code to ensure it looks how I expect.

Next, I add some defaults that I prefer:

line-height: 1.5; - a basic default recommended for better reading experiences and accessibility. This is unnecessary for large font and headings, which you’ll see get over-written later.

margin: 0 auto; - centers all visible content on the page. This is necessary when you take into account the following style.

max-width: 1440px - I find that a page width of 1440px works well for me as it limits how far people have to move their heads to see both ends of your website. However, as much as people enjoy massive ultra-wide displays, I don’t think having the header navigation spanning 34” is helpful, nor is it good looking.

padding: 0 1rem; - this adds padding to the left and right sides of the body, which is great for mobile browsing. Otherwise, you’d have no space between the content and where the screen ends.

text-rendering: optimizeSpeed; - The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

-webkit-font-smoothing: antialiased; - I can’t explain this any better than Josh; however, know it only applies to computers running macOS.

Part 3: Inner-Element Styles

/*-----Element Styles-----*/
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.15;
}

small {
  font-size: 80%;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

Improving Accessibility and Improving Styling

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

This removes the list-style on any ol or ul with an attribute of role=‘list'. While this rule wouldn’t be necessary if CSS didn’t remove the semantics and a11y of lists with the list-style removed, we at least have a solution with this rule applied. You can read more about this in Scott O’Hara’s article “Fixing” Lists.

Improving Working with Images

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

This rule is relatively straightforward - it makes any image render as a block element and removes its ability to break outside of its container by settings its max-width to 100%.

Baseline Text Styles

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.15;
}

The first rule encourages the browser to break lines on words rather than insert hyphens, and “…will only create a break if an entire word cannot be placed on its own line without overflowing...” - As per the MDN. This - in my opinion - is a stylistic choice rather than a must-have.

The second rule above reduces the line-height of heading elements <h1>, <h2>, and <h3>. As per the MDN, only the main paragraph content must have a line-height of 1.5. While still maintaining accessibility, headings may have a slightly smaller line-height as the larger font sizes associated with them create more white space, thus possibly leading to header lines being spread too far apart.

Preferred Styles

small {
  font-size: 80%;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

The rules above are preferred styles that also do away with any browser inconsistencies. We’ll go through these quickly as they are relatively straightforward.

small { 
    font-size: 80%;
}

Sets font-size of any text inside the HTML <small> tag to 80% of the regular size for that element. For example, if we have a <p> tag with a regular size of 1rem or 16px, the <small> size is 0.8rem, or 12.8px.

b, strong { 
    font-weight: bolder; 
}

Old Microsoft Edge (before it was Chromium-based) and Safari render the <b> and <strong> tags differently from other browsers, this rule sets a standard boldness (font-weight) to display any text wrapped in those tags.

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

Prevent <sub> and <sup> elements from affecting the line-height in all browsers.

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}

The first rule assigns default styles (text-decoration: underline;) to any <a> without a class. The second rule applies text-decoration: none; to any <a> with a class. This is incredibly useful in reducing the number of times you might need to repeat these rules to get the styling you’d like.

The critical thing to remember when using these rules and get the most out of them - to keep your code DRY) - is to never apply a class to an anchor tag where you’d like to maintain default styling.

input,
button,
textarea,
select {
  font: inherit;
}

This rule tells the <input>, <button>, <texture>, and <select> elements to use or inherit the same font as their parent element. By default, these will use a different font which, for me, is unwanted.

button {
  background: none;
  border: none;
  cursor: pointer;
}

The above removes the default background and border of buttons and ensures the cursor becomes a 👆🏻 to suggest something will happen when you click it.

Part 4: Fixing Browser Inconsistencies

/*-----Browser Inconsistancy Fixes-----*/
/* Correct the inability to style clickable types in iOS and Safari */
button,
input,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/* Remove the inner padding in Chrome and Safari on macOS */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Correct the cursor style of increment and decrement buttons in Safari */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Remove the inner border and padding in Firefox */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Restore the focus styles unset by the previous rule */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

The CSS rules above I saw on Kent C. Dodds’ new site and thought, “If he’s got them, they are there for a reason,” and thought I’d throw them in my CSS reset. They all do something to “fix” browser styling, “correct,” or make different browsers consistent with the others. Most of these apply to Safari on iOS and macOS, which I’d argue are the new Internet Explorer.

Read the comments in the code above to learn more about each rule.

Part 5: Increasing Accessibility

/*-----Media Queries-----*/
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

The above media query is something I consider a must-have for all projects. This is because it respects users that prefer reduced motion when viewing websites, mobile apps, and operating systems - basically, any piece of software.

Some people have reported experiencing bouts of motion sickness and vertigo when they see too much motion in software partially caused by vestibular disorders.

Wrapping Up

Phew, that was a lot!

So there you have it, a CSS Reset that is a conglomeration of the resets of two well-known developers, Andy Bell and Josh Comeau, and some borrowed code from Kent C. Dodds’ new site.

While the code snippets I used from Kent’s website are more for fixing browser inconsistencies (a lot for Safari), Josh’s CSS Reset focuses a lot on making the browser easier/better to build in, while Andy’s does the same, and then some.

It is important to note that there is no single correct way to do a CSS Reset, which is why you can see that while the two of them share similarities, they are different enough that I feel they achieve slightly different things in the end. This could, of course, be reflective of each developer’s style, or there may be additional tools such as frameworks or CSS Libraries that we do not see.

Feel free to view the reset on GitHub and use it in your projects! Or you may wish to modify it to your liking. As I update the reset, the GitHub repo will also be updated. I'd love to hear your thoughts on this, so feel free to reach out to me on Twitter or via my portfolio.

View it on GitHub

Weekly Summary: 7/18 - 7/24

Ryan Furrer — Sun, 25 Jul 2021 19:09:43 +0000

Welcome to the fifth installment in my weekly summary series, where I give quick recaps of what I worked on the previous week to keep myself accountable.

First, let's go over my weekly schedule:

Current Weekly Schedule

Monday - Thursday: Study from 6:00pm - 8:00pm-ish. Sometimes I go until 9pm depending on how I feel.
Friday: Study from 1:00pm - 4:00pm. I like to give myself more time to study when I can, and working half-days on Fridays for my current job leaves a significant time for extra coding.
Saturday: Study from 7:30am - 9:30am. I give myself at least 2 hours on Saturdays, even though I often get more time in.
Sunday: Day off This is my day to recover, get energized and prepare for the coming week!

All this works with my personal goal of studying / coding 2 hours a day. I would like to do more, but I don't have the mental bandwidth to do more, usually, throughout the week.

I don't always stick to this schedule, but I try my best to do so. Now then, let's get to it!

Sunday, July 18th

Sunday I published the 2nd issue of the Coding Catchup Newsletter with help from Revue! While I am still deciding what format I'd like to use with my newsletter, I believe the 2nd issue was much better than merely republishing my blog posts as an email - I think I can provide more value than that - what do you think?

Monday, July 19th

Monday was a productive day, which was a nice way to kick off the week! I signed up for Cloudinary to host the images on my wedding website, so it is easier to serve the most appropriately sized images for anyone visiting the site. This should help site performance and save data for those on mobile phones.

I also added my wedding site as a featured project to my portfolio. I think it's a complete site that shows off what I can do, and I'm proud of it!

I finished up my night by studying React for 40 minutes on Udemy.

Tuesday, July 20th

I originally planned to hit React hard, but due to my current work environment continually getting worse and my unhappiness increasing, I thought it wise to get my resume going. While I don't feel ready to begin applying to jobs, I could at least have the resume put together. I can fill in the details when I am ready to begin applying.

Thank you, Joe Previte, for being a huge help! He helped take it from overwhelming to doable.

Wednesday, July 21st

I took another night to work on my resume. I used Affinity Publisher to design and develop it. If you are interested in learning more about how I did it, let me know!

Thursday, July 22nd

Finally, I completed my resume - except the part where it is complete lol. As I develop more resume-worthy projects, I'll update it to feature those, but for now I am pleased with how it looks. Before I closed my laptop, I started working on a new project I have in mind, but you will have to wait and see more in the future.

Friday, July 23rd

Friday I put my previously mentioned project aside and began a different one - a fake eCommerce site that I'll be building with React. I started this while on a Discrod call with a friend in the UK who also needs to build something new for his portfolio. While he is well-versed in Angular and a much more experienced developer than me, it was cool to build alongside someone like that.

We bounced ideas off one another, and I definitely picked up a thing or two I can transfer into my own practices. We're trying to make co-building a regular thing to help us ship more projects.

Saturday, July 24th

Saturday, I continued working on that new React project. Anything new is exciting, and I want to keep building with it! I want/need to watch more of the Udemy course, but simply trying new things was fun. However, I also continued watching the React course, because that's how I'll learn faster, I believe.

Moving Forward

This week, I truly believe I can make significant progress with React. Getting exposed to it has opened my eyes to how powerful it can be, but also how much there is to learn...which could be overwhelming. I'm doing my best to push forward and continue building, rather than letting myself be intimidated.

That's all I've got for last week! If you don’t already, I’d love you to follow my journey to becoming a web developer on Twitter, where I’ve committed to and post updates daily! Come and say hi, I’d love to support you.

Designing and Developing My Portfolio - v3

Ryan Furrer — Sun, 25 Jul 2021 17:56:03 +0000

The Why

I had previously built a decent portfolio, but with the "re-branding," which I recently, made, along with my re-focus on learning code, I thought it wise to create a new home on the Internet. Something I was proud of to house my work while learning more and prepare to apply for my first web development job.

I already want to make changes to my site, but I * have to * concentrate elsewhere if I want to actually get a job in this area. Further refinements can be made in the future, but I can't let myself be distracted. In the end, it is useless to have a nice portfolio, but nothing to fill it with.

I say this because I don't think I'll ever feel 100% complete with my portfolio, but I can get it to the point where I'm content to share it with the world - so I've done exactly that.

Portfolio Versions

v1 - Published February 2019

This was built about a month after I started learning HTML and CSS. It's nothing special, but it was the first web page I had built in full. None of the projects were ever completed, but this was the first thing I was excited to code. (link no longer available)

v2 - Published in August 2019

v2 was built about 6 months after the "completion" of v1. I learned a lot in this time, which, I believe, can be observed in the design language. Looking at it now, I see many things that need refinement, but I remember being pleased with the way this one came together at the time.

v3 - Brand new!

v3 was recently completed and announced to the world on 7/2/21, which is quite some time since August 2019. A lot has happened over the years, and I will not make excuses for my insufficient progress... I was simply not disciplined enough to do the work that needs to be done to change careers as I want.

// Detect dark theme var iframe = document.getElementById('tweet-1411129302662402052-897'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1411129302662402052&theme=dark" }

The Tech Stack

HTML As with everything I build from scratch, I like to focus on using semantic HTML, as it helps greatly with accessibility and organization. If you're not using semantic HTML in your projects, you're not helping anyone.
CSS (SCSS) I love using SCSS and it's definitely my preferred method for writing CSS these days. If you're not familiar with SCSS, it "...is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax."

That said, if you are new to front-end work, please do your due diligence and learn regular CSS before anything else in the CSS world. It is powerful and is a prerequisite, in my opinion, for any CSS frameworks, stylesheet languages like SASS, etc.

JavaScript (future endeavors) While I am still learning JavaScript, I have a few ideas on how to implement it in my site. A theme-switcher is #1, but also some fun easter eggs!
Deployed on Netlify I love Netlify for so many reasons, but the #1 reason is how simple and quick it is to get a new project deployed onto the web. There are other options, like Vercel, but for now I am loyal to Netlify.

The Design

When designing my portfolio, I knew that I wanted something clean, but not necessarily minimal. I love minimalist designs, but I didn't want that to limit my portfolio. I also knew I wanted to refine the card design I used on Coding Catchup v2.

Watch on Loom
- Hover effect on v2 of Coding Catchup

So first I thought about what colors I would like to use...

The Colors

My original goal was to identify a brand color for me and one for my tech blog Coding Catchup. I chose purple for myself as an evolution of the indigo color that I featured in the previous version of my portfolio.

v2 main color: #646FCB
v3 main color: #AD96E9

As for Coding Catchup, I've had my eyes on this sort of green-blue color for a while and decided to run with it.

v1 main color: #3FC8A7
v3 main color: #96E9D8

Little did I realize these two colors actually work well together, and the Coding Catchup green is now featured on my portfolio site as an accent color. I think of this as a type of harmonious binding in my two main projects - I like it!

The Content

Content, layout and structure are pretty straightforward. As a single-page app, I simply have to link to different IDs on the page, like Projects, About and Contact Me.

I chose to place my projects first, so it's the first thing (technically second thing) that someone notices when visiting my site. In the Projects section, there are cards containing information about each of my projects. At the time of writing, I am featuring 3 Projects: Coding Catchup, the Portfolio itself, and my Wedding website.

Next up is the “About” section where visitors can learn more about me - pretty self-explanatory! I’m not good at writing about myself, so this will undergo some revisions for sure.

Lastly, is the “Contact Me” section. This is simply a contact form connected via Netlify Forms, which again makes it so simple. Netlify even has integrated spam protection, which, while I am sure it won't stop every bit, is good enough for me at the moment.

The Assembly

Content First

As I worked through this, I had a basic design in mind, so it was easy for me to insert all HTML and style later. Having said that, it hurts me to continue adding content when my navigation bar still looks like a standard list. But I trusted the process, and frankly, it was pretty fast... not that the site is huge lol.

After putting all the content together, it was time to make it look better.

Styling Second

Again, coming into this with an idea of a design and color scheme helped immensely. Hell, I had already picked out my colors and fonts, so I got to work creating my SCSS variables, linking to Google Fonts for Poppins and Open Sans, and prettying up my new portfolio. Oh, and I of course created a CSS Reset using Andy Bell's Modern CSS Reset.

When styling the site, as with most other projects, I started with the mobile site and then built larger from there. For me, I prefer starting small and building out for a few reasons.

Mobile traffic is much higher than desktop traffic, so I had to make sure everything looked good there first.
Mobile layouts are typically clear and straight forward. It's just a column of content, whereas larger screens, including tablets, laptops and desktops, allow you to have a little more fun with your designs and layouts.

From there, I made sure everything was responsive and looked good across as many devices and browsers worth checking. Currently, the site is simple, with only one media query for screen size breakpoints.

Finishing Touches

The last thing I've done was add what I like to think of as finishing touches - things that merely make for a nicer experience. These are things like the :hover styles on links, navigation items, my logo, etc., but also the outline on my projects and the contact form. Just some things to add a sense of polish to the site.

Although I am not 100% satisfied with it, I have to build new projects to be featured on my site! In my opinion, the portfolio should grow with the developer, and so far I think v3 shows I've grown... even a little.

Extras

After the main site was built, there were just a few things left to do, these included:

Build a success page users see after submitting a message via the form.

This was done easily with the Netlify docs on their form setup. It isn't anything fancy, but at least it matches the rest of the site's styles.
Create a "Links" page

Again, a very simple page that I wanted to create to easily have all my links in one place. There are services out there that allow you to do this without code, like bio.link, but I wanted it to match the look and feel of the rest of the website, and it's easy enough to do it myself.
Forward subdomains to respective pages

Again, it's simple, but something that makes it easier to remember different links and seems a little more professional - in my opinion.

I have 3 domains currently forwarded:
- blog.theryanfurrer.dev points to codingcatchup.com
- links.theryanfurrer.dev points to theryanfurrer.dev/pages/links.html
- timeline.theryanfurrer.dev points to my Polywork profile

Wrapping up

That's all I've got for now. I hope you enjoyed reading about my process, and I hope you choose to return for more! Feel free to contact me via my website or on Twitter if you have any questions or want to say hello.

There is always more work to be done, but only so many hours in the day! My next project (at the moment) is an e-commerce site built with React. This is new for me, but I am enjoying it so far. Subscribe for more weekly updates, project summaries, and tech articles, and/or follow me on Twitter!

Weekly Summary: 7/11 - 7/17

Ryan Furrer — Sun, 18 Jul 2021 14:29:03 +0000

Welcome to the fourth installment in my weekly summary series, where I give quick recaps of what I worked on the previous week to keep myself accountable.

First, let's go over my weekly schedule:

Current Weekly Schedule

Monday - Thursday: Study from 6:00pm - 8:00pm-ish. Sometimes I go until 9pm depending on how I feel.
Friday: Study from 1:00pm - 4:00pm I like to give myself more time to study when I can, and working half-days on Fridays for my current job leaves a significant time for extra coding.
Saturday: Study from 7:30am - 9:30am I give myself at least 2 hours on Saturdays, even though I often get more time in.
Sunday: Day off This is my day to recover, get energized and prepare for the coming week!

All this works with my personal goal of studying / coding 2 hours a day. I would like to do more, but I don't have the mental bandwidth to do more, usually, throughout the week.

I don't always stick to this schedule, but I try my best to do so.
Now then, let's get to it!

Sunday, July 11th

Completed the code re-factoring of my wedding website. I normally don't like to do work on Sundays, but with last week being a light week of coding, I believed it was wise to add the extra day.

Monday, July 12th

Putzed around with Gatsby plugins and failed to get one working that would allow me to embed tweets on Coding Catchup - I will try this again in the near future!

Published last week's Weekly Summary on Coding Catchup and Dev.to

Worked on a new blog post about building my portfolio - coming soon!

Tuesday, July 13th

Studied React

Added more content to my wedding website - a honeymoon fund!

Wednesday, July 14th

Studied React

Thursday, July 15th

Brainstormed ideas for React projects.
While this could be an easy thing to do and simply commit to building the "go-to" projects like to-do lists, calculators, etc., I want to do more than that...

That being said, I also need to start building and cannot get caught in "tutorial or course hell." That is, merely consuming content on how to build things, but never actually doing it.

I also squeezed in some studying of React - I found a free resource by Kent C. Dodds who created the acclaimed Epic React so I thought I'd give it a shot. This is hosted on egghead.io - "The Beginner's Guide to React" - I only just started, but am expecting to get through it all early next week!

Friday, July 16th

Friday was a light night - I had a hectic week and needed some downtime with my fiancée. Regardless, I still added some more content to my wedding website - this time it was the hotel information for our guests! I think the site is 99.9% complete and can't see myself making radical changes or adding a ton more to it. I had other wedding stuff to take care of this night, which added to the light night of coding.

Today also concluded my 2nd stint of working in dip.chat - an accountability group for web developers built by Joe Previte. I cannot recommend dip.chat enough - or even just having an accountability-buddy - some way to keep yourself accountable has been huge for me these last 2 months.

Saturday, July 17th

Finished writing up this blog post and scheduled it for publishing.
Wrote out my weekly newsletter, which I am still experimenting with. I am trying out a different format this week, rather than simply making the body of email contain this same blog post.

I also continued to work on my blog post about building my new portfolio. I ran out of time to study React, but there is always next week!

Moving Forward

This week I am trying to dive deeper into React. I'm almost done reviewing what I had learned previously in my Udemy course so that I feel more confident moving forward in it. I am also racking my brain for websites/apps that I could begin building to create not only portfolio projects, but eventually turn them into real products.

As my former passion in my life, I want to build something for musicians. It would be so fulfilling for me to provide value for the friends and colleagues who have helped me along the way by eliminating a pain-point for them. We'll see what happens in the coming months!

If you don’t already, I’d love you to follow my journey to becoming a web developer on Twitter where I’ve committed to and post updates daily! Come and say hi, I’d love to support you.

Weekly Summary: 7/4 - 7/10

Ryan Furrer — Mon, 12 Jul 2021 21:28:44 +0000

Welcome to the 3rd installment in my "Weekly Summary" series where I provide quick recaps for what I worked on the previous week to help keep myself accountable.

First, let's go over my weekly schedule:

Current Weekly Schedule

Monday - Thursday: Study from 6:00pm - 8:00pm-ish. I'll go until 9 depending on how I'm feeling.
Friday: Study from 1:00pm - 4:00pm I like to give myself more time to study when I can and working half-day Fridays for my current job is a great way to get in some extra time.
Saturday: Study from 7:30am - 9:30am I give myself at least 2 hours on Saturdays even though I can often get in more time.
Sunday: Day off This is my day to recoup, get energized, and prepare for the coming week!

This all works with my personal goal of studying/coding 2 hours per day. I would love to do more but I don't have the mental bandwidth throughout the week to do more, typically.

I don't always get to stick to this schedule but I try my best to do so.
Now then, let's get to it!

Monday, July 5th

Monday I was off as Independence Day was observed and it's a national holiday in the US. I caught up on some emails/newsletters that were piling up in my inbox, posted last week's "Weekly Summary," and sent out my first newsletter via Revue! While this contained last week's "Weekly Summary" and I don't have much of

I also built our a link sharing page on my website that I have placed in my social media channels that links to my portfolio, blog, twitter, etc.

Tuesday, July 6th

Friends from out of state were in town so I took the night off and enjoyed dinner and catching up with them. While no coding was done, I thoroughly enjoyed the White Castle we ate 😋

Wednesday, July 7th

Wednesday was a bit tough for me...it was not the night I planned on having as I had to stop what I was doing to be there for my fiancée through a panic attack which also means being there for her the rest of the night.

Before that, however, I got in some studying React. Not a very productive night but things happen and you just have to adapt.

Thursday, July 8th

Thursday was fun! I got new switches for my mechanical keyboard so I installed those before diving into studying React.

// Detect dark theme var iframe = document.getElementById('tweet-1413276585554333702-48'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1413276585554333702&theme=dark" }

Friday, July 9th

Friday was a fun day for me! I messed around in React and Gatsby a bit to learn it more in-depth. While I don't plan on using Gatsby for future projects on my portfolio, Coding Catchup is built on it so the more I learn the better, in my opinion.

I also created my own blog cover images to be more personalized. Though basic, I'd prefer using my own that I created in Affinity Designer. Previously I was using CoverView by Rutik Wankhade which worked well, but I wanted to create something I had total control over.

Saturday, July 10th

On Saturday I had to do some updating to my Wedding website, however, upon opening VS Code I saw how messy everything was. The HTML was not as semantic as I'd like and the SCSS was a garbled mess, so I chose to rewrite it from the ground up!

I spent Saturday only worrying about the mobile site as making it responsive wouldn't take too much.

Moving Forward

I have to finish my wedding website, that is first and foremost, as our wedding is in October and invites are going out very soon. Other than that I plan on doing some more writing this week and actually diving deep into React again, life-permitting.

If you don’t already, I’d love for you to follow my journey to becoming a web developer on Twitter where I’ve committed to and post updates daily! Come and say hi, I’d love to support you.