See Slack (in #tech_design) for the options of logos Genetec (and Unity?) explicitly sent to us. The others can be a placeholder one from their site, searching for it, or something like https://www.logo.wine/

• Genetec and Unity are gold sponsors
• Nokia is a silver sponsor

When on mobile, the top bar is visible on the initial load and the page position is at the topmost. Once we scroll down and flick back up, the top bar is no longer visible when we are at the top again.

Is that the intended behaviour?

Please see the GIF animation below:

Also reproducible on Chrome mobile browser.

Add auto-deploy preview links for new PRs.

New Firebase feature!

https://firebase.googleblog.com/2020/10/preview-channels-firebase-hosting.html

After the Speakers page is available, create a section on the home page to promote the keynote speakers.

Thanks for the idea @gordonpn 😄

• https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2F2021.cusec.net
• https://web.dev/measure/

The resize event listeners are causing scrolling to be a bit jerky on mobile as the page is trying to resize the splash screen area to take the full height. Meanwhile, we need a way to resize the splash screen area correctly if the device is rotated to landscape.

GIF for demonstration:

Consider using https://chakra-ui.com/accordion

TBD requirements

• Resumes upload
• User email
• Name
• School
• Program
• Year
• Agree terms of use and code of conduct
• Analytics (where did you hear about CUSEC?)

Dispatch an email to the user upon successful registration through Firebase? (With Hopin registration link)

I yolo merged #54 from dependabot and it looks like it made the social icons in the nav bar smaller. Oops 😅

Potentially related to #31?

New 'splash page' for the RBC Product Pitch competition.

• at route /product-pitch
• similar to original CUSEC splash page with email sign-up

Create README.md and potentially more detailed Wiki documenting project. When taking on the issue, you should split this issue into separate README and Wiki ones and expand or clarify on the points.

Product (Wiki)

• features
• use cases
• design decisions and reasoning
• ...

Development

• setting up repo
• running locally
• how Firebase is connected/used
• testing
• deployment strategies
• ...

Update nav for the landing page

• include different sections users can jump to (scrolls to it)
• collapse to some sort of hamburger when on mobile
• (on desktop) consider animations/transitions to:
  • hide when scrolling down and show when scrolling up
  • have transparent bg when at top to not take away from hero, but solid bg otherwise (ex. https://hackthenorth.com/)

1. CUSEC logo should be added to the hackacomm banner

2. The meta description makes it look like registration is open until January 10, change to January 5.

Port over 2021 email signature from 2020 repo

• cusec/2020#7
• http://2020.cusec.net/email

Thank you for using setup-gcloud Action. GoogleCloudPlatform/github-actions/setup-gcloud has been deprecated, please switch to google-github-actions/setup-gcloud.

Useful links:

• run with warning message
• new action repo

To be determined/finalized. Some of the points below are more so brainstorming ideas rather than actual requirements to implement.

Hide or shrink "Ways to experience CUSEC" icons on smallest breakpoint

Consider adding underline highlights to keywords

Like on the FireFox website but with our colors

import { ReactElement } from "react";
import styled from "@emotion/styled";

const GradientUnderlineSpan = styled.span`
  display: inline-block;
  position: relative;

  &::after {
    background-image: url("https://www.mozilla.org/media/protocol/img/zaps/zap-09.bc0c0b72fdaf.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    left: -0.2em;
    position: absolute;
    top: calc(100% - 0.4em);
    height: 0.3em;
    width: calc(100% + 0.4em);
  }
`;

export default function GradientUnderline(props: {
  children: string | ReactElement;
}): ReactElement {
  return (
    <>
      <GradientUnderlineSpan>{props.children}</GradientUnderlineSpan>
    </>
  );
}

Set a max width container

Limit content to some maximum width to provide a usable experience even on absurdly high resolution displays.

Consider adding more spacing to nav bar items

They're too close together?

Also consider porting the link hover effect from the footer. Something like this:

export const NavBarLink = styled(Text)`
  font-family: "Inter", sans-serif;
  font-weight: 500;
  margin-right: 32px;
  position: relative;

  &:after {
    background: ${theme.colors.brand.dark_teal};
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  &:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
`;

Make "Ways to experience CUSEC" cards slightly thinner on desktop

The cards can sometimes show up as a single vertical column instead of 2x2 depending on browser/system? Make smaller to accommodate a larger range of displays.

Adjust min-heights in hero to accommodate the extra space the nav bar takes up

There's not much space at the top especially on something like a 1080p phone with the mobile address bar down.

Consider tweaking sizing of headlines and section spacing

The spacing between sections feels a bit cramped? Please see Figma for latest mock-up.

Update hero for landing page (instead of splash page)

• include a register button (replace the email listing signup?)
• consider using "Virtual Event" instead of "Virtual Experience" to be more clear?

Add Code of Conduct and Privacy Policy to their links in the footer.

Consider creating a separate page for them to link to so we're able to share it as links more easily.

• previous code of conduct: http://2020.cusec.net/#/codeofconduct
• previous privacy policy: N/A

The Google Analytics built into Firebase isn't configured right

1. firebase.analytics() needs to be called
   • Step 2 of https://firebase.google.com/docs/analytics/get-started?platform=web#add_the_sdk_to_your_app
   • consider finer detail with logging events (ex. firebase.analytics().logEvent('clicked_instagram'))
2. Also some extensions or browser features may block analytics domains/scripts
   • some issues seen in firebase/firebase-js-sdk#2600
   • bundling it in the build-export instead using the reserved hosting URLs (installing with npm vs loading with <script> tag) may work around it?
     • would need to update CI/deployment configs to keep staging and production environments intact

Add carousel of images and quotes of past speakers.

• automatically switch speaker after certain amount of time
• user can select a specific speaker to highlight by clicking on them
• hovering over speaker temporarily pauses the switching
• shows tool-tip of basic speaker information when hovering over

A contact page with the three main email address of CUSEC our visitors could use to email us and ask questions.

Show head delegates of each university, with picture and email.

Would it make sense to put "Join our email list" and the input box on the same line? And move the "Interested in sponsoring?" text to it's own line in Desktop?

"Join our email listing" => "Join our email list" or "Join our mailing list"

https://cusec-team.slack.com/archives/C03KB4HCN/p1599061048000400?thread_ts=1598997168.005300&cid=C03KB4HCN

Currently:

It might be tricky finding a layout on desktop that makes the "Join our mailing list" message association clear while also not taking up too many lines.

Missing image is shown during load, at least on Chromium based browsers. The effect is more prominent with slower connections.

Consider importing the SVG assets instead of loading them in an <img>:

• https://stackoverflow.com/a/56290478
• https://github.com/vercel/next.js/tree/master/examples/svg-components

Or more generally, use a webpack plugin that supports multiple image formats

• https://github.com/arefaslani/next-images
• https://github.com/cyrilwanner/next-optimized-images

Depending on timeline, we may want to launch a minimal 2021.cusec.net with just the top hero section first.

Background graphic is not finalized but can be swapped fairly easily.

New requirement to add email listing sign-up.

Similar to uOttaHack 4 splash page

• firebase config
• hosting with auto-deploy
• analytics
• deploy to staging and production environments

#9 (review)

• https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

Basically avoid using 100vh for full height sections on mobile because some browsers include the address bar height while it's being shown, making the bottom of the section hidden

https://github.com/tasti/react-linkify

Remove "Stay tuned for more!" text at bottom of sponsor section and add (at the bottom) the logos for

• University of Waterloo
• University of Ottawa
• University of Toronto
• Carleton University
• University of Calgary

These are the universities who have bought/subsidized tickets for their students.

Open questions

• change name from product pitch? We could redirect to a new endpoint
• not sure if all the content is approved yet

A page to explain the different types of events the virtual conference will host.

some of the stuff is redundant

Especially pandemic specific questions and answers

The new image features look really cool! The sponsor showcase section may benefit from it.

When using the next/image component, images are automatically lazy-loaded, meaning they're only rendered when the user is close to seeing the image. This prevents loading that 30% of images outside of the initial viewport.

Image dimensions are enforced, allowing browsers to immediately render the space needed for the image instead of having it jump in when loaded, preventing layout shift.

Even with these improvements compared to the HTML element, there's still a major problem. The 2000 by 2000 pixel image is sent to phones that render a smaller image.

With Next.js 10 we're also solving that problem. The next/image component will automatically generate smaller sizes through built-in Image Optimization.

• https://nextjs.org/blog/next-10
• https://nextjs.org/blog/next-10#built-in-image-component-and-automatic-image-optimization

Automatically backup Firestore data on a regular occurrence. This is only necessary on the production Firestore.

Consider exporting Firestore data to a Cloud Storage bucket using gcloud on GitHub Actions:

• https://firebase.google.com/docs/firestore/manage-data/export-import#export_data
• https://github.com/GoogleCloudPlatform/github-actions
• https://github.com/actions-hub/gcloud

Update: will likely leave this out

Add a section or some sort of popup that explains the reasoning behind the virtual experience.

Something like this from Hack the North:

Currently blocked by design and content/wording.

Please see the Figma project for assets, specs, and most up-to-date mock-up.

A release without an accompanying promotion post, before registration details are finalized.

• replace hero register button back with email signup
• remove ticket pricing register button
• link sponsor button
• show 2x2 card grid in Ways to experience CUSEC section on 1440x900 displays (i.e. MacBook Air)
• add attributions footer modal

Also see #64

https://moz.com/learn/seo/robotstxt

https://github.com/tasti/react-linkify

Timeline of the events and speakers, of the weekend of the conference.

Please see the Figma project for assets, specs, and most up-to-date mock-up.

Chakra v1 has been released! It's low priority for us to update since v0.8 works well, but it'd be cool to if there's time 😄

• https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Freact%401.0.0
• https://chakra-ui.com/docs/migration

Installing dependencies takes much longer during builds.

See https://github.com/cusec/2021/runs/1366985806?check_suite_focus=true versus https://github.com/cusec/2021/runs/1344483283?check_suite_focus=true on Install Dependencies step (3m 35s and 20s respectively).

The extra time seems to be from falling back to source compile due to grpc pre-built binaries not being found.

> [email protected] install /home/runner/work/2021/2021/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using request for node-pre-gyp https download 
node-pre-gyp WARN Tried to download(404): https://node-precompiled-binaries.grpc.io/grpc/v1.24.2/node-v83-linux-x64-glibc.tar.gz 
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v83 ABI, glibc) (falling back to source compile with node-gyp) 
make: Entering directory '/home/runner/work/2021/2021/node_modules/grpc/build'

Potential solutions:

• https://stackoverflow.com/questions/52164351/pre-built-binaries-not-found-for-grpc1-10-1-and-node10-9-0
• https://stackoverflow.com/questions/51107020/error-during-npm-i-node-pre-gyp-install-fallback-to-build-library-static-l

Add a dismissible bottom banner/popup on the main page (/ route) linking to the HackaComm page (/hackacomm route) to improve its visibility.

Very similar to Hack the North's BLM message (desktop/mobile):

WIP message: "Check out HackaComm: a brand-new hackathon brought to you by CUSEC and RBC!"

It seems like having global Head (in _app) alters the classes/styling applied to TopBar components and potentially more.

It was introduced in 0718853 and the most obvious effect is the Social icons becoming smaller. A new class is being applied to it that overrides the width that was previously set.

Edit: I'm not exactly sure but I feel like it's something to do with trying to set the fontawesome width with emotion/styled instead of using its props. Idk why the issue didn't appear earlier though 🤷

A page to showcase all the speakers of the conference, with description (and biography).