Submitting your homework

We are going to use Github Classroom for this assignment. You need to have an account on GitHub and be logged in. Authorize Github Classroom here and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.

To submit the assignment, please visit Canvas and submit the URL to your final commit that you want us to grade. A commit URL looks like https://github.com/designftw/hw4-username/commit/b59f14ba05869b3067724aa6d2006667a54c8e7d. You can submit as many times as you want. This is important. Your homework is not submitted and is accruing slack hours until you do this!

To make sure your homework is graded correctly, please follow the following:

• Please make sure each of your exercise directories are self contained, i.e. that you don't reference any files outside of the directory (e.g. from your repo root or other exercises). While having a common assets directory for all your exercises might be a good idea in general, we extract each exercise directory separately (as it may be graded by different people), and that will result in your pages not working correctly.
• Do not use root-relative URLs (URLs that start with /) or absolute localhost URLs, as these require the grader to run a local server at a specific directory within your repo. If for some reason you cannot avoid it, please document it in a README otherwise links may be broken for whomever is grading your homework.

If you submit after the deadline, it will count towards your slack hours.

Exercise 1: Critiquing CSS Demos (20%)

In the second exercise of this assignment you will be creating an interactive demo of a CSS feature. Your demo will be graded based on its usability and how well it helps people understand or learn the CSS feature. As preparation for the second exercise we want you to find two pre existing demos of CSS Features and write a couple of sentences about how each one succeeds or fails with regards to usability and/or teaching the CSS feature. Remember the dimensions of usability we covered in class (Learnability, Efficiency, and Safety).

We've included a couple of CSS feature demos below which you can choose from, however feel free to find other demos on the web. For both of your write ups, include a link to the CSS feature demo you reviewed.

• Layout
  • Grid layoutit!
  • CSS Layout Generator
  • CSS Grid Generator
• Gradients
  • Components.ai Gradient editor
  • CSS Gradient generator
• Shadows
  • Components.ai text-shadow editor
  • Smooth shadow generator
  • Shadow Palette Generator
• Misc Effects
  • Glassmorphism CSS Generator
  • cubic-bezier.com
  • border-image.com
  • border-radius when all radii add up to 100%
  • Clip-path maker
  • Fluid typography
• Directories
  • css-generators.com
  • html-css-js.com
  • webcode.tools

Exercise 2: Making interactive CSS demos (80%)

As you may have noticed, CSS is much easier to learn with interactive demos. These demos can have interfaces that help you dynamically explore the design space. In this assignment you will make your own interactive demo for a small part of CSS. After the deadline, you can play with the demos your classmates made and learn from them!

First, sign up for a CSS feature you want to make a demo of in this spreadsheet (use your GitHub username). You can select up to two features and decide later on which one of the two you will make a demo of (please make sure to free up the other one when you know so that another student can use it). Then, use HTML, CSS, and VueJS to make an app that helps people interactively explore how this feature works and teaches them about it. It should be aimed at users who know CSS generally, but not this particular feature.

At a minimum, look up the CSS feature you chose using the MDN link(s) provided in the spreadsheet. However, you are strongly encouraged to do your own research, find where people struggle when learning this feature, and make your app so that it illustrates the pain points of learning this feature best.

Pick a CSS feature earlier rather than later: only up to 3 students can pick the same one, so if you leave it too late, you may find that all the ones you like are taken!

Your assignment will be graded primarily on the usability of the interface you create. All three dimensions of usability matter here:

• Learnability: Your app will be used by people who are learning about that CSS feature, and it should support that use case well
• Efficiency: Your app will also be used by people who are already familiar with the CSS feature, and are just looking for a shortcut
• Safety: Your UI should try to minimize errors (e.g. it should not generate invalid CSS) whenver possible, and properly communicate invalid input to the user whenever preventing it in the first place is not possible.

Certain features will involve different tradeoffs between learnability and efficiency.

To achieve that goal, your interface should:

• teach the user the CSS concept. In support of that goal, work hard at the learnability of the UI so that new users can understand how to use it to learn that CSS feature.
• Aim for a good graphic design that is aesthetically pleasing, to the extent possible based on what we've learned so far. Remember that documentation should be a last resort to increase learnability, don't just add "helpful" text all over your UI, spend time thinking how to make the purpose of each control clearer. That said, some text will likely be necessary to successfully teach about the feature.
• provide appropriate controls and output that users can experiment with as many forms of the feature as possible (but not necessarily all), while still being sufficiently restricted that it facilitates learning. If you make it too freeform, it won't be of much more value than a text editor, but if you make it too restricted, it won't be teaching much. You need to find a good balance between the two.

Tips & caveats

• You may find it helpful for your demo to let the user control a number of other, related, CSS features, so that the user can observe the interaction between the two. E.g. for a property related to layout, you would probably want to allow the user to control width and height, so they can see how different units and dimensions interact with the layout feature the demo is about. For text-shadow, you'd want to also offer control over color.
• Don't just add one form control for every parameter and call it a day. That will only get you about halfway through. Think of what's the best way to help users conceptualize and learn the CSS feature you have picked.
• You are not required to include aspects of your CSS feature of choice that are not implemented in Google Chrome 80 or are hidden behind flags. If you decide to do so, include a warning about it, and a link to browser support information (e.g. caniuse.com)
• In some cases, there may be multiple plausible models for how a particular property works. E.g. for text-shadow, some users (especially developers) think of the shadow position as "Horizontal and vertical offset" and others (especially graphic designers) as "Distance and angle". Think about which mental model(s) you would like to teach the user---there will be tradeoffs.

Unsure if your demo achieves its desired goals? Get a classmate (who is working on a different CSS feature!) to use it and observe. Did they "get it" or were they confused? What did they struggle with?

A note on scope

Some of you will have broader features than others. E.g. linear-gradient() can be used in background too, that doesn't mean that the student who picks background needs to demo every possible gradient as well. Instead, the demo for background should focus on showcasing the different background parameters, with only basic control over the actual background-image, which is only one of background's many longhands.

Similarly, an app that demos text-shadow or box-shadow needs to provide a better shadow specification UI than an app that demos filter, of which drop-shadow() is only one of the many possible filters. Choose an appropriate level of depth that doesn't result in an overly complex demo. Be more liberal with breadth than depth. If there are shorthands in the CSS feature you picked, you need to make sure at least part of the functionality from every longhand is included in your demo.

Similarly, if each parameter accepts multiple units, you are not required to provide UI to set all of them, or for any possible range. That would likely just clutter your interface and obscure its goal. You may pick one or a few units that are reasonable and provide UI for that. If you do want to include all, think about how to do so usably.

If you want to broaden the scope of your demo, that's fine, as long as you cover all the functionality you would have covered without the broadening. E.g. if you have picked radial-gradient() but you want to make a general gradient generator that generates any type of gradient, that's fine, as long as it still demonstrates all parameters of radial-gradient() that you would have needed to demonstrate if you were only dealing with radial-gradient().

Examples in the wild

Exercise 1 contains a list of interactive CSS demos from around the Web.

You can likely find many for the CSS feature you picked by googling property names and/or values and "generator" or "demo". However, do note that most of these have usability issues and often the CSS they generate is very old too (a good rule of thumb: when you see -webkit-, -moz- etc prefixes, the code dates back to circa 2009-2015). Take a look so you can understand the problem you're trying to solve better, but not to imitate their UI decisions. Furthermore, not all of these have UIs that could be implemented without much custom JS.

Examples of CSS generators

And here are two examples of such demos, implemented with (Ma)Vue that we made for you, one for a value and one for a property, with some notes about how each attempts to make improvements over basic functionality.

hsl() colors

• Gradients aligned with the sliders to show the user what color each slider tweak will produce.
• Gradients update dynamically to help the user explore the 3d HSL space
• Checkerboard underneath semi-transparent colors to differentiate transparency with lightness.

the filter property

• Editable sample image
• Ticks on sliders for the midpoint when that is important (via <datalist>)
• Small thumbnails previewing each filter individually to make it easier to experiment with multiple of them
• Collapsible filters to just the type & preview, via the <details> element
• Double duty: Type dropdown acts as header as well
• Gradient on hue shift to indicate what each hue corresponds to

Note that in the spreadsheet there are features that overlap with these. If you pick a feature for which we have provided a demo (or a very similar one, e.g. backdrop-filter instead of filter), you need to make sure you go a sufficiently different direction. Just turning in the provided demos with cosmetic changes will not earn you credit.

Exercise N: HW4 feedback

Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, labs etc.

Please fill in your feedback about HW4 in this form. You can edit it as many times as you like until the survey closes (48 hours after the homework deadline). Since this is part of your participation grade, it does not affect your slack hours, but failing to submit the form on time, could result in a lower participation grade.