egh-post-lesson-transcript.js

// Name: egh-post-lesson-transcript
// Author: Zac Jones

import "@johnlindquist/kit"

let baseUrl = "https://app.egghead.io/api/v1/enhanced_transcripts"

let lessonSlug = await arg({
    placeholder: "paste a lesson slug",
    setIgnoreBlur: true
})
// let transcript = await arg({
//     placeholder: "paste transcript",
//     setIgnoreBlur: true
// })

let transcript = `Hey, and welcome to my course on building a custom accessible audio player using React.

The point of this course is to learn a bit more about accessibility by architecting a custom feature.

The goal isn't to learn how to build an audio player per se, it's to learn how to use the built-in browser APIs with a framework like React and combine that knowledge with the best practice accessibility patterns to learn how to architect custom features.

A lot of developers understand the basics of accessibility, but oftentimes we are getting designs for features and we're clueless on how to start architecting them with accessibility in mind.

It's always a good idea to ask designers for accessibility annotations because everyone's responsible for accessibility.

But depending on the knowledge within your organization, it may be a good time for you to collaborate with your designers and architect something together based on your solid understanding of HTML and ARIA authoring practices.

My goal is for you to be able to look at any custom feature and think about common accessibility patterns that already exist.

We can use these as building blocks to make that feature accessible to everyone.
Not only will you be learning about accessibility through a project, but you will also be learning more about the HTML media element API.

We'll tap into this API that's built into the browser using React to help you create this custom feature.

You'll also be managing a great deal of state within this application.
So it's a great time to not only improve your accessibility skills, but also see how that pairs with React.

We won't be going over CSS in this course, but I chose elements that are customizable with CSS.

Frankly, CSS and design aren't my areas of expertise, but there are plenty of egghead courses that focus on CSS.

The skills you learn here will help you think creatively about how to make advanced features in your project more accessible and using React to make things more accessible and not less.`

await post(
    baseUrl,
    {
        markdown: transcript,
        title: lessonSlug
    },
    {
        headers: {
            Authorization: `Bearer ${await env("EGGHEAD_AUTH_TOKEN")}`
        },
    }
).then(r => console.log(r.status)).catch(e => console.log("POST ERROR", e))