Scribbler: uma ferramenta de notebook para executar e testar códigos JavaScript on-line

O Scribbler é uma ferramenta de notebook JavaScript que é executada diretamente em seu navegador. Ela oferece aos desenvolvedores, engenheiros e pesquisadores uma interface on-line simples para experimentar e executar código JavaScript. A ferramenta é de código aberto e de uso gratuito, sem necessidade de login de registro. Sua principal característica é que é leve e não requer a instalação do Node.js ou de outros ambientes complexos; pode ser executada baixando o código-fonte e colocando-o em qualquer servidor da Web estático. Os usuários podem criar células contendo código e documentos no Scribbler, carregar dinamicamente bibliotecas de código de terceiros e visualizar dados usando a biblioteca de gráficos integrada. Ele também suporta uma conexão direta com o GitHub, facilitando aos usuários salvar, compartilhar e publicar seus projetos.

Lista de funções

• Não é necessário backendExecuta-se totalmente no navegador, sem a necessidade de instalar ambientes de back-end, como Node.js, npm ou Python.
• livre e abertoProjeto de código aberto que pode ser usado gratuitamente, sem necessidade de login ou assinatura.
• Células interativasOs usuários podem escrever código JavaScript, documentos HTML ou Markdown em diferentes células e executar imediatamente o código para ver o resultado.
• Visualização de dadosBibliotecas de gráficos incorporadas, como a Plotly.js, facilitam a conversão de matrizes e outros dados em gráficos.
• Suporte a bibliotecas de terceirosQualquer biblioteca JavaScript de terceiros no formato ES6 pode ser carregada dinamicamente de uma CDN e usada.
• Integração com o GitHubVocê pode enviar notebooks diretamente para os repositórios do GitHub ou extrair arquivos deles.
• Gerenciamento de documentosUsuários podem fazer download de notebooks no formato JSON (.jsnb) ou exportar a saída para um arquivo HTML.
• Uso entre dispositivosInterface de usuário: A interface tem um design limpo e funciona bem em navegadores modernos em desktops e dispositivos móveis.

Usando a Ajuda

O Scribbler oferece um ambiente para fazer experimentos com código JavaScript sem configurações complexas. Os usuários podem escrever e executar códigos diretamente em uma página da Web e ver os resultados imediatamente, o que é perfeito para testar ideias rapidamente ou aprender JavaScript.

Primeiros passos

Não é necessário instalar nada, basta acessar o aplicativo hospedado oficialmente diretamente pelo navegador para começar:

• Endereço do aplicativo on-line: https://app.scribbler.live/

Se quiser usá-lo off-line ou implantá-lo por conta própria, você também pode baixar o código-fonte do GitHub e colocá-lo em qualquer servidor da Web estático (por exemplo, Nginx ou por meio do npx serve ) é executado no diretório do arquivo

Interfaces e operações principais

A interface do Scribbler consiste em várias "Células", que são o seu núcleo.

1. Tipo de célula
   • Célula de códigoTipo de célula: Este é o tipo de célula padrão para escrever e executar código JavaScript.
   • Célula DocMarkdown: Usado para escrever documentos explicativos, ele suporta a sintaxe Markdown, HTML e CSS. Você pode alternar entre esses dois tipos com a opção no menu no canto superior direito da célula.
2. Célula de execução
   • Depois de selecionar uma célula de código, clique no menu da célula na caixa de diálogo Jogar ► Botão.
   • Uso de atalhos Cmd+Enter (macOS) ou Ctrl+Enter (Windows) também pode ser executado.
   • A saída do código é exibida imediatamente abaixo da célula.
3. gerenciamento de células
   O menu no canto superior direito de cada célula oferece um conjunto de ferramentas de gerenciamento:
   • Mover para cima ↑ / Mover para baixo ↓Reordenar as células.
   • Adição de uma nova célula ✛.Célula de código: Crie uma nova célula de código abaixo da célula atual.
   • Excluir ☓Excluir a célula atual: Excluir a célula atual.

Escrever e fazer experimentos com código

O Scribbler tem algumas funções internas úteis que simplificam operações comuns.

• saída do visor: Você pode usar scrib.show() para gerar uma variável, um objeto ou qualquer informação, é muito mais fácil do que a função console.log() Mais adequado para apresentar resultados em um ambiente de laptop.

  scrib.show("Hello World");
  

• Visualização de dadosO Scribbler tem bibliotecas de gráficos incorporadas que facilitam a criação de gráficos de dados. Por exemplo, usando a biblioteca range() gera uma sequência de números e, em seguida, encadeia chamadas para a função .map(Math.sin) responder cantando .plot() Uma curva senoidal pode então ser traçada.

  // 下面这行代码会画出一条正弦函数曲线
  range(0, 10, 0.01).map(Math.sin).plot();
  

• Carregamento de bibliotecas externasVocê pode carregar qualquer biblioteca JavaScript da CDN para experimentação. Por exemplo, carregue tensorflow.js para realizar a inferência de aprendizado de máquina, ou carregar o brain.js para treinar uma rede neural simples.

Salvar e compartilhar

Você pode salvar seu trabalho ou compartilhá-lo com outras pessoas.

• Preservação local:
  • No menu superior, selecione File -> Save (as .jsnb)Você pode baixar o notebook inteiro como um arquivo JSON (com um sufixo de .jsnb). Esse arquivo pode então ser carregado de volta ao Scribbler e aberto.
  • opção Download (as .html) Em seguida, você pode salvar a página inteira que contém a saída como um arquivo HTML.
• Carregamento via URL:
  Se o seu .jsnb Os arquivos são hospedados em um URL acessível publicamente (por exemplo, GitHub Gist), que você pode acessar anexando o URL do aplicativo Scribbler ao campo # e links de arquivos para abri-los diretamente.
  Formato:https://app.scribbler.live/#<你的文件链接>
• Publicar no GitHub:
  O Scribbler oferece a capacidade de publicar notebooks diretamente no GitHub, o que requer um token do GitHub.
  1. partir para File -> Git.
  2. Siga as instruções para conectar sua conta do GitHub e fornecer um token.
  3. Após uma conexão bem-sucedida, clique no menu superior da janela Publish Botão.
  4. O sistema gera três links: um link para o notebook para continuar a edição, um link para ser executado como um aplicativo autônomo e um trecho de código para ser incorporado em outras páginas da Web.

cenário do aplicativo

1. Aprenda e faça experiências com JavaScript
   Para iniciantes, o Scribbler oferece um ambiente sandbox com configuração zero. Você pode praticar a sintaxe do JavaScript, testar várias funções e APIs e entender visualmente os resultados da execução do código.
2. Computação científica e visualização de dados
   Engenheiros e pesquisadores podem usar o Scribbler para cálculos matemáticos complexos, simulações de sistemas e análise de dados. Ele suporta o carregamento de math.js e outras bibliotecas de computação científica, e as funções de gráficos incorporadas facilitam a visualização dos resultados dos cálculos.
3. IA e aprendizado de máquina
   Você pode carregar o tensorflow.js talvez brain.js As bibliotecas de aprendizado de máquina, como a AI Library, podem ser usadas para treinar modelos simples ou para executar modelos pré-treinados para inferência. Ao incorporar células HTML, também é possível criar casos de uso de IA dinamicamente interativos.
4. Prototipagem de código e testes de API
   O Scribbler é uma ferramenta ideal quando você precisa verificar rapidamente a lógica de um pequeno trecho de código ou testar os resultados de retorno de uma API de terceiros. Não é necessário criar um projeto completo, basta escrever o código de teste diretamente na célula.

QA

1. Qual é a diferença entre o Scribbler e o JSFiddle/Codepen?
   O Scribbler se concentra mais no processamento de dados e nos processos computacionais, e seu formato de bloco de notas multicelular é adequado para criar documentos mais longos e registros de laboratório, semelhante ao Jupyter Notebook para ciência de dados, enquanto o JSFiddle e o Codepen são usados principalmente para testar e compartilhar trechos de código de front-ends da Web compostos de HTML, CSS e JavaScript. trechos de código de front-end da Web compostos de HTML, CSS e JavaScript.
2. Preciso pagar para usar o Scribbler?
   Não. O Scribbler é um projeto de código aberto, totalmente gratuito e não exige uma conta para usar a versão on-line.
3. Posso usar pacotes npm no Scribbler?
   Não diretamente, o Scribbler é executado em um ambiente de navegador sem Node.js ou npm, mas você pode carregar pacotes npm que fornecem formatos de módulo UMD ou ES6 por meio de uma CDN.
4. Onde o código é executado? Ele é seguro?
   Todo o código é executado diretamente em seu navegador local e não é enviado a nenhum servidor. Esse modo de operação puramente do lado do cliente garante a privacidade do código e dos dados.