Coder Social home page Coder Social logo

approachable-io's Introduction

approachable-io's People

Contributors

aditya2000 avatar brentosaurus avatar charalambos94 avatar chridgely avatar devcer avatar frankwrk avatar hexeption avatar hilmanski avatar kyletodd avatar lukeschlangen avatar sarahjanebland avatar solodynamo avatar thunderbottom avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

solodynamo devcer frankwrk sarahjanebland charalambos94 valerieyeltman hexeption kyletodd talitaoliveira praetordaemon hammadmashkoor thunderbottom aditya2000 ray-abel12

approachable-io's Issues

Submit a site map

We could use a sitemap to better help google crawl our website. This can be done by creating a new file called sitemap.xml. Currently, we only have one page, so the sitemap should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.net/?id=who</loc>
    <lastmod>2017-10-10</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

You can learn more about sitemaps here: https://en.wikipedia.org/wiki/Site_map

Add width and max-width to img tags

Limit the size of the logo by changing the img tag in the styles.css to something like this:

img {
  width: 100%;
  max-width: 400px;
}

This should also go hand in hand with centering the image, but that can be moved to a separate issue if you don't feel comfortable making that change.

Give guidance on and add CONTRIBUTING.md to project

I'm not sure what type of contributions make the most sense for our organization. Our project-list repository has the following language, but I'm not sure how to convert this to a CONTRIBUTING.md or if there is one out there that seems like a good fit. I'd love some guidance on this.

An Approachable Open Source project will:

  • allow those who are interested and committed, regardless of skill level, contribute to the project.
  • have at least one approachable issue that can be worked on without end and a guide for how to work on the issue so that a newcomer can always feel comfortable making their first pull request. We call this the Infinitely Approachable Issue. An excellent example of this can be found in the getting-started repository.

Every project has tradeoffs, and that is OK as long as we're on the same page. An Approachable Open Source project will often:

  • sacrifice development speed, performance, and productivity every time if it makes the code easier for those with less technical expertise to participate in the project.
  • Write Everything Twice (WET) instead of following the coding standard of Don't Repeat Yourself (DRY).

Of course, performant and DRY code written at a fast pace is still preferable to WET code written at a slow pace, but not at the cost of making a project less approachable. This may make an Approachable Open Source project less apealling to some highly-skilled developers, but that is OK with Approachable IO. There are plenty of open source projects to push the technical limits of experts, we are filling a different purpose.

Add Skip Link to Main Content

We should provide a 'skip link' at the top of the page which allows the user to a target the main content on the page. This ensures our content is accessible for any users with visual or motor disabilities. The skip link can be added by altering the HTML to include the skip link and its target. For example:

...
<body>
    <a href="#main-content" class="skip-link">Skip to Main Content</a> 
    ...
    <div class="text-container" id="main-content">
        ...
    </div>
    ...

CSS can visually hide the skip link and while ensuring it is accessible to users via keyboard navigation. WebAIM suggests something like this:

a.skip-link {
  position: absolute;
  top: -99999px;
  left: -99999px;
}

a.skip-link:focus {
  top: 0;
  left: 0;
}

Eliminate render-blocking JavaScript and CSS in above-the-fold content

From google page speed test: https://developers.google.com/speed/pagespeed/insights/?url=approachable.io&tab=mobile

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
http://www.approachable.io/styles.css

This can likely be resolved by moving the styles.css tag out of the <head></head> tag and into the bottom of the <body></body> tag.

Additional suggestions can be found here:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

404 "Approachable" link isn't actually approachable either.

ISSUE TYPE

  • Typo
  • Bug
  • Feature

WHERE / WHAT

If you visit any site that would typically take you to a 404 page you will find the link below.

Approach some other page

EXPECTED BEHAVIOR

The 404 page should lead you back to the home page or another page that actually works.

REPRODUCTION STEPS

  1. Visit a non-real URL as a part of www.approachable.io domain
  2. Follow the link shown.
  3. Notice your URL changes to "http://www.approachable.io/approachable.io"
    image

Add hreflang tag for US English

Google uses hreflang tags to match the user's language preference to the right variation of your pages. At this point in time, since we are currently supporting US English, we should add this to our head tag (between the <head> and </head> tags).

Add favicon to 404.html

ISSUE TYPE

  • Typo
  • Bug
  • Feature

WHERE / WHAT

404.html is missing a favicon

EXPECTED BEHAVIOR

The favicon isn't being loaded in on the 404 page

REPRODUCTION STEPS

visit the 404 page and note that the favicon is missing. It should be possible to source it in like the other files do.

A better UX won't harm

Currently, I see only textual content. Adding some colors and graphics is a good idea.

Create 404 for website

ISSUE TYPE

  • Typo
  • Bug
  • Feature

WHERE / WHAT

Right now, going to a route that doesn't exist will show a generic github 404 message

screen shot 2017-10-23 at 1 10 51 pm

It would be better to have a custom 404 message (information about approachable.io and how to get involved in this project) as well as the 404 message.

EXPECTED BEHAVIOR

visiting a link that doesn't exist (eg http://interview.approachable.io/qwerty) should display our custom 404.html

REPRODUCTION STEPS

I would suggest starting with this document:
https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/

Leverage browser caching - Not a good first feature

This issue is more complicated than most of the issues we recommend starting on since it is more complicated and less approachable than many of the other issues available. If you're looking for your first issue, we recommend starting with one that has a good first issue label.

From google page speed test: https://developers.google.com/speed/pagespeed/insights/?url=approachable.io&tab=mobile

Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
Leverage browser caching for the following cacheable resources:
http://www.approachable.io/approachable-open-source-logo.png (10 minutes)
http://www.approachable.io/styles.css (10 minutes)

Suggestions for how to fix can be found here:
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

Create container and max width for body

Limit the body width so that on wide screens, we don't lose readability.

body {
  max-width: 900px;
}

This should also go hand in hand with centering the image, but that can be moved to a separate issue if you don't feel comfortable making that change.

Add alt tag to the approachable open source img tag

The approachable open source image should have an alt attribute.

<img src="approachable-open-source-logo.png" />

should look like

<img src="approachable-open-source-logo.png" alt="Approachable Open Source Logo"/>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.