Technical Components of the Project
Sailing Rough Waters was developed by me, Shel Raphen, using the Jekyll Bootstrap framework in the languages HTML5, CSS, and jQuery.
Jekyll is a content management system that allows you to dynamically generate static websites. What this means is that it's somewhere between what's called a static website and a dynamic website. Static websites are where the entire code is written by hand for each page and loaded by the browser pre-written. Most websites for companies and organizations are static websites. A dynamic website is where there is a program running on the server that generates appropriate code based on user input and information from a database. This is what we usually refer to as "web apps" such as Twitter or Facebook.
A dynamically generated static website is a static website that a computer program generates based on code written in advance on the developer's computer. What this means is that rather than re-writing the menu on every single page, I can simply write something like { include menu } and when I run the Jekyll program, it goes through and replaces every instance of {include menu} with the actual menu code I wrote and put in a file somewhere. Later on in the project, I realized I could also use these for any repeated piece of code. { include citations } would create the citations menu at the bottom of each article, for instance. I do wish I had realized this earlier as it would have saved me a lot of time when updating the tooltip and popover code. Only in the final few weeks did I figure out I could have been using Liquid Includes to manage the tooltips and popovers, though I did eventually implement that.
One feature of Jekyll that was crucial to this project is its support for Markdown. Markdown is a markup language which allows you to write readable documents in plain text and have a compiler, such as Jekyll, run through and convert your formatting into the appropriate HTML. This allows me to write the articles on this site with minimal in-line HTML code.
Bootstrap is a collection of pre-written stylesheets and jQuery files which create a framework for web design that centers users on mobile devices, such as smartphones. The primary feature offered by bootstrap is responsivity which means that there isn't a separate desktop website and mobile website. Instead, the website is able to detect the width of the window and re-arrange itself to fit accordingly. The tooltips and popovers were features of Bootstrap that I modified and implemented in maybe a bit of an unconventional way.
Bootstrap, however, comes with a very particular aesthetic. It's definitely the popular aesthetic these days, however it involves a lot of low-contrast colors and other things that make the website inaccessible from a disability-standpoint.
I used a combination of the Boostrap Accessibility Plugin and my own heavy modification of the bootstrap code in order to make the project accessible to people with varying levels of ability. You can see a lot of the changes I made on the Version Log.
Most of the features of the website that make it accessible aren't even noticeable if they aren't things you need. There is code behind the scenes that causes screen-readers to read things differently, or to make the website navigable with just a keyboard. Everything I did was based on the WAI-ARIA standards. These are standards that every website is supposed to be in compliance with, but many simply aren't. Centering accessibility in my coding wasn't particularly complicated because I centered it in my design. I have no ads, no share button, no images, no videos, it's just articles with optional text available via tooltips and popovers. This meant I only had to make sure I included code in the background to help keyboards and screen-readers know what order to read things in. No user would encounter something they could not access.
Valerie the Auto-Validator is written by me in jQuery. It's a modification of another bot I made, Polly the Robo-Apologizer. Both robots work by generating random numbers and selecting from a selection of pre-written phrases, and puts them together in a particular combination to form a natural-ish sounding sentence.
The site was originally hosted on Hampshire's Stout server, for student class projects. I switched over to a server owned/run by my friend Evan Silberman. I had to research some DNS stuff to set up the domain name ("sailingroughwaters.com").
There are special tags I wrote into the header so that facebook and search engines read and display information about the site correctly. I used jekyll variables so that each page can specify its own description.
I want to note at the end of this page that I feel quite silly writing it. I understand why my advisers want me to write it, since they need to be able to evaluate my work on the web-design aspects of the project. However, something I have encountered is quite a few other people asking for a page like this out of some sort of fascination with the fact that I know how to make websites and text-generating robots at all. When describing what they want out of a page like this, they do not seem to request code-snippets or information on what kind of compiler I'm using. They mention wanting a narrative of how I got interested in coding, and how I managed to learn it. The answer I always give is simply "I'm a student. I had a minor in this." I learned the same way any other programmer learns. If I were a man, I don't think anyone would be so fascinated by this. My day-job involves taking apart computers all day. You shouldn't be surprised that I know how to work with computers. If you are interested in learning how to make websites like this, I highly recommend the free online courses at Codecademy.