anotheruiguy · johnidm · Mar 23, 2015 · Mar 23, 2015 · Mar 23, 2015 · Mar 23, 2015
diff --git a/LANGS.md b/LANGS.md
@@ -0,0 +1,2 @@
+* [English](en/)
+* [Português Brasil](pt-br/)
diff --git a/404.md → en/404.md b/404.md → en/404.md
diff --git a/en/README.md b/en/README.md
@@ -0,0 +1,13 @@
+# Build a Node.js Project from Scratch
+
+[![Build Status](https://www.gitbook.io/button/status/book/anotheruiguy/nodeexpreslibsass_from-scratch)](https://www.gitbook.io/book/anotheruiguy/nodeexpreslibsass_from-scratch/activity)
+
+Node.js What's all the buzz about? Why are so many people talking about it? How can I get some of this awesome? Follow along in this workshop/tutorial to get your head wrapped around what it takes to make a Node project from scratch.
+
+But it doesn't stop at Node. In the 'full stack JavaScript' world, there is a whole eco system of tools that you need to need to know about. Besides Node, there is Express, npm, Bower, Grunt, Gulp, etc .... This books's goal is not to deep dive into any one specific subject, but to provide the overview learning needed to build a good foundation.
+
+#### Fun deck
+
+I didn't make this deck, but it's an interesting and fun one to go through to talk about the interesting points of Node.js
+
+<script async class="speakerdeck-embed" data-id="4fa0c53f5f48f7002204edda" data-ratio="1.49926793557833" src="//speakerdeck.com/assets/embed.js"></script>
diff --git a/SUMMARY.md → en/SUMMARY.md b/SUMMARY.md → en/SUMMARY.md
diff --git a/add-some-data.md → en/add-some-data.md b/add-some-data.md → en/add-some-data.md
diff --git a/book.json → en/book.json b/book.json → en/book.json
diff --git a/bower-grunt-sass.md → en/bower-grunt-sass.md b/bower-grunt-sass.md → en/bower-grunt-sass.md
diff --git a/bower.md → en/bower.md b/bower.md → en/bower.md
diff --git a/cover.jpg → en/cover.jpg b/cover.jpg → en/cover.jpg
diff --git a/demo/README.md → en/demo/README.md b/demo/README.md → en/demo/README.md
diff --git a/demo/bower.md → en/demo/bower.md b/demo/bower.md → en/demo/bower.md
diff --git a/demo/buttons.md → en/demo/buttons.md b/demo/buttons.md → en/demo/buttons.md
diff --git a/demo/config.md → en/demo/config.md b/demo/config.md → en/demo/config.md
diff --git a/demo/forms.md → en/demo/forms.md b/demo/forms.md → en/demo/forms.md
diff --git a/demo/global-sass.md → en/demo/global-sass.md b/demo/global-sass.md → en/demo/global-sass.md
diff --git a/demo/jquery.md → en/demo/jquery.md b/demo/jquery.md → en/demo/jquery.md
diff --git a/demo/layout.md → en/demo/layout.md b/demo/layout.md → en/demo/layout.md
diff --git a/demo/module.md → en/demo/module.md b/demo/module.md → en/demo/module.md
diff --git a/demo/reset.md → en/demo/reset.md b/demo/reset.md → en/demo/reset.md
diff --git a/demo/set-up.md → en/demo/set-up.md b/demo/set-up.md → en/demo/set-up.md
diff --git a/demo/typo.md → en/demo/typo.md b/demo/typo.md → en/demo/typo.md
diff --git a/demo/vc.md → en/demo/vc.md b/demo/vc.md → en/demo/vc.md
diff --git a/demo/view.md → en/demo/view.md b/demo/view.md → en/demo/view.md
diff --git a/deploy-app.md → en/deploy-app.md b/deploy-app.md → en/deploy-app.md
diff --git a/express.md → en/express.md b/express.md → en/express.md
diff --git a/grunt-watch.md → en/grunt-watch.md b/grunt-watch.md → en/grunt-watch.md
diff --git a/grunt.md → en/grunt.md b/grunt.md → en/grunt.md
diff --git a/gulp.md → en/gulp.md b/gulp.md → en/gulp.md
diff --git a/heroku.md → en/heroku.md b/heroku.md → en/heroku.md
diff --git a/new-app.md → en/new-app.md b/new-app.md → en/new-app.md
@@ -1,4 +1,4 @@
-# Crate a new Express app
+# Create a new Express app
 
 At this point, you should be able to go forth and create an app. In this example, we will create a Node.js app with Express framework.
 

diff --git a/node-npm.md → en/node-npm.md b/node-npm.md → en/node-npm.md
diff --git a/routes.md → en/routes.md b/routes.md → en/routes.md
diff --git a/sass.md → en/sass.md b/sass.md → en/sass.md
diff --git a/pt-br/404.md b/pt-br/404.md
@@ -0,0 +1,25 @@
+# Erro 404?
+
+Erros já são endereços no Express. No arquivo `app.js` há o seguinte:
+
+```javascript
+/// catch 404 and forwarding to error handler
+app.use(function(req, res, next) {
+    var err = new Error('Not Found');
+    err.status = 404;
+    next(err);
+});
+```
+
+No diretório `views/` tem o arquivo `errors.jade`.
+
+```jade
+extends layout
+
+block content
+  h1= message
+  h2= error.status
+  pre #{error.stack}
+```
+
+Simples. Se você quer customizar a página 404, edite essa *view*.
diff --git a/pt-br/README.md b/pt-br/README.md
@@ -0,0 +1,12 @@
+# Criando um projeto Node.js do zero
+
+[![Build Status](https://www.gitbook.io/button/status/book/anotheruiguy/nodeexpreslibsass_from-scratch)](https://www.gitbook.io/book/anotheruiguy/nodeexpreslibsass_from-scratch/activity)
+
+Node.js do que se trata todo esse zumbido? Por que tantas pessoas estão falando sobre isso? Como eu posso conhecer um pouco dessa incrível plataforma? Acompanhando este workshop/tutorial onde vamos estar envolvidos em torno do que é preciso para fazer um projeto Node do zero.
+
+Mas isso não para em Node. No mundo *'ful stack JavaScript'*, existe um eco sistema completo de ferramentas que você precisa conhecer. Além de Node, há o Express, npm, Bower, Grump, Gulp, etc .... Este livro não tem como objetivo mergulhar profundamente em um assunto especifico, mas proporcionar uma visão geral que você precisa aprender para criar uma boa base.
+
+#### Apresentação divertida
+Eu não criei essa [apresentação](https://speakerdeck.com/nctunba/node), mas é uma interessante e divertira forma de falar sobre os pontos importante do Node.js.
+
+<script async class="speakerdeck-embed" data-id="4fa0c53f5f48f7002204edda" data-ratio="1.49926793557833" src="//speakerdeck.com/assets/embed.js"></script>
diff --git a/pt-br/SUMMARY.md b/pt-br/SUMMARY.md
@@ -0,0 +1,29 @@
+# Sumário
+
+* [Node e npm](node-npm.md)
+* [Express](express.md)
+  * [Criando um novo app](new-app.md)
+  * [Rotas](routes.md)
+  * [Erro 404](404.md)
+* [Grunt](grunt.md)
+* [Gulp](gulp.md)
+* [Sass](sass.md)
+* [Grunt watch](grunt-watch.md)
+* [Bower](bower.md)
+  * [Bower + Grunt + Sass](bower-grunt-sass.md)
+* [Adicionando dados](add-some-data.md)
+* [Heroku](heroku.md)
+  * [Deploy do código](deploy-app.md)
+* [Criando um formulário demo](demo/README.md)
+  * [A configuração](demo/set-up.md)
+  * [Controle de versão](demo/vc.md)
+  * [O layout](demo/layout.md)
+  * [A view](demo/view.md)
+  * [Configuração UI](demo/config.md)
+  * [Um reset](demo/reset.md)
+  * [Layout global Sass](demo/global-sass.md)
+  * [O módulo](demo/module.md)
+  * [Tipografia](demo/typo.md)
+  * [Formulários](demo/forms.md)
+  * [Botões](demo/buttons.md)
+  * [jQuery](demo/jquery.md)
diff --git a/pt-br/add-some-data.md b/pt-br/add-some-data.md
@@ -0,0 +1,17 @@
+# Adicionado alguns dados
+
+Um bom [demo](http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/) que adicionada uma próxima camada desse workshop. Adicionado o Mongo DB no projeto dá para fazer um simples UX I/O.
+
+> Minha coisa favorita sobre MongoDB é que ele usa JSON em sua estrutura, o que significa que ele é familiar para mim. Se você não está familiarizado com JSON, você vai precisar de algumas leituras, isso está fora do escopo desse e-book. 
+
+> Vamos adicionar um registro em nossa coleção, Para o proposito desse tutorial apenas vamos ter um simples banco de dados com o nome de usuário e endereços de e-mail. Nossos dados estão no seguinte formato:
+
+```javascript
+{
+  "_id" : 1234,
+  "username" : "cwbuecheler",
+  "email" : "cwbuecheler@nospam.com"
+}
+```
+
+Alguém está disposto a ajudar e colocar outros dados. Eu adoraria um Pull Request.
diff --git a/pt-br/book.json b/pt-br/book.json
@@ -0,0 +1,11 @@
+{
+    "name": "Build a Node.js Project from Scratch",
+    "version": "0.1.2",
+    "description": "Build a Node.js project from scratch, learn how to install the Express framework, learn about Yeomen Generators, create Grunt Tasks and build and install your own Bower Packages.",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/anotheruiguy/node-workshop"
+    },
+    "author": "Dale Sande <dale.sande@gmail.com>",
+    "license": "MIT",
+}
diff --git a/pt-br/bower-grunt-sass.md b/pt-br/bower-grunt-sass.md
@@ -0,0 +1,81 @@
+# Bower - Grunt - Sass
+
+Agora que nos conhecemos o poder do Bower para gerenciar as dependências de desenvolvimento do nosso front-end, o que nós precisamos fazer para adicionar um pacote Bower de código Sass em nosso projeto?
+
+## Bower install 
+
+Em primeiro lugar, vamos instalar um pacote simples no Bower para demostrar:
+
+```
+$ bower install css-calc-mixin --save
+```
+
+Aqui, nos agora temos uma biblioteca de código em nosso projeto.
+
+## Atualizando Gruntfile.js
+
+Em seguida, vamos atualizar o `Gruntfile.js` para que possamos facilmente incluir a bibliotecas em nossos arquivos Sass. Sem esse passo, seria preciso escrever preenchendo o caminho completo em nossos arquivo Sass.
+
+Na API Grunt-Sass temos várias opções, e uma que precisamos usar é `includePaths`. Aqui podemos passar uma string que é cominho completo desde a raiz até o pacote Bower em um array.
+
+```javascript
+module.exports = function(grunt) {
+  grunt.initConfig({
+    sass: {
+      dist: {
+        files: {
+          'public/stylesheets/style.css': 'sass/style.scss'
+        }
+      },
+      options: {
+        includePaths: [
+          './bower_components/css-calc-mixin'
+        ]
+      }
+    },
+    watch: {
+      source: {
+        files: ['sass/**/*.scss', 'views/**/*.jade'],
+        tasks: ['sass'],
+        options: {
+          livereload: true, // needed to run LiveReload
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-sass');
+  grunt.registerTask('default', ['sass']);
+};
+```
+
+## Atualizando o arquivo style.scss
+
+Para fazer uso da nova biblioteca do pacote Bower, nós precisamos usar uma convenção Sass para importar o código.
+
+```sass
+@import "css-calc-mixin";
+```
+
+Para testar se isso está funcionando, vamos adicionar uma pouco de código que faz referência ao uma biblioteca Bower.
+
+```sass
+.block {
+  @include calc(width, 220px);
+}
+
+.block {
+  @include calc(margin, 220px, 0);
+}
+
+.block {
+  @include calc(width, 220px, true, 0);
+}
+
+.block {
+  @include calc(width, 220px, true, 0, 50%, '+');
+}
+```
+
+Volte ao CLI, execute `grunt` devemos ver luzes verdes todo o dia!
diff --git a/pt-br/bower.md b/pt-br/bower.md
@@ -0,0 +1,185 @@
+# Bower e todas as coisas
+
+A menos que você vive em um buraco, você está ciente da revolução JavaSrcipt que está ao nosso redor. Muito desses incríveis conceitos eu descobri no ecossistema do Rails e agora estão em explosão no espaço JavaScript, permitindo distribuições impressionantes. Os três pilares são: Yeoman, Bower and Grunt.
+
+O problema que precisamos resolver é: qual a melhor maneira de obter códigos de bibliotecas no GitHub e torna-lo acessível para usuários sem ter que clonar um projeto? Porque, isso é muito ruim, certo?
+
+## Yeoman generators
+Inicialmente eu venho sobre [generator-sass-boilerplate](https://github.com/srsgores/generator-sass-boilerplate), o 'Yeoman generators  e um scaffolding de etilos Sass'. Isso é uma abordagem muito interessante para criar bibliotecas complexas e permitir a usuário customizar a instalação. Mas para uma simples biblioteca de código, pode ser apenas mais uma função ou mixins, e isso é um *overhead*.
+
+## Bower é a resposta
+
+Avançando agora. E recentemente me deparei com novas mensagens que quebrar e é o que o Bower faz de melhor. E essa é a resposta" 
+
+Para aqueles que não conhecem, o Bower é uma solução extremante simples para gerenciamento de pacotes front end.
+
+> Ele fornece uma solução genérica para o problema de gerenciamento de pacotes front-end, enquanto expões o modelo de dependência através de uma API que podem ser consumida através de muitas opções de build.
+
+A beleza do Bower e mantido dentro de sua simplicidade. Bower tem um registro, mas não e 100% necessário. O comando comum é `bower install <package>` onde `<package>` pode ser referir a um [grande número de opções](http://bower.io/#using-a-different-name-and-a-specific-version-of-a-package), tornando assim uma poeira simples para compartilhar código. LEGAL.
+
+Cumprindo com o tema `poeira simples`, você pode usar Bower para  puxar um repositório dentro de seu projeto sem fazer um clone dele. Mesmo se ele não tem um arquivo `bower.json`.
+
+Por exemplo Stipe, uma biblioteca Compass Extension que eu escrevi, é não e um cliente Bower.
+
+```
+$ bower install git://github.com/Toadstool-Stipe/stipe.git
+```
+
+Execute esse comando em qualquer pasta e você vai puxar todo o repositório sem o histórico do GitHub. Isso por si só é interessante.
+
+## Iniciando com o Bower
+
+Para começar, é realmente simples. Assumindo que Node e npm estão instalados, execute:
+
+```
+$ npm install -g bower
+```
+
+### Instalando pacotes Bower
+
+Eu não vou entrar em detalhes complexos aqui, mas 99% do tempo você simplesmente vai executar:
+
+```
+$ bower install <package>
+```
+
+Como dito acima, há alternativas de instalação, mas solução principal é ter um arquivo `bower.json` em seu repositório e registra ele sem seu Bower.
+
+Se você tem um arquivo `bower.json` em seu projeto, explicado na próxima seção, você pode adicionar a *flag* `--save` com a instalação e isso vai adicionar o biblioteca com a dependência em seu projeto. 
+
+Quando você distribuir o projeto, um usuário que clona somente tem que executar `$ bower install` e isso vai puxar todas os recursos extenso.
+
+## Commitar ou não commitar?
+
+Nesse novo sistema de criação e distribuição de recursos levantamos uma interessante questão, você liberar os seu pacotes gerenciados pelo Bower ou não? No mundo Ruby, Gens na verdade não são parte do projeto, mas dependências do projeto nunca são liberados para o sistema de controle de versão. Isso é novo no mundo JavaScripot, dependência de pacotes Node e Bower são referenciadas através de um manifesto, muito parecido com GemFile no Ruby, mas são, instalar na verdade, dentro do diretório raiz do projeto.
+
+Há [toda uma discussão](http://addyosmani.com/blog/checking-in-front-end-dependencies/) desse tópico. Eu vejo dessa maneira, quando você instala uma biblioteca Bower, você está partindo com uma depenica ou você está fazendo modificações?
+
+A escolha é sua, os argumentos são fortes para ambos os lados. Em uma situação em que você está realmente em uma fork de código insolando, então a resposta é muito clara, isso deve ser liberado com o projeto ou você precisar fazer um fork da dependência.
+
+## Gerando um novo pacote Bower 
+
+Criando um novo pacote Bower é novamente, muito simples
+
+```
+$ bower init
+```
+
+O CLI, vai solicitar uma série de perguntas, a respostas de que deve ser gravada dentro do arquivo `bower.json` que vai ser criado. Coloque o que você quer, mas tudo o que você realmente precisa é: 
+
+```
+{
+  "name": "your-project",
+  "version": "0.1.0"
+}
+```
+
+E o que isso e de fato. Você acabou de criar sua primeira biblioteca de recursos. Agora vamos fazer o build! O Build dos seu recursos, documentação , etc ... Seu pacote vai estar pronto em pouco tempo.
+
+Para testar é fácil, lembra do truque `$ bower install git://github.com/ ...`? Execute isso em um novo repositório e veja como ele se instala.
+
+Seja cuidado nessa etapa e com o que os pacotes contem. Em minha opinião, eu vejo o Bower como uma boa maneira de para distribuir pequenas e especificas bibliotecas de código. Quando eu puxo o seu pacote Bower, eu de fato quero toda a documentação, teste, demonstração, recostos, etc ... Com um exemplo, eu vou pegar o Bourbon aqui, execute: 
+
+```
+$ bower install bourbon
+```
+
+Executando o instalador, você vai ter todo o repositório. Eu não quero todo o repositório, tudo o que eu quero de fato está no diretório `dist/`. Para resolver isso, outro desenvolver fez um fork do Bourbon e criou um repositório chamado [bower-bourbon](https://github.com/hmps/bourbon):
+
+```
+$ bower install bower-bourbon
+```
+
+Executando essa instalação você na realidade somente vai pegar o que está no diretório `dist/`. Mas são esse forks confiáveis. Ohhh open Soure, você e um selvagem.
+
+**ATUALIZAÇÃO** Isso tem tido minha atenção que a utilização do Bower para instalar o Bourbon beta 3.2 parece não ser totalmente funcional. Nesse seção não vamos dizer "bad Bourbon", mas para demonstrar que em alguns casos, no uso do Bower, vai ter muitas outras bibliotecas.
+
+## Registros no Bower
+
+Quando tudo estiver pronto para liberação [registrando com o Bower](http://bower.io/#registering-packages). Esse critério é bastante simples:
+
+
+1. Certifique-se que seu repositório tem o arquivo `bower.json`.
+2. Você deve usar [visionamento semântico](http://semver.org/)
+3. Seu pacote tem que estar disponível em um Git *endpoint*, ex: GitHub 
+
+Depois disso tudo, execute o comando com seu novo pacote no *endpoint* Git:
+
+```
+$ bower register <my-package-name> <git-endpoint>
+```
+
+Registrar é fácil. Depois de conseguir a linha verde em tudo, para testar execute`$ bower install <my-package-name>`.
+
+## Bower e Sass
+
+As bibliotecas Bower e Sass são incríveis juntas. Há pequenos repositórios no Github. Onde no Ruby Gem/Compass Extension é complexo e com muito *overhead*. Você precisar fazer um fork, clone ou deus me livre, copiar e colar código no seu projeto. O que? Nos não somos civilizados?
+
+No mundo Ruby, desenvolvedores estão acostumados a ter Gems e Compass Extensions instaladas em locais seguros, localização não conhecida. Uma nova Gem esta adicionado no GemFile e simplesmente referência a biblioteca no projeto.
+
+##### Localização não conhecida e frustrante para muitos desenvolvedores. Bibliotecas Sass importantes que eles não têm controle sobre ela, ou são incapaz de modificá-las.
+
+No novo mundo JavaScript, as bibliotecas estão incluídas no arquivo de manifesto `bower.json` ou simplesmente instaladas, mas em vez de ser um local desconhecido, está localizada do diretório raiz do projeto. Isso mantes as coisas simples na perspectiva de instalação , mas significa que nosso importação Sass está em diretórios relativos.  Não é grande coisas, mas diferente do que estamos acostumados.
+
+
+
+Então, como o pacote Bower se parece? Vamos ver um simples que eu criei chamando [sass-icon-fonts](https://github.com/anotheruiguy/sass-icon-fonts). Esse pacote é um simples par de *mixins*, que permite a revolvedores criar um `@font-face` e definir regras de anotações, outra capacidade de gerar uma série de regras para ícones e fontes. Esse mini biblioteca tem instruções e um API muito simples.
+
+Agora, vamos imaginar que você estar criando um projeto Node e quer usar esse pacote com recurso, execute:
+
+```
+$ bower install sass-icon-fonts --save
+```
+
+Instale o pacote e adicione a dependência em seu arquivo `bower.json`. Localize no diretório raiz do seu projeto o diretório `sass/`, dentro dele tem o arquivo `application.scss`, na raiz tem diretório `bower_components`. No seu arquivo `application.scss` para acessar a nova biblioteca, nós vamos precisar importar o caminho da biblioteca, como mostrado a seguir:
+
+```
+@import "../bower_components/sass-icon-fonts/_ico-font.scss";
+```
+
+Embora o exemplo anterior funcione, eu achei isso aceitável, eu não acho incrível. Procurar mais na API Grint-Sass eu descobri a função [includePaths](https://github.com/sindresorhus/grunt-sass#includepaths). Ela permite a você definir um caminho de importação.
+
+```
+options: {
+  includePaths: [
+    './bower_components/bower-bourbon'
+  ]
+}
+```
+
+Agora que temos isso em nosso arquivo Grunt, vamos poder referenciar as bibliotecas no arquivo de manifesto principal simplesmente importando o Sass, assim:
+
+```
+@import "bourbon";
+```
+
+## Bower em seu npm
+
+Uma das coisas que eu acho irritante sobre o uso do Bower é que eu tenho que executar comandos esperados quando inicio um novo projeto. Eu já tenho usado o npm não posso simplesmente ligar essas coisas junto?
+
+Sim, você pode. Em seu projeto no arquivo `package.json`, extensa o objeto `scripts` e passe o comando  `bower install`. Isso é por isso que eu realmente AMO estas coisas!
+
+```
+"scripts": {
+  "install": "bower install"
+}
+```
+
+Agora quando você executar `npm install` isso não  vai somente instalar os pacotes Node, mas também instalar o pacotes Bower . LEGAL.
+
+## Bower por traz dofirewall
+
+
+
+Se você está atrás de um firewall que não permite acessar o protocolo `git://[repo]`, existe uma solução para isso. Primeiro eu recomento faze o clone usando o protocolo `https://[repo]`, certifique-se que esse é realmente o problema. Se o protocolo `https://[repo]` funciona, então você pode querer fazer a seguinte atualização:
+
+```
+git config --global url."https://"
+```
+
+Obrigado [Stack Overflow](http://stackoverflow.com/questions/15669091/bower-install-using-only-https)!
+
+## Sumário
+
+Quando digo eu quero o Bower para todas as coisas, eu quero dizer exatamente isso. Agora entender o Bower, eu estou olhando para um simples gerenciado de pacotes, em todo novo exemplo que você fazer eu espero que você possa usá-lo.
+Não faça mais fork, clone ou excluir diretório `.git/` apenas inclua a biblioteca no seu projeto, Eu estou olhando e criar módulos Sass em todos o novo exemplo que eu tenho feito. Não que Compass extensions sejam difícil, mas o Bower liberta de várias dependências, Algumas que tem uma real questão em muitos projetos.
diff --git a/pt-br/cover.jpg b/pt-br/cover.jpg
diff --git a/pt-br/demo/README.md b/pt-br/demo/README.md
@@ -0,0 +1,8 @@
+# Criando um formulário de mensagens:
+
+### Passo a passo
+
+O seguinte demo é um popular padrão UI/UX de com entrada de dados no formulário.
+
+![image](http://i.imgur.com/EQzJpuh.png)
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		* [English](en/)
		* [Português Brasil](pt-br/)