Learn Safari, Stripe and Webstorm

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Create an eCommerce Store with Next.js and Stripe Checkout

screen-reader

Learn the basics of navigating through a web page using VoiceOver on MacOS in Safari.

Navigate a Webpage with VoiceOver in Safari

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

We can find issues with heading levels by utilizing our accessibility auditing tools.  The library react-axe, as well as the browser extension axe, will report any findings concerning heading levels.  The browser extension tota11y will annotate all heading levels on a page and show any in red that have issues.  Finally, we can check the Rotor in VoiceOver in Safari.  The Rotor should have a Headings menu and will list in order all of them that are found on the page.  If headings are missing or inappropriate this will help us find them as well.

Test for Heading Level Accessibility Issues

Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. Some elements do not already have some sort of labeling text being displayed visually, such as a `<button>` without descriptive text or an `<icon>` or part of a more complex widget.  Others may have some form of text label but it is not descriptive enough for those who cannot see it.  The addition of an `aria-label` attribute to the element will provide it with an accessible label so that when that element is focused by a screen reader, for instance, a label is read that better describes the element and what a user can expect from it.

Add Accessible Labels to Elements Whose Labels are Not Clear Enough

Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. Some elements do not already have some sort of labeling text being displayed visually, such as a `<button>` without descriptive text or an `<icon>` or part of a more complex widget.  Others may have some form of text label but it does not provide enough context to be useful enough for those that cannot see it.  The addition of an `aria-label` attribute to the element will provide it with an accessible label so that when that element is focused by a screen reader, for instance, a label is read provides better context for the element and what a user can expect from it.

Add Accessible Labels to Provide Elements with More Context

Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers.  When there are already one or more other elements that themselves can be used to provide labeling text to another element an `aria-labelledby` attribute can be added to that element.  

Some examples of appropriate use cases for using an `aria-labelledby` are:
* Combine multiple labels together
* Associate headings with regions
* Label for a widget

Add an Accessible Label to an Element from the Text of Other Elements

Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. Beyond adding accessible labels to elements and widgets we can also provide additional descriptions.  Similar to how an `aria-labelledby` attribute works, an `aria-describedby` attribute can link the text from another element or elements to be used as a description for the given element.  

Some example use cases for using an `aria-describedby` are:
* providing instructions
* providing important usage details

Add Accessible Descriptions to Elements

When dynamic changes occur to content on a page they are usually visually apparent to users who can see the page but may not be made apparent to users of assistive technologies. ARIA live regions provide a way to make those dynamic content changes able to be announced by assistive technologies.

## ARIA attributes
* `aria-live`: the priority with which updates are read
* `aria-atomic`: whether the screen reader should always present the live region as a whole, even if only part of the region changes
* `aria-relevant` - takes a list of what type of changes should be announced

## Resources
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
* https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live
* https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-atomic
* https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-relevant
* http://html.cita.illinois.edu/nav/form/aria/index.php?example=3

Define a Live Region to Ensure Dynamic Changes are Announced by Assistive Technologies

Payments infrastructure for the internet.

stripe

Stripe has a variety of solutions that makes it super powerful as a payment provider. We're taking advantage of their Stripe Checkout product because it allows us to get started with an online store without having to manually accept payments.

To do this though, Stripe Checkout relies on the browser to make API requests, which we have to configure to work for our website.

We will set our eCommerce site domain on Stripe's CLIENT-ONLY integration to set us up to add the checkout workflow for our site.

Configure a Stripe Checkout Domain for Client-Only Integration

Next.js is a minimalistic framework for server-rendered React applications.

With Stripe or many other services, their APIs rely on special keys that authenticate requests or allow that service to track usage for things like billing.

Some of these keys are able to be used publicly and some must be kept private, but ultimately we want to have a way to easily manage these keys and not hard-code them into our application, which is where environment variables come in.

We will find our Stripe public key that will be used locally as well as in production on Vercel. You'll learn how to set an environment variable in Next.js (hint, you need to prepend `NEXT_PUBLIC` to the variable name make it available in the client) as well as in production on Vercel.

Add a Stripe API Key as an Environment Variable in Next.js & Vercel

Now that we have an app and our products configure in Stripe, it's time to connect the two and give people a way to purchase our products.

Using Stripe's API, we can initiate a new instance of the Stripe Checkout flow with a simple click of a button.

We'll create an `initiateCheckout` function that handles this flow for us. After loading stripe through `@stripe/stripe-js` we'll `await` a `stripePromise` that will allow us to redirect to stripes checkout flow. You'll notice that we will need to pass in line items with the price id and quantity.

Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

Did you know every Mac comes with a fantastic screen reader built-in? Learn the basics for operating Voiceover with Safari, including common key commands, the web rotor, and the help menu. We'll also set up keyboard tabbing in Safari and OSX's System Preferences, two requirements for accessibility testing that occasionally trip up users. In a future lesson, we'll compare Voiceover to Windows screen readers, since they work quite differently.

#### Resources
- Apple Voiceover commands and gestures: https://www.apple.com/voiceover/info/guide/_1131.html
- WebAIM Voiceover Tutorial: http://webaim.org/articles/voiceover/

Using the Voiceover screen reader to test for accessibility

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gist.run to share a running version of your code

WebStorm - Sharing a Gist

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

WebStorm - Managing Imports

A quick tutorial covering installing Karma and running tests from the command line and Webstorm.

Introduction to Karma

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

In this lesson John shows some tricks for speeding up your test suite. He digs into some handy features of WebStorm, including the *ddescriber* plugin, as well as some alternative methods for Jasmine for selectively running your tests.

Speed Testing with WebStorm and Jasmine

In this lesson, we'll walk through installing a custom color scheme into our [WebStorm](https://www.jetbrains.com/webstorm/) IDE. Dayle Rees's [daylerees/colour-schemes](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the [Peacocks In Space](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) theme into an OS X [WebStorm 11 EAP](https://confluence.jetbrains.com/display/WI/WebStorm+EAP) installation. _Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the [JetBrain's family of editors](https://www.jetbrains.com/)._

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

Topics

Instructors

Content Type