Skip to content

Instantly share code, notes, and snippets.

@webdesserts
Last active December 27, 2015 10:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webdesserts/7312838 to your computer and use it in GitHub Desktop.
Save webdesserts/7312838 to your computer and use it in GitHub Desktop.
A quick overview of how the webdesserts.com website will be built

webdesserts.com

Development

  1. Content - first, we have to have a reason to have a website. In all honesty the main purpose of this website is to host an online resume and show off my design abilities. But in reality that's a poor purpose for a site. I need content. Real content. So if I'm going to have to start a blog, let's at least make it useful to people other than me. I will write all my content first before I write a single line of code.
  2. Design - I will need mockups. Initially, this should probably be done in Photoshop. If I feel like going the extra step, I might finish the design in Adobe Reflow, just to get a feel for how the website might act. However, this site is probably small enough that I can just start prototyping in the browser.
  3. Frontend - After the design phase, I will write a static version of the frontend. Everything will be hardcoded. Nothing will be dynamic. This is just for working out the css and transitioning the site from it's wireframe to a functional website. I will probably need to get a static file server up and running on the backend by this phase. Otherwise I might just temporarily use yeoman.
  4. Backend and Dynamic Frontend - The final step will be to write the backend, and rewrite the frontend so that it uses AJAX calls to the new backend and frontend templating to serve our content.

Implementation

###Frontend

  • This website will be based on Atomic Design Principles.
  • For the CSS preprocesser we'll use SASS
  • For the site design itself, we'll use a mixture of plain html and Ractive.js templates
  • The website will be "single paged" with AJAX requests to navigate pages
  • We will use jQuery 1.9 and lodash as our utility libraries

###Backend

  • The frontend will be served with a simple node app
  • The build system with be with grunt.
  • The node instance will be refreshed with nodemon (which will be controlled with grunt-nodemon)
  • All articles will be stored in markdown and parsed with marked.
  • all markdown files will be stored on github where they will be versioned and editable.
  • I will use the send npm module to serve files
  • I will use bunyan for logging
  • This will be hosted on nodejitsu
  • There will be no images initially. Everything will be in SVG
  • If I need to start hosting images, I'll maybe possibly get an aws s3 server going (I may be able to host my images on nodejitsu)
@webdesserts
Copy link
Author

Hahaha... ya... implementation details. Those change sometimes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment