Forem: Kayla Sween

4 Strategies for Picking a Conference Talk Topic

Kayla Sween — Wed, 02 Nov 2022 13:00:00 +0000

As the organizer for MagnoliaJS and as a conference speaker, the two questions I get asked most often from people wanting to get into conference speaking are "what should I talk about?" and "how do I pick a conference talk topic?" The only I answer I can really give is the typical senior dev answer... it depends. Here are a few things to consider when deciding on a conference talk.

You could talk about something you're comfortable with.

I'd recommend talking about something you've already been working with and are at least somewhat knowledgable about. Agreeing to give a conference talk is already nerve-wracking without having to learn a new skill or technology to give the talk.

Or you could talk about something completely new!

On the other hand, agreeing to talk about something you're not very comfortable with can push you to learn more about that topic, if that's what motivates you! If you've been excited to try a new JavaScript framework but haven't quite had the time to devote to it, submitting a Call for Papers (CFP, also could stand for Call for Proposals) about it gives you the perfect excuse to build something with it!

(Please don't do this if it will cause you too much stress! ❤️)

You could talk about something you're passionate about.

Giving a conference talk on something that gets you excited will make preparing and giving the talk so much easier. The audience will be able to sense your enthusiasm and help energize you throughout the talk.

Do you love CSS? Give a talk about animations, grid vs flex, or whatever cool thing you've learned CSS can do!

Are you excited about accessibility? Talk about how to make sites more accessible!

Do you enjoy mentoring others? Talk about how to be a better mentor or mentee!

Talk about your experiences.

Not every tech conference talk has to be a technical talk. In fact, I believe I learn far more from the ones that aren't technical! You could talk about how you got into tech or things you've learned from video games that translate well into development or career skills.

The hardest part about speaking at conferences is picking a topic (and the 20 minutes before you get on stage when you're wondering why you agreed to do this 😅). Hopefully this post has given you some ideas for your first CFP. If you've got one in mind, MagnoliaJS's CFP is open now!

Some of the topics covered in this post were given at MagnoliaJS 2022. All of the talks are on YouTube so go check them out!

Cover image from unDraw.

I wrote a crawler for the first time.

Kayla Sween — Fri, 12 Feb 2021 15:58:51 +0000

Early on in the pandemic, I decided that I wanted a way to track the moving average of cases per day in my state, Mississippi, since that wasn't something our Department of Health had a graph for at the time. Since I thought, "you know, this won't be too long... I could definitely just do this for a few months," I had been manually adding data for every single day until the end of January. I would frequently forget or just not want to look at the data for a month or more at a time. I realized I needed to find a way to automate this process so I didn't have to go back through the last month's data to update my graph. So, I decided to finally write a crawler to get all that data from our state’s Department of Health website without even thinking about it.

The Crawler

For me, this was the easy part. I wanted to write a web crawler in a language I was comfortable with to get it up relatively quickly, so I decided on JavaScript. I took bits and pieces from various tutorials I had found and decided on using Axios to grab the data and Cheerio to parse it.

To start out, I added Axios and Cheerio to my site.

for yarn: yarn add axios cheerio
for npm: npm install axios cheerio

Then, I included them in the JavaScript file I used for my crawler code.

const axios = require('axios')
const cheerio = require('cheerio')

You could also do it the ✨ES6 way✨:

import axios from 'axios'
import cheerio from 'cheerio'

I also included my JSON file and filestream so I could add the newest data to that JSON file.

const fs = require('fs')
const data = require('../src/constants/covidData.json')

Then, I created a function to get the latest cases for the day off of the MSDH website. I fetched the data with Axios, loaded it into Cheerio, and then pulled the value out of the section of the DOM that contained the current day's data. I found this selector by going into the dev tools in the browser and looking for the section of the page that contained the daily case data. In this case, there was a data-description attribute on a p tag that helped me locate the correct HTML element. I removed any commas from the string it returned and made sure that it was getting saved as an integer so it would work with my charts.

const msdh = 'https://msdh.ms.gov/msdhsite/_static/14,0,420.html'
const getDailyCases = async () => {
  try {
    const { data } = await axios.get(msdh)
    const $ = cheerio.load(data)
    let dailyCases = parseInt($('[data-description="New cases"]').text().replace(/,/g, ''))

    return dailyCases
  } catch (error) {
    console.log(error)
  }
}

I created a new date object. And since All data is from the previous day, I set the date to the day before.

let today = new Date()
today.setDate(today.getDate() - 1)

And then initialized my data object to eventually add those two pieces of information to an object to add to my JSON file.

let dailyCases = {
    newCases: 0,
    date: today.getFullYear() + '-' + today.getMonth() + '-' + today.getDate() //formatting date to match what I needed
}

Finally, I wrote another async function to call my getDailyCases function and, after it gets that data, add it to my JSON file as long as there are new cases, and that date doesn't exist in the JSON file.

const getCovidData = async () => {
  dailyCases.newCases = await getDailyCases()

  if (!data.data.includes(daily.date) && daily.newCases != 0) {
    data.data.push(dailyCases)

    fs.writeFile('src/constants/covidData.json', JSON.stringify(data), (error) => {
      if (error) {
        console.log(error)
      }
    })
  }
}

And, of course, call that function so that it'll actually run.

getCovidData()

That's all there is to the crawler! You can check out the full crawler file on my GitHub.

Getting it to run regularly

My first thought was to use a combination of Netlify functions to run the web crawler and Zapier to schedule the daily deployment. I quickly realized this wasn't going to work. Since my database was just a JSON file in my GitHub repo, I needed to make sure that the data was getting added every day. When I tried using the Netlify/Zapier combination, it would run the crawler and "overwrite" the last entry daily, since that data wasn't getting pushed back to GitHub.

After that didn't pan out, I decided to try GitHub Actions, which I had never used before. (Spoiler, this is what I ended up using.)

I just jumped right into GitHub Actions without any real research or planning. Normally, that's not something I'd recommend. However, it worked out pretty well this time because of how well the default YAML file was commented. I used a lot of the default YAML file for the action.

To get the Action to run daily, I used POSIX cron syntax to set the interval.

on:
  schedule:
    - cron: "00 20 * * *"

Each of those places separated by spaces represents a unit of time. This will determine how often your Action will run. A lot of times, you may see that denoted by five asterisks ("* * * * *"). The first place is the minute field. The second place is the hour (which hour in UTC). The third is the day. The fourth is the month (1-12 or JAN-DEC). Finally, the fifth place is the day of the week (0-6 or SUN-SAT). If you leave any of these as a star, it'll run for every one of those units of time. In my code, I wanted my Action to run every day at UTC 20:00 (or 2PM CST) to ensure the Department of Health had time to publish data that day. Therefore, I only put units of time in the minute and hour places and left the rest as asterisks.

Once I determined how often I needed it to run, I needed to define what the actual job (with steps!) was that I need it to run. So I set up Node.js, installed my dependencies (Axios and Cheerio), ran my crawler, and then pushed the changes to my repository.

jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on (I left it as the default)
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      
      - name: Setup Node.js environment
        uses: actions/setup-node@v2.1.4
    
      - name: Install axios and cheerio
        run: |
          npm install axios
          npm install cheerio
    
      - name: Get Covid Data
        run: |
          node functions/crawler.js
          
      - name: Push changes
        uses: actions-go/push@v1
        with:
          # The commit message used when changes needs to be committed
          commit-message: "running daily COVID data crawler"

That's all there is to it! Now the web crawler is running every day! You can check out the GitHub Action file on my GitHub.

You can also see the final product in action on the COVID-19 page on my website.

Senior-ish developers get intimidated too.

Writing a web crawler was something I put off for a LONG time in my career. It was probably the first thing I was asked to do as a developer (which I didn't). Quite honestly, it intimidated me a lot and took me around 9 years to get over that intimidation. I just assumed that I wouldn't be able to do it, and I let that consume me. Now, every single time I see that commit message "running daily COVID data crawler," I feel so proud. I've built many things throughout my career, but this may be the thing I'm most proud of because I proved to myself that I could do it.

Let this be a lesson for new developers that sometimes things don't get less scary. You just get less afraid of failing.

Illustration from Undraw

How to Fix Font Awesome Icons Flashing Wrong Size in Gatsby

Kayla Sween — Mon, 01 Feb 2021 18:09:53 +0000

Recently, I was working on a project with Font Awesome and Gatsby. I noticed that every time the page loaded after publishing the site, the icons would render huge for a split second. In my pre-React days, I remembered running into this annoying problem with Bootstrap 3 and Glyphicons. In that case, I knew it happened because I was importing the styles for the Glyphicons in the wrong order but wasn't sure how to fix that problem using React and Gatsby.

Bugs that only happen on page load or the first action of an element always seem to be the most frustrating ones to debug. Thankfully, the solution is relatively straightforward and should relieve your frustration in no time!

Why it happens

Since styles take a little extra time to download and get injected into the head, the icon is momentarily unstyled. Fabian Terh has a really great Medium article, "Fixing flashing huge Font Awesome icons on a Gatsby static site", which does a great job of explaining the why if you want a more thorough explanation.

How to fix it

In Gatsby, you'll add these lines of code to the beginning of your gatsby-browser.js. (It just so happens that this fix also works in Next.js if you stick this code into your _app.js file.)

const styles = require("@fortawesome/fontawesome-svg-core/styles.css")
const config = require("@fortawesome/fontawesome-svg-core")

config.autoAddCss = false

You could import the styles and config using ES6 syntax, like so:

import '@fortawesome/fontawesome-svg-core/styles.css'
import { config } from '@fortawesome/fontawesome-svg-core'

Let's break those down.

First, we're importing the Font Awesome styles manually and the config from the Font Awesome core library.

Then, we're setting config.autoAddCss to false so it doesn't automatically inject the CSS into the <head>.

That's it! I hope this helped someone because I know it'll certainly help me when I run into this problem again in the future!

How to Finish a Side Project

Kayla Sween — Mon, 10 Aug 2020 11:47:08 +0000

It's a huge joke in the tech world that we love starting new side projects, but can't ever find the motivation to finish any of them. The new project always feels like it'll be more fun than finishing something you're already doing. We've all been there! Here are a few tips that I have to complete your side projects.

Don't start a new side project if you know you'll be busy.

It may seem obvious, but it's worth noting! Take a look at any deadlines or events that you have coming up. If you're delivering a project for work in the next couple of weeks, maybe it's not a great idea to start a new project.

Know what you want before you start.

Just like at work, you shouldn't start on a project that has no clearly defined goal. Have a good idea of what you want to accomplish by the end of this project before you even start and stick with it. It's, of course, completely okay to change direction while you're working on it if you realize it's not what you want, but try not to add a ton of functionality while you're working on your "phase 1."

Set a deadline.

The only person you're hurting by dragging on a side project is yourself. If you don't have an end in sight, you may be less likely to finish. Make an estimate of how long it'll take you to complete the project and add at least 20% more time. If you finish early, it'll give you a confidence boost. But if something comes up, you run into more bugs or issues than expected, you'll be covered.

Tell people about it.

🔥 Kayla is fine. 🔥

@_kaylasween

I’m going to put this into the universe so I actually do it:

In August, I’m going to finish the Egghead video I’ve been working on for like the past month.

In August, I’ll release at least one blog post.

Y’all have my permission to shame tf out of me if I don’t.

16:06 PM - 24 Jul 2020

Tell all of your Twitter or DEV followers what you're going to do. If you have a deadline, tell them when you expect to have it done! Let the angry mob take you if you don't finish.

As a bonus, you're prepping people for some TDD (Twitter-Driven Development, shout out to Justin Samuels) in case you run into problems.

Or if deadlines and peer-pressure are too overwhelming, just don't!

I know I said you're hurting yourself by letting a project drag on, but sticking to a deadline is not always possible or easy. Life happens. Sometimes life gets really hard. If something comes up or it just becomes too much to devote any energy to a side project, don't feel bad about letting it take longer than expected!

Start by making it work, then gradually make it better.

I think Jeremy Keith's idea of Progressive Enhancement from Responsive Field Day in 2015 has a lot of carry-over here. He says he likes to work using these steps:

Identify the core functionality of your project.
Do what you can to make that functionality happen with the simplest technologies.
Then, enhance! Make it better! Add styles, functionality, whatever you want!

This ensures that you'll, by all accounts, finish your project. The implementation of the core functionality alone means you've completed the project.

Making enhancements should be considered just that: enhancements! Don't get too bogged down in the details and working on things that don't directly contribute to the core functionality. Take a step back, look at the bigger picture, and make something work. As long as that happens, you've completed the project.

Now onto making it better!

Say you won't start another project until you finish this one... and mean it!

New projects always seem like more fun than whatever you're currently working on. The grass is always greener on the other side of the fence.

I know that it's not fun, but if you set out to getting the core of your project done, you'll be able to move onto other projects faster! 😉

Take breaks. Don't let a side project burn you out.

Don't be afraid to take breaks from your side project. These could be short breaks to go take a walk, grab some water or a snack, or meditate. But they could be longer breaks of weeks or even months. Do whatever you need to make you feel refreshed enough to work on it. Even side projects can require a lot of energy.

Don't feel obligated to always be working on a side project.

You don't have to stay busy all the time with side projects. You don't have to code all day every day. You can have periods of your life where you go to work, come home, and chill. You can have periods where there are just other ways you'd rather spend your free time.

What if I told you, you don't need side projects at all? You can progress in your career just fine without doing side projects. I think this is a lukewarm take at best, but some folks are very passionate about the need for side projects and disagree.

In my opinion, they're not necessary. Do side projects if you want to. Don't let anyone tell you what you have to do.

📣 Sound off 📣 Do you have any tips for completing side projects? Let me know!

CSS Pseudo-classes and Pseudo-elements

Kayla Sween — Wed, 12 Feb 2020 14:25:42 +0000

CSS3 brought the distinction between pseudo-classes and pseudo-elements with the double-colon (::) syntax to denote the latter. Let's go over what pseudo-classes and pseudo-elements are and what they are used for!

I won't go into EVERY pseudo-class and pseudo-element, which would likely bore you as the reader and me as the writer. Thankfully, someone has already created a complete guide to all of these at the time of writing! You can checkout Ricardo Zea's An Ultimate Guide To CSS Pseudo Classes and Pseudo Elements. And, as always, CSS Tricks and the MDN's pseudo-class and pseudo-element docs are fantastic resources.

What is a pseudo-class?

Pseudo-classes are like an "injected" class into an element. They have the same specificity as regular CSS classes since it behaves like a class. Pretty simple, they just act like CSS classes!

You can use them to add styles in specific states, such as when a navigation item is active (using :active) or a form element is disabled (:disabled). You can also add styles to the element depending on where it is in relation to its siblings (:nth-child(N)) or if the element is (:is()) or is not (:not()) a particular element or has a specific class, id, pseudo-class, or attribute selector.

What is a pseudo-element?

A pseudo-element is like a virtual element. It doesn't exist in the DOM, but we can manipulate it as we would regular ole HTML. Since it is like targeting an element, pseudo-elements have the same specificity as an element selector.

Pseudo-elements are great to use when you don't necessarily need or want to add an extra element to the DOM to accomplish a specific task. They can be used to bold the first line or letter (::first-line and ::first-letter respectively) of a paragraph, or add visual-only information (like with ::before and ::after).

Considerations

It's worth noting here that information placed in the content property may not be accessible to assistive technologies and likely will not get translated into other languages, since that information does not exist in the document tree. We'll discuss this further in a dedicated blog post.

Also since the double-colon (::) selector is new to CSS3, it's not supported by older browsers, namely older versions of Internet Explorer (IE8 and below). You could certainly use the single-colon (:) selector for both pseudo-classes and pseudo-elements for backward compatibility. As always, make sure you're considering where your site or application will be used before making the decision to use newer syntax.

📣 I intend to write a dedicated blog post for the ::before and ::after pseudo-elements. Are there any other pseudo-classes or pseudo-elements you'd like to learn more about? Let me know!

Title image from Undraw

What are you reading right now?

Kayla Sween — Mon, 21 Oct 2019 03:53:42 +0000

I'm currently reading Form Design Patterns by Adam Silver.

What are you reading?

Title illustration from unDraw.

What's the most fun part of your job?

Kayla Sween — Wed, 09 Oct 2019 19:07:45 +0000

Lately, I've had a ton of fun doing the UI design for a new application we're building at work. I get to do some outreach at my job, which I also really enjoy.

What's the most fun part of your job?

Title illustration from unDraw.

When should you ask for help?

Kayla Sween — Fri, 04 Oct 2019 00:55:42 +0000

One of the biggest challenges I've seen for new developers is knowing when to ask for help. There are two ends of the spectrum: asking for help without first looking for an answer and working for days or weeks on one problem without asking for help. So... when is the best time to ask for help? I'll go over a few steps I like to take before asking someone to help.

1. Read the documentation.

Sometimes a framework's or library's documentation is really all you need to solve a problem.

Many open source projects will have at least some documentation in their Readme on their GitHub page. Other projects will have a Storybook or other example code in or linked from their repos.

The documentation didn't have what I needed or sucks, what do I do next?

2. Google the problem.

Unless you're on the absolute bleeding edge of tech and have an issue, someone has probably encountered the problem you're having before. This one can sometimes replace "Read the documentation" since googling will sometimes take you to the docs.

3. Try out some solutions.

You probably found something that may be useful in your research. Don't be afraid to try those out! Maybe you'll stumble across the solution on your own and learn something in the process.

So I found some stuff, but nothing is exactly what I need...

4. Ask for help.

It's important to not spend too long in the process between the first three steps. How long each of those steps take is dependent on the problem. However, if you're stuck or notice yourself circling back to the same incorrect solutions, ask someone to help! They may have run into that problem before, or at least run into a similar problem, and have some insight on how to fix it.

Don't be afraid to ask for help if you need it.

5. Write down how you solved this problem. (Optional, but recommended)

When you solve the problem, write out a little blurb or a blog post about your problem and how you fixed it. This way, you'll be able to help your future self if you encounter that problem again or more easily help someone else that runs into that problem.

📣 When do you decide it's the right time to ask for help? Do you have any key indicators that you're stuck? 📣

Title illustration from unDraw.

Document Structure Roles: Table Roles (Introduction to WAI-ARIA Part 3)

Kayla Sween — Fri, 27 Sep 2019 02:43:59 +0000

In the first section of this series, I'll be talking about roles. Today's article is about ARIA's table roles. If you missed my Landmark Roles post, go check it out!

Document structure roles add context to structural page content that is not interactive. Some of these roles are redundant if you use semantic HTML to write your markup. Document structure roles differ from landmark roles in that they describe smaller areas that organize content rather than the large sections landmark roles indicate.

Table Roles

The roles for tables all have corresponding semantic HTML elements, which are preferable to using the following roles on more generic elements. Remember, always use semantic HTML when possible! As a side note, tables are for displaying data in a tabular manner (rows and columns). Please don't use tables as a way to lay out your page. Learning to use CSS grid will benefit you and your users much more!

`role="table"`

The table role indicates that the data is contained within a non-interactive table structure. That is to say, it organizes data into columns and rows. An element with the table role must contain elements with the row role. The <table> element has an implicit role="table" attribute.

`role="rowgroup"`

A rowgroup role denotes a group of rows within a table. This corresponds with the <thead> (or table head), <tbody> (or table body), and <tfoot> (or table footer) elements. An element with the rowgroup role must be contained within an element with the table or grid role. (We'll discuss the grid role in the widgets section of this series.)

`role="row"`

A row role denotes a row within a table. This directly corresponds with the <tr> (or table row) element. Elements with the row role must be contained by an element with the table, grid, treegrid, or rowgroup role.

`role="columnheader"`

The columnheader role denotes the element's contents as the header for a column of data. The <th> (or table header) element has an implicit role of columnheader. An element with the columnheader role must be a descendant of an element with the row role.

`role="rowheader"`

The rowheader role establishes the relationship between that cell and all the cells within the same row. The <th> (or table header) element also denotes an element with the implicit role of rowheader. An element with the rowheader role must be contained within an element with the row role.

`role="cell"`

The cell role denotes the element's contents as data in a table cell. The <td> (or table data) element has an implicit role of cell. An element with the row role must belong to an element with the row role.

<table>                       <!--role="table"-->
  <thead>                     <!--role="rowgroup"-->
    <tr>                      <!--role="row"-->
      <th>Pet Name</th>       <!--role="columnheader"-->
      <th>Type of Animal</th>
      <th>Age</th>
      <th>Hobbies</th>
    </tr>
  </thead>
  <tbody>                     <!--role="rowgroup"-->
    <tr>                      <!--role="row"-->
      <th>Captain</th>        <!--role="rowheader"-->
      <td>Dog</td>            <!--role="cell"-->
      <td>7</td>
      <td>Sleeping</td>
    </tr>
    <tr>
      <th>Piper</th>
      <td>Dog</td>
      <td>2</td>
      <td>Chasing bugs</td>
    </tr>
    <tr>
      <th>Skeletor Beletor</th>
      <td>Cat</td>
      <td>3</td>
      <td>Skulking around</td>
    </tr>
  </tbody>
</table>

Let's wrap up this week's lesson!

As far as tables go, as long as you're using semantic HTML, you don't really need to add these ARIA roles. However, learning about them can give you an appreciation for how much work semantic HTML does for you.

Next week, we'll continue learning about document structure roles!

Landmark Roles (Introduction to WAI-ARIA Part 2)

Kayla Sween — Fri, 20 Sep 2019 00:21:53 +0000

In the first section of this series, I'll be talking about roles. Today's article is about ARIA's landmark roles.

Landmark roles describe large areas of content to make it easier for assistive technologies (ATs) to skip over or navigate between areas of the page.

Browsers are pretty smart. Sometimes they know what you mean when you use semantic markup. I'll point out which of these roles are implicitly assigned to which semantic HTML elements. When using these elements, it's typically considered redundant to also use the corresponding ARIA roles. However, it won't hurt to use them.

`role="application"`

The application role declares the section of the page as an application...seems obvious enough. Typically, pages are declared as a web document by default. This role disables typical navigation controls for ATs because the application may need some of those navigational controls for different functions. For example, if the application is a game, the application area may need the up and down arrow keys to move an in-game object. For this reason, its use is strongly discouraged.

`role="banner"`

The banner role denotes site-wide information. This is typically where the company name and logo would go. It may also contain a search bar for the site. The <header> element has an implicit role of banner. The <header> tag or less semantic tags with the role="banner" attribute (such as <div role="banner">, which is not recommended) should be a direct child of the <body> element.

`role="complementary"`

The complementary role denotes secondary information. This information should complement the main focus of the page, but be able to be understood on its own. The <aside> element has an implicit role of complementary. (Screen readers mostly support aside without explicit roles.) If this blog post were its own page, the suggested reading links at the bottom would be a good candidate for the <aside> element or other element with the complementary role.

`role="contentinfo"`

The contentinfo role primarily applies to the footer of the website. It contains information about the document such as privacy and copyright information. It originally was intended to denote page specific information but seems to have shifted to covering all information in the footer of the page. The <footer> element has an implicit role of contentinfo. It is important to note that some screenreader/browser combinations do not expose footers as a landmark. I recommend checking out Scott O'Hara's article, "HTML5 Landmarks Exposed."

`role="form"`

The <form> element has an implicit role of form when also using the aria-label or aria-labelledby attributes to label the form, as shown in the code sample below. It is important to note that some screenreader/browser combinations do not expose forms as a landmark even with aria-label or aria-labelledby. To combat this, you can add a role="form" attribute to your <form> element. Again, I recommend Scott O'Hara's article, "HTML5 Landmarks Exposed."

<h1 id="heading">Name Collection Form</h1>
<form role="form" aria-labelledby="#heading">
  <label for="name">Name</label>
  <input type="text" id="name" />
  <button type="submit">Submit</button>
</form>

`role="main"`

The main content of the page. There should only be one main section per page, which can be denoted by the <main> element. The <main> element has an implicit role of main.

Denoting the main section of your page, paired with a skip link, can help sighted keyboard users navigate to the content of the page faster.

<a href="#main">Skip to Main Content</a>
<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>
<main id="main">
  ...Content!...
</main>

`role="navigation"`

The <nav> element has an implicit role of navigation. If using more than one navigation per page, it is important to differentiate them with an aria-label attribute on the <nav> element. This includes any type of secondary navigation, breadcrumbs, and pagination.

<nav aria-label="Site Navigation">
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>
<nav aria-label="Page Navigation">
  <ul>
    <li>First Section</li>
    <li>Second Section</li>
  </ul>
</nav>

`role="region"`

The region role is typically used when there's not another landmark role the content will fit in. The <section> element has an implicit role of region. Use this one sparingly because you wouldn't want your AT user wading through a sea of meaningless <section>s or regions!

`role="search"`

The search role denotes the section that contains the search for the website or for the web document. This can be contained within the <header> element. There's no specific search element, so this role needs to be on a <form> element that surrounds the search.

<h1 id="searchHeading">Search</h1>
<form role="search" aria-labelledby="#searchHeading">
  <label for="search">Search</label>
  <input type="search" id="search" />
  <button type="submit">Search</button>
</form>

Here's a CodePen example of some of these landmark roles in action.

What is WAI-ARIA? (Introduction to WAI-ARIA Part 1)

Kayla Sween — Fri, 13 Sep 2019 02:53:09 +0000

WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich Internet Applications... What a mouthful! WAI-ARIA is a technical specification written by the World Wide Web Consortium (W3C) that specifies how to improve the accessibility of a website or web application with supplemental HTML attributes. It helps us add more context to UI elements that browsers and assistive technologies can use to assist the user in understanding the content of a site or application. Over the coming posts, we'll discuss WAI-ARIA a little more in depth.

A complement to semantic HTML

Semantic HTML is markup that provides context for its contents. For more information about semantic HTML, check out my post, "The Importance of Semantic HTML." WAI-ARIA is in no way meant to replace semantic HTML. On its own, semantic HTML and general good usability practices can offer a lot when it comes to accessibility. Sometimes, we can do more to provide users of assistive technologies with better context. This is where WAI-ARIA comes in. It helps fill in the gaps that may be left behind by semantic HTML.

Let me reiterate: WAI-ARIA is not a replacement for semantic HTML. It's also not a quick fix for poor usability or accessibility practices. You can't just put WAI-ARIA into an unusable application and expect it to be more usable... even if it's "WCAG compliant!" It's kind of like putting lipstick on a pig. I recommend reading the article, "Accessibility Lipstick on a Usability Pig," by Jared Smith.

In the spec

The WAI-ARIA specification talks about three main features: roles, states, and properties. Roles tell browsers and assistive technologies what the element is or what it does. States define the current status of an element and can change throughout the lifecycle of the app. Properties give extra meaning or semantics to UI elements. We'll go into more detail on each of these in this series.

I look forward to getting this series going! If there is a particular WAI-ARIA topic you'd like me to write about, please let me know in the comments!

Title illustration from unDraw.

The Soft Skills of Interviewing CHEAT SHEET EDITION

Kayla Sween — Fri, 06 Sep 2019 00:03:21 +0000

Based on a suggestion from Andrew Harpin, here's a cheat sheet version of The Soft Skills of Interviewing! 🎉

Andrew Harpin • Aug 11 '19

Excellent article, suggest after a week or so, collecting these suggestions and those from the comments into a cheat sheet.

If you haven't read The Soft Skills of Interviewing, go check it out!

Article No Longer Available

Do your research

Check out company's social media
Look at Glassdoor reviews, but look for trends not individual opinions
Think of questions to ask during the interview based on your research

Relax, Be Kind, Be yourself

Meditate before going to an interview
Don't pretend to be someone you're not
Show your nerves a bit; you're a person, not an act²
Interviews are a good place to find out if the company will be a good fit for you!
Be excited and interested!¹

Interview your Interviewer

Choose questions to ask your interviewer that will help you determine if the company, manager, and group will be a good fit for you. Here are some examples:
- What do you expect me to accomplish in the first 90 days?
- What does a typical day in this position look like?
- Do you have any reservations about hiring me for this position at this point? If so, what are they?
- What could I learn now that would best prepare me to get started right away if I were hired?²
- What do you like most and you dislike most about what you do?¹

ALWAYS send a thank-you note!

Send a thank-you email within 24 hours of your interview
Reference something you talked about in your interview to make it more personal³

I hope this helps! If anyone has any additional suggestions, leave them in the comments! I'll check back periodically and add them to this cheat sheet.

Gergely Orosz • Aug 9 '19 • Edited

Very nice post, thanks for sharing! All of this is great advice.

Interview Your Interviewer

As a long-time hiring manager, this is such a good tip! Not only do you get to learn more about the interviewer and the job, but you also get to stand out from the crowd. I would say less than a quarter of all candidates do this. This who do, I can tell are curious, focused and it makes for a much more interesting interview for both of us.

A good question that I very rarely get asked, but would recommend others to do is ”what is the thing you like the best and you dislike the most about what you do?”. You’ll be surprised at the type of honest answers you get.

One more tip I have is be excited/interested during this session. After understanding more about the company, position and team, reflect on what things sound exciting and make you especially interested. Again, from experience, many candidates focus purely on the “dry” questions and try to keep emotions in check, suppressing even the positive ones.

Share when you’re excited or pleasantly surprised! The hiring manager is looking for people who complement the team well and positive/curious/excited people always do.

Jason C. McDonald • Aug 9 '19

Fantastic! As a hiring manager myself (among other things), I recommend all of the above.

I'd also add, don't be afraid if your nerves show a bit. It just shows the interviewer you're a real person, not an act. (In fact, half my job is to get you off-script anyway; I've learned that if the person I'm interviewing displays absolute, unyielding confidence, they invariably have an ego the size of Alaska.)

By the way, another question I like asking when I'm the one being interviewed is:

What could I learn now that would best prepare me to get started right away if I were hired?

Not only does that usually leave a good impression, but it also gives me some valuable information about what I'll need to know to do the job.

E.J. Mason • Aug 15 '19

Thank you for your thank-you-note tip! I always tell my students the same, and that their note should include specific references to topics discussed in the interview. People will sense the personal touch and feel more engaged. :)

Forem: Kayla Sween

4 Strategies for Picking a Conference Talk Topic

You could talk about something you're comfortable with.

Or you could talk about something completely new!

You could talk about something you're passionate about.

Talk about your experiences.

I wrote a crawler for the first time.

The Crawler

Getting it to run regularly

Senior-ish developers get intimidated too.

How to Fix Font Awesome Icons Flashing Wrong Size in Gatsby

Why it happens

How to fix it

How to Finish a Side Project

Don't start a new side project if you know you'll be busy.

Know what you want before you start.

Set a deadline.

Tell people about it.

Or if deadlines and peer-pressure are too overwhelming, just don't!

Start by making it work, then gradually make it better.

Say you won't start another project until you finish this one... and mean it!

Take breaks. Don't let a side project burn you out.

Don't feel obligated to always be working on a side project.

CSS Pseudo-classes and Pseudo-elements

CSS3 brought the distinction between pseudo-classes and pseudo-elements with the double-colon (::) syntax to denote the latter. Let's go over what pseudo-classes and pseudo-elements are and what they are used for!

What is a pseudo-class?

What is a pseudo-element?

Considerations

What are you reading right now?

What's the most fun part of your job?

When should you ask for help?

1. Read the documentation.

2. Google the problem.

3. Try out some solutions.

4. Ask for help.

5. Write down how you solved this problem. (Optional, but recommended)

📣 When do you decide it's the right time to ask for help? Do you have any key indicators that you're stuck? 📣

Document Structure Roles: Table Roles (Introduction to WAI-ARIA Part 3)

In the first section of this series, I'll be talking about roles. Today's article is about ARIA's table roles. If you missed my Landmark Roles post, go check it out!

Table Roles

role="table"

role="rowgroup"

role="row"

role="columnheader"

role="rowheader"

role="cell"

Let's wrap up this week's lesson!

Landmark Roles (Introduction to WAI-ARIA Part 2)

In the first section of this series, I'll be talking about roles. Today's article is about ARIA's landmark roles.

role="application"

role="banner"

role="complementary"

role="contentinfo"

role="form"

role="main"

role="navigation"

role="region"

role="search"

Suggested reading about landmark roles

Next week, we'll talk about document structure roles! Please feel free to leave any questions you may have about landmark roles in the comments!

What is WAI-ARIA? (Introduction to WAI-ARIA Part 1)

A complement to semantic HTML

In the spec

I look forward to getting this series going! If there is a particular WAI-ARIA topic you'd like me to write about, please let me know in the comments!

The Soft Skills of Interviewing CHEAT SHEET EDITION

Article No Longer Available

Do your research

Relax, Be Kind, Be yourself

Interview your Interviewer

ALWAYS send a thank-you note!

I hope this helps! If anyone has any additional suggestions, leave them in the comments! I'll check back periodically and add them to this cheat sheet.

`role="table"`

`role="rowgroup"`

`role="row"`

`role="columnheader"`

`role="rowheader"`

`role="cell"`

`role="application"`

`role="banner"`

`role="complementary"`

`role="contentinfo"`

`role="form"`

`role="main"`

`role="navigation"`

`role="region"`

`role="search"`