What happened that made TypeScript viable for me and worth migrating paypal-scripts for.

I’ve been using TypeScript for ~1 week now. Migrating from Flow.

An overview of what I’ve accomplished in 2018 and a bit about my goals for 2019.

Whether you’ve had a great 2018 or not, I think it’s important to look back and reflect on your accomplishments for the year. You’ve probably done more than you think you have. In this newsletter, I’m going to share with you some of my professional (and unprofessional) accomplishments of which I’m particularly proud and give a few hints as to what I’m planning for 2019 (which is actually mostly a secret and surprise 😃).

A special week calls for a special email. I’ll be back with regular emails about JavaScript (and TypeScript) next week!

As developers, we have unique and special skills and capabilities. As a community we often complain and joke about the fact that Christmas time is the time for our family members to take advantage of our computer skills in various ways (updating their browsers/OS/fixing printers/etc. etc. etc). At this special time of the year, I’m sending you a short message to encourage you to not grumble when your loved ones ask for your help. In fact, I would like to encourage you to do something special this week to :

React’s upcoming useState hook relies on array destructuring, let’s dive in and see how that feature works.

How can we prepare our tests for React’s new hooks feature?

One of the most common questions I hear about the upcoming React Hooks feature is regarding testing. And I can understand the concern when your tests look like this:

With the cool new stuff coming to React (Hooks/Suspense), what’s going to happen to the context api?

Earlier this year, the React team introduced the first official context API. I blogged about that new API and people got sufficiently and reasonably hyped.

What am I going to do with all these render props components now that react hooks solve the code reuse problem better than render props ever did?

About a year ago, I published “How to give rendering control to users with prop getters”. In that post, I show the entire implementation (at the time) of which I actually built for the sole purpose of teaching some of the patterns that I used in . It’s a much smaller and simpler component that implements many of the same patterns as downshift so it served as a great way to teach the prop getters pattern.

What does gratitude have to do with software development?

This week in the United States we celebrate Thanksgiving Day. In the US, the celebration was started by Pilgrims who came to America in the 1620s on . They had a pretty rough time getting their settlement started and had help from the Native Americans. Together they celebrated and gave thanks to God for a good harvest with a feast and that yearly tradition became the Thanksgiving holiday we celebrate in the US today.

The simple rules for when to use each.

> Note: If the words “React Hooks” doesn’t ring any bells for you, then stop for a moment and go here to read/watch about them.

Testing implementation details is a recipe for disaster. Why is that? And what does it even mean?

> NOTICE: If you missed the 40% off early bird sale on TestingJavaScript.com that’s a real bummer, but there’s a 20% off sale going on RIGHT NOW! AND > > Oh, also, I’m back to my regular weekly emails. Thanks for sticking with me through the launch sale :)

Hey there,

The number one question I get asked about TestingJavaScript.com: I’m seeing an outdated version of the site! I don’t see a “buy” button anywhere!!!

The answer to this is simple and slightly embarrassing… Workbox (a library that Gatsby’s offline plugin used) had a bug and your browser has it. We fixed the problem on the site, but there’s no way for us to force your browser to update due to this bug. Try clearing the site data in your browser settings or use another browser.

Hello!

I’m sorry if you’ve already purchased the course. We’re still working on making it so I don’t send these to people who have already purchased the course. If you want, you can unsubscribe for the next two days, then re-subscribe later…

You should know that I don’t normally send marketing emails every single day of the week. If you’ve been subscribed for a while you know that normally you’ll get one email every week full of really awesome insights about testing, JavaScript, tools, and more. I just know that if I’m not this persistent, people will complain the day after the sale that they somehow missed it. It’s happened before and I would hate for that to happen to any of you (or your friends 😉).

To give you a tiny bit of a consolation prize for you:

Hi friends 👋,

I can’t believe how positive the response from the corgi email was yesterday 😂 So I’ll just stick another cute gif in here for good measure:

Hi there,

In the world of web development, time moves really fast. It’s almost like dog years. It’s so easy to feel like you’re falling behind, or just running in circles trying to keep up with the latest developments in development.

A common mistakes people make when writing E2E tests that lead to slow tests

> NOTE: TestingJavaScript.com is still in early bird stage, but it wont be 40% off forever! Grab it now! Scroll down to the bottom for a FAQ about the course.

…yep, you read that right. Most of the course actually has nothing to do with React specifically.

I’m so excited about the response to my new course! I knew the developer community needed help with testing the right way, but… wow. I’m floored. 🙏

TODAY IS THE DAY AND I AM REALLY EXCITED CAN YOU TELL!?

Some common myths around testing and what the reality is…

Today is my birthday!!!

What are you doing when you mock something, and when is it worth the cost?

> The more your tests resemble the way your software is used, the more confidence they can give you. — me

That time I went too far with Test Driven Development and forgot a very important step

We all have stories where automated tests could’ve saved us from disaster, but I want to tell you a story of a time when I went overboard with a certain testing practice and it went really badly for me…

This was a few years ago. I was working on and I had just discovered React’s PropTypes feature. I thought it was the coolest thing since sliced bread. lol, I just looked it up and on the React repo was asking if we could add an objectWith PropType validator. I wrote the whole thing including tests and put that in the issue. Sophie Alpert responded with:

Some common struggles people have with testing, and things you can do to improve.

The argument is long ended: You should be testing your mission-critical code.

How to get from aimlessly testing or not testing at all to really understanding how and what to test.

In the next few weeks, you’re going to get bonus emails from me as I prepare to launch the biggest undertaking I’ve ever taken. You’ll love it. (Trust me, I’ve run the tests. 😉)

Many of you have messaged me, confused about where to get started with testing. Just like everything else in software, we work hard to build abstractions to make our jobs easier. But that amount of abstraction evolves over time, until the only ones who understand it are the ones who built the abstraction in the first place. Everyone else is left with taking the terms, APIs, and tools at face value and struggling to make things work.

How you can use a few simple static code analysis tools to avoid common programming bugs.

You’ve probably heard of ESLint, Prettier, and Flow/TypeScript. These are static code analysis tools that are wildly popular in the JavaScript ecosystem. I consider them all testing tools. Let’s take a look at each:

Why I care about testing

Have you read the book “Start With Why”? If you haven’t, I recommend it. At least watch . The premise of the idea is that “People won’t truly buy into a product, service, movement, or idea until they understand the WHY behind it.” This concept hit home with me when I watched that talk and then read the book a few years ago, and it’s shaped the way I communicate with you in my blog posts, talks, workshops, and courses.

Using React function components to render your website’s skeleton index.html

> NOTE: I’ve been teasing about something big that I have coming. I’m totally not joking. I’m working on something really huge and y’all will be the first to know about it. Stay tuned. It’s weeks away and I think you’re going to love it.

People regularly ask me how I get so much done. Here’s my secret…

I get asked about this at least twice a week, so I thought I’d save myself some time by writing a blog post I can reference instead of answering the same question repeatedly (spoiler, this is one of my secrets).

To help give you context, here are some of the things I do on a fairly regular basis these days:

Some things you can do to gain a wider audience and get your stuff noticed

This last week I had three people complaining to me (in individual interactions) that they create cool things, but what they create is not noticed because they don’t have a following on Twitter or otherwise. In at least one of the cases there was a fair amount of bitterness. An attitude of: “If you create something it becomes popular by virtue of you being so popular. If I create something, it goes unnoticed even if it’s better than what you created.”

While this may be true, the attitude bothers me. I’d be classified in the “popular” crowed, so maybe that’s why it bothers me, but it also bothers me because it feels like or could also come from . I wasn’t born with a twitter following (though I was born into privilege which makes a non-trivial impact, and I’ll address that later). I worked for this by creating things and doing things to get noticed even before I had the following. This is true of most people with a wide reach. In today’s newsletter, I’d like to share with you some things that I’ve seen be an effective way to get your work noticed and widen your reach.

A simple trick to simplify your application and component state

This is a phrase I first heard from David Khourshid in his talk at React Rally 2017 : “Make impossible states impossible” (super great talk by the way, and is awesome, and David is too). Googling around it looks like it’s a pretty popular phrase in the community, though I’m not sure who said it first.

Some specific things you can do as a conference attendee

I spent the last week at React Rally in Salt Lake City. It was an awesome experience. It’s easily my favorite conference. I’ve been to at least two dozen unique conferences. Here are some of the reasons React Rally is my favorite:

Some stories and some advice from an international speaker and trainer

Why it’s awesome, what it is, how it works, and how to use mdx-deck.

> Before we get started today, I want you to know that if you’re going to React Rally or you’re in the Salt Lake City area, you should pick up one of the few remaining early bird tickets to my React Fundamentals Workshop!

Let’s learn how unpkg the service and the open source project can improve performance for your company’s apps.

FYI: Before I get into the newsletter today I just want to mention that I’ll be on a family vacation all week and I don’t think I’ll even have access (let alone the inclination) to the internet. 🤠

A few years ago, had an idea. He needed an easy way to make demos for his open source projects (specifically ) and realized that he already hosts all his projects somewhere: npm! So he could just setup a little node server that would act as a proxy to the files that are on npm. And here we are, almost 9 BILLION downloads per month later.

How to maximize the performance of loading polyfills for your application users.

In last week’s newsletter “What is a polyfill”, I talked about a situation I came across with a white screen on IE10 (the app crashed because we were missing polyfills). I explained a bit of the difference between a polyfill and a code transform. I explained a few options you have at your disposal to use new JavaScript features and still support older browsers. In the conclusion I said this:

A few weeks back I found a bug with IE where all the user saw was a blank white page. If you’ve been around for a while in the wonderful world of the client-side SPA, you’ll probably know what was wrong without thinking twice. That’s right. It was a JavaScript error before client-side rendering happened.

Considering it the bug only rears its head in Internet Explorer, my first guess is a problem with polyfills. Yep! That was it!

Uncaught TypeError: contacts.includes is not a function

Tests should help me be confident that my application is working and there are better ways to do that than shallow rendering.

Before we get into today’s newsletter I want to ask you to do a few things:

At what point does it make sense to break a single component into multiple components?

You may use it every day, but have you seen what happens after Babel transpiles it?

I think a critical part of understanding how to use React effectively is understanding JavaScript and JavaScript expressions. So I’m going to show you a few examples of JSX and it’s transpiled version to help give you an idea of how this all works. As soon as you can transpile JSX in your head, you can use the abstraction more powerfully.

Here’s our simplest example:

Why your tests should be completely isolated from one another and how to do that.

Read to the end, I’ve got some cool things in the “things not to miss” section.

Today I thought I’d take you through one of the examples from my es6 workshop.

Consider the following code:

What is “Fear Of Missing Out” and how to deal with this natural unhealthy tendency.

🚨 Announcements 🚨

Now featuring the latest React APIs (like context) and entirely new patterns (like state reducer props).

You’ve probably used components or elements that implement the control props pattern. For example:

> With babel-plugin-macros

🚨 DON’T MISS THE OPPORTUNITY TO WATCH 2 OF MY FRONTEND MASTERS COURSES ABSOLUTELY FREE FOR THE NEXT 3 DAYS 🚨 Learn more.

Hey friends! I thought you all might be interested in knowing that Frontend Masters has made two of my recent courses absolutely free for a limited time (one week)!

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

This last week I had someone criticize using React component state because:

there are no browser dev tools for inspecting [component state]

Maybe this person just forgot about the official React DevTools browser extension, maybe they didn't know about it. Whatever the case may be, it made me realize that some people probably don't know about the browser extension, so I thought I'd share it with you.

After considering it a bit, I decided that it would be easiest to share this with you all via a quick (8 minute) video demo of the extension so here you have it (the gif is a summary preview...)!

[POLL]: Do you know what I'm talking about when I refer to "the prop drilling problem" in #ReactJS? Yep Maybe Nope 🐓

This twitter poll I started is still running. Please answer it before continuing!

The goal of this post is to not only help you understand what prop drilling is (some also refer to it as "threading"), but also when it can be a problem and mechanisms you can use to side-step or avoid it.

What is prop drilling?

Does this look different? Whelp, I've graduated from the free tier of TinyLetter.com (limited to 5,000 subscribers) and moved to ButtonDown.email! A big thank you to my Patreons who make this possible!

Participating in open source has been awesome for me. It has made me and the stuff I make better. A common question that I get from folks is how to go about learning an open source codebase and understand other's code.

In my blog post "Open Source Stamina", I make an important observation:

You contribute best to something you use regularly.