Svelte comparado com React e Vue
Svelte é o novo prodígio entre frameworks front-end! Leia mais e saiba o que é o Svelte, sua sintaxe, como começar a usar e muito mais.
Tailwind CSS: adiciona complexidade; não faz nada
Tailwind CSS está em alta. De maneira injustificada. Veja neste artigo uma análise séria de Tailwind e como ele tenta resolver um problema que não existe.
EditorConfig: padronização automática de estilo de código
Com EditorConfig é possível padronizar estilos de código para alcançar consistência e qualidade. Saiba tudo sobre o EditorConfig!
6 vantagens em usar BEM ao escrever CSS
BEM é uma convenção de nomenclatura de CSS bastante usada no front end. Conheça 6 vantagens de usar BEM ao escrever CSS.
dpw expo #40 – ApexCharts.js, Sal.js, Moveable, Cropper.js, FilePound
dpw expo 40 é especial, comemorando o fim da 1ª temporada, e apresenta 5 recursos para você explorar um mundo de interatividade e possibilidades!
dpw expo #39 – International Telephone Input, Focus Overlay, JustGage
International Telephone Input, para campos de tel internacionais; Focus Overlay, para ênfase ao foco em elementos; JustGage, que gera gráficos gauge.
dpw expo #38 – Jurassic Ninja, typical, gameController.js
Jurassic Ninja, para ter site WordPress com apenas 1 clique; typical, para efeito de digitar e; gameController.js, para usar gamepad e controles no browser.
dpw expo #37 – roughViz.js, free-for.dev, Swiper
roughViz.js, lib JS para gráficos “à mão”; free-for.dev, lista de recursos free tier e; Swiper, moderno touch slider para mobile.
dpw expo #36 – React Bolt, Butter Cake, Browserhacks
React Bolt, boilerplate para projetos React; Butter Cake, framework CSS moderno com Flexbox; Browserhacks, com listas de hacks CSS para diferentes browsers.
Como diminuímos nossa bounce rate em 67,55%
Acompanhe nossa jornada no inóspito mundo do SEO e saiba como conseguimos diminuir nossa bounce rate em 67,55%!
dpw expo #35 – react-spinners-css, SimpleBar, CopyPalette
react-spinners-css, spinner para React; SimpleBar, barras de rolagem personalizadas e; CopyPallete, para criar paletas de cores SVG para Sketch e Figma.
dpw expo #34 – Can I email, clipboard.js, Flawwwless ui
Can I email, para checar features em e-mails; clipboard.js, para copiar texto para a área de transferência e; Flawwwless ui, lib de componentes React.
dpw expo #33 – filesize.js, Radial Menu, UI Interactions
filesize.js, para humanos lerem tamanhos de arquivos; Radial Menu, um menu radial fácil de usar e; UI Interactions, interações de user interface diversas.
dpw expo #32 – Image Map Generator, Divjoy, SVG Artista
Image Map Generator, para mapas de imagem; Divjoy, codebase React (com builder) e; SVG Artista, para animações de fill e stroke com SVGs.
dpw expo #31 – Page Transitions, Hopscotch, Agile CSS Framework
Page Transitions, uma coleção de transições de página; Hopscotch, para fazer tour pelo site e; Agile CSS, framework CSS levíssimo otimizado para SEO.
dpw expo #30 – collectorium, perfundo, npkill
collectorium, para fazer abas com CSS puro; perfundo, para criar lightboxes com CSS puro e; npkill, para deletar diretórios node_modules inúteis.
dpw expo #29 – TypeLighter.js, Codeimg.io, Vuestic Admin
TypeLighter.js, para efeito typewrite; Codeimg.io, para compartilhar snippets de códigos e; Vuestic Admin, solução Vue.js para painéis admin.
dpw expo #28 – simplePARALLAX, Gitfolio, CSS Border Animations
simplePARALLAX, para efeitos parallax variados; Gitfolio, para gerar um portfolio a partir de seu GitHub e; CSS Border Animations, exemplos de animação CSS.
Botões-fantasma (Ghost Buttons)
Artigo completo sobre botões-fantasma (ou Ghost Buttons), mostrando o que são, como surgiram, exemplos reais e dicas de onde e quando usá-los.
dpw expo #27 – Gradient Magic, Text stripes, git-pending
Gradient Magic, galeria de gradientes CSS únicos; Text stripes, ferramenta para criar stripes e; git-pending, plugin para git para relembrar seus TODO.
dpw expo #26 – Tabulator, react-image-magnifiers, SuperTinyIcons
Tabulator, para tabelas interativas; react-image-magnifiers, componentes React para image magnifying e; SuperTinyIcons, versões SVG minúsculas de ícones.
dpw expo #25 – List.js, 26 recursos VS Code 2019, Color Thief
List.js, adiciona busca, filtro e ordenação em listas e tabelas; 26 recursos JS para VSCode em 2019; Color Thief, gera paleta de cores a partir de imagem.
dpw expo #24 – Animista, Static Site Boilerplate, Humanize Duration
Animista, para animações CSS; Static Site Boilerplate, workflow completo para sites estáticos e; Humanize Duration, JS que converte para milissegundos.
Explorações de design visual
As explorações de design visual acontecem de diversas maneiras (Mood boards, Style tiles, Element collages). Conheça mais sobre cada uma dessas técnicas.
dpw expo #23 – Frappe Charts, Darkmode.js, Eva Design System
Frappe Charts, para gráficos modernos SVG; Darkmode.js, para adicionar dark mode no seu site/app; Eva Design System, gerador de cores que usa deep learning.
dpw expo #22 – Shape.so, MoveTo.js, uiGradients
Shape.so, ferramenta que disponbiliza ícones personalizáveis; MoveTo.js, lib para scroll animado JavaScript e; uiGradients, galeria de degradês com opções.
dpw expo #21 – freezeframe.js, Spotlight.js, Microjs
freezeframe.js, que controla gifs animados; Spotlight.js, um novo modal/galeria que está chegando nas webs e; Microjs, buscador de recursos JavaScript.
dpw expo #20 – Transfonter, Specificity Calculator, ms
Transfonter, conversor de fonte para @font-face; Specificity Calculator, para cálculo de especificidade CSS e; ms, que converte tempo para milissegundos.
dpw expo #19 – Scene.js, Pressure.js, pixelmatch
Scene.js, lib de animações JS; Pressure.js, para controlar interações com clicks e touchs e; pixelmatch, para comparação da similaridade entre imagens.
dpw expo #18 – Zdog, Pickr, CSS Grid Generator
Zdog, para pseudo-3D em canvas e SVG; Pickr, seletor de cores minimalista-poderoso e; CSS Grid Generator, interface web para se trabalhar com CSS Grid.
dpw expo #17 – micron.js, Tailwind CSS, Tornis
micron.js, lib de microinterações CSS com JavaScript; Tailwind, framework CSS para prototipagem rápida e; Tornis, listener de infos de mouse e viewport.
dpw expo #16 – CSSFX, iziModal, Tippy.js
CSSFX, site com diversos efeitos CSS para copiar e colar; iziModal, plugin jQuery para modais elegantes e; Tippy.js, para fazer tooltips animados variados.
dpw expo #15 – iziToast, animate.css, CSS3 Transform
iziToast, lib JavaScript para notificações; animate.css, uma das mais tradicionais para animações CSS e; CSS3 Transform, para transformações em CSS.
dpw expo #14 – Ikonate, SortableJS, TypeIt
Veja Ikonate, para montar kits de ícones vetoriais; SortableJS, para listas reordenáveis via drag&drop e; TypeIt, utilitário JS para animação de digitação.
dpw expo #13 – Buefy, BootboxJS, Uppy
Conheça Bufy, lib UI feita com Vue.js + Bulma; BootboxJS, para modais usando Bootstrap e; Uppy, biblioteca JavaScript para uploads de arquivos.
dpw expo #12 – Medium Zoom, ICONSVG, Choices.js
Medium Zoom, para zoom em imagens; ICONSVG, ferramenta para seleção e personalização de ícones SVG e; Choices.js, biblioteca JS para tags e selects.
dpw expo #11 – Perflink, CrumbJS, iro.js
Conheça Perflink, para benchmark de JavaScript; CrumbJS, para trabalhar com cookies e LocalStorage e; iro.js, color pick responsivo moderno.
dpw expo #10 – DevDocs, Editor.js, RFS
DevDocs, documentação de APIs e tecnologias; Editor.js, WYSIWYG diferenciado e; RFS, possível solução final para tamanhos de fontes em design responsivo.
dpw expo #9 – Micromodal.js, mockAPI, Color.review
Conheça Micromodal.js, lib JavaScript leve e rápida para modais; mockAPI, para criar endpoints mockados e; Color.review, que checa o constraste entre cores.
dpw expo #8 – removebg, Cleave.js, NSFW JS
Conheça o removebg, que remove backgrounds de imagens; Cleave.js, para formatar campos e; NSFW JS, identificador de conteúdo +18 diretamente no front end.
dpw expo #7 – Lozad, PulltoRefresh.js, StackBlitz
Conheça Lozad, para fazer lazy loading de recursos web; PulltoRefresh.js, para o efeito “pull to refresh” e; StackBlitz, o VS Code online.
dpw expo #6 – Rellax, spacetime, AmplitudeJS
Conheça o Rellax, biblioteca para efeito parallax; spacetime, para lidar com datas, tempo e fuso horários e; AmplitudeJS, audio player HTML5 moderno.
dpw expo #1: k6, CSS Reference, Coolors.co
Conheça uma ferramenta para medir performance de projetos web, uma referência CSS e também uma ferramenta para criação e descoberta de paletas de cores.
Retrospectiva 2018
Retrospectiva com os melhores artigos de 2018 do seu, do meu, do nosso desenvolvimento para web! ;-)
dpw2019: a nova versão do blog
Conheça a dpw2019, nova versão do blog desenvolvimento para web, um dos blogs sobre webdev mais tradicionais do Brasil!
CSS Blocks: introdução à API
Veja neste artigo uma introdução à API de CSS Blocks e comece a entender porque este é um dos melhores compiladores CSS da atualidade.
LinkedIn anuncia CSS Blocks, o novo otimizador de CSS
Saiba mais sobre CSS Blocks, o novo projeto open source da LinkedIn de um otimizador CSS que promete contribuir muito para o desenvolvimento front-end.
Porque CSS Grid é melhor que Bootstrap para criar layouts
Com o advento de CSS Grid, o framework front-end Bootstrap pode não ser mais tão necessário… Saiba mais sobre os poderes de CSS Grid para layouts.
Retrospectiva 2017
Retrospectiva com os melhores artigos de 2017 do seu, do meu, do nosso desenvolvimento para web!
Motion UI: 4 formas de usar animação funcional
Interfaces animadas/Motion UI são ponto imprescindível para UX. Conheça 4 formas de usar animação funcional em projetos web.
O novo esqueumorfismo está no assistente de voz
O novo esqueumorfismo está no assistente de voz. Leia e saiba mais sobre como esqueumorfismo, assistentes de voz e biomimética estão correlacionados.
Desenvolvimento Orientado a Modinha (DOM)
Você é adepto do Desenvolvimento Orientado a Modinha? Saiba como escapar dos hypes tecnológicos e se preservar através de importantes análises e dicas.
Ícones precisam de labels?
Afinal, ícones precisam de labels ou não? Veja neste artigo uma análise consciente sobre a questão e o que é possível concluir.
Accelerated Mobile Pages (AMP): 1 ano depois
O projeto da Google Accelerated Mobile Pages (AMP) foi lançado há 1 ano. Veja quais foram os impactos na web do mundo todo.
UX, UI, IA, IxD: chega de confusão!
Saiba a diferença entre UX, UI, IA e IxD e as atribuições dos profissionais de cada uma dessas áreas do design.
dpw2016
Conheça as novidades do blog, algumas das novas interações e utilitários visuais e o que esperar do dpw2016!
Web design responsivo com DevTools Device Mode
Conheça as novidades da Device Mode da DevTools e saiba como tirar proveito para desenvolvimento com web design responsivo.
Genymotion: emulador de Android
Genymotion é um emulador Android simples e fácil de usar. Veja como o Genymotion emula dispositivos Android para testes de maneira simples e rápida!
dpw2014 – parte 2: desempenho / performance
Segundo artigo com informações sobre o novo tema do blog, focado em desempenho/performance. Leia e conheça as tecnologias usadas.
Gulp Fiction
Gulp Fiction é uma interface visual para se trabalhar com Gulp. Assista ao screencast e saiba como o Gulp Fiction pode ajudar em seus projetos web!
dpw2014
Conheça as diretrizes do novo desenvolvimento para a web e as tecnologias usadas para criar o tema.
Gulp
Conheça o Gulp, melhor automatizador de tarefas de front-end da atualidade, num artigo repleto de informações, dicas e exemplos.
.htaccess: redirecionamento automático para sites em manutenção
Aprenda como fazer redirecionamento automático para sites em manutenção usando códigos .htaccess.
Escolha uma Licença
escolhaumalicenca.com.br, site para ajudar a escolher conscientemente licenças para projetos open source!
UIkit: framework front-end modular responsivo
UIkit é um framework responsivo modular de front-end projetado para ser leve e simples de se usar. Veja mais informações e conheça seus componentes.
Bower: gerenciador de pacotes front-end
Conheça mais sobre o Bower, gerenciador de pacotes para front-end para um melhor gerenciamento dos recursos de front-end necessários para projetos web
Alloy UI: componentes, informações e opiniões
Alloy UI, um UI framework feito com YUI3, é um projeto com bons componentes para desenvolvimento front-end e já é usado por grandes empresas pelo mundo.
JSON: JavaScript Object Notation
JSON – JavaScript Object Notation – é uma das principais notações para intercâmbio de dados entre aplicativos. Saiba mais e veja exemplos e ferramentas.
Melhores editores WYSIWYG
Conheça os melhores editores WYSIWYG para seu projeto ir para o próximo nível: uma lista de editores WYSIWYG para todos os gostos e necessidades!
Breadcrumbs: guia completo com exemplos e melhores práticas
Todos nós vemos breadcrumb em sites, mas você já parou para pensar neles? Veja noss guia completo sobre breadcrumbs com exemplos e melhores práticas!
6 mitos de SEO que você deve evitar
O trabalho de otimização para mecanismos de busca, SEO, possue “gurus” que ensinam uma técnica mágica a cada dia. Conheça 6 mitos de SEO que você deve estar ciente e evitar
8 características de User Interfaces (UI) de sucesso
Uma boa user interface garante uma boa usabilidade em seu software ou web site. Conheça 8 características de User Interfaces (UI) de sucesso!
Boas práticas de SEO para seu site na primeira página do Google
“Resumo-tradução” do livro da Google sobre como ter seu site posicionado na primeira página de busca!
Componentes de um sistema de navegação
Conheça os componentes básicos de um sistema de navegação e saiba o que é essencial para seu site permitir a fácil interação de seus visitantes
Meta tags
Um guia sobre meta tags, mostrando as principais meta tags, sua função e exemplos de uso para que você saiba qual meta tag utilizar em cada situação, sumo a um trabalho de SEO mais elaborado e profissinoal
Diferenças entre IDs e Classes
Aprenda a diferença entre IDs e classes, usados em XHTML, CSS e javascript. Saber a diferença entre classes e IDs evita erros básicos e permite desenvolver sites melhores
SEO para designers: os erros mais comuns na otimização de sites
Conheça os erros de SEO mais comuns na otimização de sites e saiba como não cometê-los
As melhores práticas de SEO para seu site ou blog melhorar o posicionamento nos mecanismos de busca
Pratique e tenha um bom posicionamento
Identificador de fontes
Quer usar um identificador de fontes para saber qual fonte foi usada em uma imagem ou texto de um site? Quer saber como identificar uma fonte? Leia mais!