engineersftw / website

Engineers.SG

Engineers.SG website

Development Setup

Getting the source code

The easiest way to do this is to check out the Git repository:

git clone https://github.com/engineersftw/website.git

The git repository will be checked out into a local folder named website.

(If you are keen on contributing to this project, do fork this repository and check out from your own fork of the Git repository.)

Install Ruby

1. Install Homebrew.

2. Install rbenv:

   brew update
   brew install rbenv ruby-build

3. Add rbenv support to your local profile:

   echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
   echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

   If you are using zsh:

   echo 'eval "$(rbenv init -)"' >> ~/.zshrc

4. Install the current Ruby version:

   rbenv install -l
   rbenv install 2.6.5

Install PostgreSQL

1. You will need PostgreSQL installed and started.

   For newbies, I'd suggest that you download and install Postgres Mac App. You may need to edit config/database.yml to connect via TCP socket.

2. Ensure that the PostgreSQL binaries are on your path. If you are using Postgres Mac App, you can do that like this:

   echo 'export PATH="/Applications/Postgres.app/Contents/Versions/latest/bin:$PATH"' >> ~/.bash_profile
   
   source ~/.bash_profile

   This will provide access to pg_restore and pg_config (which is needed later to compile the pg gem).

Install Node.js

1. Node.js is required for some of the Ruby gems. (There are alternatives.)

   Install Node.js:

   brew install node

Install Rails

1. Install Bundler:

   gem install bundler

2. Install the rest of the Ruby Gems needed for the app (including Ruby on Rails):

   bundle install

Prepare the Database

1. Create the database:

   bundle exec rake db:create

2. Create the database tables:

   bundle exec rake db:migrate

3. Prepare sample data:

   pg_restore --verbose --clean --no-acl --no-owner -h localhost -d website_development db/snapshot.dump

Start the development web server

1. Prepare the environment file (one time exercise):

   cp env.sample .env

2. You can start the local development web server with the following command:

   foreman start

3. You can now visit the local development site at http://localhost:3000.

4. The Admin panel is accessible at http://localhost:3000/admin. The admin login email is [email protected] and the default password is password1234.

5. To stop the dev server, just press ctrl + c on your keyboard to stop the foreman process.

Contributing

Fork this repository

Please fork this repository and send us pull requests to the develop branch.

Testing your code

We use the RSpec testing framework for this app.

To run the test locally, use this command: bundle exec rspec spec

UI Design and CSS framework

We use the Materialize CSS framework for all the design and layout of the site. Please refer to their documentation for more details on how to work with their markup.

Stylesheets are written in SASS.

Slim Templating Engine

All the views are written in Slim - a lightweight templating engine. Please refer to their documentation for more details.

All template files should end with the .html.slim extension.

Contributors

• Michael Cheng
• Valentine Chua
• Sahil Bajaj
• Ted Johansson
• Casie Millhouse-Singh
• Oon Xin Tian
• Sharon Yeo

License

This software is released under the MIT License.

Copyright (C) 2017 Code Craft Pte Ltd

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

website's Issues

Add a new routes /cal to subscribe to the events calendar

A new URL https://engineers.sg/cal should take the OpenShift URL http://api-webuild.7e14.starter-us-west-2.openshiftapps.com/cal so that this URL can be used to subscribe to a calendar 📆

cc @miccheng thanks you 🙏

Rectify YouTube TOS Violation: Only play 1 video at a time

(Implementing YouTube Features)

Policy #: III.C 1(​l​ink)​

• Violation: ​API Client is not adhering to YouTube’s RMF features. Multiple videos are
  playing at the same time in the website
• ProposedSolution: O​nly one embedded player should play the content in a page at a time.

Integrate Stripe Checkout for donations

This is a potential good first issue for someone in the community :)

I'd love for someone to integrate client-only Checkout basically replicating the functionality on https://engineers.sg/support_us (see code) with the different tiers which can be modeled with plans (for recurring donations) and products/skus (for one-time donations) and provide feedback about their experience integrating it.

I'm of course happy to provide guidance and support throughout if helpful. You can reach me via Twitter: https://twitter.com/thorwebdev

How does /events get the current data?

Referring to https://github.com/engineersftw/website/blob/master/app/services/webuild_events_service.rb#L2

def get_events(event_url='https://webuild.sg/api/v1/events')

Does it already take the list of events from the OpenShift URL?

http://api-webuild.7e14.starter-us-west-2.openshiftapps.com/events

cc @miccheng 🙇‍♀️ Thanks 🙏

API Availability

I was looking at the Slakoth Slack bot source code and noticed it used the /api/events endpoint to retrieve information about events in Singapore and I was thinking of making a similar bot but for the platform called Discord.

So I was wondering if the /api endpoints are free to use? Or must we pay to be able to submit requests to it?

Thanks 🙂

Listing flow breaks when presentation title spans three lines

When a presentation's title spans three lines (or more?) the listing flow breaks in the following ways:

• Organization logo breaks out of the box at the bottom.
• The listing item on the row below gets pushed one row.

Screenshot:

Possible solution:

Dimension the card for 2-3 lines, and truncate the text if it still exceeds this.

Website Version 2

Proposal

Goal: Split up the website into a few discreet components

1. Video listing site

   • Potentially build with static website generator (GatsbyJS)

2. API server (GraphQL) - to be used by frontend and other services

   • Listing of videos
   • Listing of events
   • Listing of presenters
   • Listing of organizations

3. Management Website

   • Volunteers to upload videos
   • Event organizers to update event details
   • Speakers to claim and update their own presentations

Logo overlaps with menu

When your screen width is between 993px (tablet breakpoint) and 1180px the logo overlaps with the menu.

993px:

1180px:

Not sure what would be the best way of solving this. Possibly break the text and image over two lines? Example (which would be oh so much better if I knew how to make the text appear just below the image, but for an example this is good enough I feel :p):

If you think this looks good I can try and have a go at making that happen.

doesn't search the speaker

e.g. https://engineers.sg/episodes/search?search=aws+julien has no results

I was it expecting the result:
https://engineers.sg/video/advanced-task-scheduling-with-aws-ecs-aws-user-group-singapore--1466

Hamburger navigation is not working in mobile

In responsive view, the hamburger is not tappable. No sidebar show up.

Transfer to engineers.sg

Todo

• Map http://api-webuild.7e14.starter-us-west-2.openshiftapps.com/events to engineers.sg/api/events
• #31 Map http://api-webuild.7e14.starter-us-west-2.openshiftapps.com/cal to engineers.sg/cal
• Add a note on engineers.eg/events

References

• Open Shift URLs

More information on the video cards

I was going to Engineers.sg today to find videos from a specific meetup. I knew the talk had been recorded but looking through the listing wasn't the easiest.

There isn't a lot of information about each video given on the cards. What I think would be useful is:

• The meetup the video was recorded at
• The date of recording
  • The date being clickable and you then get to see other videos recorded at that date for this meetup?
• The speaker
• More of the title.
  It's mostly unnerving to see 2-3 words out of a title and then dots. Looking at my computer I've to hover over each card to figure out what the video is about. And hopefully that'll tell me which meetup it was for as well.

Hamburger navigation is not working in mobile

In responsive view, the hamburger is not tappable. No sidebar show up.

Listing of latest recorded events

When I visited the Engineers.sg website today it was with the intention of finding videos from a particular meetup, recorded at a specific date. After poking around at the website I figure out that under organizations I could find all the talks recorded for that meetup.

This had the same information finding problem as I mentioned in #4, but it got me there.

To this end it would be nice if I could:

• See a listing of all the videos for an event (to me defined as organization + date)
• On the front page (for all dates and organizations)
• On the organization all videos listing page

Rectify YouTube TOS Violation: Add YouTube TOS link to website

​API Client Terms of Use and Privacy Policies)​

Policy #​:​ III.A.1​ (​link)​

• Violation:

  • No reference to YouTube Terms of Service (ToS) in API Client’s ToS​.

• Proposed Solution:​ Please add YouTube ​Terms of Service​ (ToS) to your privacy policy

Instructions unclear

Hey @miccheng how does one set up the app for local development? Total Ruby noob here. 👼 Would like to make some changes to the HTML/CSS and preview on my own machine before doing blind PRs and wasting your time. 😉