Felipe Fialho - RSS Feed

Stack com AI que vai elevar seu trampo como dev

Thu, 05 Feb 2026 00:00:01 GMT

Nos últimos meses, usando o Claude Code em projetos reais, parei de discutir se “AI escreve código ruim” e voltei pra pergunta que realmente importa: como usar o ferramental atual pra deixar meu desenvolvimento mais eficiente e escalável?

O resultado foi uma combinação que não substitui dev nenhum, mas te faz desenvolver como se tivesse um time de especialistas do lado.

Stack (Front-end)

Essa combinação não é por acaso. LLMs reconhecem nativamente os padrões do Next.js, entendem as convenções do TypeScript e sabem trabalhar com os componentes do ShadCN sem necessidade de explicações detalhadas. Eles foram treinados com milhões de linhas de código dessa stack.

Desenvolvimento Front-end e programação em 2026: o que esperar do futuro

Wed, 14 Jan 2026 00:00:01 GMT

Introdução

A vida é um sopro e o tempo passa como um rolo compressor. Parece que foi ontem, mas faz exatamente 1 ano que escrevi sobre como tá o desenvolvimento Front-end em 2025 e o que esperar do futuro

Relendo aquele texto percebo que o que falei não só se confirmou como acelerou num ritmo que eu nem imaginava. E mais impressionante ainda: as mudanças não vieram de “novas tecnologias revolucionárias”, mas sim da evolução natural do que já vínhamos fazendo e, principalmente, da consolidação definitiva de AI como parte integral do fluxo de trabalho

AI e Engenharia de Contexto (Context Engineering) em um projeto do zero com vibe coding

Wed, 20 Aug 2025 00:00:01 GMT

Faz pelo menos 2 anos que tenho usado ativamente LLMs para criar código, geralmente para entregar features em projetos que já existiam.

Dito isso passei o último mês completamente imerso usando vibe coding pra criar uma aplicação de mundo real, complexa e do zero, com Next.js + TypeScript.

Aqui vão minhas percepções sobre ferramentas, modelos e workflows que usei nesse processo:

➡️ Ferramentas usadas

VS Code + Copilot

Usei esse combo por muito tempo e, no geral, funcionava bem.

O problema é que como na vida, pra cada vislumbre de felicidade, precisamos lidar com decepções e frustrações:

Essas abstrações tão matando a escalabilidade do seu código (mas pelo menos tá DRY né?)

Tue, 27 May 2025 00:00:01 GMT

Essa é uma versão em vídeo do conteúdo apresentado nesse artigo que publiquei no meu canal no Youtube.

Vale a pena assistir! 😁

📚 Livros recomendados sobre o tema

A vida é curta demais para criar abstrações reutilizáveis super complexas que só vão ser utilizadas uma vez. Se é algo que só vai ser usado uma vez, então não precisava ser nem reutilizável, muito menos complexo - Clarice Lispector

Front-end: O Início, o Fim e o Meio

Tue, 13 May 2025 00:00:01 GMT

Essa é uma versão em vídeo do conteúdo apresentado nesse artigo que publiquei no meu canal no Youtube.

Vale a pena assistir! 😁

📚 Livros recomendados sobre AI

Front-end: O Início, o Fim e o Meio

“Não precisamos mais de Front-end Developers. AIs já criam aplicações inteiras sozinhas.”

Falas assim têm se tornado frequentes, como se Front-end fosse algo trivial e quase descartável.

Inteligência Artificial, Filosofia da Programação e o Futuro dos Devs

Wed, 23 Apr 2025 00:00:01 GMT

Essa é uma versão em vídeo do conteúdo apresentado nesse artigo que publiquei no meu canal no Youtube.

Vale a pena assistir! 😁

Durante o período entre 2020 e 2022, mergulhei intensamente no universo dos livros, em especial, nas obras que discutiam Inteligência Artificial (IA). Entre os que mais me marcaram estavam Homo Deus e 21 Lições para o Século 21, ambos de Yuval Harari, autor também do aclamado Sapiens

O mais curioso é perceber que, mesmo naquela época, esses livros já tratavam da AI como algo presente, ainda que com um tom futurista.

Desmistificando Tech: Programar não é pra gênios, mas tá longe de ser fácil

Tue, 14 Jan 2025 00:00:01 GMT

É curioso como o censo comum sobre trabalhar com programação passou do mito de que é algo exclusivo pra gênios não sociáveis trancados num quarto escuro com seus códigos indecifráveis até chegar no mito de que programar é fácil e qualquer um pode ganhar muito dinheiro fazendo um simples curso de alguns dias.

O mito do “programador genial”

Por anos, essa ideia afastou muita gente da área, criando uma aura de exclusividade e inacessibilidade.

Mas na prática só serviu pra alimentar egos, gerar pressão desnecessária e incentivar códigos complexos cheios de overengineering. Os melhores devs que conheço não são “geniais”, simplesmente dominam as tecnologias que utilizam e possuem ótima capacidade de abstração pra chegar em soluções simples e eficientes.

Como tá o desenvolvimento Front-end em 2025 e o que esperar do futuro

Wed, 08 Jan 2025 00:00:01 GMT

Introdução

A vida é um sopro e o tempo passa como um rolo compressor, parece que foi ontem mas anos atrás escrevi alguns artigos sobre o “não-tão-mais-atual” cenário do Front-end e o que estudar pra se manter atualizado:

De repente pisquei e já estamos em 2025!

E o mais impressionante? Relendo esses artigos notei que praticamente tudo que falei lá continua válido, mas com algumas mudanças sutis que estão muito mais ligadas ao aprimoramento do que já estávamos fazendo do que a revoluções tecnológicas.

Sobre senioridade e o que vem depois de senior

Wed, 24 Jul 2024 00:00:01 GMT

Introdução

Então você completou dois anos de carreira tech e de repente ganhou sua carteirinha de senior (calma! brincadeira 😂). E agora? O que vem depois?

A ideia desse post é falar um pouco da minha experiência e explorar algumas possibilidades de carreira em tech e desenvolvimento profissional após o nível senior.

(Antes de tudo deixando absolutamente claro que essas são minhas opiniões e experiências pessoais sobre esse tema que pode ser bem subjetivo e variar muito de pessoa para pessoa)

Começando pelo começo, o que é ser senior?

Como melhorar performance em aplicações web 📈

Tue, 16 Jul 2024 00:00:01 GMT

Introdução

Performance é um dos fatores mais críticos para o sucesso de uma aplicação web. Uma aplicação lenta pode afetar a experiência do usuário e diminuir a taxa de conversão. Por isso, é importante que os desenvolvedores estejam sempre atentos à performance de suas aplicações e adotem boas práticas para garantir que elas sejam carregadas rapidamente e funcionem de forma eficiente.

Sobre performance no Front-end é importante cuidar de coisas como:

- minificação/otimização
- tamanho de imagens
- code splitting
- lazy load
- cache
- etc

Também observe "third-party scripts", principalmente injetados com GTM e afins. Podem estar silenciosamente drenando…
— felipe.tsx ⚡ (@felipefialho_) October 31, 2023

Performance é um assunto bastante abrangente e envolve diversos aspectos, como tempo de carregamento, tempo de resposta, uso de recursos, entre outros. Neste artigo, vamos abordar algumas práticas comuns para melhorar especialmente o tempo de carregamento de uma aplicação web.

Evitando armadilhas do Cache 🤡

Thu, 07 Mar 2024 00:00:01 GMT

Introdução

Neste artigo, vou compartilhar uma história real sobre como um erro de configuração do Service Worker causou um loop infinito impediu que os usuários recebessem atualizações de novas versões da aplicação e como resolvemos esse problema.

A história

Alguns anos atrás, em meados de 2017 (já faz tempo hein!), trabalhei numa aplicação SPA (Single Page Application) que tava sendo convertido em um PWA (Progressive Web App) usando Service Worker, tecnologia que permite que aplicativos web sejam instaláveis, funcionem offline e ofereçam uma melhor experiência de usuário.

Lidando com erros de Dynamic Imports no JavaScript

Mon, 26 Feb 2024 00:00:01 GMT

Introdução

Imagina uma aplicação de e-commerce, onde o usuário está prestes a finalizar uma compra e ao clicar no botão aplicação quebra?

Um verdadeiro desastre 😱

Se você utiliza importações dinâmicas em seus projetos JavaScript, provavelmente já se deparou com alguns erros “misteriosos” no Sentry (ou outras ferramentas de monitoria), como

Failed to fetch dynamically imported module
Unexpected token '<'
ChunkLoadError

Esses erros podem ser críticos e impedir o funcionamento correto da sua aplicação, por isso é fundamental entender como mitigá-los pra garantir a melhor experiência para seus usuários

Dicas de Segurança: Como proteger seus dados no celular

Thu, 11 Jan 2024 00:00:01 GMT

Introdução

Tempos atrás tive um celular furtado e além do prejuízo do aparelho, tive muita dor de cabeça porque ele tava desbloqueado, facilitando o roubo de dados e acesso a contas bancárias. Isso poderia ter me arruinado mas algumas medidas de segurança evitaram prejuízos maiores.

Na época criei uma thread do Twitter contando sobre o que aconteceu e muitas dicas de segurança foram compartilhadas

Alerta: Protejam seus dados

Ontem tive o celular furtado por um maluco de bicicleta e foi só o começo do transtorno

Como tomou da minha mão, o aparelho tava desbloqueado, minutos depois já tinham alterado senha do Google e logado de outro celular pra olhar senhas salvas e etc
— felipe.tsx ⚡ (@felipefialho_) February 6, 2022

Nesse artigo vou compartilhar algumas coisas que podem ajudar a prevenir desastres caso aconteça com você. Bora lá?

React, Angular ou Vue - Qual Framework JavaScript escolheria hoje? 🤔

Mon, 21 Jun 2021 00:00:01 GMT

Esse texto é uma versão em texto do vídeo: REACT, VUE ou ANGULAR - Qual framework JavaScript escolheria hoje que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

Introdução

Essa pergunta foi feita pelo Pablo Ferreira pelo LinkedIn e eu não vou fugir dela… ele perguntou na lata:

React ou Vue?

E pra eu me justificar 😋

Eu poderia facilmente responder essa pergunta dizendo que depende do contexto e blablabla, mas não vou fazer isso embora de fato essa seja a resposta mais sensata 😅

Meu primeiro site feito em 2007 😱

Fri, 28 May 2021 00:00:01 GMT

Esse texto é uma versão em texto do vídeo: Meu PRIMEIRO SITE feito em 2007 - Finalmente encontrei! que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

Nem todo legado é ruim

Depois de um tempo trabalhando com tecnologia a gente começa a perceber que o código escrito hoje eventualmente vai acabar sendo o código legado de amanhã, mesmo que tenham sido escritos seguindo os melhores padrões e abordagens sempre vão ter coisas que podem ser melhoradas.

A sina do desenvolvimento é abrir uns códigos que escrevemos um tempo atrás e pensar:

- Que merda eu fiz aqui
— felipe.tsx ⚡ (@felipefialho_) February 26, 2021

Isso porque além da velocidade que as coisas mudam e novidades aparecem, a tendência é que a gente também fique cada vez melhor dia após dia fazendo com que projetos criados no passado muitas vezes pareçam muito piores do que na verdade eram.

Collapse em 5 minutos sem JavaScript!

Fri, 30 Apr 2021 00:00:01 GMT

Esse texto é uma versão em texto do vídeo: SEM JAVASCRIPT - Collapse com HTML e CSS em 5min! que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

Introdução

Em 2014 criei um projeto chamado CSS Components que tinha como objetivo recriar os componentes do Bootstrap usando só HTML e CSS sem nada de JavaScript.

Naquela época imaginava que no futuro seria muito fácil desenvolver uma série de componentes nativos usando só CSS e HTML, mas não foi exatamente o que aconteceu nos anos seguintes.

Prática x Teoria - Quando aprendemos e quando entendemos?

Wed, 28 Oct 2020 00:00:01 GMT

Esse texto é uma versão em texto do vídeo: “Prática x Teoria - Quando aprendemos e quando entendemos?” que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

Começando pelas diferenças

Quanto entendemos?

Entender está no campo das ideias e das teorias

Acontece no nível intelectual e racional. É entender o mecanismo, a lógica ou a razão para que as coisas existam ou funcionem.

Quando publico algum conteúdo, por exemplo, não espero que as pessoas aprendam, espero que as pessoas entendam as ideias que estão sendo apresentadas. E espero ainda que que esses conteúdos incentivem essas pessoas a se aprofundarem por conta própria nos temas, para que ai sim elas aprendam.

14 Hábitos de Desenvolvedores Altamente Produtivos - Resenha do Livro

Thu, 24 Sep 2020 00:00:01 GMT

Esse texto é uma versão em texto do vídeo: “14 Hábitos de Desenvolvedores Altamente Produtivos - Resenha do Livro” que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

Sobre o livro

O livro 14 Hábitos de Desenvolvedores Altamente Produtivos, foi escrito pelo brasileiro Zeno Rocha e rapidamente se tornou um best seller, tanto na versão em inglês como na versão em português.

Ele foca muito mais em hábitos não técnicos do que fatores técnicos e consegue ser interessante tanto para pessoas em inicio de carreira como pessoas que já tem certa experiência na área.

Variáveis CSS: Os superpoderes das variáveis nativas do CSS

Thu, 03 Sep 2020 00:00:01 GMT

Esse texto é uma versão em texto do vídeo: “Variáveis CSS - Os superpoderes das variáveis nativas do CSS” que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

Evolução do CSS nos últimos anos

Nos últimos anos tivemos uma série de melhorias importantes no CSS, como CSS Grid e Flexbox e as Variáveis CSS, que na minha visão estão misteriosamente entre as coisas mais sub utilizadas do CSS.

O motivo disso talvez seja o fato das variáveis já estarem presentes faz anos e anos nos pré-processadores de CSS ou mesmo nas soluções de CSS-in-JS.

CSS Grid e Flexbox - Quando utilizar?

Tue, 11 Aug 2020 00:00:01 GMT

Esse texto é uma versão em texto do vídeo: “CSS GRID e Flexbox - Quando utilizar?” que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

No passado

Quem trabalhou com desenvolvimento Front-end no passado sabe da dificuldade que a gente tinha pra fazer coisas triviais como um simples alinhamento vertical.

O mesmo acontecia no desenvolvimento de Grids, então passamos por fazer como: Layouts em tabela, colunas desenvolvidas com float (com clear: both claro 😱) até a gente chegar em soluções melhores como: Jeet, Lost ou mesmo os Grids do Boostrap.

Design System, Venice e as peças do Lego

Tue, 19 May 2020 00:00:01 GMT

Esse artigo foi originalmente publicado no Medium da Juntos Somos Mais vale seguir e acompanhar os novos textos 😁

Sempre gostei de Lego (e suas variações de outras marcas), eu devia ter uns 5 anos quando tive o primeiro contato com esses blocos, o que mais me impressionou foi a possibilidade de fazer várias combinações com resultados completamente diferentes, mas sem modificar as peças originais.

A primeira experiência que tive com Design System e Componentes foi brincando com LEGO
— felipe.tsx ⚡ (@felipefialho_) May 14, 2020

Antes: JS+ Tech Talks

No dia 23/04/2020 tivemos a primeira edição da JS+ Tech Talks organizado pelo time de tecnologia da Juntos Somos Mais.

Lidando com a quarentena do COVID-19

Sun, 22 Mar 2020 00:00:01 GMT

A última vez que escrevi por aqui foi em novembro, ou seja, cinco meses atrás. Naquele momento o coronavírus estava silenciosamente fazendo seus primeiros contágios na China.

Até então, ninguém poderia prever o que viria pela frente dali em diante, nem os impactos que isso traria na economia mundial e nas nossas vidas.

Um Peru de Ação de Graças, é alimentado por 1000 dias até ser morto.

Do ponto de vista do Peru, por base estatística, o dia 1001 seria como os outros 1000.

- O Peru é você na vida

Não acredite em gurus, analistas políticos-economicos ou projeções.

Ninguém prevê merda nenhuma.
— felipe.tsx ⚡ (@felipefialho_) March 10, 2020

O Estoicismo e nossas vidas

Nesse período de quarentena que pode durar pelos próximos dias ou meses (de novo… não dá pra prever), uma coisa me preocupa bastante:

Nossos próprios pensamentos

Como se atualizar sobre Desenvolvimento (Front-end)

Wed, 27 Nov 2019 00:00:01 GMT

Nesse texto vou listar algumas coisas que podem te ajudar nessa complexa missão de se atualizar no mundo de Desenvolvimento.

Meu último artigo foi sobre como estudar, praticar e conseguir oportunidades como (Front-end) Developer, e apesar do assunto também envolver estudos, o foco nesse texto vai ser justamente na chamada atualização profissional, ou seja, estar minimamente por dentro das novidades.

Apesar das dicas estarem levemente enviesadas para Desenvolvimento Front-end, podem ser adaptadas para outras areas da programação.

Como estudar, praticar e conseguir oportunidades como (Front-end) Developer

Wed, 30 Oct 2019 00:00:01 GMT

Já tinha escrito um texto sobre o que Front-end Developers precisam saber e outro sobre 15 coisas que faria se estivesse iniciando minha carreira.

Agora vou escrever uma espécie de guia prático com alguns caminhos para quem está iniciando (ou não) profissionalmente.

Importante dizer que minha atuação principal é como Front-end Developer, então estou mais inserido nesse mercado e naturalmente as dicas são enviesadas para Desenvolvimento Front-end, mas podem ser adaptadas para praticamente qualquer área da programação.

Do Sass e BEM ao CSS-in-JS: A (re)evolução do CSS ao longo da história 🚀

Wed, 02 Oct 2019 00:00:01 GMT

Estão escrevendo CSS com JavaScript 😱? Sim 🥳

Se você nunca escutou falar ou nunca usou CSS-in-JS, pode ser estranho escrever CSS dentro do JavaScript. Mas não se assuste!

Nesse artigo vou falar um pouco sobre a evolução do CSS e porque pode ser uma boa ideia escrever CSS dessa forma atualmente.

Começando do começo, a evolução do CSS

CSS foi lançado em 17 de dezembro de 1996, mais de 20 anos atrás. Seu nome completo é Cascading Style Sheets (CSS) e serve para adicionar estilo num documento web.

O que Front-end Developers precisam saber

Wed, 18 Sep 2019 00:00:01 GMT

Versão em vídeo

Essa é uma versão em vídeo do conteúdo apresentado nesse artigo que publiquei no meu canal no Youtube.

Vale a pena assistir! 😁

Primeiro, alguns dados

Pesquisei no Google Trends, o interesse pelo termos Front-end Developer (Mundo) e Desenvolvedor Front-end (Brasil), nos últimos 10 anos.

Os números representam o interesse de pesquisa, relativo ao ponto mais alto no gráfico de uma determinada região em um dado período. Um valor de 100 representa o pico de popularidade de um termo. Um valor de 50 significa que o termo teve metade da popularidade. Uma pontuação de 0 significa que não havia dados suficientes sobre o termo.

Como foi desenvolver meu novo blog usando o GatsbyJS

Thu, 05 Sep 2019 06:46:38 GMT

4 anos depois da última atualização meu site está de cara nova, chegando assim na terceira versão desde a sua concepção em 2013.

Falando em 2013

Para quem tem curiosidade, essa era a cara desse site naquela época:

Nada mal né? Esse projeto foi desenvolvido no começo de 2013, queria aprender novas tecnologias, principalmente relacionadas a geração estática de HTML. Para desenvolver essa versão utilizei coisas como:

Pouco tempo depois, começou o boom de libs baseadas em JavaScript, muita coisa boa surgia, uma atrás da outra.

100 dicas sobre desenvolvimento Front-end

Mon, 14 Jan 2019 00:00:01 GMT

Nos últimos dias o Twitter recebeu várias threads super úteis partindo do principio: “Dá um RT ou uma curtida que eu faço um tweet sobre o tema”.

Achei a brincadeira legal e adaptei para o cenário developer com essa thread:

Vou entrar na brincadeira! 😂

1 RT = 1 dica rápida de front-end
— felipe.tsx ⚡ (@felipefialho_) January 10, 2019

A verdade é que achei que teria poucos RTs na minha thread, não imaginava que a brincadeira pegasse tanto entre devs, mas a parada pegou!

Além do alto número de retweets, outras pessoas resolveram aproveitar para também brincarem com a temática dev e quem usa Twitter teve uma semana com dicas sensacionais.

Como foi o Desenvolvimento Front-end em 2018 e o que esperar para 2019

Mon, 07 Jan 2019 00:00:01 GMT

Sobre esse artigo

O texto a seguir é uma tradução livre do artigo A Recap of Frontend Development in 2018 publicado pelo @treyhuffine.

Primeiro quero agradece-lo por ter escrito esse texto, segundo por permitir que eu fizesse essa tradução.

Importante ressaltar que a tradução não é literal, adaptei algumas partes para facilitar a compreensão. Caso encontre erros me avise que faço a correção 😊

O WebAssembly faz um grande lançamento com o Core Specification Reaching 1.0

O WebAssembly é frequentemente considerado o futuro da Web. O objetivo é maximizar desempenho, reduzir o tamanho dos arquivos e permitir o Desenvolvimento Web em várias linguagens, oferecendo um formato binário que é executado na Web.

Como contribuir com open source

Sat, 01 Dec 2018 00:00:01 GMT

Versão em vídeo

Essa é uma versão em vídeo do conteúdo apresentado nesse artigo que publiquei no meu canal no Youtube.

Vale a pena assistir! 😁

Estou no mundo de desenvolvimento web desde 2009.

De lá pra cá tive acesso a milhares e milhares de libs gratuitas, desenvolvidas por pessoas que não se limitaram a criar algo só pra elas usarem, elas pensaram na profissão como um todo e compartilharam para que outras pessoas também pudessem usar.

Mas esse é só um ponto. E é só código.

Você developer, já fez alguma dessas coisas?

- Gerou conteúdo
- Compartilhou o que sabe
- Palestrou
- Respondeu dúvidas
- Ajudou em projetos
- Organizou eventos

É tudo open-source.

Open-source é uma filosofia, vai muito além de código. É também: ajudar, compartilhar e ensinar.
— felipe.tsx ⚡ (@felipefialho_) March 13, 2019

Tem todos os outros pontos

Meu dia-a-dia como desenvolvedor em 2018

Mon, 15 Jan 2018 00:00:01 GMT

Escrevi meu dia-a-dia como desenvolvedor em 2015 e 2017 (em inglês). Como em 1 ano, muita coisa muda, bora atualizar.

Rotina

Não trabalho mais remoto desde abril do ano passado, quando comecei a trabalhar no Cubo (podem ver como foram os primeiros seis meses nesse artigo).

Existem vantagens e desvantagens em trabalhar remoto, porém a maior vantagem e o fator mais determinante nessa modalidade é a qualidade de vida: Não se preocupar mais com deslocamento, trânsito, caos na cidade e consequentemente aumento do valor hora.

Retrospectiva

Sun, 31 Dec 2017 00:00:01 GMT

Se quiserem podem acompanhar minhas retrospectivas de 2013 e 2016.

Esse foi definitivamente um ano cheio de conquistas profissionais e pessoais, teve várias viagens, um monte de shows, mudança de apartamento, mudança de emprego, um puta crescimento da Front-end BR, entre outras coisas.

Vou focar apenas na vida profissional, separada por trimestre. E para a leitura não ficar cansativa, vou separar por tópicos novamente.

Janeiro / Fevereiro / Março

Edição final do Meetup CSS

Logo no inicio do ano, escrevi um artigo mostrando vários eventos frontenders legais que aconteceriam em 2017
Escrevi um artigo (em inglês), contando como estava meu workflow naquele momento
Rolou a edição 23 do Meetup CSS dentro da Anhembi Morumbi para os alunos de lá com talk do Raphael Fabeni
Escrevi uma dica bem legal, ensinando a usar uma técnica usando white-space: nowrap no CSS para fazer uns fallbacks legais
O Raphael Fabeni e eu, decidimos dar um tempo com o Meetup CSS
Durante a primeira Front-end Week do ano, rolou a última edição oficial do Meetup CSS, com ótimas talks do Mario Souto e da maravilhosa Alda Rocha.

Desenvolvedoras e desenvolvedores do meu Brasil... Compartilhem conhecimento!

Fri, 27 Oct 2017 00:00:01 GMT

Desenvolvedoras e desenvolvedores do meu Brasil

Nunca deixem de compartilhar conhecimento!
Se eu pudesse dar só uma dica profissional seria esta:

Compartilhem conhecimento!
Os benefícios a longo prazo
De compartilhar conhecimento estão provados
E comprovados pelas carreiras profissionais de muitas pessoas.

Já o resto de tudo que eu digo
Não tem outra base confiável
Além de meus próprios erros e acertos.

Aproveite bem o seu inicio de carreira
Ou, então, esquece…
Você nunca vai entender o quão legal é ser júnior
Até que tenha se tornado sênior.

Usando o Terminal do Linux no Windows

Sun, 22 Oct 2017 00:00:01 GMT

No inicio de 2016 o Windows entregou uma nova funcionalidade que era muito aguardada: A possibilidade de rodar o Bash do Linux.

Isso é possível porque o módulo “Subsistema do Windows para o Linux”, fornece um ambiente Linux rodando dentro do próprio Windows 10, sem necessidade de maquinas virtuais, funcionando de forma integrada com o Windows.

Analisando o mercado

Por vezes temos a impressão que pouquíssimas pessoas ainda usam o Windows para desenvolvimento. Mas tenho certeza que essa impressão destoa da realidade. Fiz uma rápida pesquisa no Twitter (sendo que é bastante nichada) e os resultados foram:

15 coisas que faria se estivesse iniciando minha carreira como desenvolvedor (Front-end)

Sun, 01 Oct 2017 00:00:01 GMT

Esse é um texto absolutamente pessoal e recheado de clichês.

Tudo que vou citar diz respeito tão somente a minha realidade. As pessoas possuem oportunidades e ritmos diferentes, portanto não se sinta mal caso algumas dessas coisas não faça parte da sua realidade, não consiga colocar em prática ou mesmo não concorde com algo.

Algumas dessas coisas eu fiz no passado ou faço atualmente, outras não coloquei em prática e penso que poderiam ter trazido resultados importantes na minha carreira.

Versão em vídeo

Como foi trabalhar no meu primeiro produto e a sensação de entregar o MVP

Wed, 20 Sep 2017 00:00:01 GMT

https://dribbble.com/shots/1753131-MVP

A transição

Sempre trabalhei em agências. Isso significa que nos últimos 8 anos da minha vida tive a experiência de trabalhar em vários contextos desse ecossistema.

Meu primeiro emprego foi em uma fábrica de software, na qual trabalhei com ótimos programadores, mas também terceirizavamos código para agências, então meu trabalho na maioria do tempo consistia em traduzir PSDs para códigos.

Depois trabalhei em uma agência de fato, e tive a oportunidade de trabalhar mais próximo dos designers, tomar decisões nesse sentido e aguçar meu lado visual.

A motivação desmotivacional no mundo do Desenvolvimento

Wed, 28 Jun 2017 00:00:01 GMT

Sim, uma nova solução sensacional surge todos os dias no mundo do desenvolvimento, isso é bom pra caralho e ninguém vai me convencer que não, mas causa um efeito colateral muito chato…

Nem todas as pessoas podem aplicar essas coisas no dia-a-dia

Esses dias recebi o seguinte comentário no meu site:

Felipe, uma dúvida cara, eu utilizo muito bootstrap pois eu faço muitos sites empresariais, e institucionais utilizando Wordpress… e construiu um tema que utiliza o Bootstrap 4, e em questão de praticidade, algumas coisas prontas como slider, breadcrumbs, paginação (entre muitas outras) que ele já me oferece deixa meu ‘desenvolvimento’ muito mais rápido… e claro que eu posso estilizar essas coisas com meu próprio CSS. Eu vejo muitas coisas que você escreve pela comunidade e acompanho sobre outr…

O inicio, o fim e o meio do Desenvolvimento Front-End

Tue, 20 Jun 2017 00:00:01 GMT

O inicio

Estou no mercado desde 2009, ou seja, 8 anos. Em uma profissão tradicional, 8 anos não é quase nada. Mas no mundo do desenvolvimento, ainda em amadurecimento e cheio de jovens criando coisas incríveis, sou quase um veterano.

Mas mesmo assim 8 anos continuam sendo pouco, muito pouco. Conheço pessoas que estão a 15 ou 20 anos no mercado, e se eu vi muitas coisas mudarem e se transformarem, fico imaginando elas.

E sabe o que é incrível? Nessa profissão, tempo no mercado não diz nada sobre o nível profissional, tem muitos “iniciantes” fazendo coisas inacreditáveis e muitos “seniores” parados no tempo, relembrando com nostalgia de quando a profissão não era “orientada a modinha”, como alguns gostam de dizer.

Usando white-space: nowrap para fallbacks incríveis

Tue, 21 Feb 2017 00:00:01 GMT

CSS é uma grande gambiarra, e isso faz parte do seu encanto. Particularmente, desde que me conheço como desenvolvedor, adoro “perder” horas buscando soluções em Pure CSS, quase sempre usando técnicas que inicialmente servem para resolver outros problemas.

white-space: nowrap?

E uma dessas técnicas é usando o white-space: nowrap, inicialmente pensado para simplesmente remover as quebras de linha no texto, pode se tornar um importante aliado, servindo principalmente de fallbacks ou diminuindo a quantidade de código que usariamos normalmente.

Retrospectiva 2016

Wed, 14 Dec 2016 00:00:01 GMT

Após um 2014 absurdamente corrido, e um 2015 praticamente sabático, resolvi retomar um ritmo de trabalho mais intenso. Desde o primeiro dia útil de janeiro comecei a estabelecer metas e tomar decisões importantes para o resto do ano.

Junto com o Raphael Fabeni, também tivemos um ano sensacional no MeetupCSS, com 10 edições e fechamento de algumas parcerias, com a Caelum e a Geek Hunter.

Janeiro / Fevereiro / Março

Organização Front-End BR

Fiz matricula em um curso de inglês (Centro Britânico)
Criei a organização Front-End BR no Github junto com uma galera foda
MeetupCSS #12 com apresentação fantástica do Fernando Fleury sobre PostCSS
Iniciei o DailyLog, para ter um log das minhas atividades todos os dias
MeetupCSS #13 com apresentação do Edu Matos e Rafael Ventura
Retomei o meu Coding Style
Escrevi o artigo Why every developer must go to events e traduzi para português
MeetupCSS #14 com talk do Wellington Dutra
Desenvolvemos o Composition na Filtro

O fodástico :not()

Thu, 17 Nov 2016 00:00:01 GMT

As lindas pseudo-class

Fui desenvolvedor em uma época terrível, tempos em que era necessário usar PNGs transparentes para emular box-shadow e border-radius, tempos em que precisávamos usar hacks para IE6 e IE7, tempos em que tudo era lento e de difícil manutenção.

Felizmente o CSS evoluiu, e uma das novidades que mais gostei nos últimos anos foram as pseudo-class.

Provavelmente as pseudo-class mais conhecidas sejam as :nth-child(), :last-child e :first-child.

Só para contextualizar, no passado para fazer uma tabela com cores alternadas era preciso fazer isso aqui.

Porquê usar classes para estilizar elementos no CSS

Wed, 21 Sep 2016 00:00:01 GMT

Introdução

Quem conversa comigo sobre o assunto, sabe que sou totalmente favorável ao uso de classes. Existem algumas razões para isso.

Depois do último artigo, algumas pessoas ficaram com dúvidas ou pediram para explicar essa frase:

[..] Como qualquer propriedade, as roles podem ser alteradas via CSS. Você sempre devia usar classes, mas caso você tenha algum problema quanto a isso [..]

Como é um assunto complexo, nada melhor do que um artigo explicando meu ponto de vista.

Performance

Essa é a ordem dos seletores mais rápidos para o mais lentos:

Sobre WAI-ARIA, acessibilidade e semântica

Wed, 14 Sep 2016 00:00:01 GMT

Vou demonstrar que é simples, não machuca, não vai aumentar o tempo de desenvolvimento e ainda vai melhorar a semântica e consequentemente a acessibilidade do projeto.

O que é WAI-ARIA

WAI-ARIA é dividido em duas categorias: roles e states / properties.

Roles

A maioria das roles foram definidas no ARIA 1.0, e acabaram sendo adicionadas no HTML5 mais tarde.

Elas servem para dar significado (ou mais significado) aos elementos, já que nem sempre a tag HTML fornece por sí só o comportamento esperado.

Sobre inspirar pessoas com suas iniciativas

Mon, 20 Jun 2016 00:00:01 GMT

Eventos, Comunidade & Design

Mantenho meu site desde 2013. Queria estudar geradores estáticos (na época o Docpad) e comecei a desenvolver um site pessoal, pois dessa forma poderia aprender uma nova skill enquanto criava alguma coisa importante para meu desenvolvimento profissional. Pensei em compartilhar as coisas que estava aprendendo e aproveitei para adicionar um blog.

E uma das coisas que me motivam a escrever novos artigos é receber feedbacks, do tipo…

Cara, li o artigo X, e me deu ideias para fazer tal coisa no trabalho.

Do Zero a Herói Front-End (Parte 2)

Tue, 14 Jun 2016 00:00:01 GMT

Este artigo é a segunda parte da série “Do Zero a Herói Front-End”. Na primeira parte, você aprendeu a criar layouts com HTML e CSS, usando algumas das melhores práticas. Na parte dois, vamos nos focar em aprender JavaScript como uma linguagem independente, adicionar interatividade a interfaces, design JavaScript, padrões de arquitetura e como construir aplicações web.

Assim como com HTML e CSS, existem milhares de tutoriais JavaScript por aí. No entanto, especialmente para alguém novo no mundo Front-End, é difícil descobrir quais tutoriais usar e qual a ordem para fazê-las. O principal objetivo desta série é fornecer um roteiro para ajudar a aprender Front-End.

Do Zero a Herói Front-End (Parte I)

Fri, 20 May 2016 00:00:01 GMT

Lembro-me quando eu comecei a aprender desenvolvimento Front-End. Encontrei tantos artigos e fiquei tão sobrecarregado pela quantidade de material que seria necessário aprender que não sabia nem por onde começar.

Esse guia vai ajudá-lo a navegar pela aprendizagem de desenvolvimento Front-End. Ele fornece fontes de aprendizado que eu achei eficaz no passado, junto com explicações suplementares.

Para manter esse guia digestível, eu dividi ele em duas partes. A primeira parte vai falar sobre desenvolvimento de interfaces com HTML e CSS. A segunda parte vai falar sobre JavaScript, estruturas e padrões de projeto. Se você estiver familiarizado com HTML e CSS você pode pular para a segunda parte que cobre todas as coisas de JavaScript.

Dark Theme no DevTools

Tue, 10 May 2016 00:00:01 GMT

Sobre esse tipo de artigo

Todo dia aprendemos alguma coisa. Seja através de um bug, seja lendo artigos, seja conversando com as pessoas.

Ontem por exemplo, postei no Fórum Front-End BR no Github uma dica para resolver o problema do position: fixed, em dispositivos mobile.

Acabei chegando a conclusão, que talvez seja melhor postar esse tipo de informação no meu site. Então, sempre que tiver uma dica simples e rápida, vou mostra-lá aqui.

Dark Theme no DevTools??

Não importa se você usa Sublime, Atom ou o Vim caso seja um gênio igual o Matheus Marsiglio, a chance de você estar usando um tema escuro nesses editores é enorme.

Por que todo desenvolvedor deve ir em eventos

Tue, 05 Apr 2016 00:00:01 GMT

Eu já trabalhava como Desenvolvedor Front-End desde 2009, mas não conhecia muitas pessoas que atuavam na área. Talvez por esse motivo eu não era tão engajado na minha carreira.

Meu primeiro evento foi o Front in Sampa 2012. Eu lembro perfeitamente de algumas palestras, como sobre Design Responsivo do Sergio Lopes, sobre Acessibilidade do Horacio Soares e principalmente a polemica palestra chamada: Não faça freelas! apresentada pelo Zeno Rocha e pelo Bernard de Luna.

Por coincidência, alguns dias antes do evento eu tinha criado um Eric Cartman usando CSS e essa brincadeira foi mostrada nessa palestra, isso me deixou extremamente feliz e me deu disposição para desenvolver novos projetos.

Apresento o Rucksack

Wed, 21 Oct 2015 00:00:01 GMT

Introdução

Tenho certeza absoluta que o PostCSS vai estar cada vez mais presente no nosso dia a dia, já que é absolutamente fantástico e pode ser usado de várias formas, inclusive junto com o pré-processador da sua preferencia, ou seja, a escalabilidade é total.

Muitas ferramentas já estão utilizando o PostCSS, um exemplo é o grid-system Lost, desenvolvido pelo mesmo criador do super conhecido Jeet.

Porém o foco desse artigo é o Rucksack.

O que é?

Quem me mostrou essa ferramenta foi o Milson Junior e desde então fiquei fascinado com algumas coisas que ela oferece.

Uma reflexão sobre salários, valor hora e qualidade de vida

Mon, 28 Sep 2015 00:00:01 GMT

Rolou uns updates em 06/11/2019 😋

Antes de tudo, vale o aviso: Esse é um texto absolutamente pessoal.

As pessoas possuem oportunidades e ritmos diferentes, portanto não se sinta mal caso algumas dessas coisas não faça parte da sua realidade, não consiga colocar em prática, ou mesmo não concorde com algo.

A questão

Vamos imaginar uma pessoa que mora em São Paulo, trabalha 8 horas por dia, de segunda a sexta, no regime CLT, em um trabalho razoavelmente estressante. Nesse trabalho ela não desenvolve novas habilidades com frequência e gasta 1h no trajeto até a empresa.

Otimizando e Organizando as Media Queries

Thu, 23 Jul 2015 00:00:01 GMT

Começando do começo

Acabei de chegar da 9ª edição do Meetup CSS que teve como tema Media Queries, a talk foi muito bem apresentada pelo Matheus Marsiglio e em seguida tivemos um ótimo debate técnico sobre o assunto.

Fiquei feliz em saber que muita gente já está utilizando a abordagem de componentização de Media Queries, assunto que já abordei >nessa postagem e mais recentemente teve um artigo do Raphael Fabeni sobre isso.

Apesar de já ter falado sobre isso, o assunto é tão interessante e importante que vale um novo artigo.

Sobre trabalhar remoto

Wed, 10 Jun 2015 00:00:01 GMT

Na verdade, no início do ano, ainda estava em processo de recuperação mental do super corrido final de 2014 e logo em seguida as energias foram focadas na Conferência CSS Brasil.

Estava pensando em escrever um texto técnico mas como também faz 6 meses que estou trabalhando remoto, e muitas pessoas tem curiosidade nesse sentido, achei que seria legal abordar esse tema.

Como a maioria que acompanha o meu site ou redes sociais devem saber, atualmente estou trabalhando remotamente na Filtro, inclusive falei um pouco disso no post anterior mas vou ser um pouco mais abrangente agora.

Aproximando seus estudos de cenários reais

Sat, 07 Feb 2015 00:00:01 GMT

O problema

Uma das perguntas mais comuns entre desenvolvedores iniciantes ou que estão estudando alguma ferramenta nova, é: “Certo, estudei um monte de coisa legal, tudo parece muito útil e totalmente incrível! Mas… como testar isso na prática?”

E realmente não é pouca coisa. Pode ser desmotivador você ficar um tempão estudando, aprendendo um monte de coisas legais e não conseguir colocar aquilo em prática no seu dia-a-dia.

Ou pior, você pode estar procurando seu primeiro emprego, ou uma nova oportunidade e fica com receio que seus conhecimentos não sejam o suficiente para alcançar o objetivo.

Meu dia a dia como desenvolvedor Front-End

Tue, 20 Jan 2015 00:00:01 GMT

Mas antes…

Muitos já devem ter visto, mas criei um repositório para resolver um dos maiores problemas na hora de escrever um novo artigo: escolher um assunto/tema.

Esse post foi feito em cima de um pedido do Matheus Moraes, e o assunto já teve postagens do Willian Justen e do Fernando Daciuk.

Local de trabalho

Esse ano comecei a trabalhar remoto. Portanto minha casa também virou meu local de trabalho, e esse é um ponto importante. É interessante ter um ambiente legal e confortável, e de preferência com lazer próximo para poder se distrair quando necessário.

Falando em organização CSS...

Thu, 13 Nov 2014 00:00:01 GMT

Dando continuidade a série sobre minha organização e fluxo de trabalho atual, vou contar um pouco sobre como tenho trabalhado o CSS.

“CSS é muito fácil”… Será?

Durante anos escrevemos CSS como se não houvesse amanhã e tínhamos como maiores problemas as diferenças de renderização no IE(ca). E já não era simples.

Mas nos últimos tempos tivemos que começar a fazer projetos que funcionassem em diferentes resoluções, diferentes navegadores, diferentes dispositivos e que tivessem performance, acessibilidade, fossem bonitos e escaláveis.

Falando em organização de código

Wed, 15 Oct 2014 00:00:01 GMT

Já escrevi alguns artigos que mostram um pouco da metodologia que eu estava utilizando, são eles:

O fluxo de trabalho atual funcionou muito bem nos últimos 3 semestres (1 ano e meio), durante esse período fiz diversas modificações pontuais. Mas através da experiência adquirida nesse período, constatei possibilidade de melhorias profundas que poderiam trazer algumas vantagens no dia-a-dia:

Utilizando o Bootstrap de forma consistente

Mon, 01 Sep 2014 00:00:01 GMT

Não é segredo que gosto muito do Bootstrap, faz parte do meu workflow e fiquei muito feliz quando minha primeira contribuição foi aprovada. Dessa forma vou detalhar para vocês como costumo utilizar esse Framework.

O Grunt é seu amigo

Para essa técnica, indico fortemente o uso do Grunt ou qualquer outro automatizador. Facilitar compilar o pré-processador CSS, concatenar o JavaScript e otimizar todo o processo.

Se não conhece essas ferramentas, já escrevi sobre o Grunt, mas sugiro ler o excelente artigo do Vitor Britto.

Estamos realmente interessados em formar bons profissionais?

Mon, 25 Aug 2014 00:00:01 GMT

Já faz tempo que observo de longe a dificuldade de novos profissionais ingressarem no mercado de trabalho. Mas atualmente pessoas mais próximas estão iniciando suas carreiras e estou vendo de perto o quanto a coisa está fora de controle.

Começou a faculdade, e agora está empolgado para arrumar um estágio?

É um passo natural para quem começa a cursar uma faculdade, o estágio deveria ser um momento na qual o futuro profissional pode colocar em prática e testar em cenários reais toda a teoria que aprendeu até então.

E 5 anos atrás eu me tornava o menino do HTML...

Mon, 21 Jul 2014 00:00:01 GMT

Essa história começou um pouco antes…

Na verdade essa história começou um pouquinho antes… já “brincava” com HTML e CSS desde 2002/2003 (tinha entre 12 e 13 anos). O meu tio assinava uma revista daquelas que enviava um CD todo mês, e além daqueles saudosos 5-mil-templates-prontos-para-usar, elas tinham uma parte com tutoriais que “ensinavam a construir seu próprio website”, e lembro de passar tardes e mais tardes tentando desenvolver um site de “Emuladores e Roms” que nunca foi para o ar.

Realmente me divertia “desenvolvendo” e colocando aquele marquee maneiro (alias, sabiam que o marquee ainda existe e pode ser útil em alguns casos?). Mas jamais imaginei que essa seria minha profissão um dia (afinal eu sempre pensava em profissão como algo chato e nada divertido :p… obrigado CSS e JavaScript…).

Sobre Data Atributes e JavaScript

Tue, 08 Jul 2014 00:00:01 GMT

A W3C diz o seguinte:

A custom Data Atributes is an attribute in no namespace whose name starts with the string “data-”, has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

Ou seja, através do atributo data você pode armazenar e recuperar dados. Com isso você guarda pequenas informações de texto e pode manipular através de Javasript.

Como podemos criar qualquer atributo através do prefixo [data-*], esses atributos tem sido utilizados também para iniciar funções.

É possível utilizar componentes desenvolvidos apenas com CSS?

Tue, 22 Apr 2014 00:00:01 GMT

Sobre o projeto

Sou apaixonado por qualquer coisa desenvolvida usando apenas CSS. Isso começou em meados de 2012, quando tive contato com o Homer do Bernard de Luna, no mesmo dia desenvolvi o Cartman e não parei mais, fiz outras brincadeiras com CSS, mas principalmente comecei a buscar no CSS, soluções utilizáveis para os projetos.

Após desenvolver alguns componentes separadamente, imaginei que seria muito mais interessante deixar tudo em um local só.

As possíveis técnicas

Todos os componentes foram desenvolvidos usando duas técnicas: :target e input hidden.

CSS Modular com Mobile First

Mon, 10 Mar 2014 00:00:01 GMT

A importância de um CSS modularizado e o Atomic Design foi muito difundido nos últimos tempos, eu mesmo já escrevi um artigo sobre o assunto. Mas algo ainda me incomodava ao aplicar First Mobile em conjunto com CSS modular… os Media Queries.

O uso tradicional

Imagino que a maneira na qual os Media Queries são mais utilizados é adicionando as condicionais no fim do CSS, algo como:

@media (max-width: 767px) {
  ...
}

Um dos principais motivos para eu utilizar dessa forma, era nosso bom (só que não) e velho amigo IE8. Ainda forneço suporte mínimo para esse navegador e como ele não aceita Media Queries, eu desenvolvia a versão mais “básica” para desktop, e ia “limpando” conforme a resolução.

Não use Placeholder no lugar da Label

Thu, 06 Feb 2014 00:00:01 GMT

Label x Placeholder

O <label> deve ser utilizado como rótulo de um campo de formulário e deve ser sempre utilizado. Já o <placeholder> passa informações complementares sobre o campo antes do usuário digitar e seu uso é opcional.

O problema é que tem sido muito comum encontrar formulários que utilizam apenas o <placeholder>.

Essa prática é muito ruim, pois além de não ser semântico, já que o <placeholder> não funciona como rótulo, ainda trás problemas de acessibilidade. Leitores de tela, por exemplo, podem não ser capazes de passar a informação corretamente.

Usando height com CSS Transitions

Mon, 18 Nov 2013 00:00:01 GMT

Atualização - 20/09/2016

Esse post é bem antigo, escrevi em meados de 2013. Ano passado desenvolvi uma solução mais moderna, utilizando transform scaleY() para simular o efeito.

O resultado pode ser visto no Codepen.

https://codepen.io/felipefialho/pen/LkOXBA

O problema

Você precisa expandir a altura de algum elemento que está escondido e ao invés de um simples “display: none/block”, resolve usar CSS Transitions para o movimento ficar mais interessante e emular um “slide-down”.

Então você faz algo desse tipo:

.accordion-content{
  transition: height 1s;
  overflow: hidden;
  height: 0;
}

.accordion-content.active{
  height: auto;
}

Estranhamente isso não funciona e você se pergunta o motivo.

Tutorial - Tabela Responsiva

Mon, 14 Oct 2013 00:00:01 GMT

Por algum tempo usei (e até contribui) com um ótimo plugin chamado Footable, ele adiciona funcionalidades bem legais nas tabelas e ajuda a resolver um pouco desse problema.

Mas nunca considerei uma solução definitiva, não gostava de depender de JavaScript para resolver essa questão e comecei a vasculhar outras soluções.

Primeira técnica

Sobre

Cheguei nessa solução através desse artigo, que mostra algumas demos de tabelas funcionais e responsiva. Após aplicar e comprovar a eficácia dessa técnica, descobri que a Globo.com também está usando.

Tutorial - Botão de Progresso

Sat, 12 Oct 2013 00:00:01 GMT

Continuo trabalhando em diversos projetos paralelos, em razão disso estou um pouco desaparecido das comunidades que participo.

Mas durante esses projetos, estou pensando e aplicando algumas soluções interessantes, uma delas foi a caixa de compartilhar, agora vou mostrar um “botão de progresso”.

Sobre

É sempre importante fornecer algum feedback para o usuário. É muito desconfortável quando você clica em um botão e ele não apresenta nenhuma ação informando que alguma coisa está sendo feita.

Nível do tutorial: Básico

Um conto sobre componentização e quebra de paradigmas

Mon, 29 Jul 2013 00:00:01 GMT

Não, você não é apenas um “mero desenvolvedor”, você está no centro de mudanças importantes no nosso mercado e pode influenciar positivamente esse cenário.

O processo padrão

Na maioria das vezes, essas são as etapas resumidas de um projeto…

São criados Wireframes (geralmente pelo Diretor de Arte ou por alguém focado nessa parte)
Em seguida o Diretor de Arte cria PSD’s para TODAS as páginas, não é incomum uns 40 PSD’s serem criados.
O desenvolvedor Front-End cria HTML’s e os estilos para todas as páginas e interações.
Então o desenvolvedor Back-End coloca “vida” no projeto.

Sobre organização de componentes com pré-processadores

Tue, 18 Jun 2013 00:00:01 GMT

Breve introdução

Na eterna dúvida entre usar SASS ou LESS, acabei optando por LESS. Não tenho uma explicação certa, mas acredito que foi pelo fato do Bootstrap (na qual baseei meu Framework) usar LESS (apesar de ter uma adaptação em SASS). O fato dele ser baseado em JavaScript também me agradou.

O SASS é mais robusto e tem plugins interessantíssimos como o Compass. O gerador de sprites dele é uma mão na roda e sinto falta disso no LESS.

De qualquer forma vou mostrar minha organização baseada nos testes que fiz durante o desenvolvimento do Framework usando LESS, o que não significa que não possa ser adaptado para qualquer outro pré-processador.

Grunt - Você deveria estar usando

Tue, 04 Jun 2013 00:00:01 GMT

O projeto

Como sempre, deixei a base que estou utilizando no Github, forka lá se quiser usar.

As tarefas

Clean

clean: {
  dist: {
    src: ["dist/"]
  }
},

Limpo a pasta de distribuição.

Copy

copy: {
  dist: {
    files: [
      {
        expand: true,
        cwd: 'dev/',
        src: [
          '**',
          '*.{md,txt,htaccess}',
          '!assets/css/less/**',
          '!assets/js/site/**'
        ],
        dest: 'dist/',
        dot: true
      }
    ]
  }
},

Copio os arquivos necessários para rodar o projeto para a pasta de distribuição, observem que excluo ! alguns arquivos (less, plugins, etc…) pois são desnecessários na versão final, já que ficarão concatenados e minificados depois.

Uglify

uglify: {
  options: {
    mangle : false
  },
  dist: {
    files : {
      'dist/assets/js/scripts.min.js' : [

      ]
    }
  },
  dev: {
    options: {
      beautify : true
    },
    files : {
      'dev/assets/js/scripts.min.js' : [

      ]
    }
  }
},

Aqui concateno/minifico os scripts. Reparem que crio duas versões, dist e dev, isso porque na versão de desenvolvimento deixo o debug ativado através da opção beautify. Adiciono todos os plugins que vou usar no projeto.

Primeiros passos com o Docpad

Tue, 21 May 2013 00:00:01 GMT

NodeJS e o NPM

O primeiro passo, como havia falado, é entender o mínimo do funcionamento do NodeJS e seu gerenciador de pacotes, o NPM.

Se você usa Windows, basta baixar a última versão e instalar.

Nesse momento não é necessária nenhuma configuração especial, apenas deixe todas as opções ativadas e será instalado o NodeJS, alguns módulos nativos e o NPM.

Para instalar em outros sistemas operacionais, pode ler esse passo a passo.

Instalando o Docpad

Abra seu terminal
Procure atualizações no NPM com o comando

O que são Geradores estáticos?

Mon, 06 May 2013 00:00:01 GMT

Falando de forma resumida, geradores estáticos usam de várias funcionalidades que estamos acostumados a utilizar nas linguagens de programação, como includes, loopings, templates, entre outras coisas legais. Mas… gera um HTML estático, sem banco de dados, sem dependências server-side, tudo é gerado em um HTML puro e simples.

Ou seja, você não precisa preparar nenhum ambiente, basta jogar o projeto no servidor e ele já está funcionando. Rápido e ágil, pois tudo é estático, mas com a manutenção muito mais simples, afinal você não vai precisar replicar 40 vezes o mesmo template e alterar o conteúdo das páginas.