GithubHelp home page GithubHelp logo

ebpub's Introduction

Experience Bureau Public Site

This site was built using Yeoman, Grunt, Backbone, Jade and Compass.

Why all the tech for such a simple site?

Mostly for fun to be fair. But there was some reasoning...

Why Yeoman?

Because it seems like a really good idea with a lot of really nifty kit to use as a starting point for a new site.

Why Grunt and Compass?

Why on earth not? They make life easier.

Why Jade?

Using Jade with Yeoman basically gives me a static site generator with templates and includes. This made it a lot easier set up real pages for each section of the site even though the content is loaded using AJAX.

So if someone comes to a page other than the home page, everything will still work. Also, robots and crawlers without JS will still get the correct page content. For example, the contact page exists as a real page with only the contact info on that page. If a robot hits the contact page, that is what they'll see. If a real user hits the contact page, the additional content will load via AJAX so that they're essentially seeing a single page app and then the Backbone router and views will manage their experience.

Why Backbone?

Backbone changed everything for me. Before Backbone I just did everything in the DOM using JQuery. Backbone helps me to think about my JS a bit smarter and a bit more Object Oriented like. Also, the built in Router with Push State support comes in pretty handy for simple things like this. As do the Views of course.

I ended up using the one view for all of the pages which is a bit lazy but for such a small site it seemed like a good thing to do at the time.

Additional notes

The Groundskeeper Grunt plugin was a bit of a find. Makes it very easy to strip out all console statements before publishing. https://github.com/Couto/grunt-groundskeeper

This is my first time experimenting with SVG for the graphics. I must say it was almost disappointingly non-eventful. Don't know why I haven't been using SVG before now. This page was a good reference: http://css-tricks.com/using-svg/

ebpub's People

Contributors

peterchappell avatar

Watchers

 avatar James Cloos avatar

Forkers

digideskio

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.