Giter Club home page Giter Club logo

maskmath's Introduction

All Contributors

An Explorable Essay on How Masks Can End COVID-19

Created by Aatish Bhatia in collaboration with Henry Reich / Minute Physics.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Aatish Bhatia

🚧

Henry

πŸ€”

Adi Vaknin

🌍 πŸ’»

Nicolas Lehuen

🌍

Alban nablA

🌍

gnegrelligarcia

🌍 πŸ›

Ulkar Aghayeva

🌍

Ishan Goel

πŸ“–

mariapaula9926

🌍

Ξ Ξ±Ξ½Ξ±Ξ³ΞΉΟŽΟ„Ξ·Ο‚ Ξ“Ξ΅Ο‰ΟΞ³Ξ±ΞΊΟŒΟ€ΞΏΟ…Ξ»ΞΏΟ‚

🌍

ismarou

πŸ‘€

progproc

🌍

Andriy Kvasnytsya

🌍 πŸ’»

khakim assidiqi

🌍

Ali Sabzevari

🌍

fbuters

🌍

dvirgili

🌍

morethanoneanimal

🌍

kasiarzynaLu

🌍

monika-brandys

🌍

Darinka Zobenica

🌍

bojanastojanova

🌍

Kisaragi Hiu

🎨

jaewoo sung

🌍

This project follows the all-contributors specification. Contributions of any kind welcome!

Learn More

A writeup of the mathematical results behind this essay can be found here.

Add a Translation

We welcome translations into more languages! Here's a guide on how to contribute a translation.

Licenses

The text of the essay is published under a Creative Commons CC BY-NC 4.0 license. The code is open source and published under the MIT License. The emojis are licensed by Twitter and were modified to include a custom mask design.

Libraries

This interactive uses the following libraries:

Remix This

If you're adapting this article somehow or using it for educational purposes, feel free to drop me a line. I'd love to hear what you do with it.

Support Interactive Essays

If you'd like to see more interactive essays like this, please consider supporting my work on Patreon. Your support makes this work possible!

maskmath's People

Contributors

aatishb avatar albannabla avatar alisabzevari avatar allcontributors[bot] avatar bojanastojanova avatar deepspace2 avatar dev-owner avatar dvirgili avatar fbuters avatar gnegrelligarcia avatar mariapaula9926 avatar mentathiel avatar morethanoneanimal avatar nlehuen avatar pankgeorg avatar professor-k avatar progproc avatar quackduck avatar ulkar-aghayeva avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

maskmath's Issues

Contributor's Guide: Adding Translations

Contributor's Guide: Adding Translations

Thanks for your interest in contributing translations to this interactive essay!

This step-by-step guide is written assuming that this may be your first time contributing on GitHub. If you have questions or concerns, you can leave a comment below, open a new issue, or send me an email. If you're familiar with Github, you can skim through this guide.

We encourage contributions of all kinds, including from first-time GitHub contributors, and are acknowledging all contributions on the Github Page using the All Contributors system.

Steps to Contribute a Translation

  • Sign up for a Github Account if you don't already have one.

  • So that we don't double our efforts, first check if anyone is already working on this translation in the comment thread below. If no one is translating to this language, leave a comment below letting us know that you would like to proceed with a translation (don't forget to include the language you're translating to!) If someone else is already working on a translation for this language, we can still use your input in verifying & improving this translation. For example, you can review Pull Requests submitted by other translators.

  • On the Github Page for maskmath, click the Fork button on the top right. This will create your own personal copy of the contents of this website.
    Screen Shot 2020-09-09 at 4 29 01 PM

  • Next, set up a live website for your fork. To do this, on your own fork of maskmath, click Settings on the top right.
    Screen Shot 2020-09-09 at 4 37 37 PM

  • Scroll down to GitHub Pages and select the master branch and click save.
    Screen Shot 2020-09-09 at 4 31 51 PM

  • This will let you view your local version of the website at https://your-username.github.io/maskmath/. Check that this link works, you should see a copy of the original mask math essay.

  • Next, make a copy of index.html with the two-letter language code of the language you are translating to. For example, if you are translating to Spanish, this file will be called index-es.html If you're new to GitHub, here's how to go about doing this. First copy the contents of index.html to the clipboard. Then, on your fork of maskmath, click here to create a new file.
    Screen Shot 2020-09-09 at 4 52 39 PM

  • Give this file the name index-languagecode.html where languagecode is the two letter language code (e.g. index-es.html). Next, paste in the contents of the original index.html file and when you're done click Commit new file to save changes.
    Screen Shot 2020-09-09 at 4 55 20 PM
    Screen Shot 2020-09-09 at 4 55 12 PM

  • If this worked, you should shortly be able to access this new page online at https://your-username.github.io/maskmath/index-languagecode.html

  • Now, click on the index-languagecode.html file and press the edit button on the top right.
    Screen Shot 2020-09-09 at 5 01 33 PM

  • You can now go through this file line by line and translate all the English text. After you translate a section, press the commit changes button at the bottom of the page to save your changes.

  • It's better to do this in short stretches because then you can open the live website at https://your-username.github.io/maskmath/index-languagecode.html to test you translation and make sure the changes are working as expected. If you make a mistake, you can compare your changes against index.html to see what went wrong. (Click Commits on your fork to see a complete list of all your changes.)

  • (More advanced) If you prefer to work on your own computer instead of on the GitHub website, you can use the GitHub Desktop and a text editor like Sublime Editor to make translations and commit and push them to the live website of your fork.

  • When you're done with the translation and have tested that that the website loads as expected, make a Pull Request to incorporate your changes into the original maskmath website. To do this, in your fork of maskmath, click the Pull request button, and then click Create pull request.
    Screen Shot 2020-09-09 at 5 08 30 PM
    Screen Shot 2020-09-09 at 5 12 49 PM

  • Add a title and description, and Create your pull request.
    Screen Shot 2020-09-09 at 5 13 35 PM

  • Your Pull Request will be reviewed and once accepted you will be added as a contributor.

Thank you so much for contributing!

Issue with Page Width on Hebrew Translation

On the Hebrew translation, it's possible to scroll left to a large blank space on the left side of the page. If I remove the dir="rtl" from the body tag (which indicates that text is read right to left), this seems to fix the issue. I don't understand the cause for the bug, but maybe making this change and adding dir="rtl" to the children div of <body> instead will fix it?

cc @DeepSpace2

Contributor's Guide: Adding Translations

Contributor's Guide: Adding Translations

Thanks for your interest in contributing translations to this interactive essay!

This step-by-step guide is written assuming that this may be your first time contributing on GitHub. If you have questions or concerns, you can leave a comment below, open a new issue, or send me an email. If you're familiar with Github, you can skim through this guide.

We encourage contributions of all kinds, including from first-time GitHub contributors, and are acknowledging all contributions on the Github Page using the All Contributors system.

The index.html page contains the entire text of the article in English. To add a translation, you'll need to make a copy of this file and then go through this document line by line and translate it.

Steps to Contribute a Translation

  • Sign up for a Github Account if you don't already have one.

  • So that we don't double our efforts, first check if anyone is already working on this translation in the comment thread below. If no one is translating to this language, leave a comment below letting us know that you would like to proceed with a translation (don't forget to include the language you're translating to!)

  • If someone else is already working on a translation for this language, we can still use your help in reviewing this translation. If the translation is already live and you want to make improvements (e.g. correct a typo or fix a broken link), you can do so by simply editing the file and submitting a Pull Request. If you have many edits, it's better that you follow the procedure below to combine your changes into a single Pull Request. If the translation is not yet live (i.e. someone is currently working on it), you can indicate your interest in collaborating on it or reviewing it with a comment below tagging whoever is working on it.

  • On the Github Page for maskmath, click the Fork button on the top right. This will create your own personal copy of the contents of this website (known as a fork), accessible at https://github.com/your-username/maskmath
    Screen Shot 2020-09-09 at 4 29 01 PM

  • Next, set up a live website for your fork. To do this, on your own fork of maskmath, click Settings on the top right.
    Screen Shot 2020-09-09 at 4 37 37 PM

  • Scroll down to GitHub Pages and select the master branch and click save.
    Screen Shot 2020-09-09 at 4 31 51 PM

  • This will let you view your local version of the website at https://your-username.github.io/maskmath/. Check that this link works, you should see a copy of the original mask math essay.

  • Next, make a copy of index.html with the two-letter language code of the language you are translating to. For example, if you are translating to Spanish, this file will be called index-es.html If you're new to GitHub, here's how to go about doing this. First copy the contents of index.html to the clipboard. Then, on your fork of maskmath, click here to create a new file.
    Screen Shot 2020-09-09 at 4 52 39 PM

  • Give this file the name index-languagecode.html where languagecode is the two letter language code (e.g. index-es.html). Next, paste in the contents of the original index.html file and when you're done click Commit new file to save changes.
    Screen Shot 2020-09-09 at 4 55 20 PM
    Screen Shot 2020-09-09 at 4 55 12 PM

  • If this worked, you should shortly be able to access this new page online at https://your-username.github.io/maskmath/index-languagecode.html

  • In your fork, click on the index-languagecode.html file and press the edit button on the top right.
    Screen Shot 2020-09-09 at 5 01 33 PM

  • In Line 3 of the this file which reads <html lang="en">, replace the language code en with the language code that you are translating into.

  • You can now go through this file line by line and translate all the English text. After you translate a section, press the commit changes button at the bottom of the page to save your changes.

  • It's better to do this in short stretches because then you can open the live website at https://your-username.github.io/maskmath/index-languagecode.html to test and make sure the changes are working as expected. If you make a mistake, you can compare your changes against index.html to see what went wrong. (Click Commits on your fork to see a complete list of all your changes.)

  • (More advanced) If you prefer to work locally on your computer instead of on the GitHub website, you can use the GitHub Desktop client and a text editor like Sublime Editor.

  • You're encouraged to add a line of credit to yourself in the translation. In the Credits & References section of index-languagecode.html next to the sentence This essay was created by Aatish Bhatia in collaboration with Henry Reich. For example, you can add a (translated) sentence like It was translated into [your-language] by [your-name]. You can link your name to your website or social media profile.

  • In your fork, click on the folder js, and then click on the file vue-definitions.js and press the edit button on the top right. Look for the section that lists all the translations (around line 250). Duplicate the last entry in this list, then edit it so that it points to the correct url and name of the language you are translating into, and save changes. If this worked correctly, you should shortly see your language listed in the header of the page. Confirm that this link works as expected.
    Screen Shot 2020-09-30 at 10 54 26 AM
    Untitled

  • When you're done with the translation and have tested that that the website loads as expected, make a Pull Request to incorporate your changes into the original maskmath website. To do this, in your fork of maskmath, click the Pull request button, and then click Create pull request.
    Screen Shot 2020-09-09 at 5 08 30 PM
    Screen Shot 2020-09-09 at 5 12 49 PM

  • Add a title and description, and Create your pull request. You can add any relevant notes in here. Please keep the Allow edits by maintainers button ticked as this will help me easily merge your changes.
    Screen Shot 2020-09-09 at 5 13 35 PM

  • Your Pull Request will be reviewed and once accepted you will be added as a contributor.

Thank you so much for contributing!

Visualization for the Umbrella example

Masks don't guarantee safety, they reduce risk. This is a lot like how an umbrella doesn't guarantee that you'll stay dry, but it does reduce your chance of getting wet. Like umbrellas, masks only work if you use them correctly. But unlike umbrellas, which only protect people who use them, masks also protect people around the wearer.

My mom, teacher at a mid school (children 12-15 years old) taught both the essay and the video to her students.

The umbrella example flied really well in all the classes (it may as well be the only thing that really rang a bell), so I'm suggesting to create a fancy visual for that too.

How does the idea sound? I may be able to assist with the coding (even though I don't have any experience yet).

Translation and deployment

Hi. I just came across minutephysics' video and the maskmath website. Great job!

I thought it would be great if we could come up with some mechanism that will allow people to fork this repo, translate the text to whatever language, then create a pull request. After each pull request is merged a CI/CD process will deploy the website with the new translation (of course, language-selection buttons will be available on the page itself).

Already forked and started to work on my translation :)

The translation list font is too thin

The translations list is barely readable because it's a thin font used for small text.

A font weight of eg. 400 would also help scripts not covered by Raleway to not stand out as much.

Raleway 200:

raleway 200 on 16px

Raleway 400:

raleway 400

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

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

  • web

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

  • server

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

  • Machine learning

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

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.