Entendendo um pouco sobre como utilizar localStorage com Javascript
Como configurar apps feitos com React Native para rodar em simuladores de iOS e Android, assim como aparelhos físicos.
Veremos os benefícios em usar IntersectionObserver.
Explicação dos conceitos básicos e fundamentais do Git Flow.
Conheça referências e caminhos curtos para entrar nesse mundão de possibilidades.
Um guia de como configurar um deploy automático a partir de uma imagem disponibilizada no AWS Container Registry.
Voltando o código para uma versão anterior.
E não, não é pegadinha e isso pode ser bom pra todos.
Como um programador treinou uma máquina para fazer HTML e CSS a partir de Mockups
A polêmica sobre a falta de segurança em códigos de terceiros
Criando uma app utilizando Express e MongoDB
Olá! Meu nome é Zeno Rocha. Ao longo dos últimos anos, aprendi muito sobre dar palestras e agora eu tô aqui para compartilhar essas lições.
Todo mundo precisa de um website e você precisa escolher a faixa de clientes que você quer trabalhar.
Um review sobre o Mantra da Produtividade
Uma análise simples de velocidade do Tableless depois da mudança para código estático.
Seu código é legível e fácil de dar manutenção? Veja neste post porque escrever código limpo é importante e como equilibrar isso com os prazos dos projetos.
Upload, certamente, é uma parte difícil na programação, provavelmente você já teve problemas com isso. Por que não simplificar? Confira como o simpleGallery.js pode lhe ajudar nesta jornada.
Com apenas seis caracteres na linha de comando você pode deixar seu site estático online.
O projeto AMP - Accelerated Mobile Pages, é uma iniciativa Google em conjunto com alguns publishers como Chartbeat, Vox, Wordpress.com, Twitter, The Washington Post, UOL, etc; de trabalhar uma estrutura de rápido carregamento de conteúdos em Smartphones.
Desmistificando as Expressões Regulares.
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.
Vocês trocariam seu Gruntfile (ou semelhantes) por um Makefile?
Uma breve explicação sobre a arquitetura Redux e suas principais características
Fazendo a animação do coraçãozinho do Twitter.
Por que escrever código Python é tão bom? Por que os programadores Python são tão apaixonados? Parte da resposta é a própria sintaxe da linguagem.
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! ;)
Projeto hospedado no GitHub ajuda a detectar versões e detalhes do navegador utilizado
Desenvolvedor web também pode construir aplicações desktop. Com o Electron, você usa HTML, CSS e JavaScript.
É fundamental que seu site seja rápido. Isso atrai e fideliza clientes. Veja aqui 10 dicas simples que podem acelerar seu site até 278 vezes
Motivações ao desenvolvimento acessível.
Há 5 anos atrás eu escrevi aqui no Tableless um artigo falando um pouco sobre acessibilidade na web. Cinco anos se passaram e os motivos para se ter esse cuidado ao desenvolver sua aplicação não mudaram, mas novas ferramentas surgiram para que você atenda cada vez mais às demandas dessa parcela da nossa sociedade que tem tanto direito de usufruir de seu website quanto as pessoas sem deficiência alguma.
Aprenda mais sobre esta técnica utilizada em metodologias ágeis e saiba usar seu tempo de folga para melhorar seus processos.
Centralize conteúdo e elementos na vertical e horizontal usando Flexbox do CSS.
Um boilerplate de Gulp com tarefas básicas de build e gerenciamento do projeto.
Notações diferentes para acessar as propriedades de um mesmo objeto em JavaScript
Com poucas linhas de código é possível criar um jogo simples em HTML5 utilizando o framework enchant.js.
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.
Qual a razão da existência dos valores 'initial' e 'inherit' na maioria dos atributos do CSS? Suas propriedades tem bastante significado, confira e entenda.
NodeSchool, um workshop de código aberto, presencial ou online.
Conheça mais sobre estas duas propriedades para a construção de layouts responsivos sem o utilizar frameworks de grids.
Fazendo animações a 60fps nos browsers atuais.
Sabe quando você faz o deploy com aquele ajuste no JS ou CSS e o usuário não consegue visualizar essas alterações por conta do cache do browser? Então, cache busting pode lhe poupar desse contratempo.
Eu escrevi meu próprio framework por que estava insatisfeito com os oferecidos no mercado. E foi ótimo!
Nesse tutorial, vamos instalar o bundle FOSUserBundle, para fazermos a autenticação para a área administrativa do nosso blog.
Nesse tutorial, vamos instalar o bundle StofDoctrineExtensionsBundle, para fazermos os slugs de nossos posts.
Entendendo um pouco mais sobre encode e como funciona o UTF-8.
Recentemente tenho me cobrado muito na questão de organização, parei para pensar e vi que minha vida estava desorganizada e consequentemente perdia algo preciso, o tempo.
Criando um grid simples com SCSS.
Nesse tutorial, vamos instalar e configurar o bundle Knp Paginator, para fazermos a paginação de nossos posts.
Saiba como customizar a barra de navegação do Chrome no Android usando apenas HTML.
Entenda um pouco mais como o HTTP2 vai ajudar na construção de sites.
Usando Kraken para otimizar suas imagens.
Nesse tutorial, vamos usar um componente do Symfony, o http-foundation, para usar UploadedFile, onde criaremos um upload de imagens para que possamos incluir em nossos posts.
Algumas tendências fortes que ainda veremos em 2015 e que podem perdurar ainda mais.
Um overview sobre a construção de Email Marketing.
Nesse tutorial vamos estruturar e estilizar nossas páginas com Bootstrap e com o mecanismo de template para PHP, o Twig.
Nesse tutorial vamos criar uma entidade Author e fazer o relacionamento com a entidade Post criada anteriormente, usando o componente Console do Symfony em conjundo com Doctrine ORM.
Dicas de comandos no Vim que podem te ajudar a poupar tempo, dinheiro e deixar o seu cliente feliz e satisfeito.
Técnicas que podem resolver vários problemas que desenvolvedores web enfrentam, caso não utilizem a atributo <strong>ALT</strong> corretamente.
Conheça o webpack: um bundler que permite dividir seu código em múltiplos módulos para serem lidos sob demanda.
O protocolo HTTP vai receber oficialmente uma grande atualização em breve. Saiba o que mudou.
Nesse tutorial vamos criar uma entidade e fazer o CRUD para nossa aplicação, e para agilizar nosso processo, continuaremos a usar o componente Console do Symfony 2, porém, em conjundo com Doctrine ORM.
Neste tutorial veremos como o Symfony facilita nosso processo de desenvolvimento e produtividade com o seu componete console.
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.
Um pouco sobre event delegation com a função <code>on()</code> do jQuery.
Uma excelente ferramenta de minificação de arquivo javascript. Vou falar alguma coisa sobre Closure Tools e alguns exemplos de código fonte.
Neste simples tutorial, vamos fazer a instalação do Symfony 2 e abordar alguns conceitos inicias.
Continuando com os artigos, vamos utilizar novamente os seletores de css para exibir nosso modal.
O desenvolvimento em html, javascript e CSS é uma forma mágica de se construir um mundo novo a cada linha de código. Os mágicos do front-end precisam de cartolas para que retirem seus coelhos.
Estou de volta como prometido anteriormente com uma séria de artigos, hoje criaremos 3 destaques com um comportamento totalmente responsivo.
A cada novo projeto queremos alcançar o máximo de usuários, não importa se o dispositivo seja grande ou pequeno, tem que funcionar.
Entenda um pouco mais sobre o pattern JavaScript Observer.
Conheça 7 plugins de Sublime Text que podem ajudar a sua produtividade diária.
Criar projetos usando geradores de arquivos estáticos podem ser uma saída estratégica para evitar ambientes complexos, o Middleman pode te ajudar a desenvolver projetos simples e rápidos.
Entenda como blogs e redes sociais podem andar de mãos dadas, veja como criar uma diagramação diferente para cada tipo de conteúdo e desenvolva temas para Tumblr utilizando variáveis dinâmicas e HTML.
Os padrões de código WordPress são para tornar mais legível, significativo, consistente e bonito o seu código PHP, HTML, CSS e JAVASCRIPT. E nesse artigo veremos alguns pontos sobre o CSS WordPress.
Aprenda o básico da API de Web Notifications.
Veja como aplicar filtros em imagens e elementos apenas com CSS.
E se um dia você criasse sua própria biblioteca JavaScript, no estilo da jQuery?
Como adicionar tipografia à web com recursos OpenType.
Conheça os principais estilos de escrita de CSS e aprenda o que você pode extrair deste mar de siglas para escrever código melhor.
Neste artigo vou utilizar uma aplicação single page para demonstrar passo a passo as etapas necessárias para publicar uma aplicação no Heroku.
O AngularJS oferece muitos recursos ao desenvolvedor, neste artigo vamos conhecer o de Single Page, utilizando ngView e ngRoute.
| Neste artigo vamos aprender a utilizar um aspecto bastante importante das funções: protótipos.
Conheça a Técnica Pomodoro, aprenda a gerenciar melhor seu tempo e entenda como fazer mais pausas pode te deixar mais produtivo.
Entenda os principais tópicos e as informações iniciais sobre Web Components.
Utilizando o PHPUnit para realizar testes com persistência de dados.
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.
Como fazer triângulos (arrows) usando apenas com CSS.
Um livro de front-end escrito por 11 desenvolvedores brasileiros falando um pouco de tudo. Essa é a Coletânea Front-end.
Também conhecido como o Santo Graal das páginas de internet, encontrar o carregamento perfeito não é tarefa fácil.
A futura implementação do Javascript Harmony capaz de observar e notificar aplicações sobre as mudanças ocorridas em objetos Javascript.
Um pouco de JavaScript não obstrusivo e quais as estratégias para garantir uma boa performance e acessibilidade em aplicações ricas.
Veja como criar um efeito semelhante ao fadeIn e fadeOut da famosa biblioteca Jquery apenas com javascript
Um dos grandes problemas encontrados no desenvolvimento de software é o gerenciamento de dependências. Saiba como o Bower pode ajudar.
Conheça o Wintersmith, mais um gerador de conteúdo estático.
Instalando o PHUnit utilizando o gerenciador de pacotes Composer.
Crie um blog em Octopress, framework baseado em Jekyll.
Entenda mais sobre Selenium e entenda como ele pode ajudar em aplicações web.
TDD é o desenvolvimento de software orientado a testes. Entenda mais detalhes e como usá-lo!
Entenda um pouco mais sobre como melhorar o gerenciamento de breakpoints com SASS.
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?
Participe de um micro workshop com o Diego Eis, onde ele implementará ao vivo um layout direto do PSD.
Saiba como você pode aumentar a acessibilidade da sua página de um jeito fácil com WAI-ARIA.
Como testar sua aplicação em um celular com Firefox OS.
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.
Como construir equipes e estruturas em diversos cenários.
Entenda como fazer um menu como nos aplicativos mobile, como o facebook.
No dia-a-dia, a correria em cumprir prazos nos faz buscar e fazer uso de ferramentas que possam auxiliar na velocidade de desenvolvimento. Seja no front ou no design, em tempos de mudanças e transições, nada mais justo que uma lista de algumas ferramentas especiais para que você mantenha seu processo profissional e ágil.
Anotações da minha palestra sobre como fazer seu próprio framework CSS.
Uma nova maneira de editar CSS.
Entenda como funciona o Github Pages.
Conheça os primeiros passos para contribuir para projetos pelo GitHub. Ideal para iniciantes!
Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos. Então, os pré-processadores e frameworks para CSS vem suprir essa necessidade. Com vocês, um pouco de Sass.
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.
Introdução para criar aplicativos para FirefoxOS.
Entendendo como utilizar a API de Geolocalização (geolocation) do HTML5 com Javascript.
Criando comandos de atalhos direto no terminal.
Entenda como automatizar tarefas com GruntJS.
Um pensamento sobre prazos e produtividade.
Como iniciamos e por que resolvemos criar um framework próprio aqui na Locaweb.
Como melhorar seu CSS Reset.
Faça o efeito parallax com 3 passos simples.
Entenda como funciona e como fazer um email marketing responsivo.
Entenda os princípios da tipografia na web e saiba como melhorar a leitura dos usuários.
Crie classes que podem ser reutilizadas de acordo com a sua necessidade.
Entenda o que são imagens SVG e como você poderá utilizá-las hoje.
Aplicações visuais para o Git.
Commit, Push e Pull. Entenda o que fazer depois que modificar arquivos.
O CSS3 está aí e você pode aprender brincando e usando toda sua criatividade. Conheça o canal da Mozilla onde você pode mostrar seus experimentos.
Entenda o que é o Git e como iniciar um projeto.
Melhorando a experiência do usuário não mascarando o password em mobiles.
Pensando alto.
Já imaginou poder trocar o CSS da sua ferramenta de Inspecionar Elementos? Pois é, você pode!
Entenda como a recomendação de Flexbox poderá nos ajudar a organizar a estrutura de sites e aplicações
Entenda mais sobre as duas unidades prediletas pelos desenvolvedores.
Aprenda a usar font para fazer elementos com ícones.
Entenda como você pode melhorar a velocidade do seu site de maneira rápida e simples.
Como utilizar os pseudo-elementos :before e :after com a propriedade content.
Utilize dois modos simples para identificar os IEs em seus projetos.
Conheça ferramentas de análise de código que ajudam a manter a qualidade e o padrão de suas aplicações javascript.
| Verifique algumas características importantes sobre performance e velocidade do seu website.
Entendendo e sincronizando as necessidades dos designers e programadores.
Entenda a diferença entre pré-processadores, frameworks e bibliotecas de CSS. Essa é a primeira parte sobre como estruturar uma área de client-side.
Entenda a diferença entre preprocessadores, frameworks e bibliotecas de client-side. Saiba o que usar em seus projetos e quais as suas particularidades.
Entenda melhor sobre densidade de pixels em aparelhos como o iPhone 4 e outros dispositivos que carregam Android.
Será que todo mundo precisa de um design responsivo? Você pode não estar dando atenção para o que realmente importa.
Com funcionalidades que apoiam resultados visuais exclusivamente à folhas de estilo, o CSS3 está sendo criado para otimizar fluxo e ritmo de trabalho, além de aproximar ainda mais Designers de Interfaces à profissionais Front-End. Com vocês, a texturização de textos via CSS3.
Conheça as vantagens do formato, aprenda a criar um livro do zero, descubra as melhores práticas e porquê você deve correr dos geradores automáticos.
Conheça alguns métodos pouco utilizados mas que podem ser grandes aliados dos desenvolvedores jQuery.
O conteúdo online pode ser acessado no mundo inteiro, não importa seu idioma. Para tanto o idioma deve ser declarado corretamente para que os meios de acesso entreguem o conteúdo da melhor forma possível.
Entenda como a propriedade background-clip do CSS3 funciona.
Entenda como funciona o CSS 3D e suas aplicações.
O CSS é algo muito simples de ser escrito mas com apenas um deslize todo o código pode transformar o projeto em um inferno. Saiba como podemos evitar isso.
Alguns browsers não aceitam as novas features de CSS3 e HTML5. Saiba como detectá-los e tratá-los com a biblioteca Modernizr.
Entenda como você não fará mais estruturas com a propriedade float.
Saiba como o CSS 3 possibilita a criação de efeitos de animações e transições.
O currentColor copia a cor da propriedade color e a aplica em outras propriedades de cor, como background, border e etc.
Normalmente em web trabalhamos com cores na forma de hexadecimal. Agora o RGBA nos permite que você aplique em uma determinada cor transparência.
Entenda como o browser calcula a especificidade do seu seletor e evite conflitos entre estilos.
Veja como exibir o conteúdo do seu site acabando com a necessidade de paginação e atualização da página.
Aprenda a manipular o viewport de mobiles e outros dispositivos com a metatag Viewport do HTML.
Como se não bastasse ser altamente personalizável através de plugins, o framework jQuery também é bastante flexível com seus seletores. Além de poder localizar objetos e elementos por ID, classe, nome do elemento, expressões e atributos também é possível criar o seu próprio seletor.
Entenda o que pode melhorar ou piorar a performance de carregamento do seu CSS.
Testando múltiplos backgrounds no CSS3. Isso realmente funciona! ;-)
Os convertidos do Tableless voltaram. Não preciso dizer mais nada. =^)
Fazer abas sempre foi muito chato para mim. Agora, os problemas acabaram com o :target.
Vamos ver como podemos aperfeiçoar seu site em WordPress para SEO e veja a importância de fazer isso.
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.
Aprenda a adicionar menus e edite no seu próprio painel de administração com as páginas ou links que você quer
Duas maneiras de modular seu código CSS.
Em meio à tutoriais e artigos a respeito, em alguns minutos consegue-se perceber algumas das novas possibilidades que o HTML 5 proporcionará, mas na prática da construção de códigos para interfaces, o que será possível além de secções, barras de menu, barras laterais, etc?
Customizar links do site pode ser algo rápido e útil para o seu visitante. Fazemos essa customização com a ajuda dos seletores complexos, onde conseguimos filtrar e selecionar links específicos de acordo com o valor do HREF.
O planejamento estrutural de seu código html é também de grande importância para organização de tags e propriedades css, para o trabalho em equipe e para uma manutenção facilitada.
"CSS 2D Transforms allow elements rendered by CSS to be trans- formed in two-dimensional space." É aqui que a graça do CSS 3 começa.
Aprenda a planejar e analisar seu website antes de colocar a mão na massa - quer dizer, no código.
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.
A tag audio é suportada pela maioria dos browsers atuais. Ela representa um som ou um stream de audio e pode ser utilizada agora. Leia como.
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.
O elemento NAV agrupa blocos de links de um mesmo assunto ou links internos do website. Ele indica que um determinado bloco é um bloco de navegação.
Mesmo com o lançamento de versões beta dos principais browsers, prontos para receber o HTML5, profissionais ainda enfrentam dificuldades em realizar o trabalho de webstandards nos dias de hoje.
Já é possível criar gradientes apenas utilizando CSS3. Sem imagens e com alguma compatibilidade com a maioria dos browsers do mercado. Vale a pena experimentar.
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.
Sobre modelos de conteúdo no HTML5.
font-face possibilita utilizar fonts externas em websites. Você já pode utilizar essa regra agora.
Quer ver o pessoal da Visie colocar um sistema no ar em um dia? Venha então para o CodeShow 2010.
São diversos aparelhos com diversas versões de browsers. Qual escolher? Por onde nivelar o desenvolvimento? Qual browser é melhor?
Se você é um desenvolvedor de verdade, você deve conhecer seu editor de códigos. Não importa qual ele seja, contanto que você o conheça do começo ao fim, saiba suas limitações e saiba utilizar suas vantagens para minimizar o tempo de produção.
iPhone, Android e S60. Há simulador de browsers para todos estes smartphones. Versionar sites para mobiles nunca foi tão fácil.
Filtrar mobiles pelo tipo de aparelho é muito comum. A moda é versionar o site para iPhone. Mas há outros aparelhos com a mesma capacidade de renderização que podem se beneficiar.
Como deixar o Rodapé fixo fim da página quando houver pouco conteúdo.
O efeito cascata do CSS é controlado pela especificidade e pela herança das propriedades.
Uma listagem de algumas referências e lista de propriedades sobre propriedades do CSS.
A pseudo-classe nth-child seleciona elementos dentre uma árvore de elementos se referindo a posição específica de cada um. Você pode por exemplo selecionar os elementos ímpares ou pares.
O CSS3 facilitará muitas coisas, uma das possibilidades é a criação automatica de colunas em blocos de textos. Para tanto, utilizamos as propriedades de columns do CSS3.
Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.
CSS Animation manipula características dos elementos, transformando-os modificando por meio de transições os valores das propriedades definidas dos elementos.
A propriedade position não serve para criar estruturas de layouts. Você o usará para coisas mais simples. Existem 3 tipos: relative, absolute e fixed. Entenda como eles funcionam e quais as suas relações.
Um bando de links interessantes sobre HTML, CSS e um pouco de layout.
O Wordpress utiliza uma hierarquia de arquivos para a criação de themes. Para criar bons sites e blogs baseados em Wordpress, é importante que você entenda essa hierarquia.
Uma breve explicação sobre pseudo-classes, seus funcionamentos e tipos.
Os seletores complexos mostram como a CSS pode ser dinâmica e direta.
Sobre seletores agrupados e seletores encadeados. Explicação rápida e básica.
Este foi um ano de batalhas como qualquer outro. Mas 2009 está chegando e quem sabe qual será o caminho que o desenvolvimento web irá percorrer?
Você pode ser diferente, mas isso só depende de você.
As vezes não é inteligente fazer o código CSS todo em apenas um arquivo CSS. É aí que entra a modularização do CSS.
Saiba como funciona o sitemap.xml
Entenda como funciona a tabela de caracteres e encodes no HTML.
Metatags servem dar informação sobre seu site para sistemas de buscas ou outras aplicações. Metadados são estruturas de informações que descrevem características de uma fonte de informação.
Saiba como centralizar um objeto na horizontal e vertical apenas com CSS.
Aprenda como criar um menu horizontal padrão com CSS.
Um guia para você lembrar do que o CSS é capaz.
Media Types servem para direcionar um determinado CSS para um determinado tipo de meio de acesso.
Entenda o que são Web Standards, o que é Tableless, quais as vantagens, relação com acessibilidade e tudo mais.
