Studio 3

Duplicating a Google Drive folder

Suppose you want to duplicate a folder and its files in Google Drive. To start, create a folder called "Studio 1" and put a couple files in it. Now try to create a duplicate of that folder and its contents. The folder should be named "Studio 2" but all of the files in it should have the same name as the original files.

How efficient did you find the process? What was efficient and what wasn’t?
How would you change the UI to support the user in being more efficient?

JOANN

Suppose you want to buy Halloween decor at JOANN. Play around with the price filters.

How efficient is it to select your desired price range for the items? What about the current price filters works well and what doesn’t?
How would you change the UI to make the price selection process more efficient?
What are the trade-offs of your suggested design vs the current design of the website?

To-Do List Part 2: Efficiency & Basic CSS

Remember the to-do list from studio 1? We will make it more efficient. We will also add some basic CSS to make it look nicer and improve learnability.

Fork the studio3-starter repo and then clone it locally.

Do not just clone the starter repo, because you will not be able to push your changes to it.

Step 1: Add a CSS file

Add a CSS file to your project and link to it to your HTML file using a <link> element.

Step 2: Add some basic CSS

Set some basic CSS for the page such as:

the font family (You can use Helvetica Neue, Segoe UI, sans-serif or any other you think is suitable) for every element on the page.
Spacing between the controls (right now the inputs, checkboxes, and buttons are all stuck together)
Increase the width of the text input
Remove the list bullets and its extra spacing

Step 3: Add CSS to make done items look different

Add CSS to make done items look different from undone items.

A suggested styling could be to:

You will likely find the following useful:

Step 4: Make Enter insert a new item

Now let's work on making our to-do list more efficient.

In most to-do lists out there, there are established conventions for using them with the keyboard. One such convention, is that hitting Enter with the keyboard inserts a new item.

You can add the @keyup attribute to an <input> element with an enter key modifier to trigger a function whenever the user hits Enter within the element. Use this to trigger addItem().

(Note that @keyup is special Vue "syntactic sugar" but it refers to the standard JavaScript keyup event)

Step 5: Make focus move to the newly inserted item

In the previous step, we made it so that hitting Enter inserts a new item. However, the new item is not focused, so you have to click on it to start typing or press Tab. That's not very efficient!

Our starter code supplies an attribute called v-focus that you can apply to elements so that they are assigned focus as soon as they come into view. (e.g. <input v-focus>)

(This attribute is called a "directive", however that is not super important for this exercise. The HTML autofocus attribute sadly works on page load, not element insertion.)

Step 6: Make Backspace delete items

Another common convention is that backspace deletes entries.

Just like using Enter to insert a new item, you can add another @keyup event listener, this time with a backspace key modifier, calling deleteItem().

Step 7: Make Backspace delete the previous item only if the current one is empty

Play around with your to-do app. Try to edit text and delete items. What do you notice? When we are trying to delete a character, the entire item is deleted instead! (Which dimension of usability suffers?)

Use the deleteItemIfEmpty(i) method instead of deleteItem(i) to fix this.

Step 8: Make the previous item be focused

When you delete an item, you still need to move focus to the previous item manually. That's not very efficient! Conventionally, focus should move to the previous item (if one exists). Just using v-focus doesn't help here, because the element already exists.

This is where the active property of each task becomes useful: If you use it as the value of v-focus (e.g. <input v-focus="task.active">), then whichever item has active set to true will receive focus (when active turns true). This means you can manage focus programmatically!

The deleteItem() and deleteItemIfEmpty() methods already take care of setting the active property to the right item when items are deleted.

Step 9: Sync Focus

Play around again... Under certain circumstances, the active property gets out of sync with what is actually focused if the user clicks on elements or uses tab. In particular, consider this edge case:

Suppose there are 3 items and you delete the 2nd item via the delete key.
The 1st item will be focused and its active property will be set to true.
Now, if you click on the last item, it will be focused, but won't be active.
Now delete the last item via the delete key. The item will be deleted, but focus won't move to the 1st item because it was already active! Setting it to active again won't do anything.

To visualize it, you can display each task's active property in the UI (e.g. {{task.active}} next to each item) to see when it gets out of sync. This is often a useful way to debug.

We provide you with a setActive(index) function that sets a specific item to be the active one.

Use @focus and setActive(index) to set the active property to the right item when inputs are focused manually by the user.

Step 10: Focus previous/next item with up/down arrow keys

Use your to-do list a bit more. What do you notice? Did you instinctively try to hit the up/down arrow keys to move focus between items? Let's implement that!

You can use @keyup with up and down key modifiers and the setActive() function to manage focus.

HW2 Critique & Feedback

← Studio 2 Studio 4 →