BFB 2: seu próximo boilerplate front end
Conheça o boilerplate front end que oferece tecnologias e convenções modernas, linters, formatadores e um build de muita qualidade.
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!
Basic Front Boilerplate (BFB)
Conheça o Basic Front Boilerplate, ou BFB, e saiba como ele vai ajudar a todos nós a aprendermos mais desenvolvimento web.
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.
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.
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.
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! ;-)
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.
Os melhores bancos de imagem grátis (stock images)
Lista com os melhores bancos de imagens grátis (free stock images) em uma compilação sensacional para usar imagens em qualquer projeto web.
Colorblind Web Page Filter: acessibilidade por simulação de deficiências cromáticas
Colorblind Web Page Filter permite simular diferentes tipos de deficiências cromáticas. Saiba mais a respeito da ferramenta para testes de acessibilidade.
5 macetes do Composer
Conheça 5 macetes do Composer para aprimorar seu workflow PHP através de um gerenciamento de dependências mais eficiente.
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.
Pré-processadores CSS e Chrome DevTools
Aprenda como usar o potencial máximo da DevTools ao trabalhar com pré-processadores CSS.
WordPress + Composer: aprimore seu workflow
Utilize Composer com WordPress para aprimorar seu workflow e manter as dependências do projeto de uma maneira mais profissional.
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!
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!
Gulp
Conheça o Gulp, melhor automatizador de tarefas de front-end da atualidade, num artigo repleto de informações, dicas e exemplos.
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
Grunt: build tool para projetos front-end
Conheça o Grunt, um dos melhores executadores de tarefas (task runner), e veja exemplos de uso para que o processo de automatização de tarefas no front-end em seus projetos seja uma realidade!
Como fazer fork de um projeto no GitHub
Aprenda como fazer fork de um projeto no GitHub, incluindo comandos e fluxo necessário, e saiba como ter a sua própria versão de um pedacinho de código que pode mudar o mundo!
Composer: como atualizar
Saiba como atualizar o Composer e ter sempre a versão mais atual do gerenciador de pacotes do PHP.
Começando com Git
Começando com Git: vídeo de 3h para você aprender mais sobre o Git, o sistema de controle de versão responsável pelo termo Codificação Social (Social Coding).
Composer: a evolução PHP
Composer é o gerenciador de dependências (ou pacotes) para PHP. Conheça mais sobre o Composer e saiba o que ele pode fazer por você.
Usando Modernizr para detectar features de HTML5 e CSS3
Conheça e aprenda a usar Modernizr, biblioteca JavaScript que permite detectar features de HTML5 e CSS3 do navegador e prover soluções, caso necessário.
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!
Recursos de usabilidade grátis
Recursos de usabilidade grátis para testes de usabilidade e aprimoramento da experiência do usuário em seu site. Leia e saiba mais sobre usabilidade na web!
7 ferramentas para web designs melhores
Conheça 7 ferramentas para ajudá-lo a elaborar web designs melhores e a ser mais relevante com os respectivos públicos-alvo de seus projetos
Como tirar screenshot de um web site inteiro e obter uma imagem completa
Descubra como fazer para ter uma screenshot completo de um site
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!