skillrecordings / egghead-next Goto Github PK
View Code? Open in Web Editor NEWThe frontend for egghead.io.
Home Page: https://egghead.io
License: Other
The frontend for egghead.io.
Home Page: https://egghead.io
License: Other
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.
Current egghead.io behavior:
Desired behavior:
Implement the article page layout designed in Figma.
This layout needs further discussion. Still unsure how the feature or secondary podcast card looks like.
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:
@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).
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
These are confusing when in encountered in JSX and we should consider using verbose longform variable names that fully describe what it is/does.
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!
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:
@joelhooks What do you think about the proposed changes in this marked up screenshot?
A couple questions:
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:
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.
Link – https://egghead.io/talks/javascript-master-the-javascript-interview
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?
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
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 #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:
Resources:
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.
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:
Actual behaviour:
The team owner can change the name of the team and add an avatar (avatar not implemented)
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.
This is a modal that allows them to manually enter a few email addresses or copy and paste an invite URL (invites not implemented)
General overview of billing including list of past transactions that can be viewed as an invoice to be printed.
Choose between monthly or annual billing. Cancel plan. Canceling should present confirmation.
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.
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?
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?
Footer Link to Articles (https://egghead.io/learn) is a 404.
The following instructor pages need curation. Pick 2-3 to curate:
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).
load data and present non-course related podcast episodes
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.
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.
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:
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.
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.
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.
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
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.
Contents of the comments section under video won't change when switching episodes. Have to refresh the page to make the comments update.
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
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
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!
Currently, /podcasts/[slug]
pages are missing custom SEO data: title, description, etc.
You can find an example of the current status in this link.
Why not dereference all at once?
parent: {child0, child1, ...}
And avoid the two stages? Perhaps it’s a style issue?
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"}
}
}
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?
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:
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.
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 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:
<iframe>
hereThere are plenty of other issues in relation to Bug Discovery and Anti-Patterns which you would be interested to take a look at.
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!)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.