aspittel / learn-code-from-us Goto Github PK

It would be good to emphasise the title "Learn Code from Us" with the same pastel colours displayed in the categories for the content.

Add the ability to filter different people based on their technologies or the mediums that they use.

I would love for this to be as beginner-friendly as possible, so I wanted to add some React tutorials to the documentation.

Here's the one that I wrote, https://zen-of-programming.com/beginners-guide-react, but I would love other people to add their favorite free ones as well!

Just a small design thought: The nav bar as you scroll is transparent and becomes unreadable as you scroll.

As a side comment, it may be a bit too big for a fixed nav. It would cover up a decent amount of the screen as one scrolls. I prefer slightly shorter navs. You could also remove the fixed for the whole bar and maybe just leave the true "nav" sticky on the left-most side (similar to like this).

Just some thoughts 🙂

The profile images on the site are currently not optimized, and they could be!! 😄

We use Cloudinary to make this process super simple. There are other alternatives, but definitely worth serving the smallest/most optimized images possible. This includes serving webp versions to chrome users. Cloudinary makes this easy. But there are alternatives. Cloudinary is not the cheapest option at scale.

Context

I'm a content creator who falls in line with the Learn Code from Us submission guidelines, but I'm a bit of a weird case. The details don't matter for this GitHub issue. Here's what does:

1. I went to the submission form.
2. I had a hard time fitting my submission into the presented boxes.
3. I saw instructions to "contact us" if we didn't fit the existing form well.
4. But there wasn't a link to a contact form, or an email address, or anything like that.
5. OH NOES! USER CONFUSION!

I needed to click through to Ali's dev.to post, the one linked on the about page, and then skim that to find the GitHub repo. Honestly, I'm not sure I would have even known to do that if I hadn't gotten here from dev.to in the first place! I would have been stuck knowing I needed to contact y'all, but not knowing how to do so. That would mean a lost submission.

It would be really helpful if the UX around contacting the maintainers and/or getting started as a contributor could be made more obvious.

The dev.to badge is about to land in the FontAwesome set and I think it should be added as an option here, as many of these folks will have DEV profiles. 🙂

Clicking on the link to /about 3 times requires clicking back 3 times to get back to the home page. This effect does not happen with the link back to /.

Observed in: Firefox Nightly 64.0a1 (2018-10-18) (64-bit)

Add aria-label to the Font Awesome icons to make them more accessible. Here's a good link on how!

Add tests for the different components using Jest

Your issue may already be reported!
Please search on the issue track before creating one.

Expected Behavior

Open GitHub page of muses code js https://github.com/muses-code-js
Need change old GitHub link to the new one: https://github.com/muses-code-js

Current Behavior

Currently link goes to https://github.com/node-girls-australia which is not found.

Possible Solution

GitHub link should updated to new one: https://github.com/muses-code-js

Steps to Reproduce (for bugs)

1. Going to Muses code js website
2. New page will open to https://github.com/node-girls-australia
3. Error 404 not found will appear.

Context

GitHub repo doesn't exist anymore. Name was changed, so needed to google for GitHub repo.

Your Environment

• Version used:
• Any required dependencies and version
• Browser Name and version: Firefox 65.5
• Operating System and version (desktop or mobile): Debian buster 10
• Link to your project:

It would be nice to add a search description below the page/title link in the search results.

Add some CSS animations to make the interface a little classier

Expected Behavior

Ex: Muses Code JS card doesn't have a image, so by adding a blank profile image Like this one will make the website look more consistent.

Current Behavior

We've implemented awesome automated tests. It would be great to document how to run them, how to add new ones and to make sure that the tests are super clear.

• Code of Conduct
• Pull Request Template
• Issue Template
• Contributing Guide

Right now, it takes some manual work to add new people. I'm going to expedite this with a node script.

Move the React tutorials to their own file. I really like @GaProgMan's idea:

I wonder whether there should be a separate markdown file for tutorials. Perhaps something like:

# Tutorials

The following tutorials are separated by technology and might be useful for contributors who are new to the technology stacks which this project uses, and would like to learn more before contributing.

### React

#### Beginners/Intro to React

#### More advanced/Specific React Topics

### HTML & CSS

#### Similar Headers Here

### A.N.Other technology

Your issue may already be reported!
Please search on the issue track before creating one.

Expected Behavior

When clicking on the website link in Madison's profile, it should lead to her website at http://www.madisonkanna.com/.

Current Behavior

Currently, the link goes to https://learncodefrom.us/Madisonkanna.com.

Possible Solution

Link should be updated to go directly to http://www.madisonkanna.com/ when clicked.

Steps to Reproduce (for bugs)

1. Go to https://learncodefrom.us/ and click on website link for Madison
2. New page will open to https://learncodefrom.us/Madisonkanna.com

Context

In order to access her website, you must delete the learncodefrom.us/ portion of the URL and then will be taken to the site.

Your Environment

• Version used:
• Any required dependencies and version
• Browser Name and version: Google Chrome Version 69.0.3497.100
• Operating System and version (desktop or mobile): MacOS High Sierra Versions 10.13.6
• Link to your project:

I like StandardJS for JavaScript formatting -- would be great to standardize!

It would be awesome to double check all the naming on things to make sure it makes sense, and then add comments to each component describing what it does. Also, then maybe creating a component by component guide in Markdown.

Hi!

I see you're missing CI checks for this project. I would be interested in adding these especially since there are automated tests in #3 under progress. Basic code linting and test running would probably be enough.

Are you familiar with Travis CI or do you prefer some other service?

Additionally, I could add a Dockerfile to this project so those who have trouble with Node for whatever reason could contribute just as easily. What do you think?

EDIT: Tried to create some basic checks with Travis on my fork which passed. See here for results. ✌️

Your issue may already be reported!
Please search on the issue track before creating one.

Expected Behavior

Only one tooltip should be shown.

Current Behavior

Double tooltips, one behind the other on hover.

Possible Solution

Since adding the title to the icons for accessibility, hovering on the icons produces a double tooltip.

Context

Understandably we'd want the tooltip to show and be accessible. What we don't want is two of them.

Your Environment

Latest Chrome 70 on macOS 10.14.1 beta.

I am assigning this issue to myself. Seems a relatively easy fix.

I think the font for the logo is a little small right now -- I think it would look better if "Learn Code from Us" was a little bigger and the other text was a little smaller.

The Issue

👋 Hi there! I've noticed room for a possible improvement for the styles of the Card images. Currently if the provided image is wider than it is tall, the result is white space at the bottom of the image, which looks a little odd. Screenshots below...

Proposed Solution

A simple solution (PR incoming shortly) would be to use: object-fit: cover to enforce that the image should cover the containing div.

It would be nice if there was a way to edit personal info that I've submitted. What would be even better is if that data resided in GitHub, so it would be easy to send PR's. This would also allow people to manage their own profiles and potentially submit others who may not be aware of this site.

Also, it would be nice to add details around that to the readme.