46elks / praktik-apiskolan Goto Github PK

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:

• https://osakamania.jp/
• https://atglaciersend.com/
• https://netrixdigital.com/

The future link to the live website should be provided in the "about" section, which also contains a description and topics

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.

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.

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.

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!

Currently, the quiz system looks a bit off when questions start to line break. This should be fixed so that the quiz looks good no matter the length of the question.

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.

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)

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.

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.

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.

Header should be "sticky" on mobile devices, which means that it should continue to be visible on screen even when scrolling down. This should not affect the desktop header, and might require the dropdown menu to no longer push content down.

Here is a basic example of this: https://www.w3schools.com/howto/howto_js_sticky_header.asp

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!

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.

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.

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.

Here's are some examples of websites that use this effect:

• http://ff7.live/
• https://fantastic4group.gitlab.io/pizza-website/
• https://speckyboy.com/underline-text-effects-css/ (example 5, outward)

This outward animated underline effect on hover should be applied to all navbar links (not navbar buttons) and anywhere else where it looks as good.

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

When the website is up and running on a domain, add a badge with a link to the website in README.md.

Here's an example:

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.

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.