El nuevo orden de los memes: cambiar el juego con un simple almacenamiento en caché del navegador

Incluso en 2018, no todos los seres humanos tienen acceso a Internet 3G y están atrapados en un mundo sin memes. Es hora de detener esta locura.

En caso de que no esté familiarizado con el concepto de meme , un meme suele ser una imagen asociada con un contexto o idea específicos.

Agregar texto diferente a esas imágenes (memes) se usa principalmente como una forma de ridiculizar el comportamiento humano o para describir situaciones. Los memes se difunden ampliamente en línea, especialmente a través de las redes sociales y las plataformas de imágenes.

Hay un problema

Cada uno de estos memes se ha utilizado millones de veces para hacer millones de bromas. En este momento, todos los motores de búsqueda, redes sociales y plataformas de imágenes cargan cada una de estas imágenes por separado. Esto genera megabytes de tráfico y requiere capacidad de datos en su teléfono.

Mi idea

Se me ocurrió la idea de guardar las imágenes de memes más utilizadas una vez y agregar el resto del texto más tarde de forma dinámica.

Esto funciona muy bien para los memes, ya que las imágenes permanecen iguales y solo cambia el texto.

La gran ventaja es la transferencia de datos reducida. De diez a quince imágenes "normales" pueden transferir fácilmente 1 MB de datos. Puedo cargar 1000 memes y más con el mismo 1 MB de transferencia de datos, porque el texto de palin es mucho más ligero que las imágenes.

Entonces, por ejemplo, el segundo meme de este artículo de Medium se guarda como una imagen y tiene más de 80kB, pero también se podría guardar como

1. Imagen: "success_kid.jpg"

2. Texto superior: "Noche intensa de bebida"

3. Texto inferior: "Me desperté con las llaves, la billetera y el teléfono"

Esto requeriría solo 0.1kB siempre que la imagen "success_kid.jpg" estuviera en caché una vez antes. Si la imagen no está en la caché del navegador, se descargará una vez. Luego, podría usarse repetidamente para siempre sin ninguna transferencia de datos adicional.

El usuario se beneficia de una gran disminución en el tiempo de carga y el uso de datos. Con este sistema, no importa si su proveedor de telefonía móvil redujo su ancho de banda; aún puede hacer memes como loco. El sistema también ahorra espacio de almacenamiento en su teléfono.

Para cargar 100 memes, solo se transfirieron 15kB en total, ya que las imágenes ya están "almacenadas en caché" ( 0B "transferidas" ) y 15 publicaciones requieren menos de 1.5kB de datos. El sitio web en sí tiene menos de 10kB . Logré esto por:

1. No usar complementos / bibliotecas y escribir código nativo.

2. No utilizar imágenes para crear el diseño e imágenes de alta calidad en general.

3. Mantener todo sencillo .

Dado que los memes son tan ligeros, tenía sentido mantener el diseño y la funcionalidad ajustados también para que el sitio web sea compacto y rápido.

Las personas de todo el mundo tienen problemas para cargar páginas web porque se tarda demasiado en abrirlas. La página web promedio es de aproximadamente 2.300kB, y los tableros de imágenes o las plataformas de video a menudo son inaccesibles porque el contenido es demasiado grande para descargar con una conexión débil o limitada.

Espero que este sistema de caché ayude al proporcionar una alternativa que requiera menos uso de datos. Es hora de hacer que Internet y la vida de las personas sean más llenas de memes haciendo que esta parte de la cultura de Internet sea accesible para todos en cualquier momento.

El resto del artículo trata sobre la implementación técnica y un poco sobre mí. Si simplemente desea echar un vistazo al proyecto, vaya a CacheMe.me (asegúrese de revisar herramientas como el visor de Meme sin conexión y muchas más abriendo el Menú (☰) → Gadgets).

Parte técnica

Para demostrar la idea, creé un pequeño ejemplo. Usé diez memes típicos y, después, un sinfín de memes con números generados al azar (nadie tuvo tiempo de generar infinidad de ejemplos reales).

Para convertir este ejemplo en una máquina de memes real , consulte una base de datos y agregue el contenido devuelto. Si desea ver ejemplos completos, consulte mi GitHub. La interfaz (HTML, CSS, JS, Kotlin y Swift) será de código abierto, de todos modos.

Interfaz

Este artículo se centrará en la implementación web del concepto. Hay una aplicación para Android, pero no entraré en detalles en este artículo. Si quieres que escriba al respecto, deja un comentario.

Html / CSS: eliv> I use as a meme container needs to have the CSS property position:relative; so the text will be on the image, and text-align:center to align the text in the center (who would have guessed).

/* CSS class for the top and bottom meme text */.text1, .text2 { left: 0; font-family: Impact,sans-serif /*sans-serif as fallback*/; width: 100%; color: white; position: absolute; z-index: 99; pointer-events: none; text-align: center; -webkit-text-stroke: 1px #000 }

The text gets a font-family: Impact; color: white; -webkit-text-stroke: 1px #000 to achieve the typical meme styled text. Theposition:absolute attribute, in combination with the meme container position:relative, is used to get the text on top of the image. By adding attributes likez-index:99 and pointer-events:none I made the meme feel more like a usual image.

title

first text second text

JavaScript: To get more/endless content, I call a function in this case with Ajax/XHR (so the site won’t reload). This sends a request to the server for more content. If the response is in HTML format, I append it directly like so:

function get_memes() { var xhr = new XMLHttpRequest(); xhr.open('GET', "url"); xhr.onload = function () { if (xhr.status === 200) {// if the response is already HTMLdocument.getElementsByTagName("body").[0].insertAdjacentHTML("beforeend", xhr.responseText)} };xhr.send();};

If the resposeText is JSON formatted, I parse the response text first, then create HTML from the content within a for-loop like so:

...var meme collection = JSON.parse(xhr.responseText)for (var i = 0; i <= meme_collection.length; i++) { var o = '

title

'+meme_collection[i]["text1"]+''+meme_collection[i]["text2"]+' '
 document.getElementsByTagName("body").[0].insertAdjacentHTML("beforeend", o)}

The best part: I don’t even have to write a function to cache the images, every web-browser does this by default. You can simply reuse the same image link and the ?magic is already happening.

Original text


Backend

The effect of data savings is a result of the way the front end (HTML/XML) is structured — so the backend isn’t really relevant for the data saving effect. Basically, a server that returns HTML or JSON formatted data (top text, bottom text, image name) is all that is required.

For my project, I chose Django (a Python web framework). I also integrated some Golang. Django/Python takes care of the platform in general (Users, Content and HTML) while Golang jumps in to handle API requests and to serve JSON to the client. Both programming languages work with the same PostgreSQL database.

$whoami

My name is Philipp, and last year I started to learn coding next to my studies. I always wanted to learn how to code, but was scared of code since I imagined it to be very abstract and complex. I was partly right. There is web, mobile, and desktop application development and each of them requires a different skill set. There are a ton of different languages, frameworks, and libraries out there, and everybody is recommending to learn something different.

Luckily I came across freeCodeCamp, which was an awesome starting point to learn and get into coding. I could decide on my own when and where to learn and, most importantly, the clear course path kept me on track what to learn next. It always helped to see that other people had similar problems and I wasn’t the only one who struggled to solve “easy” algorithms.

The freeCodeCamp community was supportive enough to carry me through these first weeks/months of frustration, and guided me a way to start projects on my own. After finishing my front end certificate, I started to get into Python and after 6 months I was able to get a Full Stack Junior Position (part-time since I have to finish my studies) in a young company.

Thanks to the entire programming community. Without freeCodeCamp, StackOverflow, and GitHub, I wouldn’t have come so far. Also thanks to all my fellow memeing humans, your memes were there when no one else was.

To enjoy some cached Memes, and join the revolution, go to CacheMe.me or download the Android App!