Recent Web Projects

(2017) “Questions” App (React.js and Python/Django)

In May 2017, I completed a “coding challenge” as part of the application/interview process for a job at Pluralsight. The “challenge” was given in this PDF. No guidance was given about what technologies to use, but I knew that the team at Pluralsight was using Python and React.js–the tools that I prefer myself for this kind of project.

I created two repositories: joel-qs for the React App, and joel-qs-api for the RESTful API (implemented in Python with Django and Django-REST-Framework). As I designed and implemented the project, I updated the repositories’ README files to record my design decisions and rationales, and to serve as an overview of the project. Since the project is built mainly in React.js, the joel-qs README is a good starting point for understanding the overall architecture and design.

If you’d like to experience the jaw-dropping, heart-stopping user interface for yourself, go to joel-qs.herokuapp.com. Just keep a few things in mind:

  1. There may be delays at start-up. (It may take some time for the page to load and for the set of questions to populate.) This is almost entirely due to a limitation of Heroku’s free hosting plan. The app and its environment don’t start up until someone starts using it. Then the app makes an HTTP request to the API, which also doesn’t start up until that request is made. The app and API will stay running for a while as long as more HTTP requests keep coming in.
  2. At present there is only one list of questions, and anyone can edit it. It’s possible that two people may edit it at the same time, which could have some surprising consequences. (Someone might upload a new set of questions, deleting the question that you are editing at the moment.)
  3. There are a number of other limitations of the app in its current state. For example, error reporting is very terse. Other known limitations can be found in the “To do” section at the end of the joel-qs README.

The RESTful API is running at joel-qs-api.herokuapp.com in case you feel like pointing your browser there, for kicks.

If you want to try out the upload feature, you can download these files and upload them via the link in the app’s navigation bar: 4000-questions.csv, 10-questions.csv.

(2017) Ruby on Rails: A Quick Refresher

In early 2017 I had a chance to refresh my Ruby on Rails skills by building a quick “Jobs” application. In addition Ruby on Rails, I used Bootstrap and Webpack. (I was planning to add some JavaScript functionality, for example sorting and/or filtering the list of jobs. I was also going to write automated tests, but other things that seemed more important came up.)

Feel free to take a look at the GitHub repository (with a brief README) and/or try the out the app deployed on Heroku. (Expect a slow page load and possibly other delays: this is free Heroku hosting.)

(2016-2017) React.js Experimentation

After reading about React’s design and browsing a couple tutorials, I decided to get my hands dirty and work on a sample application. I used create-react-app to generate the boilerplate and downloaded a CSS file and some sample data from the React: Up and Running book companion files. Other than that, I’ve tried to do as much of the development on my own as possible, only referring to Google and React: Up and Running when I needed help with a particular feature.

The current version of my React demo is on jsullivan.us, and its source code is on GitHub.

Another React demo I created (which shows current MBTA departure information for North and South Station) is also live on jsullivan.us. Its source code is also on my GitHub.

(2016) A little fun with jQuery

I had a wacky idea: hiding spoiler text by scrambling it until the mouse pointer hovers over it. So I implemented a sample of it here.

(2015-2016) JoVE

(I’ve had my hands in a lot of the articles published in 2015-2016. For example, this article which features cute pictures of mice as well as a video [it makes noise].)

I worked at JoVE from August 2015 to December 2016, and my responsibilities gradually shifted. At first my main task was integrating the text of new articles into the web site—a semi-automated process. As my team grew, I started working more on the preparation of XML for submission to PubMed (also a semi-automated process), leaving most of the new article integration to our newer team members.

Later, in April 2016, my manager asked me to take over publishing of finalized articles. Though is not the most challenging task in the world, I felt honored to have been given sole responsibility for this task. It was (you guessed it) a semi-automated process as well. A nice PHP script did most of the work for me; I investigated and resolved problems. A lot of times publishing went smoothly, but on occasion we found problems that required input from the authors. Somehow we always got things worked out on time. I’m grateful for my boss and coworkers, who were very supportive from day 1.

(2007-Present) Freelance Web Development Work Samples

My first freelance site was a new site (complete redesign with mostly new content) for the Greek Orthodox Metropolis of San Francisco. I did most of the design and implementation in 2007, using MODx CMS, and continued to maintain the site until 2010. The site was eventually redesigned. (A new maintainer chose a CMS he preferred gave it a more up-to-date look and feel.) However, you can see what my design looked like here.

Around 2011 I designed a new site for Byzantine Artworks, LLC. A photographer working with Byzantine Artworks had done partial draft of the home page using the NeonSky CMS, a Flash-based CMS. After looking at a few other options, we decided to stick with NeonSky CMS. The site looks best when viewed on a device with Flash support. (Most of my work on the site was selecting, organizing, and editing images for presentation on the web. With this work already completed, moving to a new CMS would not be too difficult.)

A more recent site, which I completely redesigned (including selecting and editing new images), is the Wellmet Project web site. This site uses the Drupal CMS.

Finally, there’s the site you’re looking at now, jsullivan.us, implemented with WordPress.

(2014) Wanderu

(No, I didn’t design this site.) I worked as a part-time intern at Wanderu during the Fall Semester of 2014. My responsibilities varied a lot from week to week and sometimes from day to day. (I enjoyed being part of Wanderu’s Scrum development process.) Some of the common themes in my work were Python, Django, JSON, and MongoDB.

One of my later tasks at Wanderu was to create a hierarchical set of bus origin/destination pages to replace a single page with thousands of bus route links on it. The primary purpose of these pages was to show up in search results when a potential customer searched for something like “bus from Boston, MA to Portland, ME”. It was not expected that web visitors would typically navigate the hierarchy of pages. Rather, each web page prominently featured a search widget which a visitor could use to easily find bus and train routes.

At the top of the hierarchy is the “Cheap bus and train tickets” page, which (per a request from marketing) provides links to Wanderu’s top 50 routes followed by links to each of Wanderu’s destination states and provinces. At the second level of the hierarchy are the pages for destination states such as Massachusetts. Naturally, the third level of the hierarchy is populated by pages for destination cities such as Boston, featuring a link for each departure city.

Note: As of September 2016, it looks like the pages are still in the hierarchy I created, although they look more professional.

(2014) BHCC CSS Class

In the CSS class we explored some aspects of CSS beyond the basics that were introduced in the HTML class. Some of them were even (gasp) new to me. Here are some of the projects, in alphabetical order. Each of the projects below is a single page with no working links.

(2012-2016) The Wellmet Project

Chuck Zymaris, who is both a friend of mine and the CEO of Wellmet, had used Dreamweaver to develop a static web site for Wellmet in the early 2000’s. In 2012 Chuck decided it was time for a change, and I developed a new website for Wellmet using the Drupal CMS. Rather than maintaining my own instance of Drupal, I took advantage of the popular Drupal Gardens SaaS hosting service. Overall I was fairly happy with Drupal Gardens and considered Drupal to be a formidable challenger for WordPress. With Drupal Gardens, Drupal was as easy to set up as WordPress, and out of the box it is better tuned to the development of non-blog-like websites (for example, “brochure-ware”). One weakness of Drupal I noticed was its relatively primitive interface for uploading files (such as PDFs) and managing uploaded files.

In 2016 Acquia announced that it would be terminating support for Drupal Gardens, so I signed up for an account (shared hosting, to keep the cost low) with BlueHost, and moved the site over. On the upside, we now have complete control over the site

(2012) BHCC HTML Class

In the HTML class we explored both HTML and CSS. Here are a few sample projects, in chronological order. In each of these directories, index.htm has been renamed main.htm so that you can view the contents of the directory (rather than having to click around to see which links work). The teacher provided the Standard Furniture images; I harvested the other photos from the Internet, making minor changes with Photoshop and GIMP.