Git Product home page Git Product logo

praktik-apiskolan's People

Contributors

joakim2tusen avatar klaudiuszpawezka avatar littlekid avatar

Stargazers

 avatar

Watchers

 avatar

praktik-apiskolan's Issues

Create english version of page

Right now website is only available in swedish language, and to get more users we need to create an english version of the page.

It would be very nice to create some button in header for changing the language.

The user should be able to switch between languages freely, no matter what page they're currently on. https://46elks.se/ sees an example of this feature.

System for user accounts

At the time of writing this, there is no real reason to implement this, but it might be an interesting idea for the future. The idea is simply to have a registration and log in feature for users connected to a database. This opens up for many future opportunities such as:

  • Users being able to create their own content pages, like a forum (Issue #31)
  • A chat/comments system
  • Users being able to track their personal learning progress. (Issue #34)

Dark mode

Create a dark mode switch for the website. This switch should apply to all websites simultaneously and preferably be easily available. This switch should be in the header (navbar) and be accessible from all pages on the website.

This feature might require one to redo the colors used in certain pages, since some pages are light and some pages are dark at the moment of writing this.

If you create a dark mode feature that doesn't apply to all pages, it might still be accepted as a solution to this issue if there's a good reason for it.

Adding breadcrumbs navigation

When the site has more content probably good option is to add breadcrumbs. To make it easier to navigate and also knowing where are you at the moment in the page.

This feature might require to redo the header!

Take your time to create a design that blends in well with the website's overall design.

Adapt website to look better in higher resolutions

At the time of writing this, the website is only adapted to look good in resolutions 1920x1080 and lower. This means that everything looks slightly off in higher resolutions (mainly 2k and 4k). Make the website look just as good in these higher resolutions! If issue #38 is resolved, please also add these resolutions to the screenshot test.

Users being able to create their own content pages

In the future, if there are ever registered users and tons of content, it might be interesting to implement a feature where users without any coding experience can create their own pages with all the same features that normal content pages can contain. This issue is more of a future idea rather than something waiting to be fixed currently, and it is connected to issue #29.

Add Open Graph image

When the website is up and running on a domain, add the Open Graph image in the repository to the website! This image already exists in the repository, and is found at the same location as all other images at the time of writing this. Open Graph requires an absolute link to the image, which is why the website needs to be hosted first.

Progress bar for how much users have learned

To motivate learning about APIs, there is an idea to create a personal progress bar for each user indicating how much they've learned. This progress bar could be linked to their user accounts #32, or saved using some other clever method. The progress bar should be easily accessible from any page on the website, and users should be able to see their progress bar increase live as they're learning.

The progress bar could be connected to how many pages they've read, how many quizzes they've answered correctly on or any other future feature. The idea is that progress will reach 100% when the user has explored all the website has to offer, but this might change if issue #31 is implemented.

If the website is large enough when this is first implemented, another idea is for there to be multiple progress bars linked to specific skills, or possibly a score/points system to replace the bar idea, allowing for infinite learning.

Animated hamburger icon in menu

Currently, the hamburger menu icon used for the dropdown menu in the header is a static icon. To give the icon more life, add some kind of effect to it! There should be more "weight" when clicking the icon.

Here's a good example of the kind of animation we're looking for: https://codepen.io/designcouch/pen/Atyop

Note: The hamburger icon is only visible when browser width is less than or equal to 1200px.

Better solution than using JavaScript alerts to show output of quizzes

Currently, when submitting an answer in quizzes (as seen in some info/content pages), the output is given in the form of a JavaScript alert.

This should be upgraded, so that the output displays on the page itself.

The outputs may be changed to make this solution prettier. Some ideas are:

  • Remove the submit button, instantly get a response when clicking on the answer.
  • Quiz responds in color instead of text, the selected option lighting up in red or green depending on if the answer is correct. This could also be coupled with some text below.

However, these are just ideas. If you have a better solution, please go ahead and give it a shot! This issue is not straightforward, and whoever decides to help with it should be ready to get creative and create a good, modular and pretty solution for quiz output that doesn't introduce limitations. There's quite a bit of freedom here!

Live code editor for demonstrations in content pages

Info/content pages should be able to contain a live code editor, with the ability to send API requests and display the output. This code editor should be used for demonstrative purposes when teaching about concrete examples of API usage.

Run automated tests locally and online

When the website is up and running on a domain, there should be an option to run all Selenium Webtests against that version of the page, instead of the current local files. This is important, since the website may behave differently when it's running on an actual server.

Requirements:

  • When running tests, there should be a choice between if you want to run them on your local files, or against the hosted domain.
  • Edit the CI pipeline so that all Selenium Webtests run on both the files in the repository and against the hosted domain.

Dropdown menu shouldn't push masthead down

Currently, the dropdown menu in the header pushes the masthead on the home page down. It might be preferable if the masthead instead remained in place.

However, ideally, the masthead should still be pushed down when the dropdown menu actually comes in contact with the masthead, so the menu doesn't cover the masthead text.

Note: Dropdown menu is only visible when browser width is less than or equal to 1200px.

Google Chrome support for automated webtests

When running automated tests, the user should be able to choose if they want to run the tests using Firefox och Google Chrome. At the time of writing this, the tests only run on Firefox, which may result in certain features not working on Google Chrome going unnoticed.

Requirements:

  • When running tests, there should be a choice between if you want to run them using Chrome or Firefox
  • Add Google Chrome to dependencies
  • Add information about chromedriver in readme
  • Edit the CI pipeline so that all Selenium Webtests run on both Chrome and Firefox

"Loading..." effect when website is loading.

While any page of the website is loading, display a "Loading..." screen covering the website until it is ready.

This effect is most often seen in really large websites that take considerable time loading, even on high end computers, so it doesn't serve too important of a purpose on this website at the time of writing this. However, it would still probably look really professional, and give the website an edge over others.

Here are some examples of this effect:

Screenshot testing

For automation working on the project, we were thinking of creating a test which take screenshots in different resolutions. So you don't need to specify resolution every time you want to see them on different devices. Instead, you have already all taken and check them.

Remember to git ignore those file.

Feel free if you have some different ideas for screenshot test!

Generation for info/content pages

In the future, when this website might contain a lot of content and possibly will have registered users able to create their own content pages (Issue #31), there needs to be a system for generating content pages. At the time of writing this, all content pages are separate, manually created, HTML files. This solution is not feasible for a larger scale of pages.

This feature should only be implemented if the website is on a scale large enough where it makes sense to implement it. Both new pages following a template, as well as links matching to that template, should have a system for being generated. This might require redoing the entire backend of this project.

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.