This is a work in progress and I will likely add (or replace) more functionality in the future.

Introduction

Hello there! I'm Vitor Britto, a Full Stack Web Developer extremely passionate about my work. I discovered the world of code almost two decades ago and kept the same passion from the first day of this discovery. I have worked full time as a freelancer for nearly 4 years developing projects for the web, and I direct part of my time to researchs, collaborative projects, development of personal projects and writing some articles for my blog.

But enough about me! I would like to present this project and why it was created.

First reason:

Apply rules and be based on a principle and methodology of process which could maintain the structure of my standards.

Second reason:

Not only have a code style guide, but relevant informations about my Workflow. Thus I always keep the same logic process and can initiate the development of my projects without any questions when making a scaffolding, building process, automation rotines, unit testing and others tasks.

This guide consist with four parts: 👻

1. My workflow context with approaches and methods that I use.
2. Tools that I use in my Workflow.
3. My own code conventions, which is inspired by what is popular within the community and flavored with some personal opinions.
4. Major dependencies that I use with Grunt, Gulp, Bower, Karma and Node/CLI.

Table of Contents

• Workflow
• Tools
  • Strategy and Management
  • Blueprint and Visual
  • Scaffolding and Build
  • Lint and Code Style Checker
  • Debug and Inspection
  • Metrics and Performance
  • Tests
  • Automation
  • Package Managers
  • Database
  • Documentation
  • Deployment
  • Versioning
  • PaaS
  • CI and Code Coverage
  • Post-project
• Dependencies
• Guides
• General Notes
• References

Workflow

This is a simple table with aproaches and methods that I use at my Workflow.

Strategy	Blueprint	Visual	Develop	Build	Deploy
Research	Sitemap	Concepting	Scaffolding	Lint	Test
Observe	Wireframe	Presentation	Libraries	Concatenate	Optimize
Understand	Prototype	Refine	Templates	Minify	LAUNCH
Analyze	Style Guide	Approval	Frameworks	Compile
Timeline	Usability		Database

⬆ back to top

Tools

Following is the list of the main tools and resources that I use in my workflow.

Strategy and Management

• Reminder (Built-in Mac application) - All kind of reminders
• Trello - Task Management
• Asana - Task Management
• Basecamp - Task Management
• InstaGantt - Task Management
• Evernote - Organize Thoughts
• On the Job - Track time and Expenses
• TicTac - A kind of Pomodoro methodology
• Google Drive - Share documents and files
• Dropbox - Share documents and files
• Wakatime - Time Tracking for VIM and Sublime Text

⬆ back to top

Communication

• Skype - Business Conferences and chats
• Slack - Internal Team Messaging
• HipChat - Internal Team Messaging
• Gitter - Open Source Communications

⬆ back to top

Blueprint and Visual

• Axure RP - Prototyping and Wireframes
• Photoshop
• Illustrator

⬆ back to top

Scaffolding and Build

• Skeleton
• Boilerplates

⬆ back to top

Lint and Code Style Checker

• CSSLint
• CSSComb
• JSHint
• Rubocop
• PHPfmt

⬆ back to top

Debug and Inspection

• DevTools
• JSFiddle

Metrics and Performance

• JSPerf
• GTmetrix
• Page Speed
• WooRank

⬆ back to top

Tests

Unit Tests

• Mocha
• Chai
• PHPUnit
• RSpec

REST/API

• Superagent
• Supertest
• RESTClient
• cURL

Cross-Devices/Browsers and Interfaces

• Browser-sync
• PhantomJS
• Capybara

Cloud Development Environment

• Koding

⬆ back to top

Automation

• Just
• Makefy
• Grunt
• Gulp
• Rake
• Make

⬆ back to top

Package Managers

• NPM
• Bower
• Component
• Bundler
• RubyGems
• Composer

⬆ back to top

Database

• Sequel Pro
• Robomongo

⬆ back to top

Documentation

• apiDoc
• JSDoc
• PHPDocumentor

⬆ back to top

Deployment

• Capistrano - used for remote server automation too
• Gone

⬆ back to top

Versioning

• Bitbucket
• Github

⬆ back to top

PaaS

• Heroku
• OpenShift

⬆ back to top

CI and Code Coverage

• Travis CI
• Code Climate
• Drone CI
• David
• Coveralls
• Wercker

⬆ back to top

Post-Project

• MailChimp
• Mandrill

⬆ back to top

Dependencies

• Grunt
• Gulp
• Bower
• Node/CLI
• RubyGems

⬆ back to top

Guides

• HTML
• CSS
• JavaScript
• NodeJS
• Ruby
• Rails
• Git
• Shell

⬆ back to top

General Notes

• [STRATEGY]: use the GTD and Scrum methods.
• [DEVELOPMENT]: use the SOLID principles.
• [BUILD]: these files has two spaces for indentation: *.styl, *.jade, *.coffee, *.sass, *.haml, *.rb, *.json.

Be Consistent

The point of having style guidelines is to have a common vocabulary of coding so people can concentrate on what you're saying rather than on how you're saying it. We present global style rules here so people know the vocabulary, but local style is also important. If code you add to a file looks drastically different from the existing code around it, it throws readers out of their rhythm when they go to read it. Avoid this.

Google C++ Style Guide

⬆ back to top

References

• Code Guide by @mdo
• idiomatic CSS
• idiomatic.js
• jQuery JavaScript Style Guide
• Airbnb JavaScript Style Guide
• Google JavaScript Style Guide
• jQuery Core Style Guidelines
• Annotated ECMAScript 5.1
• Douglas Crockford's Code Conventions for JavaScript
• Principles of Writing Consistent, Idiomatic JavaScript
• Naming this in nested functions - Christian Johansen
• Conditional Callbacks
• Popular JavaScript Coding Conventions on Github
• Understanding JavaScript Closures - Angus Croll
• Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
• You Might Not Need jQuery - Zack Bloom & Adam Schwartz
• ES6 Features - Luke Hoban
• Airbnb Ruby Style Guide
• Bozhidar Batsov Style Guide
• Github Ruby Style Guide
• The Rails 3 Way
• Ruby on Rails Guides
• The RSpec Book
• Everyday Rails Testing with RSpec

⬆ back to top

License

MIT License © Vitor Britto