Índice
La incorporación de ejemplos de código con scripts de terceros a menudo genera seguimiento o cookies. Siempre quisimos tener un sitio web simple con una buena experiencia de usuario, por lo que configurar cookies sin ningún motivo no era una opción para nosotros. Ahora, con Indiepen, estamos orgullosos de presentar una alternativa respetuosa con la privacidad.
Cuando implementamos sitios web hoy en día, nos enfrentamos a muchas cosas de las que debemos ocuparnos. Idealmente, queremos tener un sitio web rápido, seguro, accesible y justo. Al mismo tiempo, queremos tener un sitio web interactivo con comentarios, encuestas, vídeos, ejemplos de código y mucho más.
Junto con un amigo, lancé un blog de tecnología el año pasado y nos topamos exactamente con ese problema. Queríamos tener una solución simple para incrustar ejemplos de código HTML, CSS y JavaScript, pero las soluciones existentes a menudo incluyen seguimiento, cookies , un montón de funciones o mal rendimiento. Después de investigar un poco, nos dimos cuenta de que teníamos que construir una alternativa.
Echemos un vistazo:
Indiepen es una solución accesible , liviana y respetuosa con la privacidad para insertar ejemplos de código. De hecho, ¡no configuramos cookies ni seguimiento!
Empezar
Indiepen puede obtener una vista previa de cada sitio web que siga una convención muy simple. Debe proporcionar un sitio web con la siguiente estructura de archivos:
.├── index.html├── main.js└── styles.cssImplemente el código de ejemplo con su proveedor de alojamiento favorito (por ejemplo, GitHub Pages, Netlify o Vercel) y copie la URL. Después de eso, vaya a nuestra página de inicio y utilice el generador de fragmentos de código.
El código generado se ve así:
iframe src="https://indiepen.tech/embed/?url=https%3A%2F%2Findiepen.tech%2Fexample%2Ftab=result" /iframeAhora puede utilizar el fragmento de código e integrarlo en su sitio web. ¡Eso es todo! Ahora debería ver su ejemplo de código con un editor para descubrir el código.
Bajo el capó
Suena un poco extraño hoy en día, pero no hemos utilizado ningún marco de JavaScript como React o Vue.js. Es HTML, CSS y JavaScript puro con la ayuda de Prism.js de Lea Verou para resaltar la sintaxis. Esas bibliotecas son muy útiles para implementar y mantener aplicaciones web complejas, pero en nuestro caso, solo tenemos tres archivos que debemos recuperar y pasar a Prism.js. Recetas de cocina tradicionales y comodas
Además, tenemos tres botones en la esquina superior derecha para cambiar entre las vistas HTML, CSS y JavaScript . Al introducir un marco de interfaz de usuario, no pudimos ofrecer una solución liviana con menos de 20 kb de tamaño. Para nosotros, fue un buen aprendizaje que las bibliotecas de UI son importantes en nuestro día a día, pero debemos considerarlas cuidadosamente y no olvidarnos del viejo y tradicional JavaScript.
Ultimas palabras
Indiepen es nuestro primer proyecto de código abierto y estamos muy emocionados de compartir nuestras ideas con usted. Nos encantaría recibir comentarios y tener debates sobre una web justa. Ponte en contacto conmigo en Twitter o consulta el proyecto en GitHub .
Por último, pero no menos importante, me gustaría mencionar que Indiepen tiene un alcance limitado y queremos que su diseño sea simple . Si necesita trabajar con ejemplos de código más complejos, preprocesadores para CSS o JavaScript, o desea beneficiarse de una plataforma para compartir sus ideas, considere soluciones más sofisticadas como CodePen o JSFiddle .
¡Feliz codificación a todos!
(vf, yk, il)Explora más en
- HTML
- CSS
- javascript
- Herramientas
Tal vez te puede interesar:
- ¿Deberían abrirse los enlaces en ventanas nuevas?
- 24 excelentes tutoriales de AJAX
- 70 técnicas nuevas y útiles de AJAX y JavaScript
- Más de 45 excelentes recursos y repositorios de fragmentos de código
Alternativa sin cookies para incrustar fragmentos de código HTML, CSS y JS
Índice Empezar Bajo el capó
programar
es
https://aprendeprogramando.es/static/images/programar-alternativa-sin-cookies-para-incrustar-fragmentos-de-codigo-html-1115-0.jpg
2025-01-15
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente