This is a work in progress and I will likely add (or replace) more functionality in the future.
Hello there! I'm Vitor Britto, a Full Stack 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 consists in four parts: 👻
- My workflow context with approaches and methods that I use.
- Tools that makes my Workflow easy.
- My own code conventions, which is inspired by what is popular within the community and flavored with some personal opinions.
- Major dependencies that I use with
Grunt, Gulp,Bower, JSPM, Karma and NodeJS/CLI.
In the last projects, Grunt shows some unstable performance in my Wofklow. I'm not saying that grunt is worse than Gulp. No! Unfortunately, it doesn't fits on my workflow anymore.
I've been working a lot with Isomorphic Applications using JavaScript both on client and server-side. Gulp, is programmatically closer to NodeJS. I love the pipe flow at Gulp. It reminds me the UNIX System ❤️.
The first tool in the list and a strong candidate to get into my workflow. So far, I'm comfortable with the free plan. I really like the way to trigger actions between apps.
Buddy is a powerful Git Hosting with Continuous Delivery tools. I create an account on the platform, but I have not tested yet.
With Stamplay I can chain together APIs as if they are Lego blocks arranging them into service based apps. If can automate tasks, connection some tools and triggering actions to build a data flow on Back-End. So, you can "create web applications without writing tons os backend codes".
An amazing all-in-one tool for Analytics & Feedback. Hotjar combines 7 tools in one to deliver more user insight for less.
I started to use this tool about 1 month. You can understand what your website users do and don't do, and why. You cant track every action.
You can find a complete list of applications, utilities, DevOps and Business Tools here:
This is a simple table with approaches 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 |
- Trello - Task Management for Old Projects only
- MeisterTask - Task Management from now on
- Wunderlist - Daily Tasks
- On the Job - Track time and Expenses
- Forest - Stay focused on tasks
- Google Drive - Share documents and files
- Dropbox - Share documents and files
- Wakatime - Quantify my coding
- Skype - Business Conferences and Chats
- Slack - Team Messaging
- Gitter - Open Source Communications
- Axure RP - Prototyping and Wireframes
- Sketch - Professional digital design
- Photoshop
- Illustrator
The Boilerplates repository is my personal Yeoman. I organize and setup my stacks for every kind of project. It's a kick start structure and configuration. With this guy, I can start coding in a few minutes.
| Transpilers | Compilers | Frameworks | Libraries | Template Engine | CSS Supersets | Others |
|---|---|---|---|---|---|---|
| Babel | Electron | AngularJS | jQuery | Pug | Sass | WordPress |
| TypeScript | Cordova | BackboneJS | ReactJS | ERB | Stylus | WooCommerce |
| | Ionic | | Haml | PostCSS | Sinatra
| | Express | | EJS | | Rack
| | Slim | | | |
| | Laravel | | | |
... and much more!
Front-End:
- HTML5
- CSS3
- JavaScript
Back-End:
- NodeJS
- Ruby
- PHP
Unit
REST/API
Cross-Devices/Browsers and Interfaces
Performance
Load/Stress
Integration
E2E
Regression
Mobile
- Xamarin Android Player
- GenyMotion - Android
- XCode Simulator - iOS
- Capistrano - used for remote server automation too
- Surge.sh
- [STRATEGY]: a mix of GTD and Scrum methods.
- [DEVELOPMENT]: use the SOLID principles.
- [BUILD]: all files must have two spaces (soft tab) for indentation.
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.
- Code Guide by @mdo
- Airbnb CSS Style Guide
- Airbnb JavaScript Style Guide
- John Papa Angular Style Guide
- Todd Motto Angular Style Guide
- Douglas Crockford's Code Conventions for JavaScript
- Felix Geisendörfer Node.js Style Guide
- Airbnb Ruby Style Guide
- Bozhidar Batsov Style Guide
- Github Ruby Style Guide
MIT License © Vitor Britto