jupyterhub / outreachy

Tasks, management and documentation for Outreachy Internships in JupyterHub

Outreachy organization repo for JupyterHub

Chat room for Outreachy interns

This repository contains information about JupyterHub's participation in Outreachy - a program that provides three-month internships for people from groups traditionally underrepresented in tech.

This GitHub repository contains:

1. Microtasks for applicants to complete. These are small tasks that help the applicant familiarize themself with the project they are contributing to. These are accepted as GitHub issues.
2. Descriptions for various Projects Ideas that applicants can apply for. Maintainers can use this space to collaborate on keeping these descriptions up to date.
3. Documentation describing the processes that the JupyterHub community follow when participating in Outreachy rounds.

How to Build the Documentation Locally

You will need a Python installation and the nox package installed.

1. Install nox via pip

   pip install nox

2. Build the documentation

   nox -s docs

   You can open the docs/_build/dirhtml/index.html file in your local browser to view the site.

Alternatively, you can watch the docs folder for changes and have a copy of the site live update as you work.

1. Autobuild the documentation

   nox -s docs -- live

2. Open http://127.0.0.1:8000 in your browser to see the site in real time

Check for broken links

You can check for broken links within the documentation by changing into the docs folder and running the linkcheck command.

cd docs
make linkcheck

Cleaning up generated files

There are two methods of cleaning up generated files.

1. Using Sphinx

   cd docs
   make clean

2. Using git. Delete untracked files (-X), with required confirmation (-f), recursively (-d).

   git clean -Xfd

Code of Conduct

We follow the Project Jupyter Code of Conduct.

outreachy's Issues

JupyterHub authenticator that reads username / passwords from a CSV file

JupyterHub authenticators can use any data source to validate the username / passwords users give them. In some cases, administrators want to make a CSV file containing usernames and password as columns, and let users log in to JupyterHub with that.

For this task, write and publish (as a GitHub repository) a JupyterHub authenticator that:

1. Requires a configuration value that points to an existing CSV file with two columns: username & password
2. Users with an entry in the CSV can log in with their password
3. If a username doesn't exist in the CSV, they can not log in.

Helpful links:

1. Tornado tutorial: http://www.tornadoweb.org/en/stable/
2. https://jupyterhub.readthedocs.io/en/stable/reference/authenticators.html#how-to-write-a-custom-authenticator has information on writing a custom authenticator
3. https://github.com/yuvipanda/jupyterhub-simplespawner is a useful spawner class to test authenticator implementations
4. https://github.com/yuvipanda/jupyterhub-dummy-authenticator is an example of a very simple authenticator you can look for inspiration

Getting Help:

Comment on this issue, or ping us on Gitter for help!

Accessibility: Improve accessibility of Binder page

What page is this for?

https://mybinder.org/

WAVE accessibility report

Result from evaluation:
From the WAVE accessibility tool's assessment, the following are presenting accessibility issues on the page:

1. Missing alternative text
2. Missing or invalid language
3. Very low contrast
4. No page regions
5. Missing first level heading
6. Device dependent event

The HTML element to be changed

The HTML/CSS of elements to be changed are seen below:

1. Missing alt text:
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px">

<img id="badge" src="/static/images/badge_logo.svg?v=51b20aa16836ea83f5ed69194c660eb85c4c2c1e32565312baedb7d534e3ffcf592881dbbe3da441d8293ded842755c906b91fb4aadf15220cf48111ebf701c4">

<img class="icon" src="/static/images/markdown-icon.svg?v=d1115f582236340620dcc613052d5984f85f1742eed0e220e1a90c9f331bb71d3ef817bee9c6936ad6019c94cab66eb628528c929ca0bee3d25a4bdf634033cd">

<img class="icon" src="/static/images/rst-icon.svg?v=4846f2074f6bde5a7934a0bf36c3a12198f1d7fe7bb5e6545747a984db8fc9a3a7beb0205b072c7f44237f2d68d2ccffdcf983c18c9f91f5a4b5e0272ad9bb03">

2. Missing or invalid language:
<html style="margin-left: 380px;">

3. Very low contrast:
<div style="flex:1;text-align:center;">
    Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a 
    href="https://www.ovh.com/">OVH</a>,
    <a href="https://notebooks.gesis.org">GESIS Notebooks</a>
    and the <a href="https://turing.ac.uk"> Turing Institute </a> for supporting us! 🎉
 </div>

<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; 
    font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" 
    onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" 
    target="_blank">
    🤍 Donate to mybinder.org!
</a>

HTML:
<span class="point point-orange">
1
</span>
<span class="point point-red">
2
</span>
<span class="point point-blue">
3
</span>

CSS:
.point-orange{
    border-color:rgb(243, 162, 83);
    color: rgb(243, 162, 83);
}
.point-red{
    border-color: rgb(208, 102, 129);
    color: rgb(208, 102, 129);
}
.point-blue{
    border-color:rgb(87, 154, 202);
    color: rgb(87, 154, 202);
}

HTML:
<button id="submit" class="btn-submit" type="submit">
    launch
</button>

CSS:
.btn-submit{
    background-color:rgb(243, 162, 83);
}

4. No page regions:
The entire page content has to be formatted using sematic HTML tags like <header>, <nav>, <section>, <aside> and <footer>. The page's current header code is seen below:

<body style="height: 2064.56px;">
    <div id="banner-container">
        <div style="display:flex;align-items:center;">
            <div style="flex:1;text-align:center;">
                Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a href="https://www.ovh.com/"> OVH </a>, <a href="https://notebooks.gesis.org"> GESIS Notebooks </a> and the <a href="https://turing.ac.uk"> Turing Institute </a>
                for supporting us! 🎉
            </div>
            <a class="btn"
                style="width:fit-content;height:fit-content;padding:10px;background-color:#e66581;color:white;font-weight:bold;margin:-8px 0px;"
                onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'"
                href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
                🤍 Donate to mybinder.org!
            </a>
        </div>
    </div>
    ...
</body>

5.Missing first level heading:
<h3>
    Turn a Git repo into a collection of interactive notebooks
</h3>
<h4>
    New to Binder? Get started with a <a href="https://the-turing-way.netlify.app/communication/binder/zero-to-binder.html" 
    target="_blank"> Zero-to-Binder tutorial </a> in Julia, Python, or R.
</h4>

6. Device dependent event:
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>

Your proposed HTML (or CSS), after change

I am proposing these changes are made to improve the page's accessibility:

1. Missing alt text:
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px" alt="Binder logo">

<img id="badge" src="/static/images/badge_logo.svg?v=51b20aa16836ea83f5ed69194c660eb85c4c2c1e32565312baedb7d534e3ffcf592881dbbe3da441d8293ded842755c906b91fb4aadf15220cf48111ebf701c4" alt="Binder badge logo">

<img class="icon" src="/static/images/markdown-icon.svg?v=d1115f582236340620dcc613052d5984f85f1742eed0e220e1a90c9f331bb71d3ef817bee9c6936ad6019c94cab66eb628528c929ca0bee3d25a4bdf634033cd" alt="Markdown icon">

<img class="icon" src="/static/images/rst-icon.svg?v=4846f2074f6bde5a7934a0bf36c3a12198f1d7fe7bb5e6545747a984db8fc9a3a7beb0205b072c7f44237f2d68d2ccffdcf983c18c9f91f5a4b5e0272ad9bb03" alt="restructured text icon">

2. Missing or invalid language:
<html style="margin-left: 380px;" lang="en">` or `<html style="margin-left: 380px;" lang="fr"> etc

3. Very low contrast:

Add class to HTML container div:
<div style="flex:1;text-align:center;" class="header-links">
    Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a 
    href="https://www.ovh.com/">OVH</a>,
    <a href="https://notebooks.gesis.org">GESIS Notebooks</a>
    and the <a href="https://turing.ac.uk"> Turing Institute </a> for supporting us! 🎉
 </div>

Increase contrast using CSS:
.header-links a{
    color: rgb(41, 124, 184); 
}

Use darker shade of background color
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(232, 53, 92); color: white; 
    font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" 
    onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" 
    target="_blank">
    🤍 Donate to mybinder.org!
</a>

CSS:
.point-orange{
    border-color: rgb(247, 144, 42);
    color: rgb(247, 144, 42);
}
.point-red{
    border-color: rgb(204, 67, 101);
    color: rgb(204, 67, 101);
}
.point-blue{
    border-color: rgb(41, 124, 184);
    color: rgb(41, 124, 184);
}

HTML:
<button id="submit" class="btn-submit" type="submit">
    launch
</button>

CSS:
.btn-submit{
    background-color:rgb(223, 132, 41);
}

4. No page regions:
The entire page content has to be formatted using sematic HTML tags like <header>, <nav>, <section>, <aside> and <footer>. In this instance, the header was formatted.

<body style="height: 2064.56px;">
    <header>
        <nav id="banner-container">
            <ul style="display:flex;align-items:center;">
                <li style="flex:1;text-align:center;">
                    Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a href="https://www.ovh.com/"> OVH </a>, <a href="https://notebooks.gesis.org"> GESIS Notebooks </a> and the <a href="https://turing.ac.uk"> Turing Institute </a>
                    for supporting us! 🎉
                </li>
                <li>
                  <a class="btn"
                    style="width:fit-content;height:fit-content;padding:10px;background-color:#e66581;color:white;font-weight:bold;margin:-8px 0px;"
                    onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'"
                    href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
                    🤍 Donate to mybinder.org!
                  </a>
                </li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>

CSS:
nav ul li{
    list-stye-type: none;
}

5.Missing first level heading:
HTML:
<h1>
    Turn a Git repo into a collection of interactive notebooks
</h1>
<h2>
    New to Binder? Get started with a <a href="https://the-turing-way.netlify.app/communication/binder/zero-to-binder.html" 
    target="_blank"> Zero-to-Binder tutorial </a> in Julia, Python, or R.
</h2>

CSS:
h1{
    font-size:1.25em;
}

h2{
    font-size:1.125em;
}

6. Device dependent event:
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onfocus="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" onfocus="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>

More info

No response

Accessibility: jupyter.org

What page is this for?

http://jupyter.org/

WAVE accessibility report

The HTML element to be changed

Based on the assessment, the following have been spotted and can be improved using the web content accessibility guidelines (WCAG):
1.Contrast Error: The view buttons have contrast issues between text and background colors. The text and background color have a less contrast ratio of 3.19:1 which is less than 4.5:1, or large text (larger than 18 points or 14 points bold) and this makes it uneasy for users with low vision to navigate the website.

2.Alerts: 
Alternative text : The two logos have the same alternative text, this often causes redundancy or indicates incorrect alternative text. Due to this, users who make use of screen readers will not get adequate information.

3.Heading: Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies like screen readers use them to provide in-page navigation. Screen readers typically offer a shortcut that brings up a list of all headings within the page as a means of user navigation. If screen readers announce the heading level, the skipped number would make it seem like the user had missed some hidden content when they haven't. Suggestion: A hierarchy of header elements should be used to solve this. 

Missing first level heading element (1) : A page does not have an <h1> element. Headings facilitate page navigation for users of many assistive technologies. They also provide semantic and visual meaning and structure to the document. A first level heading (<h1>) should be present on nearly all pages. It should contain the most important heading on the page (generally the document title). If the page presents a main heading, place it within an <h1> element. Add other sub-headings as necessary.


5.Navigation: It means that a <nav> element or navigation landmark is present.Two Navigation Icons is present on the page. A navigation icon should not be present in the footer as it is to be found in the page header.

Your proposed HTML (or CSS), after change

Suggestion for Contrast error: It can be fixed by reducing the brightness of the background color. A contrast ratio 8.25:1 would be better for users, especially those with low vision. (Background color= #823912 , foreground color= #FFFFFF). We can also get color suggestions in the Contrast option of the WAVE tool.

Suggestion for Alternative text: Ensure that the alternative text for the image or image input provides a succinct, yet an equivalent alternative to the content and function of the image. Screen readers and browser presentation inform the user that the object is an image, so the alternative text of "image of..." (and similar) should be avoided. If the image does not convey content or if the content is presented in nearby text (e.g., a caption), null/empty alternative text (alt="") is appropriate.

Suggestion for Heading: A <p></> tag could be used instead of the heading elements used as the text is not a section heading.

Suggestion for Navigation: Navigation links should be embedded in the Nav bars as ordered lists in the footer. The user should be able to navigate when ordered lists are hovered or clicked on.

More info

No response

Move DummyAuthenticator into JupyterHub

See jupyterhub/jupyterhub#2169

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Accessibility: Binderhub's Homepage

What page is this for?

http://mybinder.org/

WAVE accessibility report

http://mybinder.org/ 's Home Page

• 4 images do not have alternative text (problem). Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image.(fix)

• The language of the document is not identified or a lang attribute value is invalid(problem). Identify the document language using the attribute with a valid value (e.g., ). Ensure that all lang attribute values are valid.(fix)

• Very low contrast between text and background colors in the page with some links. Adequate contrast of text is necessary for all users, especially users with low vision. This can be fixed by increasing the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text, You can install a contrast checker on chrome to be sure it complies with WCAG contrast ratio(fix).

• No page regions or ARIA landmarks were found. The whole page was not built using semantic HTML and proper sectioning(problem). If the page has visual regions or significant page areas, ensure the regions are defined with header, nav, main, footer, etc. elements.(fix)

• The page does not have a first level heading(problem). The text "Turn a Git repo into a collection of interactive notebooks" should have a

  tag as its the first heading on th page.

• On the "click to Donate" button, an event handler is present that may not be accessible.(problem) Ensure that critical functionality and content is accessible by using a device independent event handler (which responds to both keyboard and mouse) or by using both a mouse dependent and a keyboard dependent event handler.(fix)

• These are the results from the WAVE web app accessibility tester. All fixes can be done with just simple HTML and CSS.

The HTML element to be changed

<html>

<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px">

<img id="badge" src="/static/images/badge_logo.svg?v=51b20aa16836ea83f5ed69194c660eb85c4c2c1e32565312baedb7d534e3ffcf592881dbbe3da441d8293ded842755c906b91fb4aadf15220cf48111ebf701c4">

<img class="icon" src="/static/images/markdown-icon.svg?v=d1115f582236340620dcc613052d5984f85f1742eed0e220e1a90c9f331bb71d3ef817bee9c6936ad6019c94cab66eb628528c929ca0bee3d25a4bdf634033cd">

<img class="icon clipboard" src="/static/images/copy-icon-black.svg?v=ff8d51629080acad6be94d3d35402a6318f452db7bcbac3d7617230ed70e7098a037b076ea7e5a662c599a9157563982e456a5f1854debe9fd2f1ef4067f3a3b" data-clipboard-target="#markdown-badge-snippet" alt="Copy markdown link to clipboard">

<a class="btn" style="width:fit-content;height:fit-content;padding:10px;background-color:#e66581;color:white;font-weight:bold;margin:-8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>

<h3>
Turn a Git repo into a collection of interactive notebooks
</h3>

<div style="display:flex;align-items:center;">
<div style="flex:1;text-align:center;">
Thanks to
Very low contrast
<a href="https://cloud.google.com/">
Google Cloud
</a>

,
Very low contrast
<a href="https://www.ovh.com/">
OVH
</a>

,
Very low contrast
<a href="https://notebooks.gesis.org">
GESIS Notebooks
</a>

and the
Very low contrast
<a href="https://turing.ac.uk">
Turing Institute
</a>

for supporting us! 🎉
</div>
//Device dependent event handler and Very low contrast

<a class="btn" style="width:fit-content;height:fit-content;padding:10px;background-color:#e66581;color:white;font-weight:bold;margin:-8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>
</div>

<button id="submit" class="btn-submit" type="submit">
launch
</button>

<span class="point point-orange">
1
</span>

<span class="point point-red">
2
</span>

<span class="point point-blue">
3
</span>

Your proposed HTML (or CSS), after change

// Language error fix 
<html lang="en">

//Alt text fix with images
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px" alt="Binderhub's Logo">

<img id="badge" src="/static/images/badge_logo.svg?v=51b20aa16836ea83f5ed69194c660eb85c4c2c1e32565312baedb7d534e3ffcf592881dbbe3da441d8293ded842755c906b91fb4aadf15220cf48111ebf701c4" alt='Image link to lanuch Binder'>

<img class="icon" src="/static/images/markdown-icon.svg?v=d1115f582236340620dcc613052d5984f85f1742eed0e220e1a90c9f331bb71d3ef817bee9c6936ad6019c94cab66eb628528c929ca0bee3d25a4bdf634033cd" alt="markdown icon">

<img class="icon clipboard" src="/static/images/copy-icon-black.svg?v=ff8d51629080acad6be94d3d35402a6318f452db7bcbac3d7617230ed70e7098a037b076ea7e5a662c599a9157563982e456a5f1854debe9fd2f1ef4067f3a3b" data-clipboard-target="#markdown-badge-snippet" alt="Copy markdown link to clipboard" alt ='Copy icon'>


//contrast error fix with the donate link and mouse handler fix with onfocus and onblur 

<a class="btn" style="width:fit-content;height:fit-content;padding:10px;background-color:#8C1730;color:white;font-weight:bold;margin:-8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank"    onfocus="this.style.backgroundColor='#d15b75'" onblur="this.style.backgroundColor='#e66581'" >
🤍 Donate to mybinder.org!
</a>


//H1 error fix

<h1>
Turn a Git repo into a collection of interactive notebooks
</h1>

//more contrast fixes

<a href="https://cloud.google.com/" style="color: #1A3956">
Google Cloud
</a>

,
<a href="https://www.ovh.com/" style="color: #1A3956">
OVH
</a>

,
<a href="https://notebooks.gesis.org" style="color: #1A3956">
GESIS Notebooks
</a>

and the
<a href="https://turing.ac.uk" style="color: #1A3956">
Turing Institute
</a>

<button id="submit" class="btn-submit" type="submit" style="background-color:#7B4209" >
launch
</button>

<span class="point point-orange" style="color:#80450A">
1
</span>

<span class="point point-red" style="color:#982F49">
2
</span>

<span class="point point-blue" style="color:#275A7C">
3
</span>

More info

The main changes in contrast were made using the WAVE tool inbuilt checker to make sure it aligns with WCAG contrast ratio.

The Page layout will need to be better by using semantic HTML elements such as: <nav>, <header>, <main>, <aside>, <footer>,<section> etc. This method organisez the page better and makes it easier to understand for everyone involved. This webpage was semingly also built with bootstrap which made inline styling necessary.

The layout of the page was too packed, making it hard to read. This example below is a good one

Having Events controlled by javascript in the html file is another subtle thing we can cut out to increase accessibilty, Trying to make all javascript and styling in their respective script and styling files.

Accessibility: Jupyter About Page

What page is this for?

#38 (comment)

WAVE accessibility report

Jupiter "About" page Wave evaluation:

Detailed contrast errors and alerts & contrast information:

(The first image represent the first and second contrast information. The second image represents the third one)

Structural elements (showing on the page the ones that do not belong):

ARIA label (examples):

The HTML element to be changed

Contrast Errors:
<a href="https://opensource.org/licenses/BSD-3-Clause" style="color: rgb(197, 84, 11); background-color: rgb(245, 245, 245);">(...)</a>
<a href="https://numfocus.org" style="color: rgb(197, 84, 11); background-color: rgb(245, 245, 245);">(...)</a>
<div class="orange-button"><a href="https://numfocus.salsalabs.org/donate-to-jupyter/index.html" target="noopener noreferrer" style="color: rgb(255, 255, 255); background-color: rgb(228, 110, 46);">(...)</a></div>    
.about-box .orange-button {
    background-color: #e46e2e;
(...)
}

Alerts (redundant alternative text):
<img class="biocard-photo" alt="Mehmet Bektas" src="/assets/bios/Mehmet_Bektas.jpg" (...)>
<img class="biocard-photo" alt="David Brochart" src="/assets/bios/David_Brochart.jpg" (...)>

Alert(long alternative text):
<img src="/assets/logos/EC-H2020.svg" alt="Horizon 2020 European Union funding for Research and Innovation logo - OpenDreamkit funded project - Home Page" (...)>

Structural elements:
<h2 id="project-jupyter">Project Jupyter<a (...)></a></h2><ul><li>(...)</li></ul>
<h2 id="subprojects">Subprojects<a (...)></a></h2><ul><li>(...)</li></ul>
<h2 id="follow-us">Follow us<a (...)></a></h2><ul><li>(...)</li></ul>

ARIA labels:
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon=" " href="#distinguished-contributors" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#2021-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#2020-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#special-election-cohort" (...)></a>

Your proposed HTML (or CSS), after change

Contrast Errors:
<a href="https://opensource.org/licenses/BSD-3-Clause" style="color: rgb(138, 55, 0);background-color: rgb(245, 245, 245);text-decoration: underline;">(...)</a>
<a href="https://numfocus.org" style="color: rgb(138, 55, 0); background-color: rgb(245, 245, 245);text-decoration: underline;">(...)</a>

<div class="orange-button"><a href="https://numfocus.salsalabs.org/donate-to-jupyter/index.html" target="noopener noreferrer" style="color: rgb(0, 0, 0); background-color: rgb(228, 110, 46);">(...)</a></div>    
.about-box .orange-button {
    background-color: #E58957;
(...)
}

Alerts (redundant alternative text):
<img class="biocard-photo" alt="Mehmet Bektas avatar" src="/assets/bios/Mehmet_Bektas.jpg" (...)>
<img class="biocard-photo" alt="David Brochart avatar" src="/assets/bios/David_Brochart.jpg" (...)>

Alert(long alternative text):
<img src="/assets/logos/EC-H2020.svg" alt="Horizon 2020 European Union logo" (...)>

Structural elements:
<ul id="project-jupyter" style="font-size: 1.1em; font-weight: bold;">Project Jupyter<a (...)></a><li>(...)</li></ul>
<ul id="subprojects" style="font-size: 1.1em; font-weight: bold;">Subprojects<a (...)></a><li>(...)</li></ul>
<ul id="follow-us" style="font-size: 1.1em; font-weight: bold;">Follow us<a (...)></a><li>(...)</li></ul>

ARIA labels:
<a class="anchorjs-link " aria-label="Distinguished Contributors section link" data-anchorjs-icon=" " href="#distinguished-contributors" (...)></a>
<a class="anchorjs-link " aria-label="2021 Cohort section link" data-anchorjs-icon="" href="#2021-cohort" (...)></a>
<a class="anchorjs-link " aria-label="2020 Cohort section link" data-anchorjs-icon="" href="#2020-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Special Election Cohort section link" data-anchorjs-icon="" href="#special-election-cohort" (...)></a>

More info

By creating this issue I realised that the 70th alert, the redundant link, is not present in the original website, but the wave itself makes the link become redundant and point it as wrong, so it doesn't really exist. So no changes suggested for it.
For all of the 68 alerts about redundant alternative text my suggestion is to add the word "avatar" in the end of the alt. I only put two examples in the code suggestion to not be redundant myself, and to present a more succinct code, since there are a lot of other changes to be presented.
I did the same about the ARIA labels, only put four examples so it wouldn't be so long. But the suggestion is to change the anchor by putting the name of the section adding section link at the end, as shown in the proposed html change.

p.s.: I didn't know if was best not to add text to separate the HTML per error, but I believe that would be better to be understood. If necessary I can change.

Evaluate Accessibility of Jupyter pages

We would like to improve the accessibility of JupyterHub. This microtask will exercise the skills and tools relevant to JupyterHub accessibility project, and improve the accessibility of Jupyter websites!

Many Outreachy applicants can work on this issue at the same time. Please do not select more than one page per person.

1. Familiarize yourself with the basics of web accessibility

2. Install the WAVE tool for evaluating web accessibility

3. Select a page from one of these websites (using this spreadsheet):

   1. jupyter.org
   2. ipython.org
   3. mybinder.org

4. Use WAVE to evaluate your selected page

5. Identify a specific change in the HTML or CSS that improve the page, with respect to accessibility

6. open an issue (select "Accessibility task"), and follow the steps to suggest an improvement.

We are not asking you to fork repos and propose specific changes (it may be difficult to find where the HTML is defined!). Only suggest changes to the final page. After discussion, we can decide to proceed to submit changes, or not.

The goals of these tasks:

1. get some familiarity with accessibility
2. install and use accessibility tools to identify issues
3. understand the issues you've found
4. apply what you've learned and the issues the tool has found to propose specific, concrete changes

Update

This microtask will be closed to new applicants on Monday 24th October (end of day UK time).

Please make sure your contributions are recorded and begin your final application on the Outreachy website. If your issue/PR is still open when we close this project, it will still count as a contribution. Closing the project will not affect your ability to record contributions and make your final applications.

traefik example using etcd

Extending #7, it would be good to have an example configuration of traefik using etcd to store the routing table.

The goal: achieve the same result as #7, but use etcd to store configuration instead of placing it directly in the traefik.toml configuration.

Tasks:

1. install and start etcd
2. create (manually) the appropriate etcd values
3. pass the same tests in #19 using the new configuration

References:

• etcd
• traefik etcd

Create issue-based workflow for scoping project proposals

Previously in this repo, project proposals were committed as files. I would like to move to an issue-based workflow instead for two reasons: using issue labels to track the state of the project proposals, and auto-generating a table of projects for quick discovery in documentation.

I realise that this might lose some of the benefit of a PR review for tweaking project descriptions etc. However for this past round, I don't think Min and Georgiana suffered too much without this and using HackMD¹ instead:

• jupyterhub/team-compass#556

Actions to take

• Complete #43
• Complete #44
• And document in #45

Footnotes

1. https://hackmd.io/@sgibson91/outreachy-project-proposal-template ↩

Document removing config values in the-littlest-jupyterhub

See jupyterhub/the-littlest-jupyterhub#203

Add to the documentation of the littlest jupyterhub how to clear/remove config values.

Accessibility: Improve accessibility of mybinder about supporters page.

What page is this for?

https://mybinder.readthedocs.io/en/latest/about/supporters.html

WAVE accessibility report

1. The logo image doesn't have a very descriptive alternative text
2. The cloud credit supporters image on this page has no alternative text
3. Empty links without text close to the cloud credit supporters' images
4. Some areas have low color contrast for text and background.
   

The HTML element to be changed

1. Suspicious alternative text i.e the logo image without descriptive alternative text
<a class="navbar-brand logo" href="../index.html">
Suspicious alternative text<img src="../_static/logo.png" class="logo__image only-light" alt="Logo image">
<img src="../_static/logo.png" class="logo__image only-dark" alt="Logo image"></a>

2. The cloud credit supporter's image
   i. <img src="https://www.gesis.org/typo3conf/ext/gesis_web_ext/Resources/Public/webpack/dist/img  /gs_home_logo_de.svg" style="max-height:5em;min-height:2em;">
  ii. <img src="https://www.gstatic.com/devrel-devsite/prod/v6cd15f45ec209c8961e07ea7e57ed9a0e9da4333bc915e67d1fcd2b2a9ec62d1/opensource/images/lockup.svg" style="max-height:5em;min-height:2em;">
   iii. <img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Logo-OVH.svg" style="max-height:5em;min-height:2em;">
   iv. <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Alan_Turing_Institute_logo.svg" style="max-height:5em;min-height:2em;">

3. Empty links without text
   i <a class="sd-stretched-link reference external" href="https://www.gesis.org"></a>
   ii <a class="sd-stretched-link reference external" href="https://opensource.google/"></a>
   iii <a class="sd-stretched-link reference external" href="https://www.ovhcloud.com/en/"></a>
   iv <a class="sd-stretched-link reference external" href="https://www.turing.ac.uk/"></a>

4. Areas with low color contrast
   i <a rel="nofollow noopener" target="_blank" href="https://ethicalads.io?ref=rtd-sidebar&ea-publisher=readthedocs">
Ad by EthicalAds
</a>
  ii <a rel="nofollow noopener" target="_blank" href="https://www.ethicalads.io/publishers/?ref=rtd-sidebar-join&ea-publisher=readthedocs">
Host these ads
</a>
  iii <strong>GESIS</strong>
  iv  <strong>Google Open Source</strong>
  v <strong>OVHCloud</strong>
  vi <strong>The Turing Institute</strong>

Your proposed HTML (or CSS), after change

1. <a class="navbar-brand logo" href="../index.html">
Suspicious alternative text<img src="../_static/logo.png" class="logo__image only-light" alt="Binder user guide logo image">
<img src="../_static/logo.png" class="logo__image only-dark" alt="Binder user guide logo image"></a>

2. 
  i.  <img src="https://www.gesis.org/typo3conf/ext/gesis_web_ext/Resources/Public/webpack/dist/img  /gs_home_logo_de.svg" style="max-height:5em;min-height:2em;" alt="Gesis logo image">

  ii. <img src="https://www.gstatic.com/devrel-devsite/prod/v6cd15f45ec209c8961e07ea7e57ed9a0e9da4333bc915e67d1fcd2b2a9ec62d1/opensource/images/lockup.svg" style="max-height:5em;min-height:2em;" alt="Google open source logo image">
  
  iii. <img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Logo-OVH.svg" style="max-height:5em;min-height:2em;" alt="OVHCloud logo image">

  iv. <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Alan_Turing_Institute_logo.svg" style="max-height:5em;min-height:2em;" alt="The turning institute logo image">

3. 
// Put the image inside the anchor tag
   i <a class="sd-stretched-link reference external" href="https://www.gesis.org">
<img src="https://www.gesis.org/typo3conf/ext/gesis_web_ext/Resources/Public/webpack/dist/img  /gs_home_logo_de.svg" style="max-height:5em;min-height:2em;" alt="Gesis logo image">
</a>
   ii <a class="sd-stretched-link reference external" href="https://opensource.google/">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Alan_Turing_Institute_logo.svg" style="max-height:5em;min-height:2em;" alt="The turning institute logo image">
</a>
   iii <a class="sd-stretched-link reference external" href="https://www.ovhcloud.com/en/">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Logo-OVH.svg" style="max-height:5em;min-height:2em;" alt="OVHCloud logo image">
</a>
   iv <a class="sd-stretched-link reference external" href="https://www.turing.ac.uk/">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Alan_Turing_Institute_logo.svg" style="max-height:5em;min-height:2em;" alt="The turning institute logo image">
</a>

4. 
  i <strong style="color: #000000;">GESIS</strong>
  ii  <strong style="color: #000000;">Google Open Source</strong>
  iii <strong style="color: #000000;">OVHCloud</strong>
  iv <strong style="color: #000000;">The Turing Institute</strong>

More info

No response

Accessibility: community building committee

What page is this for?

https://jupyter.org/governance/communitybuildingcommittee.html

WAVE accessibility report

I worked on https://jupyter.org/governance/communitybuildingcommittee.html and I found the following issues:

Errors

• Language missing or invalid: a lang="en" should be added to the open html tag to specify the language of the webpage in order to increase its accessibilty.
• Empty form labels : the label elements should be deleted and the i elements nested within them should be nested within span elements. Aria-label attributes should then be added to the span elements to describe the function of the i elements.
• Multiple form labels: since the input tag contains an aria-label, one of the label elements should be deleted. A form control can only have one element.
• Empty button: text isn't necessary for the full screen view button because its icon is self explanatory. But for the sake of the screen reader, a value attribute should be added to the button to describe its function.

Features

• Linked image with alternative text: the alt attribute doesn't quite describe the image effectively. It uses an abbreviation which a visually impaired user might not understand. The description should be fully written out.

Structural Elements

• 3 X Heading level 1: There can only be one h1 element in a web page. The other headings that are not the main heading should be changed to h2.
• 4 X Heading level 2: 2 of them are improperly placed. They should be replaced by h3 headings.

ARIA

• 5X ARIA: the ARIA roles should be deleted and the parent elements replaced with h3.

The HTML element to be changed

//Errors
<html native-dark-active="" style="margin-left: 380px;">
<label for="toctree-checkbox-1">
<i class="fas fa-chevron-down"></i>
</label>
<label for="toctree-checkbox-2">
<i class="fas fa-chevron-down"></i>
</label>
<label for="toctree-checkbox-3">
<i class="fas fa-chevron-down"></i>
</label>
<label for="__navigation" class="headerbtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Toggle navigation">
<span class="headerbtn__icon-container">
<i class="fas fa-bars"></i>
</span>
</label>
<label for="__page-toc" class="headerbtn headerbtn-page-toc">
<span class="headerbtn__icon-container">
<i class="fas fa-list"></i>
</span>
</label>
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar">
Form label
<label class="overlay overlay-navbar" for="__navigation">
<div class="visually-hidden">
Toggle navigation sidebar
</div>
</label>
<input type="checkbox" class="sidebar-toggle" name="__page-toc" id="__page-toc" aria-label="Toggle in-page Table of Contents">
Form label
<label class="overlay overlay-pagetoc" for="__page-toc">
<div class="visually-hidden">
Toggle in-page Table of Contents
</div>
</label>
<button onclick="toggleFullScreen()" class="headerbtn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Fullscreen mode">
<span class="headerbtn__icon-container">
<i class="fas fa-expand"></i>
</span>
</button>

//Features
<a rel="license" href="http://creativecommons.org/publicdomain/zero/1.0/">
Linked image with alternative text
<img src="https://licensebuttons.net/p/zero/1.0/88x31.png" style="border-style: none;" alt="CC0">
</a>
<br>

//Structural Elements
<h1 class="site-logo" id="site-title">
Project Jupyter Governance
</h1>
<h2>
Reporting
<a class="headerlink" href="#reporting" title="Permalink to this headline">
#
</a>
</h2>
<h2>
Bootstrapping
<a class="headerlink" href="#bootstrapping" title="Permalink to this headline">
#
</a>
</h2>

//ARIA
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Code of Conduct
</span>
</p>
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Governance
</span>
</p>
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Organizational Structure
</span>
</p>
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Organizational Policy
</span>
</p>
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Future Governance [work in progress]
</span>
</p>

Your proposed HTML (or CSS), after change

//Errors
<html lang="en native-dark-active="" style="margin-left: 380px;">
<span aria-label="toggle">
<i class="fas fa-chevron-down"></i>
</span>
<span aria-label="toggle">
<i class="fas fa-chevron-down"></i>
</span>
<span aria-label="toggle">
<i class="fas fa-chevron-down"></i>
</span>
<span class="headerbtn__icon-container" class="headerbtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Toggle navigation">
<i class="fas fa-bars"></i>
</span>
<span class="headerbtn__icon-container headerbtn headerbtn-page-toc">
<i class="fas fa-list"></i>
</span>
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar">
Form label
<label class="overlay overlay-navbar" for="__navigation">
<div class="visually-hidden">
Toggle navigation sidebar
</div>
</label>
<input type="checkbox" class="sidebar-toggle" name="__page-toc" id="__page-toc" aria-label="Toggle in-page Table of Contents">
<button onclick="toggleFullScreen()" class="headerbtn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Fullscreen mode" value="fullscreen mode">
<span class="headerbtn__icon-container">
<i class="fas fa-expand"></i>
</span>
</button>

//Features
<a rel="license" href="http://creativecommons.org/publicdomain/zero/1.0/">
Linked image with alternative text
<img src="https://licensebuttons.net/p/zero/1.0/88x31.png" style="border-style: none;" alt="Creative Commons domain">
</a>
<br>

//Structural Elements
<h2 class="site-logo" id="site-title">
Project Jupyter Governance
</h2>
<h2>
Community Building Committee
</h2>
<h3>
Reporting
<a class="headerlink" href="#reporting" title="Permalink to this headline">
#
</a>
</h3>
<h3>
Bootstrapping
<a class="headerlink" href="#bootstrapping" title="Permalink to this headline">
#
</a>
</h3>

//ARIA
<h3 class="caption caption-text">
Code of Conduct
</h3>
<h3 class="caption caption-text">
Governance
</h3>
<h3 class="caption caption-text">
Organizational Structure
</h3>
<h3 class="caption caption-text">
Organizational Policy
</h3>
<h3 class="caption caption-text" role="heading">
Future Governance [work in progress]
</h3>

More info

The aria-label="toggle" in the accordion icon can be controlled dynamically by javascript to change to toggle-up when closed and toggle-down when open.

Implement idle-culling using notebook activity data

Right now, idle-culling relies on consuming data from the activity-tracking proxy. The notebook now tracks activity internally, so we could be talking to each notebook individually to make more informed decisions.

• the cull-idle script could be updated to get last_activity data from the notebook api instead
• the notebook has a status api for reporting its current status

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Create a documentation site for our Outreachy workflows, powered by ReadTheDocs

Many communities participating in Outreachy (or GSoC, or similar) have their own set of documentation detailing their own processes for participation in these initiatives, and the expectations for everyone involved. We should build something similar so that it is more repeatable for JupyterHub to participate in the future.

There is already a bunch of great resources like this already so, crucially, we should point to those docs and only write new stuff where it's specific/bespoke to the JupyterHub community. Examples:

• http://intermine.org/internships/
• https://openlifesci.org/
• https://zulip.readthedocs.io/en/latest/outreach/index.html

One reason that I suggested #43 was because I think it would be nice to have a couple of auto-generated pages with tables listing: project proposals and their status; currently active contribution issues.

Suggested structure

We should break the docs down by role: Community Organiser (currently me), Mentors, Interns

• Community Organiser
  • Responsibilities and Expectations: #175
    • Approving projects/mentors
    • Comms
      • Connecting mentors and interns
      • Arranging meetings, i.e., contribution period post-mortems and application review
  • The Outreachy platform
    • Transferring organisers
      • Need to investigate how to reduce this as a bottleneck
  • Funding and Grant Writing/Sustainability
    • Interns
      • Paying them ourselves
      • Using the Outreachy General Fund or sponsored grants
    • Mentors
      • Pay a mentor for their time
    • Discretionary fund
      • Mentor training
      • Mentor honoraria (if not paying them fully)
      • Contracting folk to respond to GitHub/gitter questions specifically during the contribution period
  • Collaborations
    • Organising shared mentor training with OLS
  • Cohorts of interns: #169
    • Motivation for cohort-based learning
    • How to run a cohort call
    • Templates for cohort calls: #170
• Mentors
  • Why should you be a mentor?: #158
    • Benefits / promo-pack
    • Training
    • Co-mentoring is cool!
    • Expectations of a mentor
      • Time commitment
      • The contribution period
  • Project proposals: #183
    • How to scope a project proposal in this repo
      • Reference the labelling system and issue template: #43 #44
    • How to submit a project proposal to the Outreachy platform
    • How to assign a co-mentor to a project proposal
  • Contribution issues: #139
    • How to create contribution issues in this repo
      • Reference the labelling system and issue template: #43 #44
    • How to write a good contribution issue¹
    • Examples²,³,⁴,⁵
    • "Locking mechanisms" for issues that create PRs to minimise merge conflicts
    • Results of current contribution period retrospective
  • Reviewing project applications
    • Guidelines/criteria for reviewing applications and choosing an intern
    • #132
  • During internship: #165
    • Feedback
• Interns
  • Why you should intern with JupyterHub
    • Intern testimonials: #166
    • Intern blogs: #161
  • How to find contribution issues and what the labels mean: #154
  • How to put together your application⁶: #142
  • During the internship: #164
    • Meeting your mentor
    • Cohort calls
    • Feedback
    • Extending the internship
  • ...

Footnotes

1. https://phabricator.wikimedia.org/project/view/169/ ↩

2. https://phabricator.wikimedia.org/T302242 ↩

3. https://phabricator.wikimedia.org/T276274 ↩

4. https://phabricator.wikimedia.org/T205199 ↩

5. https://github.com/zulip/zulip/issues/23101 ↩

6. https://zulip.readthedocs.io/en/latest/outreach/apply.html#putting-together-your-application ↩

Accessibility: ipython doc reference

What page is this for?

https://ipython.org/ipython-doc/stable/interactive/reference.html

WAVE accessibility report

Please find link to my comment in #38

Wave report from Quemmies3 on IPython Reference page

The HTML element to be changed

**Language missing or invalid:** `<html lang = "">`

**Structural elements: Table of content indentation**
`<h3><a href="../index.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">IPython reference</a><ul>
<li><a class="reference internal" href="#command-line-usage">Command-line usage</a><ul>
<li><a class="reference internal" href="#id1">Command-line Options</a></li>
</ul>
</li>
<li><a class="reference internal" href="#interactive-use">Interactive use</a><ul>
<li><a class="reference internal" href="#caution-for-windows-users">Caution for Windows users</a></li>
<li><a class="reference internal" href="#magic-command-system">Magic command system</a></li>
<li><a class="reference internal" href="#access-to-the-standard-python-help">Access to the standard Python help</a></li>
<li><a class="reference internal" href="#dynamic-object-information">Dynamic object information</a></li>
<li><a class="reference internal" href="#readline-based-features">Readline-based features</a><ul>
<li><a class="reference internal" href="#command-line-completion">Command line completion</a></li>
<li><a class="reference internal" href="#search-command-history">Search command history</a></li>
<li><a class="reference internal" href="#autoindent">Autoindent</a></li>
<li><a class="reference internal" href="#customizing-readline-behavior">Customizing readline behavior</a></li>
</ul>
</li>
<li><a class="reference internal" href="#session-logging-and-restoring">Session logging and restoring</a></li>
<li><a class="reference internal" href="#system-shell-access">System shell access</a></li>
<li><a class="reference internal" href="#manual-capture-of-command-output-and-magic-output">Manual capture of command output and magic output</a></li>
<li><a class="reference internal" href="#system-command-aliases">System command aliases</a></li>
<li><a class="reference internal" href="#recursive-reload">Recursive reload</a></li>
<li><a class="reference internal" href="#verbose-and-colored-exception-traceback-printouts">Verbose and colored exception traceback printouts</a></li>
<li><a class="reference internal" href="#input-caching-system">Input caching system</a></li>
<li><a class="reference internal" href="#output-caching-system">Output caching system</a></li>
<li><a class="reference internal" href="#directory-history">Directory history</a></li>
<li><a class="reference internal" href="#automatic-parentheses-and-quotes">Automatic parentheses and quotes</a></li>
</ul>
</li>
<li><a class="reference internal" href="#ipython-as-your-default-python-environment">IPython as your default Python environment</a></li>
<li><a class="reference internal" href="#embedding-ipython">Embedding IPython</a></li>
<li><a class="reference internal" href="#using-the-python-debugger-pdb">Using the Python debugger (pdb)</a><ul>
<li><a class="reference internal" href="#running-entire-programs-via-pdb">Running entire programs via pdb</a></li>
<li><a class="reference internal" href="#post-mortem-debugging">Post-mortem debugging</a></li>
</ul>
</li>
<li><a class="reference internal" href="#pasting-of-code-starting-with-python-or-ipython-prompts">Pasting of code starting with Python or IPython prompts</a></li>
<li><a class="reference internal" href="#gui-event-loop-support">GUI event loop support</a><ul>
<li><a class="reference internal" href="#pyqt-and-pyside">PyQt and PySide</a></li>
</ul>
</li>
<li><a class="reference internal" href="#plotting-with-matplotlib">Plotting with matplotlib</a></li>
<li><a class="reference internal" href="#interactive-demos-with-ipython">Interactive demos with IPython</a></li>
</ul>
</li>
</ul>`

Your proposed HTML (or CSS), after change

**Language missing or invalid:** `<html lang="en">`

**Structural elements: Table of content indentation**
`<h3><a href="../index.html">Table Of Contents</a></h3>
    <ul>
  <li><a class="reference internal" href="#">IPython reference</a><ol>
  <li><a class="reference internal" href="#command-line-usage">Command-line usage</a><ul>
  <li><a class="reference internal" href="#id1">Command-line Options</a></li>
  </ul>
  </li>
  <li><a class="reference internal" href="#interactive-use">Interactive use</a><ul>
  <li><a class="reference internal" href="#caution-for-windows-users">Caution for Windows users</a></li>
  <li><a class="reference internal" href="#magic-command-system">Magic command system</a></li>
  <li><a class="reference internal" href="#access-to-the-standard-python-help">Access to the standard Python help</a></li>
  <li><a class="reference internal" href="#dynamic-object-information">Dynamic object information</a></li>
  <li><a class="reference internal" href="#readline-based-features">Readline-based features</a><ol>
  <li><a class="reference internal" href="#command-line-completion">Command line completion</a></li>
  <li><a class="reference internal" href="#search-command-history">Search command history</a></li>
  <li><a class="reference internal" href="#autoindent">Autoindent</a></li>
  <li><a class="reference internal" href="#customizing-readline-behavior">Customizing readline behavior</a></li>
  </ol>
  </li>
  <li><a class="reference internal" href="#session-logging-and-restoring">Session logging and restoring</a></li>
  <li><a class="reference internal" href="#system-shell-access">System shell access</a></li>
  <li><a class="reference internal" href="#manual-capture-of-command-output-and-magic-output">Manual capture of command output and magic output</a></li>
  <li><a class="reference internal" href="#system-command-aliases">System command aliases</a></li>
  <li><a class="reference internal" href="#recursive-reload">Recursive reload</a></li>
  <li><a class="reference internal" href="#verbose-and-colored-exception-traceback-printouts">Verbose and colored exception traceback printouts</a></li>
  <li><a class="reference internal" href="#input-caching-system">Input caching system</a></li>
  <li><a class="reference internal" href="#output-caching-system">Output caching system</a></li>
  <li><a class="reference internal" href="#directory-history">Directory history</a></li>
  <li><a class="reference internal" href="#automatic-parentheses-and-quotes">Automatic parentheses and quotes</a></li>
  </ul>
  </li>
  <li><a class="reference internal" href="#ipython-as-your-default-python-environment">IPython as your default Python environment</a></li>
  <li><a class="reference internal" href="#embedding-ipython">Embedding IPython</a></li>
  <li><a class="reference internal" href="#using-the-python-debugger-pdb">Using the Python debugger (pdb)</a><ul>
  <li><a class="reference internal" href="#running-entire-programs-via-pdb">Running entire programs via pdb</a></li>
  <li><a class="reference internal" href="#post-mortem-debugging">Post-mortem debugging</a></li>
  </ul>
  </li>
  <li><a class="reference internal" href="#pasting-of-code-starting-with-python-or-ipython-prompts">Pasting of code starting with Python or IPython prompts</a></li>
  <li><a class="reference internal" href="#gui-event-loop-support">GUI event loop support</a><ul>
  <li><a class="reference internal" href="#pyqt-and-pyside">PyQt and PySide</a></li>
  </ul>
  </li>
  <li><a class="reference internal" href="#plotting-with-matplotlib">Plotting with matplotlib</a></li>
  <li><a class="reference internal" href="#interactive-demos-with-ipython">Interactive demos with IPython</a></li>
  </ul>
  </li>
  </ul>`

More info

All redundant links be removed to enhance website performance and include updated information and links.

Document using the notebook's internal culling

See jupyterhub/jupyterhub#2032

The notebook has its own culling mechanism, so it may be useful to use that for shutting down idle servers instead of the proxy-based activity tracking.

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Make tljh-config error explicitly if called without `sudo`

See jupyterhub/the-littlest-jupyterhub#120

Create issue templates for the repo

Create two lightweight issue templates for the types of issue we open in this repo:

• contribution issues/microtasks
  • #135
• project proposals
  • #178

Use #43 to determine some default labels

Accessibility: ipython news page

What page is this for?

https://ipython.org/news.html

WAVE accessibility report

1 X Language missing or invalid
197 X Very low contrast
157 X Justified text
9 X Suspicious link text

The HTML element to be changed

<html xmlns="http://www.w3.org/1999/xhtml">

<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">
Install
</a>

<a href="documentation.html">
Documentation
</a>

<a href="project.html">
Project
</a>

<div class="section" id="ipython-7-7-and-above">
Heading level 2
<h2>
IPython 7.7 and above
Very low contrast
<a class="headerlink" href="#ipython-7-7-and-above" title="Permalink to this headline">
¶
</a>
</h2>
Unordered list
<ul class="simple">
<li>
<strong>
IPython 7.12.0
</strong>

: Released on Jan 31st 2020.
</li>
<li>
<strong>
IPython 7.11.0 and 7.11.1
</strong>

: Released on Dec 27, 2019 and Jan 1st 2020
</li>
<li>
<strong>
IPython 7.10.0 and 7.10.1
</strong>

: Released on Nov 27, 2019 and Dec 1st 2019
</li>
<li>
<strong>
IPython 7.9.0
</strong>

: Released on Oct 25, 2019
</li>
<li>
<strong>
IPython 7.8.0
</strong>

: Released on Aug 30, 1019
</li>
<li>
<strong>
IPython 7.7.0
</strong>

: Released on Jul 26, 2019
</li>
</ul>
Justified text
<p>
See the
Very low contrast
<a class="reference external" href="https://ipython.readthedocs.io/en/stable/whatsnew/version7.html">
release notes for version 7
</a>
</p>
</div>

<a class="reference external" href="http://channel9.msdn.com/shows/The+HPC+Show/Open-source-HPC-code-Episode-11-IPython-Grid-Engine-running-on-Windows-HPC-Server-2008/">
two
</a>
Very low contrast
<a class="reference external" href="http://channel9.msdn.com/shows/The+HPC+Show/Open-source-HPC-code-Episode-12-IPython-computes-150-million-digits-of-Pi-in-Parallel/">
videos
</a>

<a class="reference external" href="http://ipython.scipy.org/doc/nightly/html/parallel/parallel_winhpc.html">
here
</a>

<a class="headerlink" href="#what-will-become-ipython-0-11-is-taking-shape-big-changes-ahead" title="Permalink to this headline">
¶
</a>

<a href="http://sphinx-doc.org/">
Sphinx
</a>

<a class="reference external" href="https://ipython.org/download.html">
here
</a>


<img src="_static/nbviewer-thm-4.png" title="IPython Notebook Viewer">
</a>

<img title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/jupyter-in-depth.png">

<a class="headerlink" href="#ipython-7-2" title="Permalink to this headline">
¶
</a>

Your proposed HTML (or CSS), after change

//apply the lang attribute 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">

//adding different color to solve contrast issues 
<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">
Install
</a>

<a href="documentation.html" style="color:"#3333FF"; background-color: "#FFFFFF";">
Documentation
</a>

<a href="project.html" style="color:"#3333FF"; background-color: "#FFFFFF";">
Project
</a>

<div class="section" id="ipython-7-7-and-above">
Heading level 2
<h2>
IPython 7.7 and above
Very low contrast
<a class="headerlink" href="#ipython-7-7-and-above" title="Permalink to this headline" style="color:#3333FF; background-color: #FFFFFF;">
¶
</a>
</h2>
Unordered list
<ul class="simple">
<li>
<strong>
IPython 7.12.0
</strong>

: Released on Jan 31st 2020.
</li>
<li>
<strong>
IPython 7.11.0 and 7.11.1
</strong>

: Released on Dec 27, 2019 and Jan 1st 2020
</li>
<li>
<strong style="color:#3333FF; background-color: #FFFFFF;">
IPython 7.10.0 and 7.10.1
</strong>

: Released on Nov 27, 2019 and Dec 1st 2019
</li>
<li>
<strong>
IPython 7.9.0
</strong>

: Released on Oct 25, 2019
</li>
<li>
<strong>
IPython 7.8.0
</strong>

: Released on Aug 30, 1019
</li>
<li>
<strong>
IPython 7.7.0
</strong>

: Released on Jul 26, 2019
</li>
</ul>
Justified text
<p>
See the
Very low contrast
<a class="reference external" href="https://ipython.readthedocs.io/en/stable/whatsnew/version7.html" style="color:#3333FF; background-color: #FFFFFF;">
release notes for version 7
</a>
</p>
</div>

<a class="reference external" href="http://channel9.msdn.com/shows/The+HPC+Show/Open-source-HPC-code-Episode-11-IPython-Grid-Engine-running-on-Windows-HPC-Server-2008/" style="color:#3333FF; background-color: #FFFFFF;">
two
</a>
Very low contrast
<a class="reference external" href="http://channel9.msdn.com/shows/The+HPC+Show/Open-source-HPC-code-Episode-12-IPython-computes-150-million-digits-of-Pi-in-Parallel/" style="color:#3333FF; background-color: #FFFFFF;">
videos
</a>

<a class="reference external" href="http://ipython.scipy.org/doc/nightly/html/parallel/parallel_winhpc.html" style="color:#3333FF; background-color: #FFFFFF;">
here
</a>

<a class="headerlink" href="#what-will-become-ipython-0-11-is-taking-shape-big-changes-ahead" title="Permalink to this headline" style="color:#404040; background-color: #FFFFFF;">
¶
</a>

<a href="http://sphinx-doc.org/" style="color:#404040; background-color: #FFFFFF;">
Sphinx
</a>

<a class="reference external" href="https://ipython.org/download.html" style="color:#404040; background-color: #FFFFFF;">
here
</a>

<img src="_static/nbviewer-thm-4.png" title="IPython Notebook Viewer" alt="IPython Notebook Viewer">

<img title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/jupyter-in-depth.png" alt="Packt publishing">

<a class="headerlink" href="#ipython-7-2" title="Permalink to this headline" style="color:#404040; background-color: #FFFFFF;">
¶
</a>

More info

The page requires right justification of text and proper placement of icons

Improve the test coverage of JupyterHub projects

We would like to improve the test coverage of the projects in the jupyterhub organization. This microtask will help with achieving this goal and get you familiarized with the testing infrastructure across different JupyterHub projects, as well as how to write and run the tests.

Multiple Outreachy applicants can work on this issue at the same time.

1. Look at the coverage reports of various jupyterhub project repositories
2. Find an area of code that isn't covered by the tests. You can choose whatever repository in https://app.codecov.io/gh/jupyterhub, as long as there is coverage data available for it.
3. Find the relevant section of the tests that cover similar things in its corresponding repository from GitHub https://github.com/jupyterhub
4. Add a test that covers the case by following the next steps:
   • create a fork of your chosen repository (the one you want to add the test to)
   • create a new branch on your fork to do your work on. You should add the test when on this branch.
5. In its corresponding GitHub repository, open a Pull Request from your fork with these changes.
6. Register the URL of this Pull Request in the following spreadsheet.

Add user name to control panel in JupyterHub

See jupyterhub/jupyterhub#2157

Make JupyterHub proxy tests portable

JupyterHub has tests for verifying the proxy.

It would be useful to refactor these tests (not including test_external_proxy) to take a Proxy instance instead of the app fixture. This will make it easier to re-use the same tests with different proxy implementations. It will require writing a pytest fixture to return the Proxy object.

To do this, the tests should use a fixture that returns a running Proxy, instead of talking to the application object.

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Improve test coverage of JupyterHub

Testing is important to maintaining software, and we can always have more tests! One good way to learn about a code base can be to look at coverage reports and see what isn't covered, and look for a way to add a test to cover that case. Doing so helps you learn:

1. about the structure of the project
2. how testing for the project works
3. how to write and run tests

Steps:

1. look at the jupyterhub coverage report
2. find an area of code that isn't covered by the tests (often an if some_condition that isn't covered)
3. find the relevant section of the tests that cover similar things
4. add a test that covers the case
5. open a pull request to https://github.com/jupyterhub/jupyterhub with your new test

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Add optional authentication to /metrics endpoint in JupyterHub

See jupyterhub/jupyterhub#2105

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Accessibility: jupyter.org/about

What page is this for?

Jupyter about page

WAVE accessibility report

Contrast Element page.

The HTML element to be changed

Contrast Errors:
<a href="https://opensource.org/licenses/BSD-3-Clause" style="color: rgb(197, 84, 11); background-color: rgb(245, 245, 245);">(...)</a>
<a href="https://numfocus.org" style="color: rgb(197, 84, 11); background-color: rgb(245, 245, 245);">(...)</a>
<div class="orange-button"><a href="https://numfocus.salsalabs.org/donate-to-jupyter/index.html" target="noopener noreferrer" style="color: rgb(255, 255, 255); background-color: rgb(228, 110, 46);">(...)</a></div>    
.about-box .orange-button {
    background-color: #e46e2e;
(...)
}

Alerts (redundant alternative text):
<img class="biocard-photo" alt="Mehmet Bektas" src="/assets/bios/Mehmet_Bektas.jpg" (...)>
<img class="biocard-photo" alt="David Brochart" src="/assets/bios/David_Brochart.jpg" (...)>

Alert(long alternative text):
<img src="/assets/logos/EC-H2020.svg" alt="Horizon 2020 European Union funding for Research and Innovation logo - OpenDreamkit funded project - Home Page" (...)>

Structural elements:
<h2 id="project-jupyter">Project Jupyter<a (...)></a></h2><ul><li>(...)</li></ul>
<h2 id="subprojects">Subprojects<a (...)></a></h2><ul><li>(...)</li></ul>
<h2 id="follow-us">Follow us<a (...)></a></h2><ul><li>(...)</li></ul>

ARIA labels:
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon=" " href="#distinguished-contributors" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#2021-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#2020-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#special-election-cohort" (...)></a>

Your proposed HTML (or CSS), after change

Contrast Errors:
<a href="https://opensource.org/licenses/BSD-3-Clause" style="color: rgb(245, 245, 0);background-color: rgb(138,138,200);text-decoration: underline;">(...)</a>
<a href="https://numfocus.org" style="color: rgb(138, 55, 0); background-color: rgb(245, 245, 245);text-decoration: underline;">(...)</a>

<div class="orange-button"><a href="https://numfocus.salsalabs.org/donate-to-jupyter/index.html" target="noopener noreferrer" style="color: rgb(0, 0, 0); background-color: rgb(228, 110, 46);">(...)</a></div>    
.about-box .orange-button {
    background-color: #E58957;
(...)
}

Alerts (redundant alternative text):
<img class="biocard-photo" alt="Mehmet Bektas avatar" src="/assets/bios/Mehmet_Bektas.jpg" (...)>
<img class="biocard-photo" alt="David Brochart avatar" src="/assets/bios/David_Brochart.jpg" (...)>

Alert(long alternative text):
<img src="/assets/logos/EC-H2020.svg" alt="Horizon 2020 European Union logo" (...)>

Structural elements:
<ul id="project-jupyter" style="font-size: 1.1em; font-weight: bold;">Project Jupyter<a (...)></a><li>(...)</li></ul>
<ul id="subprojects" style="font-size: 1.1em; font-weight: bold;">Subprojects<a (...)></a><li>(...)</li></ul>
<ul id="follow-us" style="font-size: 1.1em; font-weight: bold;">Follow us<a (...)></a><li>(...)</li></ul>

ARIA labels:
<a class="anchorjs-link " aria-label="Distinguished Contributors section link" data-anchorjs-icon=" " href="#distinguished-contributors" (...)></a>
<a class="anchorjs-link " aria-label="2021 Cohort section link" data-anchorjs-icon="" href="#2021-cohort" (...)></a>
<a class="anchorjs-link " aria-label="2020 Cohort section link" data-anchorjs-icon="" href="#2020-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Special Election Cohort section link" data-anchorjs-icon="" href="#special-election-cohort" (...)></a>

More info

No response

Write a traefik toml configuration for prefix-based routing

traefik is a proxy application that we want to use in JupyterHub. We want to be able to configure it to replace configurable-http-proxy. But first, we need to understand its configuration.

The first step to understanding traefik is to write a toml configuration file to configure traefik.
For JupyterHub, we need the ability to route by URL prefix so that requests to /user/yourname are routed to one server, while requests to /otherthings are routed to a different

1. get traefik
2. write a traefik.toml config file that routes to different backends based on the URL. The following URLs should be routed to different servers:

• / (default backend, unless a more specific match is found)
• /user/first route to one backend
• /user/second route to another backend

3. write some tests (e.g. with pytest) to verify the behavior.

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here if you have questions :)

Accessibility: ipython.org

What page is this for?

ipython.org

WAVE accessibility report

1 Error - Language missing or invalid
48 Contrast Errors - Very low contrast
18 Alerts - 14 X Justified text, 1 X Suspicious alternative text, 2 X Image with title, 1 Suspicious link text
3 Features - 3 X Linked image with alternative
16 Structural Elements - 3 X Heading level 1, 5 X Heading level 3, 1 Heading level 4, 4 X Unordered list, 1 Navigation, 1 Main content, 1 Footer, 1 ARIA label

Suggestions

• Language missing or invalid: Add a lang attribute to the HTML element (e.g. ) whose value represents the primary language of document.
  Element(s) to be changed: The tag is to be modified to include a lang attribute with the appropriate value. This is the current state of the HTML tag -
  

• Very low contrast errors: The contrast between the text color and the background color should be increased to at least 4.5:1 for small text and 3:1 for large text. The footer text can be changed to #767674 from #888A85 while the other texts with low contrast can be changed from #CE5C00 to #C25700.
  Element(s) to be changed: All the orange texts on the page (mostly links and nav items) and the texts in the footer.
  The footer texts should be changed from #888A85 to #767674 and the other affected texts should be changed from #CE5C00 to #C25700
  
  

• Fully Justified text: The best way to avoid the problem is to avoid justified text.

• Suspicious alternative text: The alternative text for the image should be improved to something more descriptive of the content or function of the image like "This is an image of IPython's logo".

• Image with title: The alt attribute with information about the image's content should be used.

• Suspicious link text: Where appropriate, the link text should be reworded to be more descriptive of its destination when read out of context.
  

The HTML element to be changed

1. Language missing or invalid
- <html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;">

2. Very low contrast errors
- <a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Install</a>
- <a href="documentation.html">Documentation</a>
- <a href="project.html">Project</a>
- <a href="https://jupyter.org/" target="_blank">Jupyter</a>
- <a href="news.html">News</a>
- <a href="citing.html">Cite</a>
- <a href="donate.html">Donate</a>
- <a href="books.html">Books</a>
- a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython">Stack Overflow</a>
- <a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">Mailing list</a>
- <a class="reference external" href="https://github.com/ipython/ipython/issues">File a bug</a>
- <a class="reference external" href="http://www.reddit.com/r/IPython">Reddit</a>
- <a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">Mailing list</a>
- <a class="reference external" href="https://gitter.im/ipython/ipython">Development Chat Room</a>
- <a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index">Development information</a>
- <a class="reference external" href="http://travis-ci.org/#!/ipython/ipython">Travis CI</a>
- a class="reference external" href="https://github.com/ipython/ipython/wiki">Wiki</a>
- <a href="donate.html">Find out more...</a>
- <a class="reference external" href="https://jupyter.org">Jupyter</a>
- <a class="reference external" href="https://ipython.org/ipython-doc/stable/interactive/reference.html#gui-event-loop-support">GUI toolkits</a>
- <a class="reference external" href="https://ipython.org/ipython-doc/stable/interactive/reference.html#embedding-ipython">embeddable</a>
- <a class="reference external" href="https://ipyparallel.readthedocs.io/en/latest/">parallel computing</a>
- <a class="reference external" href="http://nbviewer.ipython.org/github/ipython/ipython/blob/master/examples/Index.ipynb">official example collection </a>
- <a class="reference external" href="https://github.com/ipython/ipython/wiki/A-gallery-of-interesting-IPython-Notebooks">
notebook gallery</a>
- <a class="reference internal" href="presentation.html"><span class="doc">talks and presentations</span>
</a>
- <a class="reference external" href="documentation.html">extensive documentation</a>
- <a class="reference external" href="https://github.com/ipython/ipython/wiki/Projects-using-IPython">other projects</a>
- <a class="reference internal" href="#citing"><span class="std std-ref">cite the project</span></a>
- <a class="headerlink" href="#jupyter-and-the-future-of-ipython" title="Permalink to this headline">¶</a>
- <a class="reference external" href="https://jupyter.org">Jupyter</a>
- <a class="headerlink" href="#announcements" title="Permalink to this headline">¶</a>
- <a class="reference external" href="https://pypi.org/project/ipython/#history">PyPI</a>
- <a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version7.html">release notes</a>
- <a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version6.html#ipython-6-0">release notes</a>
- <a class="reference external" href="http://jupytercon.com">see the JupyterCon website</a>
- <a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version5.html#ipython-5-0">release notes</a>
- <a class="reference external" href="books.html">Learning IPython for Interactive Computing and Data Visualization</a>
- <a class="reference external" href="https://github.com/damianavila">Damian Avila</a>
- <a class="reference external" href="http://MiningTheSocialWeb.com">Mining the Social Web</a>
- <a class="reference external" href="http://amzn.to/GPd59m">book</a>
- <a class="reference external" href="http://bit.ly/MiningTheSocialWeb2E">repository</a>
- <a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd-Edition/tree/master/ipynb/">here</a>
- <a class="reference external" href="news.html">More news…</a>
- <a class="headerlink" href="#citing-ipython" title="Permalink to this headline">¶</a>
- <a class="reference external" href="citing.html">ready-made citation entry</a>
- <div class="footer" role="contentinfo">© Copyright the IPython development team. Created using<a href="http://sphinx-doc.org/">Sphinx</a>1.8.5.</div>

CSS for nav items:
div.header div.rel a {
    color: #ce5c00;
    letter-spacing: .05em;
    font-weight: bold;
}

CSS for link texts:
a {
    color: #ce5c00;
}

CSS for permalinks:
a.headerlink {
    visibility: hidden;
    color: #dddddd;
    padding-left: .3em;
}

CSS for footer text and link text:
div.footer, div.footer a {
    color: #888a85;
}

3. Justified Texts
- <div class="body" role="main">...</div>
- <p>IPython provides a rich architecture for interactive computing with:</p>
- <p>To get started with IPython in the Jupyter Notebook, see our...</p>
- <p>To learn more about IPython, you can download our...</p>
- <p>IPython supports Python 2.7 and 3.3 or newer. Our older 1.x series supports Python 2.6 and 3.2.</p>
- <div class="section" id="jupyter-and-the-future-of-ipython">...</div>
- <p>IPython is a growing project, with increasingly language-agnostic components. IPython 3.x was...</p>
- <div class="section" id="announcements">...</div>
- <p>IPython tends to be released on the last Friday of each month, this section updated rarely. Please have a look at the release history on<a class="reference external" href="https://pypi.org/project/ipython/#history">PyPI</a>.</p>
- <p><a class="reference external" href="news.html">More news…</a></p>
- <div class="section" id="citing-ipython">...</div>
- <p>Several of the authors of IPython are connected with academic and scientific research, so it is important for us to be able to show the impact of our work in other projects and fields.</p>
- <p>If IPython contributes to a project that leads to a scientific publication, please acknowledge this fact by citing the project. You can use this<a class="reference external" href="citing.html">ready-made citation entry</a>.</p>
- <div class="toctree-wrapper compound"></div>

CSS:
div.body {
    padding-right: 2em;
    text-align: justify;
}

4. Suspicious alternative text
- <img class="logo" src="_static/IPy_header.png" alt="Logo">

5. Image with title
- <img src="_static/nbviewer-thm-9.png" title="IPython Notebook Viewer">
- <img title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/jupyter-for-ds.png">

6. Suspicious link text
- <a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd Edition/tree/master/ipynb/">here</a>

Your proposed HTML (or CSS), after change

1. Adding a lang attribute to the HTML opening tag fixes the _Language missing or invalid_ error
<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;" lang="en">

2. Adjusting the CSS rule for the affected elements and changing the background color of just the "Find out more..." link text in the "Support IPython" block or the background color for that block to #ffffff fixes the _Very low contrast_ errors 

CSS for nav items:
div.header div.rel a {
    color: #C25700;
    letter-spacing: .05em;
    font-weight: bold;
}

CSS for links:
a {
    color: #C25700;
}

CSS for permalinks:
a.headerlink {
    visibility: hidden;
    color: #757575;
    padding-left: .3em;
}

CSS for footer text and link text:
div.footer, div.footer a {
    color: #767674;
}

CSS for the "Find out more..." link text in "Support IPython" side block:
div.sphinxsidebar a, div.header a {
    text-decoration: none;
    background-color: #ffffff;
}

3. Removing text-align: justify from the div.body rule fixes all the _Justified text_ alerts
div.body {
    padding-right: 2em;
}

4. Adding a more descriptive alternative text fixes the _Suspicious alternative text_ alert
- <img class="logo" src="_static/IPy_header.png" alt="This is an image of IPython's logo">

5. Replacing the title attribute with an alt attribute fixes the _Image with title_ alert
- <img src="_static/nbviewer-thm-9.png" alt="IPython Notebook Viewer">
- <img alt="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/jupyter-for-ds.png">

6. on <a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd-Edition/tree/master/ipynb/">IPython’s Notebook Viewer</a>

More info

Wave accessibility test result after the above changes have been implemented on the ipython.org page

Accessibility: page https://ipython.org/install.html

What page is this for?

#38 (comment)

WAVE accessibility report

Wave accessiblity report

1. 1 Error : 1 X Language missing or invalid.
2. 48 Contrast errors : 48 X very low contrast.
3. 18 Alerts : 14 X justified text, 1 X Suspicious alternative text, 2 X image with title, 1 X Suspicious link text.
4. 3 Features: 3 X Linked image with alternative text.
5. 18 Structural elements: 3 X Heading level 1, 5 X Heading level 3, 1 X heading level 4, 4 X Unordered list, 2 X Inline
   frame, 1 X Navigation, 1 X Main content, 1 X Footer.
6. 1 ARIA: 1X ARIA Label.

Below is the screenshot of the wave accessibility report:

The HTML element to be changed

1. Language missing or invalid: The HTML tag <html xmlns="http://www.w3.org/1999/xhtml"> has to be changed.

2. 48 X very low contrast : The CSS code color of all the following has to be change:

 <a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank">Install</a> · 
<a href="documentation.html">Documentation</a> ·
<a href="project.html">Project</a> ·
<a href="https://jupyter.org/" target="_blank">Jupyter</a> · 
<a href="news.html">News</a> · 
<a href="citing.html">Cite</a> ·
<a href="donate.html">Donate</a> ·
<a href="books.html">Books</a>
<a class="reference external" href="https://jupyter.org">Jupyter</a>
<a class="referenceexternal"href="https://ipython.org/ipythondoc/stable/interactive/reference.html#gui-event-loop-support">GUI toolkits</a>
<a class="reference external" href="https://ipython.org/ipython-doc/stable/interactive/reference.html#embedding-ipython">embeddable</a>
<a class="reference external" href="https://ipyparallel.readthedocs.io/en/latest/">parallel computing</a>
<a class="reference external"
href="http://nbviewer.ipython.org/github/ipython/ipython/blob/master/examples/Index.ipynb">official example collection
</a>
<a class="reference external" href="https://github.com/ipython/ipython/wiki/A-gallery-of-interesting-IPython-Notebooks">
notebook gallery</a>
<a class="reference internal" href="presentation.html"><span class="doc">talks and presentations</span></a>
<a class="reference external" href="documentation.html">extensive documentation</a>
<a class="reference external" href="https://github.com/ipython/ipython/wiki/Projects-using-IPython">other projects</a>
<a class="reference internal" href="#citing"><span class="std std-ref">cite the project</span></a>
<a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython">StackOverflow</a>
<a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">Mailing list</a>
<a class="reference external" href="https://github.com/ipython/ipython/issues">File a bug</a>
<a class="reference external" href="http://www.reddit.com/r/IPython"> Reddit</a>
<a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">Mailing list</a>
<a class="reference external" href="https://gitter.im/ipython/ipython">Development Chat Room</a>
<a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index">Development information</a>
<a class="reference external" href="http://travis-ci.org/#!/ipython/ipython">Travis CI</a>
<a class="reference external" href="https://github.com/ipython/ipython/wiki">Wiki</a>
<a class="reference external" href="https://jupyter.org">Jupyter</a>
<a class="reference external" href="https://pypi.org/project/ipython/#history">PyPI</a>
<a href="donate.html">Find out more...</a>
<a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version7.html">release notes</a>
<a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version6.html#ipython-6-0">release notes</a>
<a class="reference external" href="http://jupytercon.com">see the JupyterCon website</a>
<a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version5.html#ipython-5-0">
release notes</a>
<a class="reference external" href="books.html">Learning IPython for Interactive Computing and Data Visualization</a>
<a class="reference external" href="https://github.com/damianavila">Damian Avila</a>
<a class="reference external" href="http://MiningTheSocialWeb.com">Mining the Social Web</a>
<a class="reference external" href="http://amzn.to/GPd59m">book</a>
<a class="reference external" href="http://bit.ly/MiningTheSocialWeb2E">repository</a>
<a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd-Edition/tree/master/ipynb/">here</a>
<a class="reference external" href="news.html">More news…</a>
<a class="reference external" href="citing.html">ready-made citation entry</a>
<div class="footer" role="contentinfo">© Copyright the IPython development team. Created using
<a href="http://sphinx-doc.org/">Sphinx</a>1.8.5.</div>
<a href="http://sphinx-doc.org/">Sphinx</a>

Here is the CSS code that has to be change:

a {
  color: #ce5c00;  
}

div.header div.rel a {
  color: #ce5c00;
  letter-spacing: .05em;
  font-weight: bold;
}

div.footer, div.footer a {
  color: #888a85;
}

3. 18 Alerts:
   a) 14 X justified text: The fully justified text has to be change in the CSS for the following:

<div class="body" role="main">.................................................</div>
<p>IPython provides a rich architecture for interactive computing with:</p>
<p>To get started with IPython in the Jupyter Notebook, see our .....</p>
<p>To learn more about IPython, you can download our.........</p>
<p>IPython supports Python 2.7 and 3.3 or newer. Our older 1.x series supports Python 2.6 and 3.2.</p>
<div class="section" id="jupyter-and-the-future-of-ipython"> ................................................</div>
<p>IPython is a growing project, with increasingly language- .........</p>
<div class="section" id="announcements">.....</div>
<p>IPython tends to be released on the last Friday of each month, this section updated rarely........</p>
<p><a class="reference external" href="news.html"></a></p>
<div class="section" id="citing-ipython">..........</div>
<p>Several of the authors of IPython are connected with academic and scientific research, .......</p>
<p>If IPython contributes to a project that leads to a scientific publication, please acknowledge ........</p>
<div class="toctree-wrapper compound"></div>
Here is the CSS code to change:
div.body {
  padding-right: 2em;
  text-align: justify;
}

 b) 1 X Suspicious alternative text: The image tag `<img class="logo" src="_static/IPy_header.png" 
          alt="Logo">` has to be change.
 c) 2 X image with title: The image tag `<img src="_static/nbviewer-thm-8.png" title="IPython 
                           Notebook Viewer">` and `<img title="Packt Publishing donates a portion of 
                           the proceeds from this book to support IPython's development." 
                           width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 
                           10px;" src="_static/ipython-cookbook-2nd.png">` has to be change.
   d) 1 X Suspicious link text: The link `<a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd Edition/tree/master/ipynb/">here</a> `has to be changed.

4. 3 Features: 3 X Linked image with alternative text : These tag images which is within the links has to be change. They are ; <img class="logo" src="_static/IPy_header.png" alt="Logo"> , <img src="_static/jupytercon-logo.svg" width="180px" alt="JupyterCon 2017"> and <img alt="IPython clients" src="_images/ipy_0.13.png" style="width: 400px;">.

Your proposed HTML (or CSS), after change

1. Add a lang attribute to the html element whose value represents the primary language of document.
   i.e <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

2. If the background is light, then the text color has to be dark enough so users with low vision will be able to read the text. so by changing #ce5c00 color to #c25700, the #888a85 to #6D746D the contrast errors is fix .

a {
  color: #c25700;  
}

div.header div.rel a {
  color: #c25700;
  letter-spacing: .05em;
  font-weight: bold;
}

div.footer, div.footer a {
  color: #6D746D;
}

3. 18 Alerts :
   a) Removing the justified styling will fix the alert .i.e

                                    div.body {
                                                       padding-right: 2em;
                                                        }

b) Alternative text should describe what is on the image. It is very important for screen readers because it
allows describing the content of the image to the user.
i.e <img class="logo" src="_static/IPy_header.png" alt="IPython image Logo">

c) Image alt value is used to describe an image textually so that screen readers user can understand what that image is. On the other hand, the image title value is simply used to provide an image with a title, but it’s less important for screen readers user than the alt value. So by replacing the title value by alt attribute value will fix the error alert. i.e

<img src="_static/nbviewer-thm-8.png" alt="IPython Notebook Viewer"> 
 <img alt="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." 
             width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/ipython-cookbook- 
                          2nd.png"> 

d) Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text like "click here”, here ..... So replacing "here" by "IPython’s Notebook Viewer" fix the alert. i.e

<a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd Edition/tree/master/ipynb/">IPython’s Notebook Viewer</a> 

More info

No response

Accessibility: jupyter.org/install

What page is this for?

https://docs.jupyter.org/en/latest/install.html

WAVE accessibility report

1 X Missing alternative text
Missing alternative text
1 X Empty form label
24 X Very low contrast

The HTML element to be changed

<img src="_static/jupyter.svg" class="logo__image only-light" alt="Logo image">
<img src="_static/jupyter.svg" class="logo__image only-dark" alt="Logo image">

<label for="toctree-checkbox-1">
<i class="fas fa-chevron-down"></i>
</label>

<a class="reference internal" href="install/kernels.html" style="color: rgb(69, 157, 185); background-color: rgb(255, 255, 255);">
Installing Kernels
</a>

<a class="current reference internal" href="#">
Install and Use
</a>
<a class="reference internal" href="install/kernels.html#how-do-i-install-python-2-and-python-3">
How do I install Python 2 and Python 3?
</a>
<a class="reference internal" href="install/kernels.html#how-do-i-install-other-languages-like-r-or-julia">
How do I install other languages like R or Julia?
</a>

<p class="prev-next-title">
Try Jupyter
</p>

<p class="prev-next-title">
Installing the classic Jupyter Notebook interface
</p>

<a href="http://sphinx-doc.org/">
Sphinx
</a>

Your proposed HTML (or CSS), after change

//add a comprehensive alternative text
<img src="_static/jupyter.svg" class="logo__image only-light" alt="jupyter Logo image">
<img src="_static/jupyter.svg" class="logo__image only-dark" alt="jupyter Logo image">

//remove the label tag
<i class="fas fa-chevron-down"></i>

//improving text contrast
<a class="reference internal" href="install/kernels.html" style="mix-blend-mode: difference;
color: rgb(69, 157, 185); background-color: rgb(255, 255, 255);">
Installing Kernels
</a>

<a class="current reference internal" href="#" style="mix-blend-mode: difference;">
Install and Use
</a>
<a style="mix-blend-mode: difference;" class="reference internal" href="install/kernels.html#how-do-i-install-python-2-and-python-3">
How do I install Python 2 and Python 3?
</a>
<a style="mix-blend-mode: difference;" class="reference internal" href="install/kernels.html#how-do-i-install-other-languages-like-r-or-julia">
How do I install other languages like R or Julia?
</a>

<p class="prev-next-title" style="mix-blend-mode: difference;">
Try Jupyter
</p>

<p class="prev-next-title" style="mix-blend-mode: difference;">
Installing the classic Jupyter Notebook interface
</p>

<a href="http://sphinx-doc.org/" style="mix-blend-mode: difference;">
Sphinx
</a>

More info

No response

Accessibility:

What page is this for?

https://jupyter.org/governance/conduct/reporting_events.html

WAVE accessibility report

• Missing language attribute: The language of the document is not specified.
• Redundant link: Adjacent links have the same destination URL.
• Suspicious link: A link text is not clearly worded.
• Empty button: A button on the page has no value text.

The HTML element to be changed

1. <html>



2. Email:
Redundant link
<a class="reference external" href="mailto:conduct%40jupyter.org">
<em>
conduct
<span>
@
</span>

jupyter
<span>
.
</span>

org
</em>
</a>

3. You also have the option of following the reporting procedure for the online community found
<a class="reference external" href="https://goo.gl/forms/sJzOIie3zde9M71T2">
here
</a>


4. <button onclick="toggleFullScreen()" class="headerbtn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Fullscreen mode">
<span class="headerbtn__icon-container">
<i class="fas fa-expand"></i>
</span>
</button>

Your proposed HTML (or CSS), after change

1. <html lang = "en">

2. <a class="reference external" href="mailto:conduct%40jupyter.org">[email protected]</a>


3. You also have the option of following the reporting procedure for the online community found
<a class="reference external" href="https://goo.gl/forms/sJzOIie3zde9M71T2">
in the code of conduct.
</a>


4. <button onclick="toggleFullScreen()" class="headerbtn" value="fullscreen-toggle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Fullscreen mode">
<span class="headerbtn__icon-container">
<i class="fas fa-expand"></i>
</span>
</button>

More info

No response

Accessibility: IPython's homepage

What page is this for?

https://ipython.org/

WAVE accessibility report

• The document's language is not identified or a lang attribute value is invalid.
• Very low contrast between text and background colours. The current colour contrast is 4.07:1 instead of 4:5:1
• Fully justified text is present.
• Alternative text is likely insufficient or contains extraneous information.
• An image has a title attribute value but no alt value.
• Link text contains extraneous text or may not make sense out of context.

The HTML element to be changed

1. <html xmlns="http://www.w3.org/1999/xhtml">

2. HTML
<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank">
Install
</a>

CSS
body {
  background-color: #fff;
}
a {
  color: #CE5C01;
}

3. HTML
<p>
To get started with IPython in the Jupyter Notebook, see our <a class="reference external" href="http://nbviewer.ipython.org/github/ipython/ipython/blob/master/examples/Index.ipynb">
official example collection
</a>
<a class="reference external" href="https://github.com/ipython/ipython/wiki/A-gallery-of-interesting-IPython-Notebooks">
notebook gallery
</a>
is an excellent way to see the many things you can do with IPython while learning about a variety of topics, from basic programming to advanced statistics or quantum mechanics.
</p> etc

CSS 
p {
  text-align: justify;
}

4. <img class="logo" src="_static/IPy_header.png" alt="Logo">

5. <img src="_static/nbviewer-thm-9.png" title="IPython Notebook Viewer">

6. on IPython’s Notebook Viewer
<a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd-Edition/tree/master/ipynb/">
here
</a>

Your proposed HTML (or CSS), after change

1. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
2. HTML
<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank">
Install
</a>

CSS
body {
  background-color: #fff;
}
a {
  color: #bd5500; // increases the contrast to 4.7:1 which passes WCAG Guidelines.
}
3. 
CSS 
p {
  text-align: left;
} // makes it more readable without word breaks

4. <img class="logo" src="_static/IPy_header.png" alt="IPython Interactive Computing Logo">

5. <img src="_static/nbviewer-thm-9.png" alt="IPython Notebook Viewer">

6.<a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd-Edition/tree/master/ipynb/">
on IPython’s Notebook Viewer
</a> // the name of the page rather than a generic here

More info

Not in the wave report but semantic HTML can be used to improve and help screen readers easily know what part they are on

<div class="header-wrapper">
<div class="header">

can be changed to:

<header class="header">
<nav class="nav">

Another snippet:

<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">

can be changed to:

<section class="sphinxsidebar" aria-label=sidebar navigation">
<aside class="sphinxsidebarwrapper">

It makes the code more readable and accessible to tools and devices

Applicants: Record contributions and submit applications

Outreachy applicants! The Application deadline for JupyterHub is coming soon, on October 30. Please make sure to record your contributions and submit your applications on the Outreachy website.

Add server_stop_duration_seconds prometheus metric

See jupyterhub/jupyterhub#2171

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Add server_poll_duration_seconds prometheus metric

See jupyterhub/jupyterhub#2185

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Accessibility: Improve Accessibility of IPython Project Page

What page is this for?

https://ipython.org/project.html

WAVE accessibility report

Evaluation Tools Used:

1. Wave Accessibility Tool
2. Colour Contrast Checker

1. Errors
1 X Language missing or invalid: The language of the document is not identified or a lang attribute value is invalid.

2. Contrast Errors
24 X Very low contrast: Very low contrast between text and background colors.

3. 6 X Alerts
3 X Justified text: Fully justified text is present.

1 X Suspicious alternative text: Alternative text is likely insufficient or contains extraneous information.

2 X Image with title: An image has a title attribute value but no alt value.

The HTML element to be changed

<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;">


<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Install</a>

<a href="documentation.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Documentation</a>

<a href="#" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Project</a>

 <a href="https://jupyter.org/" target="_blank" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Jupyter</a>

<a href="news.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">News</a>

 <a href="citing.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Cite</a>

 <a href="donate.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Donate</a>

<a href="books.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Books</a>


 <li><a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Stack Overflow</a></li>

 <li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Mailing list</a></li>


 <li><a class="reference external" href="https://github.com/ipython/ipython/issues" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">File a bug</a></li>

<li><a class="reference external" href="http://www.reddit.com/r/IPython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Reddit</a></li>

 <li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Mailing list</a></li>


 <li><a class="reference external" href="https://gitter.im/ipython/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Development Chat Room</a></li>


<li><a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Development information</a></li>

<li><a class="reference external" href="http://travis-ci.org/#!/ipython/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Travis CI</a></li>


<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Wiki</a></li>


<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Wiki</a></li>

<a href="donate.html" style="color: rgb(206, 92, 0); background-color: rgb(225, 232, 236);">Find out more...</a>

<a class="reference external" href="https://github.com/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">ipython</a>

<a class="reference external" href="https://jupyter.org/" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Project Jupyter</a>`


`<img class="logo" src="_static/IPy_header.png" alt="Logo">


<img src="_static/nbviewer-thm-1.png" title="IPython Notebook Viewer">

<img title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/learning-jupyter-book.png">

Your proposed HTML (or CSS), after change

<!--1. Errors-->
<!--Insert Lang attribute in html tag-->
<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;" lang= "en">


<!--2. Contrast Errors
Improve the contrast of the link by changing the color style from rgb(206, 92, 0) to rgb(140, 45, 1)-->

<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Install</a>

<a href="documentation.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Documentation</a>

<a href="#" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Project</a>

 <a href="https://jupyter.org/" target="_blank" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Jupyter</a>

<a href="news.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">News</a>

<a href="citing.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Cite</a>

<a href="donate.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Donate</a>

<a href="books.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Books</a>


<li><a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Stack Overflow</a></li>

<li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Mailing list</a></li>

<li><a class="reference external" href="https://github.com/ipython/ipython/issues" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">File a bug</a></li>

<li><a class="reference external" href="http://www.reddit.com/r/IPython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Reddit</a></li>

<li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Mailing list</a></li>


 <li><a class="reference external" href="https://gitter.im/ipython/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Development Chat Room</a></li>


<li><a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Development information</a></li>

<li><a class="reference external" href="http://travis-ci.org/#!/ipython/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Travis CI</a></li>


 
<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Wiki</a></li>


<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Wiki</a></li>

<a href="donate.html" style="color: rgb(140, 45, 1); background-color: rgb(225, 232, 236);">Find out more...</a>

<a class="reference external" href="https://github.com/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">ipython</a>

<a class="reference external" href="https://jupyter.org/" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Project Jupyter</a>

<!--3. 6 X Alerts
1 X Suspicious alternative text: Let the screen reader know this is an image through alternative text and make it more descriptive.-->

<img class="logo" src="_static/IPy_header.png" alt="IPY header Image logo">


<!--2 X Image with title: alternative attribute used instead of title attribute.-->

<img src="_static/nbviewer-thm-1.png" alt="IPython Notebook Viewer">

<img title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/learning-jupyter-book.png" alt="Packt Publishing image IPython's development">

More info

I will suggest using semantic elements like <main>, <headaer>, <footer>, <article>, <nav> etc where appropriate instead of <div> all through.
Semantic Elements are paramount because they make our code easy to read, accessible, and equally lead to a more consistent code.
This will improve how screen readers read and interpret our web pages, hence, improved accessibility.

Accessibility: improving the HTML of IPython page according to WAVE tool

What page is this for?

https://ipython.org/usersurvey2011.html

WAVE accessibility report

Errors

• 1x Language missing or invalid
• 30x Very low contrast

Alerts

• 27x justified text
• 5x suspicious alternative text
• 2x image with title
• 1x suspicious link text

Features

• 2x linked image with alternative text
• 21x structural elements
• 1x aria label

The HTML element to be changed

1. <html> without attribute `lang`

2. increase `font-size` in CSS for better legibility

3. `color: #ce5c00` of links

4. `<a class="headerlink" href="#ipython-user-survey-2011" title="Permalink to this headline" style="color: rgb(221, 221, 221); background-color: rgb(255, 255, 255);">`

5. `text-align: justify` from the tag `<body>`

6. `<img class="logo" src="_static/IPy_header.png" alt="Logo">`

7. `<img alt="_images/countries.png" src="_images/countries.png">`

8. `<img alt="_images/platforms.png" src="_images/platforms.png">`

9. `<img alt="_images/partsused.png" src="_images/partsused.png">`

10. `<img alt="_images/sector.png" src="_images/sector.png">`

11. `<img alt="_static/nbviewer-thm-1.png" title="IPython Notebook Viewer">`
(also, the link is not working)

12. `<img id="sidebar-book-cover" title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." style="margin-bottom: 10px;" src="_static/learning-jupyter-book.png" width="160" height="200">`

13. `<a class="reference external" href="https://docs.google.com/spreadsheet/ccc?key=0AqIElKUDQl8tdDMzREtNSk9pX282N3lxaXhiTmxyN0E&authkey=CNOmu-QC&hl=en_GB&authkey=CNOmu-QC" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">here</a>`

Your proposed HTML (or CSS), after change

1. including HTML lang attribute: `<html lang="en">`

2. `font-size: 18`

3. `color: #8f3f00` of links, `a`s (or any other darker shade of orange, to increase contrast from background color)

4. class `headerlink` to `"color: rgb(51, 51, 51); background-color: rgb(242, 242, 242);">`

5. `text-align: left`

6. <img class="IPython_header" src="_static/IPy_header.png" alt="IPython logo: IP[y]: IPython Interative Computing">

7. `<img alt="Pie chart illustrating the number in percentages of respondents according to their countries, with USA having the majority of them, followed by the UK, Germany, France, Canada, Austria and Spain" src="_images/countries.png">`

8. `<img alt="Bar graph demonstrating users from different platforms of IPhyton: Windows, Mac OS X, Linux and Other" src="_images/platforms.png">`

9. `<img alt="Bar graph that depicts usage of IPython: Interactive shell, Parallel computing and Other, close to 30%" src="_images/partsused.png">`

10. `<img alt="Bar graph stating that the IPython is used mostly for academic reasons, and for, Industry and Hobby" src="_images/sector.png">`

11. `<img alt="Example of a graph used in Matplotlib" title="IPython Notebook Viewer" src="correctlink.com">`

12. `<img id="sidebar-book-cover-jupyter-for-all" alt="Cover of the book Jupyter Notebook for All - Part II: Interactive computing made easy" title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." style="margin-bottom: 10px;" src="_static/learning-jupyter-book.png" width="160" height="200">` (the ID would have to be changed as well, since the alt changes according to the book)

13. `<a class="reference external" href="https://docs.google.com/spreadsheet/ccc?key=0AqIElKUDQl8tdDMzREtNSk9pX282N3lxaXhiTmxyN0E&authkey=CNOmu-QC&hl=en_GB&authkey=CNOmu-QC" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">in this external spreadsheet</a>.`

More info

I didn't create a comment regarding this evaluation in #38; I did a comment on another page, though (a simpler one).

Move simplespawner into JupyterHub

See jupyterhub/jupyterhub#2168

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Clean up the repo

Let's perform some clean up steps on this repo!

• Close contribution issues from previous rounds of Outreachy
• Both of the below tasks are addressed by #47
  • (re)Move the code in this repo elsewhere (it was specific to the last cohort's tasks)
  • Move the project proposals elsewhere
    • I'm thinking of moving to an issue ticket system for project proposals as opposed to committing them to the repo #46

Allow users to reset their own passwords with First Use Authenticator

FirstUseAuthenticator is a JupyterHub authenticator where the first password a user uses is considered their password of record. This works great for simple use cases, but is problematic when users need to reset their own password.

For this task, make a GitHub Pull Request to the FirstUseAuthenticator github repo with a feature that lets users change their own passwords:

1. Providing a web page at a custom URL - /auth/change-password. Users need to manually go to this URL to change their passwords.
2. A text box for users to enter new password. Another for them to type it again so it can be confirmed.
3. A 'confirm change' button that when pressed, sets it as the new user password

Helpful links:

1. Tornado tutorial: http://www.tornadoweb.org/en/stable/
2. https://jupyterhub.readthedocs.io/en/stable/reference/authenticators.html#how-to-write-a-custom-authenticator has information on how authenticators work
3. https://github.com/yuvipanda/jupyterhub-simplespawner is a useful spawner class to test authenticator implementations
4. https://github.com/jupyterhub/oauthenticator/blob/master/oauthenticator/globus.py#L223 example of adding custom web pages to authenticators

Getting Help:

Comment on this issue, or ping us on Gitter for help!

Create a new labelling system for the repo

As well as contribution issues, I'm thinking of turning the process of scoping project proposals into an issue-based system as well. As a part of that, I'd like to refactor the labels a bit to help distinguish between the two.

So the main labelset should be a type: label with options of either contribution issue or project proposal

For contribution issue types

• Keep the multiple label to identify tasks which can be worked on by multiple applicants
• Keep the assigned label for tasks where only one applicant can tackle them at a time and the issue is no longer available to be picked up
  • I think we should try to minimise the amount of contribution issues we create like this though
• A level: labelset with options beginner, intermediate, advanced so applicants can get a rough idea of how difficult the task should be and we can create growth pathways through the contribution phase
• A "cohort" label indicating which round of Outreachy these issues pertain to, e.g., outreachy-dec22

For the project proposal type

• A needs: mentor label: We shouldn't assume that the person who proposes a project idea has to be the one who mentors it and we can use this label to advertise projects as needing a mentor
• A status: label indicating where in the process this project proposal is
  • scoping: project description is being written up
  • submitted: the project has been submitted to the Outreachy platform
  • intern assigned: we were successful in finding an intern for this project and it will be going ahead
    • Could also share the "cohort" label defined above
  • no intern found: we were not successful in finding an intern for this project, we could resubmit it in a future round

Accessibility:

What page is this for?

https://jupyter.org/governance/overview.html

WAVE accessibility report

In reviewing the above page I came a cross the following

1. form label is present, but does not contain any content.
   A <label> element that is associated to a form control but does not contain text will not present any information about the form control to the user.

<label for="__navigation" class="headerbtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Toggle navigation">
<span class="headerbtn__icon-container">
<i class="fas fa-bars"></i>
</span>
</label>

Suggested changes
Ensure that the form label contains text that describes the function of the associated form control. Labels are not required for image, submit, reset, button, or hidden form controls. If a label is not necessary visually, a descriptive title attribute may be added to the form control.
2.The language of the document is not identified or a lang attribute value is invalid. <base href="https://jupyter.org/governance/overview.html">
Suggested changes
Identify the document language using the attribute with a valid value (e.g., ). Ensure that all lang attribute values are valid.
3. A form control has more than one label associated with it. <input type="checkbox" class="sidebar-toggle" name="__page- toc" id="__page-toc" aria-label="Toggle in-page Table of Contents">
Suggested changes
Ensure that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby or to wrap the input in the label

4. Suspicious link text. Link text contains extraneous text or may not make sense out of context.

<p>
More details on these can be found
<a class="reference internal" href="standing_committees_and_working_groups.html">
<span class="doc std std-doc">
here
</span>
</a>

Suggested changes
Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text (such as "click here").

The HTML element to be changed

**Suggested elements to be changed**
1.One way to solve this is with visually hidden text, which assistive technology can access but is not visible on the screen visually. Using the visually-hidden class.
<span class="theme-switch-wrapper">
     <label for="__page-toc" class="headerbtn headerbtn-page-toc">
<span class="headerbtn__icon-container">
<i class="fas fa-list"></i>
</span>
<span class="visually-hidden">Label for the input</span>
</label>
</span>
2.Adding lang attribute
<base href="https://jupyter.org/governance/overview.html">`
3.One way to fix this other than changing IDs is to wrap the input in the label.
<label>
    <input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar">
<input />
</label
4.Reword the link
<p>
More 
<a class="reference internal" href="standing_committees_and_working_groups.html">
<span class="doc std std-doc">
details on these can be found
</span>
</a>

Your proposed HTML (or CSS), after change

1. css for the visuallly hidden class for the label will look like this 
.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px, 1px, 1px, 1px); 
    clip-path: inset(50%); 
    white-space: nowrap; 
}

More info

No response

Add 'check_routes_duration_seconds' metric to JupyterHub

See jupyterhub/jupyterhub#2183

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Write a simple async commandline client to list items from etcd

This task is to help you learn & understand how to run etcd, and talk to it from Python asynchronously.

To complete this task, you should:

1. Setup etcd on your computer
2. Write a simple commandline client using python-etcd that connects to etcd & lists all keys (& their values) that start with a given prefix.
3. Write a few unit tests for this with pytest
4. Publish this code on GitHub

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here if you have questions :)

Improve a page of JupyterHub documentation

Documentation can go stale very quickly in active projects and often there's always someway it can be improved. Maybe some setup steps have changed; the wording is a little confusing and could be clearer; maybe adding a screenshot or diagram will help? This task invites you to make an improvement to one of our documentation pages and will test your technical writing skills alongside git/GitHub workflows.

Many applicants can work on this issue at the same time.

1. Select a page of the documentation you'd like to improve from this spreadsheet by adding your GitHub handle to the "Work in progress" column. It's ok to pick a page if there is a name in the "Done" column, but try to avoid picking a page that already has someone's name in the "Work in progress" column. This will help us reduce merge conflicts later on.
2. Make your improvements to the page
   • Fork the jupyterhub repo
   • Create a new branch on your fork to track your work on. You should make changes to the docs on this branch.
3. Open a Pull Request from your fork to the jupyterhub repo.
4. Once your PR has been merged, move your GitHub handle from the "Work in progress" column to the "Done" column in the spreadsheet

Update

This microtask will be closed to new applicants on Monday 24th October (end of day UK time).

Please make sure your contributions are recorded and begin your final application on the Outreachy website. If your issue/PR is still open when we close this project, it will still count as a contribution. Closing the project will not affect your ability to record contributions and make your final applications.

Add 'running_servers' prometheus metric to JupyterHub

See jupyterhub/jupyterhub#2170

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Accessibility:

What page is this for?

https://mybinder.org/

WAVE accessibility report

The HTML element to be changed

1. <div id="banner-container">
<div style="display:flex;align-items:center;">
<div style="flex:1;text-align:center;">
Thanks to
Very low contrast
<a href="https://cloud.google.com/">
Google Cloud
</a>

,
Very low contrast
<a href="https://www.ovh.com/">
OVH
</a>

,
Very low contrast
<a href="https://notebooks.gesis.org">
GESIS Notebooks
</a>

and the
Very low contrast
<a href="https://turing.ac.uk">
Turing Institute
</a>

for supporting us! 🎉
</div>
Device dependent event handlerVery low contrast
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>
</div>
</div>

2. <div id="logo-container">
Missing alternative text
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px">
</div>


3. <a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank"> 🤍 Donate to mybinder.org! </a>

4. <div class="container">
<div class="row text-center">
Heading level 3
<h3>
questions?
<br>

join the
<a href="https://discourse.jupyter.org/c/binder">
discussion
</a>

, read the
<a href="https://mybinder.readthedocs.io/en/latest/">
docs
</a>

, see the
<a href="https://github.com/jupyterhub/binderhub">
code
</a>
</h3>
</div>
</div>

Your proposed HTML (or CSS), after change

<nav>
     <div id="banner-container">
<div style="display:flex;align-items:center;">
<div style="flex:1;text-align:center;">
Thanks to
Very low contrast
<a href="https://cloud.google.com/">
Google Cloud
</a>

,
Very low contrast
<a href="https://www.ovh.com/">
OVH
</a>

,
Very low contrast
<a href="https://notebooks.gesis.org">
GESIS Notebooks
</a>

and the
Very low contrast
<a href="https://turing.ac.uk">
Turing Institute
</a>

for supporting us! 🎉
</div>
Device dependent event handlerVery low contrast
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>
</div>
</div>
<nav>


2. <div id="logo-container">
Missing alternative text
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px" alt="binder logo">
</div>


3. <a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onfocus="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" onfocus="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank"> 🤍 Donate to mybinder.org! </a>

4. <footer>
   <div class="container">
<div class="row text-center">
Heading level 3
<h3>
questions?
<br>

join the
<a href="https://discourse.jupyter.org/c/binder">
discussion
</a>

, read the
<a href="https://mybinder.readthedocs.io/en/latest/">
docs
</a>

, see the
<a href="https://github.com/jupyterhub/binderhub">
code
</a>
</h3>
</div>
</div>
<footer>

More info

No response

Benchmark JupyterHub proxy

We have the workings of a proxy benchmark suite in https://github.com/minrk/chpbench . This will be really useful as we start to develop the traefik proxy implementation.

This repo should be reorganized to use airspeed velocity to run benchmarks, instead of a standalone script.

The first task should be to restructure the current code and two existing benchmarks (single_run_ws and single_run_http) into asv benchmark functions, and run them on travis.

Remember, you don't need to already know how to do all this! We'll help you. Respond to the issue here or on gitter if you have questions :)

Categorise a subset of JupyterHub's web pages into the Diataxis framework

We would like to transform our documentation to follow the diataxis framework. This microtask will begin the mapping process of our current docs onto the framework.

Many Outreachy applicants can work on this issue at the same time.

1. Familiarise yourself with the diataxis framework. There's a YouTube video if you prefer to listen: https://www.youtube.com/watch?v=t4vKPhjcMZg
2. Select a high-level documentation section from the JupyterHub website (https://jupyterhub.readthedocs.io/en/stable/), e.g. Administrator's Guide
3. For each sub-section, map where on the four quadrants of the diataxis framework each page of the documentation sits. You can use any software you like for this, for example, Miro. Or even just a pen and paper!
4. Upload a screenshot / link / photograph of your mapping as a comment on the issue and tell us a little bit about what you learned using the following questions as prompts (A couple of sentences is fine! We are not expecting an essay for this 🙂 ):
   a. What does the mapping tell you about the current state of our documentation?
   b. Where would you create more documentation to help a user or a developer?
   c. Could the present documentation be redistributed more evenly across the quadrants? How so?
   d. Did you find a particular page that could be improved or changed? What would you like to see happen that would improve it?

Update

This microtask will be closed to new applicants on Monday 24th October (end of day UK time).

Please make sure your contributions are recorded and begin your final application on the Outreachy website. If your issue/PR is still open when we close this project, it will still count as a contribution. Closing the project will not affect your ability to record contributions and make your final applications.

Accessibility:

What page is this for?

https://ipython.org/usersurvey2013.html

WAVE accessibility report

WAVE Report of https://ipython.org/usersurvey2013.html including the evaluation and my suggestions.

Evaluation:

1. (1)Error:(Language missing or invalid): This means the language of the document isn't identified or the lang attribute value is invalid. This affects how screen readers read the content of the page in the appropriate language. It also affects automatic translation of the content on the page.
Suggestion: I would add the lang="en" attribute and value to the<html></html> tag, being that the page is in English. "en" is the valid value for a page with content in English.

2. (35) Contrast Errors: (Very Low Contrast): There is low contrast between the text color and it's background colors. High color contrast is very necessary for readability, especially for low vision users.
Suggestion: For the first 17 contrast errors I will make the text colors a deeper red. The likes of maroon #800000 or burgundy #800020. I would also increase the contrast by increasing the font-weight of the text. For the next contrast errors that are permalinks embedded in icons I would increase the opacity property of the icons to a value closer to 1 or their color to black #000000. For the copyright text in the footer section of the page I would change the text color to a darker gray #696969.

3. ALERTS: Justified Text(42): Fully justified text present. This affects readability of text due to the large spacing of words, as a result of align:justify styling on the text.
Suggestion: I would remove the styling property from whichever tag has that property.

4. ALERTS: Suspicious alternative text(9): Alternative text is insufficient or contains vague text that isn't descriptive enough. Alternative text of an image is meant to be descriptive enough to aid screen readers have an idea of what the image is, or else that information wouldn't be available to them. It also assists in times when the images isn't available for whatever reasons.
Suggestion: 1st alert- for the logo of the IPython: Interactive Computing page alt="Logo" I would change the alt text to alt="IPython Logo".
2nd alert- for the pie chart of result countries for spread data alt="_images/countries1.png" I would change the alt text to alt="Pie Chart of the result countries from the spreadsheet cleaned data ".
For the other alt texts of the graphs, I would make them descriptive enough to describe the data they hold.

5. ALERTS: Image with title(2): The image has a title attribute and no alternative text. Alternative text provides a better accessibility and should be used. Whereas the title attribute will generate a mouse hover tooltip which more or may not be desired - this tooltip will not be presented to touch screen or keyboard users.
Suggestion: I would add an Alternative text to the images and describe them accordingly.

The HTML element to be changed

A.) <html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;">...</html>
B.) <a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank">
Install
</a>
C.) <a class="reference external" href="https://docs.google.com/spreadsheet/pub?key=0AqIElKUDQl8tdHF2WmlKdTZTRlZVRGFGTDgtUXFBVUE&output=html">
a Google Spreadsheet
</a>
D.) <div class="footer" role="contentinfo">
© Copyright the IPython development team. Created using
Very low contrast
<a href="http://sphinx-doc.org/" style="color: rgb(136, 138, 133); background-color: rgb(255, 255, 255);">
Sphinx
</a>
E.) <img class="logo" src="_static/IPy_header.png" alt="Logo">
F.) <img alt="_images/countries1.png" src="_images/countries1.png" style="width: 697.5px; height: 459.0px;">

Your proposed HTML (or CSS), after change

A.) <html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;">...</html>
B.) CSS: a{
color: #800000; 
}
C.) CSS: a{
opacity: 0.8;
color: #000000;
}
D.) <div class="footer" role="contentinfo">
© Copyright the IPython development team. Created using
Very low contrast
<a href="http://sphinx-doc.org/" style="color:#696969 ; background-color: rgb(255, 255, 255);">
Sphinx
</a>
E.) <img class="logo" src="_static/IPy_header.png" alt="IPython Logo">
F.) <img alt="Pie Chart of the result countries from the spreadsheet cleaned data" src="_images/countries1.png" style="width: 697.5px; height: 459.0px;">

More info

I would like to change the <div> for the footer section to a <footer> tag for a more semantic HTML5 codebase.

Implement and integrate a simple pytest plugin

We would like to create a reusable JupyterHub pytest plugin to improve the testing infrastructure of the hub's main components, the proxy, authenticator and spawner. This microtask will exercise the skills and tools relevant to the JupyterHub pytest plugin project.

Multiple Outreachy applicants can work on this issue at the same time.

1. Use the pytest plugin cookiecutter to create a new pytest plugin project.
   Create a GitHub repository under your account and add this project there.

2. Create a simple fixture that returns a FirstUseAuthenticator object with min_password_length of 10 chars (example here). Make this fixture available through the new pytest plugin project you just created.

3. Create your own fork of the https://github.com/jupyterhub/firstuseauthenticator repository. Into this fork, install the plugin you just created and re-write the last part of this test into a separate test function that uses this plugin.

4. Run the tests locally and make sure they all pass.

5. GitHub Actions are not enabled by default in forked repositories. To see the tests running in the Actions tab, enable them for your FirstUseAuthenticator fork. Find out how to do this, from the GitHub docs here.

6. When you are done, open up a new 🧩 Pytest plugin task issue to share the link your to your firstuseauthenticator fork and your plugin.

Helpful resources:

• pip docs on how to install a pip package from GitHub
• pytest docs on writing plugins
• GitHub docs on how to fork a repository

Update:

Please note that it is not a requirement to have a local instance of JupyterHub running for this microtask, but you will need it in the project afterwards.