Skip to main content

Assignment 3 - WeatherFeed: Javascript Frameworks

Due Friday, February 26th 11:59pm

Setup

Accept this GitHub Classroom assignment and clone this repo that contains the stencil code for Assignment 3.

Instead of using W3C's validators which are not compatible with Vue syntax and the latest CSS features, feel free to use the following two VSCode extensions for checking your HTML files and CSS files:

If you are satisfied with our defaults, you only need to run npm install to have both extensions set up.

There is not much stencil for this assignment. As such, you are allowed to reuse your code from Assignment 2 for this assignment, though you are not required to do so.

You may also use your HTML and CSS from your Twitter mockup in Assignment 1 but this is not required.

You are allowed to use external libraries such as Bootstrap and others as long as they don’t trivialize the assignment, and you should provide a brief description in your README of how you used them. Lastly, your user interface can but does not need to look like that of Twitter’s, and we encourage you to be creative!

Introduction

Congratulations on completing Assignments 1 and 2! In this assignment, you will be reusing a lot of the code you have written to create a Vue application that will provide additional structure to your code and enhance the functionality of your TwitterFeed! Time to help Remy get his weather updates blazing fast.

Requirements

Accessibility Requirements

You need to meet all accessibility requirements from Assignment 2 and Lab 2. See this Piazza post for details. As a recap, these are:

  • Declare the language of your website in the lang= attribute of the html tag
  • Descriptive alt text for all images
  • Use a logical page hierarchy: appropriate header structure and semantic HTML5 elements. e.g. if it’s a button, it should be a <button> , not a generic <div> with a handler
  • ARIA landmarks (navigation, main, search)
  • Dynamic Text Sizing:
    • Note that only the text of your tweets is required to scale. We won't penalize you if other text does.
    • If you want to make this look ~elegant~, try scaling your wrapper div along with the text!
  • Keyboard Only Navigation (see the Piazza post above)
  • Properly-styled skip links (see the Piazza post above)

Functionality Requirements

Components

  • Vue Tweets: A tweet should be a Vue component and the feed should be created using List Rendering.
  • Vue Search: The search bar which filters the feed by text content should be a Vue component and the filtering should be implemented using Custom Events or other Vue alternatives like Vue Event Bus or more advanced Vuex.
  • Vue Tweet Creation: At the top of the feed, or in another sensible location you find appropriate, you should have a Vue component that allows the user to write a new tweet.
    You are free to choose a layout and style that works best for you but the component should at minimum support plain text input and a submit button that displays the tweet on click (more info below on how to display the tweet).
    For tweet attributes like username, profile photo..., feel free to use a consistent set of custom attributes for tweets you wrote. However, these tweets should have created_at attribute set to the moment they are created and have a different background color than tweets fetched from the server. For example, one possible design if you used the Assignment 1 mockup is to show the component when the Tweet button is clicked.
    • Once submitted, the tweet should be associated with the time it was created and displayed accordingly. Like the previous assignment, all tweets should be displayed in chronological order with the newest tweets at the top, so the user-created tweet should be inserted at the correct location and should shift down when there are newer tweets either created or pulled from the server.
    • Note that your created tweets do not need to persist over page refreshes. In other words, these tweets can disappear when you reload the page. If you are interested in keeping your tweets across browser restarts purely with frontend, you can look into Local Storage, but this is optional.
  • Fetch Toggling: You do not need implement the checkbox for pausing/unpausing the feed. You can remove the HTML code for the checkbox and the JS logic for the pausing/unpausing.

Infinite Scroll

If you observe various social networking applications, you will find that posts (tweets) are often lazy loaded: they are loaded (fetched from the server) as you are scrolling down. Infinite scroll + lazy loading has the benefit of decreasing page-loading time and making your site more responsive. Apps like Instagram, Facebook, and TikTok are great examples of infinite scrolls - thanks to this design, you can get more sea shanties, and faster!

In this assignment, you will get some practice with this model by making the following changes:

  • When the page loads, make a fetch to the server (http://twitterfeedserverrails-env.eba-xmqy8ybh.us-east-1.elasticbeanstalk.com) endpoint /feed/random?q=weather and render the returned tweets.
  • When search is active, only the filtered tweets should be rendered.
  • When newer tweets are pulled or created, appropriate sorting should be performed to ensure tweets are in chronological order.
  • You should no longer periodically pull from the server using setInterval. Instead, you should only make a fetch and update the TwitterFeed when scrolling to the bottom.
There are multiple ways to achieve lazy loading:
  • Listen for the scroll event and load the tweets when the bottom of the window is reached (or another sensible ratio of the page).
    You can throttle or debounce the scroll event since it might fire too frequently, but this is not required.
  • Use the Intersection Observer API and append the tweets when a threshold is reached. This post provides an in-depth tutorial on lazy-loading with IntersectionObserver.
    Intersection Observer is a more modern approach which requires more work to set up, but is generally much more useful long-term.

General Notes

As with the previous assignment, you should do one of the following

You should also be using an accessibility checker such as WAVE. For errors that you choose not to fix, make sure to explain your rationale in your README.

This github repo is a giant list of Vue resources, including component libraries, tutorials, and example projects. Use it as a reference.

It is now also recommended that you run your JavaScript code through a linter such as ESLint (we provided a default configuration for ESLint in the Git repo, but feel free to refer to the beginning of Lab 4 for more details on custom setup).

We also highly encourage you to document your code with the use of JSDoc (simple JSDoc function header annotations would suffice) especially for any code you write whose purpose may not be immediately obvious to the reader.

While we won’t check that you used ESLint or JSDoc directly in this assignment, we will also not hesitate to deduct points if your code is hard to read which could have easily been fixed by the use of such tools.

Optional Read/Exercise: Vue Router

Notice how this course website has multiple pages connected by in-page links? It is typical in Javascript Frameworks to emulate these links by rewriting the current webpage rather than actually loading the new page. This approach can often eliminate the time spent during the loading of a new page. These sorts of sites are called Single-Page Applications.

Getting Started in Vue Router provides everything you'd need to get your Single-Page Application set up. Try adding at least one link going to a separate route from your TwitterFeed page (for instance, your completed Tic-Tac-Toe or MadLib games).

Though this section is optional, we highly recommend trying this out if you are able! Knowing how to set up and manipulate routes is essential to creating an impressive Vue application. After all, not many complex websites have only a single page (though it's totally possible to make one)!

Troubleshooting

As with previous assignments, it is recommended that you take advantage of all the online resources we have provided so far. If you get stuck, we would be happy to troubleshoot with you at TA hours! Also, as always, feel free to post questions on Piazza.

Hand in

To hand in your code for Assignment 3, upload your code to Gradescope via Github repository upload (ensure that you have pushed your changes and that you are handing in the most recent version of your code!).