Gather.ly

About this one page website

Nice site with a magazine feel to it. Gather.ly uses a lot of technology to pul that effect off, you can read the notes below. I like the layout a lot, not sure if it is a true one pager but nice work nonetheless.

One of the desires we wanted when reading our articles was for it to try and emulate the look and feel of a magazine, opposed to your usual blog post.

The front end was built with Handlebars, RequireJS, SASS and gulpjs as our task runner.

The backend runs off NodeJS with the help of the express framework, and we use MongoDB to store our data. Our images are hosted on Amazons S3 and we use a Node compatible version of imagemagick to do some wizardry on the backend.

In order to get the layout of the article exactly as we wanted (while maintaining responsiveness), our html had to be structured in a very specific way, which most editors/CMS’s didn’t grant us. So we built a custom article editor using the contenteditable attribute (which we soon found out is not the most stable bit of browser functionality to work with). Thankfully, the team over at Guardian are working on a project called Scribe, which aims to remove a lot of the inconsistencies and troubles that come with contenteditable. We eventually parse the article into an abstract format (imagine an array of objects which represent paragraphs, quotes, images, media etc..) – this allows us to create a renderer for the article should the HTML layout need to change, or if we wish to display it in a different format later down the line.