Um clone da ideia básica do CodePen. Aqui você pode testar códigos HTML, aplicar o CSS e testar o JavaScript.
- Escreva seu código
- Veja o resultado em tempo real
A funcionalidade do CodePen sempre chamou minha atenção. E me intrigava como ele era feito.
Descobri que a aplicação funcionava utilizando a tag HTML <iframe> . Uma tag que lembro de ter visto no começo do curso quando estudei HTML, mas não havia entendido exatamente o que era, nem para que servia, e muito menos o seu potencial.
- Projeto online: Netlify
- Frontend:
- VueJs
- VueCodemirror
O uso do <iframe> é muito vasto e é uma ferramenta muito poderosa. A implementação dela é vasta e cabe muitas possibilidades e usos.
Para a criação do JavaScript no iframe, o Vue não permite um template string com uma tag script. Essa proteção do Vue fez com que o trabalho fosse um pouco mais complicado para a geração do script do iframe.
O contorno foi feito criando uma tag script programáticamente e passando o conteúdo dela também de forma programática.
Mais uma vez pude entender como é possível construir muitas soluções utilizando conhecimento relativamente simples de HTML, CSS e Javascript.
◻️ Versão mobile
◻️ Opção para alternar editores para exibição vertical
◻️ Reposicionar o botão de redimensionamento dos editores
◻️ Opção de download do código criado
Certifique-se de ter instalado o NodeJs em sua máquina. Você pode digitar no seu terminal o comando:
node -v
Após realizar o clone do repositório, navegue até a pasta raiz do proejto e no terminal execute o comando abaixo para as dependências serem instaladas:
npm install
// ou usando yarn:
yarn
Com as dependências instaladas execute o comando seguinte para executar o projeto:
npm run serve
// ou usando yarn
yarn serve
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent