Description

I ran DeepSource Static Code Analysis upon the Project, the results for which are available here.

The Static Code Analysis Tool found potential bugs and anti-patterns in the Code, that can be detrimental at a later point of time with respect to the Project. DeepSource helps you to automatically find and fix issues in your code during code reviews. This tool looks for anti-patterns, bug risks, performance problems, and raises issues.

Some of the notable issues are:

• Unused Expression found here
• Usage of unsafe target=’_blank’ here
• No unique title in <iframe> here
• Redeclared Variables here

There are plenty of other issues in relation to Bug Discovery and Anti-Patterns which you would be interested to take a look at.

Create the React State Management feature page.

Take the spirit of the State Management section on the react search page and apply it to this page. Don't try to “present a playlist.” Instead, help the learner explore and learn React State Management.

It's NOT about the interviews. It is about designing a path for the learner. We are building a world-class in-house high-quality mega-class on React State Management, and this is the entry point.

Resources need to be broken down by “essentials,” “get started,” etc. Provide structure for the learner. Almost like a wirecutter page, table of contents, and/or a glance map, but then also in the spirit of Value Paths. Clubs will be a massive well of research to make the resource more directly tied to real outcomes.

The theory is that having the world's best resource on React State Management will keep the lights on and make payroll.

We can leverage the design assets from the State Management Playlist.

A user who attempts to update their email to an email that already has a user associated with it -- or where there is some other error -- gets a 200 error response "Email address change request cannot be processed". No feedback is given to the user in the UI that the update failed.

The error should cause a message to be displayed to the user. They should probably be directed to support at that point.

see https://github.com/eggheadio/egghead-rails/issues/4343

This is a scoped section of the larger pitch presented here - #637

The primary CTA in our navbar should drive users to the core business goals of signing up for an account and becoming a member.

The navbar should only have one CTA, and it should be the most important action we want a user to take at any time on the site. This action is always going to be related to moving them from anonymous visitor -> paying member.

• Anonymous visitors should see "Get Started" which will take them to the sign up page (currently https://egghead.io/login although we need to change this to an onboarding flow in the future).
• Logged-in non-members should see "Become a Member"
• Logged-in members do not see a CTA in the navbar
• Lapsed members should see "Renew Membership"

We currently have the "own your online presence" button displayed in the navbar.
We will need to move this to a banner underneath the navbar (outlined in part 4 of the #637 discussion). That work is outside the scope of this pitch, but related.

I propose we remove the "own your online presence" campaign button for the moment, with the intention of replacing it with the banner as soon as this piece of work is done.

Logout CTA is seen, even when the user is not logged-in.

We're using the Tailwinds Typopgraphy plugin, which nicely styles our articles with readable typography: https://github.com/tailwindlabs/tailwindcss-typography

I've been experimenting with styling Tailwinds + MDX components on this 'Sales Safari in a Nutshell' article: https://github.com/eggheadio/egghead-next/blob/ma/sales-safari-article/src/pages/learn/30x500/sales-safari/index.mdx

At the moment, any Tailwinds classes applied to an MDX / React component are overridden by the Tailwinds typography plugin.

For example, a card component like this with an h3 header has a ton of top margin on it that I can't get rid of:

The prose CSS declarations override any we define in the original React component. This is the top-level declaration being applied:

@media (min-width: 768px)
.md\:prose-xl h3 {
    font-size: 1.5em;
    margin-top: 1.6em;
    margin-bottom: 0.6666667em;
    line-height: 1.3333333;

I'm trying to define the styles in this component: https://github.com/eggheadio/egghead-next/blob/0fc88b0612da95be02ed8dccd04b5b2121ab8fb8/src/components/mdx/HeaderCard.js#L3-L12

Adding m-0 to the component itself, or the h3 specifically doesn't remove the extra margins. The Tailwinds typography plugin still over rides both.

What I've tried

I want to create a "prose-reset" class we can pop onto text elements in MDX that we want to reset the margins and padding on. Then we can redeclare the margin and padding for each context.

I tried creating a specific class in the tailwinds config: https://github.com/eggheadio/egghead-next/blob/0fc88b0612da95be02ed8dccd04b5b2121ab8fb8/tailwind.config.js#L24-L32

I tried adding a specific class in the index.css: https://github.com/eggheadio/egghead-next/blob/0fc88b0612da95be02ed8dccd04b5b2121ab8fb8/src/styles/index.css#L37-L42

Neither worked so far.

@vojtaholik Any ideas on how to have the MDX components play nicely with Tailwinds typography?
Want to be able to have whatever tailwinds classes we define in an MDX component override the prose defaults.

Some instructors speak fast, they can be difficult to follow for non native english speakers.
It would be nice if your can add a multiplier to slow down audio speed between normal(too fast) and .5x(too slow) (e.g. .75x? .80x?) as in the current site.

getServerSideProps for auth needs to be shared across many components. Having it contained in a single place (a container or high order function) will solve that problem before it becomes an issue.

Here's some research we need to dive into (I haven't read/grokked this yet):
vercel/next.js#10925

Consider a “page first” approach to curating section where the title becomes clickable and provides an entry point to the main page—a great example of this the Digital Gardening feature and its page.

The Start Learning Here section can be broken up into its own feature section. Showcasing the most popular courses and beginner-friendly content.

NEW Features. We can also create new features. A "Learn to Build Accessible Web Applications" feature section would be interesting. Mix and match these resources or any other resource:

• Accessible Cross-Browser CSS Form Styling course
• Develop Accessible Web Apps with React (course)
• Designing for Inclusive User Experience (talk)
• Accessibility-flavored React Components make your Design System Delicious (talk)
• Championing a11y and Being Authentic with Lindsey Kopacz (podcast)

State Management Feature. The state management playlist can also have its own feature section, very similar to the React State Management section on the react Page, but a smaller version. Mini feature sections? Ideally, it should point to the State Management Page once we have a solid version of this page.

Tailwind Feature. If we consider Tailwind content important, we can create mini-feature sections showcasing the Masterclass and other Tailwind-related content that's not necessarily courses, such as articles and podcasts.

Staff Picks and Favorites. This section is not curated and does not center the content on the learner. I would consider replacing this section with a new Feature section. See the notion document containing "groupings" of possible features.

Deep Dive into AWS & Learn Something New. This section doesn't have a clear goal. It's mostly something that we left from our previous gardening efforts. We should consider breaking these two up into their own features or creating a new feature.

This will be a simple screen at /accounts/:slug that will contain details about an account for its owner to view.

The initial layout will use this screen example from TailwindUI:

On article https://next.egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223 , "Start watching" href leads to https://next.egghead.io/lessons/undefined

When querying for Stephanie Eckles on live, you get a 1 second flash of an error screen before going to her page. She is the only instructor that this happens to and it's the only instructor page that pulls data from Sanity.

Loom of the error screen flash: https://www.loom.com/share/0ba43294eeae4fd8bc18121d5ec33725

I've ran this on local and run into the error:

I'm working on getting the site updated for TypeScript: Tips and Tricks upgrade today when I first noticed this issue trying to pull data from Sanity for Kamran Ahmed's course. PR for that: #613

The button for turning captions on/off is not visible. Control works, just no initial UI. See below. Testing in latest Chrome.

This PR added redirects but it appears that it is being too aggressive and redirecting from existing pages to legacy pages on app.egghead.io. For example, navigating to https://next.egghead.io/courses/record-badass-screencasts-for-egghead-io through next.egghead.io (eg. from the search) does not redirect but pasting the link into the browser redirects.

The following instructor pages need curation. Pick 2-3 to curate:

• Kent C. Dodds
• Chris Biscardi
• Eve Porcello
• Tomasz Łakomy
• Hiroko Nishimura

The page for Stephanie Eckles is a good example of a curated instructor page. It showcases recent courses and projects. Note that we are not limited to just courses. We can also add any other resources that the instructor has created (articles, podcast episodes, talks, and partner products).

Hi guys! I have egghead subscription. I've watched about 2-3 lessons and after trying to play next one I got following error. Just wanted to let you know about this type of bug.

Implement the article page layout designed in Figma.

The design layout divides the article page into the main feature, secondary feature sidebar, and tertiary horizontal list.

Implementing pagination should be considered a nice-to-have at this stage IMO. That's definitely something to consider as we continue to publish more articles.

Case Studies need to be removed from the blog section, e.g. Matías Hernández: leveling up by sharing knowledge. They can be added onto their own route /case-studies following the same data modeling as the blog. Case studies from howtoegghead.io will also need to be imported.

Pending question: do need to update the design with the new card component?

Contents of the comments section under video won't change when switching episodes. Have to refresh the page to make the comments update.

We are getting a 500 error on all the article pages (e.g. Write A Plugin For Tailwind CSS). It looks like the recent PR #564 caused the issue.

Here's the build from #564 erroring out. And this is the previous build from #572 where it's running smoothly.

I was not able to reproduce the error in development, I even tried running a production mode and clearing the .next. Nothing.

Vojta got the following error in development:

On the homepage the search bar is in the navigation:

On the React page it has suddenly disappeared and jumped down into the page layout

It needs to be moved back to the navbar. See this: https://roamresearch.com/#/app/egghead/page/_mCVvC40I

Implement the talks page layout designed in Figma.

The design contains a feature section, a secondary section, and a tertiary section.

The focus should be on implementing the main layout for the talks page and holding off on implementing this specific pagination design. Modifying the search functionality is definitely a rabbit hole.

I'd prefer the video to either pause with the full last frame showing, or give an extra 3 seconds at the end of the video to allow manual pausing, vs the current covering of the video at end:

When programming along with the video, sometimes I like to type from the video player manually rather than just copy/paste from transcript or GitHub repo. But when the video ends, I am forced to replay & scrub the timeline indicator to the end paused to see the last few frames again. This video is a perfect example; we have only 4 seconds to see the results until the 'play next video' overlay covers it.

Thanks for all your great work!

https://twitter.com/vilvaathibanpb/status/1340396710699266048

A user with a previously canceled membership encounters a "false positive", is still charged, and doesn't have their subscription updated appropriately.

I'm noticing in my dev environment that if I quickly click between links making the graphql calls, sometimes Next.js will hang. I don't know what the issue is, but will investigate.

In my experience, it's better to use the @testing-library/cypress if you're using the @testing-library/react and @testing-library/dom. It's easier to understand and removes a lot of boilerplate.

What do you think?

In the next.egghead.io the player does not update when selecting the next lesson. It plays the previous lesson.

Seems to work fine on the main branch, but not in the version on your site.

And the play next

Doesn't advance to the next lesson

The following topic pages need curation:

• Node.js
• Angular

At a minimum requirement, each page needs to contain Beginner, Intermediate, Advanced blocks. The data needs to be sourced using Sanity.

@lsminter and I both wanted to get our hands dirty with egghead-next, so we started with Cypress. I find tests the best way for me to get familiar with a codebase. Once we got past the new bug in Cypress by reverting Cypress to v4.12.1, we learned how to write a test and added one to spec.js that asserts a minimum number of menu list items (just as a learning exercise, I'm not sure this is a useful test).

dm/learning-cypress diff

it('homepage contains nav', () => {
  cy.visit('/')
  cy.get('nav > ul > li').should(($li) => {
    // currently [Topics] [Search]
    expect($li).length.to.be.at.least(2)
  })
})

Because there are not a lot of Cypress tests already (3), there isn't a great way to know how to organize tests, or what areas of the UI would most benefit from tests (besides "all of them"). The purpose of this issue is to discuss what we would like to do IRT both of those topics. I've historically found frontend test methodology to be a contentious topic and would like to defer to the more senior devs here.

I've written tests in Rspec, Cabybara, and Jasmine, but never for a component-based application, so I'm also interested in anyone's go-to docs/articles for how to do this.

Cypress version revert in package.json required for tests to run:

- "cypress": "^5.1.0",
+ "cypress": "^4.12.1",

...did not commit this change, obvs

https://next.egghead.io/playlists/mdx-conf-3fc2

Need to investigate what's missing here. Summary vs description is my gues

RuntimeError: Failed to implement GenericResource.description, tried: - 
`Types::Resources::GenericResource#description`, which did not exist - 
`Lesson#description`, which did not exist - Looking up hash key `:description` 
or `"description"` on `Demystifying MDX`, but it wasn't a Hash To implement 
this field, define one of the methods above (and check for typos)

{
  "query" => "\n query getPlaylist($slug: String!) {\n playlist(slug: $slug)
 {\n slug\n title\n description\n image_thumb_url\n square_cover_480_url\n 
average_rating_out_of_5\n rating_count\n watched_count\n path\n primary_tag {\n 
name\n image_url\n slug\n }\n items {\n ... on 
Course {\n slug\n title\n summary\n description\n path\n square_cover_url\n type\n }\n ... 
on Playlist {\n slug\n title\n description\n path\n square_cover_url\n type\n url\n lessons 
{\n title\n path\n slug\n icon_url\n }\n }\n ... on Lesson {\n slug\n title\n description\n 
path\n http_url\n icon_url\n type\n }\n ... on File {\n slug\n title\n url\n description\n 
square_cover_480_url\n square_cover_url\n type\n }\n ... on Download {\n slug\n title\n url\n 
summary\n description\n square_cover_480_url\n square_cover_url\n type\n }\n ... 
on Url {\n title\n url\n description\n square_cover_480_url\n square_cover_url\n type\n }\n ... 
on GenericResource {\n title\n url\n description\n square_cover_480_url\n 
square_cover_url\n type\n }\n }\n instructor {\n id\n full_name\n slug\n avatar_url\n 
avatar_64_url\n bio_short\n twitter\n }\n owner 
{\n id\n full_name\n avatar_url\n }\n }\n }\n ",
  "variables" => {"slug" => "mdx-conf-3fc2"},
  "controller" => "graphql",
  "action" => "execute",
  "graphql" => {
    "query" => "\n query getPlaylist($slug: String!) {\n playlist(slug: $slug) {\n slug\n 
title\n description\n image_thumb_url\n square_cover_480_url\n average_rating_out_of_5\n
 rating_count\n watched_count\n path\n primary_tag {\n name\n image_url\n slug\n }\n
 items {\n ... on Course {\n slug\n title\n summary\n description\n path\n square_cover_url\n type\n 
}\n ... on Playlist {\n slug\n title\n description\n path\n square_cover_url\n type\n url\n lessons
 {\n title\n path\n slug\n icon_url\n }\n }\n ... on Lesson {\n slug\n title\n description\n path\n 
http_url\n icon_url\n type\n }\n ... on File {\n slug\n title\n url\n description\n
 square_cover_480_url\n square_cover_url\n type\n }\n ... on Download {\n slug\n title\n url\n 
summary\n description\n square_cover_480_url\n square_cover_url\n type\n }\n ... 
on Url {\n title\n url\n description\n square_cover_480_url\n square_cover_url\n type\n }\n ... 
on GenericResource {\n title\n url\n description\n square_cover_480_url\n 
square_cover_url\n type\n }\n }\n instructor {\n id\n full_name\n slug\n avatar_url\n avatar_64_url\n 
bio_short\n twitter\n }\n owner {\n id\n full_name\n avatar_url\n }\n }\n }\n ",
    "variables" => {"slug" => "mdx-conf-3fc2"}
  }
}

https://www.notion.so/egghead/Jared-Palmers-shows-John-and-Joel-Next-js-Auth-and-Search-Url-Title-Tricks-cc894a9383724ddd9e56bd38137e821e

Jared showed us some really interesting techniques for taking combinations of search queries and generating compelling search engine friendly titles from them.

One thing that he pointed out was that we'd want to do this early, get it right, and also version as we go along to properly forward/redirect URLs as the schema changes over time.

@joelhooks What do you think about the proposed changes in this marked up screenshot?

A couple questions:

1. Should the copy of the blue button be updated for this situation?
2. Does an email link work for the 'Contact Us' (that would be quickest) or do we want an in-app modal like we have for feedback?

Link – https://egghead.io/talks/javascript-master-the-javascript-interview

Probable CSS blame:

In code:

https://github.com/eggheadio/egghead-next/blob/main/src/pages/talks/%5Bslug%5D.tsx#L139

After commenting it's fixed for me, but probably used in other cases

Is it expected?

Implement the article page layout designed in Figma.

This layout needs further discussion. Still unsure how the feature or secondary podcast card looks like.

I've searched for one of my videos and clicked the link. I was referred to the old egghead website.

Link: https://next.egghead.io/s/javascript-profiling-a-nodejs-app-from-the-chrome-dev-tools

Steps I've taken:

1. Entered "yonatan kra" in the search bar
2. Looked around the results
3. Clicked the title of the wanted lesson
4. Redirected to egghead.io

These are confusing when in encountered in JSX and we should consider using verbose longform variable names that fully describe what it is/does.

https://github.com/eggheadio/egghead-next/blob/9536ccb34ba3a080f6c703c7fc9f440587b9499b/src/utils/breakpoints.ts#L13-L21

This longer form we are exporting are much easier to comprehend, so something similar for this purpose would be very appreciated.

The names should express what the value does.

Additionally this utility is prefixed with use and is not a React Hook. use* should only be applied to React Hooks.

For "custom hooks" this typically means the custom hook will call one of the built-in hooks like React.useState or React.useEffect and not simply provide a return value in the style of a React hook.

This utility could use some documentation as well.

Discussion welcome!

Jared strongly recommended axios and the "axiosMaker" workflow to save us from configuring headers with every request:

I'm pretty sure that's the same thing as the axios.create API:

https://github.com/axios/axios#creating-an-instance

Current egghead.io behavior:

• egghead.io/instructors/2 loads Kent's page
• Pagination doesn't change the url

Desired behavior:

• Pagination updates URL to instructors/1 so I can read the "1" from the URL to track the current page

https://github.com/eggheadio/egghead-next/blob/f691468877e4af81fec54d090288c835a4a461ee/src/components/pages/home/homepage-data.ts#L43-L60

51 is the offending line - it appears to be pointing to the CSS grid course.

Free annual subscription pls x

(thanks for the ace content!)

Not really sure if this bug is for this repository, but it's for Egghead.io new interface ;)

I was watching video when without any interaction i got this error.
I attach screenshot with console error.

Currently, /podcasts/[slug] pages are missing custom SEO data: title, description, etc.

You can find an example of the current status in this link.

When I open video player page (e.g. https://egghead.io/lessons/rust-rustlings-iterators2-introducing-iterators-by-manually-calling-next-and-using-iter) I see this autoplay button:

Expected behaviour:

• Autoplay button should be centered

Actual behaviour:

• It's on top left instead

In #699, @joelhooks suggested adding Honeybadger to egghead-next. This would allow us to do more fine-grained tracking of errors that occur during runtime.

Prerequisite:

• Set up a new Honeybadger project within the egghead honeybadger account.

Resources:

• Honeybadger for JavaScript
• React Integration Guide
• Error Reporting in Next.js with Honeybadger
• Honeybadger supports Server-side Rendering

Why not dereference all at once?
parent: {child0, child1, ...}

And avoid the two stages? Perhaps it’s a style issue?

https://github.com/eggheadio/egghead-next/blob/ff184c09e66a66f4b7a9ed0f7aae649962408dc5/src/layouts/index.tsx#L18

load data and present non-course related podcast episodes

Reported to support by a couple of users and reproduced by @dealingwith

Autoplay does not work on first video after turning autoplay on.

To reproduce:

• Go to any course with autoplay off
• Start watching the first lesson
• Turn autoplay on
• Observe: course does not autoplay
• Click 2nd lesson video
• Observe: autoplay works from this point forward

What if we implement typescript on all the tests? It would help new developers to know what to do and what to expect from it. It would remove typos on tests too (it really helps).

What do you think?

In the current interface, we can choose between "free" and "pro".
Sometimes, we'd like to run a "promo" - "free for a limited time" or something like that.
A use case I was thinking about is if a topic is hot, I'd setup the "hottest" video in a course as "free for a week" and promote it via social networks. After one week, the video is automatically set to "pro" again, but allowed for a week of promotion.

Some users with a paid memberships have "$0" shown as their subscription price in their account profile:

So far, I've only seen this happen with monthly subscriptions.

General Settings

The team owner can change the name of the team and add an avatar (avatar not implemented)

Team Management

This is a list of team members. They can change the status of a team member (status property not implemented yet) or delete/remove a team member.

Invite Team Members

This is a modal that allows them to manually enter a few email addresses or copy and paste an invite URL (invites not implemented)

Billing Overview

General overview of billing including list of past transactions that can be viewed as an invoice to be printed.

Manage Plan

Choose between monthly or annual billing. Cancel plan. Canceling should present confirmation.

Footer Link to Articles (https://egghead.io/learn) is a 404.