User Tools

Site Tools


webredesign2018

This is an old revision of the document!


2018 Website Redesign

Contact and Code Locations

Persons Involved

Position Name Email
Project Oversight: Bennett Maciorowski (LUG President) bennettmaciorowski@gmail.com
Project Lead/Manager: Joshua Castor (Senior Technical Officer) joshua.castor@joshuacastor.me
Project Back End Lead: Will Toher N/A
Project Front End Lead: Joshua Castor (Technical Officer) joshua.castor@joshuacastor.me
Deployment Lead: Bharat Middha (LUG VP/SysAdmin) N/A

Team Members: Bennett Maciorowski, Bharat Middha, Brent Yurek,Ghost (need to put real name),Jacob Raffe, Joshua Castor,Stephen Walden, Tejaswi Reddy Kondammagari, Will Toher

Tech Stack Used: Python Flask, Vue.js, Html, CSS

Documentation

Front End Documentation



Back End Documentation


Deployment Process




Meeting Notes

Meeting 1 [Sept 12 2018]

Website design meeting - Sept 12 2018

* Attendees: Bennett Macioroski, Bharat, Brent, Joshua Castor, Jason, Marco (left early), Michelle, Will T, (late), Tian Z (late), Dan H (late)

* Topic: Website Redesign * Current Site

  • Looks old
  • Data is outdated
  • Via PHP, no CMS
  • no more IRC
  • old Google Calendar widget looks old
  • things to keep
    • slack URL
    • mailing list, location
    • LUG email

* Wants for new site

  • ability to register online
    • preferably, proper form, database, etc.
    • application is ready (via Bharat)
  • streamlined mailing list sign up process
  • want CMS (Content Management System)
    • Drupal or Wordpress
    • Or homebrewed
  • relevant info should be front and center
    • events, officers, room location, available utilities
    • events: custom calendar widget
  • livestream of 3D printer
  • look more “modern”
    • current site seems a bit blank, maybe larger images to fill page space
    • not white pages
    • dark theme
  • analytics

* ACM Member application

  • long ass form

* Available Infrastructure (Chase Lee)

  • Make Containers
  • Clusters of servers
  • 22TB of space
  • Site Tracking, GDPR (if necessary)

* Josh's Proposal: VueJS (JavaScript, HTML, CSS)

  • pros
    • Can have Server Side Rendering
    • MEVN stack
  • cons
  • merged with Bharat

* Ben's Proposal: HTML, Flask (Python), Docker, Nginx, UWSGI, Jenkins

  • pros
    • most have some experience with Python
  • cons
    • why not DJango? Ben has more experience with Flask
  • vote: Brent, Ben, Tian (with Vue as frontend), (and Will Toher)
  • Will Toher
    • Jenkins is very complicated CI in his opinion, but also one of the better self hosted

* Bharat's Proposal: Vue, NodeJS, MariaDB (MySql), Yarn, Docker, Mocha/Chai/Jenkins, Redis, Nginx, Sass

  • pros
    • “the new hip thing”
  • cons
  • vote: Bharat, Josh

* Chase: I <3 PHP, no Ruby

  • also: Angular, PHP - backend, Laravel, MariaDB (MySql), Yarn, Docker, Mocha/Chai/Jenkins, Redis, Nginx/Apache, Sass
  • vote: Chase, Dan H.

* next meeting

  • 2 weeks (Sept 26)

Meeting 2 [September 26th]

# pre meeting notes * talk about…

  • look and feel of new site
  • content of site
  • setting up Docker
  • Splitting up people into teams
  • review of procedure for pushing code and branches (i.e. logistics, not exact process)

* agenda

  • mention flask-vue concept - 5-10 minutes
  • branch off into… (tentative order)
    • docker and backend (first, as it's probably quick) - 5 minutes
      • who's going to set it up
      • who's working on it
    • Github organization and logistics - 5 minutes
    • splitting into teams - 10-15 minutes
      • tentatively
        • main project manager for frontend (probably Joshua Castor)
        • main project manager for backend (probably Bharat)
        • UAT person (probably Stephen Walden) (a.k.a. QuailAss person)
          • User Acceptance Testing
        • split by tab/page (TBD after discussing look and feel of site)
    • discussing look and feel of new site (main part of meeting) - time permitting, may move to separate meeting, maybe Monday, 10/1?
      • CSS frameworks (if any)
      • what are main tabs/pages → split frontend people into teams
      • content per tab/page
      • color theme(s)
      • page layout(s)

# meeting * brief app walkthrough (https://github.com/BluuArc/LUG-Flask-Vue-Example) * Content Management Systems

  • Goal: Make it easy to create, edit, and notify people of posts
  • 3rd party
    • Drupal (complicated, but more powerful than Wordpress according to Bharat)
    • Wordpress (easiest according to Bharat)
  • Make our own?
    • Not worth it in terms of maintainability (Chase)

* DevOps (Docker, CI/CD, etc.)

  • Bharat and Chase

* GitHub Team for Web Redesign

* GitHub Repo organization

* Splitting into teams

  • DevOps - Bharat
  • Backend - Ben
  • Frontend - Josh
  • Current Plan
    • leaders create tasks
    • each team can then run their own meetings separately
  • To readers: Pick up issues, you're not tied to a specific team, ask leader for more info

* Idea: dump old slack messages and post them * Look into accessibility * Tentatively have look and feel meeting on Monday, Oct 1. Need to figure out optimal time

  • quick brainstorming session
    • Projects page
    • Wiki page
    • Membership registration form
    • Event Gallery
    • Event Page (current and future)
    • Officers page, w/ record of officers
    • Home/Splash Page
    • 3D livestream
    • Contact Us

Meeting 3 [October 4th 2018]

# pre meeting notes
* talk about…

  • look and feel of new site
  • content of site
  • Splitting up people into teams

* agenda

  • discussing look and feel of new site (main part of meeting) - time permitting, may move to separate meeting, maybe Monday, 10/1?
    • CSS frameworks (if any)
    • what are main tabs/pages → split frontend people into teams
    • content per tab/page
    • color theme(s)
    • page layout(s)
  • split by tab/page (TBD after discussing look and feel of site)
  • quick brainstorming session from last meeting
    • Projects page
    • Wiki page
    • Membership registration form
    • Event Gallery
    • Event Page (current and future)
    • Officers page, w/ record of officers
    • Home/Splash Page
    • 3D livestream
    • Contact Us

# meeting * navigation bar

  • permanent left menu with pages (potentially collapsible on smaller screens - need testing)
  • category listings
    • Home
    • Events
    • Projects
      • Project Listing
      • Wiki Page
    • Services
    • About Us
  • AppBar
    • top right
      • sign up
      • slack
    • top left
      • menu icon (on smaller devices only)
      • icon/logo
        • move logo to side menu on smaller screens

* pages

  • Projects page
    • record of projects
  • Wiki page
  • Membership registration form
  • Events
    • tile + thumbnail listing
    • sort newest first by default, search functionality
    • bare minimum: link to Google Calendar widget embed
    • Event Gallery of previous events
    • Event Listing (current and future)
  • Home/Splash Page
    • pictures of recent events - carousel - higher target
    • office location
    • link to Slack channel
    • LUG description (Lorem ipsum filler)
    • sign up form/button/link
  • 3D livestream
  • Contact Us
    • Question page - post question functionality
  • About Us
    • who we are
    • Officers page/listing, w/ record of officers
      • each officer has their own tile, with description and contact info

* Design Decision: Using [Vuetify](https://vuetifyjs.com/en/) framework for components

* stretch goal: konami code on front page for bonus theme

* logo only

  • black background
  • green primary color
  • stereotypical console font (e.g. Consolas)

* Action Items for next meeting (TBA)

  • Josh: create mockup of site
  • Others on frontend: brush up on Vue

Meeting 4 [October 23rd 2018]

* agenda

  • go over PR
  • decide whether to keep layout
  • if we keep the layout, start creating issues
  • if not, brainstorm more layout

* sign up button

  • start with Google Form
  • potentially revisit later on to implement our own form

* home page

  • top banner
    • hardcoded
  • about section
    • hardcoded
    • left half: description
    • right half: location
  • event carousel
    • API for event data
    • 1 entry at a time
    • each entry contains
      • title
      • desc
      • possible image
      • timing
  • officer cards
    • API for officer listing
    • each card
      • game card style
      • top: name
      • image
      • position
      • bio
      • special abilities
  • utilties listing (cards?)
    • hardcoded

* easter egg: visiting pages in a specific order leads to a specific page * GitHub issues will start showing up sometime over the next few days

Meeting 5 [October 30th 2018]

* agenda

* front page cricisms

  • on light theme, there's a gray bar in the event carousel; there was a suggestion to remove it
  • on dark theme, color highlighting the active page on the left sidebar doesn't have enough contrast; there was a suggestion to change it

* Officer API

  • endpoint: `/api/officers?semester=fa2018`
    • returns array of officers
    • `semester` - define what semester to show officers for
      • if not specified, returns all officers
      • e.g. `/api/officers?semester=fa2018` returns an array of officers for Fall 2018
  • one officer object
{"name": "officer name",
        "rank": "some rank",
        "desc": "description of officer, just plaintext",
        "github": "github link",
        "personal_site": "link to personal",
        "image": "image link, if needed",
        "special_ability": "a special ability",
        "join_date": "a date object"
    }

* Events API

  • endpoint: `/api/events`
    • returns array of events all future events
  • just look at output in Slack
{"summary": "/bin/systemctl: Virtual Machines",
        "timeStart": "2018-10-22T22:00:00.000Z",
        "timeEnd": "2018-10-22T23:00:00.000Z",
        "location": "",
        "description": ""
    },

* Josh todo: Move the API notes here to their respective issues

Meeting 6 [October 30th 2018]

* agenda

  • overview of current issues
  • plans for future of project

## Updates

* Hao (spelling?)

  • not much progress
  • working on learning HTML and Flask

* Stephen

  • not much, will have more QA work in ufture

* Josh

  • frontend is ready to query for events and officers from backend

* Brent

  • looking into current open issues

* Ben

  • working on PR for Python readme
  • working en backend for events API

## Meeting * going over issues

  • Utilities to list
    • RPi
    • Arduino
    • Ice Cream
    • 3-D printing
    • no images (just names)
    • center listing
  • Home - Officers
    • Stephen will start template, Josh will clean up
  • Home - Events
    • Josh will take card design
    • Ben is working on Backend

* future

  • mockups for project listing and services (from Ben)
  • services
    • make listing consistent instead of alternating
  • about page
    • who we are
    • what we do
    • link to constitution
    • relevant links
      • slack
      • github
      • other social media links
    • listing of previous officers
  • wiki page
  • Events page
    • same thing as events page in CS lounge
  • utilities - hardware based, and ice cream
  • services - online + hardware stuff
    • everything on utiities except ice cream
  • Josh: finish up mockup layout and create PR and issues
  • next meeting: next week Thursday (11/1)

Meeting 7 [November 1st 2018]

Meeting notes

# Agenda

* Welcome Will Toher as new backend lead
* Go over current issues and PRs; check for updates
* Workshop

# Meeting notes

  • merging services and utilities
  • front page: utilities → services
  • Went over issues and PRs

Meeting 8 [November 8th 2018]

#Agenda
* updates from people
* go over current issues and pull requests in GitHub
* workshop rest of time

# Meeting Notes

* Stephen, Ben, Hao - no updates
* Will, Josh - going through issues

Meeting 9 [November 13th 2018]

# Agenda

# Meeting Notes

  • Updates
  • Ben - historical officer stuff
  • Stephen - no updates
  • Jacob - service data
  • Teja - finishing up course
  • Josh - various issue

* Discussed Integrating DnD Webapp with LUG website
# dndwebapp

  • SQL Lite for databases (until we move to Docker)
  • When using Docker, have a separate dedicated server for database managment
  • Postgres, MySQL
webredesign2018.1542642461.txt.gz · Last modified: 2018/11/19 15:47 by benbigmac