diff options
| -rw-r--r-- | app_test.py | 10 | ||||
| -rw-r--r-- | pysite/views/main/help.py | 10 | ||||
| -rw-r--r-- | static/style.css | 38 | ||||
| -rw-r--r-- | templates/main/base.html | 16 | ||||
| -rw-r--r-- | templates/main/help.html | 459 | ||||
| -rw-r--r-- | templates/main/index.html | 2 | ||||
| -rw-r--r-- | templates/main/navigation.html | 13 |
7 files changed, 533 insertions, 15 deletions
diff --git a/app_test.py b/app_test.py index 97e38f4d..bd91a51e 100644 --- a/app_test.py +++ b/app_test.py @@ -34,6 +34,16 @@ class BaseEndpoints(SiteTest): response = self.client.get('/', 'http://pytest.local') self.assertEqual(response.status_code, 200) + def test_help(self): + """ Check the help path responds with 200 OK """ + response = self.client.get('/help') + self.assertEqual(response.status_code, 200) + + def test_not_found(self): + """ Check paths without handlers returns 404 Not Found """ + response = self.client.get('/nonexistentpath') + self.assertEqual(response.status_code, 404) + def test_invite(self): """ Check invite redirects """ response = self.client.get('/invite') diff --git a/pysite/views/main/help.py b/pysite/views/main/help.py new file mode 100644 index 00000000..783b9b31 --- /dev/null +++ b/pysite/views/main/help.py @@ -0,0 +1,10 @@ +# coding=utf-8 +from pysite.base_route import RouteView + + +class HelpView(RouteView): + path = "/help" + name = "help" + + def get(self): + return self.render("main/help.html") diff --git a/static/style.css b/static/style.css index 68789f07..fbbec5c1 100644 --- a/static/style.css +++ b/static/style.css @@ -3,6 +3,13 @@ } .uk-background-secondary .uk-navbar-dropdown-nav .uk-nav-header { + color: #666 !important; + text-transform: none !important; + font-weight: bold !important; + font-size: 120% !important; + padding: 0 !important; +} +.uk-background-secondary .uk-navbar-dropdown-nav .uk-nav-header.uk-active { color: white !important; } @@ -16,4 +23,35 @@ .uk-navbar-dropdown { top: 45px !important; +} + +.uk-article-title a { + visibility: hidden; + opacity: 0; + + transition: opacity 200ms ease-in-out; + -moz-transition: opacity 200ms ease-in-out; + -webkit-transition: opacity 200ms ease-in-out; +} + +.uk-article-title:hover a { + visibility: visible; + opacity: 1; + + transition: opacity 200ms ease-in-out; + -moz-transition: opacity 200ms ease-in-out; + -webkit-transition: opacity 200ms ease-in-out; +} + +.uk-article-title { + margin-bottom: 0 !important; +} + +.uk-article-meta { + margin-top: 0 !important; +} + +.uk-section { + padding-top: 20px; + padding-bottom: 30px; }
\ No newline at end of file diff --git a/templates/main/base.html b/templates/main/base.html index 96a25554..3da4715e 100644 --- a/templates/main/base.html +++ b/templates/main/base.html @@ -12,15 +12,17 @@ <link rel="stylesheet" href="/static/style.css" /> {% endblock %} </head> -<body> +<body class="page-{{ current_page }}"> {% include "main/navigation.html" %} {% if current_page != "index" %} -<div class="uk-container uk-section"> - <div class="uk-alert-danger" uk-alert> - <p> - Please note: this site is under construction. What you see now may be vastly different - from the final project state. Feel free to chat to us on Discord if you're curious! - </p> +<div class="uk-container uk-section" style="padding-top: 10px; padding-bottom: 10px;"> + <div class="uk-container uk-container-small"> + <div class="uk-alert-danger" uk-alert> + <p> + Please note: this site is under construction. What you see now may be vastly different + from the final project state. Feel free to chat to us on Discord if you're curious! + </p> + </div> </div> </div> {% endif %} diff --git a/templates/main/help.html b/templates/main/help.html new file mode 100644 index 00000000..d3084f8b --- /dev/null +++ b/templates/main/help.html @@ -0,0 +1,459 @@ +{% extends "main/base.html" %} +{% block title %}Getting Help{% endblock %} +{% block content %} + <div class="uk-section"> + <div class="uk-container uk-container-small"> + <article class="uk-article"> + <h1 class="uk-article-title" id="top"> + Getting Help + + <a href="#top" class="uk-text-primary" title="Permanent link to this header"> + <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i> + </a> + </h1> + <p class="uk-article-meta"> + Everything's exploding, customers are complaining, management's on the fritz! + </p> + <p> + This document is intended to provide you with the information you need to get help as quickly and + effectively as possible. If you're stuck on a problem or you just don't understand something, feel + free to join us and ask for help - you can use this as a reference when forming your question. + </p> + <p> + Much of this document is based on the sentiments expressed by Eric Steven Raymond and Rick Moen + in their essay, <a href="http://www.catb.org/esr/faqs/smart-questions.html">How To Ask Questions The Smart Way</a>. + Please note that the essay is very long and may be considered rude by some. Additionally, the people + behind that essay are in no way affiliated with us - please do not bother them with your Python + problems. + </p> + <h2 class="uk-article-title" id="before"> + Before You Ask + + <a href="#before" class="uk-text-primary" title="Permanent link to this header"> + <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i> + </a> + </h2> + <p class="uk-article-meta"> + Take stock of your problem, and do your homework. + </p> + <p> + Before you ask your question, there are a few things you can do to find an answer on your own. + Experienced developers will do the following: + </p> + <ul> + <li>Read the official documentation for whatever you're working with</li> + <li>Use a debugger to inspect your code</li> + <li>Do some research online - for example, on Stack Overflow</li> + <li>Read the source code for whatever you're working with</li> + <li>Search the message history of the help channels</li> + </ul> + <p> + Essentially, doing your research is the first step towards a solution to any problem. If your + problem isn't extremely general, we're going to be doing exactly these steps ourselves when you ask, + so doing the legwork beforehand saves everyone a lot of time. + </p> + </article> + </div> + </div> + <div class="uk-section uk-section-muted"> + <div class="uk-container uk-container-small uk-text-center"> + <blockquote> + <p> + <i class="fas fa-quote-left fa-pull-left"></i> + <i class="fas fa-quote-right fa-pull-right"></i> + Creativity requires input, and that's what research is. You're gathering material with which to + build. + </p> + <small> + Gene Luen Yang + </small> + </blockquote> + </div> + </div> + <div class="uk-section"> + <div class="uk-container uk-container-small"> + <article class="uk-article"> + <p> + If you're an absolute beginner, take a moment to step back from the problem. + Have you <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">read a book or done a + tutorial</a>? There's a huge amount of resources out there, many of which are going to help you a lot more than + us answering the beginners' questions for you. If you're following a tutorial, book or course and + you don't understand something, then <strong>that</strong> is the correct time to ask a beginners' + question. Of course, we won't turn you away if you do have a beginners' question — by all + means, + come to us if you do have a problem. + </p> + <p> + Have you read the official documentation for the module or technology you're working with? The + <a href="https://docs.python.org/3/">official Python 3 docs</a> are a fantastic and valuable + resource, so if you're using a bundled module, your first port of call should be there. If you're + using a third-party library, often they will have some official documentation uploaded somewhere + — + try having a Google around, or take a look <a href="https://pypi.org">at PyPi</a> in case they've + linked it from there. + </p> + <p> + If you can't find the documentation or you find it lacking, the next place to look is the source + code. + Grab a decent IDE (we recommend <a href="https://www.jetbrains.com/pycharm/">PyCharm</a> Community) + and a coffee, download a copy of the project and open it up, and get to browsing! + </p> + <p> + If you're still confused, try searching the Internet for people that have already had the same + problem. Often, you won't be the only person to have encountered the issue you're dealing with - more often + than not, you'll find a GitHub ticket or a StackOverflow question along with a fix or answer to your + question already posted. + </p> + <p> + If none of the above helps you or you're lost, scared and alone, feel free to continue on to the + Discord server. You can use the search feature (the <i class="fas fa-search"></i> at the top right) to check + whether someone else has asked your question recently, or just feel free to pick one of the help channels + and ask your question. + </p> + <h2 class="uk-article-title" id="good-question"> + A Good Question + + <a href="#good-question" class="uk-text-primary" title="Permanent link to this header"> + <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i> + </a> + </h2> + <p class="uk-article-meta"> + Thank you for helping us help you help us all. + </p> + <p> + When you're ready to ask a question, there's a few things you should have to hand before forming + a query. + </p> + <ul> + <li> + A code example that illustrates your problem + <ul> + <li>If possible, make this a minimal example rather than an entire application</li> + </ul> + </li> + <li>Details on how you attempted to solve the problem on your own</li> + <li>Full version information — for example, <em class="uk-text-primary">"Python 3.6.4 with + discord.py 1.0.0a"</em></li> + </ul> + <p> + Your question should be informative, but to the point. More importantly, how you phrase your + question + and how you address those that may help you is crucial. Courtesy never hurts, and please type + using correctly-spelled and grammatical language as far as you possibly can. + </p> + <p> + When you're inspecting a problem, don't be quick to assume that you've found a bug, or that your + approach is correct. While it helps to detail what exactly you're trying to do, you should also + be able to give us the bigger picture - describe the goal, not just the step. Describe the problem's + symptoms in chronological order - not your guesses as to their cause. + </p> + </article> + </div> + </div> + <div class="uk-section uk-section-muted"> + <div class="uk-container uk-container-small uk-text-center"> + <div class="uk-child-width-expand" uk-grid> + <div class="uk-text-primary"> + <p class="uk-text-bold uk-text-center"> + Bad Questions + </p> + </div> + <div class="uk-text-primary"> + <p class="uk-text-bold uk-text-center"> + Good Questions + </p> + </div> + </div> + <div class="uk-grid-divider uk-child-width-expand" uk-grid> + <div class="uk-text-danger"> + <p> + Where can I find information on discord.py? + </p> + <p class="uk-text-meta"> + This question suggests that the person asking it hasn't done any research, or even a simple + Google search. + </p> + </div> + <div class="uk-text-success"> + <p> + I used Google to try to find more information about "discord.py 1.0.0a", but I couldn't + really + find anything useful. Does anyone know where I might find a guide to writing commands + using this library? + </p> + </div> + </div> + <div class="uk-child-width-expand" uk-grid> + <div> + <hr class="uk-divider-icon"/> + </div> + <div> + <hr class="uk-divider-icon"/> + </div> + </div> + <div class="uk-grid-divider uk-child-width-expand" uk-grid> + <div class="uk-text-danger"> + <p> + Pillow puts my text at the bottom of the image instead of where I wanted it. Why is it broken? + </p> + <p class="uk-text-meta"> + This question assumes that the problem is with Pillow itself, and that it isn't + the questioner's fault. It also doesn't provide enough information on the problem. + </p> + </div> + <div class="uk-text-success"> + <p> + Pillow appears to insert text at the bottom of the image if the given X coordinate is negative. + I had a look at the documentation and searched Stack Overflow, but I couldn't find any + information on using negative coordinates to position text. Has anyone attempted this? + </p> + </div> + </div> + <div class="uk-child-width-expand" uk-grid> + <div> + <hr class="uk-divider-icon"/> + </div> + <div> + <hr class="uk-divider-icon"/> + </div> + </div> + <div class="uk-grid-divider uk-child-width-expand" uk-grid> + <div class="uk-text-danger"> + <p> + I'm having some trouble writing a YouTube random URL generator - can anyone help? + </p> + <p class="uk-text-meta"> + This question provides no information on the problem, and asks for help in a way that isn't + engaging - some people will find this annoying, as answering your question is guaranteed + to result in another question. + </p> + </div> + <div class="uk-text-success"> + <p> + My YouTube random URL generator appears to be returning false positives for tested URLs, + stating that a URL points to a real video when that video doesn't actually exist. Obviously + there's some issue with how this is checked, but I can't put my finger on it. Is there anything + I can check? + </p> + </div> + </div> + <div class="uk-child-width-expand" uk-grid> + <div> + <hr class="uk-divider-icon"/> + </div> + <div> + <hr class="uk-divider-icon"/> + </div> + </div> + <div class="uk-grid-divider uk-child-width-expand" uk-grid> + <div class="uk-text-danger"> + <p> + I want to share a YouTube video with my friend, but the video doesn't move when I print the page. + How do I make the video move? + </p> + <p class="uk-text-meta"> + This question assumes a specific (wrong) approach, and isn't open-ended enough to account for + the possibility of a better solution. + </p> + </div> + <div class="uk-text-success"> + <p> + I'm attempting to figure out the best way to share a YouTube video with my friend that doesn't + have the Internet at home. I can't think of a better approach than printing the page, which + obviously doesn't help much given that the video doesn't move on the paper - can anyone think + of a better approach to this? + </p> + </div> + </div> + <div class="uk-child-width-expand" uk-grid> + <div> + <hr class="uk-divider-icon"/> + </div> + <div> + <hr class="uk-divider-icon"/> + </div> + </div> + <div class="uk-grid-divider uk-child-width-expand" uk-grid> + <div class="uk-text-danger"> + <p> + I was given this assignment by my teacher, but I'm not sure how to approach it. Does anyone + have any ideas? + </p> + <p class="uk-text-meta"> + This question is clearly a homework question. Homework is supposed to challenge you, and we + will not provide solutions to homework. Instead, ask a more general question. + </p> + </div> + <div class="uk-text-success"> + <p> + I have a list of numbers - how do I calculate how many of them are even? Is there a way + to remove all the odd numbers from my list? Are there quick ways to find the average of + a list of numbers, or add them all together? + </p> + </div> + </div> + </div> + </div> + <div class="uk-section"> + <div class="uk-container uk-container-small"> + <article class="uk-article"> + <h2 class="uk-article-title" id="answers"> + Interpreting Answers + + <a href="#answers" class="uk-text-primary" title="Permanent link to this header"> + <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i> + </a> + </h2> + <p class="uk-article-meta"> + Wow, rude. + </p> + <p> + Programmers have a certain set of mannerisms. While we all try to be as courteous with our replies + as possible, occasionally it may seem as if a helper is annoyed or disinterested in your question. + This isn't personal - it's just part of our culture. Remember that the people you're asking for help + are humans and that they're here voluntarily, in their free time. + </p> + <p> + If you've asked a question and you're told to read the documentation or search the web, you should + do that. When this happens, it's often the case that the person responding has the information you need + open in their web browser and either thinks that it's very easy to find, or that you would learn + more from seeking out the source of the information yourself. If you've already done this, you should + tell us by including it in your question! + </p> + <p> + If you don't understand an answer, don't immediately bounce back and demand clarification. Use the + tools available to you (the internet, documentation, source code) to help you understand the answer, and + if you still can't figure it out, ask for clarification and provide any relevant information you learned + during your research. + </p> + </article> + </div> + </div> + + <div class="uk-section uk-section-muted"> + <div class="uk-container uk-container-small uk-text-center"> + <blockquote> + <p> + <i class="fas fa-quote-left fa-pull-left"></i> + <i class="fas fa-quote-right fa-pull-right"></i> + Successful people ask better questions, and as a result, they get better answers. + </p> + <small> + Tony Robbins + </small> + </blockquote> + </div> + </div> + + <div class="uk-section"> + <div class="uk-container uk-container-small"> + <article class="uk-article"> + <p> + Much of what looks like rudeness within programming communities is not intended to be offensive and + it's often just a product of the down-to-earth, direct style of communication that is typical in + a community that is more concerned with solving problems than anything else. If you perceive + rudeness, try to react calmly. If a user really is acting out, then chances are that a member of staff will + call them out on it. If this doesn't happen, contact a member of staff directly and they will try + to clarify this with you. + </p> + <p> + It's okay to mess up. It happens to all of us. That said, if you mess up badly enough, it's likely + that you will be corrected there and then, in public and with a verbal scalpel. Take this as a + learning experience and don't let it get to you - this is a common and appropriate response in + many programming circles. Community standards do not maintain themselves - they're maintained by + people applying actively them, visibly, in public. + </p> + + <h2 class="uk-article-title" id="what-not-to-ask"> + What Not To Ask + + <a href="#what-not-to-ask" class="uk-text-primary" title="Permanent link to this header"> + <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i> + </a> + </h2> + <p class="uk-article-meta"> + Sample questions to avoid as much as possible. + </p> + + <p class="uk-text-lead"> + Can I ask a question? + </p> + <p> + Yes. Always yes. Just ask it. + </p> + + <p class="uk-text-lead"> + Can I use str() on a discord.py Channel object? + </p> + <p> + Try it yourself and see. Experimentation is a great way to learn, and you'll save a lot of time by + just trying things out. Don't be afraid of your computer! + </p> + + <p class="uk-text-lead"> + My code doesn't work + </p> + <p> + This isn't a question, and it provides absolutely no context or information. Depending on the moods + of the people that are around, you may even find yourself ignored. Don't be offended by this - just + try + again with a better question. + </p> + </article> + </div> + </div> + + <div class="uk-section uk-section-muted"> + <div class="uk-container uk-container-small uk-text-center"> + <blockquote> + <p> + <i class="fas fa-quote-left fa-pull-left"></i> + <i class="fas fa-quote-right fa-pull-right"></i> + So much of life isn’t about having the right answer; it’s about knowing the right question. + </p> + <small> + Duane Hewitt + </small> + </blockquote> + </div> + </div> + + <div class="uk-section"> + <div class="uk-container uk-container-small"> + <article class="uk-article"> + <p class="uk-text-lead"> + Can anyone help me break into someone's Facebook account?<br/> + Can anyone help me download anime from this streaming site's listing page?<br/> + How do I write a virus? + </p> + <p> + We will absolutely not help you with hacking, pirating, or any other illegal activity. A question + like this is likely to be followed up with a ban if the person asking it doesn't back down quickly. + </p> + + <p class="uk-text-lead"> + Can I send you a private message? + </p> + <p> + No. We do not provide one-on-one tutoring - you can hire someone locally if you really need that. We + also prefer that questions are answered in a public channel as it means that everyone else present + is able to learn from them. If you're working with code that you are unable to disclose for any + reason, you should try to make your question more general and write a separate, small piece of code + to illustrate your problem. + </p> + + <p class="uk-text-lead"> + Can you help me over Teamviewer? + </p> + <p> + No. We will not help you by accessing your computer remotely, or watching a video stream of your + problem, unless the problem is something that inherently requires that. The reason for this is that + our time is limited, and watching a video or participating in a screen-sharing session means that we + have to focus on you, instead of being able to deal with other people while you're figuring out an + answer. If your problem is graphical and you can't adequately describe it without a visual, take a + screenshot or provide a short screen recording to illustrate your problem. + </p> + </article> + </div> + </div> +{% endblock %}
\ No newline at end of file diff --git a/templates/main/index.html b/templates/main/index.html index 258b7a7c..d8c5febc 100644 --- a/templates/main/index.html +++ b/templates/main/index.html @@ -1,7 +1,7 @@ {% extends "main/base.html" %} {% block title %}Home{% endblock %} {% block content %} - <div class="uk-section uk-section-primary" style="padding-top: 20px; padding-bottom: 30px;"> + <div class="uk-section uk-section-primary"> <div class="uk-container uk-text-center"> <h1 class="uk-header"> Python Discord diff --git a/templates/main/navigation.html b/templates/main/navigation.html index 88fc3585..8a1e9a6a 100644 --- a/templates/main/navigation.html +++ b/templates/main/navigation.html @@ -1,4 +1,4 @@ -<div class="uk-container uk-container-expand uk-background-secondary uk-light"> +<div class="uk-container uk-container-expand uk-background-secondary uk-light" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"> <nav data-uk-navbar class="uk-navbar-container uk-navbar-transparent" uk-navbar="boundary-align: true; align: right"> <div class="uk-navbar-left"> <a href="/" class="uk-navbar-item uk-logo"> @@ -17,13 +17,12 @@ <a><i class="uk-icon fas fa-chevron-down"></i></a> <div class="uk-navbar-dropdown uk-background-secondary"> <ul class="uk-nav uk-navbar-dropdown-nav"> - <li class="uk-active"><a href="#">Active</a></li> - <li><a href="#">Item</a></li> - <li class="uk-nav-header">Header</li> - <li><a href="#">Item</a></li> - <li><a href="#">Item</a></li> + {% if current_page == "help" %} + <li class="uk-active"><a href="/help">Getting Help</a></li> + {% else %} + <li><a href="/help">Getting Help</a></li> + {% endif %} <li class="uk-nav-divider"></li> - <li><a href="#">Item</a></li> </ul> </div> </li> |