GitHub LinkedIn

Book Light Editorial

The Project: To create a website for use by Book Light Editorial, a freelance editing team, in order to connect with clients, communicate services, post thoughts and advice in a blog, and promote edited works in print.

The Technologies:

  • JavaScript
  • Twig
  • PHP

The Challenge: how to make the site content easily manageable by the client

My client for this site was very motivated to manage the content themselves. They wanted a way to be able to do that so that they didn't need me to make every necessary update for them. I had worked a bit with Wordpress in the past, but I always found it to be a bit bulky and the admin UI is unintuitive and hard to navigate. I had heard about and briefly worked with a flat-file CMS called Grav and decided to give it a try for this site.

I found Grav to be very easy to work with from the development side. The YAML configuration made it easy to set global values that I could use as needed, and the Twig templating made it very easy to create and reuse modular pieces in different areas across the site. For the client's purposes, Grav has a core admin plugin which can be used to manage the content in a WYSIWYG editor as well as a dashboard to show site views and available plugin updates.

In the end the client was happy with this solution. They found the Grav admin plugin to be easy enough for them to use. There is a slight learning curve in that grav pages use Markdown. This can be overcome by using raw HTML if that is more easily understood, or via the WYSIWYG editor which will just paste in the proper Markdown elements for headers, bolding, italics, etc.

The Source Code: https://github.com/nhayward/BookLightEditorial

The Live Site: http://booklighteditorial.com

Wedding Website

The Project: To create a website for an upcoming wedding where potential guests can electronically RSVP, get all necessary info for the date, read additional info about the area, and generally feel involved and engaged in the process.

The Technologies:

The Challenge: how to handle the online RSVP

I wanted a more fun and interesting interaction than just filling out a single text box with information. I also wanted to make sure that all of the required information was received so that guests didn't need to be chased down for additional details. Also on the wishlist was the ability to present an invitation and RSVP form that was tailored to the current guest who was RSVP'ing.

The decision was to provide individualized codes that a guest would enter into a box which would then generate their tailored invitation and RSVP form. My original plan was to have two JSON arrays: one for all the guest specific invitations/codes and one to store their RSVP responses. I quickly realized that the code for that would become messy since I would need to write to the file in order to update the guest RSVP array to store form responses.

I ultimately decided to explore the use of a Google Spreadsheet as a sort of database. I filled out a spreadsheet with guest codes, names, and the number in their party. This was all the info I needed to customize their invitations and forms. I also created another tab in that same workbook that was initially empty save for the column headers. Upon submit of a code I make an ajax call to the first tab of the sheet to check that the code entered is a valid code. I then pull the remainder of the info from the matched spreadsheet row and insert it where needed to show the invitation and RSVP form. Upon submission of the RSVP form I make an ajax call to the second tab of the sheet to store the responses. If a guest returns to the site at any time after submitting the form, they can enter their code again to view the text of their response. This all allows for easy management of guest data and responses in a user friendly environment.

If you would like to test the RSVP interaction, click the live site link below or click the image in this panel. Then navigate to the "Invitation" section and use one of the following codes: testcode1, testcode2, testcode3, testcode4, or testcode5.

The Source Code: https://github.com/nhayward/wedding

The Live Site: http://carlybornstein.com/nickandcarly/

Revise & Resub

The Project: To create a website for use by Revise & Resub, a writing community run by a group of editors, as a home base for their followers and to host their annual contest #RevPit.

The Technologies:

  • JavaScript
  • Twig
  • PHP

The Challenge: a tight time frame

I was approached by this group when a yearly pitch contest that they were a part of was in danger of not happening due to internal complications. There were many authors who were relying on this contest to happen as it always did, and the editors wanted to make something happen for them. The editors decided to quickly bootstrap their own pitch contest. This meant they needed, among other things, a website, and they needed it fast.

It was necessary for me to get their website up within 48 hours of when I was approached. I needed to get something done fast, but as much as possible I did not want to sacrifice quality. I decided to return to my old friend Grav. Using Grav's base theme I was able to get a functional site up quickly with some clear branding elements to set the site apart from others. I was then able to use Grav's admin plugin as I had with a previous site to give the clients power over the content so that we could work in tandem to get all of the necessary elements completed for the contest.

The end result was a success. The site was built and ready in time for the contest to begin and my clients were pleased with what I was able to produce in such a short time. Since then I have worked with the clients to update site functionality and add further elements that we did not have time to implement during the initial build.

The Source Code: https://github.com/nhayward/revpit

The Live Site: http://reviseresub.com

La Mantia Enterprises

The Project: To re-create a website for La Mantia Enterprises, Inc., a landscaping company in the southwest suburbs of Chicago, in a more cost-effective and organized way.

Technologies Used:

  • HTML5
  • CSS3
  • JavaScript

The Challenge: how to re-imagine the layout of the website without straying too far from the original design

The client wanted the exact same site reproduced. In addition, the client was experiencing issues with cost of maintenance of the existing site and wanted a more cost efficient option. The issue of cost was not a huge challenge. They were using a marketing company that was charging them a large monthly fee for site maintenance, when the actual content updating and brand promotion was actually being done by the client. I was able to convince them to drop that marketing company and host their site elsewhere with a much lower monthly cost.

The real challenge came with cleaning up the existing site without changing it too much. I ended up starting completely from scratch. It was easier than attempting to obtain the source code from the marketing company which, once obtained, was actually a huge mess. The main issue was their navigation. There were five navigation links at the top of the page to link to their various services. Not a problem normally, but the names of those navigation links, and consequently the content of the pages they linked to, had a disjointed structure. The fifth link for example was titled "FAQ / Services / Contact".

I ended up reducing the site down to three pages: "Home", "Services", "Contact Us". Within those pages I added an additional subnavigation interaction using jQuery UI tabs. In this way I was able to present a larger amount of information on a page while still keeping it contained to it's own shell. This cleaned up the navigation while still allowing for all the information that the client wanted to convey to be presented separately.

The Source Code: https://github.com/nhayward/LamEnt

The Live Site: http://lamantiaenterprises.com/