Skip to content

Latest commit

 

History

History
151 lines (91 loc) · 7.53 KB

week-4.md

File metadata and controls

151 lines (91 loc) · 7.53 KB
Raw

Exercises Week 4: ‘Wrapping up’ 🎁

Minor Web Development - Web App From Scratch

Intention

Goal this week: ‘Wrapping up’ 🎁

Final iteration on user story. Manipulate, filter and sort data. Finish documentation

Assignment

Refactor code into modules, improve UI and write documentation.

Sub tasks

  1. Manipulate, filter and sort data (Monday)
  2. Documentation (Monday)
  3. Improve UI (Tuesday)
  4. Code review (Tuesday)
  5. Reflect on work (Thursday/Friday)

Slides

  1. Live coding map, filter, reduce - Week 4 Maandag 6 mrt
  2. Review - Week 4 Dinsdag 7 mrt

1. Manipulate, filter and sort data (Monday)

To be able to view the data that you have loaded from an API in a more targeted way, add a filtering and sorting component to your web app. To properly filter and sort the data, it is useful to store data in an object that is part of your app or in LocalStorage. With the map, filter and reduce methods you retrieve the desired data to display it in the interface.

Resources

2. Documentation (Monday)

When you publish your code to Github, others can fork your code to use in their own project or collaborate with yours. It's important to write your Readme with a description of your own work, explenation of your code and a link and poster image to showcase your project.

When you're writing your project's README, it should be able to answer the what, why, and the how of the project.

- Add a link to your live demo in Github Pages 🌐
- Write a description of your work 
- Add a nice poster image showing off your shiny frontend 📸

— Write a section that describes how to install this project 🤓
- Write sections of how to use this project, what are its features 🤔
- Add the Activity Diagram with a wireflow for the interaction and control flow of your code 🛠
- What external data source is featured in your project and what are its properties 🌠
- Add a checklist of done stuff and stuff you have still on your wishlist ✅

- Add a table of contents 📚

3. Improve UI (Tuesday)

In order to best help our users get up to speed with our designs, it is best to design for the zero state, the state in which nothing has yet occurred. This state shouldn't be a blank canvas…it should provide direction and guidance for getting up to speed. Much of the friction of interaction is in that initial context… once people understand the rules they have a much higher likelihood of success.

Design the Zero State using Visual Hierarchy

Web pages and websites have a lot of information to communicate. When we land on a new page we immediately have some questions we need answered.

  • Is what I’m looking for on this page?
  • Where is it?
  • How do I complete my task?

By creating visual hierarchies, designers enable pages to be scanned and make information easier to understand.

  1. Ask a collegue to use your app and encourage him/her to think out loud while interactting with your app
  2. Write down all feedback and remarks
  3. Try fixing the low hanging fruit immediately after the test, fix unclear labels/ enlarge (sub) titles/ enlarge input fields/ improve contrast/ ...
  4. Create and write issues on your repo with issues you cannot fix immediately. Add labels using the MoSCoW method

Design interactive elements

Humans are most comfortable with things that behave the way we expect. Other people, animals, objects and software. When something behaves consistently with our expectations we feel like we have a good relationship with it. To that end designed elements should look like how they behave.

In practice this means that someone should be able to predict how an interface element will behave merely by looking at it. If it looks like a button it should act like a button.

  1. Check if all interactive elements look like how they behave (buttons and links)
  2. Check if all interactive elements that behave the same look the same
  3. Check if all states of the interactive elements have (enough) styling
  4. Fix styling if neccesary
  5. Create and write issues on your repo with issues you cannot fix immediately. Add labels using the MoSC0W method

Resources

4. Code review (Tuesday)

Workshop Code review. Do a code review based on the Javascript best-practices.

5. Reflect on work (Thursday/Friday)

The past weeks you've build a Single Page Web App. What are the consequences of building a web app that runs entirely in the browser, a client side, single page web app?

Your work will be assessed on the criteria: User Interface, Code structure, Data management and Project (documentation).

Your efforts will be graded using a single point rubric. You will have to pass the criterion to pass the course. During the test you will be consulted and will be given feedback on things we think deficient and things we think are an improvement on the criterion.