Conferences have been hard to come by this year, but I had the privilege of attending RenderATL September 13 - 15, 2021 and am excited to share the top 5 things I learned with you!

1. Interrupting Less Important Renders in React 18

Shruti Kapoor demoed the new startTransition API as part of her talk on "What's New in React 18?" This API keeps the rest of the UI responsive while carrying out an expensive re-render. This could be used to allow interrupting the rendering of a complex drawing or large table to keep the input elements, selectors, and sliders that control the settings responsive and up to date. This works by marking all the state updates inside startTransition as transitions. These transitions will be interrupted if new data comes along and the stale updates will be thrown out by React. They are still syncronous and unlike setTimeout(..., 0) they start immediately. Another bonus feature is a pending state available with useTransition so you can apply a loading state to the not yet updated content. I'm excited to use this with my next graph or large table! You can read more about it in this discussion.

2. Security implications for hrefs

Syneva Runyan shared a variety of ways to inject javascript into a page of a React application. One that I had not thought of before was the ability to use the javascript: protocol to inject scripts using the href prop.

For example, a user might be able to enter a link to their homepage. javascript:alert('hi') is a valid URL which would cause the user to receive a popup so purely validating that the link is a URL is not enough for security. Using a larger chunk of code, the attacker could tell the user their session had timed out and request the user's password.

Currently, you can mitigate this by validating the protocol as well as the url

const url = new URL(userInput);
const isHttp = ['http', 'https'].includes(url.protocol);

Note: This does currently trigger a warning in React, and a future version of React will block the javascript protocol in the href.

3. Accessibilty in Code and Content

Homer Gaines offered a wide assortment of ways to improve the accessibilty of your website. My favorite code takeway was making sure the hit area for links at buttons was at least 40px x 40px, which is about the size of a finger tip, so it's easier for people with less accuracy to tap the button. There a many ways someone could have a hard time hitting a small button accurately from a parent holding a fussy child while trying to order a pizza to someone with a broken arm using their non-dominate hand to long-term disabilities such as Parkinson's disease. When I am using a website, it's always frustrating to have to try multiple times to tap a button or, even worse, if I tap the wrong button because they are too small. Thus, I appreciate effort spent in this area as well.

The content itself is another area for accessibility. Many people have conditions like ADHD or Autism that make reading and concentrating harder. Other people are simply trying to multi-task. Keeping text small and building pages that interact as expected helps these people since it will not be necessary to spend a long time reading instructions or figuring out how to use the website.

4. Refactoring Your Way Up

Adrianna Valdivia encouraged developers to own the code base where they work. Participating in improving it through updating package versions and refactoring the code. Then, highlight the learnings and milestones from your improvements in your 1-on-1s with your manager. This responsibility helped her gain promotions in the company.

5. Techsgiving: Giving Back

If you want to give back but are worried it might take too much time, Genesis Bonds suggested setting up a Calendly link with a couple of time slots per week for mentoring. Then, if someone asks for help, give them the link so they can set up some time with you.

At Big Nerd Ranch, we give back with our internships and our apprentice program.

Culture

I also learned about Atlanta culture and Trap music throughout the conference and by talking to other attendees during the breaks. If you want to learn about React while expiriencing ATL and Trap music culture, check out RenderATL 2022.

# front-end

React Programming: The Big Nerd Ranch Guide

Top 5 Things I Learned at RenderATL