First things first – welcome!
We know sometimes it can be tough to integrate into a new team or workflow. So we are going to try to help out. We don't have all the answers, we don't claim to know everything. We do however, have some experience under our belt and we have found some things that work and cast aside others that don't. The following is a collection of resources and concepts we use, just so we are all on the same page.
##Philosophy & Stack Our approach to front-end development is simple. Keep it DRY, keep it modular. While we roll with an opinionated stack, we aren't tied to anything permanently. Our code, our process, our stack, it is ever-evolving.
We have a Yeoman generator – Stamp – that we built to scaffold out new projects. Take a look at that to get a bit more familiar with our style.
##Git We use git as our version control system of choice. We run our client projects from Beanstalk and our personal/internal libraries from Github.
- Learning Version Control - http://guides.beanstalkapp.com/
- Github Guides (more than just github) – http://www.youtube.com/GitHubGuides
- git-scm – http://git-scm.com/
# Make sure to quit current process
cmd+c
# Add your worked on files
git add .
# If you have deleted any files –
git add -u
# Send a commit message
git commit -m "your message"
# Push to repo
git push##Grunt Grunt.js has proven to be invaluable to our workflow.
- Getting Started – http://gruntjs.com/getting-started
- Our sample
Gruntfile– https://gist.github.com/kyledetella/6347153
##CSS We use Compass and SASS. We used to use LESS, we aren't opposed to it, we just found that SASS provides us with a bit more flexibility and modularity.
- Learn SASS – http://sass-lang.com/
- The SASS Way – http://thesassway.com/
- OOCSS – http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
- grunt-contrib-compass – This is how we compile!
- bourbon.io – A mixin library for SASS
Also, take a look at the WCST Style Guide for CSS.
##JS
You can see some general guidelines and patterns on the WCST JS Style Guide.
###Modules We keep it modular. Generally, our front-end code uses AMD (http://requirejs.org/docs/whyamd.html). We use require.js and less frequently, browserify for CommonJS support.
###Backbone A lot of our projects use use Backbone.js. The reasons are many, but mainly, we like the philosophy behind the library. It offers us some general structure, by we define the architecture and conventions.
###The DOM jQuery is cool. Don't get me wrong, we rely on it, but we find value in vanilla javascript. In fact, there are a ton of basic DOM operations you can run a lot easier than you think! I could write it all down here, but there are some great posts already on the subject.
###Animation Want to animate things? Yeah, thats always fun! Plus, the client wants it anyway, so...
###Node.js We use Node.js to rapidly upstart and prototype our front-end projects. On recent projects, we have used a full Node.js stack to power our front-end, backend, admin, and API alike.
Want to learn some Node.js?
##Links & Resources
- Resources
- Daily Reads
- Google+ Communities