Editores JS - Qual a melhor opção ?

Editores de código são sempre uma grande dúvida, para o JS muito mais, podemos utilizar tranquilamente qualquer editor de texto como o notepad++, porém um editor de JS nos dá maior produtividade, seja ele puro, ou com plugins / addons. Temos excelentes opções disponíveis.

Vamos as opções mais conhecidas do mercado.

Atom - Um editor de texto hackeável para o século 21 - https://atom.io/

Totalmente aberto e gratuito.

Disponível para as principais plataformas.

Muito leve e rápido.

Fácil personalização com Pacotes e Temas.

Sublime Text - é um editor de texto sofisticado para o código, marcação e prosa - http://www.sublimetext.com/ https://packagecontrol.io/

Pago - pode baixar para avaliação.

Disponível para as principais plataformas.

Muito leve e rápido.

Fácil personalização com Pacotes, possui um excelente gerenciador e uma vasta biblioteca.

Visual Studio Code - Edição de código redefinida e otimizada para compilação e depuração de aplicativos Web e de nuvem modernos -  https://code.visualstudio.com/

Gratuito.

Disponível para as principais plataformas.

Bem simples, mas com funcionalidade de debug, code complete e integrações com Git e outras.

WebStorm - A IDE JS mais inteligente - https://www.jetbrains.com/webstorm/

Pago - pode baixar para avaliação.

Disponível para as principais plataformas.

Muito leve e rápido.

Excelente funcionalidade de assistência de código para cliente e servidor.

Debug, trace e teste.

Integração com outras ferramentas Grunt, Bower, Npm, Git e etc.

Aqui algumas opções online para editar o seu código:

• Ace - http://ace.c9.io
• Codenvy - https://codenvy.com
• JS Bin - https://jsbin.com
• JS.do - http://js.do
• JSFiddle - https://jsfiddle.net
• Kodtest - http://kodtest.com/
• Liveweave - http://liveweave.com/
• Pen - http://codepen.io/pen
• Rendera - http://rendera.herokuapp.com
• Turb0js - http://www.turb0js.com/

Abaixo, algumas dicas sobre como personalizar o seu editor.

Rob Dodson (Polymer) dá dicas sobre o Sublime Text 2

http://robdodson.me/sublime-text-2-tips-and-shortcuts/

Google Developer também dá as suas dicas sobre o Sublime Text

https://developers.google.com/web/tools/setup/workspace/setup-editor

Kevin Ansfield da Lookingsideways dá usas dicas para o Atom.

http://lookingsideways.co.uk/2015/01/21/my-atom-setup/

Web Components já posso usar ?

Web Components

Vamos começar pelo que é Web Components, ele é um conjunto de HTML, CSS e JavaScript que funcionam independentes e individualmente.

São um grupo de especificações (W3C, a maioria ainda não concluídas, porém estão muito bem avançadas), onde estas tecnologias fazem (ou farão) parte do código do browser.

Specs

1 - Custom Elements

Permite o autor a criar seus próprios elementos HTML customizados, com nomes e scripts customizados.

Elementos customizados ainda são elementos, eles podem ser criados, usados, manipulados como qualquer outro elemento padrão.

Tem a finalidade de facilitar e simplificar, evitando o exagero de macarrões de tags.

2 - Shadow DOM

É onde uma parte do código do seu elemento é encapsulada e escondida pelo browser, ou seja, não é visível no código normal do DOM, mas que monta todo seu componente “por baixo dos panos”.

Permite criar trechos de código independentes e isolados, desse jeito não ocorre o vazamento de estilos e comportamentos para toda a página.

3 - HTML Templates

Definem pedaços de código (DOM) que são totalmente inertes à página até que seu Javascript os ative.

4 - HTML Imports

Definem quais elementos customizados são empacotados e lidos como um recurso.

Permite que seja incluído e reutilizado um documento HTML em outro.

Obs: DOM ou Document Object Model, é o nome da árvore de tags de uma página Web.

Bibliotecas

Essas são as 3 maiores bibliotecas hoje, que estendem e trabalham com Web Components.

X-TAGS da Mozilla - é uma biblioteca Javascript pequenininha, criada e mantida pela Mozilla, que traz as capacidades do Custom elements do Web Components para todos os browsers modernos.

Polymer da Google - é um novo tipo de biblioteca para a web, construída em cima de Web Components, e projetado para alavancar a plataforma web evoluindo em navegadores modernos.

Bosonic - é um conjunto de ferramentas que permitem que você construa Web Components como a especificação descreve atualmente, e suporte a navegadores não tão modernos como IE9.

Polyfills

No escopo de desenvolvimento web, o termo Polyfill quer dizer um código externo ao Browser para implementar uma especificação que o Browser não possui.

Para Web Components temos o excelente projeto WEBCOMPONENTS.ORG, que realiza a implementação das especificações para diversos browsers atuais ou não.

Repositório de componentes

Segue alguns repositórios de Web Components (o que infelizmente não é somente 1).

Custom Elements - Explore the world of Web Components.

Component.Kitchen - Web components give HTML the features you need.

Web Components já está pronto para usar ?

Sim, mesmo que ainda não esteja com as Specs fechadas, e com o desenvolvimento dos Browsers completos, existem muitas ferramentas já muito bem evoluídas, e em desenvolvimento acelerado.

O Polymer do Google por exemplo, com a versão 1.0 pronto para a Produção, já está sendo utilizada em larga escala pelo Google, implementando em diversos de seus projetos.

Excelentes artigos relacionados:

 Web Components é uma Revolução?

 Web Components: Introdução

Profissional Full Stack

Hoje eu li uma excelente matéria falando sobre o profissional Full Stack.

GUIA DE PROFISSÕES: DESENVOLVEDOR(A) FULL STACK

Conheça o que as empresas esperam desse profissional "canivete suíço".

Fonte:
Tutano - Trampos.co

Juliana Brito

Nosso Café - Ajudando a potecializar o seu metabolismo

  Café é um dos 10 hábitos que podem acelerar o seu metabolismo e ajudar a emagrecer, segundo a matéria da Exame.com

Como 10 hábitos simples podem acelerar o seu metabolismo

Fonte: 
Exame.com
Daniela Barbosa

Polymer Summit 2015 - Novidades!

  Aconteceu dia 15/09/2015 a Polymer Summit 2015 em Amsterdam, Holanda.

  Na Google I/O de 2015 já tivemos uma excelente apresentação do Polymer, mas esse evento exclusivo foi muito bom.

  Você pode assistir todo o evento pelo link: https://www.polymer-project.org/summit

  Excelente conteúdo para os amantes do Polymer, que está evoluindo a passos largos, com uma adoção em massa pelo Google em vários dos seus projetos.


  Foram 17 apresentações bem interessantes, segue elas abaixo com alguns comentários:

01. Opening Keynote
      Apresenta uma introdução do que é o Polymer, como começou, suas semelhanças como Lego.

02. Thinking in Polymer
      Apresenta como funciona as "peças" do Polymer conectadas.

03.  End to End with Polymer
      Apresenta um guia para de como começar até onde publicar a sua aplicação, muito dinâmico.

04. Using ES6 with Polymer
      Apresentada algumas novidades do ES6, e seu uso com o Polymer.

05. Testing Polymer Web Components
      Apresentado a ferramenta WCT - Web Component Tester, que facilita muito os testes de componentes do Polymer, mostrou também como fazer testes para componentes voltados a acessibilidade a11y.

06. Platinum Elements (The Polymer Summit 2015)
      Apresentado os componentes Platinum do Polymer, excelentes, tais como offline, push message e background sync.

07. There’s an Element for that — but what if there isn't?
      Apresentado padrões (patterns) para criar os seus próprios componentes que acessam uma api sua já existente.

08. Adaptive UI with Material Design and Paper Elements
      Apresentado o Material Design trabalhando em conjunto com o Polymer, demonstrado os Paper Elements que são os elementos que utilizam o Material Design.

09. Polymer's Styling System
      Apresentado o uso do CSS em conjunto com o Polymer.

10. Polymer's Animation System
      Apresentado o sistema de animação do Polymer, o neon-animation (neon elements).

11. Lightning Talk: Upgrading to 1.0 with polyup
      Apresentado o Guia de Migração e o Polyup para facilitar a atualização da versão 0.5 para 1.0 do Polymer.

12. Lightning Talk: Polymer's Gesture System
      Apresentado exemplos de utilização do Sistema de Gestos do Polymer.

13. A11y with Polymer
      Apresentado exemplos e dicas para melhorar a Acessibilidade do seu sistema, foi demonstrado o uso dos elementos iron e paper do Polymer.

14. Polymer Power Tools
      Apresentada algumas excelentes ferramentas para fortalecer o Polymer:
          - PolyServe
          - PolyUp
          - WCT - web-component-tester
          - Polymer Starter Kit
          - Material Palette
          - Build Tools
          - Vulcaniza
          - Crisper
          - PolyBuild
          - PolyLint
          - PolyGit
          - Browserify
          - Polymer Designer
          - Polymer DevTools

15. Doing a Perf Audit of your Polymer App
      .

16. Polymer Performance Patterns
      .

17. PolyPanel
      .


Espero que tenham gostado tanto quanto eu.

Café 2 Código - Por quê ?

  Com a necessidade de um espaço para publicar artigos ou matérias sobre as tecnologias disponíveis para codificarmos, foi criado o Café 2 Código.

  O nome veio da mundialmente (talvez exceto na Inglaterra) famosa frase:

"O Programador é uma máquina capaz de transformar café em código”

Segue algumas variações da frase.

  




  Caso você tenha a mesma necessidade de publicar algum conteúdo, entre em contato para aumentar o conteúdo do Café 2 Código.