MP451 - 2 Credits

Hello, I am Reece Emero, a Senior Computer Science student.

As a lab member, I have done stuff and things. (press spacebar to continue)

General

• Attended all COSI meetings (except 3/4/2020 *exam)
• Documention on layout change

Projects

• NodeTalks2

  • Written in Node.js
  • Added GitHub Workflow - automatic CI/CD pipeline run on commit
  • Added linter using Standard.js
  • Added code formatting using Standard.js
  • Added testing with Mocha.js and publically display badge in repo if tests passing or failing
  • Added codecov - badge with % publicly displayed in README
  • Added npm script to make documentation in form of web page using JSDoc
  • Added Husky hook to lint code before commit is made
  • Added developer/production modes
  • Working on API
  • Button for each talk that when pressed moves it to next weeks meeting
  • Edit a talk
  • Render links
  • Embed wishlist (working with Thomas)
  • Mobile layout
  • Rearrangeable talks
  • Custom color scheme
  • Confirmation on talk actions (hide/delete/move to next week/check-off/etc)
  • Embed current list of active projects
  • "Ongoing" section
  • Visual distinction between different talk types
  • Be able to view previous meetings. Example: once meeting ends everything checked-off during the meeting is saved and anything not is moved to next week automatically. Once a meeting has been saved, could go to talks.cslabs.clarkson.edu/meetings/4292020 where the ID of the meeting is the date

• This MP* Page

  • The folded page effect was created by adding a div element to the top of the page. Then, it was given the style rule `position: absolute` with it being positioned at the top left of its parent, the "main" element. This means changes to its position are relative to "main" and the div is now "out of flow", in which, other elements' positions will not be affected by this div. With the position set up, the styling to create the fold effect is done by adding a large `border-width: top right bottom left` to the div element. The top and right border width being set to 200 pixels creates a triangle in the top left corner of the div and setting it to the background color of the page will make it disappear. Essentially, the css cuts a triangle of the top left of the "main" element. Adding a `box-shadow` to the bottom and right borders creates a shadow that makes it look 3 dimensional. Now a 3D fold effect is created.
  • I use the Local Storage API to keep track of if the page has been fully traversed or not. This way, unless you hit the reset button, you won't have to keep pressing spacebar to view the whole page again; it will just display everything after the first traversal. Resetting involves giving the button element an `onclick` event that simply removes the boolean from local storage and reloads the page.
  • The functionality for viewing each line of the MP* page is done by initially hiding all the elements with the "text" class. Then, when the spacebar is clicked, the page will automatically scroll to the position of the next line on the page, unhide it, and display an animation called "BAM" where it initializes the font-size of the text at the start of the animation to be really huge and then during each frame, descreases the font-size until it ends at the regular font-size. This creates a sort of effect where it looks like text was "dropped" onto the page.
  • I used the Web Audio API for the soundclips. I instantiated Audio objects with the URLs for the audio clips and then I was able to randomly set a start time for them to play/pause. This was to prevent the bass boosted audio from sounding flat each time a new line on the page was shown. You can actually do some really neat things with this API, like manipulating buffers and streams. For example, this visualization of a frequency bar graph: here.
  • I used the Gamepad API to connect my switch controller to the page. I initially set an enumerated buttom mapping list. This provides a nice way to see which button index corresponds to which button name on the controller. The way button presses are retrieved and processed is by using polling to get the current state of the controller. Then, if the right trigger button is pressed during a polling iteration, it triggers the script to display the next line on the page. If the plus button is pressed, it flips the checkbox on/off.
  • My favorite part about making this MP* page was making the CSS and Javascript that were necessary to develop the beautiful transitions that play when shitposting is set to ON. The shaking effect was done by moving the top/left positions of the main element every 16ms. As a result, all the text nested inside this element would move as well, creating the effect across all text items. When spacebar is clicked during this mode, a background-image with red dots (noise) is layered on top with brightness and contrast CSS filters. There is a resulting deep-fry effect. And of course, what is a deep-fryed shitpost without its liberal application of crying face emojis? The same text shaking effect and filters are applied to these as well but are hidden after a period of 400ms. And that is how I created this effect.

Talks

• cantunsee.space
• NPM game

Others

• Project Challenge - 5 weeks helping high school students learn programming and computer science (tought webdev: slides)
• Soda runs and handling soda refund
• Learned about wishlist's API. To ping the API, you send a POST request with the headers "X-Requested-With" set to "XMLHttpRequest" and "Content-Type" to "application/json" to the API's location "http://wishlist.cslabs.clarkson.edu/api" with a JSON payload. This allows you to send a JSON object through an AJAX request to Wishlist's web server and in return get a JSON object back. I made a Postman collection if anyone wants to try pinging Wishlist's API. The collection with instructions can be found at this repo. The way this is integrated into NodeTalks2 is by receiving the talks page from the Node web server and loading it on the frontend first. After the page loads, an AJAX request is sent to wishlist's API to receive the JSON object containing the wishes. Finally, they are loaded into a section at the bottom of the page.