← FAQs and Troubleshooting

Onboarding

Collaboration

The following Slack channels can be used to communicate with the rest of the team. In general, try not to use things like @everyone or @all, and keep discussions in threads as much as you can! This keeps it more organized so that people can find existing issues and such.

  • #team-banno-webdev - For pre-live developers (site builders) only.
  • #org-content-dev - For all developers. Other Web Solutions teams come here with any general development questions.
  • #team-content-operations - For all of Web Solutions, used for information that is useful for everyone.

Other Slack channels that may be of interest:

  • #team-banno - For literally everyone under the “Banno” umbrella. You won’t need to post in here normally, but announcements are often posted here that will be helpful.
  • #office- channels - There is a channel for each office that we have, including remote employees. You can join the channel(s) relevant to you if you want.
  • #org-content-launch - This is the channel where site launches are posted. You likely won’t need to post in this channel, but if you do a Final Peer Review case, you’ll be tagged as the dev to do pre-launch testing. The PC will tag you in their post, and you can keep an eye on that post and thread it when you do your testing.
  • #team-content-accessibility - If you have questions about web development accessibility, this is the place to ask them. Take advantage of Slack’s search feature first, since there’s a lot of information in this channel.
  • #org-ground-control - If you’re pushing a case and have issues with Agent Smith, this is the place to go. Since this channel has a lot of traffic, they have a set of triage emojis outlined in the description for the channel. You can read (this pinned item)[https://banno.slack.com/archives/C74UX105V/p1551368855006100] for a breakdown of what each emoji means and why they’re used.

You should also have Microsoft Teams installed on your machine automatically. This is used for communication with the rest of the company that isn’t Banno-related–for example, sometimes the Mac Support people will reach out to you via Teams. You will most likely need to have both running on a daily basis, though most of your discussions will be through Slack.

Web Apps

We use Microsoft Outlook email along with Microsoft Calendar and Teams mentioned above. Most, if not all, meetings will be created through Microsoft Teams, and will automatically appear on your Microsoft Calendar.

We use the web app Slate (found (here)[http://slate.websol.dev.jha/]) for time tracking. You will need to be on the VPN for this to work.

Software Tools

You should install and familiarize yourself with our front-end tools:

Command Line & Related Tools

iTerm is used as a command line tool. Although you can use the built-in Mac Terminal, it’s less customizable. iTerm has themes you can use as well as other customization tools like ZSH, and you can change the origin folder to a folder of your choice to save time. You can download iTerm here.

XCode is used to work with Git on Macs. You can install it from the app store.

Within the command line, Git (found here) and GitHub (found here) are used for version control. We are in the process of moving over to only GitHub, but in the meantime, only the newer sites will be found there. If you are having trouble finding a repo for a site, you can ask in #team-webdev to have someone help you find it!

You can install Git, along with Homebrew for package management, using the instructions here.

When working on projects, Node and NPM are used for managing 3rd-party software packages within our build tool. You can follow the instructions here to get them.

We use two different tools to automate our development tasks, like minifying CSS files and packaging everything into a zip. Gulp is used for newer sites, and Grunt is used for a few things like uploading/scaffolding from the console, and is the only thing used on older sites for building. To install Grunt, run npm install -g grunt-cli in iTerm. To install Gulp, simply run npm install --global gulp-cli in iTerm, without being navigated into any project folder.

ZSH is a tool you can put on iTerm to make it easier to read and use on a daily basis, with customizable themes. Highly recommended. You can find information about it, along with instructions of how to install, here. There is a list of themes here, so you can choose the one that works best, or looks the nicest, for you.

Development Tools

Text Editor

Feel free to pick the text editor of your choice. Most of the team uses Sublime (found here, and we can send you a license key once it’s installed), but a handful of devs have converted to using Atom (found here). If you use either of these, there are some code snippets that are already setup to make your day-to-day life easier. You can use another editor if you want, but you’d need to go without the snippets or convert them yourself.

Sublime Snippets & Packages

For Sublime snippets, you can clone this repo. (link TBA).

With Sublime’s package control, you can also install things to make your life easier. The following is a list of recommended packages to get you started - they’re not required by any means, but they’ll make things faster.

  • Emmet
  • Emmet Css Snippets
  • HTML-CSS-JS Prettify
  • Various snippets for syntax highlighting of mustache, less, sass, etc. files
Atom Snippets & Packages

For Atom snippets, you can clone this repo. (link TBA).

With Atom’s package control, you can also install things to make your life easier. The following is a list of recommended packages to get you started - they’re not required by any means, but they’ll make things faster.

  • teletype
  • atom-beautify
  • atom-increment
  • emmet
  • file-icons
  • minimap (optional, mimics Sublime with the code preview on the right)
  • pigments

Browsers & Testing

We commonly build in Google Chrome, and it is helpful to have Firefox and Safari (since you have a Mac, this should come pre-installed) around for testing. Make sure all 3 are installed! If you have access to a computer with Edge, you may use it for testing sites, but don’t worry–it’s not required, and we have other tools to access browsers/devices you don’t own if you don’t want to use those.

We support the most recent two versions of Chrome, Firefox, Safari, and Edge. As of March 2020, we no longer support Internet Explorer.

We use tools like XCode, noted earlier, for simulation of mobile devices. To find the XCode simulator, you can simply open it once it’s installed on your computer, then click the Help menu and type in “Simulator”. This will show you where the XCode simulator is, and you can open it there and even pin it to your toolbar separately if you want.

BrowserStack is another tool that we use for testing on various mobile devices and other browsers. If you need it, we have several logins listed on this page. Only one user can be logged in at a time, per login, so make sure to use it for only as long as you need, and then log out. If one login is in use, try another.

Design Tools

The Adobe Creative Cloud app should come pre-installed on your machine. Using that, you can grab a couple tools that are useful when working with files provided to you from our design team.

Adobe Illustrator is what our designers use for OLDER sites (like Showcase sites) when they provide us with a design to build from. You won’t need to be an expert in this, but basic knowledge like extracting a specific vector piece will be useful.

It’s less common, but Adobe Photoshop is also occasionally used. It’s mostly relevant for older sites, so you may choose to leave it uninstalled until you find you need it.

Sketch and Abstract are our current tools used for the designs of new site builds. You will spend most of your time in Abstract, but we also have access to Sketch in cases where something needs to be made exportable. See (this page)[/content-development/processes/building-customs/building-with-abstract/] for information on how Abstract is commonly used as part of our process.

Miscellaneous Programs & Tools

Authy

This is a 2-factor authentication tool that you’ll need to do things like make changes to sites in Postman and with iTerm.

Postman

This is used to edit and update JSON, which is used for things like a site’s templates. You will need to install this program, and we can send you a list of Postman Collections that you’ll need.

SortSite

This is a tool used to scan sites for ADA violations. We can send you a software key and a list of setings to update once you have this installed.

Zoom

Though most of our meetings are through Microsoft Teams, sometimes quick one-off meetings will be held through Zoom. You should also be able to integrate Slack with Zoom for ease of use.

Training

Here is an overview of what Interns/New Hires will go through for the onboarding process here at JHA, outside of corporate NEO training.

Videos to watch

This part of training starts with basics, if you feel confident in an subject feel free to skim through it and move on to the next. Because we use shared credentials be sure to visit the resources page for login information.

  • HTML
    • HTML Essential Training
    • We build our HTML files in a templating language called mustache. This allows us to communicate with the CMS on where to place editable content areas.
  • CSS
    • Sass Essential Training
    • You can also read through the Sass documentation here
    • We recently have made a concerted effort to try and get all devs to use roughly the same naming convention when it comes to classes and that is called Block Element Modifier, or BEM for short. Click here to learn more about BEM.
  • Javascript
  • Bootstrap
    • All of the Banno CMS sites are built on the Bootstrap Framework.
    • We are currently building sites in v4, but have live sites in v2 and v3.
    • Bootstrap’s documentation does a great job explaining everything that is included.
    • The most important things to familiarize yourself with are how the grid works, what all the components do, and best ways to use the utility classes.
  • Git
  • Command Line
    • If you need help with navigating folders/files via command line be sure to read this.
  • NPM (Node Package Manager)
  • Gulp/Grunt
    • Back in the day we exclusively used Grunt.js for our build tool, when we switched to Bootstrap 3 we converted the build tool to Gulp, while keeping Grunt for a couple tasks related to the CMS.
    • Click here is a brief overview of Gulp.js.
    • We have a gulp file already set up in our starting repo, so you won’t be asked to write this file from scratch but it is good to have a basic understanding of how it works.

Hands On

Here we will start to review our file structure and walk through the steps of the build process. This is where a lot of work will be done with your mentors. We want to be sure that your computer is setup properly and you have everything you need to work.

Once you have a grasp of everything, depending on team workload and your comfortability, we will either give you a test build or start with some small edit lists.

Test Build
You will get a real design with some fake branding and be tasked with building the site following the build process. After the test build is complete your mentor will do a code review and go over things they are seeing that you could improve.

Site Edits
You will help with incoming edit lists on Trello. Doing smaller edit lists allow you to get more comfortable with our file structure.

Once we feel that you are ready, we will get work on getting you real custom site to build.