wayfair-archive/awesome-learning

Awesome Learning - Learn JavaScript and Front-End Fundamentals at your own pace

awesome-learning's Issues

Going back to page 1 when paginating courses returns to the home page

Describe the bug
If pagination is necessary for the lessons (https://wayfair.github.io/awesome-learning/courses), and a visitor tries to return to Page 1, it instead returns the visitor to the Awesome Learning home page.

To Reproduce
Steps to reproduce the behavior:

1. In ./config.js, change coursesPerPage to 6 (or some number lower than 7)
2. npm run develop
3. Go to /courses
4. At the bottom of the page, click to the next page in the pagination element
5. Try to go back to page 1

Expected behavior
Pagination will actually return to Page 1 of the list of courses.

It's possible this is an inherent flaw in how we are doing our pagination. I don't think we actually have pagination for anything yet, but it would be helpful to experiment with forcing pagination for non-course things (tags or categories) to see if the issue exists for those types of components too.

Create a course carousel component for the landing page

Is your feature request related to a problem? Please describe.
We list only four of our courses on our landing page, but users sould have some way of knowing all of our courses. If we include a carousel that cycles through cards of all our courses, users will be able to know what courses we have as soon as they land

Describe the solution you'd like
I think a stripe like this underneath the blue section on the landing page would be ideal

It should be powered by GraphQL and contain all of the courses we currently have on AL, and whenever anyone adds a new course, this component should also include that. The course cards in the carousel themselves should mimic the ones in the "hero" section of the landing page

Implementation Details
This carousel should be accessible and fully tested.

Fix GitHub icon, remove unused icons

Describe the bug
The GitHub icon is currently flipped (the tail is on the left side of the Octocat, it should be on the right side.)

To Reproduce

1. Go to https://wayfair.github.io/awesome-learning/
2. Look in the top-right of the browser

Expected behavior
The GitHub icon should display correctly

Additional context

At the same time that we fix this icon, let's also remove other icons too. We can delete the following icons:

• vkontakte
• telegram
• rss

You'll need to edit src/utils/get-icon.js and src/constants/icons.js to make this work.

Remove the "admin" folder from the static directory

Goal

This issue is to remove the admin folder and it's contents, which exists underneath the static directory.

This folder is a holdover from the fork of the gatsby starter and no longer serves any purpose. Its only contents are a config.yml that isn't used.

Investigate GitHub Actions

GitHub Actions can do a lot of the work of Travis, without needing to use a separate platform. It would be nice to use GitHub Actions in place of Travis, as it is integrated directly into the repo.

Remove `react-test-renderer` from dependencies

Problem

We have a small contingency of tests that use react-test-renderer and take snapshots of the entire output. This is bad practice and should be removed.

Acceptance Criteria

1. Remove all tests using react-test-renderer
2. Keep track of all removed tests
3. Add a list of removed test files to #21 as a comment
4. Remove the react-test-renderer from our dependencies list.

Add ability to return to your last lesson

Is your feature request related to a problem? Please describe.
Users navigating to our site should be able to quickly return to their last visited lesson if they visited one.

Describe the solution you'd like
If a user has visited a lesson and clicked either the pre-reads, exercise button, or interact with the quiz, we should pop a toast when they come back to awesome learning to return to their last location. Likely we should store some information in local session data.

Describe alternatives you've considered
We could not rely on engagement and only pop the toast if they have navigated to a lesson.

Should use the toast built in #82

Back to "course name" should not be hypethenated

Is your feature request related to a problem? Please describe.
When viewing an individual lesson, going back to a course represents the name of the course with hyphens (functions-and-scope instead of functions and scope)

Describe the solution you'd like
The link to return to the course, from the lesson, should not have hyphens in it.

Look in the src/components/Lesson/Lesson.js file to see where we currently create this link. See if we can get the non-hyphen version of the course with the GraphQL query in lesson-template.js

Add Readme documentation

Is your feature request related to a problem? Please describe.
Our readme is sparse. Future developers don't get enough information to get started developing from it as currently constituted.

Describe the solution you'd like
we could use more information in terms of the structure of the app, pro tips on developing in the repo, some links to relevant gatsby articles, that sort of thing.

Reduce need to import SCSS variables/mixins in every file

For our SCSS files, we have many cases where we need to import the variables and mixins files.

@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';

This makes SCSS files harder to iterate on for the following reasons:

1. We need to know where these two files are in relation to the current SCSS file
2. If the location of the current file changes, these two imports need to be changed
3. If the location of the variables or mixins file changes, every dependent SCSS file needs to be changed too

Ideally, these two import statements should be handled in one place only, so that engineers working on SCSS files can assume that these variables and mixins are always available to them (versus needing to be imported every time.)

Create helpful 404 page

Is your feature request related to a problem? Please describe.
As a visitor to the website, I get frustrated when I access a page that doesn't exist and don't get any useful information about what to do.

Describe the solution you'd like
A meaningful 404 page that has better design and content than our current solution. We would like to provide visitors with the following:

• A helpful message that they've hit a page that doesn't exist. Use the below text:

It looks like you've tried to access a page that doesn't exist. It's possible that what you were looking for may have moved to another location, or it wasn't here to begin with.

Browse our [course catalog] to preview what subjects Awesome Learning currently offers.

You can also browse individual lessons [by tag] to dive right into an individual lesson.

The text [in brackets] should link to the corresponding page.

Courses page: /courses

Tags page: /tags

Additional context
Our current 404 page can be found at src/templates/not-found-template.js (and a corresponding test at `src/templates/not-found-template.test.js). Make sure the snapshot test is updated (as this page is purely presentational. If this page becomes interactive, please add more comprehensive unit testing around features.)

Fix noisy tests

Describe the bug
We have multiple unit tests that, while not returning errors, are logging to our test suite after being run. This might confuse contributors who are seeing passing tests that return with errors/warnings.

https://travis-ci.org/wayfair/awesome-learning/builds/572909100

Expected behavior
Tests should return nothing or an error (and fail the test.)

Links
https://travis-ci.org/wayfair/awesome-learning/builds/572909100

GitHub Actions deploy runs out of memory

We are moving to GitHub Actions for our deploy framework, but the Gatsby deploy step runs out of memory. Some Internet research suggests this is due to the Netlify CMS package. Let's kill this, and other unused packages, just to rule out things we aren't using and decrease our overall platform size.

Course list should always be sorted alphabetically

Describe the bug
Our ordering of courses is arbitrary, and should be sorted alphabetically (ascending, A-Z).

To Reproduce

1. Go to https://wayfair.github.io/awesome-learning/courses/
2. Observe that the ordering of courses does not follow a meaningful pattern

Expected behavior
Courses should be sorted alphabetically to make it easier for visitors to find a course they are looking for

Create a shared "toast" component

Is your feature request related to a problem? Please describe.
We need an intuitive piece of UI to show user interaction results. Toast notifications are known UX patterns we could use for a few use cases. For example, when a user completes a pre-read quiz.

Describe the solution you'd like
Build a shared, tested component that can take on multiple states given a prop. It should have 4 possible states

It should also take text as children.

YouTube embeds on small devices create horizontal overflow

Describe the bug
On small devices, embedding any YouTube video forces the page to expand its horizontal width to be much larger than is necessary.

To Reproduce

1. Go to any course page on mobile (https://wayfair.github.io/awesome-learning/courses/Testing/testing-workshop/) or the How To page (https://wayfair.github.io/awesome-learning/howTo)
2. Go to the YouTube video

Expected behavior
The YouTube video should appear with the correct amount of width on mobile, not an arbitrarily large value.

Screenshots

Additional context
We currently have the width of the video derived from an attribute on the iframe itself. Ideally, the height and width should derive from SCSS (and controlled from a media query so that the width can change itself on mobile, and then be locked to a certain width on larger devices.) Keep the width that we have for large devices and tablets, but for mobile devices, constrain the width to be some percentage of the screen width.

It may be worthwhile to create a React component that consumes the YouTube video ID, and formats everything as necessary (versus leaving the details up to the engineer, these could be addressed with a React Component.)

Meaningful unit test coverage - Link

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Link.js found in src/components/Link/

Buttons on small devices do not contain all of their content

Describe the bug
Buttons on smaller devices do not contain all of their content if there is a lot of it.

To Reproduce

1. View the Awesome Learning site on mobile (or Inspect Element and emulate a mobile device)
2. Go to https://wayfair.github.io/awesome-learning/courses/Testing/
3. Scroll to the bottom of the page

Expected behavior
Buttons should contain all of their contents, rather than having text overflow from the bottom of the button vertically.

Screenshots

Additional context
When implementing this fix, make sure our existing buttons are not affected!

Generate PropTypes for all files

We currently do an inconsistent job of checking props using PropTypes. It would be great to have better PropTypes validations, to guard against component/query changes that result in unexpected behaior.

Reduce header font size on mobile

Describe the bug
Our header has a wayfair logo and Awesome Learning. On small mobile devices, the Awesome Learning text is very large.

To Reproduce
Steps to reproduce the behavior:

1. Visit the homepage on a small mobile device

** Expected Fix**
We would prefer the header text scales with the size of the device

Address bar URLs should not be case sensitive

Describe the bug
Some of our URLs in the address bar are case sensitive.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://wayfair.github.io/awesome-learning/courses/React-Hooks/intro-to-react-hooks
2. Change React-Hooks to react-hooks

Expected behavior
The page should still load the course for React Hooks.

Additional context
This probably has to do with GraphQL taking the browser query and matching it exactly. If this search could be made case-insensitively, it would probably solve the issue.

Add linting pre-commit hooks

Is your feature request related to a problem? Please describe.
Developers should have a seamless PR experience, and the repo should always be left formatted per our standards. Developers can currently push improperly formatted code to the repo.

Describe the solution you'd like
Add in something like husky to make sure developers know their code is in the proper state before it moves on to the next step.

Meaningful unit test coverage - trackCard

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for trackCard.js found in src/components/Landing/

Add Shared Component Documentation

Is your feature request related to a problem? Please describe.
New developers looking to contribute have no clear way to understand our shared components, (things like buttons, section titles, etc).

Describe the solution you'd like
Any form of component documentation would be a great start. You could use Styleguidist, Storybook, etc. Whatever you think is best.

Meaningful unit test coverage - Quiz

We have the Quiz component, which is one of our most interaction-heavy components. A well-defined unit test, using @testing-library/react, would benefit us to make sure the functionality of this component is guaranteed as improvements or changes to it could be made.

Meaningful unit test coverage - Lesson

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Lesson.js found in src/components/Lesson/

Mobile: Clicking in the navigation should dismiss it

Describe the bug
On mobile devices, we have a mobile navigation menu. Clicking within it navigates to a new page, but the navigation itself does not dismiss. It should go away once a new page is navigated to.

To Reproduce
Steps to reproduce the behavior:

1. Open Awesome Learning on mobile
2. Click on the navigation
3. Click on a page

Expected behavior
Navigation should disappear

Meaningful unit test coverage - Course page

The course page (https://wayfair.github.io/awesome-learning/courses/Promises/) contains all of our lessons within a specific course. A unit test to vet the following would be great!

• All individual lessons passed to it are displayed, in addition to the relevant content as queried by GraphQL
• All tags related to this lesson are displayed under the lesson content

Meaningful unit test coverage - Icon

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Icon.js found in src/components/Icon/

Move all shared components to a "shared components" folder

Is your feature request related to a problem? Please describe.
We should streamline this repo in terms of folder structure to make future development easier. In this case, not knowing which components are part of our "design library" could lead to replication and wheel re-invention.

Describe the solution you'd like
Create a "shared components" folder
Move all shared components under the shared folder.

Additional context
Shared components aren't necessarily easy to spot. The obvious ones like buttons and section titles are easy. For any component that is on the fence, please create an issue to make the component more general and move to the shared components folder.

Transform markdown formatting into HTML formatting

Is your feature request related to a problem? Please describe.
On our site, we write text in plain text, and we occasionally want to add formatting to some text to make it stand out. We've historically written this format using markdown, but it isn't getting meaningfully transformed into actual text formatting.

Describe the solution you'd like
Text formatting written in markdown should actually be formatted properly.

_this_ should become this

`this`

should become this

*this* should become this

Additional context
See below for how our formatting currently looks (on the courses page)

Broken pre-read links on lessons

Describe the bug
There are broken pre-read links in our lesson pages.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://wayfair.github.io/awesome-learning/courses/Testing/intro-to-unit-testing/
2. Click on "5 great reasons for running tests"
3. See 404

Expected behavior
These links should open new windows to the desired link.

Move the exercises repo to this repo

The way we originally set up our architecture was that the exercises would be in a separate code repo from the actual platform. This is a barrier to entry for new engineers, as they would need to contribute to two separate repositories. We should move everything from awesome-learning-exercises to be in this repo, then update lesson files accordingly.

Meaningful unit test coverage - Menu

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Menu.js found in src/components/Header/Menu/Menu.js

Meaningful unit test coverage - Landing

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Landing.js found in src/components/Landing/

Update browser color for mobile devices

Describe the bug
On mobile, Awesome Learning changes the color of the browser to orange. It should instead be changed to our primary color (#2b416a).

To Reproduce

1. Go to Awesome Learning on mobile (https://wayfair.github.io/awesome-learning/)

Expected behavior
The color of the browser should not be orange. You want to change the hex value of theme_color in ./gatsby-config.js

Screenshots

Meaningful unit test coverage - ContentSection

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for ContentSection.js found in src/components/ContentSection/

Meaningful unit test coverage - HowTo

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for HowTo.js found in src/components/HowTo/HowTo.js

Meaningful unit test coverage - Content

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Course.js found in src/components/Course/

Add Design Library for Shared Components

Is your feature request related to a problem? Please describe.
We currently have a number of general-purpose shared components, but no documentation on them. As more developers come into the fold, it would be helpful to have a library of these components and their expected usages.

Describe the solution you'd like
Add either styleguidist or storybook to this repo to document the general use components.

Meaningful unit test coverage - Layout

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Layout.js found in src/components/Layout/

Excessive space on some pages for small devices

Describe the bug
On small devices, there is an excessive amount of space between the last of the content and the actual end of the page.

To Reproduce

1. Go to any page on mobile (https://wayfair.github.io/awesome-learning/courses/Testing/testing-workshop/)
2. Scroll to the bottom of the page

Expected behavior
The end of the page should be much closer to the actual end of the page, rather than there being an excessive amount of space

Screenshots

Additional context
We want a small amount of space at the end of the page, but not as much as there is. When you create a PR to fix this issue, include a screenshot of what the new amount of space is.

Meaningful unit test coverage - Header

Problem

As part of issue #59, all snapshots tests where removed. We would now like to replace these snapshots with a more meaningful unit test.

Acceptance Criteria

Using @testing-library/react create a test for Header.js found in src/components/Header/

Interested in contributing to the Awesome Learning CodeSandbox exercises? Check out wayfair/awesome-learning-exercises!

This repo is only one part of the Awesome Learning platform. There's an entirely separate repo for managing the Awesome Learning CodeSandbox exercises. These exercises are where engineers work through tasks and problems that evaluate and prove their knowledge of the concepts learned throughout the individual lessons and courses.

If you are interested in contributing to Awesome Learning Exercises for Hacktoberfest, check out our Readme to get started!

Align Linting and Prettier configs

Describe the bug
Our ESLint and pretter settings are currenrly misaligned, leading to linting errors after running prettier.

To Reproduce

1. Format files with prettier
2. Note the eslint errors that arise

Expected behavior
These two configs should be aligned so that running prettier eliminates formatting issues instead of creating them.

Convert tests from Enzyme to React Testing Library

Describe the solution you'd like
Enzyme (and related code) is removed from dependencies and replaced with RTL

Additional context
Discussed during Awesome Learning standup

Clicking on the title of a lesson should navigate to it

Is your feature request related to a problem? Please describe.
As a visitor to the site, I get frustrated when clicking the title of a lesson does not navigate to it. I should not be constrained to only clicking the button below the title to navigate to a lesson.

Describe the solution you'd like
Clicking the title of a lesson should navigate to it, in addition to the existing behavior of "Click to learn [lesson title]"

Additional context
Go to https://wayfair.github.io/awesome-learning/courses/Data-Types/ and click any lesson title. It should go to the lesson page, but it currently does not.

Meaningful unit test coverage

We currently have some Jest unit tests, but not every unit testable file has them. If we can get more coverage on our unit tests, especially for components that are interaction heavy. The Quiz component is a good example of a component that could use unit tests (to guard against changing its intended behavior accidentally.)

See this directory for all files that should have unit tests.

The tags page replaces browser history, does not add to it

Describe the bug
Clicking a link on our tags page replaces the current browser location, instead of adding to browser history.

To Reproduce

1. Open a new browser tab (to make this bug more obvious)
2. Go to https://wayfair.github.io/awesome-learning/tags
3. Click on a link
4. Try to go back in the browser

Expected behavior
You should be brought back to the list of tags, not to the "new tab" page for your browser

Max-width CSS for the platform

Describe the bug
On large resolutions, Awesome Learning stretches to the width of the monitor. We should constrain the width of the page up to a certain point (960px? Open to suggestions)

Screenshots