Você já desejou que houvesse um aplicativo ou extensão da Web que permitisse criar e compartilhar protótipos de interface do usuário em tempo real?
Todos nós fazemos! Todos nós temos ideias de como queremos que nossos sites ou aplicativos pareçam e se sintam.
Então, você criou um design realmente ótimo e não consegue se lembrar exatamente como fez isso?
Agora você tem que encontrar uma maneira de compartilhá-lo. Isso pode levar dias, até semanas, se você estiver tentando compartilhar um design bastante complexo.
Não há razão para esperar para fazer seus protótipos de aplicativos da web. Crie-os agora com Dabblet.
Arraste e solte elementos, estilize e salve. Envie-o a um designer para revisão ou simplesmente copie-o em uma apresentação. As possibilidades são infinitas.
O que é Dabblet?
utilização brincar, você pode experimentar pequenos trechos de código CSS e HTML em tempo real.
Você não precisará de nenhum prefixo em seu código CSS ao usar isso. Os gists do GitHub permitem que você armazene seu conteúdo, publique-o em outros sites e compartilhe-o com outras pessoas.
Essa é uma ótima maneira de compartilhar trechos de código com outros desenvolvedores e obter feedback.
Como funciona?
Assim que o código é digitado, a saída visual é instantaneamente visível em cima dele. JavaScript é a única exceção, considerando que seria irritante executá-lo a cada pressionamento de tecla e pode até fazer com que o navegador se torne inutilizável em determinadas situações.
Usar a opção “Executar JS” na guia JavaScript ou o atalho de teclado (Ctrl + Enter ou Cmd + Enter) executará o JavaScript quando um Dabblet for executado. O menu de opções permite alterar este estilo.
Como desenvolvedor, você pode alternar entre codificar em todos esses três idiomas simultaneamente ou ver o produto final.
Funcionalidades
A seguir estão os recursos do Dabblet que você deve conhecer:
Edição rápida de CSS: Você pode adicionar, editar e remover propriedades CSS rapidamente. As alterações serão refletidas na página em tempo real.
Realce de sintaxe: O código CSS e HTML são destacados de sintaxe, facilitando a leitura e a compreensão. O código também será validado conforme você digita. Você também pode optar por ocultar a caixa de código, se preferir.
Autocompletar: Dabblet oferece preenchimento automático para propriedades e valores CSS. Isso pode ser muito útil quando você está criando ou editando folhas de estilo.
Folhas de estilo CSS pré-construídas: Você pode acessar folhas de estilo CSS pré-criadas de sites populares. Eles podem ser usados para adicionar estilos de forma rápida e fácil ao seu próprio site.
Suporte de essência: Dabblet suporta GitHub Gists, permitindo que você armazene e compartilhe seus trechos de código com outras pessoas facilmente.
Live Preview: Você pode ver os resultados de suas alterações de código em tempo real sem recarregar a página. Por exemplo, se você alterar a cor de um texto, verá a alteração refletida no texto enquanto digita.
Atalhos do teclado: Dabblet tem atalhos de teclado para tarefas comuns, como adicionar uma nova regra de estilo ou comentar.
Vários modos de visualização: O Dabblet oferece vários modos de visualização, que permitem que você veja o código e os resultados lado a lado ou acima e abaixo um do outro.
Prós
- CSS rápido
- Mesmo se você estiver conectado, ainda poderá salvar no modo de navegação anônima.
- Visualizadores de valor CSS embutidos para vários parâmetros, como ângulos, cores, duração, etc.
- Tudo é XHR-ed, então a página nunca é atualizada, nem mesmo quando você salva.
- Atalhos de teclado em abundância.
- Todo o código é formatado automaticamente (exceto markdown).
- Documentação sólida desde o início.
Desvantagens
- A interface é um pouco esmagadora no começo, mas você se acostuma.
- Nenhum recurso de gerenciamento em nível de projeto (ainda).
Integrações Dabblet
Qualquer plataforma precisa se integrar a outros serviços, e Dabblet não é exceção. A seguir estão algumas das integrações que o Dabblet oferece:
Google Analytics
Você pode adicionar facilmente seu código de rastreamento do Google Analytics às páginas do Dabblet. Isso permitirá que você acompanhe as visualizações de página e outras estatísticas do seu Dabblet.
Ubuntu
Dabblet pode ser usado para criar temas do Ubuntu. Você pode criar um novo Dabblet, adicionar código CSS e HTML e visualizar o tema em um navegador da web.
DigitalOcean
Uma empresa de hospedagem em nuvem única fornece serviços de computação em nuvem para empresas, permitindo que elas cresçam suas operações com mais eficiência.
O que Dabblet faz com isso?
Agora você pode criar, gerenciar e implantar seus Dabblets em Espaços Oceânicos Digitais.
Isso permite que você mantenha todos os seus snippets de código em um só lugar e facilita o compartilhamento deles com outras pessoas.
Alternativas para Dabblets
Alternativas estão sempre presentes e, na mesma linha, aqui estão algumas para refletir quando se trata de Dabblet:
Pastebin.com
Os programadores geralmente usam o site para salvar o código-fonte ou fragmentos de dados de configuração. No entanto, qualquer pessoa pode colocar qualquer texto no espaço fornecido.
Caixa JS
JS Bin é uma ferramenta de teste gratuita para JavaScript. O resultado pode ser compartilhado por meio de um URL curto assim que o Javascript for inserido em um painel e o HTML no outro. Faça uso de um menu que permite selecionar algumas das bibliotecas JS mais usadas.
CssDeckGenericName
Essa ferramenta é ótima para criar e trocar casos de teste com outras pessoas que podem ajudá-lo em seus esforços de codificação. Com várias opções, você pode até colaborar em projetos instantaneamente com outros programadores.
Plunker
Plunker é uma plataforma digital onde os desenvolvedores da web podem fazer brainstorming, colaborar e compartilhar seus pensamentos.
Por exemplo, você pode começar com um “Olá, mundo!” programa em qualquer idioma e adicione trechos de código, remarcações e capturas de tela para criar uma experiência de aprendizado rica.
Palavra Final
Concluindo, Dabblet é uma ferramenta útil para desenvolvedores web, especialmente aqueles que procuram maneiras de testar seu código.
Com seus vários recursos e integrações, é difícil não encontrar um uso para essa plataforma.
Experimente hoje!
Deixe um comentário