Forem: Ashlee (she/her)

Nevertheless, Ashlee Coded in 2022

Ashlee (she/her) — Thu, 10 Mar 2022 02:40:18 +0000

So much has happened since the last #shecoded post I published. I dealt with pay discrimination and sexual harassment for 10 months. I dealt very difficult mental health issues after leaving that environment. I wrote about my experience as part of my healing process. I have also since written about my experience of re-building trust in the workplace. I found a supportive and collaborative team I'm so grateful to be a member of, and I have come such a long way in my healing process.

Very recently, I was officially diagnosed with ADHD am now on the path to finding a treatment that works for me. This has been going really well so far, and I'm back to doing things I haven't done in years. This year, some of what I'm looking forward to is writing more, reading more, creating video content, and some community building. Despite the things I've been through in the last several years, I'm still here and I'm still coding. Thanks for being here with me along the journey. 💖

What a Jar of Buttons Is Teaching Me About Trust

Ashlee (she/her) — Fri, 21 Jan 2022 03:58:52 +0000

For most of 2021, I felt defeated as a disabled woman in tech. Sexism and ableism were in every part of my life at a level I'd not experienced before. I'm very used to seeing both on the internet, but even that became too much. In a job I held for most of the year, I suffered pay discrimination, biased treatment, and sexual harassment. When I escaped that situation, I knew I'd have a lot of healing ahead of me but I had no idea how much.

One thing I've learned about what I went through is that far more people than I thought have a similar experience. What we went through may not have been very similar, but the effect of the trauma was. I think it has something to do with being in a survival mode, where all you can really think about and focus on is making it through. I think this is also a reason it can take so long to fully realize we're in traumatic situations.

As soon as we're out of immediate danger, the full gravity of a the situation can set in. We can slow down and think about what happened because we're in a place that is safer than before. In the first several weeks of my job I currently hold, I was anxious all of the time. The list of things contributing to that is long, but here are a few things that are top of mind:

Pressure to do well in a new job at a well-known company in the industry I work in. I would consider this a normal pressure of being a working person.
Waiting for the other shoe to drop, because it always has. If you don't know what this phrase means, I think the explanation on gothamist.com is good.
Expecting toxic behavior and having a guard up ready to protect myself. In the past, I've been called names, gaslit about facts clearly backed by documentation and timestamps, bullied into changing my mind (or caving into pressure, rather), severely under-leveled and underpaid, held to different and unexplained standards than men on my team, not taken seriously when reporting issues, ignored in team channels whether asking for help or proposing a discussion, and more. These things didn't just happen at my previous job, they've happened in many places. But the level of toxicity in that environment is the highest I've experienced.

I've seen the same therapist since right before the pandemic started. We have talked endlessly about the occupational dimension of wellness. We've talked about it so much, we also talk about overwhelming that dimension has been for me over the years.

Skipping ahead in my story a tiny bit, we joked last time we spoke that we have nothing to talk about now since my work stress is very low now.

When I told my therapist about the struggles I was having, where I felt anxious immediately after sending messages in team channels, was spending a lot of time figuring out how to word messages in what should be easy conversations, she asked me if I'd heard of Brené Brown's marble jar metaphor. You can see her explain the metaphor in a talk on her website, but the gist is this: when people do even the smallest thing that improves your trust in them, it counts as a marble towards the marble jar. The more the jar fills up with marbles, the more you trust them.

The lesson is that trust is built over time with seemingly small and insignificant moments. After taking some time to think and process the metaphor, I decided I wanted to make rebuilding trust a prioritized and visual experience. So I decided to get a jar but fill it with buttons instead of marbles. Dropping a marble in the jar would've been too noisy of an experience, and this endeavor could double as a cute and fun button-collecting journey. I picked up some regular-sized colorful buttons and some much larger diamond-looking buttons. I designated the extra special buttons for trust-building moments that made me feel incredibly valued and grateful.

So far, this experience has been exactly what I need. Looking for all the good in my days had a similar effect to gratitude journals, I assume. I am looking more towards the good things than the bad, but not in a way that subscribes to toxic positivity. I'm still keenly aware that some bad things might happen, but I'm not expecting them to. I'm retraining my brain to look at situations in a more balanced and healthy way.

Examples of moments that are button jar worthy:

Getting thanked for vulnerability from multiple managers on my team. Many of my previous experiences involve being told that I'm too emotional. Vulnerability has been the main thing that's brought me closer to the majority of people I know, so it's a relief to know that vulnerability is so valued.
Teammates engaging in discussions I start, and doing so in genuine and authentic ways. In previous experiences, I've often gotten silence or dismissive responses. When teammates engage kindly and with interest, it shows we have a mutual goal to learn together and teach one another.
Getting asked questions about accessibility. This is the first time I've been asked about accessibility regularly at work. It is so refreshing to be asked questions about my area of focus that is so deeply personal to me as a disabled person.
Having normal conversations in code review. Code review is one area that I have a hard time in because in my experience, they either weren't a part of the development process or they weren't done in healthy ways with the right intentions. Seeing teammates regularly give each other compliments, share resources, discuss pros and cons, and being treated with all of that same kindness... it's hard to describe how valued it makes me feel.

To add to the very last point, I even found myself putting buttons in the jar for things that had nothing to do with me directly. Seeing teammates treat each other with kindness and respect showed me how they would likely treat me as well.

In the new year, I plan to keep doing what I'm doing. I don't really subscribe to annual resolutions. I'll do this until it's not valuable for me anymore, which I hope is far off because I'm excited to see the jar fill up with buttons and become a really beautiful item on my desk. I want it to be a constant visual reminder of how far I've come on this journey to healing.

How I Added an RSS Feed to My Next.js Site

Ashlee (she/her) — Tue, 13 Jul 2021 11:39:14 +0000

I recently came across a tweet from Sara Soueidan applauding folks who provide an RSS feed on their site. Sara is someone I highly admire in frontend web development and accessibility, but I had so little knowledge of RSS feeds and so many questions:

What the heck are they?
What are they for?
I thought people didn't use them anymore?

If you also have questions like this, I recommend reading How Do RSS Feeds Work? right from RSS.com. The first few words really sum it up:

Imagine being able to log into one dashboard and getting the latest news and events from all of your favorite websites, blogs, or podcasts? With RSS feeds, it’s possible!

To better understand how RSS feeds are consumed, I created my own RSS reader app and I also wrote about it so you can create one too if you like. The app I created also served as a great way for me to test my RSS feed as I built it!

How I Added an RSS Feed to my Next.js Site

There were two main problems I ran into while trying to build an RSS feed for my articles. Firstly, I didn't know that neither the <description> nor content of each <item> in the channel can't have regular HTML in it. The HTML tags must be encoded. Secondly, I found out it's really difficult to try to parse the HTML content in a Node.js environment on my own before putting it into the feed.

After struggling for hours and trying several different approaches, I went to Twitter for help. There were a lot of helpful replies! I found exactly what I ended up using thanks to an example project from @vphreak. So, what did it take?

First, I installed the feed package.

yarn add feed

Then, I added a generateRSSFeed function.

const generateRSSFeed = (articles) => {
  const baseUrl = 'https://ashleemboyer.com';
  const author = {
    name: 'Ashlee Boyer',
    email: 'hello@ashleemboyer.com',
    link: 'https://twitter.com/ashleemboyer',
  };

  // Construct a new Feed object
  const feed = new Feed({
    title: 'Articles by Ashlee M Boyer',
    description:
      "You can find me talking about issues surrounding Disability, Accessibility, and Mental Health on Twitter, or you can find me regularly live-knitting or live-coding on Twitch. I'm @AshleeMBoyer on all the platforms I use.",
    id: baseUrl,
    link: baseUrl,
    language: 'en',
    feedLinks: {
      rss2: `${baseUrl}/rss.xml`,
    },
    author,
  });

  // Add each article to the feed
  articles.forEach((post) => {
    const {
      content,
      fileName,
      meta: { date, description, title },
    } = post;
    const url = `${baseUrl}/${fileName}`;

    feed.addItem({
      title,
      id: url,
      link: url,
      description,
      content,
      author: [author],
      date: new Date(date),
    });
  });

  // Write the RSS output to a public file, making it
  // accessible at ashleemboyer.com/rss.xml
  fs.writeFileSync('public/rss.xml', feed.rss2());
};

Finally, I updated the getStaticProps function exported from src/pages/index.jsx to call the new generateRSSFeed function.

export async function getStaticProps() {
  const articles = getAllArticles();
  articles.sort((a, b) => (a.meta.date < b.meta.date ? 1 : -1)

  generateRSSFeed(articles);

  return { props: { articles } };
}

Because my site is set up to build only when my main git branch is updated, getStaticProps will be called at that time and so will generateRSSFeed. This means the feed is always up to date when I push a new Markdown file for each post or whenever existing files are updated.

Resources

What the heck is "web a11y"?

Ashlee (she/her) — Tue, 06 Jul 2021 15:14:08 +0000

If you've seen "a11y" floating around the web development space and you're not sure what it means or how to say it, you're absolutely not alone. Don't feel bad! Almost no one knows what it is until someone else tells them. I didn't know for a long time. I even created a tool that relies on the mispronunciation of it!

The What

"A11y" is a numeronym or number-based word. It is composed of three parts:

"a" - the first letter of the word "accessibility"
"11" - the number of letters between the first and last letters of the word "accessibility"
"y" - the last letter of the word "accessibility"

Numeronyms are very common in web development! Think of "K8s" (Kubernetes), "i18n" (internationalization), and "o11y" (observability) as a few of examples. Some of them have different pronunciations depending on how the number in the middle is pronounced in combination with the letters before and after it.

The way we pronounce "K8s" is different than the way we pronounce "a11y" because of how the numbers flow with the other letters. We could pronounce "K8s" as "kay-eight-ess", but "keights" (see the word eight in the middle?) is a single syllable and a little easier to say.

The How

So how to do we pronounce "a11y"? We say "aye-eleven-why". Pronunciations like "al-ee" or "al-eye" don't quite fit like most other pronunciations of numeronyms because they're not saying the number in the middle at all. This isn't to say that all numeronyms are said the same way, but most that use this format follow this idea.

The Why

Numeronyms are often used when their original word is a lot of characters or difficult to pronounce. According to Wikipedia, the first numeronym was created in the 1980s for a software account owner's surname because it was too long for the system to handle. "Accessibility" is 6 syllables whereas its numeronym is 1 less. That's not a huge amount of savings, but the phonetics of "a11y" are easier for many people to verbalize than "accessibility" because the there are less "harsh" syllables in comparison.

Numeronyms are also helpful where brevity is important, such as in tweets because Twitter enforces a character maximum. Since there are less characters to type, it can also be more efficient once you get used to using it. For me personally, it's also easier to remember how to spell!

Do I have to use it?

Nope! If you like using the word "accessibility" more than you like using the "a11y" numeronym, please continue to do so. It's definitely a matter of preference and using one or the other does not make you more or less knowledgeable. If someone tells you otherwise, they are unfairly gatekeeping the topic of web accessibility. What truly matters is that you know what "a11y" means so you're not thrown off when you read it in other people's content.

Remember: everyone has different accessibility needs. Some people use "a11y" because it's more accessible to them. If "accessibility" is more accessible to you, that's totally acceptable!

If you liked this article and found it useful, please consider sharing it! If you want to get notified when I publish more content like this, consider subscribing to my email newsletter. Otherwise, feel free to send me an email if you have any questions or feedback! I'll be happy to hear from you.

How to Create Your Own Next.js RSS Reader App

Ashlee (she/her) — Wed, 26 May 2021 12:45:34 +0000

What the heck are they?
What are they for?
I thought people didn't use them anymore?

If you also have questions like this, I recommend reading How Do RSS Feeds Work? right from RSS.com. The first few words really sum it up:

Imagine being able to log into one dashboard and getting the latest news and events from all of your favorite websites, blogs, or podcasts? With RSS feeds, it’s possible!

RSS feeds mean I can read all of my favorite blogs in one place?? And I don't have to subscribe to newsletters to know when a new post has been published?? That sounds so lovely! I knew then that I definitely needed to figure out how to provide an RSS feed for my own site.

In order to better understand how to create an RSS feed for my site, I needed to better understand how they are used. This is where I got the idea to create my own RSS reader app! Once I had the app finished, it also doubled as a way for me to test my RSS feed as I developed it.

I had a ton of fun with it so I decided to share my findings with y'all in case you also want to make your own RSS reader app. I hope you find the instructions below helpful and as always, let me know on Twitter if you have any questions!

How to Create Your Own Next.js RSS Reader App

Fork and clone the repo

First, you need to create a fork of the starter code.

Go to the GitHub repository
Click the "Fork" button at the top right of the page
Follow the steps provided by GitHub

Second, clone the fork you've created onto your machine and install the dependencies.

git clone <your fork>    # Clones the fork
yarn                     # Installs the dependencies

Set up Firebase Authentication

Third, you need to create a Firebase project since it'll handle authentication. You want this app to have authentication so that other people aren't driving up your API requests that will be made to RSS to JSON (we'll set that up next).

Go to console.firebase.google.com and make sure you're logged in with the Google account you want to use.
Click the card that says "Add project". It should be the first one listed.
Enter a project name. I'm going to use nextjs-rss-reader.
Toggle "Enable Google Analytics for this project" to off.
Click "Create project".
Click "Continue" when your new project is ready.

Here's a video showing these steps (the project name is different):

Firebase makes it easy for us to set up email/password authentication in our app. It's also easy to add a user for ourselves right from the console. Make sure you use a real email address and a secure password for your user. This is how you're protecting your feed!

Go to the Firebase console for your project.
Go to the "Authentication" page under "Build".
Click "Get Started".
You should be on the "Sign-in method" tab.
Click "Email/Password".
Enable the first toggle.
Click "Save".
Switch to the "Users" tab.
Click "Add user".
Enter a secure email and password.
Click "Add user".

Here's a video showing these steps:

Create an RSS to JSON account

Next, let's set up an RSS to JSON account so we can get an API key for making API requests. I personally have a paid plan because of the number of feeds I subscribe to, but the free plan is pretty nice! At the time of this writing, the free plan updates a feed once an hour, allows 10,000 requests per day, and supports 25 feeds. The starter code is currently set up to generate your site no more than once per day, so at the very most, you'll be making 1 request per feed per day.

Sign up for an RSS to JSON account at this link
Get your API key from the My Account page and have it ready for the next step.

Create a .env file

In the root of your forked project, create a file called .env. It will have four items in it.

RSS_2_JSON_API_KEY=<your RSS to JSON api key>
NEXT_PUBLIC_FIREBASE_API_KEY=<your Firebase project's API key>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your Firebase project's auth domain>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your Firebase project ID>

Put your RSS to JSON API key from the previous step with the RSS_2_JSON_API_KEY item. You can get the other items from Firebase after registering your app. Here are the steps for that:

Go to the Firebase console for your project.
Go to the project settings.
Scroll to the bottom of the page where it says "Your apps."
Click the "</>" button to register your app for web.
For "App nickname", enter nextjs-rss-reader.
Click the "Register app" button.
Copy and paste the apiKey, authDomain, and projectId values with the last three items in your .env file.

Start the app

We're ready to go! Start the app with yarn dev and go to http://localhost:3000/ in your browser. You should be redirected to the login page where you can enter your email and password for the user you created in the second part of the Set up Firebase Authentication section above.

After logging in, you should see a list of articles. You can click the "Read here" links to read the article within your app, or you can click the "Read at source" link to read the original version of the article!

Customize your feed

The app knows what feeds to fetch by the feed.txt file in the root of the project. If you open the file, you'll see three listed with each one on its own line in the file:

https://www.a11yproject.com/feed/feed.xml
https://webaim.org/blog/feed/
http://www.webaxe.org/feed/

If you want to remove a feed, just delete the line. If you want to add a feed, make sure it's on its own line. That's it! Happy reading. :)

Nevertheless, Ashlee Coded

Ashlee (she/her) — Tue, 09 Mar 2021 02:38:49 +0000

2020 was both the best and worst year. I challenged myself more than ever and I was also given challenges I have never faced.

In January of 2020, I started physical therapy to learn how to walk again after having foot surgery a few weeks before. I dealt with inaccessibility in ways I’d never had to before and it was hurtful in a lot of ways. I didn’t quite feel invisible. It was more like people didn’t want to see me and chose not to. They chose to be exclusive and inaccessible.
In April of 2020, I started a Twitch channel. I’ve met absolutely incredible people through Twitch and I’ve enjoyed every minute of live knitting and live coding. 🥰
At the end of July 2020, I spoke on Twitter’s Disability in UX panel in front of hundreds of people. It was my largest speaking experience by far and it was fascinating for that moment to be completely remote. The linked broadcast has over 3,000 views. I have no doubt people heard us and are changing how they approach accessibility.
Also in July of 2020, I quit my job without having another one lined up. I drained my savings and was searching for months for a job. Job hunting was an incredibly demeaning process that I feel like I’ve only just regained my confidence from. I also had a ton of financial support when I asked for it. I don’t know what would have happened without that assistance from the community. 💜
In November of 2020, I started my 4th job. I’ve had several new and fun technical challenges there and am building my skills faster than I ever have. It’s also in an industry I’ve never worked in and I’m always learning things from people outside of my department.

Aside from these notable dates, I’ve also learned a great deal about myself while exploring a potential ADHD diagnosis. I know myself better than I ever have and also accept myself more than I ever have. And with more time to gaze on the internet, I’ve found a ton of disabled and/or fat and/or BIPOC and/or neurodivergent creators on TikTok where I’ve learned more about our world and myself than I could’ve imagined.

Overall, I feel lucky to say that I came out of 2020 a better person than I went in. It is certainly a privilege to say that. I didn’t get through the year completely healthy, but I didn’t covid and I didn’t lose anyone to covid. I feel very lucky to have survived the year. I’m still here and working hard to speak and write about accessibility. 💜

Zoom Live Transcription Update 🚨

Ashlee (she/her) — Thu, 25 Feb 2021 15:19:50 +0000

Zoom is offering live transcriptions to free users upon request and all free users will have access by autumn 2021.

Link to announcement: https://blog.zoom.us/update-on-live-transcription-for-free-accounts/

Link to request form: https://docs.google.com/forms/d/e/1FAIpQLSccQQ2W-K8naaltkBIbuv6BfJvisy0NZS2qWIKd0gSMUWGGpQ/viewform

My Writing and Planning Process

Ashlee (she/her) — Thu, 18 Feb 2021 02:52:13 +0000

When I first started seriously writing in early 2019, it was because I committed to a 30-day blogging challenge. My main goal of this challenge was to see if I even liked blogging and sharing my ideas so publicly. I'm still here and telling you about my process, so hopefully it's clear that I like it!

Why I Needed Something Different

What I discovered is that publishing a post a day wasn't sustainable for me. I think it takes a special kind of person and a special kind of content to publish daily and I applaud anyone who does that. I personally can't keep up with a schedule like that because I have chronic issues that make my spoon levels unpredictable. As I write this, I'm pretty low on spoons but I've been looking forward to this post for several weeks, so that's what's motivating me. :)

Not only was I looking for a schedule so that I can get back to writing at a regular cadence, but I'm also launching a support site soon where folks can do monthly subscriptions to support my work and get some fun benefits in return. One of the membership tiers includes 2-week early access to blog posts I write for my website. That means I need to have posts written and scheduled ahead of time.

How I Came up with a New Process

Once I figured out I needed something different, I started thinking about all the things I love doing. I love writing about accessibility. I also love sharing the little things I learn every once in a while, such as setting up a React App for testing with Jest and Enzyme or how to dynamically create many similar CSS classes with Sass. I knew for sure that I wanted to write more technical content this year than I have in the past.

Then I thought about live streaming on Twitch. I love it too! I have my Build an Accessible React Component live series that I plan to continue and knitting on stream is a nice change of pace. I knew I wanted to be able to publish posts regularly and also be able to stream on Twitch a couple of times a week.

In November 2020, I wrote a tweet asking if anyone batched blog posts. It's more common than I thought! This thread is also where I was connected with Stephanie Morillo (pronounced moh-REE-yoh) and signed up to have a 1:1 content coaching session with her. It went very well and she gave me a lot of great ideas! She also checked in with me afterwards to see how I was doing. I highly recommend following her and reading her content! She's the same person that inspired me to create a /links page and share it on social media. (My /links page is here).

What I'm Doing Now

I use 3 tools to stay organized: Google Calendar, Trello, and GitHub. It might sound like a lot to some, but I promise I keep the work for each to a minimum. Gotta save spoons everywhere I can! Let me tell you how I use each one. You can click on any of the screenshots to see them full-size.

Google Calendar

I'm a very visual person. When I plan an appointment or video call, I always have to look at my calendar. My brain works in calendar weeks. So for a high-level view of what I'm streaming on Twitch and when I stream it, I use Google Calendar. I stream twice a week. On Tuesdays, I code. On Thursdays, I knit. I make sure to distinguish between those two. For Twitch streams that are planned ahead of time, such as the ones where I build an accessible React component, I make sure that goes in the title as well. Those have not been scripted in the past, but they will be for future streams to save me some time and energy. That means I have to plan them ahead of time and to do that, I have to know exactly when they're happening. I've also been numbering the streams but I'm not sure why. I guess that part is just for fun! :)

Trello

I keep track of all of my writing ideas, plans, and newsletter dates with a "Writing" board in Trello. It has 6 columns:

Ideas: This is like a backlog of ideas for posts. They're not guaranteed to be written, but getting them out of my brain ensures I won't forget them and also makes room for other things I want to think about.
To Do: These are planned posts and newsletters. They have due dates and titles and will definitely be written.
Outlining: This is the first step in my writing process. Some posts almost skip this step because they can be written in one sitting. Longer posts are on a feature branch for my repository and they have a draft PR in GitHub. We'll get into that more in the next section.
Writing: Posts in this column are ones I've started filling in the outline on. This column is also for posts that are being reviewed. I'm a pretty interactive reviewer/editor and still consider editing to be writing because I might re-word whole sections after a post is written out.
Ready & Scheduled: This column holds cards for newsletters that have been scheduled for delivery and posts that have PRs that just need me to press "Merge".
Live: Things in this column have been sent or published. The whole world can see them.

The columns are laid out so that a task moves through each step from left to right. And as I mentioned in the last section, I'm a very visual person. I use my one free power-up for the Calendar that lets me view all of my tasks by week or month. I use these views to ensure that I've spaced out my topics appropriately and so I can group ideas if I feel like writing a series about a broader topic.

GitHub (and Vercel)

The code for this website is stored in a GitHub repository. Each post is a markdown file and it's treated just like any other file in a pull request. When I want to create a new post, I first create a branch called post/<blog-post-slug>. The post prefix is only there to help me keep things organized. I don't do anything special for CI/CD. Second, I create a new file for the post and put it in the appropriate directory. My directory structure for posts looks like this:

posts/
  2019/
    01/
    02/
    ...
  2020/
    01/
    02/
    ...
  2021/
    01/
    02/
      my-writing-and-planning-process.md
    ...

After I've outlined a post, I commit and push the changes and open a draft PR on GitHub. This enables me to see all the in progress posts I have at once and also allows me to work on many posts at once. When I was writing my Build a Blog Site with Next.js and Firebase series, all 5 parts of the series where in their own pull requests at the same time.

I use Next.js for this site and deploy it to Vercel. Vercel automatically builds previews for every PR and I use them when reviewing posts to make sure all links work correctly and that the post looks nice on my site. When I'm ready to publish a post, all I have to do is hit the "Merge" button on the PR and Vercel automatically builds the updated version of my site.

In Summary

I love my new process. The tools I use can easily have redudant overlaps in their uses, but I feel confident that the setup I have keeps everything organized for very intentional usage. I schedule my streams in Google Calendar. I schedule my posts and newsletters in Trello. I manage reviewing, testing, and publishing in GitHub. I can write as many or as few posts as I want at the same time.

If this post sparked any ideas for you or if you already do something that's just slightly different, I'd love to hear about it. Send me a tweet or send me an email!

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to https://ashleemboyer.com/newsletter.

Set up a React App for Testing with Jest and Enzyme

Ashlee (she/her) — Tue, 01 Dec 2020 13:40:05 +0000

It's been awhile since I've set up a React app for testing with Jest and Enzyme. Since I had to look up more than one of these steps to remind myself how to accomplish this, I decided to write a super quick guide in case it helps anyone else.

Dec. 8th Correction

Enzyme is not yet compatible with React 17. You should make sure the highest version of React you are using is 16.14.0 if you want to use Enzyme with your tests. This PR will add an adapter for React 17. Please do not ask them when it will be done, it will be done when they get it done!

Step 1: Create the app with `create-react-app`

This requires having npx installed. You can read about it here.

npx create-react-app <app-name>

Step 2: If you use Sass modules, like me, install `node-sass`

At the time of this writing, node-sass@5.0.0 in incompatible and node-sass@4.14.1 must be installed instead. There's a Stack Overflow answer about it here.

yarn add node-sass@4.14.1

Step 3. Install the dev dependencies for Enzyme

The --dev option is what saves these under devDependencies in your package.json file. Why do they need to be under devDependencies? Because these kinds of dependences are "Packages that are only needed for local development and testing." You can read a little more on that here.

yarn add --dev enzyme enzyme-adapter-react-16

Step 4. Configure Enzyme with an adapter in `setupTests.js`

Enzyme needs to know what adapter you want to use. We tell it in the setupTests.js file in the src directory of your project. You can get more details about setting up Enzyme here.

Your setupTests.js should only have some comments and one import statement right now. Just add these lines right after that import:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Step 5. Get to testing! 💪

Everything you need is installed and now you just need to write up some tests. Here are some Jest and Enzyme docs to help you get started:

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to https://ashleemboyer.com/newsletter.

Accessible, Smooth Scroll-to-top Buttons with Little Code

Ashlee (she/her) — Thu, 26 Nov 2020 23:52:29 +0000

Some of the original content in this post has been archived. This post previously showed how to create this component with a button element. I've since learned a better approach is to create this component with an anchor element and have it link to a Skip Navigation Link. You can read the archived post if you want to.

Scroll-to-top buttons are great for pages that are long enough to require a few scrolls to read everything. They're even better for extremely long pages. Scrolling is a lot of work for some users, especially on a mobile device. We (website creators) can greatly reduce the amount of work it takes to scroll our pages with surprisingly little effort on our part.

One example is the WAI-ARIA Authoring Practices, which is 140,923 pixels tall at the time of this writing. I'm not calling them out, it's just one of my favorite pages on the entire internet! It's a great resource for making accessible custom components.

Making a scroll-to-top button and making it scroll smoothly is probably a lot easier than you think. It's definitely a lot easier than I thought! The code bits I'm about to show are for React and SCSS, but you don't need to know either. The basic concepts here are for JavaScript and CSS. We'll also cover how to get rid of the smooth scrolling when it's an accessibility concern.The best part of this approach? It requires no focus management! 🎉

Prerequisites

If you don't already have one, you need to add a Skip Navigation Link to your site. It's a quick, easy win as well, and the instructions below reference the one I use on my site. Not sure how to do it? Then read my post on How I Added a Skip Navigation Link to My Next.js Site!

The React Code

As you may have read in my post about Skip Navigation Links, I use Next.js Per-Page Layouts to help me render repeated content, such as navigation links, on many pages. The layout I use for the navigation header is where I placed a Skip Navigation Link and Scroll-to-Top link. The code looks something like this:

import styles from './base-layout.module.css';

const BaseLayout = ({ children }) => {
  return (
    <div>
      <a href="#main-content" id="skip-navigation-link">
        Skip Navigation
      </a>
      <SiteHeader />
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
      <a href="#skip-navigation-link">Back to Top</a>
      <SiteFooter />
    </div>
  );
};

What's important from this code:

The Scroll-to-Top link goes to the first focusable control on the page, which should be a Skip Navigation Link.
The href of the Scroll-top-Top link matches the id of the Skip Navigation Link.

The SCSS Code

The code below takes an accessibility- and browser-support- first approach. Rather than making the default behavior for scrolling be smooth, an animation which can be physically harmful to some folks (including myself), it only applies smooth scrolling when two conditions are true:

The prefers-reduced-motion query is supported (see the CanIUse.com page)
The value of the setting is no-preference (which unfortunately is the default value)

html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

One thing to keep in mind is that scroll-behavior does not have full browser support. At the time of writing, the feature is still in development for Safari.

Conclusion

That's it! It really is just a few lines of code. After you add this, everyone will be able to quickly scroll to the top of your website. You've also made it so your site doesn't accidentally harm someone who can't tolerate animations! Well done. I am proud of you!

First Look at the No-Code Overlays Web App

Ashlee (she/her) — Sat, 03 Oct 2020 00:26:55 +0000

Guess what I did today? I planned the features for the MVP, set up a Next.js app and its GitHub repository, and I merged the first PR for the No-Code Overlays Web App! If you'd like to read all of the details in the PR, you can do so here, but I'll give you a quick run down.

So, when you arrive at the app, you need to log in with an email and password. Having a login keeps everyone's information separate and private. I don't want anyone to be able to edit my streaming overlay, and no one wants me to edit theirs either! Here's a preview of that page:

To put all of this together, I added a couple of pages to the app, installed the Firebase npm package, set up a new Firebase project, added a test user for logging in, and set up some functions for interacting with Firebase auth in this API file. This part was a little tedious, but pretty straightforward!

The last step was to handle redirects to the login page when a page that requires a logged in user is trying to be reached. Next's router makes it very easy to redirect, so the hardest part was checking with Firebase for a logged in user. In the API file I mentioned, I wrote a function for getting the current user. If there's no current user, then there's a redirect to the login page.

I'm thinking about writing a blog post on this for my personal site, but no promises. This project has me pretty busy at the moment! Stay tuned for the next update! :)

Challenge Accepted! Just F*ing Ship It.

Ashlee (she/her) — Fri, 02 Oct 2020 00:52:12 +0000

Great news! I'm joining the 30-day Just F*ing Ship It challenge to launch No-Code Overlays on October 31st, 2020. If you want to read all the background information on the project, how I came up with my idea, and what the next few days will be like, make sure to check out the No-Code Overlays blog! I'll keep posting updates there as well, so keep your eye out every few days or so.

Forem: Ashlee (she/her)

Nevertheless, Ashlee Coded in 2022

What a Jar of Buttons Is Teaching Me About Trust

How I Added an RSS Feed to My Next.js Site

How I Added an RSS Feed to my Next.js Site

Resources

What the heck is "web a11y"?

The What

The How

The Why

Do I have to use it?

How to Create Your Own Next.js RSS Reader App

How to Create Your Own Next.js RSS Reader App

Fork and clone the repo

Set up Firebase Authentication

Create an RSS to JSON account

Create a .env file

Start the app

Customize your feed

Nevertheless, Ashlee Coded

Zoom Live Transcription Update 🚨

My Writing and Planning Process

Why I Needed Something Different

How I Came up with a New Process

What I'm Doing Now

Google Calendar

Trello

GitHub (and Vercel)

In Summary

Set up a React App for Testing with Jest and Enzyme

Dec. 8th Correction

Step 1: Create the app with create-react-app

Step 2: If you use Sass modules, like me, install node-sass

Step 3. Install the dev dependencies for Enzyme

Step 4. Configure Enzyme with an adapter in setupTests.js

Step 5. Get to testing! 💪

Accessible, Smooth Scroll-to-top Buttons with Little Code

Prerequisites

The React Code

The SCSS Code

Conclusion

First Look at the No-Code Overlays Web App

Challenge Accepted! Just F*ing Ship It.

Step 1: Create the app with `create-react-app`

Step 2: If you use Sass modules, like me, install `node-sass`

Step 4. Configure Enzyme with an adapter in `setupTests.js`