Category Archives: Javascript

Code Playgrounds – Introdução e soluções

Javascript No Comments

Introdução

Code Playground é uma ferramenta para editar e testar aplicações Web, utilizando HTML, CSS e JavaScript de forma online.

Com esse tipo de ferramenta é possível configurar pré-compiladores HTML, CSS e JavaScript, por exemplo:

  • HTML – Hml, Markdown, Slim e Pug
  • CSS – LESS, SCSS, Sass, Stylus e PostCSS
  • Javascript – CoffeeScript, LiveScript, TypeScript e Babel

Soluções

Abaixo, seguem algumas boas soluções:

  • Codepen – http://codepen.io/
  • JSBin – http://jsbin.com/
  • Plunker – https://plnkr.co/
  • CSSDeck – http://cssdeck.com/
  • Dabblet – http://dabblet.com/
  • Liveweave – http://liveweave.com/
  • JSFiddle – http://jsfiddle.net/

Conclusão

Entre os que mais se destacam, encontram-se o Codepen (possui mais pré-processadores Javascript), CSSDeck (bastante utilizado). Porém, assim como ocorrem com editores (Visual Studio Code, Atom, Sublime e Vim), a escolha depende da melhor adequação da ferramenta ao desenvolvedor.

Angular e Node.js – 1 – Introdução

Javascript No Comments

Olá, tudo bem?

Neste post, vamos iniciar o aprendizado do Angular e Node.js.

Sobre o Angular

AngularJS é um framework JavaScript open-source, mantido pelo Google e pela comunidade, que auxilia na execução de single-page applications.

Sobre o Node.js

Node.js é uma plataforma construída em tempo de execução de JavaScript do Chrome para facilmente construir aplicações de rede rápidos e escalonáveis. Node.js usa um bloqueio não-modelo orientado a eventos, I / O que o torna leve e eficiente, perfeito para aplicações em tempo real de dados intensivos que são executados através de dispositivos distribuídos.

Instalação

Node.js

Para a instalação do Node.js, basta acessar nodejs.org. O site detectará o sistema operacional da máquina e apresentará a correta versão para download. No momento da publicação, a versão disponibilizada foi 8.7.0.

Após a instalação, você pode testar digitando no prompt,

$ npm -version.

Typescript

$ npm install -g typescript

Typescript é um subset do Javascript, que transcompila em diferentes versões do javascript – garantindo mais recursos em ambiente de desenvolvimento e sendo mais portável ao transcompilar para diferentes versões do javascript para a execução.

Angular CLI

$ npm install -g @angular/cli

Verificação: $ ng -v

Trata-se de um facilitador de desenvolvimento de aplicações, ajudando a processar e agrupar arquivos TypeScript, JavaScript, CSS, HTML e imagens.

Criando um projeto

No prompt de comando, vá até o seu diretório onde serão armazenados seus projetos. No meu caso, optei por utilizar /opt/workspaces/projetos-angular/.

Digite o comando $ ng new NOME_DO_PROJETO (utilizei projeto-teste-angular1). Existem regras bem definidas para o nome do projeto, então, fique atento.

Rodando o projeto

Vá até o diretório do projeto (no meu caso, /opt/workspaces/projetos-angular/projeto-teste-angular1) e digite.

$ ng serve

Então, abra um navegador e digite.

http://localhost:4200/

Aparecerá a tela “Welcome to app!”