posts da categoria Javascript

O Guia Completo do React e o seu Ecossistema

Você ouve falar frequentemente sobre o React mas sabe pouco sobre ele?

por Matheus Lima

Node.js - o back-end do front-end

Um pouco sobre hospedagem e a história do Node.JS

por Tableless

Construindo protótipos navegáveis em realidade virtual com A-Frame

A-Frame é um framework NODE.JS pra construção de aplicações em 360 no browser.

por Bruno Castro

Indo além no Mundo React-Native

Um estudo pessoal sobre as possibilidade do React Native.

por Jose Urbano Duarte Junior

Seu primeiro bot para o Telegram

Nesse artigo vamos mostrar o desenvolvimento de um BOT muito simples utilizando a API do Telegram.

por Rafael Augusto

Páginas acessíveis com o HaTeMiLe

O HaTeMiLe é uma biblioteca que utiliza os Padrões Web para resolver problemas de acessibilidade. Entenda melhor como ela funciona.

por Carlson Santana Cruz

O fim da profissão front-end

O front-end como você conhece vai morrer.

por Diego Eis

Como criar aplicações em tempo real usando Node.js e RethinkDB

Sobre o RethinkDB Se você precisa de um banco de dados NoSQL que funcione com dados JSON e tenha suporte completo para buscas em tempo real e uma mistura de modelos entre SQL e NoSQL, então uma boa opção é o RethinkDB. Trata-se de uma base de dados em código aberto em que todos os dados JSON são persistidos em tabelas como um banco de dados SQL convencional, permitindo que você execute queries entre múltiplas tabelas utilizando o comando clássico join.

por Jscrambler

Criando a sua primeira aplicação web com React

Um exemplo prático de como criar seu primeiro código com o Create React App.

por Lucas Daltro

O futuro das interfaces: Chatbots

Estamos acostumados a interagir diariamente com interfaces gráficas, seja no computador, celular, tablet, smart tv, etc. Naturalmente incorporamos a utilização dessas interfaces para obter nossos objetivos no dispositivo em questão, seja fazer uma busca no google, ver uma página no Facebook, ler um artigo em um portal de notícias ou escolher um filme no Netflix. Podemos não perceber, mas quando ligamos para um call-center onde a máquina (URA — Unidade de Resposta Audível) nos pede para dizer em voz alta o que desejamos, ou o número correspondente ao que queremos, também estamos interagindo com uma interface de voz para atingir nosso propósito.

por Raphael Guastaferro

Como instalar Node.js no Linux corretamente (Ubuntu, Debian, Elementary OS)

Recentemente comecei a minha migração do JSF para o Angular então busquei por um bom curso, pela documentação do Framework e um bom livro técnico. No caso do curso escolhi inicialmente o do Flávio Almeida na Alura e logo de cara fica claro que não é um Framework para iniciantes no mundo do JavaScript e nem para iniciantes no mundo da programação, o próprio Flávio avisa sobre isso mais de uma vez além de informar sobre a necessidade de dominar o terminal (o terror dos novatos) do seu sistema operacional.

por Mateus Malaquias

Angular 2, vale a pena?

O Angular é hoje uma das ferramentas mais largamente utilizada para desenvolvimento front end. Vale a pena migrar para a nova versão?

por Daniel Campos

Proteja seu código usando o Webpack

Não é um eufemismo dizer que que as ferramentas de front-end avançam rapidamente. Por um tempo, Grunt foi o principal automatizador. E desde então a comunidade adotou o Gulp, uma alternativa de streaming. Embora essas ferramentas sejam ótimas, você ainda precisará trabalhar dura para manter o seu sistema. E é aí que entram os empacotadores como o Browserify e Webpack. Como usar um empacotador Os empacotadores resolvem o problema fundamental no desenvolvimento front-end.

por Jscrambler

Trabalhando com serviços no Javascript

JavaScript é uma linguagem multiparadigma. Pode-se “_emular_” várias técnicas de programação com ele, e isso é incrível pois podemos decidir qual o melhor paradigma para a resolução dos problemas dos nossos projetos. Porém se por um lado isso pode parecer poderoso para a linguagem, também pode deixar os iniciantes bem confusos, é muito comum escolher a abordagem errada para o problema. Por esse motivo que o JavaScript em sido polêmico nos últimos anos.

por Vinicius Reis

Criando uma aplicação móvel com Ionic 2 e Angular 2 em dez passos

Introdução À esta altura do campeonato é provável que você já tenha ouvido falar da nova versão deste famoso framework para criação de aplicações móveis híbridas. O Ionic 2 acaba de chegar em seu Release Candidate e, com ele, trás uma série de recursos e otimizações de código, além de um considerável ganho de performance! Muito desse mérito se deve ao Angular (como é chamada a nova versão do framework, que deixa para trás o “JS” ao final do nome) que chega – finalmente – na sua versão estável, provando que não está para brincadeiras.

por Carlos Cabral

Yarn: A evolução do NPM

No dia 11 de outubro de 2016, o Facebook anunciou o seu novo gerenciador de pacotes para Javascript: o Yarn, que vem com a proposta de ser mais rápido, seguro e confiável que o NPM. O Yarn é open source, e nasceu com a colaboração, também, das empresas Exponent, Google, e Tilde.

por Daniel Campos

Hello World com React, do rascunho até o primeiro componente

Há muito tempo eu queria fazer um Hello World com React, mas nunca tinha tempo por que eu mudei de área há uns 3 anos, ficando mais na parte de gestão de produtos e times, deixando quase que totalmente o desenvolvimento e a escrita de código. Por isso, senti na pele o que os iniciantes sentem quando precisam fazer um simples Hello World de uma tecnologia nova. São tantos artigos falando coisas diferentes, usando setups diferentes, na sua maioria complexos e que não explicam as coisas com simplicidade.

por Diego Eis

API para Autenticar usuários com JWT e Passport

Neste artigo nós vamos explorar os principais conceitos e implementações da autenticação de usuário utilizando o mecanismo chamado JWT (JSON Web Token) por meio de um módulo Passport. Afinal, este é um importante passo para se certificar de que os usuários façam uma autenticação segura dentro de uma API baseada em REST. Antes de começarmos, vamos criar uma simples API em REST, que será utilizada ao longo deste post. Para simplificar nosso exemplo, nós vamos criar uma Express API.

por Jscrambler

Invertendo o Redux

Introdução   Já faz um tempo desde que implementei pela primeira vez o Redux. Numa época que só se falava nos frameworks, ele apareceu do nada, pelo menos para mim. Eu já conhecia o Flux, mas ainda não era o que estava procurando. O Redux realmente é uma das melhores idéias que vi, para mim faz todo o sentido e ainda é simples de entender e de se implementar.

por Javiani

Conversão de tipos em JavaScript

Um dia desses eu recebi um quebra-gelo no Telegram, com o seguinte: Number(null); // 0 null == 0; // true né? De cara eu pensei que seria false, mas fiz questão de rodar no console e ver no que dava. Claro que deu false. Mesmo assim, quis entender o motivo de Number(null) retornar `` e fui procurar na documentação do ECMAScript 6, ou ECMAScript 2015. O JavaScript, ou ECMAScript, tem um conjunto de operações abastratas que ocorrem por baixo dos panos.

por Gabriel Prates

Carrossel descomplicado com HTML, CSS

Não é difícil perceber que muitos desenvolvedores tanto iniciantes como os veteranos de guerra ainda sofrem quando o assunto é carrossel, mesmo utilizando frameworks como BootStrap. Mas seus problemas acabaram! (música de chegada milagrosa), com o conhecimento de poucas técnicas podemos resolver esse “gigante” problema facilmente. Pseudo classe :target – CSS Para resolver o grande problema de transição do carrossel, vamos utilizar a pseudo classe :target, que atribui algumas características do CSS para o elemento HTML.

por Leonardo Camp

Conheça o Vue.js, um framework javascript para criação de componentes web reativos

Venho acompanhando a evolução de diversos frameworks “frontend” ao longo dos últimos anos, e sendo um entusiasta ao estudá-los e criar conteúdo sobre eles. Talvez o primeiro framework que tenhamos mais destaque (após a geração jQuery) foi o AngularJS, que está forte até hoje, mas já possui o seu sucessor, o Angular 2 (atualmente na versão beta). Também temos o React e o Aurelia nesse jogo, e além de todos estes, temos o framework que iremos abordar neste artigo, o Vue.

por Daniel Schmitz

Criando sua aplicação React em 2 minutos

Configurar aplicações que utilizam React pode ser uma tarefa árdua e complexa... Babel, Webpack, ESLint, Autoprefixer... Mas agora não mais! Com o Create React App, é possível configurar o projeto em menos de 2 minutos!

por DiegoPinho

Aplicativos Desktop com NW.js – Node Webkit – Introdução

Este é o primeiro artigo de uma série sobre aplicações desktop usando tecnologias web. (HTML, CSS, Javascript e WebGL)

por João A. Zonta

Entendendo a indentação no Javascript

Código sem indentação não é legal de se ler, mas tem uma coisa um pouco pior que isso, ou tão ruim quanto, que é a falta de um padrão na indentação do projeto. Por exemplo, eu uso tab pois consigo ajustar meu editor para que ele exiba a quantidade que eu julgue necessária de espaços, mas pode ser que alguém da minha equipe use os próprios espaços, eai já imagina a beleza que vai ficar o código né?

por Júlio Carneiro

Paginação com JavaScript e jQuery

Como fazer um script de paginação usando JavaScript e jQuery

por Dyemerson Almeida

Programação funcional em Javascript. Implementando Curry e Compose, com bind e reduce.

Nos últimos tempos só se fala em programação funcional, seus benefícios, funções puras, dados imutáveis, composição de funções, etc. Atualmente temos diversas libs que auxiliam o javascript na missão de ser funcional, Lodash, Underscore e Ramda são uma delas. Então porque estarei falando do Pareto.js? Simples como o Princípio de Pareto, a lib criada tem o objetivo de ser leve e resolver 80% dos seus problemas com 20% de código.

por Bruno Gonçalves

Introdução à Programação Funcional (Functional Programming) em Javascript

Eu venho estudando functional programming já faz um tempo, e decidi colocar no papel o que aprendi, pois para mim essa é a melhor forma de reter o que se aprendeu. Além disso, será um prazer se esse post ajudar outros programadores. “Em ciência da computação, programação funcional é um paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis.

por maufarinelli

O básico sobre Expressões Regulares

Desmistificando as Expressões Regulares.

por Diego Eis

Fluxo de execução assíncrono em JavaScript – Generators e Async Functions

Tardou mas não falhou e veio como presente de ano novo. Este é o terceiro artigo de uma série que trata sobre execução assíncrona no JavaScript. Veremos a seguir como funcionam Generators e qual a sua aplicação em conjunto com Promises. Tratando um pouco do que vem por ai, faremos uma análise sobre a especificação de Async Functions.

por Jean Carlo Emer

ReactJS 101

Uma introdução a biblioteca para criação de interfaces do Facebook

por Bruno Belarmino

Criando aplicações CLI utilizando Node.js

Introdução As aplicações que se utilizam da linha de comando do Sistema Operacional são comumente chamadas de CLI Applications ou Command-Line Interface Applications. O que isto quer dizer? Estas aplicações só sofrerão alguma interação caso ela seja feita através de um Shell (BASH, DOS, ZSH, entre outros), mediante entrada de texto. Este tipo de aplicação é contrária as GUI Applications ou Graphical User Interface Applications, que permitem o usuário interagir com a aplicação através de ícones, disposição dos elementos na tela, utilizando-se do Mouse para isto.

por Igor Santana

Consumo eficiente de recursos computacionais de servidores de aplicação web com Node.js

Este artigo é o resultado de uma análise da plataforma Node.js, especificamente quando submetida a um alto número de acessos simultâneos, comparando os números dos indicadores de serviço e eficiência obtidos em testes de performance.

por Jamerson Bernardo

A arquitetura Redux usando Jails

Ultimamente tenho me preocupado mais com arquiteturas no front-end do que propriamente com as implementações de alguns frameworks. Isso porque eu acho que realmente nos falta um pouco mais de conhecimento sistêmico, mais arquitetural, porque os problemas só estão crescendo e percebi que pelo menos eu não estava acompanhando devidamente a complexidade das aplicações desenvolvidas em Javascript. Uma pequena reflexão Os frameworks acabaram aparecendo nos últimos tempos e percebo que tiveram uma importância muito maior do que o nosso amadurecimento quanto aos novos desafios nas aplicações web, especificamente na linguagem Javascript.

por Javiani

Manipulando o uso de classes com classList API

Manipule facilmente suas classes com o uso da classList API, uma API pequena e simples, porem de grande utilidade.

por Guilherme Bayer

Alternativa de CMS com Keystone.js

O Keystone.js é um framework desenvolvido em Node.js para servir de CMS e também de Web Application.

por victorkurauchi

Entendendo o async e o await em JavaScript

As funcionalidades async / await não conseguiram chegar para o ES6, mas isso não significa que elas não irão chegar ao JavaScript. Enquanto escrevo esse post, ela é uma proposta na fase 3 e está sendo trabalhada ativamente. As funcionalidades já estão no Edge e devem chegar a outros browsers assim que chegar na fase 4 - pavimentando seu caminho para inclusão na próxima edição da linguagem (veja também: Processo TC39).

por Wendell Adriel

Angular JS – Service x Factory

Qual a diferença entre service e factory no AngularJS? Esta é uma pergunta muito comum entre os desenvolvedores que estão usando o Angular JS. Neste artigo, vamos tentar responder isso!

por Guilherme Assemany

React Native: Construa aplicações móveis nativas com JavaScript

| Construir aplicações multiplataforma nunca foi tão simples e divertido. Conheça o framework que está mudando os rumos do desenvolvimento mobile baseado em JavaScript.

por Carlos Cabral

Introdução ao Redux

Uma breve explicação sobre a arquitetura Redux e suas principais características

por Henrique Sosa

Lodash ou Underscore? Talvez, nenhum!

Durante os últimos anos, bibliotecas como Underscore e lodash, encontraram seu espaço no cinto de utilidades de muitos programadores JavaScript. Embora essas bibliotecas ajudem a escrever e até facilitar a sua vida em partes do seu código, não necessariamente, esse código, fica simples ou de fácil entendimento. Quem estiver lendo ou mantendo o código será obrigado a, além de conhecer a linguagem e sua biblioteca padrão, também conhecer a biblioteca de utilitários que está sendo usada.

por Eduardo Rabelo

Exercícios Simples de JavaScript para Entrevista

Nesse artigo iremos ver alguns exercícios simples e rápidos de JavaScript que podem ser usados para ajudar a você a selecionar candidatos ou para você se dar bem em uma entrevista.

por Wendell Adriel

Criando efeitos de páginas de livro no seu front-end

Uma breve introdução da biblioteca Turn.js para fazer efeitos de páginas de livros no seu front-end.

por Fabio Soares

Gerenciando módulos no TypeScript

Como vimos no artigo anterior, com TypeScript podemos programar de forma orientada a objetos, criando classes, interfaces, get/set etc, e compilar tudo isso para JavaScript. Neste artigo veremos como criar módulos e separar classes e funcionalidades em arquivos distintos, de forma a tornar o nosso projeto mais organizado. Para instalar o TypeScript, você precisa ter o Node.js, juntamente com o NPM. Execute o comando npm install typescript -g

por Daniel Schmitz

Diga olá ao TypeScript e adeus ao JavaScript

Acredito que este artigo tenha chamado a sua atenção pelo título. Como assim??? adeus ao JavaScript??? A linguagem que está bombando em 2015 (e claro, 2016!). Posso estar sendo um pouco ousado aqui, mas eu tenho em mente que, neste momento, o JavaScript para mim é agora “linguagem de máquina” ou o famoso bytecode. Porquê? Bom, você conhece um código javascript minificado+comprimido+”esculachado”… Não estou retirando aqui toda a beleza do JavaScript, e consequente importância, mas na evolução que vem acontecendo a cada dia no mundo web, felizmente chegamos ao ponto que podemos tratar o javascript como uma linguagem tipada e semelhante ao c/java/php e derivados.

por Daniel Schmitz

Uma visão detalhada sobre instanciação de variaveis no JavaScript

Sabe quando a variável acaba ganhando um valor que você não esperava ? Pois bem, o JavaScript tem algumas formas de tratar variáveis e é sobre isso que vamos tratar aqui neste artigo. Escrevi este texto para o curso beMEAN - Instagram criado pelo Jean Suissa, fundador da Webschool. Gostaria de compartilhar com a comunidade, especialmente com os iniciantes. Vamos la! ;)

por Alex Miranda

Detectando navegadores com Bowser

Projeto hospedado no GitHub ajuda a detectar versões e detalhes do navegador utilizado

por Raphael Guastaferro

ES2015 – Babel 6 com Browserify e Babelify

O Babel 6 trouxe muitas mudanças na maneira que convertemos arquivos ES2015 para ES5.

por Renato Augusto Gama dos Santos

Introdução ao Electron

Desenvolvedor web também pode construir aplicações desktop. Com o Electron, você usa HTML, CSS e JavaScript.

por Henrique Sosa

Provent – Promises e Eventos… combinados.

Hoje, quando não estamos usando jQuery para lidar com eventos no DOM, nós presenciamos muito este trecho de código: document.querySelector('a').addEventListener('click', function() { // amazing stuff }); Embora funcione muito bem, nos trás alguns limites… Dentro do parâmetro de callback, é onde você define toda a sua lógica… Não tem uma maneira simples de adicionar mais callbacks dentro daquele evento de maneira dinâmica, sem que você salve algum tipo de estado dentro daquele callback… por exemplo:

por Mauricio Soares

Campo input date do HTML5 e internacionalização

Alguns navegadores como Chrome, Edge e Safari já começaram a suportar o elemento com sua nova propriedade valueAsDate. Ao invés de utilizar bibliotecas para exibição de calendário e até mesmo para tratamento de datas com internacionalização, sugiro adotar estes novos recursos HTML5 com pequenos fallbacks para navegadores que não suportam. Elemento Este novo elemento dispensa apresentação. Sua grande vantagem é a excelente usabilidade e internacionalização automática. Veja como fica a apresentação deste elemento no Android 5:

por rogerio dias moreira

Property accessors e porque você deveria saber usá-los

Notações diferentes para acessar as propriedades de um mesmo objeto em JavaScript

por filipemerker

Teste automatizado de API com frisby e jasmine

O Frisby é um framework para teste de API REST que roda em cima do nodejs. Seu principal apelo é a facilidade em se fazer testes automatizados de API com o apoio do framework de teste BDD jasmine. Instalação: Pré requisitos: nodejs, npm. 1) jasmine-node. Instalação global. sudo npm install -g jasmine-node 2) frisby. Instalação local no projeto. sudo nam install --save-dev frisby Hello, World! Para o uso devemos instanciar seu módulo:

por rogerio dias moreira

Introdução ao AMD com Require.js

Aprenda agora em 4 passos simples a modularizar seu código JavaScript utilizando a especificação AMD com RequireJS.

por Lucas Caprio

Introdução ao Meteor

Uma introdução ao Meteor.

por Leo Cavalcante

Raspagem de dados com Node.js

Raspagem de dados, ou Web scraping, é uma técnica de extração de dados onde é possível recuperar informações de websites. Existem diversas maneiras de fazer raspagem de dados: pode ser feito manualmente copiando e colando, utilizando uma ferramenta online, usando uma extensão para o navegador Google Chrome (como o Webscrapper), etc. Neste artigo será mostrado um passo-a-passo de como fazer raspagem de dados no site Portal da Transparência. O site Portal da Transparência é mantido pelo Tribunal de Contas da União, órgão que fiscaliza as contas do governo.

por Rennan Martini Rodrigues

Processo front-end na Locaweb

Nosso processo e stack de front-end na Locaweb.

por Diego Eis

Introdução a propriedades e métodos no JS

Entendendo um pouco sobre o uso de propriedades de valores e métodos no JavaScript.

por Diego Eis

Desenvolvendo apps para SmartTVs com HTML, CSS e Ajax

Entenda como funciona o básico do desenvolvimento pra SmartTVs.

por WillBliner

Crie seu jogo em HTML5 com enchant.js

Com poucas linhas de código é possível criar um jogo simples em HTML5 utilizando o framework enchant.js.

por Ezequiel M. Mello

Fluxo de execução assíncrono em JavaScript – Callbacks

Este é o primeiro artigo de uma pequena série a respeito de execução de código assíncrono. Definiremos o que é fluxo de execução e veremos o que é e quão importante é dominar as callbacks na escrita de código JavaScript.

por Jean Carlo Emer

NodeSchool – Um jeito fácil para aprender Node e JavaScript

NodeSchool, um workshop de código aberto, presencial ou online.

por Diego Eis

Parse – Objetos na nuvem

Parse, um banco de dados, na nuvem, orientado a objetos.

por Gabriel Ramos

Aprendendo JavaScript online

Sites para aprender JavaScript de maneira fácil e interativa.

por Diego Eis

Jails – O Framework e a Arquitetura do Javascript

Eu escrevi meu próprio framework por que estava insatisfeito com os oferecidos no mercado. E foi ótimo!

por Javiani

Desempenho e eventos jQuery: event delegation

Como a utilização de event delegation com o jQuery pode ser otimizada.

por leobetosouza

Polymer 1.0 : Pronto para produção

Tudo sobre a mais nova versão do Polymer e porque ele está pronto para produção

por Beto Muniz

Como criar um Chrome App com o seu Chromebook

Criando seu primeiro App para Chrome direto do seu Chromebook!

por Roger Albino

Flux: Entenda como funciona a arquitetura Flux com React

Arquitetura de aplicações para construir interfaces de usuário feita pelo Facebook.

por Macgyver

JavaScript: Dicas de bolso – parte 1

Dicas rápidas de JavaScript, uma linguagem beeem legal mas cheia de pegadinhas do malandro.

por Raphael Fabeni

Collections ES6 – parte 1

Novas estruturas de dados do Javascript

por Bruno Belarmino

Jasmine: entendendo os matchers

Provavelmente você já deve ter ouvido de Jasmine certo? Por acaso, você conhece todos os matchers que ele nos oferece pra testar?

por Raphael Fabeni

Funções do JavaScript na versão ES 6 – Parte 1

Entendendo algumas novidades em funções do JavaScript na versão ES6.

por caioincau

Um mix de orientação a objetos + filter, map e reduce com Javascript.

Criei alguns objetos simples mas com propriedades usadas no nosso dia-a-dia. Estes objetos estão armazenados num vetor de projetos. Cada objeto representa um projeto e tem as propriedades id, objeto, valorTotal e investido. var projetos = [ {id: 12, objeto: "revitalização da ponte abc", valorTotal: 220000.25, investido: 10000.00}, {id: 14, objeto: "duplicação da rodovia br-101", valorTotal: 747800.50, investido: 35000.00}, {id: 34, objeto: "aterramento localidade xyz", valorTotal: 635405.70, investido: 16500.00} ]; Aqui temos uma função que age como um construtor.

por itanor

Iterators ES6

Uma nova forma de interagir com collections no Javascript

por Bruno Belarmino

Condições ternárias

Algumas condições simples precisam de muito código para definir uma atribuição. Podemos usar condições ternárias para tornar nosso código mais conciso.

por Felipe Rodrigues

Múltiplas galerias de fotos dinâmicas com Fancybox, Ajax e JSON

Transferindo dados entre o PHP e Javascript do jeito certo.

por pdechery

Introdução ao webpack

Conheça o webpack: um bundler que permite dividir seu código em múltiplos módulos para serem lidos sob demanda.

por Leo Cavalcante

Tamanho da tela e tamanho da janela com JavaScript

Um breve spike para comparar os valores do tamanho da tela e da janela em diversos dispositivos.

por Diego Eis

Em um relacionamento sério com generators front-end – Parte 3

Nesta terceira parte da série, iremos abordar o Slush Generator, que é um Scaffolding Generator baseado em NodeJS e que tem uma forma diferenciada para criação de seus scaffolds.

por Beto Muniz

Formulário responsivo com MailChimp

Cada dia mais estamos utilizando serviços disponíveis na web, principalmente aqueles que tem um plano básico gratuito que permite integrações.

por Palloi Hofmann

Entendendo o Event Delegation da função on() no jQuery

Um pouco sobre event delegation com a função <code>on()</code> do jQuery.

por Diego Eis

Closure Tools

Uma excelente ferramenta de minificação de arquivo javascript. Vou falar alguma coisa sobre Closure Tools e alguns exemplos de código fonte.

por Leonardo Lima

ECMAScript 6, uma breve introdução à POO

Veja como ficou a programação orientada à objetos na nova especificação do JavaScript. Construiremos uma mini loja virtual usando classes com ECMAScript 6!

por Lenilson Nascimento

Utilizando navigator.language

| Vamos entender como funciona o navigator.language, com um pouco de teoria e prática.

por Leonardo Lima

Em um relacionamento sério com generators front-end – Parte 2

Na parte 2 de nossa série, vamos falar de Yeoman, um generator que, na minha opinião, é bem completo e atende a grandes necessidades na criação de um projeto.

por Pedro Polisenso

Em um relacionamento sério com generators front-end – Parte 1

Essa é uma série que vai abordar generators usados por desenvolvedores front end no mercado. Um post que vai mostrar desde conceitos até a prática, que convém a nós é o que mais interessa.

por Pedro Polisenso

EmberJS para iniciantes – Parte 1

Iniciando com Ember.JS

por Anderson de Castro

i18next para Internacionalização

Eu nunca me importei até que em um belo dia, um cliente teve essa necessidade e foi aí que precisei pensar, pesquisar e aprender sobre internacionalização. Participei de um projeto para a copa do mundo e o conteúdo deveria ser suportado por no mínimo 3 linguas diferentes: o inglês, espanhol e o português. Mas eu nunca tinha feito nada multilinguagem e nesse momento quase bateu o desespero. Acho que a pior dificuldade foi de me expressar, porque até então eu não tinha noção de que o termo internacionalização seria a palavra chave pra isso tudo.

por Thulio Philipe

Web Speech API – Reconhecimento de voz com JavaScript

Imagine websites onde os usuários podem navegar pelas páginas ou preencher campos de formulário usando a sua voz e até mesmo interagir com a página enquanto dirige, sem tirar os olhos da estrada.

por Clovis Neto

Design Patterns em JavaScript – Observer

Entenda um pouco mais sobre o pattern JavaScript Observer.

por Bruno Ruiz

Introdução à programação orientada a objetos em Javascript

Neste post, vamos criar uma pequena classe em javascript que aborda este método, para que possamos entendê-lo de forma simples e aplicar em nossos projetos.

por Henrique Schreiner

Melhores Práticas Web Components

Conheça práticas simples que podem ajudar na organização do seu web component.

por Mateus Ortiz

Entendendo as diretivas e fazendo abas com AngularJS

As diretivas do AngularJS estendem o código HTML, atribuindo funcionalidades aos componentes. Entenda como as diretivas funcionam fazendo uma funcionalidade básica de abas (tabs).

por Diego Eis

BrazilJS 2014

Anotações das palestras que rolaram no BrazilJS de 2014.

por Diego Eis

O que é Node.js e saiba os primeiros passos

Da instalação ao seu primeiro web server com JavaScript.

por Cosme Lopes

Criando um aplicativo simples de chat com Firebase

Um exemplo de utilização dessa poderosa plataforma de armazenamento e sincronização de dados em tempo real.

por Cosme Lopes

JavaScript Strict Mode

Como funciona o 'use strict' no JavaScript e saiba como ele pode ajudá-lo.

por Fabiano de Lima Abreu

Web Notifications API

Aprenda o básico da API de Web Notifications.

por Diego Eis

Construindo sua própria biblioteca javascript

E se um dia você criasse sua própria biblioteca JavaScript, no estilo da jQuery?

por Clovis Neto

Como publicar aplicação NodeJS no Heroku

Neste artigo vou utilizar uma <a href="http://minhas-midias-sociais.herokuapp.com/" rel="noreferrer">aplicação <em>single page</em></a> para demonstrar passo a passo as etapas necessárias para publicar uma aplicação no <a href="https://www.heroku.com/" rel="noreferrer">Heroku</a>.

por Igor Ribeiro Lima

Criando uma aplicação Single Page com AngularJS

O AngularJS oferece muitos recursos ao desenvolvedor, neste artigo vamos conhecer o de Single Page, utilizando ngView e ngRoute.

por Lucas Caprio

Dominando o uso de prototype em JavaScript

| Neste artigo vamos aprender a utilizar um aspecto bastante importante das funções: protótipos.

por Clovis Neto

Elevação ou JavaScript hoisting

Elevação é nada mais, nada menos do que trazer para o início do escopo a declaração de variáveis e funções. Ta, mas como funciona? Calma, vamos aos poucos. De primeira vista pode parecer extremamente complicado mais depois de saber o que está acontecendo, você vai dizer "poxa era só isso!".

por Jonatan Santos

Web Components: Introdução

Entenda os principais tópicos e as informações iniciais sobre Web Components.

por Diego Eis

Utilizando o MarkerClusterer no Google Maps

Você utiliza bastante o Google Maps em seus projetos? Já aconteceu de vários pontos ficarem muito próximos uns dos outros? Confira o MarkerClusterer, um recurso do Google para casos desse tipo que melhora a visualização do mapa.

por Raphael Fabeni

File API – Trabalhando com Arquivos Locais Usando Javascript

Trabalhar com arquivos no lado do cliente antes do HTML5 era dificultoso e e tinha pouco suporte. Com o File API, agora é possível capturar informações e ler o conteúdo de arquivos usando apenas o navegador por meio do javascript.

por Bruno Ruiz

Acelere o carregamento de suas páginas

Também conhecido como o Santo Graal das páginas de internet, encontrar o carregamento perfeito não é tarefa fácil.

por Jean Carlo Emer

Ghost – A simples e perfeita plataforma para publicações

E nós não estamos falando de fantasmas.

por Victor "reidark" Matias

Criando slideshow do zero com javascript puro

Veremos neste artigo como criar um slideshow do zero apenas com javascript e uma doze elegante de css3.

por Clovis Neto

Javascript Observe

A futura implementação do Javascript Harmony capaz de observar e notificar aplicações sobre as mudanças ocorridas em objetos Javascript.

por João Felix

Considere não usar JQuery

Em projetos pequenos ou em projetos com pouco javascript, considere não usar JQuery.

por Diego Eis

Qual a dose certa de JavaScript

Um pouco de JavaScript não obstrusivo e quais as estratégias para garantir uma boa performance e acessibilidade em aplicações ricas.

por Jean Carlo Emer

Criando efeito de fadeIn e fadeOut com javascript puro

Veja como criar um efeito semelhante ao fadeIn e fadeOut da famosa biblioteca Jquery apenas com javascript

por Clovis Neto

Web Storage – HTML5

Cookies foram por muito tempo, e ainda são hoje, uma das formas mais utilizadas para armazenar dados no cliente. No entanto, com o advento do padrão HTML5, surgiram novas alternativas para armazenamento de dados no cliente. A principal delas é o WebStorage.

por Bruno Ruiz

História de usuário e teste de aceitação em JavaScript

História de usuário é uma descrição resumida de alguma funcionalidade do sistema sob o ponto de vista do usuário.

por Igor Ribeiro Lima

Gulp: O novo automatizador

Automatize suas tarefas repetitivas de forma simples e rápida.

por Guilherme Kalani

API Google Maps V3

Agregue mais valor aos seus projetos a partir de agora, saiba como incorporar um mapa ao site sem iframe e deixá-lo com a sua cara.

por Thulio Philipe

JavaScript de forma assíncrona e legível

A programação assíncrona possui a vantagem de gerar códigos perfomáticos. Em certos casos, a implementação de diversas funções assíncronas encadeadas através de funções _callback_ pode prejudicar a leitura e a manutenção do código. Para demonstrar esse encadeamento, vamos utilizar um trecho de código que utiliza a API do Selenium 2. Baseado em um exemplo do site do SauceLabs. A API do Selenium WebDriver pode ser utilizada por diversas linguagem de programação, porém, em nosso exemplo, iremos utilizar o NodeJS (JavaScript) e o gerenciador de pacotes NPM, que podem ser baixados no site oficial.

por Igor Ribeiro Lima

Introdução ao Selenium 2

Entenda mais sobre Selenium e entenda como ele pode ajudar em aplicações web.

por Igor Ribeiro Lima

Modularização em JavaScript

Componentes e módulos nunca foram tão mencionados como ultimamente. Ambos são conceitos antigos que devemos entender e passar a adotar o quanto antes. Quem sabe você possa repensar o seu JavaScript hoje mesmo?

por Jean Carlo Emer

Introdução de como executar testes unitários em diferentes tipos de navegadores

Entenda um pouco mais sobre testes unitários e como executá-los em diversas plataformas.

por Igor Ribeiro Lima

Frame Player: Indo além da tag video em dispositivos móveis

| Será que nos dias de hoje todos os problemas envolvendo arquivos de media em dispositivos móveis foram resolvidos, ou novos problemas foram criados?

por Vagner Santana

Workflow para cuidar dos seus assets

O termo assets é utilizado na economia para caracterizar todo recurso que se poderá tirar proveito no futuro. Mas não se preocupe, nosso assunto aqui é sobre desenvolvimento web.

por Jean Carlo Emer

React: JavaScript reativo

Conheça a biblioteca React desenvolvida por Facebook e Instagram, que apresenta um novo paradigma para o desenvolvimento de aplicações web.

por Davi Ferreira

Dicas de como fazer seu próprio framework CSS

Anotações da minha palestra sobre como fazer seu próprio framework CSS.

por Diego Eis

EditorConfig

EditorConfig, um plugin que salva a vida de equipes inteiras.

por Diego Eis

JavaScript: entendendo o this

Conheça mais sobre a palavra reservada this e entenda como funciona o escopo de um objeto JavaScript.

por Davi Ferreira

Guia para Iniciantes – Ajude

Precisamos da sua ajuda para elaborar um guia para os iniciantes na área.

por Diego Eis

Medindo a complexidade do seu código JavaScript

Você sabe o que é complexidade ciclomática? E você sabia que já é possível medir a complexidade do seu código JavaScript?

por Davi Ferreira

JavaScript: Objetos Literais vs. Funções Construtoras

Neste artigo apresento um pouco mais sobre as duas formas disponíveis para criação de objetos em JavaScript, Objetos Literais e Construtores, suas vantagens e desvantagens.

por Davi Ferreira

Slides para Devs #8 – Frameworks JS

Apresentações sobre frameworks Javascript.

por Diego Eis

Está perdido? Geolocalização!

Entendendo como utilizar a API de Geolocalização (geolocation) do HTML5 com Javascript.

por Daniel Pereira Camargo

Slides para Devs #6 – Javascript

Apresentações sobre Javascript.

por Diego Eis

Templates client-side com Mustache.js

Mustache é uma especificação de templates que não utiliza lógica, ou seja, não possui declarações com <em>if</em>, <em>for</em>, <em>while</em> etc, toda sua construção é baseada em tags. Aprenda a implementar este tipo de template em seus projetos.

por Davi Ferreira

Grunt: você deveria estar usando!

Entenda como automatizar tarefas com GruntJS.

por Vagner Santana

Zepto.js: JavaScript peso-leve

Inicialmente lançado para aplicações mobile, o framework Zepto.js começa a ganhar espaço também no desktop graças ao seu peso reduzido e a sua alta compatibilidade com jQuery.

por Davi Ferreira

Medindo performance e latência com a Navigation Timing API

A Navigation Timing API é uma nova especificação do W3C para lidar com aferição de performance de modo mais efetivo em páginas web.

por Talita Pagani

Plugins jQuery e bibliotecas JavaScript para e-commerces

Usabilidade não é o forte da maioria dos e-commerces nacionais. Conheça alguns plugins que podem facilitar (e muito) a vida dos usuários da sua loja virtual.

por Davi Ferreira

Locaweb Style – Como iniciamos

Como iniciamos e por que resolvemos criar um framework próprio aqui na Locaweb.

por Diego Eis

Reveal.js: criando apresentações no navegador

Conheça a biblioteca reveal.js, uma ferramenta poderosa para a criação de apresentações de slides que não dependem de nenhum software especial, apenas um navegador moderno.

por Davi Ferreira

3 ferramentas para criar e gerenciar projetos web

Cada vez mais um número maior de ferramentas surge para auxiliar e agilizar o desenvolvimento web. Conheça alguns frameworks que têm como objetivo controlar e gerenciar o uso de bibliotecas, pré-processadores e utilitários em sites e aplicações web.

por Davi Ferreira

Performance front-end – Parte 2

O front-end é um dos grandes responsáveis pela performance de um website ou serviço online.

por Diego Eis

Parallax simples com JQuery e CSS

Faça o efeito parallax com 3 passos simples.

por Diego Eis

Web Móvel e suas aplicações

A implantação generalizada da web em dispositivos móveis torna um alvo de escolha para criadores de conteúdo.

por Giovanni Keppelen

Capturando erros JS LIKE-A-BOSS

Hoje iremos aprender para que serve o evento window.onerror e como tirar proveito desta ótima utilidade.

por Almir Filho

Parallax Scrolling

Entenda como funciona o efeito parallax.

por Dani Guerrato

Criando um plugin JavaScript (sem jQuery!)

Com a evolução dos navegadores e suas implementações de JavaScript e CSS3, será que precisamos mesmo utilizar jQuery em nossos projetos?

por Davi Ferreira

Adobe Edge

Adobe Edge - uma suíte que reúne diversas aplicações para ajudar os desenvolvedores web.

por Diego Eis

Underscore.js: cinto de utilidades JavaScript

Conheça esta biblioteca JavaScript que apresenta um conjunto sólido de utilitários para manipular listas e estruturas de dados.

por Davi Ferreira

Criando uma aplicação simples com AngularJS

Com a missão de enriquecer o vocabulário HTML o framework AngularJS chega com a marca Google de simplicidade e promete um workflow diferente para os desenvolvedores.

por Davi Ferreira

Retina.js – Imagens para telas retina

Mostre imagens de alta qualidade em dispositivos retina sem muito trabalho.

por Diego Eis

Identificando os IEs

Utilize dois modos simples para identificar os IEs em seus projetos.

por Diego Eis

Assegurando a qualidade do seu código JavaScript

Conheça ferramentas de análise de código que ajudam a manter a qualidade e o padrão de suas aplicações javascript.

por Davi Ferreira

Novos plugins jQuery e bibliotecas JavaScript

Animações, slides, fotos, templates e compartilhamento estão nessa lista de plugins jQuery e bibliotecas JavaScript que foram destaque nesta primeira metade de 2012.

por Davi Ferreira

JavaScript com café, parte 2

Conheça conceitos avançados sobre a linguagem CoffeeScript. Aprenda a utilizar classes, escopo e operadores existenciais.

por Davi Ferreira

Estruturação de front-end – Parte 1: Preprocessadores, Framewoks e Bibliotecas

Entenda a diferença entre preprocessadores, frameworks e bibliotecas de client-side. Saiba o que usar em seus projetos e quais as suas particularidades.

por Diego Eis

Entendendo quais APIs (realmente) fazem parte do HTML5

Sabemos que o HTML5 não se trata apenas de marcação, mas também de um conjunto de novas funcionalidades encapsuladas em APIs que podem ser acessadas via JavaScript. Porém, algumas destas APIs não fazem parte do núcleo do HTML5.

por Talita Pagani

JavaScript com café

Conheça a linguagem CoffeeScript que, diferente dos frameworks e bibliotecas, compila código JavaScript puro ao invés de ser apenas mais uma camada sobre a linguagem.

por Davi Ferreira

jQuery: conheça os métodos on() e off()

A versão 1.7 do framework jQuery implementa dois novos métodos que pretendem acabar de vez com a confusão gerada em torno da associação de eventos.

por Davi Ferreira

Manipulação de classes com JQuery

Entenda como funciona as funções do JQuery para manipulação de classes nos elementos do HTML.

por Diego Eis

jQuery: métodos desconhecidos

Conheça alguns métodos pouco utilizados mas que podem ser grandes aliados dos desenvolvedores jQuery.

por Davi Ferreira

Aprenda a programar Javascript no Codecademy

Aprenda a programar de um jeito fácil.

por Diego Eis

Introdução aos padrões de codificação

É mais importante para o time concordar em um único estilo de código do que encontrar o estilo perfeito.

por Diego Eis

Formulários e o Metawebdesign – Parte 1

Como montar formulários quando você é o responsável pelo código e design.

por Alysson Franklin

Utilizando a Biblioteca Modernizr

Alguns browsers não aceitam as novas features de CSS3 e HTML5. Saiba como detectá-los e tratá-los com a biblioteca Modernizr.

por Diego Eis

Testando seu código jQuery com Jasmine – Parte 2

Nesta segunda parte você conhece um pouco mais sobre o framework de testes Jasmine. Aprenda a criar matchers personalizados e testar AJAX e métodos em objetos.

por Davi Ferreira

Testando seu código jQuery com Jasmine – Parte 1

Com a evolução do desenvolvimento em JavaScript, testes automatizados começam a ganhar cada vez mais força. Neste artigo você conhece um pouco mais sobre a biblioteca Jasmine, focada em BDD &mdash; Behavior Driven Development.

por Davi Ferreira

Alternativas ao jQuery

Conheça as principais opções de frameworks e bibliotecas no desenvolvimento JavaScript e saiba que existe vida além do jQuery

por Davi Ferreira

Tenha o DOM

Entenda o que é o Document Object Model e tenha o DOM.

por Alysson Franklin

Entendendo os Reflows

O que são e como os Reflows podem ser otimizados para aplicações ficarem ainda mais rápidas.

por Alysson Franklin

Habilitando tags em fotos com jQuery

Aprenda a desenvolver uma interface para permitir que usuários apliquem tags/marcações nas fotos do seu aplicativo.

por Davi Ferreira

5 sliders de conteúdo para jQuery

Sliders são ferramentas poderosas para destacar conteúdo em um site. Neste artigo você confere cinco opções de plugins jQuery para a implementação dessa funcionalidade.

por Davi Ferreira

Em tempo de transição, quais recursos utilizar?

Acompanhar todas as mudanças que o desenvolvimento web vem sofrendo é tarefa muito difícil e bastante trabalhosa. Alguns de nós ainda preferem sentir-se mais seguros quanto a regulamentação dessas diretrizes e outros já estão testando e experimentando. Pra onde podemos direcionar nossa postura às evoluções?

por Thaiana Poplade

Conteúdo sob demanda com jQuery

Veja como exibir o conteúdo do seu site acabando com a necessidade de paginação e atualização da página.

por Davi Ferreira

Melhorando a exibição de tabelas com jQuery

Pode até ser meio irônico (já que estamos no Tableless!), mas neste artigo você aprende a dar um upgrade nas tabelas do seu site ou da sua aplicação web utilizando algumas técnicas jQuery.

por Davi Ferreira

PDF – Browsers antigos: guerra contra o terror

Não quero que você gaste tempo e dinheiro à toa se você pode ter resultados melhores se mudar um pouco o foco do desenvolvimento. Quero que você entenda que os visitantes que utilizam browsers antigos são sempre a minoria.

por Diego Eis

Um raio-x do seu website

Ferramentas e metodologia para entregar mais e com maior qualidade. O Progressive Enhancement pode nos ajudar como mostramos em outros artigos. E hoje vamos mergulhar em um tópico específico da metodologia.

por Alysson Franklin

12 plugins jQuery para começar bem o ano

Confira uma lista de plugins jQuery, em sua maioria novidades, para acrescentar opções à sua caixa de ferramentas na hora de desenvolver uma interface web.

por Davi Ferreira

Carrinho de compras com drag and drop

O mercado de e-commerce não para de crescer e este crescimento vem acompanhando de diversas novidades e melhorias nas interfaces das lojas virtuais. Uma delas é opção de arrastar e soltar produtos no carrinho de compras e é isso que você aprende neste artigo.

por Davi Ferreira

JQuery para produção de Layouts

Quando falta a compatibilidade de algumas propriedades do CSS nos browsers ou porque quando não é possível manipular o HTML manualmente para suprir suas necessidades, o JQuery poderá ajudar.

por Diego Eis

Templates e jQuery – parte 2

Agora que você já sabe como implementar templates em suas aplicações javascript, chegou a hora de conhecer técnicas avançadas de como combinar modelos HTML e scripts jQuery.

por Davi Ferreira

Bem vindo a Xangri-lá – Parte 2

Voltamos a Xangri-lá, para entender como as coisas funcionam. Veja como aplicar o Progressive Enhancement criando e customizando metodologias de trabalho. As expectativas e considerações do cliente geram o design e a funcionalidade de sua aplicação.

por Alysson Franklin

Templates e jQuery – parte 1

Separar a programação do HTML é uma prática constante no desenvolvimento web. Durante muito tempo, no entanto, o JavaScript ficou de fora dessa. Chegou a hora de reverter este quadro.

por Davi Ferreira

Javascript e acessibilidade

Dando continuidade a nossa série sobre acessibilidade, confira algumas dicas para desenvolver sites dinâmicos tendo um mínimo de cuidado com screen readers e navegadores com JavaScript desabilitado.

por Davi Ferreira

Vote no Especialista em Usabilidade para Presidente

A usabilidade é algo muito abrangente e você, profissional front-end, tem muito a ver com isso.

por Alysson Franklin

Associando eventos dinamicamente

Você sabia que é possível associar eventos antes mesmo dos elementos estarem presentes no DOM? Conheça os métodos .live() e .delegate() e aprenda a interagir com ações do usuário no seu site.

por Davi Ferreira

Anatomia de um plugin jQuery

jQuery é um framework JavaScript, o mais sexy do pedaço, que transformou essa linguagem em uma das mais importantes ferramentas presentes no set de um webdesigner ou um desenvolvedor frontend. O que antes era chato e complicado, passou a ser extremamente dinâmico e elegante.

por Davi Ferreira

Digest 06/09: Javascript, JQuery

Navegações e manipulações em jQuery e Javascript

por Diego Eis

Digest 05/09: Javascript, JQuery

Links e dicas sobre JQuery e Javascript.

por Diego Eis

Digest 04/09: Javascript, JQuery e Ajax

Links sobre Javascript, JQuery e Ajax para estudar e ter como referência.

por Diego Eis