ainc / ainc-2018

Awesome Inc website, circa 2018

Welcome to the Awesome Inc Site

Documentation

TOC

• Stack
• Quick Start
• How to Edit
• Code Style Guide
• Styling / Sass
• Github Process
• File Structure
• Underscores vs Hyphens
• Editing Javascript
• Frameworks & Libraries
• Links / Routes
• Linter
• Where to report bugs
• Useful Resources

Stack

The website is built with the SSG Jekyll.

Quick Start

1. Install Jekyll
2. Clone this repository
3. Serve the site locally with bundle exec jekyll serve

How to Edit

Only invent new things if you can't use what is already there

Below is the order of how you should edit things:

1. Use a component from the theme
2. Use current css classes from theme
3. Assemble a new component from bootstrap classes
4. Create new classes, but still use bootstrap components as base

Code Style Guide

We follow Google's HTML/CSS Style Guide found here: https://google.github.io/styleguide/htmlcssguide.html

Below are highlighted guidelines:

1. Protocol - Always use HTTPS for media files, stylesheets, and scripts, unless the files are not available over HTTPS
2. Comments - Explain code as needed. Answer these questions

• What does it cover?
• What purpose does it serve?
• Why is respective solution used or preferred? (This item is optional as it is not deemed a realistic expectation to always demand fully documented code. Mileage may vary heavily for HTML and CSS code and depends on the project’s complexity.)

3. Action Items - Mark todos and action items with TODO. Bonus: Create a Trello Card as well
4. HTML Validity - Use tools such as the W3C HTML validator to test

Styling / Sass

Any style changes should be made with Sass. There is no need to edit any libraries such as Bootstrap because they will be updated as we update the framework.

Index of SASS Files/Folders

• /base/_root.scss - Global style changes
• /base/_typography.scss - Global font styles
• /components/ - Components that are used in different pages
• /helpers/ - Animations, mixins, responsive styling
• /layout/ - Specific style changes for page layouts
• /pages/ - Styles for page-specific properties.
• /themes/ - This came with the template, no need to use this
• /vendor/ - Libraries like bootstrap
• /assets/css/main.scss - Importer for all scss files

Github Process

Our Github process follows both the 1. Feature Branch Workflow and the 2. Git Centralized Workflow.

Please read the two links above before committing anything (it's a 10 minute read)

General Steps:

1. Pull from master branch
2. Create a new branch
3. Update, add, commit and push changes
4. Push feature branch to remote (master)
5. Allow for feedback from teammates
6. Merge your pull request

FAQ

• How do I know to follow Feature Branch Workflow or Git Centralized Workflow? Timing & Feature. Timing: If the task can be completed within sitting down, not leaving the computer, and publishing the changes, then use Git Centralized Workflow. If it will take longer, use a branch. Feature: If it is a feature you are adding to the site, then it probably can't be completed as quickly as discussed above and deserves its own branch for people to review the code.

File Structure

We follow a simple Jekyll file structure with layouts, includes, data, etc. All CSS, Javascript and font files are in the /assets folder. Images can be found in the /images folder.

Underscores vs Hyphens

SEO is important and it cares about how you name your images. Currently, Google wants us to name our images with hyphens. source: https://shuttermuse.com/image-seo-how-to-name-files/

Editing Javascript

TBD

Currently working out of custom.js to add additional scripts.

Frameworks and Libraries

Animate on Scroll (AOS)

Library to animate elements based on scrolling. It is very lightweight and more documentation can be found here: https://github.com/michalsnik/aos

Bootstrap 3

HTML/CSS/JS Framework for responsive projects - Docs

Links / Routes

Routes file - _data/routes.yml

How it works: linkname: "/path-to-page/"

The point of this is to create a central place to hold links so that if we were to change a path to a page, we don't have to change it in all of the places it is used. This works just like any other data file.

Documentation: https://www.sitepoint.com/hacking-routing-component-jekyll/

Useful Resources

Developer Hints for Jekyll https://devhints.io/jekyll

Where to Report Bugs

Trello is the best place to report bugs. Create a card with an appropriate title, link the page(s) where the problem is, [possibly] suggest a fix.

Linter

TBD

ainc-2018's Issues

Add 5 Across next event registration to Program guide

awesomeinc.org/program

Add a button to the group of buttons that says register for next event for free

Add LEX18 story Feb 2020 to press page

Add link to https://www.awesomeinc.org/press

February 3, 2020 - Pandemic leads to rising interest in web development careers, WLEX 18 (NBC)

Link: https://www.lex18.com/news/covering-kentucky/pandemic-leads-to-rising-interest-in-web-development-careers

Bootcamp Page - Announcement header design

Announcement header creates a blank area above the navbar when scrolling down.

To repeat:
Go to awesomeinc.org/bootcamp
Scroll down

Working example:
Go to awesomeinc.org/workspace
Scroll down and it is not there

Add separate email subdomains for marketing and transactional emails - Awesome Inc General - 02-Aug-2022 17:02:57

Add separate email subdomains for marketing and transactional emails - Awesome Inc General - 02-Aug-2022 17:02:57

Link to card: https://trello.com/c/62e9576e1c5c7717d644f7e4

Created by: nicksuch

Add testimonials to alumni page

https://trello.com/c/rR7vY6AP/2211-redesign-bootcamp-alumni-page

Awesome Inc U Youth Page Missing Content

Hey @gaiablade, we talked about this in person, but here are the things we talked about:

• Mockup
• Assets
• Missing section: Coding Camps
• Broken section: Club Memberships - The background is currently white because we need to rebuild the pricing table and add the wavy background.

Let me know if you need anything else.

Google Analytics Goal Tracking - Awesome Inc General - 08-Oct-2020 22:09:13

Google Analytics Goal Tracking - Awesome Inc General - 08-Oct-2020 22:09:13

Link to card: https://trello.com/c/5f7cc923ba54463dae6074a2

Created by: Kyle Raney

Test bug - Kyle Raney - Life - 08-Oct-2020 22:05:24

Test bug - Kyle Raney - Life - 08-Oct-2020 22:05:24

Created by: Kyle Raney

remove Videographer position from careers page - Awesome Inc General - 04-Jun-2021 06:22:55

remove Videographer position from careers page - Awesome Inc General - 04-Jun-2021 06:22:55

Link to card: https://trello.com/c/60b9c66b2df3992243485da0

Created by: Brian Raney

Fix India Page text overlap

Hey @colinsmith3, thanks for quickly getting the /india page updated. The text for me is overlapping the image for me. See screenshot:

Let me know if you need any help with this.

5 Across website updates - Awesome Inc General - 30-Mar-2021 14:50:16

5 Across website updates - Awesome Inc General - 30-Mar-2021 14:50:16

Link to card: https://trello.com/c/60633823152ba984438cae0b

Created by: Emily Wehrle

update careers page - link for APAX jobs - Awesome Inc General - 11-Mar-2021 06:23:41

update careers page - link for APAX jobs - Awesome Inc General - 11-Mar-2021 06:23:41

Link to card: https://trello.com/c/6049b769b424be72c3da9e8d

Created by: Brian Raney

Youth Page Text overflow

awesomeinc.org/learn/youth is loading some text on top of the other when this "hack" is not in place. The current solution omits that section so it is less than ideal.

For whatever reason, the #coding-is-fun section is "overlapping" into the header section.

This only breaks in the Safari Browser on mobile devices.

Main URL for 5 Across event has .html ending

Current URL for 5 Across event (when redirected from 5across.org) is https://www.awesomeinc.org/recurring_events/5across.html

Instead, it should be https://www.awesomeinc.org/recurring_events/5across

It looks like the permalink setting for the Recurring Event collection is commented out in the Config: https://github.com/ainc/ainc-2018/blob/master/_config.yml

Favicon breaks on any nested pages

Works on homepage and any top-level pages, but 404s on pages like /learn/youth and /bootcamp/apply`

Seems to be a relative URL issue here in _includes/head.html

Direct link to awesomeinc.org/youth redirects too many times

https://www.awesomeinc.org/youth

This page isn’t workingwww.awesomeinc.org redirected you too many times.

Dedicated outcome: Redirect awesomeinc.org/youth to awesomeinc.org/learn/youth

Careers page email "Apply Now" button - Add pre-fill to different careers

It turns out, not everyone has an email client configured on their devices, and if they do, it's not alway set up to handle mailto links properly. Could we send people to Google Form instead?

Perhaps change line on https://github.com/ainc/ainc-2018/blob/master/careers.html page from this:

<a type="button" class="lgx-btn lgx-btn-anim" href="{% if job.apply_url %}{{ job.apply_url }}{% else %}mailto:{{ job.email }}?subject=I am interested in applying to the {{ job.title }} position at {{ job.team }}{% endif %}">Apply Here</a>

To this

<a type="button" class="lgx-btn lgx-btn-anim" href="https://docs.google.com/forms/d/e/1FAIpQLSeo_C5kwAFAwtxY64qT03egpsnVrwjGc-5UNezZ4HLwQj5SGA/viewform">Apply Here</a>

Replace Team Alpha application links

We currently have TA applications go to GForms. Can we switch it to the Zoho Careers page?

https://careers.awesomeinc.org/jobs/Careers/649925000000610353/Team-Alpha---Internship?source=CareerSite

Places should be on TA page (/internships) and awesomeinc.org/careers.

Original request from Garrett:

Updating the places on our website w/ new Team Alpha internship application

• BE AWESOME >> CAREERS >> TEAM ALPHA INTERN

• BE AWESOME >> INTERNSHIPS >> 3 spots on this page

Updating the Team Alpha Intern Careers blurb as well

Update Internships on Website - Awesome Inc General - 19-Sep-2022 02:48:45

Update Internships on Website - Awesome Inc General - 19-Sep-2022 02:48:45

Link to card: https://trello.com/c/62bc95781e5dbd8097518390

Created by: Miguel Jimenez

Update Internship Videos - Awesome Inc General - 19-Sep-2022 18:39:59

Update Internship Videos - Awesome Inc General - 19-Sep-2022 18:39:59

Link to card: https://trello.com/c/6228fd1a3e0bb207306b3937

Created by: Miguel Jimenez

Winter Retreat Graphics - 2022 - Awesome Inc General - 12-Jan-2022 22:22:59

Winter Retreat Graphics - 2022 - Awesome Inc General - 12-Jan-2022 22:22:59

Link to card: https://trello.com/c/61ba279545009117eaec3ee8

Created by: Hannah Eberts

Fix CSS for box-headings

@gaiablade Hey Caleb, can you change the background-color here to our $body-bg variable here? I changed the background color of pages to a whiter color for some of the transitions of sections and it looks it messed up some of the headings on the 5 Across page. If we change this, then we don't have to worry about those changes in the future messing up other pieces of code.

ainc-2018/assets/sass/pages/5across.scss

Line 371 in c8fbf78

.box-header {

Comments in youtube js file

ainc-2018/assets/js/custom.youtube.js

Line 1 in 4166131

(function () {

@mhisle22 Can you add some documentation to this file? Other than that, I'm good to move forward with this. Once comments are added, go ahead and make a Pull Request.

About Page Team members

Some team members are uploaded with invalid dimensions. Images need to be a square.