Jenny Yu, Bob Zeleznik October 20, 2023 What is Dash? Dash is a collaborative, browser-based hypermedia system designed to help knowledge workers build and navigate complex relationships between content in the form of different media. Users can create, attach, link, and group multimedia content, such as text, image, video, PDF, etc., on different types of visual layouts. They can also weave them into hypertrails for interactive exploration and presentation. This documentation is created to provide an overview for the system architecture and design principles that guide the development of Dash. It also documents some problems that the team has run into, how we solved or are working to solve them. Hopefully this can provide some insights into Dash's data and system model and serve as an introductory reference for future development work. If you find any of the concepts interesting and inspiring, or have suggestions for how we can improve, we would love your contribution!

<span style="font-size: 50px;">Final Project</span> :::info Due Dates Individual Ideation: 11/8 at 11:59 PM Group Formation: 11/10 at 11:59 PM Project Proposal: 11/17 at 11:59 PM Check In #1: 12/1 - 12/4 Check In #2: 12/8 - 12/11 Submission: 12/13 at 9:00 AM

<span style="font-size: 50px;">Assignment 4: Additional Hypertext Features</span> :::info Released: November 3rd Due: November 22nd at 11:59 PM ET ::: (x * x))) ``` -->

TextContent I am not able to see changes unless I do a hard refresh (or some other weird behavior, e.g. not finding any links). In our application, a lot of the automatic refreshes are handled by toggling the refresh variables. For instance, when you make some modification to the database that you want other parts of the application to know, you toggle one or more of the refresh variables, which trigger other functions to compute via useEffect and cause updates to the components you see. However, to see this in action, you need to be properly toggling the variables and have a useEffect that listens to them. Make sure you... have a useEffect that is listening to changes in the refresh variables. When the refresh variable changes, you should call addAnchorMarks() to update your anchor marks based on the most recently updated anchors in the database. are only updating your anchors after you have updated your node content. You may handle both logic in sequence in the same function using proper await calls, or you may implement them in different functions and chain them together using .then() are only setting the refresh variables AFTER you have updated both node content and anchors. Otherwise when you application refreshes (and when functions such as addAnchorMarks are triggered), they might be operating on previous application states and cause weird behavior)

<span style="font-size: 50px;">Assignment 2: Anchors & Links</span> :::info Released: September 28th, 2023 Due: October 11th, 2023 at 11:59 PM ET ::: :::danger ⚠️ Do not clone the Assignment 2 stencil code until you have submitted Assignment 1 for the last time to Gradescope. We will be checking to make sure you do not submit Assignment 1 after cloning Assignment 2. :::

After you've completed coding your system, it is time to deploy it to remote servers so everyone with internet can access it. To introduce you to different technologies, we are going to deploy the backend using Render, and the frontend using Vercel. Feel free to share the deployment link (not the code) with family and friends, or you may even want to showcase it on your resume! :::danger Please ensure any URLs / project IDs you choose are anonymous and do not have your name, since we use anonymous grading. ::: Deploying the Backend First, we'll want to deploy our backend service to Render. Render is a unified cloud to build and run web applications instantly from GitHub. It automatically builds and deploys your service every time you push to your repository and features native support for Node.js applications. :::success

<span style="font-size: 50px;">Lab 3: Editable Nodes</span> :::info Released: October 12th, 2023 Due: October 18th, 2023 at 11:59 PM ET To get checked off for this lab, meet with a TA at your lab section or TA hours ::: :::danger ⚠️ Do not clone the Assignment 3 stencil code until you have submitted Assignment 2 for the last time to Gradescope. We will be checking to make sure you do not submit Assignment 2 after cloning Assignment 3. ⚠️ :::

Competitive Analysis Assignment :::info Released: October 5th Due: October 17th 11:59 PM ::: :::warning Reminder: There are no late days for non-code assignments! :::

⬅️ Return to course website <span style="font-size: 50px;">Content Creation Assignment</span> :::info Released: September 22nd Due: October 3rd 11:59pm ET ::: :::warning Reminder: There are no late days for non-code assignments!

<span style="font-size: 50px;">Lab 2: Anchors and Links</span> :::info Released: September 28th Due: October 4th at 11:59 PM ET To get checked off for this lab, meet with a TA at your lab section or TA hours ::: :::danger ⚠️ Do not clone the Assignment 2 stencil code until you have submitted Assignment 1 for the last time to Gradescope. We will be checking to make sure you do not submit Assignment 1 after cloning Assignment 2. ⚠️ :::

⬅️ Return to course website <span style="font-size: 50px;">Assignment 1: Nodes</span> :::info Released: September 13th, 2023 Due: September 27th, 2023 at 11:59 PM ET ::: (x * x))) ```

⬅️ Return to course website <span style="font-size: 50px;">Lab 1.5: Dash</span> :::info Released: September 21st Due: September 27th 11:59pm ET To get checked off for Lab 1.5, fill out the form at the bottom of the handout after completing both parts of the lab (Dash and Intermedia). ::: (x * x))) ```

⬅️ Return to course website <span style="font-size: 50px;">Lab 1: Nodes</span> :::info Released: September 13th, 2023 Due: September 20th, 2023 at 11:59 PM ET To get checked off for this lab, meet with a TA at your lab section or TA hours ::: (x * x))) ```

⬅️ Return to course website Assignment 0: Setup :::info Released: September 6th Due: September 13th at 11:59pm ET Note: Annotations on the reading are due by September 10 at 11:59pm ::: (x * x)))

CS1951V Course Communication Guide (Fall 2023) Overview Slack is our primary platform for course communication, with a few exceptions. Andy doesn’t use Slack, so you should email him. For official matters like extension requests and Dean's notes, you should email Andy at avd@cs.brown.edu. You should NOT contact the HTA/TAs for these matters. All other communication should be sent over Slack. Slack We will use Slack in lieu of EdStem for this course. We'll pin relevant FAQs and announcements in each Slack channel; please check these first before asking questions.

Glossary The MERN Stack :::info A 'full stack' web development framework consisting of a MongoDB database, Express and Node backend, and React frontend that you'll be using throughout this course. ::: MongoDB: Database system that stores node data for our webpage, accessed using HTTP requests. Express.js: Backend web application framework used for sending HTTP requests to MongoDB. Node.js: Backend Javascript runtime environment that runs the Express.js framework for sending HTTP requests to MongoDB. React.js: Frontend Javascript user interface library we use to display nodes.