diff --git a/translations/pt_BR/2017.md b/translations/pt_BR/2017.md new file mode 100644 index 00000000..3204ade6 --- /dev/null +++ b/translations/pt_BR/2017.md @@ -0,0 +1,21 @@ +# O que esperar em 2017... + +* A [Web Assembly](http://webassembly.org/) pode chegar ao seu auge. +* `import` pode ser [utilizável](https://github.com/tc39/proposal-dynamic-import#example) na tag `` +* Soluções universais de JavaScript vão continuar a prestar homenagem aos dias de [front-ends entregues pelo servidor (por exemplo, HTML ao cliente)](https://github.com/zeit/next.js). +* Programação reativa continuará a prosperar no mundo JavaScrip (veja MobX e RxJS). +* React, em especial o conceito, irá dominar. O próprio React será completamente reescrito (veja [React Fiber](https://github.com/acdlite/react-fiber-architecture)) ou irá evoluir (veja [Inferno](https://github.com/infernojs/inferno)). +* Angular encontrou o Versionamento Semântico (SEMVER), assim o Angular 4 (talvez 5) esteja a [caminho](https://www.youtube.com/watch?v=aJIMoLgqU_o&feature=youtu.be&t=6m12s) em 2017. +* Pode acontecer o retorno dos sites simples, web 1.0 retrô, mas com a ajuda de ferramentas de 2017 (por exemplo, [geradores de site estáticos](https://github.com/vigetlabs/gulp-starter/tree/blendid)). +* APIs JSON RESTful terão mais competição (veja [GraphQL](http://graphql.org/)). +* Pode ser um grande ano para o [Vue.js](https://vuejs.org/). +* Mais desenvolvedores irão abandonar as soluções CMS tradicionais por geradores de site estáticos e [ferramentas CMS de API](https://www.google.com/webhp?sourceid=chrome-instant&rlz=1C5CHFA_enUS712US713&ion=1&espv=2&ie=UTF-8#q=api%20cms). +* Mais pessoas vão trocar o Sass pelo [PostCSS](http://postcss.org/) + cssnext. +* Muito mais HTTP2 e HTTPS. +* Web components vão continuar a espreita, esperando por um interesse significante da parte dos desenvolvedores, algo que talvez nunca aconteça. +* A turma do framework-sem-framework vai ganhar energia (veja [Svelte](https://svelte.technology/blog/frameworks-without-the-framework/)). +* O JavaScript vai estacionar, e com sorte, o CSS vai explodir e todo mundo vai chorar de cansaço até que ele se acalme. +* O ódio em relação às lojas de aplicativos vai cescer, enquanto a web aberta não terá memória de erro algum. +* Redux continuará a ganhar fortes competidores (veja [mobx](https://mobx.js.org/)). +* YARN ganhará mais usuários. +* A ideia de “aplicativos front-end”, “aplicativos Thick Client (Cliente Gordo)”, “aplicativos estáticos”, “aplicativos sem backend”, “SPAs”, “aplicativos Front-end driven” podem ser resumidos a um termo/conceito chamado ["JAM Stack"](https://jamstack.org/). \ No newline at end of file diff --git a/translations/pt_BR/README.md b/translations/pt_BR/README.md new file mode 100644 index 00000000..87139cc3 --- /dev/null +++ b/translations/pt_BR/README.md @@ -0,0 +1,42 @@ +# Guia de bolso front-end 2017 + +Escrito por [Cody Lindley](http://codylindley.com/), patrocinado por [Frontend Masters](https://frontendmasters.com/) e traduzido pela [comunidade](https://github.com/frontendbr/). + +Este é um guia que qualquer pessoa pode usar para aprender sobre desenvolvimento front-end. Também discute de forma geral sobre a parte de engenharia front-end: como aprender e quais ferramentas usar ao trabalhar com front-end em 2017. + +Este livro foi escrito com a intenção de ser um guia para futuros front-ends e para quem já atua na área, para que ganhem mais conhecimento com materias de aprendizado e ferramentas de desenvolvimento. De forma secundária, pode ser usado por gerentes, CTOs, instrutores e recrutadores para adquirir conhecimento sobre como é o trabalho de um front-end. + +O conteúdo deste livro foca em tecnologias web (HTML, CSS, DOM e Javascript) e soluções que são construídas através destas tecnologias. Os materiais referenciados e discutidos no livro são os mais recomendados e usados atualmente. + +Este livro não deve ser considerado uma enciclopédia com todos os recursos disponíveis para um front-end. O conteúdo deste livro é abordado de forma a não sobrecarregar o leitor com algum assunto específico. + +A intenção é atualizar este livro anualmente. + +Este guia é dividido em três partes. + +## Parte 1 - Front-End na Prática + +- Aborda a prática do Desenvolvimento Front-End + +## Parte 2 - Aprendendo Desenvolvimento Front-End + +- Mostra recursos de aprendizado para se tornar um Desenvolvedor Front-End + +## Parte 3 - Ferramentas de Desenvolvimento + +- Explica brevemente sobre ferramentas para desenvolvimento + + +*** + +**Download em .pdf, .epub ou .mobi**: + +* [https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details](https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details) + +**Contribua com o conteúdo, sugira e corrija no GitHub**: + +* [https://github.com/FrontendMasters/front-end-handbook-2017](https://github.com/FrontendMasters/front-end-handbook-2017) + +*** + +Creative Commons License
O trabalho é licenciado sobre aCreative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. diff --git a/translations/pt_BR/SUMARIO.md b/translations/pt_BR/SUMARIO.md new file mode 100644 index 00000000..db65341c --- /dev/null +++ b/translations/pt_BR/SUMARIO.md @@ -0,0 +1,102 @@ +# Sumário + +* [O que é um desenvolvedor Front-End?](o-que-e-um-FD.md) +* [Resumo do desenvolvimento Front-End em 2016](recapitulando.md) +* [O que esperar em 2017...](2017.md) +* [Parte I: O Front-End na prática](pratica.md) + * [Cargos de Front-end](pratica/cargos-de-front-end.md) + * [Tecnologias normalmente empregadas](pratica/tecnologias-empregadas.md) + * [Habilidades de um Front-End](pratica/habilidades.md) + * [Front-Ends desenvolvem para...](pratica/desenvolvem-para.md) + * [Front-End em um time](pratica/time.md) + * [O mito do Full-Stack](pratica/mito.md) + * [Questões de entrevista para Front-End](pratica/questoes-entrevista.md) + * [Quadro de vagas para Front-End](pratica/quadro-vagas.md) + * [Salários de Front-End](pratica/salarios.md) + * [Como ser um Front-End?](pratica/virando-fd.md) +* [Parte II: Aprendendo desenvolvimento Front-End](aprendendo.md) + * [Aprendizado Direcionado Autodidata](aprendendo/direcionado-autodidata.md) + * [Aprenda sobre Internet/Web](aprendendo/internet.md) + * [Aprenda sobre Navegadores Web](aprendendo/navegadores.md) + * [Aprenda sobre DNS](aprendendo/dns.md) + * [Aprenda sobre HTTP/Redes](aprendendo/http-redes.md) + * [Aprenda sobre Hospedagem Web](aprendendo/hospedagem.md) + * [Aprenda sobre Front-End de maneira geral](aprendendo/front-end.md) + * [Aprenda sobre UI/UX](aprendendo/padroes-ui.md) + * [Aprenda HTML e CSS](aprendendo/html-css.md) + * [Aprenda sobre SEO](aprendendo/seo.md) + * [Aprenda JavaScript](aprendendo/javascript.md) + * [Aprenda sobre Animação Web](aprendendo/animacao-web.md) + * [Aprenda DOM, BOM & jQuery](aprendendo/dom-bom-jquery.md) + * [Aprenda sobre Web Fonts](aprendendo/web-fonts.md) + * [Aprenda sobre Acessibilidade](aprendendo/acessibilidade.md) + * [Aprenda sobre APIs (Web/Browser)](aprendendo/web-api.md) + * [Aprenda JSON](aprendendo/json.md) + * [Aprenda JS Templates](aprendendo/templates.md) + * [Aprenda sobre Geradores de Sites Estáticos](aprendendo/estaticos.md) + * [Aprenda sobre Ciência da Computação com JS](aprendendo/cs.md) + * [Aprenda Arquitetura de Aplicações Front-End](aprendendo/front-end-apps.md) + * [Aprenda sobre Design de API de Dados (ex. JSON/REST)](aprendendo/api-dados.md) + * [Aprenda React & Redux](aprendendo/react-redux.md) + * [Aprenda sobre Aplicações Web Progressivas](aprendendo/pwa.md) + * [Aprenda Design de API em JS](aprendendo/js-api.md) + * [Aprenda sobre as Ferramentas de Desenvolvimento do Navegador](aprendendo/browser-dev-tools.md) + * [Aprenda sobre Linha de Comando](aprendendo/cli.md) + * [Aprenda Node.js](aprendendo/node.md) + * [Aprenda sobre Módulos em JavaScript](aprendendo/modulos-js.md) + * [Aprenda sobre Loaders/Bundlers de módulos JS](aprendendo/bundlers-loaders-modulos.md) + * [Aprenda sobre Gerenciadores de Pacotes](aprendendo/gerenciador-pacotes.md) + * [Aprenda sobre Controle de Versão](aprendendo/controle-versao.md) + * [Aprenda sobre Build & Automação de Tarefas](aprendendo/build.md) + * [Aprenda sobre Otimização de Performance de Site](aprendendo/performance.md) + * [Aprenda sobre Testes](aprendendo/testes.md) + * [Aprenda sobre Navegadores Headless](aprendendo/navegadores-headless.md) + * [Aprenda sobre Desenvolvimento Offline](aprendendo/offline.md) + * [Aprenda Segurança Web (Aplicações e Navegador)](aprendendo/seguranca.md) + * [Aprenda sobre Desenvolvimento Multi-Plataforma (ex. Responsividade)](aprendendo/multi-plataforma.md) + * [Aprendizado Direcionado](aprendendo/direcionado.md) + * [Escolas, cursos e Bootcamps de Front-End](aprendendo/cursos.md) + * [Desenvolvedores com quem aprender mais](aprendendo/aprenda-com.md) + * [Newsletters, Notícias, & Podcasts](aprendendo/noticias-podcasts.md) +* [Parte III: Ferramentas de Desenvolvimento Front-End](ferramentas.md) + * [Ferramentas de Documentação de APIs](ferramentas/navegacao-docs.md) + * [Ferramentas de SEO](ferramentas/seo.md) + * [Ferramentas para Wireframe e Prototipação](ferramentas/prototipacao.md) + * [Ferramentas de Diagramação](ferramentas/diagramacao.md) + * [Ferramentas de Redes/HTTP](ferramentas/http.md) + * [Ferramentas para Edicão de Códigos](ferramentas/editor-codigos.md) + * [Ferramentas de Navegadores](ferramentas/navegadores.md) + * [Ferramentas para HTML](ferramentas/html.md) + * [Ferramentas para CSS](ferramentas/css.md) + * [Ferramentas para DOM](ferramentas/dom.md) + * [Ferramentas para JavaScript](ferramentas/js.md) + * [Ferramentas para Geradores de Sites Estáticos](ferramentas/estaticos.md) + * [Ferramentas para Desenvolvimento de Acessibilidade](ferramentas/acessibilidade.md) + * [Ferramentas para Frameworks (Mobile, Desktop, Web e etc.)](ferramentas/frameworks.md) + * [Ferramentas para Aplicação Web Progressiva](ferramentas/pwa.md) + * [Ferramentas para Scaffolding](ferramentas/scaffolding.md) + * [Ferramentas Gerais para Front-End](ferramentas/dev-tools.md) + * [Ferramentas para Templating/Data Binding](ferramentas/templates.md) + * [Pacotes de UI Widget & Componentes](ferramentas/ui.md) + * [Ferramentas para Visualização de Dados (ex. Gráficos)](ferramentas/visualizacao-dados.md) + * [Ferramentas Gráficas (ex. SVG, Canvas e etc.)](ferramentas/graficos.md) + * [Ferramentas de Animação](ferramentas/animação.md) + * [Ferramentas para JSON](ferramentas/json.md) + * [Ferramentas para Imagens/Textos Substitutos](ferramentas/placeholder.md) + * [Ferramentas para Testes](ferramentas/testes.md) + * [Ferramentas para Armazenamento Front-End](ferramentas/db.md) + * [Ferramentas para Carregamento de Módulos/Pacotes](ferramentas/loaders.md) + * [Ferramentas de Repositório de Módulos/Pacotes](ferramentas/repositorios.md) + * [Ferramentas de Hospedagem](ferramentas/hospedagem.md) + * [Gerenciamento de Projeto & Hospedagem de Códigos](ferramentas/projetos-hospedagem.md) + * [Ferramentas para Comunicação & Colaboração](ferramentas/comunicacao-colaboracao.md) + * [Ferramentas para CMS (Hospedada/APIs)](ferramentas/cms.md) + * [Ferramentas BaaS (Backend as a Service)](ferramentas/baas.md) + * [Ferramentas para Aplicação Offline](ferramentas/offline.md) + * [Ferramentas para Segurança](ferramentas/seguranca.md) + * [Ferramentas para Build](ferramentas/build.md) + * [Ferramentas para Deploy](ferramentas/deploy.md) + * [Ferramentas de Monitoramento](ferramentas/monitoramento.md) + * [Ferramentas de Monitoramento de Erros para JS](ferramentas/monitoramento-erro.md) + * [Ferramentas de Performance](ferramentas/performance.md) + * [Ferramentas para encontrar ferramentas](ferramentas/encontrar-ferramentas.md) diff --git a/translations/pt_BR/aprendendo.md b/translations/pt_BR/aprendendo.md new file mode 100644 index 00000000..c46f430a --- /dev/null +++ b/translations/pt_BR/aprendendo.md @@ -0,0 +1,5 @@ +# Parte II: Aprendendo + +A parte dois apresenta recursos auto didatas (para estudar onde e quando quiser) e formais (aulas presenciais com dia e horas específicos) para aprender desenvolvimento front-end. + +Note que só por que uma fonte de aprendizado está listada, ou uma categoria de conhecimento está documentada, não significa que um desenvolvedor front-end deva aprender tudo. Isso seria absurdo. Escolha seu próprio nicho para se profissionalizar. Estou apenas mostrando uma relação do que você pode se especializar. \ No newline at end of file diff --git a/translations/pt_BR/aprendendo/acessibilidade.md b/translations/pt_BR/aprendendo/acessibilidade.md new file mode 100644 index 00000000..f9f0b050 --- /dev/null +++ b/translations/pt_BR/aprendendo/acessibilidade.md @@ -0,0 +1,28 @@ +# Aprenda sobre acessibilidade + +> Acessibilidade refere-se ao design de um produto, dispositivo, serviço ou ambiente para pessoas com deficiências. O conceito de design acessível garante tanto o "Acesso direto" (não assistido) quanto o "acesso indireto" significando compatibilidade com a tecnologia assistiva de uma pessoa (por exemplo, computadores com leitores de tela). +> +>Acessibilidade pode ser vista como a "capacidade de acesso" e benefícios de algum sistema ou indivíduo. O conceito foca em permitir o acesso de pessoas desabilitadas, com necessidades especiais, ou possibilitar o acesso por meio do uso de tecnologia assistiva. De qualquer forma, pesquisar e desenvolver acessibilidade traz benefícios para todos. +> +>Não confunda acessibilidade com usabilidade, que é amplitude com a qual um produto (tanto um dispositivo quanto um serviço ou um ambiente) poder ser utilizado pelo usuário, para que o mesmo possa alcançar o objetivo com eficácia, eficiência e satisfação em um contexto específico de uso. +> +>Acessibilidade está fortemente relacionada ao design universal, que é o processo de criar produtos que são acessíveis por pessoas com as mais variadas capacidades, dispositivo e nas mais variadas situações. E assim fazer as coisas acessíveis para todas as pessoas (tendo elas alguma deficiência ou não). + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Acessibilidade) + +##### Aprendizado geral: + +* [Foundations of UX: Accessibility (Fundamentos do UX: Acessibilidade)](http://www.lynda.com/Accessibility-tutorials/Foundations-UX-Accessibility/435008-2.html) :tv: :moneybag: +* [How HTML elements are supported by screen readers (Como elementos HTML são suportados pelos leitores de tela)](http://thepaciellogroup.github.io/AT-browser-tests/?utm_source=html5weekly&utm_medium=email) :book: +* [Introduction to Web Accessibility (Introdução a acessibilidade na Web)](https://webaccessibility.withgoogle.com/course) - Google Open Online Education :tv: +* [Introduction to Web Accessibility (Introdução a acessibilidade na Web)](https://www.w3.org/WAI/intro/accessibility.php) - WAI :book: +* [Universal Design for Web Applications: Web Applications That Reach Everyone (Design universal para aplicações web: Aplicações web que são acessíveis para todos)](http://www.amazon.com/Universal-Design-Web-Applications-Everyone/dp/0596518730/ref=sr_1_1) :book: :moneybag: +* [Web Accessibility: Getting Started (Acessibilidade web: Começando)](http://www.pluralsight.com/courses/web-accessibility-getting-started) :tv: :moneybag: +* [A Web for Everyone (Uma web para todos)](http://rosenfeldmedia.com/books/a-web-for-everyone/) :book: :moneybag: +* [Web Accessibility (Acessibildiade web)](https://frontendmasters.com/workshops/accessibility/) :tv: :moneybag: + +##### Padrões/Especificações: + +* [Accessible Rich Internet Applications (WAI-ARIA) Current Status (Aplicações web ricas em acessibilidade)](http://www.w3.org/standards/techs/aria#w3c_all) +* [Web Accessibility Initiative (WAI) (Iniciativa de Acessibilidade à Web)](http://www.w3.org/WAI/) +* [Web Content Accessibility Guidelines (WCAG) Current Status (Diretrizes de Acessibilidade ao Conteúdo da Web)](http://www.w3.org/standards/techs/wcag#w3c_all) diff --git a/translations/pt_BR/aprendendo/animacao-web.md b/translations/pt_BR/aprendendo/animacao-web.md new file mode 100644 index 00000000..9177743b --- /dev/null +++ b/translations/pt_BR/aprendendo/animacao-web.md @@ -0,0 +1,18 @@ +# Aprendendo Animações Web + +##### Aprendizado Geral: + +* [Advanced SVG Animation (Animação avançadas com SVG)](https://frontendmasters.com/courses/svg-animation/) :tv: :moneybag: +* [Adventures in Web Animations (Aventuras com animações web)](https://www.codeschool.com/courses/adventures-in-web-animations) :tv: :moneybag: +* [Animating With Snap.svg (Animando com Snap.svg)](https://webdesign.tutsplus.com/courses/animating-with-snapsvg) :tv: :moneybag: +* [Animation in CSS3 and HTML5 (Animação com CSS e HTML5)](https://frontendmasters.com/courses/animation-storytelling-html5-css3/) :tv: :moneybag: +* [Create Animations in CSS (Criando Animações em CSS)](http://www.kirupa.com/css_animations/index.htm) :tv: :book: +* [CSS Animation in the Real World (Animações CSS no mundo real)](https://webdesign.tutsplus.com/courses/css-animation-in-the-real-world) :tv: :moneybag: +* [Foundation HTML5 Animation with JavaScript (Fundação animação HTML5 com JavaScript)](http://www.amazon.com/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655/ref=sr_1_3) :book: :moneybag: +* [Learn to Create Animations in JavaScript (Aprendendo a criar animações em JavaScript)](http://www.kirupa.com/javascript_animations/index.htm) :tv: :book: +* [State of the Animation 2015 (Estado da animação em 2015)](https://air.mozilla.org/rachel-nabors-state-of-the-animation-2015/) :tv: +* [Web Animation using JavaScript: Develop & Design (Develop and Design) (Animações web usando JavaScript: Desenvolvimento e Design)](http://www.amazon.com/Web-Animation-using-JavaScript-Develop-ebook/dp/B00UNKXVDU/ref=sr_1_1) :book: :moneybag: + +##### Padrões/Espeficações: + +* [Web Animations (Animações web)](https://w3c.github.io/web-animations/) diff --git a/translations/pt_BR/aprendendo/api-dados.md b/translations/pt_BR/aprendendo/api-dados.md new file mode 100644 index 00000000..5105440b --- /dev/null +++ b/translations/pt_BR/aprendendo/api-dados.md @@ -0,0 +1,6 @@ +# Aprenda sobre Design de API de Dados + +* [API Design in Node.js (using Express & Mongo) (Design de API em Node.js (Usando Express e Mongo))](https://frontendmasters.com/courses/api-design-nodejs/) [Assistir][$] +* [Build APIs You Won't Hate (Constua APIs que Você Não Odiará)](http://apisyouwonthate.com/) [$][Ler] +* [JSON API (API JSON)](http://jsonapi.org/) [Ler] +* [RESTful Web API Design with Node.JS - Second Edition (Design de API RESTful de Web com Node.JS - Segunda Edição)](https://www.amazon.com/RESTful-Web-API-Design-Node-JS/dp/1786469138?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=65822660966bb9c5339b4b411ef25d73&camp=1789&creative=9325) [$][Ler] diff --git a/translations/pt_BR/aprendendo/aprenda-com.md b/translations/pt_BR/aprendendo/aprenda-com.md new file mode 100644 index 00000000..33fbba42 --- /dev/null +++ b/translations/pt_BR/aprendendo/aprenda-com.md @@ -0,0 +1,3 @@ +# Desenvolvedores Front-End Com Quem Aprender + +A noção de que você deve seguir um indivíduo para aprender sobre desenvolvimento front-end está lentamente se tornando sem sentido. Os profissionais avançados de desenvolvimento front-end geram conteúdo o suficiente que você pode simplesmente seguir a comunidade/líderes, prestando atenção às "notícias" de front-end (via [Newsletters, News, & Podcasts (Boletins Informativos, Notícias e Podcasts)](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/learning/news-podcasts.html)). \ No newline at end of file diff --git a/translations/pt_BR/aprendendo/automacao.md b/translations/pt_BR/aprendendo/automacao.md new file mode 100644 index 00000000..b237b667 --- /dev/null +++ b/translations/pt_BR/aprendendo/automacao.md @@ -0,0 +1,31 @@ +# Aprenda sobre Build e Automação de Tarefas + +> Automação de build é o processo de automatizar a criação de um build de software e o processo associado, incluindo: compilar código fonte em código binário, empacotar código binário e executar testes automatizados. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Automa%C3%A7%C3%A3o_de_compila%C3%A7%C3%A3o) + +##### Aprendizado geral: + +* [Getting Started with Gulp](https://www.amazon.com/Getting-Started-Gulp-Travis-Maynard/dp/1784395765?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=3eb1e7a868a09b44f90570c56ef5f53b&camp=1789&creative=9325) [leia][$] +* [Gulp Basics](http://teamtreehouse.com/library/gulp-basics) [assista][$] +* [JavaScript Build Automation With Gulp.js](http://www.pluralsight.com/courses/javascript-build-automation-gulpjs) [assista][$] + +##### Referências/Documentações: + +* [Gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) + +*** + +###### CONSELHO: + +O Gulp é ótimo. Porém, você pode apenas precisar do `npm run`. Antes de procurar complexidade adicional na stack da sua aplicação, pergunte a si mesmo se `npm run` consegue dar conta do trabalho. Caso precise de mais, use Gulp. + +Leia: + +* [Give Grunt the Boot! A Guide to Using npm as a Build Tool](http://www.sitepoint.com/guide-to-npm-as-a-build-tool/) +* [How to Use npm as a Build Tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) +* [Task Automation with npm Run](http://substack.net/task_automation_with_npm_run) +* [Using npm as a Build System for Your next Project](https://drublic.de/blog/npm-builds) +* [Using npm as a Task Runner](http://teamtreehouse.com/library/using-npm-as-a-task-runner) [watch][$] +* [Why I Left Gulp and Grunt for npm Scripts](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.z8plsoxxs) +* [Why npm Scripts?](https://css-tricks.com/why-npm-scripts/) \ No newline at end of file diff --git a/translations/pt_BR/aprendendo/browser-dev-tools.md b/translations/pt_BR/aprendendo/browser-dev-tools.md new file mode 100644 index 00000000..26c59555 --- /dev/null +++ b/translations/pt_BR/aprendendo/browser-dev-tools.md @@ -0,0 +1,31 @@ +# Aprendendo sobre Ferramentas de desenvolvimento Web + +> Ferramentas de desenvolvimento Web (conhecidas como _browser dev tools_) permitem o desenvolvedor testar e debugar seu código. Elas são diferentes de geradores de sites e IDE's: não ajudam na criação direta de uma página web. São ferramentas para testar como um usuário verá e irá interagir com a interface de um website ou uma aplicação web. + +> Ferramentas de desenvolvimento podem ser plugins de browsers ou ferramentas do próprio navegador. Atualmente os navegadores mais populares como o Google Chrome, Firefox, Opera, Internet Explorer e Safari possuem nativamente uma ferramenta que ajuda os desenvolvedores e muitos plugins que podem ser encontrados nas suas próprias "app stores". + +> Ferramentas de desenvolvimento permitem o desenvolvedor trabalhar com uma variedade de tecnologias da web, incluindo HTML, CSS, DOM, JavaScript e outros componentes que podem manipular o navegador. Devido a crescente demanda por navegadores para ganhar popularidade, eles incluem ferramentas cada vez melhores para os desenvolvedores. + +>— [Wikipedia](https://en.wikipedia.org/wiki/Web_development_tools) + +Enquanto muito navegadores vieram equipados com ferramentas de desenvolvimento web, as [Chrome developer tools (Ferramentas de desenvolvedores Chrome)](https://developers.google.com/web/tools/chrome-devtools/) são atualmente as mais discutidas e amplamente utilizadas. + +Eu sugiro aprender e usar as referências do [Chrome developer tools (Ferramentas de desenvolvedores Chrome)](https://developers.google.com/web/tools/chrome-devtools/), simplesmente porque é o melhor recurso para aprender sobre as ferramentas para desenvolvedores do Chrome. + +##### Aprenda sobre ferramentas de desenvolvedor: + +* [Chrome Developer Tools (Ferramentas de desenvolvedores do Chrome)](https://code.tutsplus.com/courses/chrome-developer-tools) :tv: :moneybag: +* [Explore and Master Chrome DevTools (Explore e domine as ferramentas de desenvolvedores do Chrome)](http://discover-devtools.codeschool.com/) +* [Mastering Chrome Developer Tools (Dominando as ferramentas de desenvolvedores do Chrome)](https://frontendmasters.com/courses/chrome-dev-tools/) :tv: :moneybag: +* [Using The Chrome Developer Tools (Usando as ferramentas de desenvolvedores do Chrome)](http://www.pluralsight.com/courses/chrome-developer-tools) :tv: :moneybag: + +##### Documentação de ferramentas de desenvolvimento: + +* [Command Line API Reference (Referências da API da linha de comando)](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference) +* [Keyboard & UI Shortcuts Reference (Referências de teclas de atalho para interface do usuário)](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts) +* [Per-Panel Documentation (Documentação de painel)](https://developers.google.com/web/tools/chrome-devtools/#docs) +* [Configure and Customize DevTools (Configure e customize ferramentas de desenvolvimento)](https://developer.chrome.com/devtools/docs/settings) + +##### Novidades/Newsletters/Podcasts/Tips: + +* [Dev Tips (Dicas de desenvolvimento)](https://umaar.com/dev-tips/) diff --git a/translations/pt_BR/aprendendo/bundlers-loaders-modulos.md b/translations/pt_BR/aprendendo/bundlers-loaders-modulos.md new file mode 100644 index 00000000..e21c0ce1 --- /dev/null +++ b/translations/pt_BR/aprendendo/bundlers-loaders-modulos.md @@ -0,0 +1,22 @@ +# Aprenda sobre Loaders/Bundlers de módulos JS + +##### Webpack: + +* [Webpack (Inglês)](https://webpack.js.org/) +* [Webpack Deep Dive (Inglês)](https://frontendmasters.com/courses/webpack/) :book: +* [Webpack Fundamentals (Inglês)](http://www.pluralsight.com/courses/webpack-fundamentals) :tv: :moneybag: +* [Survivejs.com Webpack Book (Inglês)](https://survivejs.com/webpack/introduction/) :book: + +##### Rollup: + +* [Rollup (Inglês)](http://rollupjs.org/guide/) + +##### SystemJS: + +* [Modern, Modular JavaScript with SystemJS and jspm (Inglês)](https://app.pluralsight.com/library/courses/javascript-systemjs-jspm/table-of-contents) :tv: :moneybag: + +*** + +###### NOTAS: + +Não é incomum que desenvolvedores usem ferramentas como Gulp para fazer bundles de módulos JS. Porém, vários dos plugins do Gulp usam Webpack, Rollup ou SystemJS debaixo do capô. diff --git a/translations/pt_BR/aprendendo/cli.md b/translations/pt_BR/aprendendo/cli.md new file mode 100644 index 00000000..6388b9cc --- /dev/null +++ b/translations/pt_BR/aprendendo/cli.md @@ -0,0 +1,17 @@ +# Aprenda sobre Linha de Comando + +> Uma linha de comando (em inglês command-line interface, abreviado em inglês CLI) é um meio de interagir com um programa de computador, onde o utilizador (ou cliente) emite comandos para o programa sob a forma de sucessivas linhas de texto (linhas de comando). + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Linha_de_comandos) + +##### Aprendizagem Geral: + +* [The Bash Guide (Inglês)](http://guide.bash.academy/) :book: +* [Codecademy: Learn the Command Line (Inglês)](https://www.codecademy.com/courses/learn-the-command-line) :tv: +* [Command Line Power User (Inglês)](http://commandlinepoweruser.com/) :tv: +* [Learn Enough Command Line to Be Dangerous (Inglês)](http://www.learnenough.com/command-line-tutorial) :book: :free: to :moneybag: +* [Meet the Command Line (Inglês)](http://www.pluralsight.com/courses/meet-command-line) :tv: :moneybag: + +##### Dominando: + +* [Advanced Command Line Techniques (Inglês)](https://code.tutsplus.com/courses/advanced-command-line-techniques) :tv: :moneybag: diff --git a/translations/pt_BR/aprendendo/controle-versao.md b/translations/pt_BR/aprendendo/controle-versao.md new file mode 100644 index 00000000..3288839c --- /dev/null +++ b/translations/pt_BR/aprendendo/controle-versao.md @@ -0,0 +1,25 @@ +# Aprenda sobre Controle de Versão + +> Um componente de gerenciamento de configuração de software, controle de versão, também conhecido como controle de revisão ou controle de fonte, é o gerenciamento de mudanças em documentos, programas, grandes sites e outras coleções de informação. Mudanças costumam ser identificadas por um número ou código de letra, chamado "número de revisão", "nível de revisão" ou simplesmente "revisão". Por exemplo, um conjunto inicial de arquivos é "revisão 1". Quando a primeira mudança é feita, o conjunto resultante é "revisão 2", e assim por diante. Cada revisão é associada com um timestamp e a pessoa que fez a mudança. Revisões podem ser comparadas, salvas e com alguns tipos de aquivos, mescladas (merged). + +>— [Wikipedia](https://en.wikipedia.org/wiki/Version_control) + +A solução moderna atual para controle de versão é o [Git](https://git-scm.com/). Aprenda-o! + +##### Aprendizado Geral: + +* [codeschool.com (Inglês)](https://try.github.io/levels/1/challenges/1) :computer: +* [Getting Git Right (Inglês)](https://www.atlassian.com/git/) :book: +* [Git Fundamentals (Inglês)](http://www.pluralsight.com/courses/git-fundamentals) :tv: :moneybag: +* [learn Enough Git (Inglês)](https://www.learnenough.com/git-tutorial) :book: +* [Ry's Git Tutorial (Inglês)](http://rypress.com/tutorials/git/introduction) :book: + +##### Dominando: + +* [Advanced Git Tutorials (Inglês)](https://www.atlassian.com/git/tutorials/advanced-overview/) :book: +* [Pro Git (Inglês)](http://git-scm.com/book/en/v2) :book: +* [Learn Git Branching](http://learngitbranching.js.org/) :computer: + +##### Referências/Documentações: + +* [https://git-scm.com/doc (Inglês)](https://git-scm.com/docs) diff --git a/translations/pt_BR/aprendendo/cs.md b/translations/pt_BR/aprendendo/cs.md new file mode 100644 index 00000000..b083210b --- /dev/null +++ b/translations/pt_BR/aprendendo/cs.md @@ -0,0 +1,6 @@ +# Aprenda sobre Ciência da Computação com JS + +* [Four Semesters of Computer Science in Six Hours (Inglês)](https://frontendmasters.com/workshops/computer-science/) :tv: :moneybag: +* [Computer Science in JavaScript (Inglês)](https://github.com/davidshariff/computer-science) :book: +* [Collection of classic computer science paradigms, algorithms, and approaches written in JavaScript (Inglês)](https://github.com/nzakas/computer-science-in-javascript) :book: +* [Algorithms and Data Structures in JavaScript (Inglês)](https://frontendmasters.com/workshops/algorithms-data-structures-js/) :tv: :moneybag: diff --git a/translations/pt_BR/aprendendo/cursos.md b/translations/pt_BR/aprendendo/cursos.md new file mode 100644 index 00000000..ae239d3a --- /dev/null +++ b/translations/pt_BR/aprendendo/cursos.md @@ -0,0 +1,96 @@ +# Escolas, cursos e Bootcamps de Front-End + +A tabela abaixo contém cursos, programas, escolas e bootcamps sobre front-end, liderados por instrutores e pagos. + +Se você não puder custear educação direcionada, educação auto-direcionada utilizando screencasts, livros e artigos é uma alternativa viável para aprender desenvolvimento front-end para o indivíduo autodidata. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
empresacursopreçolocalremoto
BetamoreFront-end Web Development$ 8.500Baltimore, MD
BLOCBecome a Frontend Developer$ 5,000sim
DecodeMTLLearn Front-end Web Development$ 2.500Montreal, QC
The Flatiron SchoolIntroduction to Front-End Web Development$ 3.500New York, NY
General AssemblyFrontend Web Development$ 3,500vários locais
HackerYouFront-end Web Development Immersive$ 7.000 - $ 7.910Toronto, Canada
Iron YardFront End Engineering$ 12.000vários locais
The New York Code + Design AcademyFront End 101$ 2.000New York, NY
ThinkfulFrontend Web Development$ 300 por mêssim
Turing School of Software & DesignFront-End Engineering$ 20.000sim
UdacityNanodegree de Desenvolvedor Web Front-EndR$ 400 por mêsvários locaissim
diff --git a/translations/pt_BR/aprendendo/direcionado-autodidata.md b/translations/pt_BR/aprendendo/direcionado-autodidata.md new file mode 100644 index 00000000..ca4ee090 --- /dev/null +++ b/translations/pt_BR/aprendendo/direcionado-autodidata.md @@ -0,0 +1,24 @@ +# Aprendizado Direcionado Autodidata + +Esta seção é focada em fontes gratuitas ou pagas (treinamentos em vídeo, livros, etc.) que um indivíduo pode utilizar para direcionar seu próprio processo de aprendizagem e carreira como um desenvolvedor front-end. + +As fontes de aprendizagem mencionadas irão incluir tanto materiais gratuitos quanto materiais pagos. Os materiais pagos serão indicados por [$]. + +O autor acredita que qualquer um com uma determinação e dedicação correta pode ensinar a si mesmo como ser um desenvolvedor front-end. Tudo o que é necessário é um computador conectado a internet e algum dinheiro para livros e treinamento online por vídeo. + +Geralmente recomendo extrair conteúdo das lojas de aprendizagem (focadas em tecnologia) que estão listadas abaixo: + +* [codecademy.com (Português)](https://www.codecademy.com/pt-BR/learn/all) +* [codeschool.com (Inglês)](https://www.codeschool.com/) +* [egghead.io (Inglês)](https://egghead.io/) +* [eventedmind.com (Inglês)](https://www.eventedmind.com/) +* [Frontend Masters (Inglês)](https://frontendmasters.com/) +* [Freecodecamp (Inglês)](https://www.freecodecamp.com) +* [Khan Academy (Português)](https://pt.khanacademy.org/computing/computer-programming) +* [laracasts.com (Inglês)](https://laracasts.com/) +* [lynda.com (Inglês)](http://www.lynda.com/) [cuidado, qualidade varia] +* [mijingo.com (Inglês)](https://mijingo.com/) +* [pluralsight.com (Inglês)](http://www.pluralsight.com/) [cuidado, qualidade varia] +* [Treehouse (Inglês)](https://teamtreehouse.com/) +* [tutsplus.com (Inglês)](https://tutsplus.com/courses) +* [Udacity (Português)](https://br.udacity.com/courses/all/) [cuidado, qualidade varia] diff --git a/translations/pt_BR/aprendendo/direcionado.md b/translations/pt_BR/aprendendo/direcionado.md new file mode 100644 index 00000000..9a7e6398 --- /dev/null +++ b/translations/pt_BR/aprendendo/direcionado.md @@ -0,0 +1,3 @@ +# Aprendizado Direcionado + +Esta seção foca em aprendizado direcionado por meio de escolas, cursos, programas e bootcamps. diff --git a/translations/pt_BR/aprendendo/dns.md b/translations/pt_BR/aprendendo/dns.md new file mode 100644 index 00000000..0932588d --- /dev/null +++ b/translations/pt_BR/aprendendo/dns.md @@ -0,0 +1,13 @@ +# Aprenda sobre DNS + +> O Domain Name System (DNS) é um sistema de gerenciamento de nomes hierárquico e distribuído para computadores, serviços ou qualquer recurso conectado à Internet ou numa rede privada. Baseia-se em nomes hierárquicos e permite a inscrição de vários dados digitados além do nome do host e seu IP. O DNS é um componente essencial para o funcionamento da maioria dos serviços da Internet pois é o dirtetório primário de serviço da Internet. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Domain_Name_System) + +![](../images/dns.jpg "http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg") + +Fonte da imagem: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg + +* [DNS Explicado (Inglês)](https://www.youtube.com/watch?v=72snZctFFtA) [assista] +* [Como Funciona o DNS (Inglês)](https://howdns.works/ep1/) [leia] +* [A Internet: Endereços IP e DNS (Inglês)](https://www.youtube.com/watch?v=5o8CwafCxnU&index=3&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7) [assista] \ No newline at end of file diff --git a/translations/pt_BR/aprendendo/dom-bom-jquery.md b/translations/pt_BR/aprendendo/dom-bom-jquery.md new file mode 100644 index 00000000..89e40157 --- /dev/null +++ b/translations/pt_BR/aprendendo/dom-bom-jquery.md @@ -0,0 +1,53 @@ +# Aprenda DOM, BOM, & jQuery + +> **DOM** - O Modelo de Objeto de Documento (DOM) é uma convenção cross-plataforma e independente de linguagem, que representa e interage com objetos em documentos HTML, XHTML e XML. Os nós de cada documento são organizados em uma estrutura em árvore, chamada árvore DOM. Objetos na árvore DOM podem ser referenciados e manipulados através do uso de métodos nesses objetos. A interface pública do DOM é especificada na sua Interface de Programação de Aplicativos (API). + +>— [Wikipedia](https://en.wikipedia.org/wiki/Document_Object_Model) + +> **BOM** - O Modelo de Objeto do Navegador (BOM) é uma convenção específica para navegadores referente a todos os objetos expostos pelo navegador. Diferente do DOM, não há padrão para implementação nem definição estrita, então empresas que disponibilizam os navegadores ficam livres para implementar o BOM da maneira que acharem melhor. + +>— [Wikipedia](https://en.wikipedia.org/wiki/Browser_Object_Model) + +> **jQuery** - jQuery é uma biblioteca JavaScript cross-plataforma desenvolvida para simplificar a programação client-side do HTML. jQuery é a biblioteca JavaScript mais popular em uso atualmente, instalada em 65% dos 10 milhões de sites mais navegados da rede. É um programa gratuito, de código aberto, licenciado pela MIT License. + +>— [Wikipedia](https://en.wikipedia.org/wiki/JQuery) + +O caminho ideal, e certamente mais difícil, seria aprender primeiro JavaScript, então DOM, para depois aprender jQuery. No entanto, faça o que mais fizer sentido para você. A maioria dos desenvolvedores front-end aprende JavaScript e DOM através do aprendizado de jQuery. Qualquer que seja o caminho que você siga, certifique-se de conhecer e estudar JavaScript, DOM e jQuery. + +##### Aprendizado Geral: + +* [Codecademy.com jQuery](https://www.codecademy.com/tracks/jquery) [assista] +* [The Document Object Model](http://eloquentjavascript.net/13_dom.html) [leia] +* [HTML/JS: Making Webpages Interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js) [assista] +* [HTML/JS: Making Webpages Interactive with jQuery](https://www.khanacademy.org/computing/computer-programming/html-js-jquery) [assista] +* [jQuery Enlightenment](http://jqueryenlightenment.com/) [leia] + +##### Dominando: + +* [AdvancED DOM Scripting: Dynamic Web Design Techniques](http://www.amazon.com/gp/product/1590598563/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1590598563&linkCode=as2&tag=fronenddevejo-20&linkId=VQZU5EQIQQXCF56Y) [leia][$] +* [Advanced JS Fundamentals to jQuery & Pure DOM Scripting](https://frontendmasters.com/courses/javascript-jquery-dom/) [assista][$] +* [Douglas Crockford: An Inconvenient API - The Theory of the DOM](https://www.youtube.com/watch?v=Y2Y0U-2qJMs&list=PL5586336C26BDB324&index=2) [assista] +* [DOM Enlightenment](http://www.amazon.com/DOM-Enlightenment-Cody-Lindley/dp/1449342841/) [leia][$] or [rleia online de graça](http://domenlightenment.com/) +* [Fixing Common jQuery Bugs](http://www.pluralsight.com/courses/fixing-common-jquery-bugs) [assista][$] +* [jQuery-Free JavaScript](http://www.pluralsight.com/courses/jquery-free-javascript) [assista][$] +* [jQuery Tips and Tricks](http://www.pluralsight.com/courses/jquery-tips-and-tricks) [assista][$] + +##### Referências/Documentos: + +* [jQuery Docs](http://api.jquery.com/) +* [Events](https://html.spec.whatwg.org/#events-2) +* [DOM Browser Support](http://www.webbrowsercompatibility.com/dom/desktop/) +* [DOM Events Browser Support](http://www.webbrowsercompatibility.com/dom-events/desktop/) +* [HTML Interfaces Browser Support](http://www.webbrowsercompatibility.com/html-interfaces/desktop/) +* [MDN Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) +* [MDN Browser Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Window) +* [MDN Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) +* [MDN Event reference](https://developer.mozilla.org/en-US/docs/Web/Events) +* [MSDN Document Object Model (DOM)](https://msdn.microsoft.com/en-us/library/hh772384%28v=vs.85%29.aspx) + +##### Padrões/Especificações: + +* [Document Object Model (DOM) Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/) +* [Document Object Model (DOM) Technical Reports](http://www.w3.org/DOM/DOMTR) +* [DOM Living Standard](https://dom.spec.whatwg.org/) +* [W3C DOM4](https://www.w3.org/TR/2015/REC-dom-20151119/) diff --git a/translations/pt_BR/aprendendo/estaticos.md b/translations/pt_BR/aprendendo/estaticos.md new file mode 100644 index 00000000..ad848002 --- /dev/null +++ b/translations/pt_BR/aprendendo/estaticos.md @@ -0,0 +1,7 @@ +# Aprenda sobre Geradores de Site Estático + +Geradores de site estático, tipicamente escritos usando código do lado do servidor (isto é, ruby, php, python, nodeJS, etc.), produzem arquivos HTML estáticos a partir de texto estático/dados + modelos que se destinam a ser enviados do servidor para o cliente estaticamente sem uma natureza dinâmica. + +##### Aprendizagem Geral: + +* [Static Site Generators (Geradores de Site Estático)](http://www.oreilly.com/web-platform/free/static-site-generators.csp) [Ler] diff --git a/translations/pt_BR/aprendendo/front-end-apps.md b/translations/pt_BR/aprendendo/front-end-apps.md new file mode 100644 index 00000000..93e963b7 --- /dev/null +++ b/translations/pt_BR/aprendendo/front-end-apps.md @@ -0,0 +1,52 @@ +# Aprenda sobre Arquitetura de Aplicações Front-end + +##### Aprendizagem Geral: 1 + +* [JavaScript Application Design (Inglês)](https://www.amazon.com.br/JavaScript-Application-Design-Build-Approach/dp/1617291951/ref=sr_1_2?ie=UTF8&qid=1492706514&sr=8-2&keywords=Nicolas+Bevacqua) :book: :moneybag: +* [Programming JavaScript Applications (Inglês)](http://chimera.labs.oreilly.com/books/1234000000262/index.html) :book: + +##### Material de Aprendizagem Desatualizado: + +* [Build an App with React and Ampersand (Inglês)](http://learn.humanjavascript.com/react-ampersand) :tv: :moneybag: +* [Building Modern Single-Page Web Applications (Inglês)](https://frontendmasters.com/courses/modern-web-apps/) :tv: :moneybag: +* [JavaScript Eloquente - 2ª edição: Módulos](https://github.com/braziljs/eloquente-javascript/blob/master/chapters/10-modulos.md) :book: +* [A Field Guide to Static Apps (Inglês)](http://www.staticapps.org/) :book: +* [Field Guide to Web Applications (Inglês)](http://www.html5rocks.com/webappfieldguide/toc/index/) :book: +* [Frontend Guidelines Questionnaire (Inglês)](https://github.com/bradfrost/frontend-guidelines-questionnaire) :book: +* [Human JavaScript (Inglês)](http://read.humanjavascript.com/) :book: +* [Nicholas Zakas: Scalable JavaScript Application Architecture (Inglês)](https://www.youtube.com/watch?v=vXjVFPosQHw) :tv: +* [Organizing JavaScript Functionality (Inglês)](https://frontendmasters.com/courses/organizing-javascript/) :tv: :moneybag: +* [Patterns for Large-Scale JavaScript Application Architecture (Inglês)](http://addyosmani.com/largescalejavascript/) :book: +* [Terrific (Inglês)](http://terrifically.org/) :book: +* [UI Architecture (Inglês)](http://www.pluralsight.com/courses/web-ui-architecture) :tv: :moneybag: +* [Web UI Architecture (Inglês)](https://frontendmasters.com/courses/web-ui-architecture/) :tv: :moneybag: + +*** + +###### NOTAS: + +Não existe muito conteúdo geral sendo criado sobre esse tópico ultimamente. A maioria do conteúdo oferecido para aprender a construir aplicações front-end/SPA/JavaScript pressupõe que você escolheu uma ferramenta como Angular, Ember, React ou Aurelia. + +*** + +###### CONSELHO: + +1 Em 2017 aprenda [Webpack](https://webpack.js.org/), [React](https://facebook.github.io/react/) e [Redux](http://redux.js.org/). Comece com, ["A Complete Intro to React"](https://btholt.github.io/complete-intro-to-react/) e ["Building Applications with React and Redux in ES6"](https://app.pluralsight.com/library/courses/react-redux-react-router-es6/table-of-contents). + +*** + +###### RESULTADOS DE PESQUISAS: + +As imagens abaixo são da [2016 Frontend Tooling Survey (Pesquisa Sobre Ferramentas Frontend 2016)](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results) (4715 desenvolvedores) e da [2016 State of JS Survey (Pesquisa Sobre o Estado do JS 2016)](http://stateofjs.com/) (9307 desenvolvedores) + +![](../images/q13.jpg "https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results") + +Fonte da imagem: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results + +![](../images/frameworks1.png "http://stateofjs.com/") + +Fonte da imagem: http://stateofjs.com/ + +![](../images/frameworks2.png "http://stateofjs.com/") + +Fonte da imagem: http://stateofjs.com/ diff --git a/translations/pt_BR/aprendendo/front-end.md b/translations/pt_BR/aprendendo/front-end.md new file mode 100644 index 00000000..0a55e29d --- /dev/null +++ b/translations/pt_BR/aprendendo/front-end.md @@ -0,0 +1,40 @@ +# Aprenda Sobre Front-End de Maneira Geral + +##### Aprendizagem Geral: + +* [A Baseline for Front-End [JS] Developers: 2015 (Uma Linha de Base para Desenvolvedores Front-End [JS]: 2015)](http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/) [Ler] +* [Become a Front-End Web Developer (Torne-se um Desenvolvedor Web Front-End)](https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer) [Assistir][$] +* [Being a web developer (Ser um desenvolvedor web)](http://www.yellowshoe.com.au/standards) [Ler] +* [Foundations of Front-End Web Development (Fundamentos de Desenvolvimento Web Front-End)](https://www.udemy.com/foundations-of-front-end-development/) [Assistir][$] +* [freeCodeCamp](http://freecodecamp.com/) [Interagir] +* [Front-End Curriculum (Currículo de Front-End)](https://gist.github.com/stevekinney/03027e71aac341af14a2) [Ler] +* [Front-End Dev Mastery (Domínio de Desenvolvedor Front-End)](https://mijingo.com/products/bundles/front-end-dev-mastery/) [Assistir][$] +* [Front-End Web Developer Nanodegree (Nanocertificado de Desenvolvedor Web Front-End)](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001) [Assistir][$] +* [Front End Web Development Career Kickstart (Pontapé Inicial para Carreira de Desenvolvimento Front End)](http://www.pluralsight.com/courses/front-end-web-development-career-kickstart) [Assistir][$] +* [Front End Web Development: Get Started (Desenvolvimento Web Front End: Iniciar)](http://www.pluralsight.com/courses/front-end-web-development-get-started) [Assistir][$] +* [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript (Início Rápido de Desenvolvimento Web Front-End Com HTML5, CSS e JavaScript)](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [Assistir][$] +* [Front-End Web Development: The Big Nerd Ranch Guide (Desenvolvimento Web Front-End: O Guia do Big Nerd Ranch)](https://www.amazon.com/Front-End-Web-Development-Ranch-Guide/dp/0134433947/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=06802d4e42ca55b03294779c960d0826&camp=1789&creative=9325) [Ler][$] +* [Frontend Guidelines (Linhas de Base de Frontend)](https://github.com/bendc/frontend-guidelines) [Ler] +* [Introduction to Web Development (Introdução ao Desenvolvimento Web)](https://frontendmasters.com/courses/web-development/) [Assistir][$] +* [Isobar Front-End Code Standards (Padrões de Código Front-End da Isobar)](http://isobar-idev.github.io/code-standards/) [Ler] +* [Lean Front-End Engineering (Engenharia de Front-End Enxuta)](https://frontendmasters.com/courses/lean-front-end-engineering/) [Assistir][$] +* [Learn Front End Web Development (Aprenda Sobre Desenvolvimento Web Front End)](https://teamtreehouse.com/tracks/front-end-web-development) [Assistir][$] +* [Planning a Front-End JS Application (Planejando o Front-End de uma Aplicação JS)](https://www.youtube.com/watch?v=q4zEGkjTBFA) [Assistir] +* [So, You Want to Be a Front-End Engineer (Então, Você Quer Ser um Engenheiro Front-End)](https://www.youtube.com/watch?v=Lsg84NtJbmI) [Assistir] + +##### Boletins Informativos, Notícias & Podcasts Sobre Front-End em Geral + +* [The Big Web Show (O Grande Web Show)](http://5by5.tv/bigwebshow) +* [Front-End Dev Weekly (Desenvolvimento Front-End Semanal)](http://frontenddevweekly.com/) +* [Front End Happy Hour (Hora Feliz do Front-End)](http://frontendhappyhour.com/) +* [Front-End News in 5 Minutes (Notícias de Front-End em 5 Minutos)](https://frontendfive.codeschool.com/) +* [frontendfront.com](http://frontendfront.com/) +* [FrontEnd Focus (Foco FrontEnd)](http://frontendfocus.co/) +* [Front End Newsletter (Boletim Informativo de Front End)](http://frontendnewsletter.com/) +* [Mobile Web Weekly (Web Móvel Semanal)](http://mobilewebweekly.co/) +* [Open Web Platform Daily Digest (Diário de Plataforma Web Aberta)](http://webplatformdaily.org/) +* [Pony Foo Weekly (Pequeno Foo Semanal)](https://ponyfoo.com/weekly) +* [shoptalkshow.com](http://shoptalkshow.com/) +* [The Web Ahead (A Web Adiante)](http://thewebahead.net/) +* [The Web Platform Podcast (O Podcast da Plataforma Web)](http://thewebplatform.libsyn.com/) +* [webtoolsweekly.com](http://webtoolsweekly.com/) diff --git a/translations/pt_BR/aprendendo/gerenciador-pacotes.md b/translations/pt_BR/aprendendo/gerenciador-pacotes.md new file mode 100644 index 00000000..5c54053b --- /dev/null +++ b/translations/pt_BR/aprendendo/gerenciador-pacotes.md @@ -0,0 +1,13 @@ +# Aprenda Sobre Gerencidadores de Pacotes + +> Um gerenciador de pacotes ou um sistema de gerenciamento de pacotes é uma coleção de ferramentas de software que automatizam o processo de instalação, atualização, configuração e remoção de pacotes de softwares para um sistema operacional de computador de forma consistente. Ele normalmente mantém uma base de dados das dependências de software e informações de versão para previnir incompatibilidades de software e a falta de pré-requisitos. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Sistema_gestor_de_pacotes) + +##### Aprendizagem Geral: + +* [An introduction to how JavaScript package managers work (Uma introdução de como gerenciadores de pacotes JavaScript funcionam](https://medium.freecodecamp.com/javascript-package-managers-101-9afd926add0a#.hu6knvct3) +* [The Mystical & Magical SemVer Ranges Used By npm & Bower (As Místicas & Mágicas Escalas de SemVer Usadas por npm & Bower )](http://developer.telerik.com/featured/mystical-magical-semver-ranges-used-npm-bower/) [Ler] +* [Package Managers: An Introductory Guide For The Uninitiated Front-End Developer (Gerenciadores de Pacotes: Um Guia Introdutório Para O Desenvolvedor Front-End Sem Experiência)](http://codylindley.com/techpro/2013_04_12__package-managers-an-introducto/) [Ler] +* [Documentação do npm](https://docs.npmjs.com/) +* [Documentação do yarn](https://yarnpkg.com/pt-BR/docs) \ No newline at end of file diff --git a/translations/pt_BR/aprendendo/hospedagem.md b/translations/pt_BR/aprendendo/hospedagem.md new file mode 100644 index 00000000..e2b5119e --- /dev/null +++ b/translations/pt_BR/aprendendo/hospedagem.md @@ -0,0 +1,16 @@ +# Aprenda sobre Hospedagem Web + +> Um serviço de hospedagem web é um tipo de serviço que permite indivíduos e organizações tornarem seu site acessível através da Internet. Hospedagens web são companhias que disponibilizam espaço em um servidor próprio ou alugado para a utilização de seus clientes, assim como fornecer conectividade de Internet, normalmente em um data center. Hospedagens web também podem fornecer espaço de centro de dados e conectividade à Internet para outros servidores localizados em seu data center, chamado colocation (compartilhamento de localização), também conhecido como _Housing_ na América Latina ou França. + +>— [Wikipedia (Inglês)](https://en.wikipedia.org/wiki/Web_hosting_service) + +![](../images/host.jpg "http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg") + +Fonte: http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg + + +##### Aprendizagem Geral: + +* [Ultimate Guide to Web Hosting (Guia Definitivo para Hospedagem Web)](http://www.whoishostingthis.com/resources/web-hosting/) [Ler] +* [Web Hosting Beginner Guide (Guia Iniciante de Hospedagem Web)](http://www.webhostingsecretrevealed.net/web-hosting-beginner-guide/) [Ler] +* [Web Hosting for Dummies (Hospedagem Web para Leigos)](https://www.amazon.com/Web-Hosting-Dummies-Peter-Pollock/dp/1118540573/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=d8b16eea88eeb2d332f7f8508dce1df0&camp=1789&creative=9325) [Ler][$] diff --git a/translations/pt_BR/aprendendo/html-css.md b/translations/pt_BR/aprendendo/html-css.md new file mode 100644 index 00000000..bc89e366 --- /dev/null +++ b/translations/pt_BR/aprendendo/html-css.md @@ -0,0 +1,94 @@ +# Aprenda HTML e CSS + +> **HTML** - HTML (abreviação para a expressão em inglês HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada na construção de páginas na Web. Navegadores podem ler arquivos HTML e renderizá-los em páginas web visíveis ou audíveis. O HTML descreve a estrutura de um site semanticamente sugerindo apresentação, fazendo do HTML uma linguagem de marcação ao invés de uma linguagem de programação. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/HTML) + +> **CSS** - Cascading Style Sheets (CSS) é um simples mecanismo para adicionar estilo (cores, fontes, espaçamento etc) a um documento web. Embora o CSS seja mais utilizado para alterar o estilo de páginas e interfaces de usuários escritas em HTML e XHTML, a linguagem pode ser aplicada a qualquer tipo de documento XML, incluindo XML simples, SVG e XUL. Juntamente com HTML e JavaScript, CSS é o pilar tecnológico utilizado pela maioria dos sites para criar páginas visualmente criativas e envolventes, interfaces de usuário para aplicações web e interfaces de usuário para diversas aplicações mobile. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Cascading_Style_Sheets) + +Semelhante a construção de uma casa, pode-se considerar HTML como a base estrutural e CSS como a pintura e decoração. + +##### Aprendizagem Geral: + +* [Absolute Centering in CSS (Inglês)](http://codepen.io/shshaw/full/gEiDt) :book: +* [codecademy.com HTML & CSS](https://www.codecademy.com/learn/web) :computer: +* [CSS Positioning (Inglês)](http://www.pluralsight.com/courses/css-positioning-1834) :tv: :moneybag: +* [Front End Web Development: Get Started (Inglês)](http://www.pluralsight.com/courses/front-end-web-development-get-started) :tv: :moneybag: +* [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript (Inglês)](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) :tv: :moneybag: +* [HTML e CSS Projete e Construa Websites](https://www.amazon.com.br/HTML-CSS-Projete-Construa-Websites/dp/8576089394/ref=sr_1_1?ie=UTF8&qid=1492274401&sr=8-1&keywords=Jon+Duckett) :book: :moneybag: +* [HTML Document Flow (Inglês)](http://www.pluralsight.com/courses/html-document-flow-1837) :tv: :moneybag: +* [HTML Mastery: Semantics, Standards, and Styling (Inglês)](https://www.amazon.com.br/HTML-Mastery-Semantics-Standards-Styling/dp/1590597656/ref=sr_1_2?s=books&ie=UTF8&qid=1492274462&sr=1-2&keywords=Paul+Haine+html) :book: :moneybag: +* [Interneting is Hard (Inglês)](https://internetingishard.com/) :book: +* [IIntrodução a HTML/CSS: criação de páginas Web](https://pt.khanacademy.org/computing/computer-programming/html-css) :tv: +* [Learn to Code HTML & CSS (Inglês)](http://learn.shayhowe.com/html-css/) :book: +* [Aprenda Layout com CSS](http://pt-br.learnlayout.com/) :book: +* [MarkSheet (Inglês)](http://marksheet.io/) :book: +* [Semantic HTML: How to Structure Web Pages (Inglês)](https://webdesign.tutsplus.com/courses/semantic-html-how-to-structure-web-pages) :tv: +* [Solid HTML Form Structure (Inglês)](https://webdesign.tutsplus.com/courses/solid-html-form-structure) :tv: +* [Understanding the CSS Box Model (Inglês)](https://webdesign.tutsplus.com/courses/understanding-the-css-box-model) :tv: +* [Resilient Web Design (Inglês)](https://resilientwebdesign.com/) :book: + +##### Dominando CSS: + +* [A Complete Guide to Flexbox (Inglês)](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) :book: +* [CSS Diner (Inglês)](http://flukeout.github.io/) :computer: +* [CSS Selectors from CSS4 till CSS1 (Inglês)](http://css4-selectors.com/selectors/) :book: +* [CSS Secrets: Better Solutions to Everyday Web Design Problems (Inglês)](https://www.amazon.com.br/CSS-Secrets-Solutions-Everyday-Problems-ebook/dp/B0131MQ1NS/ref=sr_1_1?s=books&ie=UTF8&qid=1492274885&sr=1-1&keywords=Lea+Verou) :book: :moneybag: +* [CSS3](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS3) :book: +* [CSS3 In-Depth (Inglês)](https://frontendmasters.com/courses/css3-in-depth/) :tv: :moneybag: +* [What the Flexbox?! A Simple, Free 20 Video Course That Will Help You Master CSS Flexbox (Inglês)](http://flexbox.io/) :tv: + +##### Referências/Documentações: + +* [CSS Triggers...a Game of Layout, Paint, and Composite (Inglês)](http://csstriggers.com/) +* [cssreference.io (Inglês)](http://cssreference.io/) +* [cssvalues.com (Inglês)](http://cssvalues.com/) +* [Default CSS for Chrome Browser (Inglês)](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) +* [Head - A list of everything that could go in the of your document (Inglês)](http://gethead.info/) +* [Referência Atributos HTML](https://developer.mozilla.org/pt-BR/docs/HTML/Attributes) +* [Referência CSS do MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference) +* [Referência Elementos HTML do MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element) + +##### Glossário: + +* [CSS Glossary - Programming Reference for CSS Covering Comments, Properties, and Selectors (Inglês)](https://www.codecademy.com/articles/glossary-css) +* [HTML Glossary Programming Reference for HTML elements (Inglês)](https://www.codecademy.com/articles/glossary-html) + +##### Padrões/Especificações: + +* [All W3C CSS Specifications (Inglês)](http://www.w3.org/Style/CSS/current-work#roadmap) +* [All W3C HTML Spec (Inglês)](http://www.w3.org/standards/techs/html#w3c_all) +* [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification (Inglês)](https://drafts.csswg.org/css2/) +* [CSS Indexes - A listing of every term defined by CSS specs (Inglês)](https://drafts.csswg.org/indexes/) +* [The Elements of HTML from the Living Standard (Inglês)](https://html.spec.whatwg.org/multipage/semantics.html#semantics) +* [Atributos Globais](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes) +* [The HTML Syntax (Inglês)](https://html.spec.whatwg.org/multipage/syntax.html#syntax) from the Living Standard +* [HTML 5.2 from W3C (Inglês)](http://w3c.github.io/html/) +* [Seletores Nível 3](http://maujor.com/w3c/W3C-REC-Seletores-CSS3.html) + +##### Arquitetando CSS: + +* [Atomic Design (Inglês)](http://atomicdesign.bradfrost.com/) :book: +* [BEM (Inglês)](http://getbem.com/introduction/) +* [ITCSS (Inglês)](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) +* [OOCSS (Inglês)](http://oocss.org/) :book: +* [SMACSS (Inglês)](https://smacss.com/) :book: :moneybag: + * [Scalable Modular Architecture for CSS (SMACSS) (Inglês)](https://frontendmasters.com/courses/smacss/) :tv: :moneybag: +* [SUIT CSS (Inglês)](http://suitcss.github.io) +* [rscss (Inglês)](http://rscss.io/) + +##### Convenções de Criação/Arquitetura: + +* [CSS code guide (Inglês)](http://codeguide.co/#css) :book: +* [8 regras simples para uma arquitetura CSS robusta e escalável](https://medium.com/tableless/8-regras-simples-para-uma-arquitetura-css-robusta-e-escal%C3%A1vel-545c6dade170) +* [cssguidelin.es (Inglês)](http://cssguidelin.es/) :book: +* [Princípios para escrever CSS de forma consistente e idiomática](https://github.com/necolas/idiomatic-css/tree/master/translations/pt-BR) :book: +* [MaintainableCSS (Inglês)](http://maintainablecss.com/) :book: +* [Standards for Developing Flexible, Durable, and Sustainable HTML and CSS (Inglês)](http://mdo.github.io/code-guide/) :book: + +##### Newsletters HTML/CSS: + +* [CSS Weekly (Inglês)](http://css-weekly.com/archives/) +* [Frontend Focus (Inglês)](http://frontendfocus.co/) diff --git a/translations/pt_BR/aprendendo/http-redes.md b/translations/pt_BR/aprendendo/http-redes.md new file mode 100644 index 00000000..cc8959c9 --- /dev/null +++ b/translations/pt_BR/aprendendo/http-redes.md @@ -0,0 +1,49 @@ +# Aprenda sobre HTTP/Redes + +> **HTTP** - O Hypertext Transfer Protocol (HTTP), em português Protocolo de Transferência de Hipertexto, é um protocolo de comunicação utilizado para sistemas de informação de hipermídias distribuídas e colaborativas. Ele é a base para a comunicação de dados da World Wide Web. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Hypertext_Transfer_Protocol) + +> **CORS** - Cross-origin resource sharing (CORS) (ou compartilhamento de recursos de origem cruzada) é uma especificação de uma tecnologia de navegadores que define meios para um servidor permitir que seus recursos sejam acessados por uma página web de um domínio diferente. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Cross-origin_resource_sharing) + +> **WebSockets** - WebSocket é uma tecnologia que permite a comunicação bidirecional por canais full-duplex sobre um único soquete Transmission Control Protocol (TCP). O procotolo WebSocket foi padronizado pela IETF como a RFC 6455 em 2011 e a API WebSocket na Web IDL está sendo padronizada pelo W3C. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/WebSocket) + +##### Especificações do HTTP + +* [HTTP/2 (Inglês)](https://http2.github.io/) +* [Hypertext Transfer Protocol -- HTTP/1.1 (Inglês)](https://tools.ietf.org/html/rfc2616) + +##### HTTP + +* [High Performance Browser Networking: What every web developer should know about networking and web performance (Inglês)](https://hpbn.co/) :book: +* [HTTP: The Definitive Guide (Definitive Guides) (Inglês)](https://www.amazon.com.br/HTTP-Definitive-Guide-Guides-ebook/dp/B0043D2EKO/ref=sr_1_2?ie=UTF8&qid=1492019409&sr=8-2&keywords=http) :book: :moneybag: +* [HTTP/2 FAQ (Inglês)](https://http2.github.io/faq/#what-are-the-key-differences-to-http1x) :book: +* [Fundamentos do HTTP (Inglês)](http://www.pluralsight.com/courses/xhttp-fund) :tv: :moneybag: +* [Fundamentos do HTTP/2 (Inglês)](https://app.pluralsight.com/library/courses/http2-fundamentals/table-of-contents) :tv: :moneybag: +* [HTTP: O protocolo que todo Desenvolvedor Web deve conhecer - Parte 1 (Inglês)](http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177) :book: +* [HTTP: O protocolo que todo Desenvolvedor Web deve conhecer - Parte 2 (Inglês)](http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-2--net-31155) :book: +* [HTTP Resumido (Inglês)](http://code.tutsplus.com/series/http-succinctly--net-33683) :book: + +##### Códigos de estado do HTTP + +* [Códigos de estado do HTTP (Inglês)](https://httpstatuses.com/) +* [Códigos de estado do HTTP em 60 segundos (Inglês)](http://webdesign.tutsplus.com/tutorials/http-status-codes-in-60-seconds--cms-24317) :tv: + +##### Especificações do CORS + +* [Cross-Origin Resource Sharing (Inglês)](https://www.w3.org/TR/cors/) + +##### CORS + +* [CORS in Action: Creating and Consuming Cross-Origin APIs (Inglês)](https://www.amazon.com.br/CORS-Action-Creating-Consuming-Cross-Origin/dp/161729182X/ref=sr_1_1?ie=UTF8&qid=1492019150&sr=8-1&keywords=Monsur+Hossain) :book: :moneybag: +* [Controle de Acesso HTTP (CORS)](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS) :book: + +##### WebSockets + +* [Conecte a Web com WebSockets (Inglês)](https://code.tutsplus.com/courses/connect-the-web-with-websockets) :tv: +* [WebSocket: Lightweight Client-Server Communications (Inglês)](https://www.amazon.com.br/WebSocket-Client-Server-Communications-Andrew-Lombardi-ebook/dp/B015D78JVQ/ref=sr_1_1?ie=UTF8&qid=1492019088&sr=8-1&keywords=andrew+lombardi) :book: +* [O Protocolo WebSocket (Inglês)](https://tools.ietf.org/html/rfc6455) :book: diff --git a/translations/pt_BR/aprendendo/internet.md b/translations/pt_BR/aprendendo/internet.md new file mode 100644 index 00000000..7bc4fc15 --- /dev/null +++ b/translations/pt_BR/aprendendo/internet.md @@ -0,0 +1,13 @@ +# Aprendendo sobre Internet/Web + +> A Internet é um sistema global de redes de computadores interligadas que utilizam um conjunto próprio de protocolos (Internet Protocol Suite ou TCP/IP) com o propósito de servir progressivamente usuários no mundo inteiro. É uma rede de várias outras redes, que consiste de milhões de empresas privadas, públicas, acadêmicas e de governo com alcance local e global e que está ligada por uma ampla variedade de tecnologias de rede eletrônica, sem fio e ópticas. A internet traz uma extensa gama de recursos de informação e serviços, tais como os documentos inter-relacionados de hipertextos da World Wide Web (WWW), redes ponto-a-ponto (peer-to-peer) e infraestrutura de apoio a correio eletrônico (e-mails). + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Internet) + +* [What is the Internet? (O que é a Internet?)](https://www.youtube.com/watch?v=Dxcc6ycZ73M) [watch] +* [How Does the Internet work (Como a Internet funciona)](http://www.w3.org/wiki/How_does_the_Internet_work) - W3C [read] +* [How Does the Internet Work? (Como a Internet funciona?)](http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm) - Stanford Paper [read] +* [How the Internet Works (Como a Internet funciona)](https://www.khanacademy.org/partner-content/code-org/internet-works) [watch] +* [How the Internet Works in 5 Minutes (Como a Internet funciona em 5 Minutos)](https://www.youtube.com/watch?v=7_LPdttKXPc) [watch] +* [How the Web Works (Como a Web funciona)](https://www.eventedmind.com/classes/how-the-web-works-7f40254c) [watch][$] +* [What Is the Internet? Or, "You Say Tomato, I Say TCP/IP" (O que é a Internet? Ou, "Você diz Tomate, eu digo TCP/IP")](http://www.20thingsilearned.com/en-US/what-is-the-internet/1) [read] diff --git a/translations/pt_BR/aprendendo/javascript.md b/translations/pt_BR/aprendendo/javascript.md new file mode 100644 index 00000000..92dab406 --- /dev/null +++ b/translations/pt_BR/aprendendo/javascript.md @@ -0,0 +1,103 @@ +# Aprenda JavaScript + +> JavaScript é uma linguagem de programação de alto nível, dinâmica, não tipada e interpretada. Foi padronizada nas especificações da linguagem de programação ECMAScript. Juntamente com HTML e CSS, é uma das três tecnologias essenciais na produção de conteúdo na web. A maioria dos sites o utiliza e ele é suportado por todos os navegadores modernos sem a necessidade de plug-ins. JavaScript é baseado em prototype com funções de primeira classe, tornando-se uma linguagem multi-paradigma, suportando orientação a objetos e estilos de programação imperativos e funcionais. Possui uma API para trabalhar com texto, arrrays, datas e expressões regulares, mas não inclui entrada e saída de dados (I/O), como redes, armazenamento ou ferramentas gráficas, deixando esse trabalho para o servidor em que está armazenado. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/JavaScript) + +##### Começando: + +* [codecademy.com JavaScript](https://www.codecademy.com/en/tracks/javascript) :computer_mouse: +* [JavaScript first steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps) :book: +* [JavaScript building blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks) :book: +* [JavaScript Enlightenment](http://www.javascriptenlightenment.com/) :book: +* [JavaScript object basics](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics) :book: +* [Eloquent JavaScript](http://eloquentjavascript.net/) :book: + +##### Aprendizado Geral: + +* [Speaking JavaScript](http://speakingjs.com/es5/index.html) :book: +* [You Don't Know JS: Up & Going](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--going) :book: +* [You Don't Know JS: Types & Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/README.md#you-dont-know-js-types--grammar) :book: +* [You Don't Know JS: Scope & Closures](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures) :book: +* [Gentle explanation of 'this' keyword in JavaScript](http://rainsoft.io/gentle-explanation-of-this-in-javascript/) :book: +* [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) :book: + +##### Dominando: + +* [Setting up ES6](https://leanpub.com/setting-up-es6) :book: +* [ES6 FOR EVERYONE!](https://es6.io/) :tv: :moneybag: +* [Exploring ES6](http://exploringjs.com/es6.html) :book: +* [You Don't Know JS: ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond) :book: +* [Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers](https://www.amazon.com/Understanding-ECMAScript-Definitive-JavaScript-Developers/dp/1593277571/ref=as_li_ss_tl?&_encoding=UTF8&tag=fronenddevejo-20&linkCode=ur2&linkId=1ca4f5f23b42aeadad0990ab3bf91ca7&camp=1789&creative=9325) :book: +* [ES6: The Right Parts](https://frontendmasters.com/courses/es6-right-parts/) :tv: :moneybag: +* [Exploring ES2016 and ES2017](http://exploringjs.com/es2016-es2017.html) :book: +* [JavaScript Regular Expression Enlightenment](http://codylindley.com/techpro/2013_05_14__javascript-regular-expression-/) :book: +* [Using Regular Expressions](http://www.lynda.com/Regular-Expressions-tutorials/Using-Regular-Expressions/85870-2.html) :tv: :moneybag: +* [You Don't Know JS: Async & Performance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance) :book: +* [JavaScript with Promises](http://www.amazon.com/JavaScript-Promises-Daniel-Parker/dp/1449373216/ref=pd_sim_sbs_14_5) :book: :moneybag: +* [Test-Driven JavaScript Development](http://www.amazon.com/dp/0321683919/) :book: :moneybag: +* [JS MythBusters](https://mythbusters.js.org/index.html) :book: + +##### JavaScript Funcional: + +* [Functional Programming Jargon](https://github.com/hemanth/functional-programming-jargon#functional-programming-jargon) +* [funfunfunction: Functional programming in JavaScript](https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :tv: +* [Functional-Light-JS](https://github.com/getify/Functional-Light-JS) :book: +* [Functional Programming in JavaScript: How to improve your JavaScript programs using functional techniques](https://www.amazon.com/Functional-Programming-JavaScript-functional-techniques/dp/1617292826/ref=sr_1_1?&_encoding=UTF8&tag=fronenddevejo-20&linkCode=ur2&linkId=dcc6b0cb7de57fa841f1b178d2d54b9d&camp=1789&creative=9325) :book: +* [Mostly adequate guide to FP (in javascript)](https://drboolean.gitbooks.io/mostly-adequate-guide/content/) :book: +* [JavaScript Allongé](https://leanpub.com/javascriptallongesix) :book: :moneybag: +* [Hardcore Functional Programming in JavaScript](https://frontendmasters.com/courses/functional-javascript/) :tv: :moneybag: +* [Functional-Lite JavaScript](https://frontendmasters.com/courses/functional-js-lite/) :tv: :moneybag: + +##### Referências e documentos: + +* [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) +* [MSDN JavaScrip Reference](https://msdn.microsoft.com/en-us/library/yek4tbz0.aspx) + +##### Glossário/Enciclopédia/Jargão: + +* [The JavaScript Encyclopedia](http://www.crockford.com/javascript/encyclopedia/) +* [JavaScript Glossary](https://www.codecademy.com/articles/glossary-javascript) +* [Simplified JavaScript Jargon](http://jargon.js.org/) + +##### Padrões/Especificações: + +* [ECMAScript® 2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/index.html) +* [ECMAScript® 2016 Language Specification](https://www.ecma-international.org/ecma-262/7.0/) +* [ECMAScript® 2017 Language Specification](https://tc39.github.io/ecma262/) +* [Status, Process, and Documents for ECMA262](https://github.com/tc39/ecma262) + +##### Estilo: + +* [Airbnb JavaScript Style Guide](http://airbnb.io/javascript/) +* [JavaScript Standard Style](http://standardjs.com/rules.html) +* [JavaScript Semi-Standard Style](https://github.com/Flet/semistandard) + +##### Novidades, Notícias & Podcasts sobre JavaScript: + +* [Echo JS](http://www.echojs.com/) +* [ECMAScript Daily](https://ecmascript-daily.github.io/) +* [ES.next News](http://esnextnews.com/) +* [FiveJS](https://fivejs.codeschool.com/) +* [JavaScript Air](https://javascriptair.com/) +* [JavaScript Jabber](https://devchat.tv/js-jabber/) +* [JavaScript Kicks](http://javascriptkicks.com/) +* [JavaScript Live](https://jslive.com/) +* [JavaScript Weekly](http://javascriptweekly.com/) +* [JavaScript.com](https://www.javascript.com/news) + +##### Fontes de Aprendizado de JS Depreciado: + +* [Crockford on JavaScript - Volume 1: The Early Years](https://www.youtube.com/watch?v=JxAXlJEmNMg) :tv: +* [Crockford on JavaScript - Chapter 2: And Then There Was JavaScript](https://www.youtube.com/watch?v=RO1Wnu-xKoY) :tv: +* [Crockford on JavaScript - Act III: Function the Ultimate](https://www.youtube.com/watch?v=ya4UHuXNygM) :tv: +* [Crockford on JavaScript - Episode IV: The Metamorphosis of Ajax](https://www.youtube.com/watch?v=Fv9qT9joc0M) :tv: +* [Crockford on JavaScript - Part 5: The End of All Things](https://www.youtube.com/watch?v=47Ceot8yqeI) :tv: +* [Crockford on JavaScript - Scene 6: Loopage](https://www.youtube.com/watch?v=QgwSUtYSUqA) :tv: +* [JavaScript Patterns](http://www.amazon.com/gp/product/0596806752/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0596806752&linkCode=as2&tag=fronenddevejo-20&linkId=K56OPQZNQNMPF6QI) :book: :moneybag: +* [The Principles of Object-Oriented JavaScript](http://www.amazon.com/gp/product/1593275404/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1593275404&linkCode=as2&tag=fronenddevejo-20&linkId=NQTZVDOIMJRGMAQM) :book: :moneybag: +* [JavaScript Modules](http://jsmodules.io/cjs.html) :book: +* [Functional JavaScript: Introducing Functional Programming with Underscore.js](http://www.amazon.com/gp/product/1449360726/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1449360726&linkCode=as2&tag=fronenddevejo-20&linkId=BDQC3FTEB3YXTYCK) :book: :moneybag: +* [The Good Parts of JavaScript and the Web](https://frontendmasters.com/courses/good-parts-javascript-web/) :tv: :moneybag: +* [High Performance JavaScript (Build Faster Web Application Interfaces)](http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X/ref=sr_1_1) :book: :moneybag: +* [Advanced JavaScript](https://frontendmasters.com/courses/advanced-javascript/) :tv: :moneybag: diff --git a/translations/pt_BR/aprendendo/js-api.md b/translations/pt_BR/aprendendo/js-api.md new file mode 100644 index 00000000..58f6c1e8 --- /dev/null +++ b/translations/pt_BR/aprendendo/js-api.md @@ -0,0 +1,4 @@ +# Aprenda Design de API em JS + +* [Designing Better JavaScript APIs (Inglês)](http://www.smashingmagazine.com/2012/10/designing-javascript-apis-usability/) :book: +* [Writing JavaScript APIs (Inglês)](http://blog.wolksoftware.com/writing-javascript-apis) :book: diff --git a/translations/pt_BR/aprendendo/json.md b/translations/pt_BR/aprendendo/json.md new file mode 100644 index 00000000..c3f255e9 --- /dev/null +++ b/translations/pt_BR/aprendendo/json.md @@ -0,0 +1,28 @@ +# Aprenda JSON (JavaScript Object Notation) + +> Em computação, JSON, um acrônimo para "JavaScript Object Notation", é um formato de padrão aberto que utiliza texto legível a humanos para transmitir objetos de dados consistindo de pares atributo-valor. É o formato de dados mais comumente utilizado para comunicação assíncrona navegador/servidor, substituindo amplamente o XML, sendo usado pelo AJAX. +> +> O JSON é um formato de dados independente de linguagem. Deriva do JavaScript, mas a partir de 2017 muitas linguagens de programação incluem código para gerar e analisar sintaticamente dados em formato JSON. +> +> Douglas Crockford especificou originalmente o formato JSON no início dos anos 2000. Dois padrões concorrentes, RFC 7159 e ECMA-404, o definiram em 2013. O padrão ECMA é mínimo, descrevendo apenas a sintaxe gramatical permitida, enquanto o RFC também fornece considerações semânticas e de segurança. O tipo de mídia da Internet oficial para o JSON é `application/json`. Nomes de arquivos JSON usam a extensão `.json`. + +>— [Wikipedia](https://en.wikipedia.org/wiki/JSON) + +##### Aprendizado Geral: + +* [Introdução ao JSON](https://www.amazon.com.br/Introdu%C3%A7%C3%A3o-ao-JSON-Lindsay-Bassett/dp/8575224514/ref=sr_1_1?ie=UTF8&qid=1492620029&sr=8-1&keywords=Lindsay+Bassett) :book: :moneybag: +* [json.com (Inglês)](https://www.json.com/) :book: +* [What is JSON (Inglês)](https://mijingo.com/lessons/what-is-json/) :tv: + +##### Referências/Documentações: + +* [json.org](http://json.org/json-pt.html) :book: + +##### Padrões/Especificações: + +* [ECMA-404 The JSON Data Interchange Format (Inglês)](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf) +* [RFC 7159 The JavaScript Object Notation (JSON) Data Interchange Format (Inglês)](https://tools.ietf.org/html/rfc7159) + +##### Arquitetura: + +* [JSON API (Inglês)](http://jsonapi.org/) diff --git a/translations/pt_BR/aprendendo/modulos-js.md b/translations/pt_BR/aprendendo/modulos-js.md new file mode 100644 index 00000000..7ff4a333 --- /dev/null +++ b/translations/pt_BR/aprendendo/modulos-js.md @@ -0,0 +1,18 @@ +# Aprenda sobre Módulos em JavaScript + +##### Aprendizagem Geral: + +* [jsmodules.io (Inglês)](http://jsmodules.io/) +* [ES6 Modules in Depth (Inglês)](https://ponyfoo.com/articles/es6-modules-in-depth) [read] +* [Exploring JS - Modules (Inglês)](http://exploringjs.com/es6/ch_modules.html#ch_modules) [read] + +##### Referências/Documentações: + +* [MDN - export](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export) +* [MDN - import](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import) + +*** + +###### NOTAS: + +Ainda estamos esperando pelo suporte a carregamento de módulos nos navegadores. Até então você pode dar uma olhada em ["ES Module Loader Polyfill" (Inglês)](https://github.com/ModuleLoader/es-module-loader) e ["JavaScript Loader Standard" (Inglês)](https://whatwg.github.io/loader/). diff --git a/translations/pt_BR/aprendendo/multi-plataforma.md b/translations/pt_BR/aprendendo/multi-plataforma.md new file mode 100644 index 00000000..9be59765 --- /dev/null +++ b/translations/pt_BR/aprendendo/multi-plataforma.md @@ -0,0 +1,30 @@ +# Aprenda sobre Desenvolvimento Multi-Plataforma + +![](../images/things.jpg "http://bradfrost.com/blog/post/this-is-the-web/") + +Fonte da imagem: http://bradfrost.com/blog/post/this-is-the-web/ + +Um site ou aplicação web pode ser executado em uma grande gama de computadores, laptops, tablets e telefones, bem como muitos aparelhos (relógios, termostatos, geladeiras, etc.). Determinar quais aparelhos serão suportados e como o suporte para os mesmos será desenvolvido é chamado de "estratégia de desenvolvimento multi-plataforma". Abaixo estão listadas as estratégias multi-plataforma mais comuns. + +* Construa um site/app [responsivo (RWD)](https://en.wikipedia.org/wiki/Responsive_web_design) para todas as plataformas. +* Construa um site/app melhorado [adaptivamente/progressivamente](https://en.wikipedia.org/wiki/Adaptive_web_design) para todas as plataformas. +* Construa um site, web app, app nativo, ou app híbrido-nativo para cada plataforma ou para um grupo de plataformas. +* Tente refatorar algo que já criou utilizando partes das estratégias 1, 2 ou 3. + +##### Aprendizagem Geral: + +* [A book Apart Pack - Responsive Web Design (Inglês)](https://abookapart.com/collections/responsive-design) :book: :moneybag: +* [A Book Apart Pack - Design For Any Device (Inglês)](https://abookapart.com/collections/design-for-any-device) :book: :moneybag: +* [Adaptive Web Design (Inglês)](https://www.amazon.com.br/Adaptive-Web-Design-Experiences-Progressive/dp/0134216148/ref=sr_1_cc_2?s=aps&ie=UTF8&qid=1493255210&sr=1-2-catcorr&keywords=Aaron+Gustafson+web+design) :book: :moneybag: +* [Designing with Progressive Enhancement (Inglês)](https://www.amazon.com.br/Designing-Progressive-Enhancement-Building-Everyone-ebook/dp/B003CUDPA2/ref=sr_1_1?s=books&ie=UTF8&qid=1493255282&sr=1-1&keywords=Maggie+Costello+Wachs) :book: :moneybag: +* [Mobile Web Development](https://br.udacity.com/course/mobile-web-development--cs256) :tv: +* [Responsive HTML Email Design (Inglês)](https://frontendmasters.com/courses/responsive-email/) :tv: :moneybag: +* [Imagens Responsivas](https://br.udacity.com/course/responsive-images--ud882/) :tv: +* [Responsive Typography (Inglês)](https://www.pluralsight.com/courses/responsive-typography) :tv: :moneybag: +* [Responsive Web Design (Inglês)](https://frontendmasters.com/courses/responsive-web-design/) :tv: :moneybag: +* [Fundamentos do Design Responsivo para a Web](https://br.udacity.com/course/responsive-web-design-fundamentals--ud893/) :tv: + +##### Newsletters Responsivas, Notícias, & Podcasts: + +* [Responsive Web Design Podcast (Inglês)](https://responsivewebdesign.com/podcast/) +* [Responsive Web Design Newsletter (Inglês)](https://responsivewebdesign.com/newsletter/) diff --git a/translations/pt_BR/aprendendo/navegadores-headless.md b/translations/pt_BR/aprendendo/navegadores-headless.md new file mode 100644 index 00000000..a42ab2b3 --- /dev/null +++ b/translations/pt_BR/aprendendo/navegadores-headless.md @@ -0,0 +1,13 @@ +# Aprenda sobre Navegadores Headless + +> Um navegador headless é aquele que não possui uma interface gráfica de usuário. +> +> Navegadores headless fornecem controle automatizado de páginas web em um ambiente similar ao de navegadores populares, porém são executados via interface de linha de comando ou utilizando comunicação em rede. São particularmente úteis para testar páginas já que podem renderizar e entender HTML como um navegador, incluindo elementos de estilo como layout da página, cores, seleção de fontes e execução de JavaScript e AJAX, que normalmente não estão disponíveis quando se utiliza outros métodos de teste. Em 2009 a Google afirmou que utilizar um navegador headless poderia ajudar o seu motor de busca a indexar conteúdo de sites que usam AJAX. + +>— [Wikipedia](https://en.wikipedia.org/wiki/Headless_browser) + +* [Automating the Web Using PhantomJS and CasperJS (Inglês)](https://app.pluralsight.com/library/courses/automating-web-phantom-js-casper-js/table-of-contents) :tv: :moneybag: +* [Getting Started with PhantomJS (Inglês)](https://www.amazon.com.br/Phantomjs-Aries-Beltran/dp/1782164227/ref=sr_1_2?ie=UTF8&qid=1493139799&sr=8-2&keywords=PhantomJS) :book: :moneybag: +* [PhantomJS Cookbook (Inglês)](https://www.amazon.com.br/PhantomJS-Cookbook-Rob-Friesel-ebook/dp/B00KYMCWPU/ref=sr_1_1?ie=UTF8&qid=1493139799&sr=8-1&keywords=PhantomJS) :book: :moneybag: +* [PhantomJS for Web Automation (Inglês)](https://www.youtube.com/watch?v=OqEcn_6GBDI) :tv: +* [Rapid PhantomJS (Inglês)](https://www.packtpub.com/web-development/rapid-phantomjs-video) :tv: :moneybag: diff --git a/translations/pt_BR/aprendendo/navegadores.md b/translations/pt_BR/aprendendo/navegadores.md new file mode 100644 index 00000000..06399e32 --- /dev/null +++ b/translations/pt_BR/aprendendo/navegadores.md @@ -0,0 +1,72 @@ +# Aprenda sobre Navegadores Web + +> Um navegador web (normalmente chamado de navegador) é uma aplicação de software para recuperar, apresentar e percorrer recursos de informação na Internet. Um recurso de informação é identificado por um Identificador Uniforme de Recursos (URI/URL) e pode ser uma página web, imagem, vídeo ou outro conteúdo. Hyperlinks presentes em recursos permitem que os usuários naveguem facilmente em seus navegadores para recursos relacionados. Embora os navegadores tenham principalmente a intenção de usar a Internet, eles também pode ser utilizados para acessar informações fornecidas por servidores web em redes de computador privadas ou arquivos em sistemas de arquivos. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Navegador_web) + + +##### Os [navegadores mais utilizados](https://www.sitepoint.com/browser-trends-september-2016-browser-wars/) (em qualquer dispositivo) são: + +1. [Chrome](http://www.google.com/chrome/) (engine: [Blink](https://en.wikipedia.org/wiki/Blink_%28layout_engine%29) + [V8](https://en.wikipedia.org/wiki/V8_%28JavaScript_engine%29)) +2. [Firefox](https://www.mozilla.org/en-US/firefox/new/) (engine: [Gecko](https://en.wikipedia.org/wiki/Gecko_%28software%29) + [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29)) +3. [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) (engine: [Trident](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29) + [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29)) +4. [Safari](https://www.apple.com/safari/) (engine: [Webkit](https://en.wikipedia.org/wiki/WebKit) + [SquirrelFish](https://trac.webkit.org/wiki/SquirrelFish)) + +![](../images/statcounter.png "http://gs.statcounter.com/#all-browser_version_partially_combined-ww-daily-20160101-20161201-bar") + +Fonte: http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201501-201601-bar + +##### Evolução dos Navegadores e Tecnologias Web (isto é, APIs) + +* [evolutionoftheweb.com](http://www.evolutionoftheweb.com/) [Ler] +* [Timeline of web browsers (Linha do Tempo dos Navegadores)](https://en.wikipedia.org/wiki/Timeline_of_web_browsers) [Ler] + +##### Os Navegadores Sem-Cabeçalho (Headless Browsers) Mais Utilizados São: + +* [PhantomJS](http://phantomjs.org/) (engine: [Webkit](https://en.wikipedia.org/wiki/WebKit) + SquirrelFish) +* [SlimerJS](http://slimerjs.org/) (engine: [Gecko](https://en.wikipedia.org/wiki/Gecko_%28software%29) + [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29)) +* [TrifleJS](http://triflejs.org/) (engine: [Trident](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29) + [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29)) + +##### Como os Navegadores Funcionam + +* [20 Lições que Aprendi Sobre Navegadore e a Web](http://www.20thingsilearned.com/pt-BR/foreword/1) [Ler] +* [Fast CSS: How Browsers Lay Out Web Pages (CSS Rápido: Como os Navegadores Arranjam Páginas Web)](http://dbaron.org/talks/2012-03-11-sxsw/master.xhtml) [Ler] +* [How Browsers Work: Behind the scenes of modern web browsers (Como os Navegadores Funcionam: Por trás das cenas de navegadores web modernos)](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) [Ler] +* [So How Does the Browser Actually Render a Website (Então, Como o Navegador Realmente Renderiza um Site)](https://www.youtube.com/watch?v=SmE4OwHztCc) [Assistir] +* [What forces layout / reflow (O que força o leiaute / refluxo)](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) [Ler] +* [What Every Frontend Developer Should Know About Webpage Rendering (O Que Todo Desenvolvedor Frontend Deveria Saber Sobre Renderização de Página Web)](http://frontendbabel.info/articles/webpage-rendering-101/) [Ler] + +![](../images/browsers-work.png "http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/") + +Fonte: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ + +##### Otimização para Navegadores + +* [Browser Rendering Optimization (Otimização de Renderização de Navegador)](https://www.udacity.com/course/browser-rendering-optimization--ud860) [watch] +* [Website Performance Optimization (Otimização de Performance de Site)](https://www.udacity.com/course/website-performance-optimization--ud884) [watch] + +##### Comparando Navegadores + +* [Comparison of Web Browsers (Comparação de Navegadores Web)](https://en.wikipedia.org/wiki/Comparison_of_web_browsers) [read] + +##### Hacks de Navegador + +* [browserhacks.com](http://browserhacks.com/) [read] + +##### Desenvolvimento para Navegadores + +No passado, desenvolvedores front-end gastaram muito tempo fazendo o código funcionar em vários navegadores diferentes. Isso já foi um problema maior do que é atualmente. Hoje, abstrações (por exemplo, jQuery, React, Post-CSS, Babel, etc...) combinadas com navegadores modernos fazem o desenvolvimento para navegadores bastante fácil. O novo desafio não é em qual navegador o usuário irá usar, mas em qual dispositivo ele usará o navegador. + +##### Navegadores Sempre-Verdes (Evergreen) + +As versões mais recentes da maioria dos navegadores modernos são consideradas navegadores sempre-verdes. Ou seja, em teoria, eles devem atualizar-se automaticamente em silêncio sem solicitar ao usuário. Este movimento em direção a auto-atualização de navegadores tem sido em reação ao lento processo de eliminação de navegadores antigos que não se auto-atualizam. + +##### Escolhendo um Navegador [^1] + +A partir de hoje, a maioria dos desenvolvedores usam o Chrome e o "Chrome Dev Tools" para desenvolver código front-end. No entanto, todos os navegadores mais utilizados oferecem uma variedade de ferramentas de desenvolvedor. Escolher um para usar para desenvolvimento é uma questão subjetiva. A questão mais importante é saber quais navegadores, em quais dispositivos, você tem que suportar e então testar apropriadamente. + +*** + +###### CONSELHO: + +[^1] Eu sugiro usar o Chrome porque as ferramentas de desenvolvedor são consistentemente melhoradas e no momento contém os recursos mais robustos. diff --git a/translations/pt_BR/aprendendo/node.md b/translations/pt_BR/aprendendo/node.md new file mode 100644 index 00000000..cc4c0b90 --- /dev/null +++ b/translations/pt_BR/aprendendo/node.md @@ -0,0 +1,18 @@ +# Aprenda Node.js + +> Node.js é um interpretador de código JavaScript que funciona do lado do servidor. Seu objetivo é ajudar programadores na criação de aplicações de alta escalabilidade (como um servidor web), com códigos capazes de manipular dezenas de milhares de conexões simultâneas, numa única máquina física. O Node.js é baseado no interpretador V8 JavaScript Engine (interpretador de JavaScript open source implementado pelo Google em C++ e utilizado pelo Chrome). Foi criado por Ryan Dahl em 2009, e seu desenvolvimento é mantido pela empresa Joyent, onde Dahl trabalha. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Node.js) + +##### Aprendizagem Geral: + +* [The Art of Node (Inglês)](https://github.com/maxogden/art-of-node#the-art-of-node) :book: +* [Introduction to Node.js (Inglês)](http://www.pluralsight.com/courses/node-intro) :tv: :moneybag: +* [Introduction to Node.js from Evented Mind (Inglês)](https://www.eventedmind.com/classes/introduction-to-node-js-4c0326de) :tv: :moneybag: +* [io.js and Node.js Next: Getting Started (Inglês)](http://www.pluralsight.com/courses/running-node-applications-io-js) :tv: :moneybag: +* [Aprendendo Node](https://www.amazon.com.br/Aprendendo-Node-Shelley-Powers/dp/8575225405/ref=sr_1_1?ie=UTF8&qid=1492986066&sr=8-1&keywords=Shelley+Powers) :book: :moneybag: +* [Learn You The Node.js (Inglês)](https://github.com/workshopper/learnyounode) [workshops auto-orientados] +* [Node.js Basics (Inglês)](http://teamtreehouse.com/library/nodejs-basics) :tv: :moneybag: +* [Node.js in Practice (Inglês)](https://www.amazon.com.br/Node-js-Practice-Alex-R-Young/dp/1617290939/ref=sr_1_2?ie=UTF8&qid=1492986204&sr=8-2&keywords=Alex+R.+Young+Marc+Harter) :book: :moneybag: +* [Real-time Web with Node.js (Inglês)](https://www.codeschool.com/courses/real-time-web-with-node-js) :tv: +* [Zero to Production Node.js on Amazon Web Services (Inglês)](https://frontendmasters.com/courses/production-node-aws/) :tv: :moneybag: diff --git a/translations/pt_BR/aprendendo/noticias-podcasts.md b/translations/pt_BR/aprendendo/noticias-podcasts.md new file mode 100644 index 00000000..fa0e1abf --- /dev/null +++ b/translations/pt_BR/aprendendo/noticias-podcasts.md @@ -0,0 +1,52 @@ +# Newsletters, Notícias, & Podcasts + +##### Newsletters Gerais de Front-End, Notícias, & Podcasts: + +* [The Big Web Show (Inglês)](http://5by5.tv/bigwebshow) +* [Front-End Dev Weekly (Inglês)](http://frontenddevweekly.com/) +* [Front End Happy Hour (Inglês)](http://frontendhappyhour.com/) +* [Front-End News in 5 Minutes (Inglês)](https://frontendfive.codeschool.com/) +* [frontendfront.com (Inglês)](http://frontendfront.com/) +* [FrontEnd Focus (Inglês)](http://frontendfocus.co/) +* [Front End Newsletter (Inglês)](http://frontendnewsletter.com/) +* [Mobile Web Weekly (Inglês)](http://mobilewebweekly.co/) +* [Open Web Platform Daily Digest (Inglês)](http://webplatformdaily.org/) +* [Non Breaking Space Show (Inglês)](http://nonbreakingspace.tv) +* [shoptalkshow.com (Inglês)](http://shoptalkshow.com/) +* [The Frontside Podcast (Inglês)](https://frontsidethepodcast.simplecast.fm/) +* [The Web Ahead (Inglês)](http://thewebahead.net/) +* [The Web Platform Podcast (Inglês)](http://thewebplatform.libsyn.com/) +* [webtoolsweekly.com (Inglês)](http://webtoolsweekly.com/) +* [Dev Tips (Inglês)](https://umaar.com/dev-tips/) +* [UX Design Newsletter (Inglês)](http://uxdesignnewsletter.com/) +* [ZOFE - Zone Of Front-Enders](http://zofe.com.br/) +* [DEVNAESTRADA](http://devnaestrada.com.br/) +* [hipsters.tech](http://hipsters.tech/) +* [PodProgramar](https://mundopodcast.com.br/podprogramar/) +* [Dicas de Front-end](http://dicasdefrontend.com.br/) + +##### Newsletters de HTML/CSS: + +* [CSS Weekly (Inglês)](http://css-weekly.com/archives/) +* [HTML 5 Weekly (Inglês)](http://html5weekly.com/) + +##### Newsletters de JavaScript, Notícias, & Podcasts: + +* [Echo JS (Inglês)](http://www.echojs.com/) +* [ECMAScript Daily (Inglês)](https://ecmascript-daily.github.io/) +* [ES.next News (Inglês)](http://esnextnews.com/) +* [FiveJS (Inglês)](https://fivejs.codeschool.com/) +* [JavaScript Air (Inglês)](https://javascriptair.com/) +* [JavaScript Jabber (Inglês)](https://devchat.tv/js-jabber/) +* [JavaScript Kicks (Inglês)](http://javascriptkicks.com/) +* [JavaScript Live (Inglês)](https://jslive.com/) +* [JavaScript Weekly (Inglês)](http://javascriptweekly.com/) +* [JavaScript.com (Inglês)](https://www.javascript.com/news) +* [BrazilJS Weekly](https://braziljs.org/categoria/weekly/) + +##### Newsletters e Podcasts de Animação Gráfica + +* [Motion and Meaning (Inglês)](http://motionandmeaning.io/) +* [Responsive Images Community Group Newsletter (Inglês)](https://responsiveimages.org/#newsletter) +* [SVG Immersion Podcast (Inglês)](http://svgimmersion.com/) +* [Web Animation Weekly (Inglês)](http://rachelnabors.us1.list-manage.com/subscribe?u=0a8f219cf8284562f91a26ee9&id=d60f6683d2) diff --git a/translations/pt_BR/aprendendo/offline.md b/translations/pt_BR/aprendendo/offline.md new file mode 100644 index 00000000..a94f3d26 --- /dev/null +++ b/translations/pt_BR/aprendendo/offline.md @@ -0,0 +1,11 @@ +# Aprenda sobre Desenvolvimento Offline + +Desenvolvimento offline, ou offline first, é uma área de conhecimento e discussão sobre práticas de desenvolvimento para aparelhos que não estão sempre conectados à internet ou à uma fonte de energia. + +##### Aprendizado Geral: + +* [Creating HTML5 Offline Web Applications (Inglês)](http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html) :book: +* [Everything You Need to Know to Create Offline-First Web Apps (Inglês)](https://github.com/pazguille/offline-first) :book: +* [Offline First (Inglês)](http://www.webdirections.org/offlineworkshop/ibooksDraft.pdf) :book: +* [offlinefirst.org (Inglês)](http://offlinefirst.org) :book: +* [Adicionar um Service Worker e Off-line ao seu App da Web](https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/) :book: diff --git a/translations/pt_BR/aprendendo/padroes-ui.md b/translations/pt_BR/aprendendo/padroes-ui.md new file mode 100644 index 00000000..00ddf378 --- /dev/null +++ b/translations/pt_BR/aprendendo/padroes-ui.md @@ -0,0 +1,26 @@ +# Aprenda sobre UI/UX + +> **Design de Interface de Usuário** - Design de interface de usuário (UI) ou engenharia de interface de usuário é o desenvolvimento de computadores, aplicações, eletrodomésticos, dispositivos de comunicação móveis, softwares e sites web com o foco na experiência do usuário e interação. O objetivo do UI é tornar a interação do usuário o mais simples e eficiente possível, em termos de realização dos objetivos - o que normalmente é chamado de design centrado no usuário. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Design_de_interface_de_usu%C3%A1rio) +> +> **Padrão de Design de Interação** - Um padrão de design é um modo formal de se documentar uma solução para um problema comum. A ideia foi introduzida pelo arquiteto Christopher Alexander para ser utilizada em planejamento urbano e construção de prédios, e tem sido adaptada para várias outras disciplinas, incluindo ensino e pedagogia, organização e processo de desenvolvimento, e arquitetura e design de software. + +>— [Wikipedia](https://en.wikipedia.org/wiki/Design_pattern) +> +> **Design de Experiência do Usuário** - Design de experiência do usuário (UXD, UED ou XD) é o processo de melhorar a satisfação do usuário ao aperfeiçoar usabilidade, acessibilidade e bem-estar provido pela interação entre usuário e produto. Design de experiência do usuário engloba o design tradicional de interação humano-computador (IHC) e estende-se ao abordar todos os aspectos de um produto ou serviço percebido por usuários. + +>— [Wikipedia](https://en.wikipedia.org/wiki/User_experience_design) +> +> **Interação Humano–Computador** - Interação humano-computador (IHC) pesquisa o design e o uso de tecnologia informática, focando especialmente nas interfaces entre pessoas (usuários) e computadores. Pesquisadores da área de IHC observam a forma como humanos interagem com computadores e as tecnologias de design que permitem que essa interação ocorra de outras maneiras. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Intera%C3%A7%C3%A3o_humano-computador) + +Sugiro a leitura dos textos listados abaixo sobre o assunto, que estão de acordo com as normas, para que possa dar suporte e construir interfaces de usuário utilizáveis. + +* [About Face: The Essentials of Interaction Design (Inglês)](https://www.amazon.com.br/About-Face-Essentials-Interaction-Design/dp/1118766571/ref=sr_1_1?ie=UTF8&qid=1492197697&sr=8-1&keywords=alan+cooper) :book: :moneybag: +* [Design for Hackers: Reverse Engineering Beauty (Inglês)](https://www.amazon.com.br/Design-Hackers-Reverse-Engineering-Beauty-ebook/dp/B005J578EW/ref=sr_1_1?s=books&ie=UTF8&qid=1492197740&sr=1-1&keywords=David+Kadavy) :book: :moneybag: +* [Design for Non-Designers (Inglês)](https://www.youtube.com/watch?v=ZbrzdMaumNk&feature=youtu.be) :tv: +* [Designing Interfaces - 2e (Inglês)](https://www.amazon.com.br/Designing-Interfaces-2e-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?s=books&ie=UTF8&qid=1492197805&sr=1-1&keywords=Jenifer+Tidwell) :book: :moneybag: +* [Designing Web Interfaces: Principles and Patterns for Rich Interactions (Inglês)](https://www.amazon.com.br/Designing-Web-Interfaces-Principles-Interactions-ebook/dp/B0026OR33U/ref=sr_1_3?s=books&ie=UTF8&qid=1492197858&sr=1-3&keywords=Theresa+Neil) :book: :moneybag: +* [Não Me Faça Pensar - Atualizado](https://www.amazon.com.br/N%C3%A3o-Me-Fa%C3%A7a-Pensar-Atualizado/dp/8576088509/ref=sr_1_1?s=books&ie=UTF8&qid=1492197903&sr=1-1&keywords=Steve+Krug) :book: :moneybag: diff --git a/translations/pt_BR/aprendendo/performance.md b/translations/pt_BR/aprendendo/performance.md new file mode 100644 index 00000000..8e62e98e --- /dev/null +++ b/translations/pt_BR/aprendendo/performance.md @@ -0,0 +1,21 @@ +# Aprenda Sobre Otimização de Performance de Site + +> Otimização de Performance Web, WPO, ou otimização de site é a área de conhecimento sobre aumentar a velocidade em que páginas web são baixadas e mostradas no navegador web do usuário. Com a velocidade média de internet aumentando globalmente, é apropriado para os administradores de site e webmasters considerarem o tempo que os sites demoram para renderizar para o visitante. + +>— [Wikipedia (Inglês)](https://en.wikipedia.org/wiki/Web_performance_optimization) + +##### Aprendizagem Geral: + +* [Browser Rendering Optimization (Otimização de Renderização no Navegador)](https://www.udacity.com/course/browser-rendering-optimization--ud860) [Assistir] +* [Even Faster Web Sites: Performance Best Practices for Web Developers (Sites Mais Rápidos Ainda: Melhores Práticas de Performance para Desenvolvedores Web)](https://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=4fe6a82bbf727209ba337ecaa0e516bc&camp=1789&creative=9325) [Ler][$] +* [High Performance Web Sites: Essential Knowledge for Front-End Engineers (Sites de Alta Performance: Conhecimento Essencial para Engenheiros de Front-End)](https://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=e93ab3ea06b7e3e93ee0d868249d0e3f&camp=1789&creative=9325) [Ler][$] +* [JavaScript Performance Rocks (Performance de JavaScript Manda Ver)](http://javascriptrocks.com/) [Ler] +* [PageSpeed Insights Rules (pt-BR)](https://developers.google.com/speed/docs/insights/rules) [Ler] +* [perf-tooling.today](http://www.perf-tooling.today/) [Ler] +* [Performance Calendar](http://calendar.perfplanet.com) [Ler] +* [perf.rocks](http://perf.rocks/) [Ler] +* [Using WebPageTest (Usando o WebPageTest)](https://www.amazon.com/Using-WebPageTest-Rick-Viscomi/dp/1491902590/ref=sr_1_1?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=91a76d5d4b4f47cf4e0d1392cc9cea30&camp=1789&creative=9325) [Ler][$] +* [Web Performance Daybook Volume 2 (Livro de Registros de Performance Web Volume 2)](https://www.amazon.com/Web-Performance-Daybook-Techniques-Optimizing/dp/1449332919/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=59e32c394c2377bb17af1d801b924d1d&camp=1789&creative=9325) [Ler][$] +* [Web Performance: The Definitive Guide (Performance Web: O Guia Definitivo)](http://shop.oreilly.com/product/0636920032427.do) [Ler] +* [Website Performance (Performance de Site)](https://frontendmasters.com/courses/website-performance/) [Assistir][$] +* [Website Performance Optimization (Otimização de Performance de Site)](https://www.udacity.com/course/website-performance-optimization--ud884) [Assistir] \ No newline at end of file diff --git a/translations/pt_BR/aprendendo/pwa.md b/translations/pt_BR/aprendendo/pwa.md new file mode 100644 index 00000000..d4b85e99 --- /dev/null +++ b/translations/pt_BR/aprendendo/pwa.md @@ -0,0 +1,30 @@ +# Aprendendo Aplicações Web Progressivas (Progressive Web App) + +>Diferente das aplicações tradicionais, aplicações web progressivas são híbridos de páginas web (websites) e aplicações mobile. Esse novo modelo de aplicação combina features oferecidas pelos mais modernos navegadores com os benefícios de uma experiência móvel. +> +>Em 2015, o designer Frances Berriman e Alex Russell (um dos desenvolvedores do Google Chrome) cunharam o termo "Progressive Web Apps" para descrever aplicações que usam as vantagens das novas features suportadas pelos novos navegadores, incluindo Service Workers e Web App Manifests, isso possibilitou usuários atualizarem seus apps para serem aplicativos de primeira classe no seu sistema operacional nativo. +> +>De acordo com Google Developers, essas características são: +> +> * Progressiva - Funciona para todos os usuários, independente do navegador escolhido, elas operam de forma progressiva como príncipio básico. +> * Responsiva - Se adapta a qualquer dispositivo: desktop, mobile, tablet ou outros dispositivos que podem surgir. +> * Independente de conexão - Permite você trabalhar offline ou com internets de baixa qualidade. +> * São como aplicativos - Devem possuir a sensação, o estilo e a nevegação de um aplicativo, para o usuário sentir que está utilizando um aplicativo nativo. +> * Atualizada - Sempre atualizada graças aos processos de atualização do service worker. +> * Segura - Alimentada via HTTPS para evitar bisbilhoteiros e garantir que o conteúdo não seja alterado. +> * Vísivel - São identificadas como "Aplicativos" graças ao W3C manifests[6] e registro de service worker que permite que os mecanismos de busca as encontrem. +> * Re-engajáveis - São facilmente re-engajáveis graças as features como _push notifications_. +> * Instaláveis - Permitem aos usuários "manter" os aplicativos mais úteis para encontrá-los na sua página inicial sem precisar se aborrecer em alguma app store. +> * Linkáveis - Facilmente compartilhadas via URL e não requerem nenhuma forma complexa de instalação. + +> +>— [Wikipedia](https://pt.wikipedia.org/wiki/Progressive_Web_App) + +* [Progressive Web Apps (Aplicações Web Progressivas)](https://developers.google.com/web/progressive-web-apps/) [read] +* [Beginner’s Guide To Progressive Web Apps (Guia para iniciantes em Progressive Web Apps)](https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/) [read] +* [Progressive Web Apps (Aplicações Web Progressivas)](https://developers.google.com/web/progressive-web-apps/) [read] +* [Getting Started with Progressive Web Apps (Introdução a Aplicações Web Progressivas)](https://www.pluralsight.com/courses/web-apps-progressive-getting-started) [watch][$] +* [Building a Progressive Web App (Criando uma aplicação web progressiva)](https://www.lynda.com/CSS-tutorials/Building-Progressive-Web-App/518052-2.html) [watch][$] +* [Intro to Progressive Web Apps by Google (Introdução as aplicações web progressivas pelo Google)](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811) [watch] +* [Native Apps are Doomed (Aplicações nativas estão condenadas)](https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0#.rfw9hdym6) [read] +* [Why Native Apps Really are Doomed: Native Apps are Doomed pt 2 (Por que aplicações nativas estão realmente condenadas - Aplicações nativas estão condenadas Parte 2)](https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9#.qjrm13yj3) [read] diff --git a/translations/pt_BR/aprendendo/react-redux.md b/translations/pt_BR/aprendendo/react-redux.md new file mode 100644 index 00000000..7374d95d --- /dev/null +++ b/translations/pt_BR/aprendendo/react-redux.md @@ -0,0 +1,33 @@ +# Aprenda Sobre React & Redux + +##### React: + +* [React.js Introduction For People Who Know Just Enough jQuery To Get By (Introdução Para Pessoas Que Sabem o Bastante de jQuery Para Lidar com React.js)](http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/) [Ler] +* [React.js Fundamentals (Fundamentos de React.js)](https://online.reacttraining.com/courses/enrolled/reactjsfundamentals) [Assistir] +* [13 things you need to know about React (13 coisas que você precisa saber sobre React)](http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react/) [Ler] +* [Tutorial: Intro To React (Tutorial: Introdução ao React)](https://facebook.github.io/react/tutorial/tutorial.html) [Ler] +* [React Enlightenment (Esclarecimento sobre React)](https://www.reactenlightenment.com/) [Ler] +* [ReactJS For Stupid People (ReactJS Para Pessoas Estúpidas)](http://blog.andrewray.me/reactjs-for-stupid-people/) [Ler] +* [REACT FOR BEGINNERS (REACT PARA INICIANTES)](https://reactforbeginners.com/) [Assistir] +* [Complete Introduction to React (feat. Redux and React Router) (Introdução completa ao React(feat. Redux e React Router))](https://frontendmasters.com/courses/react-intro/) [Assistir] +* [React In-depth: An exploration of UI development (React Em Profundidade: Uma exploração de desenvovimento de UI)](https://www.gitbook.com/book/developmentarc/react-indepth/details) [Ler] +* [Complete Intro to React v2 (feat. Router v4 and Redux) (Introdução completa ao React v2 (feat. Router v2 e Redux))](https://frontendmasters.com/courses/complete-intro-react/) [Assistir][$] + * [Welcome to A Complete Intro to React (Bem-vindo à uma Introdução Completa ao React)](https://btholt.github.io/complete-intro-to-react/all.html) [ler] +* [Build Your First Production Quality React App (Construa Sua Primeira Aplicação de Produção em React com Qualidade)](https://egghead.io/courses/build-your-first-production-quality-react-app) [Assistir][$] + +##### Redux: + +* [You Might Not Need Redux (Você Pode Não Precisar de Redux)](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.eaeglfaed) +* [A Dummy’s Guide to Redux and Thunk in React (Um Guia de Bobos para Redux e Thunk em React)](https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3#.mudzrmx8p) [Ler] +* [Redux Tutorials (Tutoriais de Redux](https://www.youtube.com/playlist?list=PLoYCgNOIyGADILc3iUJzygCqC8Tt3bRXt) [Assistir] +* [Getting Started with Redux (Iniciando com Redux)](https://egghead.io/courses/getting-started-with-redux) [Assistir] + * https://github.com/dwyl/learn-redux/blob/master/egghead.io_video_tutorial_notes.md +* [Learn Redux (Aprenda Redux)](https://learnredux.com/) [Assistir] +* [10 Tips for Better Redux Architecture (10 Dicas para uma Melhor Aquitetura de Redux)](https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44#.9s67j3efq) [Assistir] +* [Building React Applications with Idiomatic Redux (Construindo Aplicações em React com Redux Idiomático)](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) [Assistir][$] + +*** + +###### NOTAS: + +Uma vez que você tenha um bom controle do React, você pode considerar olhar [Preact](https://preactjs.com/) ou [Inferno](https://infernojs.org/), ou os dois. Quando você dominar o Redux, dê uma olhada em [MobX](https://mobx.js.org/) ou considere criar sua própria pequena implementação customizada de Redux a partir do zero. diff --git a/translations/pt_BR/aprendendo/seguranca.md b/translations/pt_BR/aprendendo/seguranca.md new file mode 100644 index 00000000..af4e33bc --- /dev/null +++ b/translations/pt_BR/aprendendo/seguranca.md @@ -0,0 +1,15 @@ +# Aprenda Segurança Web (Aplicações e Navegador) + +* [Browser Security Handbook (Inglês)](https://code.google.com/p/browsersec/wiki/Main) :book: +* [Frontend Security (Inglês)](https://mikewest.org/2013/09/frontend-security-frontendconf-2013) :tv: +* [Hacksplaining (Inglês)](https://www.hacksplaining.com/) :book: +* [HTML5 Security Cheatsheet (Inglês)](https://html5sec.org) :book: +* [HTTP Security Best Practice (Inglês)](https://httpsecurityreport.com/best_practice.html) :book: +* [Identity and Data Security for Web Development: Best Practices (Inglês)](https://www.amazon.com.br/Identity-Data-Security-Web-Development-ebook/dp/B01GP09AS6/ref=sr_1_1?s=books&ie=UTF8&qid=1493254356&sr=1-1&keywords=Jonathan+LeBlanc) :book: :moneybag: +* [Segurança Para Desenvolvedores Web](https://www.amazon.com.br/Seguran%C3%A7a-Para-Desenvolvedores-John-Mueller/dp/8575224840/ref=sr_1_2?ie=UTF8&qid=1493254314&sr=8-2&keywords=John+Paul+Mueller+security) :book: :moneybag: +* [The Basics of Web Application Security (Inglês)](http://martinfowler.com/articles/web-security-basics.html) :book: +* [The Internet: Encryption & Public Keys (Inglês)](https://www.youtube.com/watch?v=ZghMPWGXexs&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7&index=6) :tv: +* [The Internet: Cybersecurity & Crime (Inglês)](https://www.youtube.com/watch?v=AuYNXgO_f3Y&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7&index=7) :tv: +* [The Tangled Web: A Guide to Securing Modern Web Applications (Inglês)](http://lcamtuf.coredump.cx/tangled/) :book: :moneybag: +* [Web Security Basics (Inglês)](https://github.com/vasanthk/web-security-basics) :book: +* [Web security](https://developer.mozilla.org/pt-BR/docs/Web/Security) :book: diff --git a/translations/pt_BR/aprendendo/seo.md b/translations/pt_BR/aprendendo/seo.md new file mode 100644 index 00000000..a709df28 --- /dev/null +++ b/translations/pt_BR/aprendendo/seo.md @@ -0,0 +1,13 @@ +# Aprenda SEO (Search Engine Optimization) + +> Otimização de Sites (otimização para motores de pesquisa (português europeu) ou otimização para mecanismos de busca (português brasileiro)) é o conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca gerando conversões, sejam elas, um lead, uma compra, um envio de formulário, agendamento de consulta e outros. + +>— [Wikipédia](https://pt.wikipedia.org/wiki/Otimiza%C3%A7%C3%A3o_para_motores_de_busca) + +##### Aprendizagem geral: + +* [Guia Inicial de SEO do Google (Google Search Engine Optimization Starter Guide)](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf) [leia](em inglês) +* [Fundamentos de SEO (SEO Fundamentals) de David Booth](http://www.lynda.com/Analytics-tutorials/SEO-Fundamentals/187858-2.html) [assista][$](em inglês) +* [Fundamentos de SEO (SEO Fundamentals) de Paul Wilson](http://www.pluralsight.com/courses/seo-fundamentals) [assista][$](em inglês) +* [Tutorial de SEO para Iniciantes em 2016 (SEO Tutorial For Beginners in 2016)](http://www.hobo-web.co.uk/seo-tutorial/) [leia](em inglês) +* [SEO para Web Designers (SEO for Web Designers)](https://webdesign.tutsplus.com/courses/seo-for-web-designers) [assista][$](em inglês) diff --git a/translations/pt_BR/aprendendo/templates.md b/translations/pt_BR/aprendendo/templates.md new file mode 100644 index 00000000..e7eb19bb --- /dev/null +++ b/translations/pt_BR/aprendendo/templates.md @@ -0,0 +1,22 @@ +# Aprenda JS Templates + +Um template JavaScript é geralmente usado, mas nem sempre, com uma solução [MV*](http://todomvc.com/) para separar partes da visão (como a UI) da lógica e modelo (como dados ou JSON). + +* [ES6 Template Literals, the Handlebars killer? (Inglês)](https://www.keithcirkel.co.uk/es6-template-literals/) :book: +* [Getting Started with nunjucks (Inglês)](http://mozilla.github.io/nunjucks/getting-started.html) :book: +* [Instant Handlebars.js (Inglês)](https://www.amazon.com.br/Instant-Handlebars-js-Gabriel-Manricks-ebook/dp/B00FFA0ABY/ref=sr_1_2?ie=UTF8&qid=1492620836&sr=8-2&keywords=Gabriel+Manricks) :book: :moneybag: +* [JavaScript Templating with Handlebars (Inglês)](http://www.pluralsight.com/courses/handlebars-javascript-templating) :tv: :moneybag: +* [Learn Handlebars in 10 Minutes or Less (Inglês)](http://tutorialzine.com/2015/01/learn-handlebars-in-10-minutes/) :book: +* [Lodash Templates (Inglês)](https://lodash.com/docs/4.17.2#template) :newspaper: + +*** + +###### NOTAS: + +Note que JavaScript 2015 (ES6) possui um mecanismo de template nativo chamado ["Template strings"](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings). Ainda, ultimamente JS templates tem sido substituiídos por coisas como [JSX](https://facebook.github.io/jsx/), [um elemento template](http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-basics), ou [HTML strings](https://angular.io/docs/ts/latest/guide/template-syntax.html#). + +*** + +###### CONSELHO: + +Se não estiver usando React e JSX, comece por JavaScript ["Template strings"](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings) e quando não for o suficiente, vá de [nunjucks](http://mozilla.github.io/nunjucks/getting-started.html). diff --git a/translations/pt_BR/aprendendo/testes.md b/translations/pt_BR/aprendendo/testes.md new file mode 100644 index 00000000..844deed5 --- /dev/null +++ b/translations/pt_BR/aprendendo/testes.md @@ -0,0 +1,24 @@ +# Aprendendo Testes + +> **Teste Unitário** - Em programação de computador, teste unitário é um método de teste de software em que cada unidade individual de código fonte, conjuntos de um ou mais módulos de programa de computador juntamente com dados de controle associados, procedimentos de utilização e procedimentos operacionais, são testados para determinar se eles estão aptos para uso. Intuitivamente, pode-se ver uma unidade como a menor parte testável de uma aplicação. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Teste_de_unidade) +> +> **Teste Funcional** - O teste funcional é um processo de garantia de qualidade (QA) e um tipo de teste de caixa preta que baseia seus casos de teste nas especificações do componente de software em teste. Funções são testadas alimentando suas entradas e examinando suas saídas, e a estrutura interna do programa raramente é considerada (não como no teste de caixa branca). O teste funcional geralmente descreve o que o sistema faz. + +>— [Wikipedia (Inglês)](https://en.wikipedia.org/wiki/Functional_testing) +> +> **Teste de Integração** - O teste de integração (às vezes chamado de integração e teste, abreviado I&T) é uma fase no teste de software em que módulos de software individuais são combinados e testados como um grupo. Ocorre depois do teste unitário e antes do teste de validação. Os testes de integração usam como entrada os módulos testados em unidade, agrupa-os em conjuntos maiores, aplica os testes definidos em um plano de teste de integração a esses conjuntos, e entrega como saída o sistema integrado pronto para testes de sistema. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Teste_de_integra%C3%A7%C3%A3o) + +##### Aprendizagem Geral: + +* [Front-End First: Testing and Prototyping JavaScript Apps (Frond-End Primeiro: Testes e Prototipação de Aplicações JavaScript)](http://www.pluralsight.com/courses/testing-and-prototyping-javascript-apps) [Assistir][$] +* [Let's Code: Test-Driven JavaScript (Vamos Codificar: JavaScript Orientado à Teste)](http://www.letscodejavascript.com/) [Assistir][$] +* [JavaScript Testing (Testes de JavaScript)](https://www.udacity.com/course/javascript-testing--ud549) [Assistir][$] +* [JavaScript Testing Recipes (Receitas de Testes de JavaScript)](http://jstesting.jcoglan.com/) [Ler][$] +* [Testable JavaScript (JavaScript Testável)](https://www.amazon.com/gp/product/1449323391?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=a27df21b09e3eff9ad8033a5c959e7f0&camp=1789&creative=9325) [Ler][$] +* [Test-Driving JavaScript Applications: Rapid, Confident, Maintainable Code (Orientando Aplicações JavaScript à Testes: Código Rápido, Confiável e Sustentável)](https://www.amazon.com/Test-Driving-JavaScript-Applications-Confident-Maintainable/dp/1680501747?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=c97c9c87e634569328a335cba0b0c15f&camp=1789&creative=9325)[Ler][$] +* [Test-Driven JavaScript Development (Desenvolvimento JavaScript Orientado à Testes)](https://www.amazon.com/dp/0321683919/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=f707aa5243bf6bac68bda05d1e6369e8&camp=1789&creative=9325) [Ler][$] +* [The Way of the Web Tester: A Beginner's Guide to Automating Tests (O Caminho do Testador Web: Um Guia de Iniciante para Testes Automatizados)](https://www.amazon.com/Way-Web-Tester-Beginners-Automating/dp/1680501836/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=3e2c87950e0350d64c9d9862ed2ef524&camp=1789&creative=9325) [Ler][$] diff --git a/translations/pt_BR/aprendendo/web-api.md b/translations/pt_BR/aprendendo/web-api.md new file mode 100644 index 00000000..9bc0475d --- /dev/null +++ b/translations/pt_BR/aprendendo/web-api.md @@ -0,0 +1,40 @@ +# Aprenda sobre APIs + +![](../images/web-api.png "http://www.evolutionoftheweb.com/") + +Fonte da imagem: http://www.evolutionoftheweb.com/ + +BOM (do inglês, Browser Object Model) e DOM (do inglês, Document Object Model) não são as únicas APIs disponíveis na plataforma web dentro dos navegadores. Tudo o que não é especificamente DOM ou BOM, mas uma interface para programar o navegador, poderia ser considerado uma API web ou de navegador (infelizmente, no passado algumas dessas APIs eram chamadas de APIs HTML5 o que confunde suas próprias especificações/padrões com a verdadeira especificação do HTML5 como linguagem de marcação). Note que APIs web ou de navegadores incluem APIs de aparelhos ([`Navigator.getBattery()`](https://developer.mozilla.org/pt-BR/docs/Web/API/Navigator/getBattery)) que estão disponíveis por meio de navegadores de tablets e celulares. + +Você deve estar ciente e aprender, quando apropriado, APIs web ou de navegadores. Uma boa ferramenta para utilizar e se familiarizar com todas essas APIs seria investigar o [HTML5test.com com resultados para os 5 navegadores mais atuais](https://html5test.com/compare/browser/index.html). + +##### Aprenda: + +* [Pro HTML5 Programming (Inglês)](http://apress.jensimmons.com/v5/pro-html5-programming/ch0.html) :book: + +##### Aprenda Áudio: +* [Add Sound to Your Site With Web Audio (Inglês)](https://code.tutsplus.com/courses/add-sound-to-your-site-with-web-audio) :tv: +* [Fun With Web Audio (Inglês)](https://code.tutsplus.com/courses/fun-with-web-audio/) :tv: +* [Web Audio API (Inglês)](http://chimera.labs.oreilly.com/books/1234000001552/index.html) :book: + +##### Aprenda Canvas: + +* [HTML5 Canvas (Inglês)](http://chimera.labs.oreilly.com/books/1234000001654/index.html) :book: + +*** + +###### NOTAS: + +A MDN possui muitas informações sobre APIs web ou de navegadores. + +* [Referências API Web (MDN)](https://developer.mozilla.org/pt-BR/docs/Web/Reference/API) +* [Referência da API Web - Todas as interfaces por ordem alfabética (MDN)](https://developer.mozilla.org/pt-BR/docs/Web/API) +* [WebAPI - Lista APIs de acesso a aparelhos e outras APIs úteis para aplicações (MDN)](https://developer.mozilla.org/pt-BR/docs/WebAPI) + +Lembre-se de que nem toda API é especificada pela W3C ou WHATWG. + +Ainda, você pode achar as seguintes fontes bastante úteis ao aprender sobre todas as APIs web ou de navegadores: + +* [The HTML 5 JavaScript API Index (Inglês)](http://html5index.org/) +* [HTML5 Overview (Inglês)](http://html5-overview.net/current) +* [platform.html5.org (Inglês)](https://platform.html5.org/) \ No newline at end of file diff --git a/translations/pt_BR/aprendendo/web-fonts.md b/translations/pt_BR/aprendendo/web-fonts.md new file mode 100644 index 00000000..749ed135 --- /dev/null +++ b/translations/pt_BR/aprendendo/web-fonts.md @@ -0,0 +1,15 @@ +# Aprenda sobre Fontes Web & Ícones + +> Tipografia web refere-se ao uso de fontes na Internet. Quando o HTML foi criado pela primeira vez, tipos de letra e estilos eram controlados exclusivamente pelas configurações de cada navegador Web. Não haviam mecanismos para páginas web individuais controlarem a fonte mostrada até que a Netscape introduziu a tag `` em 1995, que foi então padronizada na especificação do HTML 3.2. Contudo, a fonte especificada pela tag precisava ser instalada no computador do usuário ou uma fonte alternativa, como uma fonte padrão do navegador sem serifa ou monoespaçada, seria utilizada. A primeira especificação de Folha de Estilo em Cascata foi publicada em 1996 e forneceu as mesmas capacidades. +> +> A especificação de CSS2 foi lançada em 1998 e tentou melhorar o processo de seleção de fonte, adicionando correspondência de fonte, síntese e download. Essas técnicas não ganharam muito uso e foram removidas na especificação do CSS2.1. No entanto, o Internet Explorer adicionou suporte para o recurso de download de fonte na versão 4.0, lançada em 1997. O download de fonte foi posteriormente incluído no módulo de fontes do CSS3, e desde então implementado no Safari 3.1, Opera 10 e Mozilla Firefox 3.5. Isso, subsequentemente, aumentou o interesse em tipografia Web, assim como o uso de download de fonte. + +>— [Wikipedia (Inglês)](https://en.wikipedia.org/wiki/Web_typography) + +##### Aprendizagem Geral: + +* [A Comprehensive Guide to Font Loading Strategies (Um Guia Completo para Estratégias de Carregamento de Fonte)](https://www.zachleat.com/web/comprehensive-webfonts/) [Ler] +* [Beautiful Web Type a Showcase of the Best Typefaces from the Google Web Fonts Directory (Escrita Bonita na Web, um Mostruário dos Melhores Tipos de Letra do Diretório de Fontes Web do Google)](http://hellohappy.org/beautiful-web-type/) [Ler] +* [Quick Guide to Webfonts via @font-face (Guia Rápido para Fontes Web via @font-face)](http://www.html5rocks.com/en/tutorials/webfonts/quick/) [Ler] +* [Responsive Typography (Tipografia Responsiva)](https://frontendmasters.com/courses/responsive-typography/) [Assistir][$] +* [Typography for the Web (Tipografia para a Web)](http://www.pluralsight.com/courses/typography-for-web-1790) [Assistir][$] diff --git a/translations/pt_BR/ferramentas.md b/translations/pt_BR/ferramentas.md new file mode 100644 index 00000000..9fb79558 --- /dev/null +++ b/translations/pt_BR/ferramentas.md @@ -0,0 +1,11 @@ +# Parte III: Ferramentas de Desenvolvimento Front-End + +A parte três explica e identifica brevemente algumas ferramentas do mercado. + +Certifique-se de entender a categoria de cada conjunto de ferramentas antes de estudar as ferramentas em si. + +Note que só porque uma ferramenta é listada, ou uma categoria de ferramentas é documentada, não significa que eu afirme que um desenvolvedor front-end deva aprendê-la e usá-la. Escolha a sua própria caixa de ferramentas. Estou apenas apresentando as opções comuns da caixa de ferramentas. + +![](images/spectrum.png "https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0") + +Fonte da imagem: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0 diff --git a/translations/pt_BR/ferramentas/acessibilidade.md b/translations/pt_BR/ferramentas/acessibilidade.md new file mode 100644 index 00000000..d7409b6d --- /dev/null +++ b/translations/pt_BR/ferramentas/acessibilidade.md @@ -0,0 +1,46 @@ +# Ferramentas para Desenvolvimento de Acessibilidade + +## Guias +* [Accessibility Guidelines Checklist (Checklist de Diretrizes de Acessibilidade)](http://accessibility.voxmedia.com) +* [Interactive WCAG 2.0 (WCAG Interativo 2.0)](http://code.viget.com/interactive-wcag/) +* [18F Accessibility Guide (Guia de Acessibilidade 18F)](https://pages.18f.gov/accessibility/checklist/) + +## Escaneadores de Site +* [aXe Browser Extension (Extensão de Navegador aXe)](http://www.deque.com/products/axe/) +* [Chrome Accessibility Developer Tools (Ferramentas de Desenvolvimento para Acessibilidade do Chrome)](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb) +* [Tenon Accessibility Tool (Ferramenta de Acessibilidade Tenon)](https://tenon.io) +* [WAVE Accessibility Tool (Ferramenta de Acessibilidade WAVE)](http://wave.webaim.org) + +## Testadores de Contraste de Cor +* [Colorable](http://jxnblk.com/colorable/demos/text/) +* [Colorable Matrix](http://jxnblk.com/colorable/demos/matrix/) +* [Color Safe](http://colorsafe.co) +* [Color Ratio](http://leaverou.github.io/contrast-ratio/) + +## Simuladores de Visão Baixa +* [SEE](https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn) (Chrome) +* [Spectrum](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb) (Chrome) +* [NoCoffee](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl) (Chrome) + +## Leitores de Tela +* [VoiceOver](http://www.apple.com/accessibility/) (Mac) +* [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Win) +* [NVDA](https://www.nvaccess.org) (Win) +* [Window-Eyes](https://www.aisquared.com/products/window-eyes/) (Win) +* [ChromeVox](http://www.chromevox.com) (Chrome extension) +* [Basic screen reader commands (Comandos Básicos de Leitor de Tela)](https://www.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/) + +## Testadores de Legibilidade +* [Expresso App](http://www.expresso-app.org) +* [Hemingway App](http://www.hemingwayapp.com) +* [Grammarly](https://www.grammarly.com) +* [Readability Score (Pontuação de Legibilidade)](https://readability-score.com/text/) +* [MS Office](https://support.office.com/pt-br/article/Testar-a-legibilidade-do-documento-85b4969e-e80a-4777-8dd3-f7fc3c8b3fd2?ui=pt-BR&rs=pt-BR&ad=BR) + +## Artigos +* [Getting Started with ARIA (Começando com ARIA)](http://a11yproject.com/posts/getting-started-aria/) +* [Reframing Accessibility for the Web (Reformulação de Acessibilidade para Web)](http://alistapart.com/article/reframing-accessibility-for-the-web) +* [An Alphabet of Accessibility Issues (Um Alfabeto de Problemas de Acessibilidade)](https://the-pastry-box-project.net/anne-gibson/2014-July-31) +* [Practical ARIA Examples (Exemplos práticos de ARIA)](http://heydonworks.com/practical_aria_examples/) +* [MDN Accessibility Guide (MDN Guia de Acessibilidade)](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) +* [Enable accessibility panel in Chrome dev tools (Habilite o painel de acessibilidade nas ferramentas de desenvolvedor do Chrome)](https://umaar.com/dev-tips/101-accessibility-inspection/) diff --git "a/translations/pt_BR/ferramentas/anima\303\247\303\243o.md" "b/translations/pt_BR/ferramentas/anima\303\247\303\243o.md" new file mode 100644 index 00000000..9e9b82b9 --- /dev/null +++ "b/translations/pt_BR/ferramentas/anima\303\247\303\243o.md" @@ -0,0 +1,18 @@ +# Ferramentas de Animação + +* [Animate (Inglês)](https://github.com/daneden/animate.css) +* [Anime (Inglês)](https://github.com/juliangarnier/anime) +* [Animista.net (Inglês)](http://animista.net/) +* [Dynamics.js (Inglês)](http://dynamicsjs.com/) +* [GreenSock-JS (Inglês)](http://greensock.com/) +* [Magic (Inglês)](https://github.com/miniMAC/magic) +* [TweenJS (Inglês)](https://github.com/CreateJS/TweenJS) +* [Velocity.js (Inglês)](http://julian.com/research/velocity/) + +##### Polyfills/Shims: + +* [web-animations-js (Inglês)](https://github.com/web-animations/web-animations-js) + +##### Referência Sobre Animações: + +* [canianimate.com (Inglês)](http://canianimate.com/) diff --git a/translations/pt_BR/ferramentas/baas.md b/translations/pt_BR/ferramentas/baas.md new file mode 100644 index 00000000..ec856105 --- /dev/null +++ b/translations/pt_BR/ferramentas/baas.md @@ -0,0 +1,25 @@ +# Ferramentas de BaaS: + +##### Dados/Back-end Como um Serviço (BAAS): + +* [Back&](https://www.backand.com/) [grátis e pago] +* [Firebase](https://www.firebase.com/index.html) [grátis e pago] +* [Kinvey](http://www.kinvey.com/) ["grátis" e pago] +* [Pusher](https://pusher.com/) [grátis e pago] +* [restdb.io](https://restdb.io/) [grátis e pago] + +##### Dados/Back-end + +* [Horizon](http://horizon.io/) +* [GraphQL](http://graphql.org/) + * [http://www.apollodata.com/](http://www.apollodata.com/) + * [Relay](https://facebook.github.io/relay/) +* [Falcor](https://netflix.github.io/falcor/) +* [RxDB](https://github.com/pubkey/rxdb) + +##### Gerenciamento de Usuários Como um Serviço: + +* [Auth0](https://auth0.com) [pago] +* [AuthRocket](https://authrocket.com) +* [Stormpath](https://stormpath.com/) +* [UserApp](https://www.userapp.io/) [grátis e pago] diff --git a/translations/pt_BR/ferramentas/build.md b/translations/pt_BR/ferramentas/build.md new file mode 100644 index 00000000..f6ac2012 --- /dev/null +++ b/translations/pt_BR/ferramentas/build.md @@ -0,0 +1,36 @@ +# Ferramentas de Build + +##### Ferramentas de Build/Tasking: [^1] + +* [Gulp](http://gulpjs.com/) +* [Broccoli.js](http://broccolijs.com/) + +##### Ferramentas de Build/Tasking *Optionated* (obriga o desenvolvedor a programar de determinada maneira): + +* [Brunch](http://brunch.io/) +* [Mimosa](http://mimosa.io/) +* [Lineman](http://linemanjs.com/) + +*** + +###### AVISO: + +[^1] Antes de utilizar Gulp, certifique-se de que [npm scripts](https://docs.npmjs.com/misc/scripts) ou [yarn script](https://yarnpkg.com/en/docs/package-json#toc-scripts) não sejam uma opção melhor. Leia, ["Porque troquei Gulp e Grunt por npm Scripts" (inglês)](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.nw3huib54). + +*** + +###### RESULTADOS DE PESQUISA: + +As imagens abaixo são da [Pesquisa de Ferramentas para Frontend de 2016](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results) (4715 desenvolvedores) e da [Pesquisa de Estado do JS 2016](http://stateofjs.com/) (9307 desenvolvedores) + +![](../images/q11.jpg "https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results") + +Fonte da imagem: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results + +![](../images/task1.png "http://stateofjs.com/") + +Fonte da imagem: http://stateofjs.com/ + +![](../images/tasks2.png "http://stateofjs.com/") + +Fonte da imagem: http://stateofjs.com/ diff --git a/translations/pt_BR/ferramentas/cms.md b/translations/pt_BR/ferramentas/cms.md new file mode 100644 index 00000000..e3007567 --- /dev/null +++ b/translations/pt_BR/ferramentas/cms.md @@ -0,0 +1,22 @@ +# Ferramentas para CMS/API + +##### Ferramentas de API CMS (Entrega de Conteúdo CMS, por exemplo): + +* [Contentful](https://www.contentful.com/) [pago] +* [Cosmic JS](https://cosmicjs.com/) [grátis e pago] +* [prismic.io](https://prismic.io/) [grátis e pago] +* [elemeno](https://elemeno.io) [grátis e pago] + +##### Ferramentas para CMS hospedado: + +* [Cushy CMS](https://www.cushycms.com) [grátis e pago] +* [LightCMS](https://www.lightcms.com) [pago] +* [Page Lime](http://www.pagelime.com/) [pago] +* [Surreal CMS](http://www.surrealcms.com/) [pago] + +##### Ferramentas para CMS estático: + +* [webhook.com](http://www.webhook.com/) +* [Dato CMS](https://www.datocms.com/) +* [siteleaf](https://www.siteleaf.com/) +* [forestry.io](https://forestry.io/) diff --git a/translations/pt_BR/ferramentas/comunicacao-colaboracao.md b/translations/pt_BR/ferramentas/comunicacao-colaboracao.md new file mode 100644 index 00000000..6c2cee6e --- /dev/null +++ b/translations/pt_BR/ferramentas/comunicacao-colaboracao.md @@ -0,0 +1,10 @@ +# Ferramentas para Comunicação e Colaboração + +* [Slack](https://slack.com/) e [screenhero](https://screenhero.com/) [grátis e pago] +* [appear.in](https://appear.in/) +* [Mattermost](https://mattermost.org/) [grátis e pago] +* [TeamViewer](https://www.teamviewer.com/) [grátis e pago] + +##### Comunicação e Colaboração Code/GitHub: + +* [Gitter](https://gitter.im) [grátis e pago] diff --git a/translations/pt_BR/ferramentas/css.md b/translations/pt_BR/ferramentas/css.md new file mode 100644 index 00000000..5e6bd0ae --- /dev/null +++ b/translations/pt_BR/ferramentas/css.md @@ -0,0 +1,104 @@ +# Ferramentas para CSS + +##### Frameworks CSS para Desktop & Mobile: + +* [Base (Inglês)](http://getbase.org/) +* [Basscss (Inglês)](http://basscss.com/) +* [Bulma (Inglês)](http://bulma.io/) +* [Bootstrap 3 (Inglês)](http://getbootstrap.com/components/) or [Bootstrap 4 (Inglês)](https://v4-alpha.getbootstrap.com/) +* [Concise (Inglês)](http://concisecss.com/) +* [Foundation (Inglês)](http://foundation.zurb.com/) +* [Material Design Lite (MDL) (Inglês)](http://www.getmdl.io/index.html) +* [Metro UI (Inglês)](http://metroui.org.ua/) +* [Picnic (Inglês)](http://picnicss.com/) +* [Pure.css (Inglês)](http://purecss.io/) +* [Semantic UI](http://semantic-ui.com/) +* [Skeleton (Inglês)](http://getskeleton.com/) +* [Spectre.css (Inglês)](https://picturepan2.github.io/spectre/) +* [tachyons (Inglês)](https://github.com/tachyons-css/tachyons/) + +##### Frameworks CSS para Mobile: + +* [Ratchet (Inglês)](http://goratchet.com/) + +##### CSS Reset: + +> Um CSS Reset (ou “Reset CSS”) são conjuntos curtos de regras CSS, geralmente compressos (minificados) que resetam o estilo de todos os elementos HTML para uma baseline consistente. + +>— [cssreset.com](http://cssreset.com/what-is-a-css-reset/) + +* [Eric Meyer's “Reset CSS” 2.0 (Inglês)](http://meyerweb.com/eric/tools/css/reset/) +* [Normalize (Inglês)](https://necolas.github.io/normalize.css/) + +##### Transpiladores: + +* [pleeease.io (Inglês)](http://pleeease.io/) +* [PostCSS (Inglês)](https://github.com/postcss/postcss) & [cssnext (Inglês)](http://cssnext.io/) +* [rework (Inglês)](https://github.com/reworkcss/rework) & [myth (Inglês)](http://www.myth.io/) +* [Sass/SCSS (Inglês)](http://sass-lang.com/) +* [Stylus (Inglês)](https://github.com/stylus/stylus) + +##### Referências: + +* [css3test.com (Inglês)](http://css3test.com/) +* [css3clickchart.com (Inglês)](http://css3clickchart.com/) +* [cssreference.io (Inglês)](http://cssreference.io/) +* [CSS Indexes - A listing of every term defined by CSS specs (Inglês)](https://drafts.csswg.org/indexes/) +* [css4-selectors.com (Inglês)](http://css4-selectors.com/) +* [css4 Rocks (Inglês)](http://css4.rocks/) +* [CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE (Inglês)](http://csstriggers.com/) +* [CSS Tricks Almanac (Inglês)](https://css-tricks.com/almanac/) +* [cssvalues.com (Inglês)](http://cssvalues.com/) +* [MDN Referência CSS (Inglês)](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Reference) + +##### Linting/Hinting: + +* [CSS Lint (Inglês)](http://csslint.net/) +* [stylelint (Inglês)](http://stylelint.io/) + +##### Formatter/Beautifier de Código: + +* [CSScomb (Inglês)](https://github.com/csscomb/csscomb.js) +* [CSSfmt (Inglês)](https://github.com/morishitter/cssfmt) + +##### Otimizadores: + +* [clear-css (Inglês)](https://github.com/jakubpawlowicz/clean-css) +* [cssnano (Inglês)](http://cssnano.co/) +* [CSSO (Inglês)](http://css.github.io/csso/) + +##### Ferramentas Online de Criação/Geração/Experimentação: + +* [CSS Arrow Please (Inglês)](http://cssarrowplease.com/) +* [CSS Matic (Inglês)](http://www.cssmatic.com/) +* [Enjoy CSS (Inglês)](http://enjoycss.com/) +* [Flexbox Playground (Inglês)](https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground) +* [flexplorer (Inglês)](http://bennettfeely.com/flexplorer/) +* [patternify.com (Inglês)](http://patternify.com) +* [patternizer.com (Inglês)](http://patternizer.com/) +* [Ultimate CSS Gradient Generator (Inglês)](http://www.colorzilla.com/gradient-editor/) + +##### Arquiteturas CSS: + +* [Atomic Design (Inglês)](http://atomicdesign.bradfrost.com/) :book: +* [BEM (Inglês)](http://getbem.com/introduction/) +* [ITCSS (Inglês)](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) +* [OOCSS (Inglês)](http://oocss.org/) :book: +* [SMACSS (Inglês)](https://smacss.com/) :book: :moneybag: + * [Scalable Modular Architecture for CSS (SMACSS) (Inglês)](https://frontendmasters.com/courses/smacss/) :tv: :moneybag: +* [SUIT CSS (Inglês)](http://suitcss.github.io) +* [rscss (Inglês)](http://rscss.io/) + +##### Convenções de Autoria/Arquitetura: + +* [CSS code guide (Inglês)](http://codeguide.co/#css) :book: +* [css-architecture (Inglês)](https://github.com/jareware/css-architecture) :book: +* [cssguidelin.es (Inglês)](http://cssguidelin.es/) :book: +* [Idiomatic CSS](https://github.com/necolas/idiomatic-css/tree/master/translations/pt-BR) :book: +* [MaintainableCSS (Inglês)](http://maintainablecss.com/) :book: +* [Standards for Developing Flexible, Durable, and Sustainable HTML and CSS (Inglês)](http://mdo.github.io/code-guide/) :book: +* [Airbnb CSS / Sass Styleguide (Inglês)](https://github.com/airbnb/css) :book: + +##### Repositórios de CSS Tendência no GitHub Esse Mês: + +[https://github.com/trending?l=css&since=monthly](https://github.com/trending?l=css&since=monthly) diff --git a/translations/pt_BR/ferramentas/db.md b/translations/pt_BR/ferramentas/db.md new file mode 100644 index 00000000..d694f4ae --- /dev/null +++ b/translations/pt_BR/ferramentas/db.md @@ -0,0 +1,12 @@ +# Ferramentas para Armazenamento Front-End (Solução de Armazenamento de Dados no Cliente) + +* [AlaSQL (Inglês)](http://alasql.org/) +* [Dexie.js (Inglês)](http://www.dexie.org/) +* [ForerunnerDB (Inglês)](http://forerunnerdb.com/) +* [LocalForage (Inglês)](https://localforage.github.io/localForage/) +* [LokiJS (Inglês)](http://lokijs.org/#/) +* [Lovefield (Inglês)](https://google.github.io/lovefield) +* [lowdb (Inglês)](https://github.com/typicode/lowdb) +* [Pouchdb (Inglês)](http://pouchdb.com/) +* [NeDB (Inglês)](https://github.com/louischatriot/nedb) +* [YDN-DB (Inglês)](http://dev.yathit.com/ydn-db/index.html) diff --git a/translations/pt_BR/ferramentas/deploy.md b/translations/pt_BR/ferramentas/deploy.md new file mode 100644 index 00000000..9baecc7f --- /dev/null +++ b/translations/pt_BR/ferramentas/deploy.md @@ -0,0 +1,13 @@ +# Ferramentas de Deploy + +* [Bamboo (Inglês)](https://www.atlassian.com/software/bamboo/) [pago] +* [Buddy (Inglês)](https://buddy.works/) [grátis e pago] +* [CircleCI (Inglês)](https://circleci.com/) [grátis e pago] +* [Codeship (Inglês)](https://codeship.com/) [grátis e pago] +* [Deploybot (Inglês)](https://deploybot.com/) [grátis e pago] +* [Deployhq (Inglês)](https://www.deployhq.com/) [grátis e pago] +* [FTPLOY (Inglês)](http://ftploy.com/) [grátis e pago] +* [Now (Inglês)](https://zeit.co/now) [grátis e pago] +* [Travis CI (Inglês)](http://docs.travis-ci.com/) [grátis e pago] +* [Semaphore (Inglês)](https://semaphoreci.com/) [grátis e pago] +* [Springloops (Inglês)](http://www.springloops.io/) [grátis e pago] diff --git a/translations/pt_BR/ferramentas/dev-tools.md b/translations/pt_BR/ferramentas/dev-tools.md new file mode 100644 index 00000000..98c7f011 --- /dev/null +++ b/translations/pt_BR/ferramentas/dev-tools.md @@ -0,0 +1,7 @@ +# Ferramentas Gerais Para Front-End + +##### Ferramentas de Desenvolvimento: + +* [Browsersync](http://www.browsersync.io/) +* [CodeKit](http://incident57.com/codekit/) +* [Prepros](https://prepros.io/) diff --git a/translations/pt_BR/ferramentas/diagramacao.md b/translations/pt_BR/ferramentas/diagramacao.md new file mode 100644 index 00000000..94c27ece --- /dev/null +++ b/translations/pt_BR/ferramentas/diagramacao.md @@ -0,0 +1,5 @@ +# Ferramentas para Diagramação + +* [draw.io](https://www.draw.io/) [free to $] +* [Cacoo](https://cacoo.com) [free to $] +* [gliffy](https://www.gliffy.com/products/online/) [free to $] diff --git a/translations/pt_BR/ferramentas/dom.md b/translations/pt_BR/ferramentas/dom.md new file mode 100644 index 00000000..7b3cb22b --- /dev/null +++ b/translations/pt_BR/ferramentas/dom.md @@ -0,0 +1,47 @@ +# Ferramentas para DOM + +##### Bibliotecas/Frameworks para DOM: + +* [Bliss](http://blissfuljs.com/docs.html) +* [jQuery](http://jquery.com/) + * [You Don't Need jQuery (Você Não Precisa de jQuery)](https://github.com/oneuijs/You-Dont-Need-jQuery) +* [Zepto](http://zeptojs.com/) +* [cash](https://github.com/kenwheeler/cash/) +* [Umbrella JS](http://umbrellajs.com/) + +##### Utiltários para DOM: + +* [Keypress](http://dmauro.github.io/Keypress/) +* [Tether](http://tether.io/docs/welcome/) +* [clipboard.js](http://zenorocha.github.io/clipboard.js/) + +##### Ferramentas de Evento para DOM: + +* [Keyboard Event Viewer](http://w3c.github.io/uievents/tools/key-event-viewer.html) + +##### Ferramentas de Performance para DOM: + +* [Como usar a ferramenta Timeline](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool) +* [DOM Monster (Monstro do DOM)](http://mir.aculo.us/dom-monster/) + +##### Referências: + +* [Events (Eventos)](https://html.spec.whatwg.org/#events-2) +* [DOM Browser Support (Suporte dos Navegadores ao DOM)](http://www.webbrowsercompatibility.com/dom/desktop/) +* [DOM Events Browser Support (Suporte de Eventos dos Navegadores ao DOM)](http://www.webbrowsercompatibility.com/dom-events/desktop/) +* [HTML Interfaces Browser Support (Suporte de Interfaces HTML dos Navegadores)](http://www.webbrowsercompatibility.com/html-interfaces/desktop/) +* [MDN Document Object Model (DOM) (MDN Modelo de Objeto de Documento (DOM))](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) +* [MDN Modelo de Objeto de Navegador](https://developer.mozilla.org/pt-BR/docs/Web/API/Window) +* [MDN Modelo de Objeto de Documento](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model) +* [MDN Event reference (MDN Referência de Eventos)](https://developer.mozilla.org/en-US/docs/Web/Events) +* [MSDN Document Object Model (DOM) (MSDN Modelo de Objeto de Documento (DOM))](https://msdn.microsoft.com/en-us/library/hh772384%28v=vs.85%29.aspx) + +##### Polyfills/Shims de DOM: + +* [dom-shims](https://github.com/necolas/dom-shims) +* [Pointer Events Polyfill: a unified event system for the web platform (Polyfill de Eventos de Ponteiro: um sistema de evento unificado para a plataforma web)](https://github.com/jquery/PEP) + +##### DOM Virtual: + +* [jsdom](https://github.com/tmpvar/jsdom) +* [virtual-dom](https://github.com/Matt-Esch/virtual-dom) \ No newline at end of file diff --git a/translations/pt_BR/ferramentas/editor-codigos.md b/translations/pt_BR/ferramentas/editor-codigos.md new file mode 100644 index 00000000..2ebe6843 --- /dev/null +++ b/translations/pt_BR/ferramentas/editor-codigos.md @@ -0,0 +1,49 @@ +# Ferramentas para Edição de Código + +> Um editor de código fonte é um editor de texto projetado especificamente para edição de código fonte por programadores. Pode ser uma aplicação autônoma ou pode ser construído dentro de um ambiente de desenvolvimento integrado (IDE) ou navegador web. Editores de código fonte são as ferramentas de programação mais fundamentais, assim como a função fundamental de programadores é escrever e editar código fonte. + + +>— [Wikipedia (Inglês)](https://en.wikipedia.org/wiki/Source_code_editor) + +Código Front-end pode ser minimamente editado com uma aplicação de edição de texto simples como Notepad ou TextEdit. Mas a maioria dos profissionais de front-end usam editores de código projetados especificamente para editar uma linguagem de programação. + +Existem editores de código de todos os tipos e tamanhos, por assim dizer. Selecionar um é um compromisso bastante subjetivo. Escolher um, aprender por dentro e por fora, então aprender HTML, CSS, DOM e JavaScript. + +Entretanto, eu acredito fortemente que, minimamente, um editor de código deve ter as seguintes qualidades (por padrão ou por meio de plugins): + +1. Boa documentação em como utilizar o editor +2. Relatório (isto é, sugestão/análise/erros) da qualidade do código de HTML, CSS e JavaScript. +3. Oferecer realce de sintaxe para HTML, CSS e JavaScript. +4. Oferecer preenchimento de código para HTML, CSS e JavaScript. +5. Ser customizável por meio de arquitetura de plug-in +6. Ter um grande respositório de plugins de terceiros/comunidade disponível que podem ser usados para customizar o editor ao seu gosto +7. Ser pequeno, simples e não acoplado ao código (isto é, não requerido para editar o código) + +##### Editores de Código: [^1] + +* [Atom](https://atom.io/) +* [Brackets](http://brackets.io/) +* [Sublime Text](http://www.sublimetext.com/) [$] +* [WebStorm](https://www.jetbrains.com/webstorm/whatsnew/) [$] +* [Visual Studio Code](https://code.visualstudio.com/) + +##### Editores de Código Online: + +* [Cloud9](https://c9.io) [free to $] +* [Codeanywhere](https://codeanywhere.com) [free to $] + +##### Editores de Código Compartilháveis e Executáveis: + +Usado para compartilhar quantidades limitadas de código imediatamente executáveis. Não é um verdadeiro editor de código, mas uma ferramenta que pode ser utilizada para pequenas quantidades de código imediatamente executáveis em um navegador web. + +* [CodePen](http://codepen.io/) [free to $] +* [jsbin.com](http://jsbin.com/) [free to $] +* [jsfiddle.net](http://jsfiddle.net/) +* [liveweave.com](http://liveweave.com/) +* [Plunker](http://plnkr.co/) + +*** + +###### AVISO: + +[^1] Eu recomendo usar o [Visual Studio Code](https://code.visualstudio.com/) por causa da qualidade da ferramenta e melhorias contínuas feitas para o editor que provavelmente não vão parar ou diminuir pelo fato de que a Microsoft está por trás da ferramenta. diff --git a/translations/pt_BR/ferramentas/encontrar-ferramentas.md b/translations/pt_BR/ferramentas/encontrar-ferramentas.md new file mode 100644 index 00000000..7496dc9a --- /dev/null +++ b/translations/pt_BR/ferramentas/encontrar-ferramentas.md @@ -0,0 +1,9 @@ +# Ferramentas para Encontrar Ferramentas + +* [built with (Inglês)](http://builtwith.com/) +* [javascripting.com (Inglês)](http://www.javascripting.com) +* [js.coach (Inglês)](https://js.coach/) +* [microjs.com (Inglês)](http://microjs.com) +* [npms (Inglês)](https://npms.io/) +* [stackshare.io (Inglês)](http://stackshare.io/) +* [Unheap (Inglês)](http://www.unheap.com/) \ No newline at end of file diff --git a/translations/pt_BR/ferramentas/estaticos.md b/translations/pt_BR/ferramentas/estaticos.md new file mode 100644 index 00000000..ae7b85f1 --- /dev/null +++ b/translations/pt_BR/ferramentas/estaticos.md @@ -0,0 +1,13 @@ +# Ferramentas para Geradores de Sites Estáticos + +##### Listagem de Geradores de Sites [^1] + +* [staticgen.com](https://www.staticgen.com/) +* [staticsitegenerators.net](https://staticsitegenerators.net/) +* [Metalsmith](http://www.metalsmith.io/) + +*** + +###### AVISO: + +[^1] Antes de usar um gerador de site estático, considere usar o [Gulp](http://gulpjs.com/) para orquestrar uma solução personalizada ou utilizar uma ferramenta que faz uso do Gulp para a geração de site estático. Por exemplo, [Gulp Starter](https://github.com/vigetlabs/gulp-starter) diff --git a/translations/pt_BR/ferramentas/frameworks.md b/translations/pt_BR/ferramentas/frameworks.md new file mode 100644 index 00000000..5f7618bd --- /dev/null +++ b/translations/pt_BR/ferramentas/frameworks.md @@ -0,0 +1,98 @@ +# Ferramentas para Frameworks (Mobile, Desktop, Web e etc.) + +##### Frameworks Front-End Para Aplicações: [^1] + +* [AngularJS](https://github.com/angular/angular.js) (Angular 1.x.x) + [Batarang](https://github.com/angular/angularjs-batarang) +* [Angular](https://github.com/angular/angular) (Angular 2.0.0 +) + [angular-cli](https://github.com/angular/angular-cli) +* [Aurelia](http://aurelia.io/) + [Aurelia CLI](https://github.com/aurelia/cli) +* [Ember](http://emberjs.com/) + [embercli](https://ember-cli.com/) + [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en) +* [Polymer](https://www.polymer-project.org/1.0/) +* [React](http://facebook.github.io/react/) + [create-react-app](https://github.com/facebookincubator/create-react-app) + [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) +* [Vue.js](http://vuejs.org/) + [vue-cli](https://github.com/vuejs/vue-cli) e [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) +* [Riot](http://riotjs.com/) + +##### Frameworks Nativos/Híbridos Mobile e WebView (Orientado a Motor de Navegador): + +Estas soluções normalmente utilizam [Cordova](https://cordova.apache.org/), [crosswalk](https://crosswalk-project.org/), ou uma WebView customizada como ponte entre APIs nativas. + +* [ionic](http://ionicframework.com/) +* [onsen.io](http://onsen.io/) + +##### Ambientes/Plataformas/Ferramentas Para Frameworks Nativos/Híbridos Mobile e WebView (Orientado a Motor de Navegador): + +Estas soluções normalmente utilizam [Cordova](https://cordova.apache.org/), [crosswalk](https://crosswalk-project.org/), ou uma WebView customizada como ponte entre APIs nativas. + +* [Adobe PhoneGap](http://phonegap.com/) :moneybag: +* [AppBuilder](http://www.telerik.com/appbuilder) :moneybag: +* [cocoon.io](https://cocoon.io) :free: a :moneybag: +* [ionic hub](http://ionic.io/) :free: a :moneybag: +* [kony](http://www.kony.com/products/mobility-platform) :moneybag: +* [Monaca](https://monaca.io/) :moneybag: +* [Taco](http://taco.tools/) + +##### Frameworks Para WebView Nativa de Desktop (Orientado a Motor de Navegador): + +* [Electron](http://electron.atom.io/) +* [NW.js](https://github.com/nwjs/nw.js) + +##### Frameworks Para Qualquer Plataforma: + +Estas soluções pegam a sua aplicação e constroem-na para diversas plataformas e aparelhos. + +* [manifoldJS](http://manifoldjs.com/) + +##### Frameworks Mobile Nativos (Aplicações Nativas JavaScript) + +Estas soluções utilizam um motor JS em tempo de execução para interpretar o JS e fazer uma ponte entre ele e as AP/is nativas. Não são utilizados nenhum motor de navegador ou WebView. A UI é construída a partir de componentes de UI nativos. + +* [NativeScript](https://www.nativescript.org/) +* [React Native](https://facebook.github.io/react-native/) +* [tabris.js](https://tabrisjs.com/) :free: a :moneybag: +* [trigger.io](https://trigger.io/how-it-works/) :moneybag: +* [weex](https://weex-project.io/) + +##### Referências: + +* [todomvc.com](http://todomvc.com/) +* [Frontend Guidelines Questionnaire](https://github.com/bradfrost/frontend-guidelines-questionnaire) +* [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) + +##### Performance: + +* [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) + +*** + +###### NOTAS: + +Fique de olho em [inferno](https://github.com/trueadm/inferno), [Svelte](https://svelte.technology/guide), e [NX](https://github.com/RisingStack/nx-framework) em 2017 para a construção de aplicações baseadas em componentes UI. + +*** + +###### CONSELHO: + +[^1] Se você for novo no desenvolvimento de aplicações front-end/JavaScript, eu começaria pelo [Riot](http://riotjs.com/) ou [Vue.js](http://vuejs.org/). Então iria para o [React](http://facebook.github.io/react/). Por fim, daria uma olhada em [Angular 2](https://angular.io/), [Ember](http://emberjs.com/), ou [Aurelia](http://aurelia.io/). + +Se você está construindo site simples que possui interações mínimas com dados (a maioria do conteúdo é estático), você deve evitar frameworks front-end. Muito trabalho pode ser feito com um task runner como [Gulp and jQuery](https://github.com/vigetlabs/gulp-starter), enquanto evita-se a complexidade desnecessária de se aprender e usar um framework. + +Se quiser algo menor que o React, considere o [Preact](https://preactjs.com/). Preact é uma tentativa de recriar o valor da proposição central do React (ou bibliotecas similates como Mithril) utilizando o mínimo de código possível, com suporte de primeira classe para ES2015. Atualmente a biblioteca possui por volta de 3kb (minificada e gzipada). + +Não consegue se decidir entre React ou Angular 2? Leia ["Angular 2 vs React: The Ultimate Dance Off (Inglês)"](https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c#.j0r1xdvzl) + +*** + +###### RESULTADOS DE PESQUISAS: + +As imagens abaixo são da [Pesquisa Sobre Frontend Tooling 2016 (Inglês)](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results) (4715 desenvolvedores) e [Pesquisa Sobre o Estado do JS 2016 (Inglês)](http://stateofjs.com/) (9307 desenvolvedores) + +![](../images/q13.jpg "https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results") + +Fonte da Imagem: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results + +![](../images/frameworks1.png "http://stateofjs.com/") + +Fonte da Imagem: http://stateofjs.com/ + +![](../images/frameworks2.png "http://stateofjs.com/") + +Fonte da Imagem: http://stateofjs.com/ diff --git a/translations/pt_BR/ferramentas/graficos.md b/translations/pt_BR/ferramentas/graficos.md new file mode 100644 index 00000000..9ebf08a3 --- /dev/null +++ b/translations/pt_BR/ferramentas/graficos.md @@ -0,0 +1,24 @@ +# Ferramentas Gráficas (ex. SVG, Canvas e etc.) + +##### Geral: + +* [Fabric.js (Inglês)](http://fabricjs.com/) +* [Two.js (Inglês)](http://jonobr1.github.io/two.js/#introduction) + +##### Canvas: + +* [EaselJS (Inglês)](https://github.com/CreateJS/EaselJS) +* [Paper.js (Inglês)](http://paperjs.org/) + +##### SVG: + +* [d3 (Inglês)](http://d3js.org/) +* [GraphicsJS (Inglês)](http://www.graphicsjs.org/) +* [Raphaël (Inglês)](http://raphaeljs.com/) +* [Snap.svg (Inglês)](http://snapsvg.io/) +* [svg.js (Inglês)](http://svgjs.com/) + +##### WebGL: + +* [pixi.js (Inglês)](https://github.com/pixijs/pixi.js) +* [three.js (Inglês)](http://threejs.org/) \ No newline at end of file diff --git a/translations/pt_BR/ferramentas/hospedagem.md b/translations/pt_BR/ferramentas/hospedagem.md new file mode 100644 index 00000000..25e53d39 --- /dev/null +++ b/translations/pt_BR/ferramentas/hospedagem.md @@ -0,0 +1,15 @@ +# Ferramentas de Hospedagem + +##### Geral + +* [AWS](https://aws.amazon.com/websites/) [pago] +* [DigitalOcean (Inglês)](https://digitalocean.com) [pago] +* [Heroku (Inglês)](https://heroku.com) [grátis e pago] + +##### Estático + +* [Firebase Hosting](https://firebase.google.com/docs/hosting/) +* [netlify (Inglês)](https://www.netlify.com) [grátis e pago] +* [Bitballoon (Inglês)](https://www.bitballoon.com/) +* [Surge (Inglês)](https://surge.sh/) [grátis e pago] +* [Forge (Inglês)](https://getforge.com/) [pago] diff --git a/translations/pt_BR/ferramentas/html.md b/translations/pt_BR/ferramentas/html.md new file mode 100644 index 00000000..3503a5f3 --- /dev/null +++ b/translations/pt_BR/ferramentas/html.md @@ -0,0 +1,59 @@ +# Ferramentas para HTML + +##### Templates HTML/Boilerplates/Kits de Iniciante: + +* [dCodes](http://www.dcodes.net/2/docs/index.html) +* [Email-Boilerplate](https://github.com/seanpowell/Email-Boilerplate) +* [HTML5 Boilerplate](https://html5boilerplate.com/) +* [HTML5 Bones](http://html5bones.com/) +* [Mobile boilerplate](https://html5boilerplate.com/mobile/) +* [Kit do iniciante na Web](https://developers.google.com/web/tools/starter-kit) + +##### Polyfill HTML: + +* [html5shiv](https://github.com/aFarkas/html5shiv) + +##### Transpilação: + +* [HAML](http://haml.info/) +* [Pug](https://pugjs.org/api/getting-started.html) +* [Markdown](http://daringfireball.net/projects/markdown/) + +##### Referências: + +* [Element attributes (Atributos de Elemento)](https://html.spec.whatwg.org/multipage/indices.html#attributes-3) +* [Elements (Elementos)](https://html.spec.whatwg.org/multipage/indices.html#elements-3) +* [HTML Arrows (Setas HTML)](http://htmlarrows.com/) +* [HTML Entity Lookup (Pesquisa de Entidade HTML)](http://entity-lookup.leftlogic.com/) +* [HTML Interfaces Browser Support (Suporte de Interfaces HTML de Navegadores)](http://www.webbrowsercompatibility.com/html-interfaces/desktop/) +* [htmlreference.io](http://htmlreference.io/) + +##### Análise/Sugestão: + +* [HTMLHint](http://htmlhint.com/) +* [html-inspector](https://github.com/philipwalton/html-inspector) + +##### Otimizador: + +* [HTML Minifier (Minificador HTML)](http://kangax.github.io/html-minifier/) + +##### Ferramentas para Criação/Geração/Experimentação Online: + +* [tablesgenerator.com](http://www.tablesgenerator.com/) + +##### Convenções de Criação: + +* [HTML Code Guide (Guia de Código HTML)](http://codeguide.co/#html) +* [Principles of Writing Consistent, Idiomatic HTML (Princípios de Escrita Consistente e Idiomática em HTML)](https://github.com/necolas/idiomatic-html) + +##### Fluxo de Trabalho: + +* [Emmet](http://emmet.io/) + +##### Esboçador de HTML: + +* [HTML 5 Outliner (Esboçador de HTML 5)](https://gsnedders.html5.org/outliner/) + +##### Tendências de Repositórios HTML no GitHub Este Mês: + +[https://github.com/trending?l=html&since=monthly](https://github.com/trending?l=html&since=monthly) diff --git a/translations/pt_BR/ferramentas/http.md b/translations/pt_BR/ferramentas/http.md new file mode 100644 index 00000000..649fd846 --- /dev/null +++ b/translations/pt_BR/ferramentas/http.md @@ -0,0 +1,7 @@ +# Ferramentas para Rede/HTTP + +* [Charles](http://www.charlesproxy.com/) [$] +* [Painel Network do Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading) +* [Insomnia](https://insomnia.rest/) [free - $] +* [Paw](https://paw.cloud/) [$] +* [Postman](https://www.getpostman.com/) [free - $] \ No newline at end of file diff --git a/translations/pt_BR/ferramentas/javascript.md b/translations/pt_BR/ferramentas/javascript.md new file mode 100644 index 00000000..af65a972 --- /dev/null +++ b/translations/pt_BR/ferramentas/javascript.md @@ -0,0 +1,113 @@ +# Ferramentas para JavaScript + +##### Utilitários de JS: + +* [accounting.js (Inglês)](http://openexchangerates.github.io/accounting.js/) +* [async (Inglês)](http://caolan.github.io/async/) +* [axios (Inglês)](https://github.com/mzabriskie/axios) +* [chance (Inglês)](http://chancejs.com/) +* [date-fns (Inglês)](https://date-fns.org/) +* [format.js (Inglês)](http://formatjs.io/) +* [immutable (Inglês)](https://facebook.github.io/immutable-js/) +* [is.js (Inglês)](http://arasatasaygin.github.io/is.js/) +* [lodash (Inglês)](https://lodash.com/) + * [You-Dont-Need-Lodash-Underscore (Inglês)](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore) +* [Math.js (Inglês)](http://mathjs.org/) +* [Moment.js (Inglês)](http://momentjs.com/) +* [Numeral.js (Inglês)](http://numeraljs.com/) +* [string.js (Inglês)](http://stringjs.com/) +* [underscore.js (Inglês)](http://underscorejs.org/) + * [You-Dont-Need-Lodash-Underscore (Inglês)](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore) +* [voca (Inglês)](https://vocajs.com/) +* [wait (Inglês)](https://github.com/elving/wait) +* [xregexp.com (Inglês)](http://xregexp.com/) + +##### Transpiladores / Checagem de Tipo (ES* para ES*): + +* [Babel (Inglês)](https://babeljs.io/) +* [TypeScript (Inglês)](https://www.typescriptlang.org/) +* [Flow (Inglês)](https://flowtype.org/) + +##### Motor de Análise de Código: + +* [Tern (Inglês)](https://ternjs.net/) + +##### Checador de Compatibilidade JavaScript: + +* [jscc.info/ (Inglês)](http://jscc.info/) + +##### Linting/Hinting & Style Linter: + +* [eslint (Inglês)](http://eslint.org/) + +##### Testes Unitários: + +* [AVA (Inglês)](https://github.com/avajs/ava) +* [Jasmine (Inglês)](http://jasmine.github.io/) +* [Mocha (Inglês)](http://mochajs.org/) +* [Tape (Inglês)](https://github.com/substack/tape) + +##### Testando Asserções para Testes Unitários: + +* [Chai (Inglês)](http://chaijs.com/) +* [expect.js (Inglês)](https://github.com/Automattic/expect.js) +* [should.js (Inglês)](http://shouldjs.github.io/) + +##### Test Spies, Stubs, e Mocks para Testes Unitários: + +* [sinon.js (Inglês)](http://sinonjs.org/) +* [Kakapo.js (Inglês)](http://devlucky.github.io/kakapo-js) + +##### Formatador/Beautifier de Código: + +* [esformatter (Inglês)](https://github.com/millermedeiros/esformatter#esformatterformatstr-optsstring) +* [js-beautify (Inglês)](http://jsbeautifier.org/) +* [jsfmt (Inglês)](http://rdio.github.io/jsfmt/) +* [prettier (Inglês)](https://github.com/jlongster/prettier) + +##### Testes de Performance: + +* [benchmark.js (Inglês)](http://benchmarkjs.com/) +* [jsperf.co (Inglês)](https://jsperf.co/) + +##### Visualização, Análise Estática, Complexidade, Ferramentas de Cobertura: + +* [Coveralls (Inglês)](https://coveralls.io/) :moneybag: +* [Esprima (Inglês)](http://esprima.org/) +* [istanbul (Inglês)](https://github.com/gotwarlost/istanbul) + +##### Otimizadores: + +* [UglifyJS 2 (Inglês)](https://github.com/mishoo/UglifyJS2) +* [optimize-js (Inglês)](https://github.com/nolanlawson/optimize-js) + +##### Obfuscadores: + +* [Javascript Obfuscator (Inglês)](http://www.javascriptobfuscator.com/) :free: a :moneybag: +* [JScrambler (Inglês)](https://jscrambler.com/) :moneybag: + +##### Editores de Código Compartilháveis/Executáveis: + +* [es6fiddle.net (Inglês)](http://www.es6fiddle.net/) +* [jsbin.com (Inglês)](http://jsbin.com/) :free: a :moneybag: +* [jsfiddle.net (Inglês)](http://jsfiddle.net/) + +##### Editores/Ferramentas Visuais Online para Expressões Regulares: + +* [debuggex (Inglês)](https://www.debuggex.com) +* [regex101 (Inglês)](https://regex101.com/) +* [regexper (Inglês)](http://regexper.com/) +* [RegExr (Inglês)](http://regexr.com/) + +##### Ferramentas de Authoring Convention: + +* [Airbnb's ESLint config, following our styleguide (Inglês)](https://www.npmjs.com/package/eslint-config-airbnb) +* [Standard - ESLint Shareable Config (Inglês)](https://github.com/feross/eslint-config-standard) + +##### Repositórios JS Tendência no GitHub Esse Mês: + +[https://github.com/trending?l=javascript&since=monthly (Inglês)](https://github.com/trending?l=javascript&since=monthly) + +##### Mais Dependente de Pacotes do NPM: + +[https://www.npmjs.com/browse/depended (Inglês)](https://www.npmjs.com/browse/depended) diff --git a/translations/pt_BR/ferramentas/json.md b/translations/pt_BR/ferramentas/json.md new file mode 100644 index 00000000..f5f0269f --- /dev/null +++ b/translations/pt_BR/ferramentas/json.md @@ -0,0 +1,46 @@ +# Ferramentas para JSON + +##### Editores Online: + +* [JSONmate (Inglês)](http://jsonmate.com/) +* [json.browse() (Inglês)](https://jamstack.org/) + +##### Formatador & Validador: + +* [jsonformatter.org (Inglês)](http://jsonformatter.org/) +* [JSON Formatter & Validator (Inglês)](https://jsonformatter.curiousconcept.com/) + +##### Ferramentas de Query: + +* [DefiantJS (Inglês)](http://www.defiantjs.com/) +* [JSON Mask (Inglês)](https://github.com/nemtsov/json-mask) +* [ObjectPath (Inglês)](http://objectpath.org/) + +##### Ferramentas para Gerar Mock de JSON: + +* [JSON Generator (Inglês)](http://www.json-generator.com/) +* [Mockaroo (Inglês)](https://www.mockaroo.com/) :free: a :moneybag: + +##### Ferramentas de API Online para Mock de JSON: + +* [FillText.com (Inglês)](http://www.filltext.com/) +* [Jam API (Inglês)](https://www.jamapi.xyz/) +* [JSONPlaceholder (Inglês)](http://jsonplaceholder.typicode.com/) +* [jsonbin.org (Inglês)](https://jsonbin.org/) +* [mockable.io (Inglês)](https://www.mockable.io/) +* [mockapi.io (Inglês)](http://www.mockapi.io/) +* [Mocky (Inglês)](http://www.mocky.io/) +* [RANDOM USER GENERATOR (Inglês)](https://randomuser.me/) + +##### Lista de APIs Públicas de JSON: + +* [A collective list of JSON APIs for use in web development (Inglês)](https://github.com/toddmotto/public-apis) + +##### Ferramentas de API Locais para Mock de JSON: + +* [json-server (Inglês)](https://github.com/typicode/json-server) + +##### Especificações/Schemas JSON: + +* [json-schema.org (Inglês)](http://json-schema.org/) & [jsonschema.net (Inglês)](http://jsonschema.net/) +* [{json:api} (Inglês)](http://jsonapi.org/) diff --git a/translations/pt_BR/ferramentas/loaders.md b/translations/pt_BR/ferramentas/loaders.md new file mode 100644 index 00000000..c45579ef --- /dev/null +++ b/translations/pt_BR/ferramentas/loaders.md @@ -0,0 +1,25 @@ +# Ferramentas para Carregamento de Módulos/Pacotes + +* [Browserify (Inglês)](http://browserify.org/) +* [Rollup (Inglês)](http://rollupjs.org/) +* [SystemJS (Inglês)](https://github.com/systemjs/systemjs) +* [webpack (Inglês)](https://webpack.js.org/) + * [http://www.webpackbin.com/ (Inglês)](http://www.webpackbin.com/) + +*** + +###### RESULTADOS DE PESQUISAS: + +As imagens abaixo são da [2016 Frontend Tooling Survey](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results) (4715 desenvolvedores) e [2016 State of JS Survey](http://stateofjs.com/) (9307 desenvolvedores) + +![](../images/q15.jpg "https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results") + +Fonte da imagem: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results + +![](../images/task1.png "http://stateofjs.com/") + +Fonte da imagem: http://stateofjs.com/ + +![](../images/tasks2.png "http://stateofjs.com/") + +Fonte da imagem: http://stateofjs.com/ diff --git a/translations/pt_BR/ferramentas/monitoramento-erros-js.md b/translations/pt_BR/ferramentas/monitoramento-erros-js.md new file mode 100644 index 00000000..2bdf5aca --- /dev/null +++ b/translations/pt_BR/ferramentas/monitoramento-erros-js.md @@ -0,0 +1,9 @@ +# Ferramentas de Monitoramento de Erros de JavaScript + +* [bugsnag](https://bugsnag.com/) [pago] +* [errorception](https://errorception.com/) [pago] +* [Honeybadger](https://www.honeybadger.io) [pago] +* [Raygun](https://raygun.io) [pago] +* [Rollbar](https://rollbar.com) [grátis e pago] +* [Sentry](https://getsentry.com/welcome/) [grátis e pago] +* [TrackJS](https://trackjs.com/) [pago] diff --git a/translations/pt_BR/ferramentas/monitoramento.md b/translations/pt_BR/ferramentas/monitoramento.md new file mode 100644 index 00000000..311c01c4 --- /dev/null +++ b/translations/pt_BR/ferramentas/monitoramento.md @@ -0,0 +1,12 @@ +# Ferramentas de Monitoramento + +##### Monitoramento de Tempo de Atividade: + +* [Monitority](http://monitority.com/) [grátis] +* [Uptime Robot](https://uptimerobot.com/) [grátis e pago] + +##### Ferramentas de Monitoramento Geral: + +* [Pingdom](https://www.pingdom.com/) [grátis e pago] +* [New Relic](http://newrelic.com/) +* [Uptrends](https://www.uptrends.com/) [pago] diff --git a/translations/pt_BR/ferramentas/navegacao-docs.md b/translations/pt_BR/ferramentas/navegacao-docs.md new file mode 100644 index 00000000..2167ec64 --- /dev/null +++ b/translations/pt_BR/ferramentas/navegacao-docs.md @@ -0,0 +1,8 @@ +# Ferramentas de Documentação de APIs + +Ferramentas para documentação do desenvolvedor e referências de API do desenvolvedor. + +* [DevDocs (Inglês)](http://devdocs.io/) +* [Dash (Inglês)](https://kapeli.com/dash) [OS X, iOS] :moneybag: +* [Velocity (Inglês)](https://velocity.silverlakesoftware.com/) [Windows] :moneybag: +* [Zeal (Inglês)](https://zealdocs.org/) [Windows, Linux, OS X] diff --git a/translations/pt_BR/ferramentas/navegadores.md b/translations/pt_BR/ferramentas/navegadores.md new file mode 100644 index 00000000..97b234b0 --- /dev/null +++ b/translations/pt_BR/ferramentas/navegadores.md @@ -0,0 +1,76 @@ +# Ferramentas de Navegadores + +##### Utilitários JS de Codificação para Navegadores + +* [History.js](https://github.com/browserstate/history.js) :us: +* [html2canvas](https://github.com/niklasvh/html2canvas) :us: +* [Platform.js](https://github.com/bestiejs/platform.js) :us: +* [URI.js](http://medialize.github.io/URI.js/) :us: + +##### Ferramentas de Referência Geral para determinar se o Navegador X Suporta X: + +* [Browser support for broken/missing images (Suporte de navegador para imagens quebradas/faltantes)](http://codepen.io/bartveneman/full/qzCte/) +* [Browserscope](http://www.browserscope.org/) :us: +* [caniuse.com](http://caniuse.com/) :us: +* [Firefox Platform Status - Implementation & standardization roadmap for web platform features (Status da Plataforma Firefox - Mapa de implementação e padronização para características da plataforma web)](https://platform-status.mozilla.org/) +* [HTML5 Please](http://html5please.com/) :us: +* [HTML5 Test](https://html5test.com/) :us: +* [iwanttouse.com](http://www.iwanttouse.com/) :us: +* [jscc.info](http://jscc.info/) :us: +* [Platform Status](https://dev.modern.ie/platform/status/) :us: +* [whatwebcando.today](https://whatwebcando.today/) :us: + +##### Ferramentas de Desenvolvimento/Debug para Navegador: + +* [Chrome Developer Tools (aka DevTools)](https://developers.google.com/web/tools/?hl=pt) + * [Documentação por Painel](https://developers.google.com/web/tools/chrome-devtools/#docs) + * [Referência da API Command Line](https://developers.google.com/web/tools/javascript/command-line/command-line-reference?hl=en) + * [Referência de atalhos de teclado](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts) + * [Configuração](https://developer.chrome.com/devtools/docs/settings) +* [Ferramentas do Firefox para Desenvolvedores](https://developer.mozilla.org/pt-BR/docs/Tools) +* [IE Developer tools (aka F12 tools) (Ferramentas do IE para Desenvolvedores (aka ferramentas do F12))](https://dev.modern.ie/platform/documentation/f12-devtools-guide/) +* [Safari Web Inspector (Inspetor Web do Safari)](https://developer.apple.com/safari/tools/) +* [Vorlon.js](http://vorlonjs.com/) :us: + +##### Ferramentas de Codificação para Navegadores para Determinar Se o Navegador X Suporta X: + +* [Feature.js](http://featurejs.com/) :us: +* [Modernizr](https://modernizr.com/) :us: + +##### Principais Polyfills/Shims para Navegadores: + +* [console-polyfill](https://github.com/paulmillr/console-polyfill) :us: +* [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) :us: +* [fetch](https://github.com/github/fetch) :us: +* [socket.io](http://socket.io/) :us: +* [SockJS](https://github.com/sockjs/sockjs-client) :us: +* [webcomponents.js](https://github.com/WebComponents/webcomponentsjs) :us: +* [webshim](https://afarkas.github.io/webshim/demos/) :us: + +##### Teste/Automação Hospedada para Navegadores: + +* [Browserling](https://www.browserling.com/) :us: :moneybag: +* [BrowserStack](https://www.browserstack.com) :us: :moneybag: +* [CrossBrowserTesting.com](http://crossbrowsertesting.com/) :us: :moneybag: +* [Nightcloud.io](http://nightcloud.io/) :us: +* [Sauce Labs](https://saucelabs.com/) :us: :moneybag: + +##### Navegadores Headless: + +* [PhantomJS](http://phantomjs.org/) :us: + * [PhantomCSS](https://github.com/Huddle/PhantomCSS) :us: +* [slimerjs](http://slimerjs.org/) :us: +* [TrifleJS](http://triflejs.org/) :us: +* [Zombie.js](http://zombie.js.org/) :us: + +##### Automação para Navegadores: + +Utilizado para testes funcionais e teste de macaco. + +* [CasperJS](http://casperjs.org/) :us: +* [Nightmare](https://github.com/segmentio/nightmare) :us: +* [TestCafe](https://github.com/DevExpress/testcafe) :us: + +##### Hacks para Navegadores: + +* [browserhacks.com](http://browserhacks.com/) :us: diff --git a/translations/pt_BR/ferramentas/offline.md b/translations/pt_BR/ferramentas/offline.md new file mode 100644 index 00000000..e31a1222 --- /dev/null +++ b/translations/pt_BR/ferramentas/offline.md @@ -0,0 +1,6 @@ +# Ferramentas para Aplicação Offline + +* [Hoodie](http://hood.ie/) +* [Offline.js](http://github.hubspot.com/offline/docs/welcome/) +* [PouchDB](http://pouchdb.com/) +* [upup](https://www.talater.com/upup/) diff --git a/translations/pt_BR/ferramentas/performance.md b/translations/pt_BR/ferramentas/performance.md new file mode 100644 index 00000000..cfb33ac5 --- /dev/null +++ b/translations/pt_BR/ferramentas/performance.md @@ -0,0 +1,26 @@ +# Ferramentas de Performance + +##### Relatórios: + +* [GTmetrix](https://gtmetrix.com/) +* [sitespeed.io](https://www.sitespeed.io) +* [Speed Curve](https://speedcurve.com/) [pago] +* [Web Page Test](http://www.webpagetest.org/) + +##### Ferramentas JS: + +* [imagemin](https://github.com/imagemin/imagemin) +* [ImageOptim-CLI](http://jamiemason.github.io/ImageOptim-CLI/) + +##### Orçamentos: + +* [performancebudget.io](http://www.performancebudget.io/) + +##### Referências/Documentação: + +* [Jank Free](http://jankfree.org/) +* [Performance of ES6 features relative to the ES5](https://kpdecker.github.io/six-speed/) + +##### Checklist: + +* [Front-End Performance Checklist 2017](https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/) diff --git a/translations/pt_BR/ferramentas/placeholder.md b/translations/pt_BR/ferramentas/placeholder.md new file mode 100644 index 00000000..b48ff548 --- /dev/null +++ b/translations/pt_BR/ferramentas/placeholder.md @@ -0,0 +1,24 @@ +# Ferramentas para Imagens/Textos Substitutos + +## Imagens: +* [placehold.it (Inglês)](http://placehold.it) +* [Satyr (Inglês)](http://satyr.io) +* [Placeimg (Inglês)](http://placeimg.com) +* [Lorem Pixel (Inglês)](http://lorempixel.com) +* [CSS-Tricks Image Resources (Inglês)](https://css-tricks.com/sites-with-high-quality-photos-you-can-use-for-free/) +* [LibreStock (Inglês)](http://librestock.com) +* [Unsplash (Inglês)](https://unsplash.it) +* [Place Beyoncé (Inglês)](http://placebeyonce.com) + +## Mockups de Aparelhos: +* [placeit.net (Inglês)](https://placeit.net) +* [mockuphone.com (Inglês)](http://mockuphone.com) + +## Texto: +* [Meet the Ipsums (Inglês)](http://meettheipsums.com) +* [catipsum.com (Inglês)](http://www.catipsum.com/) +* [baconipsum.com (Inglês)](http://baconipsum.com/) ([API (Inglês)](http://baconipsum.com/json-api/)) + +## Dados de Usuário: +* [uinames.com (Inglês)](https://uinames.com) +* [randomuser.me (Inglês)](https://randomuser.me) diff --git a/translations/pt_BR/ferramentas/projeto-hospedagem.md b/translations/pt_BR/ferramentas/projeto-hospedagem.md new file mode 100644 index 00000000..5be7d655 --- /dev/null +++ b/translations/pt_BR/ferramentas/projeto-hospedagem.md @@ -0,0 +1,8 @@ +# Ferramentas de Projeto e Hospedagem + +* [Assembla](https://www.assembla.com) [grátis e pago] +* [Bitbucket](https://bitbucket.org) [grátis e pago] +* [Codebase](https://www.codebasehq.com/) [pago] +* [Github](https://github.com/) [grátis e pago] +* [GitLab](https://about.gitlab.com/) [grátis e pago] +* [Unfuddle](https://unfuddle.com/) [pago] diff --git a/translations/pt_BR/ferramentas/prototipacao.md b/translations/pt_BR/ferramentas/prototipacao.md new file mode 100644 index 00000000..6065f13c --- /dev/null +++ b/translations/pt_BR/ferramentas/prototipacao.md @@ -0,0 +1,15 @@ +# Ferramentas para Wireframe e Prototipação + +##### Criação: + +* [Axure](http://www.axure.com/) [$] +* [Balsamiq Mockups](https://balsamiq.com) [$] +* [Justinmind](http://www.justinmind.com/) [$] +* [UXPin](http://www.uxpin.com/) [free to $] + +##### Colaboração / Apresentação: + +* [InVision](http://www.invisionapp.com/) [free to $] +* [Conceptboard](https://conceptboard.com/) [free to $] +* [myBalsamiq](https://www.mybalsamiq.com/) [$] + diff --git a/translations/pt_BR/ferramentas/repositorios.md b/translations/pt_BR/ferramentas/repositorios.md new file mode 100644 index 00000000..3e1ff809 --- /dev/null +++ b/translations/pt_BR/ferramentas/repositorios.md @@ -0,0 +1,4 @@ +# Ferramentas de Repositório de Módulos/Pacotes + +* [NPM (Inglês)](https://www.npmjs.com/) +* [yarn (Inglês)](https://yarnpkg.com/) diff --git a/translations/pt_BR/ferramentas/scaffolding.md b/translations/pt_BR/ferramentas/scaffolding.md new file mode 100644 index 00000000..38d88f16 --- /dev/null +++ b/translations/pt_BR/ferramentas/scaffolding.md @@ -0,0 +1,6 @@ +# Ferramentas para Scaffolding + +Scaffolding do lado do cliente tem como objetivo gerar templates iniciais para a aplicação como um todo, ao invés de [gerar código acessar um banco de dados (Inglês)](https://en.wikipedia.org/wiki/Scaffold_%28programming%29). + +* [Slush](http://slushjs.github.io/#/) +* [Yeoman](http://yeoman.io/) diff --git a/translations/pt_BR/ferramentas/seguranca.md b/translations/pt_BR/ferramentas/seguranca.md new file mode 100644 index 00000000..66988c80 --- /dev/null +++ b/translations/pt_BR/ferramentas/seguranca.md @@ -0,0 +1,16 @@ +# Ferramentas para Segurança + +##### Ferramentas de Código: + +* [DOMPurify](https://github.com/cure53/DOMPurify) +* [XSS](http://jsxss.com/en/index.html) + +##### Scanners, Avaliadores e Testadores de Segurança: + +* [Netsparker](https://www.netsparker.com) +* [Websecurify](http://www.websecurify.com/) +* [OWASP ZAP](https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project) + +##### Referências: + +* [HTML5 Security Cheatsheet](https://html5sec.org/) diff --git a/translations/pt_BR/ferramentas/seo.md b/translations/pt_BR/ferramentas/seo.md new file mode 100644 index 00000000..29ddc176 --- /dev/null +++ b/translations/pt_BR/ferramentas/seo.md @@ -0,0 +1,9 @@ +# Ferramentas de SEO + +* [Keyword Tool (Inglês)](http://keywordtool.io/) +* [Google Webmasters Search Console](https://www.google.com/webmasters/) +* [Varvy SEO tool (Inglês)](https://varvy.com/tools/) + +##### Ferramentas para Encontrar Ferramentas de SEO: + +* [SEO Tools - The Complete List (Inglês)](http://backlinko.com/seo-tool) diff --git a/translations/pt_BR/ferramentas/templates.md b/translations/pt_BR/ferramentas/templates.md new file mode 100644 index 00000000..7367c6af --- /dev/null +++ b/translations/pt_BR/ferramentas/templates.md @@ -0,0 +1,24 @@ +# Ferramentas para Templating/Data Binding + +##### Apenas Templating: + +* [doT.js](http://olado.github.io/doT/) +* [Handlebars](http://handlebarsjs.com/) + * [htmlbars](https://github.com/tildeio/htmlbars) +* [Nunjuncks](http://mozilla.github.io/nunjucks/) + +##### Templating e Data Binding Reativo: + +* [Deku](https://github.com/anthonyshort/deku) +* [jquerymy.js](http://jquerymy.com/) +* [ractive.js](http://www.ractivejs.org/) +* [react.js](https://facebook.github.io/react/index.html) +* [riot](http://riotjs.com/) +* [Rivets.js](http://rivetsjs.com/) +* [vue.js](http://vuejs.org/) + +##### Templating para Virtual DOM: + +* [JSX](https://facebook.github.io/jsx/) +* [t7](http://t7js.com/) + diff --git a/translations/pt_BR/ferramentas/testes.md b/translations/pt_BR/ferramentas/testes.md new file mode 100644 index 00000000..ecbc2720 --- /dev/null +++ b/translations/pt_BR/ferramentas/testes.md @@ -0,0 +1,75 @@ +# Ferramentas para Testes + +##### Frameworks para Testar Software: + +* [Intern (Inglês)](https://theintern.github.io/) +* [Karma (Inglês)](http://karma-runner.github.io/1.0/index.html) +* [Jest (Inglês)](http://facebook.github.io/jest/) + +##### Teste Unitário: + +* [AVA (Inglês)](https://github.com/avajs/ava) +* [Jasmine (Inglês)](http://jasmine.github.io/) +* [Mocha (Inglês)](http://mochajs.org/) +* [Tape (Inglês)](https://github.com/substack/tape) + +##### Teste de Asserções para Teste Unitário: + +* [Chai (Inglês)](http://chaijs.com/) +* [expect.js (Inglês)](https://github.com/Automattic/expect.js) +* [should.js (Inglês)](http://shouldjs.github.io/) + +##### Test Spies, Stubs, e Mocks para Teste Unitário: + +* [sinon.js (Inglês)](http://sinonjs.org/) +* [Kakapo.js (Inglês)](http://devlucky.github.io/kakapo-js) + +##### Teste/Automação Hospedado para Navegadores: + +* [Browserling (Inglês)](https://www.browserling.com/) :moneybag: +* [BrowserStack (Inglês)](https://www.browserstack.com) :moneybag: +* [CrossBrowserTesting.com (Inglês)](http://crossbrowsertesting.com/) :moneybag: +* [Nightcloud.io (Inglês)](http://nightcloud.io/) +* [Sauce Labs (Inglês)](https://saucelabs.com/) :moneybag: + +##### Automação para Navegador: + +* [CasperJS (Inglês)](http://casperjs.org/) +* [Nightmare (Inglês)](https://github.com/segmentio/nightmare) +* [TestCafe (Inglês)](https://github.com/DevExpress/testcafe) + +##### Ferramentas de Teste UI: + +* [gremlins.js (Inglês)](https://github.com/marmelab/gremlins.js) +* [Percy (Inglês)](https://percy.io) +* [BackstopJS (Inglês)](https://github.com/garris/BackstopJS) +* [PhantomCSS (Inglês)](https://github.com/Huddle/PhantomCSS) +* [Ghost Inspector (Inglês)](https://ghostinspector.com/) +* [diff.io (Inglês)](https://diff.io/) + +##### Detectores Automatizados de Erro e Link Morto: +* [Monkey Test It (Inglês)](https://monkeytest.it/) + +*** + +###### NOTAS: + +Testar frameworks normalmente oferece mais ferramentas além de apenas teste unitário. Se você estiver procurando por soluções de teste unitário para JavaScript dê uma olhada em [JavaScript Tools](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/tools/js.html). + +*** + +###### RESULTADOS DE PESQUISAS: + +As imagens abaixo são da [2016 Frontend Tooling Survey](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results) (4715 desenvolvedores) e [2016 State of JS Survey](http://stateofjs.com/) (9307 desenvolvedores) + +![](../images/q18.jpg "https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results") + +Fonte da Imagem: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results + +![](../images/test1.png "http://stateofjs.com/") + +Fonte da Imagem: http://stateofjs.com/ + +![](../images/test2.png "http://stateofjs.com/") + +Fonte da Imagem: http://stateofjs.com/ diff --git a/translations/pt_BR/ferramentas/ui.md b/translations/pt_BR/ferramentas/ui.md new file mode 100644 index 00000000..9310ee63 --- /dev/null +++ b/translations/pt_BR/ferramentas/ui.md @@ -0,0 +1,36 @@ +# Pacotes de UI Widget & Componentes + +##### Na Plataforma Web: [^1] + +* [Bootstrap 3 (Inglês)](http://getbootstrap.com/components/) ou [Bootstrap 4 (Inglês)](https://v4-alpha.getbootstrap.com/) +* [Kendo UI (Inglês)](http://www.telerik.com/kendo-ui) para jQuery :free: a :moneybag: +* [Materialize](http://materializecss.com/) +* [Office UI Fabric (Inglês)](http://dev.office.com/fabric) +* [Semantic UI](http://semantic-ui.com/) +* [UiKit (Inglês)](https://getuikit.com/) +* [Webix (Inglês)](http://webix.com/) :moneybag: + +##### Específico Para React, Na Plataforma Web: [^2] + +* [Ant Design (Inglês)](https://ant.design/) +* [Material ui (Inglês)](http://material-ui.com/) +* [Semantic-UI-React (Inglês)](http://react.semantic-ui.com/introduction) + +##### Aplicativos Nativos Para Desktop/Laptop/Netbook via Plataforma Web (usado com NW.js e Electron): + +* [Photon (Inglês)](http://photonkit.com/) +* [React UI Components for OS X El Capitan and Windows 10 (Inglês)](http://gabrielbull.github.io/react-desktop/) + +##### Específico Para Mobile/Tablet Na Plataforma Web (usado com foco em UI's touch): + +* [Framework7 (Inglês)](http://www.idangero.us/framework7) +* [Kendo UI Mobile (Inglês)](http://demos.telerik.com/kendo-ui/m/index) +* [Ratchet (Inglês)](http://goratchet.com/) + +*** + +###### CONSELHO: + +[^1] Se você precisa de um conjunto básico de UI Widgets/Componentes comece com [Semantic UI](http://semantic-ui.com/). Se você está construindo algo que precisa de um grid, spreadsheet, ou pivot grid você deve dar uma olhada em [Kendo UI](http://www.telerik.com/kendo-ui) ou [Webix](http://webix.com/). Não se esqueça que a maioria dessas soluções precisam de jQuery. + +[^2] Se eu fosse construir uma aplicação React e precisasse de um pacote de widgets/componentes já prontos, eu iria de [Semantic-UI-React](http://react.semantic-ui.com/introduction) e/ou [Ant Design](https://ant.design/), ou aceitaria o fato de que alguns dos componentes que quero usar possuem uma grande dependência no jQuery. diff --git a/translations/pt_BR/ferramentas/visualizacao-dados.md b/translations/pt_BR/ferramentas/visualizacao-dados.md new file mode 100644 index 00000000..5a27db9b --- /dev/null +++ b/translations/pt_BR/ferramentas/visualizacao-dados.md @@ -0,0 +1,26 @@ +# Ferramentas para Visualização de Dados (ex. Gráficos) + +##### Bibliotecas JS: + +* [d3 (Inglês)](http://d3js.org/) +* [sigmajs (Inglês)](http://sigmajs.org/) + +##### Componentes e Widgets: + +* [amCharts (Inglês)](http://www.amcharts.com/) [grátis e pago] +* [AnyChart (Inglês)](http://www.anychart.com/) [grátis (não comercial) e pago] +* [C3.js (Inglês)](http://c3js.org/) +* [Chartist-jsj (Inglês)](https://github.com/gionkunz/chartist-js) +* [Chart.js (Inglês)](http://www.chartjs.org/) +* [Epoch (Inglês)](http://epochjs.github.io/epoch/) +* [FusionCharts (Inglês)](http://www.fusioncharts.com/) [pago] +* [Google Charts (Inglês)](https://developers.google.com/chart/interactive/docs/) +* [Highcharts (Inglês)](http://www.highcharts.com/) [grátis (não comercial) e pago] +* [ZingChart (Inglês)](http://www.zingchart.com/) [grátis e pago] + +##### Serviços (isto é, serviços de visualização de dados hospedados para incorporação e compartilhamento): + +* [ChartBlocks (Inglês)](http://www.chartblocks.com/) [grátis e pago] +* [Datawrapper (Inglês)](https://datawrapper.de/) +* [infogr.am (Inglês)](https://infogr.am) [grátis e pago] +* [plotly (Inglês)](https://plot.ly/) [grátis e pago] diff --git a/translations/pt_BR/img/crescimento-da-iot.jpg b/translations/pt_BR/img/crescimento-da-iot.jpg new file mode 100644 index 00000000..6d073089 Binary files /dev/null and b/translations/pt_BR/img/crescimento-da-iot.jpg differ diff --git a/translations/pt_BR/img/fazendo-fd.png b/translations/pt_BR/img/fazendo-fd.png new file mode 100644 index 00000000..567f2893 Binary files /dev/null and b/translations/pt_BR/img/fazendo-fd.png differ diff --git a/translations/pt_BR/img/full-stack.jpg b/translations/pt_BR/img/full-stack.jpg new file mode 100644 index 00000000..d70c64d1 Binary files /dev/null and b/translations/pt_BR/img/full-stack.jpg differ diff --git a/translations/pt_BR/img/fullstack1.png b/translations/pt_BR/img/fullstack1.png new file mode 100644 index 00000000..fa02a91e Binary files /dev/null and b/translations/pt_BR/img/fullstack1.png differ diff --git a/translations/pt_BR/img/fullstack2.png b/translations/pt_BR/img/fullstack2.png new file mode 100644 index 00000000..c4e905ac Binary files /dev/null and b/translations/pt_BR/img/fullstack2.png differ diff --git a/translations/pt_BR/img/habilidades-de-um-front-end.png b/translations/pt_BR/img/habilidades-de-um-front-end.png new file mode 100644 index 00000000..b65be511 Binary files /dev/null and b/translations/pt_BR/img/habilidades-de-um-front-end.png differ diff --git a/translations/pt_BR/img/o-que-e-front-end.png b/translations/pt_BR/img/o-que-e-front-end.png new file mode 100644 index 00000000..00d60a2d Binary files /dev/null and b/translations/pt_BR/img/o-que-e-front-end.png differ diff --git a/translations/pt_BR/img/salario.png b/translations/pt_BR/img/salario.png new file mode 100644 index 00000000..0c03bc30 Binary files /dev/null and b/translations/pt_BR/img/salario.png differ diff --git a/translations/pt_BR/img/tecnologias-web-empregadas.jpg b/translations/pt_BR/img/tecnologias-web-empregadas.jpg new file mode 100644 index 00000000..ee43b8ad Binary files /dev/null and b/translations/pt_BR/img/tecnologias-web-empregadas.jpg differ diff --git a/translations/pt_BR/introducao.md b/translations/pt_BR/introducao.md new file mode 100644 index 00000000..4b37ee8d --- /dev/null +++ b/translations/pt_BR/introducao.md @@ -0,0 +1,23 @@ +Este é um guia que qualquer pessoa pode usar para aprender sobre desenvolvimento front-end. Também discute de forma geral sobre a parte de engenharia front-end: como aprender e quais ferramentas usar ao trabalhar com front-end em 2017. + +Este livro foi escrito com a intenção de ser um guia para futuros front-ends e para quem já atua na área, para que ganhem mais conhecimento com materias de aprendizado e ferramentas de desenvolvimento. De forma secundária, pode ser usado por gerentes, CTOs, instrutores e recrutadores para adquirir conhecimento sobre como é o trabalho de um front-end. + +O conteúdo deste livro foca em tecnologias web (HTML, CSS, DOM e Javascript) e soluções que são construídas através destas tecnologias. Os materiais referenciados e discutidos no livro são os mais recomendados e usados atualmente. + +Este livro não deve ser considerado uma enciclopédia com todos os recursos disponíveis para um front-end. O conteúdo deste livro é abordado de forma a não sobrecarregar o leitor com algum assunto específico. + +A intenção é atualizar este livro anualmente. + +Este guia é dividido em três partes. + +## Parte 1 - Front-End na Prática + +- Aborda a prática do esenvolvimento Front-End + +## Parte 2 - Aprendendo Desenvolvimento Front-End + +- Mostra recursos de aprendizado para se tornar um Desenvolvedor Front-End + +## Parte 3 - Ferramentas de Desenvolvimento + +- Explica brevemente sobre ferramentas para desenvolvimento diff --git a/translations/pt_BR/o-que-e-um-FD.md b/translations/pt_BR/o-que-e-um-FD.md new file mode 100644 index 00000000..89930c8c --- /dev/null +++ b/translations/pt_BR/o-que-e-um-FD.md @@ -0,0 +1,65 @@ +# O que é um desenvolvedor Front-End? + +> Desenvolvimento web front-end, também conhecido como desenvolvimento client-side é a prática de produzir HTML, CSS e JavaScript para um website ou para uma aplicação web, para que um usuário possa vê-lo e interagir diretamente com ele. O desafio associado com o desenvolvimento front-end é o fato de que as ferramentas e técnicas usadas para criar uma aplicação mudam constantemente, assim o desenvolvedor precisa estar sempre a par do desenvolvimento da área. + +> O objetivo de se projetar um site é garantir que quando o usuário abri-lo, ele veja a informação em um formato de fácil leitura e relevância. Isso fica mais complicado pelo fato de que o usuário, nos últimos anos, faz uso de uma grande variedade de aparelhos com telas e resoluções de tamanhos diversos. Forçando, assim, o designer a levar esses aspectos em consideração quando projetar o site. É preciso garantir que seu site será apresentado da melhor forma em diferentes navegadores (_cross-browser_), diferentes sistemas operacionais (_cross-platform_) e diferentes aparelhos (_cross-device_), o que requer planejamento cuidadoso do desenvolvedor. + +>https://en.wikipedia.org/wiki/Front-end_web_development + +##### HTML, CSS e JavaScript: + +Um desenvolvedor web front-end arquiteta e desenvolve sites e aplicações usando tecnologias web (HTML, CSS, DOM e JavaScript) que são executadas na [plataforma web][Open Web Platform] ou atuam como entrada de compilação para ambientes de plataforma não-web, como [NativeScript](https://www.nativescript.org/). + +![](img/o-que-e-front-end.png "https://www.upwork.com/hiring/development/front-end-developer/") + +Fonte da imagem: https://www.upwork.com/hiring/development/front-end-developer/ + +Frequentemente, uma pessoa entra na área de desenvolvimento front-end aprendendo a desenvolver código HTML, CSS e JavaScript, que executam em um [navegador web](https://pt.wikipedia.org/wiki/Navegador_web), [headless browser](https://en.wikipedia.org/wiki/Headless_browser), [WebView](http://developer.telerik.com/featured/what-is-a-webview/) ou como entrada de compilação para um ambiente de tempo de execução. Esses quatro cenários são explicados abaixo. + +##### Navegadores Web + +Um navegador web é o software utilizado para buscar, apresentar e passar informações na [Rede Mundial de Computadores](https://pt.wikipedia.org/wiki/World_Wide_Web). Geralmente navegadores são executados em um desktop, notebook, tablet ou celular. Porém os navegadores mais atuais podem ser encontrados em quase todos os lugares (geladeiras, carros, etc). + +Os navegadores mais comuns são (ordenados por maior utilização): + +* [Chrome](http://www.google.com/chrome/) +* [Internet Explorer](https://pt.wikipedia.org/wiki/Internet_Explorer) (Nota: não é o [Edge](https://www.microsoft.com/pt-br/windows/microsoft-edge), refere-se às versões 9 a 11 do IE) +* [Firefox](https://www.mozilla.org/firefox/) +* [Safari](http://www.apple.com/br/safari/) + +##### Headless Browsers + +Headless browsers são navegadores web sem interface gráfica que podem ser controlados programaticamente por linha de comando com o propósito de automatizar páginas web (testes funcionais, scraping, testes unitários, etc). Pense nos headless browsers como um navegador que você pode executar pela linha de comando, recuperar e carregar páginas web. + +Os headless browsers mais comuns são: + +* [PhantomJS](http://phantomjs.org/) +* [slimerjs](http://slimerjs.org/) +* [trifleJS](http://triflejs.org/) + +##### Webviews + +[Webviews](http://developer.telerik.com/featured/what-is-a-webview/) são usadas por um sistema operacional nativo, em uma aplicação nativa, para executar páginas web. Pense em uma [webview](http://developer.telerik.com/featured/what-is-a-webview/) como um iframe ou uma única aba de um navegador web, que está embutido em uma aplicação nativa, sendo executado em um aparelho ([iOS](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/), [Android](https://developer.android.com/reference/android/webkit/WebView.html), [Windows](https://docs.microsoft.com/pt-br/uwp/api/Windows.UI.Xaml.Controls.WebView)). + +As soluções mais comuns para o desenvolvimento de [webviews](http://developer.telerik.com/featured/what-is-a-webview/) são: + +* [Cordova](https://cordova.apache.org/) (comum em aplicativos nativos de celulares/tablets) +* [NW.js](https://github.com/nwjs/nw.js) (comum em aplicativos para desktop) +* [Electron](http://electron.atom.io/) (comum em aplicativos para desktop) + +##### Tecnologia Nativa da Web + +O que é aprendido com o desenvolvimento de navegadores web, eventualmente pode ser utilizado por desenvolvedores front-end para criar código para ambientes que não são abastecidos por um motor de navegador (_browser engine_). Ultimamente, ambientes de desenvolvimento estão sendo elaborados para utilizar tecnologias web (CSS e JavaScript), sem motores web, para criar aplicações nativas. + +Alguns exemplos desses ambientes são: + +* [NativeScript](https://www.nativescript.org/) +* [React Native](https://facebook.github.io/react-native/) + +* * * + +###### NOTAS: + +Tenha certeza de que você entendeu bem o que é a "plataforma web". Leia ["The Web platform: what it is"](http://tess.oconnor.cx/2009/05/what-the-web-platform-is) e leia a página ["Open Web Platform"][Open Web Platform] da Wikipedia. + +[Open Web Platform]: https://en.wikipedia.org/wiki/Open_Web_Platform diff --git a/translations/pt_BR/pratica.md b/translations/pt_BR/pratica.md new file mode 100644 index 00000000..f9e0fd6f --- /dev/null +++ b/translations/pt_BR/pratica.md @@ -0,0 +1,5 @@ +# Parte I. O Front-end na prática + +A parte um descreve amplamente a prática de engenharia front-end. + + diff --git a/translations/pt_BR/pratica/cargos-de-front-end.md b/translations/pt_BR/pratica/cargos-de-front-end.md new file mode 100644 index 00000000..26821fe5 --- /dev/null +++ b/translations/pt_BR/pratica/cargos-de-front-end.md @@ -0,0 +1,61 @@ +# Cargos de Front-End + +Abaixo está uma lista com a descrição de vários cargos de front-end. O mais comum, ou mais usado (genérico), cargo para um desenvolvedor front-end é "desenvolvedor front-end" ou "engenheiro front-end". Note que qualquer emprego que contenha os termos "front-end", "client-side", "web UI", "HTML", "CSS" ou "JavaScript" normalmente entende-se que a pessoa possui algum nível de know-how profissional de HTML, CSS, DOM e JavaScript. + +*** + +**Desenvolvedor Front-End** + +Cargo genérico que descreve um desenvolvedor com algum nível de proficiência em HTML, CSS, DOM e JavaScript, além de implementar essas tecnologias na plataforma web. + +*** + +**Engenheiro Front-End** + +Cargo dado a um desenvolvedor que possui conhecimentos prévios em ciência ou engenharia da computação e está utilizando essas habilidades para trabalhar com tecnologias front-end. Geralmente esse papel requer um título em ciência da computação e anos de experiência desenvolvendo software. Quando o termo "Aplicação JavaScript" é incluído no cargo, indica-se que o desenvolvedor deve ter conhecimento avançado de JavaScript e que possui habilidades avançadas em programação, desenvolvimento de software e desenvolvimento de aplicações, ou seja, tenha anos de experiência construindo aplicações front-end. + +*** + +**Desenvolvedor CSS/HTML** + +Cargo front-end que descreve um desenvolvedor habilidoso com HTML e CSS, excluindo conhecimentos de JavaScript e aplicações. + +*** + +**Web Designer Front-End** + +Quando o termo "designer" é incluido no cargo, indica-se que o designer deve possuir habilidades front-end (HTML e CSS) bem como habilidades de design profissional (design visual e design de interação). + +*** + +**Desenvolvedor/Engenheiro de Interfaces de Usuário (UI) Web/Front-End** + +Quando o termo "interface" ou "UI" é incluido no cargo, indica-se que este desenvolvedor deva possuir habilidades com design de interação somadas às habilidades de desenvolvedores ou engenheiros front-end. + +*** + +**Desenvolvedor Front-End Mobile/Tablet** + +Quando o termo "mobile" ou "tablet" é incluido no cargo, indica-se que este desenvolvedor possui experiência desenvolvendo front-ends que executem em aparelhos móveis ou tablets (nativamente ou na plataforma web, como em um navegador). + +*** + +**Especialista em SEO Front-End** + +Quando o termo "acessibilidade" ou "SEO" é incluido no cargo, indica-se que este desenvolvedor possui experiência extensiva produzindo tecnologias front-end que suportam requisitos e padrões de acessibilide e otimização para mecanismos de busca (Google, Yahoo e Bing). + +*** + +**DevOps Front-End** + +Quando o termo "DevOps" é incluido no cargo, indica-se que este desenvolvedor possui experiência extensiva com práticas de desenvolvimento de software que dizem respeito a colaboração, integração, implantação, automação e métricas. + +*** + +**Testador/QA Front-End** + +Quando o termo "testador" ou "QA" é incluido no cargo, indica-se que este desenvolvedor possui experiência extensiva testando e gerindo software que envolva testes unitários, testes funcionais, testes de usuário e testes A/B. + +*** + +Note que caso você se depare com cargos que possuam o termo "Full Stack" ou o termo genérico "Desenvolvedor Web", entende-se que esses termos podem ser usados por um empregador para descrever um cargo responsável por todos os aspectos do desenvolvimento web/app, ou seja, tanto front-end (provavelmente incluindo design) quanto back-end. diff --git a/translations/pt_BR/pratica/fd-desenvolvem-para.md b/translations/pt_BR/pratica/fd-desenvolvem-para.md new file mode 100644 index 00000000..c96f2aaf --- /dev/null +++ b/translations/pt_BR/pratica/fd-desenvolvem-para.md @@ -0,0 +1,32 @@ +# Front-Ends desenvolvem para... + +Um desenvolvedor front-end cria HTML, CSS e JavaScript que normalmente é executado na [plataforma web](http://tess.oconnor.cx/2009/05/what-the-web-platform-is) (como um navegador web) e entregue por um dos seguintes sistemas operacionais (SOs): + +* Android +* Chromium +* iOS +* OS X +* Ubuntu (ou algum sabor do Linux) +* Windows Phone +* Windows + +Esses sistemas operacionais normalmente são executados em um ou mais dos seguintes aparelhos: + +* Desktop +* Notebook / laptop / netbook +* Celular +* Tablet +* TV +* Relógio +* Coisas (qualquer coisa que possa imaginar: carros, geladeiras, lâmpadas, termostatos, etc.) + +![](../images/growth-iot.jpg "https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/") + +Fonte da imagem: https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/ + +Em geral, tecnologias front-end podem ser executadas nos sistemas operacionais e aparelhos mencionados acima utilizando o seguinte cenário em tempo de execução na plataforma web: + +* Um navegador web (exemplos: [Chrome, IE, Safari, Firefox](http://outdatedbrowser.com/pt-br)). +* Um [navegador headless](https://en.wikipedia.org/wiki/Headless_browser) (exemplos: [phantomJS](http://phantomjs.org/)). +* Uma [WebView](http://developer.telerik.com/featured/what-is-a-webview/)/aba do navegador (pense em iframe) embutido em uma aplicação nativa, como um tempo de execução com ponte para APIs nativas. Aplicações WebView normalmente contém uma interface de usuário (UI) construída com tecnologias web como HTML, CSS, e JS. (exemplos: [Apache Cordova](https://cordova.apache.org/), [NW.js](http://nwjs.io/), [Electron](http://electron.atom.io/)) +* Uma aplicação nativa construída a partir de tecnologias web que são interpretadas em tempo de execução com uma ponte para APIs nativas. A UI fará uso de partes da UI nativa (como os controles nativos do iOS) e não de tecnologias web. (exemplos: [NativeScript](https://www.nativescript.org/), [React Native](https://facebook.github.io/react-native/)) diff --git a/translations/pt_BR/pratica/habilidades.md b/translations/pt_BR/pratica/habilidades.md new file mode 100644 index 00000000..0f26e5fc --- /dev/null +++ b/translations/pt_BR/pratica/habilidades.md @@ -0,0 +1,63 @@ +# Habilidades de um Front-End + +![](../images/front-end-skills.png "http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html") + +Image source: http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html + +São atribuídas, para qualquer tipo de desenvolvedor front-end, habilidades básicas a avançadas sobre HTML, CSS, DOM, JavaScript, HTTP/URL e navegadores web. + +Além de HTML, CSS, DOM, JavaScript, HTTP/URL e conhecimentos sobre ferramentas de desenvolvimento do navegador, um desenvolvedor front-end pode possuir habilidades em um ou mais dos itens seguintes: + +* Sistema de Gerenciamento de Conteúdo (CMS) +* Node.js +* Cross-browser testing +* Cross-platform testing +* Testes unitários +* Cross-device testing +* Acessibilidade / WAI-ARIA +* Search Engine Optimization (SEO) +* Design de interação ou interface de usuário +* Experiência de usuário +* Usabilidade +* Sistemas de e-commerce +* Sistemas de portais +* Wireframing +* Layout / Grids CSS +* Manipulaçaõ do DOM (por exemplo, jQuery) +* Performance mobile web +* Testes de carga +* Testes de performance +* Progressive enhancement / graceful degradation +* Controle de versão (por exemplo, GIT) +* MVC / MVVM / MV* +* Programação funcional +* Formatos de dados (por exemplo, JSON, XML) +* APIs de dados (por exemplo, Restful API) +* Inclusão de Web Fonts +* Scalable Vector Graphics (SVG) +* Expressões regulares +* Estratégia de conteúdo +* Microdados / microformatos +* Task runners, ferramentas de build, processo de automação de tarefas +* Web Design responsivo +* Programação orientada a objeto +* Arquitetura de aplicação +* Módulos +* Gerenciadores de dependência +* Gerenciadores de pacote +* Animação JavaScript +* Animação CSS +* Gráficos +* Widgets de UI +* Testes de qualidade de código +* Testes de cobertura de código +* Análise de complexidade de código +* Testes de integração +* Linha de comando (CLI) +* Estratégias de Templating +* Templating Engines +* Single Page Applications (SPAs) +* XHR Requests (AJAX) +* Segurança Web/Browser +* Semântica HTML +* Ferramentas de desenvolvimento do navegador diff --git a/translations/pt_BR/pratica/mito.md b/translations/pt_BR/pratica/mito.md new file mode 100644 index 00000000..19d90d89 --- /dev/null +++ b/translations/pt_BR/pratica/mito.md @@ -0,0 +1,26 @@ +# O Mito do Full-Stack + +![](../images/full-stack.jpg "http://andyshora.com/full-stack-developers.html") + +Fonte: http://andyshora.com/full-stack-developers.html + +As funções necessárias para projetar e desenvolver uma solução web requerem um profundo conjunto de habilidades e uma vasta experiência na área de design visual, UI/design de interação, desenvolvimento front-end e desenvolvimento back-end. Qualquer pessoa que possa preencher uma ou mais dessas 4 funções em um nível profissional é uma mercadoria extremamente rara. + +Pragmaticamente, você deve procurar ser, ou procurar contratar, um especialista em uma destas funções (ou seja, Design Visual, Design de Interação/IA, Desenvolvedor Front-end, Desenvolvedor Back-end). Aqueles que afirmam operar em um nível especialista em uma ou mais destas funções são excepcionalmente raros e mais provavelmente mitos. + +No entanto, dado que o JavaScript infiltrou todas as camadas de várias tecnologias (por exemplo, React, node.js, express, couchDB, gulp.js, etc...), encontrar um desenvolvedor JS full-stack que pode codificar o front-end e back-end está se tornando menos mítico. Normalmente, esses desenvolvedores full-stack lidam apenas com JavaScript. Um desenvolvedor que pode codificar front-end, back-end, API, e banco de dados não é tão absurdo quanto já foi um dia (excluindo design visual, design de interação e CSS). Ainda míticos na minha opinião, mas não tão incomuns quanto já foi um dia. Portanto, eu não recomendaria um desenvolvedor estabelecido a ser um desenvolvedor "full-stack". Em situações raras, isso pode funcionar. Mas, como um conceito geral para construir uma carreira como Desenvolvedor Front-end, eu focaria nas tecnologias front-end. + +*** + +###### NOTAS: + +O termo desenvolvedor "Full-Stack" passou a assumir vários significados. Tantos, que nenhum significado é claro quando o termo é utilizado. Apenas considere os resultados das duas pesquisas mostradas abaixo. Estes resultados levariam a acreditar que a maioria dos desenvolvedores são full-stack. Mas, em mais de 20 anos de experiência, posso afirmar que isto está longe de ser verdade. + + +![](../images/fullstack1.png "https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz") + +Fonte: https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz + +![](../images/fullstack2.png "http://stackoverflow.com/research/developer-survey-2016#developer-profile-developer-occupations") + +Fonte: http://stackoverflow.com/research/developer-survey-2016#developer-profile-developer-occupations diff --git a/translations/pt_BR/pratica/quadro-vagas.md b/translations/pt_BR/pratica/quadro-vagas.md new file mode 100644 index 00000000..3bce5338 --- /dev/null +++ b/translations/pt_BR/pratica/quadro-vagas.md @@ -0,0 +1,22 @@ +# Quadro de Vagas para Front-End + +Existe uma vasta quantidade de cargos técnicos. A lista, resumida abaixo, é atualmente a fonte mais relevante para se encontrar um cargo específico de front-end. + +* [Front-end Vagas](https://github.com/frontendbr/vagas) :brazil: +* [angularjobs.com](http://angularjobs.com/) :us: +* [authenticjobs.com](https://authenticjobs.com/#category=4) :us: +* [careers.stackoverflow.com](http://careers.stackoverflow.com/jobs?searchTerm=front-end) :us: +* [css-tricks.com/jobs](https://css-tricks.com/jobs/) :us: +* [codepen.io/jobs/](http://codepen.io/jobs/) :us: +* [frontenddeveloperjob.com](http://frontenddeveloperjob.com/) :us: +* [glassdoor.com](http://www.glassdoor.com/Job/front-end-developer-jobs-SRCH_KO0,19.htm?jobType=all) :us: +* [jobs.emberjs.com](http://jobs.emberjs.com/) :us: +* [jobs.github.com](https://jobs.github.com/) :us: +* [weworkremotely.com](https://weworkremotely.com/) :us: +* [fronthat.com](https://fronthat.com/) :us: + +*** + +###### NOTAS: + +Se você está procurando trabalho de front-end remoto, veja essa lista de [empresas que aceitam trabalho remoto](https://github.com/jessicard/remote-jobs) diff --git a/translations/pt_BR/pratica/questoes-entrevista.md b/translations/pt_BR/pratica/questoes-entrevista.md new file mode 100644 index 00000000..1df36e6a --- /dev/null +++ b/translations/pt_BR/pratica/questoes-entrevista.md @@ -0,0 +1,19 @@ +# Entrevistas para Front-End + +##### Perguntas que podem ser feitas: + +* [10 Perguntas de Entrevista Que Todo Desenvolvedor JavaScript Deveria Saber](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95) :us: +* [Perguntas de Entrevista de Emprego para Front-ends](http://h5bp.github.io/Front-end-Developer-Interview-Questions/) :us: +* [Quiz de Desenvolvimento Front-end](http://davidshariff.com/quiz/) :us: +* [Perguntas de Entrevista para Desenvolvedores Front-end](http://thatjsdude.com/interview/index.html) :us: +* [Quiz de JavaScript](http://davidshariff.com/js-quiz/) :us: + +##### Perguntas a serem feitas por você: + +* [Uma lista open-source de perguntas para desenvolvedores perguntarem a possíveis empregadores](https://github.com/ChiperSoft/InterviewThis) :us: + +##### Preparação: + +* [Preparando-se para uma entrevista para Desenvolvedor Front-end em 2017](http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/) :us: +* [Interview Cake](https://www.interviewcake.com/) :moneybag: :us: +* [Decifrando a Entrevista para Front-end](https://medium.freecodecamp.com/cracking-the-front-end-interview-9a34cd46237) :us: diff --git a/translations/pt_BR/pratica/salarios.md b/translations/pt_BR/pratica/salarios.md new file mode 100644 index 00000000..12109639 --- /dev/null +++ b/translations/pt_BR/pratica/salarios.md @@ -0,0 +1,18 @@ +# Salários de Front-End + +A média nacional americana de um Desenvolvedor Front-end de nível médio é em torno de [US$75.000](http://www.glassdoor.com/Salaries/front-end-web-developer-salary-SRCH_KO0,23.htm) por ano. Claramente, quando se está no começo da carreira, o salário pode ser em torno de US$35.000 anuais, de acordo com a localização e portfólio. + +![](../images/salary.png "http://intersog.com/blog/chicago-tech-salary-guide-2015/") + +Fonte da imagem: http://intersog.com/blog/chicago-tech-salary-guide-2015/ + + +No Brasil, há uma grande discrepância entre salários dependendo do estado ou até mesmo da cidade. Nos grandes centros, os salários tendem a ser maiores devido à maior competitividade entre empresas no mercado. + +A média nacional gira em torno de R$2.500,00 a R$3.500,00 mensais. [Nesta pesquisa](https://www.felipefialho.com/survey/) há mais informações sobre salários de acordo com cada região do país, além de informações sobre o nível de conhecimento dos desenvolvedores. + +*** + +###### NOTES: + +Um Desenvolvedor/Engenheiro Front-end Sênior tem potencial de morar em qualquer lugar do mundo (trabalhando remotamente) e ganhar mais de US$150.000 por ano (visite [angel.co](https://angel.co/jobs), inscreva-se, avalie trabalhos de Front-end com salários superiores a US$150.000 ou analise as faixas salariais no [Stack Overflow Jobs](https://stackoverflow.com/jobs?q=front-end&sort=y)). diff --git a/translations/pt_BR/pratica/tecnologias-empregadas.md b/translations/pt_BR/pratica/tecnologias-empregadas.md new file mode 100644 index 00000000..8007d699 --- /dev/null +++ b/translations/pt_BR/pratica/tecnologias-empregadas.md @@ -0,0 +1,124 @@ +# Tecnologias Web Empregadas por Desenvolvedores Front-End + +![](../images/web-tech-employed.jpg "http://www.2n2media.com/compare-front-end-development-and-back-end-development") + +Fonte: http://www.2n2media.com/compare-front-end-development-and-back-end-development + +As seguintes tecnologias web são as principais utilizadas pelos desenvolvedores front-end (considere aprendê-las nessa ordem): + +1. Uniform Resource Locators (aka URLs) +2. Hypertext Transfer Protocol (aka HTTP) +3. HyperText Markup Language (aka HTML) +4. Cascading Style Sheets (aka CSS) +6. JavaScript Programming Language (aka ECMAScript 262) +7. JavaScript Object Notation (aka JSON) +8. Document Object Model (aka DOM) +9. Web APIs (aka HTML5 e amigos ou APIs de Navegador) +10. Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA) + +Estas tecnologias são definidas abaixo com a documentação relevante e especificações. Para uma lista completa de todas as especificações relacionadas à web, dê uma olhada em [platform.html5.org](https://platform.html5.org/). + +##### HyperText Markup Language (aka HTML) + +> HyperText Markup Language (Linguagem de Marcação de Hipertexto), geralmente chamada de HTML, é a linguagem de marcação padrão utilizada para criar páginas web. Navegadores web podem ler arquivos HTML e renderizá-los em páginas web visíveis ou audíveis. HTML descreve a estrutura de um site semanticamente, juntamente com dicas para apresentação, fazendo dela uma linguagem de marcação, em vez de uma linguagem de programação. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/HTML) + +Especificações mais relevantes / documentação: + +* [Todas especificações HTML da W3C (Inglês)](http://www.w3.org/standards/techs/html#w3c_all) +* [Os elementos do HTML no Padrão Atualizado (Living Standard) (Inglês)](https://html.spec.whatwg.org/multipage) +* [Atributos Globais](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes) +* [HTML 5.2 from W3C (Offline)](http://w3c.github.io/html/) +* [Atributos](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) +* [Elementos HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) +* [A sintaxe HTML (Inglês)](https://html.spec.whatwg.org/multipage/syntax.html#syntax) no Padrão Atualizado + +##### Cascading Style Sheets (aka CSS) + +> Cascading Style Sheets (CSS, Folhas de Estilo em Cascata) é uma linguagem de folhas de estilo usada para descrever a aparência e formatação de um documento escrito em uma linguagem de marcação. Embora mais frequentemente utilizada para modificar o estilo de páginas web e interfaces de usuário escritas em HTML e XHTML, a linguagem pode ser aplicada à qualquer tipo de documento XML, inclusive XML simples, SVG e XUL. Junto com HTML e JavaScript, CSS é uma tecnologia base usada na maioria dos sites para criar páginas visualmente atraentes, interfaces de usuário para aplicações web, e interfaces de usuário para muitas aplicações móveis. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Cascading_Style_Sheets) + +Especificações mais relevantes / documentação: + +* [Todas especificações CSS da W3C (Inglês)](http://www.w3.org/Style/CSS/current-work#roadmap) +* [Especificação de Cascading Style Sheets Nível 2 Revisão 2 (CSS 2.2) (Inglês)](https://drafts.csswg.org/css2/) +* [Referência CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference) +* [Seletores Nível 3 (Inglês)](http://www.w3.org/TR/css3-selectors/) + +##### Document Object Model (aka DOM) + +> O Document Object Model (DOM, Modelo de Objeto de Documento) é uma convenção multiplataforma e independente de linguagem para representar e interagir com objetos em HTML, XHTML, e documentos XML. Os nós de todo documento são organizados em uma estrutura em árvore, chamada árvore DOM. Objetos na árvore DOM podem ser endereçados e manipulados utilizando métodos nos objetos. A interface pública de um DOM é especificada em sua interface de programação de aplicativo (API). + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos) + +Especificações mais relevantes / documentação: + +* [Especificação dos eventos de Document Object Model (DOM) Nível 3 (Inglês)](https://www.w3.org/TR/DOM-Level-3-Events/) +* [Padrão Atualizado de DOM (Inglês)](https://dom.spec.whatwg.org/) +* [W3C DOM4 (Inglês)](https://www.w3.org/TR/2015/REC-dom-20151119/) + +##### Linguagem de Programação JavaScript (aka ECMAScript 262) + +> JavaScript é uma linguagem de programação de alto nível, dinâmica, não tipada e interpretada. Ela foi padronizada na especificação de linguagem ECMAScript. Ao lado de HTML e CSS, é uma das três tecnologias essencials para a produção de conteúdo na Internet; A maioria dos sites utiliza-a e é suportada por todos os navegadores web modernos sem plugins. Javascript é baseada em protótipos com funções de primeira classe, tornando-se uma linguagem multi-paradigma, suportando estilo de programação orientado a objeto, imperativo e funcional. Ela possui uma API para trabalhar com texto, matrizes, datas e expressões regulares, mas não inclui qualquer E/S, como recurso de rede, armazenamento e gráficos, dependendo para estes do ambiente do host no qual ela está incorporada. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/JavaScript) + +Especificações mais relevantes / documentação: + +* [Especificação da Linguagem ECMAScript® 2017 (Inglês)](https://tc39.github.io/ecma262/) + +##### APIs Web (aka HTML5 e amigos) + +> Ao escrever código para a Web usando Javascript, há um grande número de APIs disponíveis. Abaixo está uma lista de todas as interfaces (isto é, tipos de objetos) que você pode ser capaz de usar ao desenvolver sua aplicação Web ou site. + +>— [Mozilla](https://developer.mozilla.org/pt-BR/docs/Web/API) + +Documentação mais relevante: + +* [Referência da API Web](https://developer.mozilla.org/pt-BR/docs/Web/API) + +##### Hypertext Transfer Protocol (aka HTTP) + +> O Hypertext Transfer Protocol (HTTP, Protocolo de Transferência de Hipertexto) é um protocolo de aplicação para sistemas de informação distribuídos, colaborativos e hipermídia. HTTP é a base da comunicação de dados para a Internet. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Hypertext_Transfer_Protocol) + +Especificações mais relevantes: + +* [Hypertext Transfer Protocol -- HTTP/1.1 (Inglês)](https://tools.ietf.org/html/rfc2616) +* [HTTP/2 (Inglês)](https://http2.github.io/) + +##### Uniform Resource Locators (aka URL) + +> Um Uniform Resource Locator (URL, Localizador Uniforme de Recurso) (também chamado de endereço web) é uma referência para um recurso que especifica a localização do recurso em uma rede de computadores e um mecanismo para recuperá-lo. Uma URL é um tipo específico de Uniform Resource Identifier (URI), embora muitas pessoas usem os dois termos de forma intercambiável. Uma URL implica os meios para acessar um recurso indicado, o que não é verdade para toda URI. URLs ocorrem mais comumente para referenciar à páginas web (http), mas também são usados para transferência de arquivo (ftp), email (mailto), acesso à banco de dados (JDBC), e muitas outras aplicações. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Uniform_Resource_Locator) + +Especificações mais relevantes: + +* [Uniform Resource Locators (URL) (Inglês)](http://www.w3.org/Addressing/URL/url-spec.txt) +* [URL Padrão Atualizado (Inglês)](https://url.spec.whatwg.org/) + +##### JavaScript Object Notation (aka JSON) + +> É o formato de dados primário usado para comunicação assíncrona entre navegador/servidor (AJAX), em grande parte substituindo XML (usado pelo AJAX). Embora originalmente derivado da linguagem de script Javascript, JSON é um formato de dados independente de linguagem. O código para analisar e gerar dados JSON está prontamente disponível em muitas linguagens de programação. O formato JSON foi originalmente especificado por Douglas Crockford. Atualmente ele é descrito por dois padrões concorrentes, RFC 7159 e ECMA-404. O padrão ECMA é mínimo, descrevendo apenas a sintaxe gramatical permitida, enquanto que o RFC também disponibiliza algumas considerações de semântica e segurança. O tipo de mídia oficial da Internet para JSON é application/json. A extensão de nome de arquivo de JSON é .json. + +>— [Wikipedia](https://pt.wikipedia.org/wiki/JSON) + +Especificações mais relevantes: + +* [Introdução ao JSON](http://json.org/json-pt.html) +* [JSON API (Inglês)](http://jsonapi.org/) +* [Os dados JSON Formato de comunicação (Inglês)](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf) + +##### Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA) + +> Acessibilidade refere ao design dos produtos, dispositivos, serviços ou ambientes para pessoas com deficiência. O conceito de design acessível garante tanto o "acesso direto" (isto é, não assistido) e "acesso indireto", que significa compatibilidade com a tecnologia assistiva de uma pessoa (por exemplo, leitores de tela de computador). + +>— [Wikipedia](https://pt.wikipedia.org/wiki/Acessibilidade) + +* [Accessible Rich Internet Applications (WAI-ARIA) Status Atual (Inglês)](http://www.w3.org/standards/techs/aria#w3c_all) +* [Web Accessibility Initiative (WAI) (Inglês)](http://www.w3.org/WAI/) +* [Web Content Accessibility Guidelines (WCAG) Status Atual (Inglês)](http://www.w3.org/standards/techs/wcag#w3c_all) diff --git a/translations/pt_BR/pratica/time.md b/translations/pt_BR/pratica/time.md new file mode 100644 index 00000000..03ce8ce6 --- /dev/null +++ b/translations/pt_BR/pratica/time.md @@ -0,0 +1,28 @@ +# Front-End em um time + +Um desenvolvedor front-end é, em geral, apenas um integrante de um time que projeta e desenvolve sites, aplicações web ou aplicações nativas feitas com tecnologias web. + +Um time de desenvolvimento básico para desenvolver sites ou aplicações de software para a web ***profissionais*** normalmente, possui pelo menos os seguintes papéis: + +* Designer Visual (fontes, cores, espaçamento, sentimento, conceitos visuais e temas) +* Designer/Arquiteto de Informação de UI/Interação (wireframes, especificar todas as interações do usuário e funcionalidades da UI, estruturar informação) +* Desenvolvedor Front-End (escreve código que é executado no cliente/aparelho) +* Desenvolvedor Back-End (escreve código que é executado no servidor) + +Os papéis são ordenados de acordo com a sobreposição de habilidades. Um desenvolvedor front-end normalmente saberá lidar bem com o design de UI/Interação bem como desenvolvimento back-end. Não é incomum que membros de um time executem mais de uma função ao assumir responsabilidades de um papel sobreposto. + +Assume-se que o time mencionado acima está sendo coordenado por um líder de projeto ou algum tipo de product owner (stakeholder, gerente de projetos, líder de projetos, etc.) + +Um time web maior pode incluir os seguintes papéis não apresentados acima: + +* Estrategistas SEO +* Engenheiros DevOps +* Desenvolvedores de API +* Administradores de Banco de Dados +* Engenheiros/Testadores de QA + +*** + +###### NOTAS: + +Uma pequena tendência parece estar surgindo onde um "desenvolvedor full-stack" assume as responsabilidades de ambos desenvolvedores front-end e back-end. diff --git a/translations/pt_BR/pratica/virando-fd.md b/translations/pt_BR/pratica/virando-fd.md new file mode 100644 index 00000000..3593d91f --- /dev/null +++ b/translations/pt_BR/pratica/virando-fd.md @@ -0,0 +1,48 @@ +# Como ser um Front-End? + +![](../images/making-fd.png "http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg") + +Fonte da imagem: http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg + +Como exatamente alguém se torna um desenvolvedor front-end? É complicado. Ainda hoje, você não pode ir para a faculdade e esperar se graduar com um diploma em engenharia front-end. Além disso, raramente escuto ou conheço desenvolvedores front-end que sofreram por toda uma graduação, normalmente desatualizada, em ciência da computação ou design gráfico acabarem escrevendo HTML, CSS e JavaScript profissionalmente. Da minha perspectiva, a maioria das pessoas trabalhando na área de front-end hoje parecem ser autodidatas ou vem de algum programa não creditado, curso ou bootcamp. + +Se você decidisse hoje que vai ser um desenvolvedor front-end eu recomendaria seguir o processo descrito abaixo (Parte II, ["Aprendendo desenvolvimento Front-End"](https://github.com/calaca/front-end-handbook-2017/blob/pt-br/translations/pt_BR/aprendendo.md), aprofunda-se em mais detalhes sobre fontes de aprendizagem). + +1. Aprenda o básico sobre como a web funciona. Certifique-se de saber o "o quê" e o "onde" sobre domínios, DNS, URLs, HTTP, redes, navegadores, servidores/hosting, JSON, APIs de dados, HTML, CSS, DOM, e JavaScript. Não se aprofunde muito em nada, apenas procure entender as partes e como elas se encaixam. Foque nas definições de alto nível para arquiteturas front-end. Comece com simples [páginas web](https://github.com/h5bp/html5-boilerplate/blob/master/dist/index.html) e estude brevemente [aplicações front-end (SPAs)](http://developer.telerik.com/featured/front-end-driven-applications-new-approach-applications/) +2. Aprenda HTML +3. Aprenda CSS +4. [Aprenda JavaScript (Inglês)](https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL) +5. Aprenda DOM +6. Aprenda JSON e APIs de dados +7. Aprenda os fundamentais de design de interface (padrões de UI, design de interação, design de experiência de usuário e usabilidade). +8. Aprenda a usar a CLI/linha de comando +9. Aprenda a prática de engenharia de software (arquitetura/design de aplicações, templates, Git, testes, monitoramento, automação, qualidade de código, metodologias de desenvolvimento). +10. Tenha uma opinião e customize a sua tool box com qualquer coisa que faça sentido para você (Webpack, React e Redux). +11. Aprenda Node.js + +Uma dica sobre aprender. [Aprenda as tecnologias reais subjacentes antes de aprender abstrações.](https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL) Não aprenda jQuery, aprenda o DOM. Não aprenda SASS, aprenda CSS. Não aprenda HAML, aprenda HTML. Não aprenda CoffeeScript, aprenda JavaScript. Não aprenda Handlebars, aprenda templates de JavaScript ES6. Não apenas use Bootstrap, aprenda padrões de UI. + +Quando estiver começando, você deve temer a maioria das coisas que ocultam complexidade. Abstrações nas mãos erradas podem aparentar habilidades avançadas, enquanto esconde o fato de que um desenvolvedor possui conhecimento inferior dos conceitos básicos ou fundamentais. + +As demais partes desse livro irão apontar o leitor para fontes potenciais que podem ser utilizadas para aprender desenvolvimento front-end e as ferramentas utilizadas quando se está praticando o desenvolvimento front-end. Assume-se que nesta jornada você está não apenas aprendendo, mas também fazendo enquanto aprende e investigando as ferramentas. Alguns sugerem apenas fazer para aprender. Por outro lado, outros sugerem apenas aprender a fazer. Eu sugiro que você encontre um meio termo entre os dois que corresponda ao funcionamento do seu cérebro. Mas, é claro, é uma mistura! Então não apenas leia sobre o assunto, faça-o. Aprenda, faça. Aprenda, faça. Repita indefinitivamente porque as coisas mudam rápido. É por isso que aprender os fundamentais, e não as abstrações, é tão importante. + +Ultimamente surgiram várias escolas de código/bootcamps de front-end, caras e não-creditadas. Esses caminhos para se tornar um desenvolvedor front-end são, em sua maioria, cursos direcionados pelo professor, que seguem um estilo mais tradicional de aprendizado, de um instrutor oficial (ementa, testes, questionários, projetos, projetos em equipe, notas, etc.). Mantenha em mente, se você está considerando um programa de treinamento caro, essa é a internet! Tudo o que você precisa para aprender está na internet para ser conquistado, custando pouco ou nada. Entretanto, se você precisa de alguém para dizer como pegar e aprender o que é de graça e te delegar a responsabilidade de aprendê-lo, você pode considerar um curso organizado. Por outro lado, não estou a par de qualquer outra profissão que é praticamente de graça para se aprender com apenas uma conexão a internet, centenas de dólares ao mês para assinaturas de screencasting e um desejo fervoroso por conhecimento. + +Se quiser começar hoje, considere consumir uma ou mais das fontes de aprendizado autodidata abaixo: + +* [TECNOLOGIAS DE DESENVOLVIMENTO WEB QUE DEVE-SE SABER 2016/2017 (Inglês)](https://www.youtube.com/watch?v=sBzRwzY7G-k) [assista] +* [Um guia de iniciante para programação Front-End (Inglês)](https://www.springboard.com/learning-paths/beginners-guide-front-end-programming/learn/) [leia e assista][de graça a $] +* [Torne-se um desenvolvedor web Front-End (Inglês)](https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer) [assista][$] +* [Front-End Curriculum (Inglês)](https://gist.github.com/stevekinney/03027e71aac341af14a2) [leia] +* [freeCodeCamp (Inglês)](http://freecodecamp.com/) [interaja] +* [Então, você quer ser um Engenheiro Front-End? (Inglês)](https://www.youtube.com/watch?v=Lsg84NtJbmI) [assista] +* [Desenvolvimento Web Front End: Começo de carreira (Inglês)](http://www.pluralsight.com/courses/front-end-web-development-career-kickstart) [assista][$] +* [Desenvolvimento Web Front End: Começando (Inglês)](http://www.pluralsight.com/courses/front-end-web-development-get-started) [assista][$] +* [Desenvolvimento Web Front-End: Rápida introdução com HTML5, CSS e JavaScript (Inglês)](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [assista][$] +* [Introdução ao Desenvolvimento Web (Inglês)](https://frontendmasters.com/courses/web-development/) [assista][$] +* [Fundamentos do Desenvolvimento Web Front-End (Inglês)](https://www.udemy.com/foundations-of-front-end-development/) [assista][$] +* [Aprenda Engenharia Front-End (Inglês)](https://frontendmasters.com/courses/lean-front-end-engineering/) [assista][$] +* [Uma linha de base para Desenvolvedores Front-End JS: 2015 (Inglês)](http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/) [leia] +* [Aprenda Desenvolvimento Web Front End (Inglês)](https://teamtreehouse.com/tracks/front-end-web-development) [assista][$] +* [Maestria Dev Front-End (Inglês)](https://mijingo.com/products/bundles/front-end-dev-mastery/) [assista][$] +* [Nanodegree de Desenvolvedor Web Front-End (Inglês, Português, etc.)](https://br.udacity.com/course/front-end-web-developer-nanodegree--nd001/) [assista][$] diff --git a/translations/pt_BR/recapitulando.md b/translations/pt_BR/recapitulando.md new file mode 100644 index 00000000..ea1c00a3 --- /dev/null +++ b/translations/pt_BR/recapitulando.md @@ -0,0 +1,43 @@ +# Recapitulando o desenvolvimento Front-End em 2016 + +* O ano dos [Componentes](http://developer.telerik.com/featured/front-end-application-frameworks-component-architectures/), para construir interfaces mais complexas. +* Sem mais aquela blasfêmia modinha: componentes sendo construídos em um único arquivo: HTML, CSS e JavaScript em um arquivo só! +* [React](https://facebook.github.io/react/), [Redux](http://redux.js.org/), [Webpack](https://webpack.js.org/), ECMAScript 2015 (vulgo ES6) e [Babel](https://babeljs.io/) ganham adoção massiva. Essas soluções [estão](http://stackoverflow.com/research/developer-survey-2016#technology-trending-tech-on-stack-overflow) [com](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results#js-bundlers) [tudo](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results#js-framework-essential) [de](http://stateofjs.com/2016/frontend/) [acordo](http://stateofjs.com/2016/flavors/) [com](http://stateofjs.com/2016/buildtools/) enquetes. +* Desenvolvedores percebem que, na maioria dos casos, aplicações híbridas com WebView e HTML5 não são vantajosas se comparadas às aplicações nativas. +* [React Native](https://facebook.github.io/react-native/) e [NativeScript](https://www.nativescript.org/) começam a substituir o desenvolvimento híbrido com HTML5. +* [Muitos abandonaram](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.f9waa6mnx) o Gulp e adotaram os scripts do NPM. Mas o Gulp continua popular. +* SASS continua popular, mas [PostCSS (+ CSSNext) ganha seu espaço](https://tylergaw.com/articles/sass-to-postcss). +* Linting/Hinting [HTML](http://htmlhint.com/), [CSS](http://stylelint.io/) e [JavaScript](http://eslint.org/) é algo que a maioria dos desenvolvedores usam (ESlint substitui o [JShint](http://jshint.com/) e o [JSCS](http://jscs.info/) está incluso no ESLint). +* A tendência dos desenvolvedores abandonarem o Sublime e o Atom pelo [Visual Studio Code](https://code.visualstudio.com/) começa. +* [jQuery permanece](https://trends.builtwith.com/javascript), mas seu uso/interesse está [em declínio](https://www.google.com/trends/explore?q=jQuery). [jQuery 3 foi lançado](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), mas é como uma árvore que cai na floresta e ninguém ouve. +* [Vue.js](https://vuejs.org/) continua ganhando adeptos. Merecido! +* Programação funcional e padrões em JavaScript [ganham](https://www.manning.com/books/functional-programming-in-javascript) [bastante](https://github.com/MostlyAdequate/mostly-adequate-guide) [atenção](https://github.com/getify/Functional-Light-JS) [ultimamente](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q). +* [Desenvolvimento Offline](https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/) & [Aplicações Web Progressivas](https://developers.google.com/web/progressive-web-apps/) ganham notoriedade. +* Microsoft [aparece e contribui](http://developer.telerik.com/featured/microsoft-done-lately/). +* Desenvolver aplicações nativas para Windows, OSX e Linux com [NW.js](https://nwjs.io/) e [Electron](http://electron.atom.io/) usando tecnologias Web torna-se possível. +* [Angular 2](https://angular.io/) (no futuro, apenas "[Angular](https://juristr.com/blog/2016/12/let-me-explain-angular-release-cycles/)") sai do armário e muitos percebem que nunca vai ser tendência como o Angular 1. +* JavaScript permanece como o [centro](http://stackoverflow.com/research/developer-survey-2016#technology-top-tech-on-stack-overflow) [das](http://stackoverflow.com/research/developer-survey-2016#technology-most-popular-technologies) [tecnologias](http://stackoverflow.com/research/developer-survey-2016#technology-correlated-technologies) no desenvolvimento de software. +* Mais desenvolvedores começam a se preocupar com automação e testes. +* [Geradores de sites estáticos](https://www.staticgen.com/) são [levados](https://github.com/vigetlabs/gulp-starter/tree/blendid) a [sério](https://phenomic.io/). +* [Os grids CSS tornam-se excitantes](http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/) e parece haver luz no fim do túnel. +* [NPM](https://www.npmjs.com/) ganha um competidor: [Yarn](https://yarnpkg.com/). +* A próxima evolução de soluções no estilo React aparecem com [Preact](https://preactjs.com/), [Deku](https://github.com/anthonyshort/deku), [Rax](https://github.com/alibaba/rax) e [inferno](https://infernojs.org/) sem muita alteração da API. +* Muitos aprendem a aceitar o [JSX](https://facebook.github.io/jsx/), e agora não sabem como viver sem isso. +* Um padrão de modularização CSS que funciona (encapsulamento CSS) é atualizado e usado e se torna viável para muitos: [CSS in JS](https://github.com/MicheleBertoli/css-in-js). +* Mais pessoas adotando os testes funcionais/de integração para interfaces, incluindo conceitos visuais como [CSS](https://css-tricks.com/automating-css-regression-testing/) & teste de regressão responsiva. +* Os dias de [batalhas](https://kangax.github.io/compat-table/es6/) [de API's de navegadores inconsistentes](https://html5test.com/results/desktop.html) estão quase para trás devido ao declínio do uso e desenvolvimento para [versões antigas do IE](https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0). +* Muitos percebem que vão precisar de uma [estratégia multi-dispositivos](http://www.intel.com/content/dam/www/public/us/en/images/iot/guide-to-iot-infographic.png) quando desenvolver para a Web. +* Mais desenvolvedores, de outras linguagens, continuam atormentando a comunidade JavaScript trazendo tópicos como [tipagem](https://flowtype.org/) e uma [obsessão com classes e conceitos de POO](https://www.typescriptlang.org/). +* Desenvolvedores front-end são apresentados ao [técnicas de substituição de Hot Modules e Time Travel Debugging](https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35#.ezlpqez1i). +* Mais pessoas esperando por navegadores com [loader nativo de módulos JavaScript](https://whatwg.github.io/loader/). +* [Enforcing CSS](https://css-tricks.com/stylelint/) e [convenções JavaScript](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) ganham importância (considerando variações entre ES3 e ES6 e variações sintáticas entre pré-processadores CSS). +* Uma pequena mas considerável quantidade de desenvolvedores começaram a [optar pelo Elm ao invés do JavaScript](https://www.brianthicks.com/post/2016/04/22/state-of-elm-2016-results/). +* Cresce o uso do [TypeScript](https://www.typescriptlang.org/) e ele adquire alguns fanboys. +* http://aurelia.io/ se torna uma [escolha inteligente para desenvolvedores corporativos](https://www.youtube.com/watch?v=6I_GwgoGm1w&t=3315s) (ex. suporte). +* [Webpack](https://webpack.js.org/configuration/) começa a [se desenvolver](https://opencollective.com/webpack) e se solidifica com relação ao [JSPM](https://www.pluralsight.com/courses/javascript-systemjs-jspm). +* [HTTPS, sim, sério.](https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn) +* [BASH](https://msdn.microsoft.com/en-us/commandline/wsl/about) on windows happens. +* Desenvolvedores começam a usar e abusar da [API de notificação](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API) no Chrome, mas só depois da permissão do usuário. +* [Firebug morre oficialmente](https://github.com/firebug/firebug). +* CSS [comemora 20 anos](https://www.w3.org/Style/CSS20/) em 2016. +* Conceito de [imutabilidade](https://facebook.github.io/immutable-js/) cresce rapidamente.