Como fazer code review de CSS
Guia prático para code review de CSS profissional. 6 critérios essenciais: estilo, cross-browser, especificidade, pré-processadores e performance. Revise!
Ler artigoPlanejamento
99 posts
10 dicas para manter a Especificidade CSS baixa
10 dicas práticas para manter especificidade CSS baixa. Evite guerra de seletores e facilite manutenção com boas práticas de arquitetura CSS. Aprenda!
Ler artigoTira-dúvidas sobre BEM
Esclareça suas dúvidas sobre a metodologia CSS BEM. Live completa com explicações práticas, benefícios e aplicação da convenção mais popular do mundo.
Ler artigoCUBE CSS: uma nova metodologia CSS
Conheça CUBE CSS, metodologia que trabalha com o navegador, não contra ele. Simplicidade, pragmatismo e escalabilidade para projetos de qualquer tamanho.
Ler artigoBEM: guia definitivo do padrão CSS mais famoso
Guia completo da metodologia BEM (Block Element Modifier). Aprenda a convenção CSS do Yandex com exemplos práticos, vantagens e melhores práticas.
Ler artigo6 vantagens em usar BEM ao escrever CSS
Organize e escale seu CSS com metodologia BEM profissionalmente. Descubra 6 vantagens: nomes de classes compreensíveis, consistentes e fáceis de manter!
Ler artigoSource Maps em produção?
Source maps em produção: devo usar ou não? Analise vantagens de debug facilitado vs riscos reais de exposição de código-fonte. Tome decisão informada agora!
Ler artigoComo detectar touch com CSS puro
Aprenda a detectar dispositivos touch com CSS puro usando Interaction Media Features. Hover e pointer para suporte a diferentes tipos de entrada. Detecte!
Ler artigoTipografia: um processo para escolher fontes
Domine o processo para escolher fontes em projetos web. Critérios práticos, combinações harmônicas e decisões tipográficas para design eficaz!
Ler artigoPlanejamento com imagens responsivas
Planejamento de imagens responsivas: estratégias completas e boas práticas. Otimize performance, UX e carregamento ideal para diferentes dispositivos. Planeje!
Ler artigoAnimações web: garantindo a consistência entre design e código
Supere a lacuna entre design e desenvolvimento de animações. Aprenda técnicas para garantir que protótipos sejam fielmente implementados em código.
Ler artigoLocal Maximum
Local Maximum: entenda o perigo da otimização incremental. Evite ficar preso em soluções subótimas buscando sempre inovação disruptiva. Inove!
Ler artigo10 dicas para menus responsivos
Descubra 10 dicas para criar menus de navegação responsivos eficientes. Aprenda a priorizar conteúdo e otimizar experiência mobile dos usuários. Navegue!
Ler artigoIntrodução à gamificação (parte 3): exemplos do mundo real
Exemplos práticos e inspiradores de gamificação na web. Cases de sucesso reais, implementações e como aplicar mecânicas de jogos. Inspire-se agora!
Ler artigoIntrodução à gamificação (parte 2): vantagens da gamificação
Descubra vantagens da gamificação em aplicações web. Benefícios comprovados, ROI e como mecânicas de jogos melhoram engajamento e conversão. Gamifique!
Ler artigoIntrodução à gamificação (parte 1): princípios da gamificação
Introdução aos princípios essenciais de gamificação. Entenda motivação, recompensas, progressão e elementos que engajam usuários. Gamifique!
Ler artigoRetrospectiva 2018
Relembre 2018 no dpw: breakpoints CSS, CSS Blocks da LinkedIn, otimização de estilos e novo tema do blog. Veja os artigos que marcaram o ano!
Ler artigoComo encontrar CSS morto e otimizar estilos
Técnica simples para identificar e remover CSS morto em produção. Descubra como otimizar estilos e melhorar performance eliminando código legado. Limpe!
Ler artigoA maneira 100% correta de fazer breakpoints em CSS
Descubra a abordagem correta para breakpoints CSS responsivos. Aprenda a definir pontos de quebra baseados em conteúdo, não em dispositivos.
Ler artigoResponsive Components: uma solução para container queries
Responsive Components com Container Queries revolucionárias. Componentes que respondem ao próprio tamanho, não à viewport. Revolução no CSS moderno!
Ler artigoOs melhores bancos de imagem grátis (stock images)
Descubra os melhores bancos de imagem grátis (stock images) de alta qualidade. Recursos com fotos livres de direitos autorais para projetos web. Baixe!
Ler artigoRetrospectiva 2017
Relembre 2017 no dpw: JavaScript this, Motion UI, microinterações e o polêmico DOM. Veja os artigos que marcaram o ano e impactaram a web brasileira!
Ler artigoMitos de interface mobile - Mito 3: simplicidade é bom, complexidade é ruim
Mito mobile desmistificado: simplicidade vs complexidade em UI. Nem sempre simples é melhor - contexto e propósito definem boa UX mobile. Repense!
Ler artigoMitos de interface mobile - Mito 2: sites móveis requerem menos features
Mito desmistificado: sites mobile precisam ter menos features. Descubra por que funcionalidades completas também são importantes em mobile. Repense UX!
Ler artigoMitos de interface mobile - Mito 1: usuários móveis estão sempre com pressa
Mito desmistificado: usuários mobile estão sempre com pressa. Compreenda diferentes contextos de uso e necessidades variadas em dispositivos móveis. Repense!
Ler artigoCurso "CSS: um passo adiante"
Curso completo de CSS avançado: OOCSS, SMACSS, BEM, Sass e arquitetura CSS profissional. Eleve seu código ao próximo nível com técnicas de experts.
Ler artigoVocê não precisa de um framework CSS Grid
CSS Grid vs Frameworks: análise completa e imparcial. Descubra quando usar Grid nativo e quando frameworks CSS ainda fazem sentido em projetos. Decida!
Ler artigoO novo esqueumorfismo está no assistente de voz
Esqueumorfismo não morreu, migrou para assistentes de voz e AI. Análise sobre como metáforas do mundo real evoluíram para interfaces conversacionais!
Ler artigoAcabem com Google AMP antes que ele acabe com a web
Análise crítica sobre Google AMP e seu impacto na web. Entenda os riscos do aprisionamento tecnológico e a centralização de conteúdo pelo Google.
Ler artigoDesenvolvimento Orientado a Modinha (DOM)
Cuidado com Desenvolvimento Orientado a Modinha (DOM)! Entenda perigos de escolher tecnologias baseado em hype ao invés de análise técnica. Reflita!
Ler artigoSer um generalista não é uma coisa ruim
Ser generalista em desenvolvimento web: vantagens e desvantagens. Análise profunda sobre carreira full-stack vs especialização. Escolha seu caminho!
Ler artigoDesenvolvedores devem participar do processo de Design
Por que desenvolvedores devem participar do processo de design? Descubra como colaboração entre devs e designers evita problemas e melhora resultados. Colabore!
Ler artigoRedução Progressiva e Decaimento de Experiência
Entenda redução progressiva e decaimento de experiência. Aplique graceful degradation para garantir funcionalidade em todos os navegadores. Essencial!
Ler artigoMelhores práticas para uma API RESTful pragmática (parte 2)
Continue aprendendo práticas essenciais de API RESTful. Descubra paginação, autenticação, rate limiting, caching e tratamento de erros profissional.
Ler artigoÍcones precisam de labels?
Por que ícones precisam de labels em interfaces. Melhore drasticamente acessibilidade e usabilidade com texto descritivo em UI. Implemente agora!
Ler artigoA Zona do Polegar: projetando interfaces para polegares
Zona do polegar: design ergonômico para interfaces mobile. Aprenda sobre alcance, usabilidade e áreas de conforto em telas touchscreen. Otimize UX!
Ler artigoRetrospectiva 2016
Descubra os melhores artigos de 2016: Motion UI, JavaScript funcional, APIs RESTful e validação de formulários. Confira os destaques do ano!
Ler artigoDesmistificando o CSS crítico "acima da borda"
Análise crítica sobre CSS inline crítico acima da borda: vantagens, desvantagens e quando realmente usar. Otimização de páginas vs sites. Desmistifique!
Ler artigoChecklist de UX para desenvolvedores
Desenvolvedores podem criar ótimas experiências. Checklist prático de UX para integrar usabilidade no desenvolvimento sem depender de especialistas.
Ler artigoUnidades de viewport: controle de tipografia em web design responsivo
Domine unidades viewport para controle tipográfico responsivo. Use vw, vh, vmin/vmax para textos que escalam perfeitamente com a tela. Aprenda!
Ler artigoUX em validação de formulários com HTML e CSS
UX em validação de formulários com HTML e CSS puro. Feedback visual imediato, mensagens claras e validação nativa para experiência superior. Implemente!
Ler artigoMelhores práticas para uma API RESTful pragmática (parte 1)
Projete APIs RESTful eficientes e amigáveis. Aprenda versionamento, SSL, documentação, filtragem e padrões que realmente funcionam na prática.
Ler artigoConteúdo Modular e Adaptável
Entenda os 5 elementos do conteúdo adaptável: reusável, estruturado, independente, com metadados significativos e interfaces usáveis de CMS.
Ler artigoImagens responsivas com srcset e sizes
Srcset e sizes: imagens responsivas baseadas em viewport HTML. Controle inteligente de resolução e densidade de pixels para performance otimizada!
Ler artigoDevice-Agnostic ou Web Design Responsivo Independente de Dispositivo
Entenda Device-Agnostic design: abordagem que considera navegadores, conexões e inputs diversos. Desenvolva sites preparados para qualquer cenário.
Ler artigoMelhore o tempo de carregamento com subconjuntos de fontes
Melhore carregamento com subconjuntos de fontes (font subsetting). Reduza drasticamente tamanho de webfonts incluindo apenas caracteres necessários.
Ler artigoJavaScript Module Pattern (Padrão de Módulo)
Module Pattern JavaScript: organização e encapsulamento profissional. Padrão clássico de design para escrever código modular e reutilizável. Domine!
Ler artigoPrevenindo "layout thrashing" com FastDom
Aprenda a prevenir layout thrashing com FastDOM. Otimize manipulações DOM evitando reflows forçados e melhorando drasticamente a performance!
Ler artigoO que todo desenvolvedor front-end deve saber sobre renderização de páginas web
Entenda como navegadores renderizam páginas web. Guia essencial sobre DOM, CSSOM e otimização de performance que todo dev front-end precisa saber.
Ler artigoPré-processadores CSS e Chrome DevTools
Aprenda a usar pré-processadores CSS no Chrome DevTools. Debug e edição de Sass/LESS diretamente no navegador com source maps. Acelere o workflow!
Ler artigoNamespacing em JavaScript
Namespacing em JavaScript: organize código e evite conflitos globais. Padrões de encapsulamento essenciais para projetos escaláveis e manuteníveis. Organize!
Ler artigoGenymotion: emulador de Android
Genymotion: o melhor emulador Android para desenvolvimento profissional. Extremamente rápido, confiável e essencial para testes mobile. Experimente!
Ler artigoJavaScript IIFE como contêiner de códigos
IIFE JavaScript: container de código isolado essencial. Entenda Immediately Invoked Function Expression para escopo protegido e encapsulamento. Domine!
Ler artigodpw2014 - parte 2: desempenho / performance
Guia completo sobre performance web no dpw2014 - Parte 2. Aprenda técnicas de otimização avançadas, front-end performance e melhores práticas. Otimize!
Ler artigoGulp Fiction
Gulp Fiction: automação front-end de forma criativa e eficiente. Técnicas avançadas, plugins essenciais e workflows para projetos modernos. Automatize!
Ler artigoGulp
Gulp: automatize tarefas de desenvolvimento front-end. Configure build, minificação, otimização de assets e workflow eficiente com JavaScript. Automatize!
Ler artigoTipografia responsiva: melhores artigos e tutoriais
Tipografia responsiva: melhores artigos e tutoriais selecionados. Curadoria completa de recursos essenciais sobre tipografia fluida e adaptativa. Aprenda!
Ler artigoUIkit: framework front-end modular responsivo
UIkit: framework front-end modular e responsivo profissional. Alternativa leve ao Bootstrap com componentes elegantes para desenvolvimento ágil. Use!
Ler artigoImagens em web design responsivo: atributo srcset e elemento picture
Imagens responsivas com srcset e picture HTML. Sirva imagens perfeitamente otimizadas por dispositivo usando HTML nativo e art direction. Otimize!
Ler artigoMedia queries e download de imagens
Media queries e download de imagens: otimização mobile essencial. Evite downloads desnecessários com estratégias de imagens responsivas inteligentes. Economize!
Ler artigo5 armadilhas de web design responsivo a evitar
Evite erros comuns em design responsivo. Aprenda sobre performance, conteúdo, contexto e experiência mobile para criar sites verdadeiramente adaptáveis.
Ler artigoComo loading de JavaScript funciona: DOMContentLoaded e OnLoad
Entenda como loading de JavaScript funciona: DOMContentLoaded vs OnLoad. As 3 janelas de tempo para carregar e executar scripts. Performance web otimizada!
Ler artigoBower: gerenciador de pacotes front-end
Automatize o gerenciamento de dependências front-end com Bower. Instale, atualize e organize bibliotecas JavaScript de forma simples e eficiente.
Ler artigoRelação cliente e profissional web no mundo real
Relação cliente e profissional web no mundo real sem filtros. Como lidar com expectativas, comunicação eficaz e desafios do dia-a-dia. Aprenda na prática!
Ler artigoGrunt: build tool para projetos front-end
Grunt: build tool essencial para automação front-end. Configure tarefas, minifique assets e otimize seu workflow de desenvolvimento. Automatize!
Ler artigoHTTP 503: a maneira correta para SEO
HTTP 503: código de status correto para manutenção e preservar SEO. Evite penalizações mantendo rastreadores informados durante downtime. Proteja rankings!
Ler artigoO primeiro livro do mundo sobre Jetstrap
Aprenda Jetstrap com o primeiro livro mundial sobre a ferramenta. Crie protótipos rápidos com Bootstrap visual e exporte código HTML pronto. Acelere workflow!
Ler artigoAs novas regras da web responsiva
Descubra as novas regras da web responsiva moderna. Container queries, aspect-ratio e técnicas atuais de responsive design em CSS. Atualize-se!
Ler artigoPerformance como design
Performance como design: otimização é UX essencial. Velocidade não é apenas técnica, é experiência do usuário e requisito fundamental de design!
Ler artigoChecklist para profissionais de UX manterem a sanidade em projetos complexos
Organize projetos complexos de UX com checklists eficazes e práticos. Gerencie deliverables, requisitos e histórias de usuário sem perder a sanidade. Sobreviva!
Ler artigoComeçando com Git
Introdução completa ao Git para iniciantes. Aprenda controle de versão, comandos essenciais e por que Git revolucionou o desenvolvimento colaborativo.
Ler artigoO Mercado de Trabalho para os desenvolvedores web
Mercado de trabalho para desenvolvedores web no Brasil. Análise completa de oportunidades, salários atuais, tendências e perspectivas de carreira!
Ler artigoWebshims Lib: Polyfills de recursos de HTML5 e CSS3
Conheça Webshims Lib: polyfills completos para HTML5 e CSS3. Biblioteca de fallbacks para recursos modernos em navegadores antigos. Use jQuery!
Ler artigoO que SEO pode aprender com UX?
Descubra o que SEO pode aprender com UX Design profissional. Integre otimização para buscadores e experiência do usuário para melhor ROI. Aplique hoje!
Ler artigoComo criadores de conteúdo se beneficiam com o "novo SEO" (parte 2)
Implementação prática do novo SEO - Parte 2: como usar rel=author, criar conteúdo compartilhável e aproveitar blog marketing. Tutorial passo a passo!
Ler artigoComo criadores de conteúdo se beneficiam com o "novo SEO" (parte 1)
Entenda o novo SEO social - Parte 1: buscas personalizadas, ações sociais e segmentação. Google+ e rel=author explicados com exemplos práticos. Aprenda!
Ler artigoEvitando erros comuns de HTML5
Evite erros comuns em HTML5 que prejudicam seus projetos. Aprenda marcação semântica correta, acessibilidade e boas práticas de desenvolvimento. Melhore!
Ler artigoMicrodata API e Schema.org: dando significado ao HTML
Microdata e Schema.org: adicione significado semântico ao HTML. Melhore drasticamente SEO e rich snippets com marcação estruturada. Implemente já!
Ler artigoDesenvolvedores front end e o mercado
Análise profunda sobre desenvolvedores front-end e mercado de trabalho atual. Reflexões sobre carreira, valorização profissional e evolução da área. Reflita!
Ler artigoUsando Modernizr para detectar features de HTML5 e CSS3
Modernizr: detecte features HTML5 e CSS3 no navegador facilmente. Biblioteca essencial para feature detection e progressive enhancement moderno. Use!
Ler artigoNão use IDs como seletores CSS
Descubra por que não usar IDs como seletores CSS em projetos. Análise de especificidade, performance real, reutilização e melhores práticas de arquitetura!
Ler artigoElementos de design aplicados à Web
Princípios fundamentais de design aplicados à web moderna. Entenda equilíbrio visual, contraste, hierarquia e elementos essenciais para interfaces eficazes!
Ler artigoCores na web: guia completo
Guia completo sobre cores na web: teoria, ferramentas de paleta e significado psicológico. Referências essenciais para escolher cores certas. Domine cores!
Ler artigoErros comuns em desenvolvimento web para campanhas de SEO
Evite erros de desenvolvimento que prejudicam SEO. Guia sobre URLs amigáveis, JavaScript, Flash e práticas técnicas para campanhas de otimização.
Ler artigoEstratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
Estratégia Web de Pirâmide para sucesso equilibrado e sustentável. Base sólida com conteúdo, usabilidade, SEO e mídia social integrados. Aplique agora!
Ler artigoFerramentas para criação de wireframes
Melhores ferramentas para criação de wireframes profissionais. Compare opções gratuitas e pagas para prototipagem e design de interfaces. Escolha a ideal!
Ler artigo4 elementos de design para um bom call to action
Crie botões de chamada à ação que convertem. Domine tamanho, forma, cor e posicionamento para aumentar suas taxas de conversão drasticamente.
Ler artigoComo otimizar imagens para Web: guia de otimização de imagens
Guia completo de otimização de imagens: formatos JPG, PNG, WebP e GIF. Aprenda compressão, lazy loading e técnicas para melhorar performance.
Ler artigo8 características de User Interfaces (UI) de sucesso
Crie interfaces intuitivas e eficazes. Conheça as 8 características essenciais que toda UI de sucesso deve ter: clareza, concisão e muito mais.
Ler artigoMeta tags
Guia completo de meta tags para SEO e redes sociais. Open Graph, Twitter Cards, viewport e tags HTML essenciais para otimização. Implemente!
Ler artigoCSS float: considerações, dicas e macetes para bons layouts na web
Guia completo sobre CSS float para layouts: o que é, para que serve, problemas comuns e técnicas de clearfix. Domine layouts tableless clássicos na web!
Ler artigoManeiras práticas para melhorar a visitação de seu blog e fidelizar seus leitores
Maneiras práticas para melhorar visitação e fidelizar leitores do blog. Estratégias comprovadas de conteúdo, SEO e engajamento para sucesso. Aplique!
Ler artigoGestalt aplicado ao design web (parte 6): princípio da experiência passada
Gestalt Parte 6: Princípio da Experiência Passada aplicado ao web design. Como conhecimento prévio influencia percepção e interpretação visual. Aprenda!
Ler artigoGestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
Gestalt Parte 5: Exemplos práticos do Princípio do Alinhamento na web. Aplicações reais de continuidade visual em design de interfaces digitais. Veja!
Ler artigoGestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento
Gestalt Parte 4: Princípio da Boa Continuidade aplicado ao web design. Entenda como olhos seguem linhas e padrões em composições visuais. Domine!
Ler artigoAs melhores práticas de SEO para seu site ou blog melhorar o posicionamento nos mecanismos de busca
Guia completo de otimização para mecanismos de busca. Aprenda técnicas comprovadas de SEO: palavras-chave, URLs, meta tags e estrutura de conteúdo.
Ler artigoGestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade
Gestalt Parte 3: Exemplos práticos do Princípio da Proximidade na web. Cases reais mostrando agrupamento visual e organização eficiente de conteúdo. Veja!
Ler artigoGestalt aplicado ao design web (parte 2): princípio da proximidade
Gestalt Parte 2: Princípio da Proximidade aplicado ao web design. Como elementos próximos são percebidos como grupo e aplicações práticas. Aprenda!
Ler artigoGestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade
Gestalt aplicado ao design web - Parte 1: fundamentos. Origem histórica, significado e utilidade dos princípios de percepção visual. Comece a série!
Ler artigo