nerdngo / nerdsummit2020 Goto Github PK

We are the New England Regional Developers! Each year we hold our annual NERD Summit. Building up to the summit we collaborate with the local community, creating a diverse curriculum for relevant skill building. Please join us!

HTML 63.56% CSS 10.30% JavaScript 19.06% SCSS 7.08%

summit conference-site

nerdsummit2020's Introduction

NERD Summit Website

This is the codebase for the NERD Summit website: https://nerdsummit.org/

STRUCTURE

The site is essentially a one-page website with most of the content in index.html and with code.html being the Code of Conduct page.

The sessions section is built with Javascript via the /js/sessions.js file which gets the sessions data from data/sessions.json. This is currently in the process of being changed to get data from a Google Sheet via a JSON feed. See BACKEND section.

FRONTEND

Starting with the 2020 version of the site, Gulp has been configured to use Sass and PostCSS. In order to use this, install everything by opening a terminal window, navigating to the nerdsummit2020 folder on your machine, and running npm install. To run the Gulp command, run gulp watch.

CSS classes should be named by using the BEM (Block, Element, Modifier) methodology. To learn more, Get BEM give an overview of the methodology, ways to implement it, and answers frequently asked questions.

BACKEND

See /backend/README.md for how the backend works.

WORKFLOW AND DEPLOY

Pushing the master branch automatically deploys the code to the Github site: https://nerdsummit.org/

Create and push a branch with your code, then create a pull request.

ABOUT NERD (New England Regional Developers)

NERD creates positive and supportive learning opportunities for people who work, or want to work in web and related technology. Too many smart, passionate people have been traditionally excluded from tech careers, and we're changing that.

NERD runs an annual conference in March each year called NERD Summit, hosted at UMass Amherst.

The Organizers of NERD Summit can be contacted at [email protected].

nerdsummit2020's People

Contributors

Stargazers

Watchers

Forkers

chintankotadia acupoftee

nerdsummit2020's Issues

Some Basic Object styling

NOTE: the sizes/colors/etc are fixed values from invision and do not necessarily represent the intention of the design.

`h2` or section headers

- 8 columns wide
- #2128BD (blue)
- font-size: 48px;
- font-weight: 900;
- line-height: 51px;
- text-align center

##Subtitle (only appears once that I can see)

- 12 columns
  color: #212121;
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;

Buttons

two styles:
filled:
.button-text {
height: 24px;
width: 179.84px;
color: #FAF8F2;
font-family: Montserrat;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.5px;
line-height: 24px;
text-align: center;
background-color: #2128BD;
}
hollow:
.button-text {
height: 24px;
width: 176.11px;
color: #2128BD;
font-family: Montserrat;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.5px;
line-height: 24px;
text-align: center;
border: 3px solid #2128BD;
}

`h3` or subsection heading

.new-england-regional {
height: 36px;
width: 1120px;
color: #000000;
font-family: Montserrat;
font-size: 30px;
font-weight: 600;
line-height: 36px;
text-align: center;
}

paragraph

.nerd-summit-is-a-pro {
height: 72px;
width: 8 columns
color: #000000;
font-family: Montserrat;
font-size: 18px;
line-height: 24px;
text-align: center;
}

links (these are the heavy blue links as displayed in the About section

.learn-more-about-ner {
height: 24px;
width: 8 columns
color: #2128BD;
font-family: Montserrat;
font-size: 16px;
font-weight: 900;
letter-spacing: 0.5px;
line-height: 24px;
text-align: center;
}

Fix side padding

Side padding: At the site’s max width of 1200px, there’s currently 70px of space between the site logo and the left edge of the browser window, and the “Donate” button and the right side of the browser window. In the designs it’s much lower, 40px.
Above is copied from: https://docs.google.com/document/d/1fN-RnlYSRUHRyFX4jLl2dQ0cS5J3ol-x55oa8Uov478/edit#

Display nerdy images on mobile.

NERDys on mobile: Currently, NERDys are disabled on mobile. Rick listed this in Slack as a high priority item, since the site is now looking pretty plain on phones. Aubrey and Molly discussed working on this. One thing I want to note here is that around a browser width of 900px, the NERDys in the hero area Billboard partially obscure the secondary CTA. (Moving those NERDys down a little is preferable to increasing the bottom padding of the Billboard.)

Above is copied from Google Doc: https://docs.google.com/document/d/1fN-RnlYSRUHRyFX4jLl2dQ0cS5J3ol-x55oa8Uov478/edit#

Create a Google Sheets based backend

Goals:

Reduce steps involved in moving data from Google Sheets to the website and mobile app.
Allow for automatic update of site/mobile app
Caveat: without the heavy lift of a full CMS, data schema, etc.

Proposal:
Create a backend that securely receives data from Google Sheets and serves it to clients in whatever form they require.

Problem space:

Making requests directly to Google sheets is very slow, and would negatively affect the performance of the site/app.
Employing a long-poling application that would regularly fetch and store data from Google Sheets would add some deployment/maintenance complexity, as well as potentially adding expense

Proposed Solution:

Create a Google Sheets script that will trigger using Google onEdit "hook", and send data to a...
node.js application that will save the data (as json).
the clients (site/app) will make their data requests to the same node.js application.

I've outlined the basic structure here: https://docs.google.com/drawings/d/1Lu_fohociQ4krnTXf0s6YfN1PO9HbvqAwethzo_xsnQ/edit?usp=sharing

split site into front and back end

This relates to #3, but it's more generic and can be done before the backend is complete. Basically, if we're working in a "monorepo" we can split the back and front end into two separate directories. This will prevent us from accidentally shipping backend code to the client, or frontend code to the server.

Something like this:

.
├── CNAME
├── NERDS_2017_SCHEDULE.pdf
├── README.md
├── VOLUNTEERS.md
├── backend
│   ├── knex
│   └── node_modules
└── docs
    ├── code.html
    ├── css
    ├── data
    ├── fonts
    ├── images
    ├── index.html
    ├── js
    ├── party.jpg
    ├── robots.txt
    ├── sign.jpg
    ├── slides
    └── test.html

There need to be a configuration change in the repo's Settings to target the docs directory for the github pages build.

Remove excess javascript

I've identified a few places where we're using JavaScript. Let's peel out the areas we don't need it, with the expressed goal of removing jQuery from the site. I've marked the ones I think we can replace functionality or remove altogether with **

index.html

anchor.js (I'm not sure this is actually used at all) **
mailchimp embed.js
mojo/signup-forms/Loader"
what-imput.js **
jQuery **
foundation **

app.js - jQuery**, Foundation**. I think this is used for the hamburger menu

session.js - vanilla javascript only (ES6, so we should check compatibility tables)

slides/ - jQuery, flexslider

Accordions:

Borders should be removed. Note the space between the accordions present in the design: https://invis.io/SYV4JDAMBGD#/396335086_Sessions_Billboard
The sides of the accordions shouldn’t touch the sides of the browser window -- there should be 40px between them.
Once opened, there should be more space between the content that’s visible when expanded, and the content that’s revealed when opened. I.e., the time/ room and the “Sponsored by”. They’re tight. It should be equal to the space between “Sponsored by” and ”Track”.
The placement of the + icon looks a lot more vertically centered if I change the line height to 3.5rem. Then the - icon lines up with it a lot better if I change its line height to 3.75rem.

Above is copied from: https://docs.google.com/document/d/1fN-RnlYSRUHRyFX4jLl2dQ0cS5J3ol-x55oa8Uov478/edit#