Den nye Meme-rækkefølge: Ændring af spillet med simpel browser-caching

Selv i 2018 har ikke alle mennesker adgang til 3G-internet og er fanget i en memeingless verden. Det er tid til at stoppe denne vanvid.

Hvis du ikke er fortrolig med meme- konceptet, er et meme typisk et billede, der er knyttet til en bestemt kontekst eller idé.

Tilføjelse af forskellig tekst til disse billeder - memes - bruges mest som en måde at latterliggøre menneskelig adfærd eller til at beskrive situationer. Memes spredes bredt online, især gennem sociale medier og billedplatforme.

Der er et problem

Hver af disse memer er blevet brugt millioner af gange til at lave millioner af vittigheder. Lige nu indlæser alle søgemaskiner, sociale medier og billedplatforme hvert af disse billeder separat. Dette medfører megabyte trafik og kræver datakapacitet på din telefon.

Min idé

Jeg kom på ideen om at gemme de mest brugte meme-billeder en gang og tilføje resten af ​​teksten senere dynamisk.

Dette fungerer godt til memes, da billederne forbliver de samme, og kun teksten ændres.

Den store fordel er den reducerede dataoverførsel. Ti til femten “normale” billeder kan let overføre 1 MB data. Jeg kan indlæse 1000 memes og mere med den samme 1 MB dataoverførsel, fordi palin-tekst er meget lettere end billeder.

Så for eksempel er den anden meme fra denne Medium-artikel gemt som et billede og er over 80 kB, men kunne også gemmes som

1. Billede: ”success_kid.jpg”

2. Toptekst: ”Tung driknat”

3. Nederste tekst: ”Vågnede med nøgler, tegnebog og telefon”

Dette ville kun kræve 0,1 kB, så længe "success_kid.jpg" -billedet blev cachet en gang før. Hvis billedet ikke er i browserens cache, downloades det en gang. Det kunne derefter gentagne gange bruges for evigt uden yderligere dataoverførsel.

Brugeren drager fordel af et enormt fald i indlæsningstid og dataforbrug. Med dette system betyder det ikke noget, om din mobiludbyder nedsætter din båndbredde - du kan stadig meme rundt som en skør. Systemet sparer også lagerplads på din telefon.

For at indlæse 100 memes blev kun 15 kB overført i alt, da billederne allerede er "cache" ("Overført" 0B ), og 15 indlæg kræver mindre end 1,5 kB data. Webstedet i sig selv er mindre end 10 kB . Jeg opnåede dette ved:

1. Brug ikke plug-ins / biblioteker og skriver oprindelig kode.

2. Brug ikke billeder til at skabe layout og billeder i høj kvalitet generelt.

3. Holde alt simpelt .

Da memerne er så lette, var det fornuftigt også at holde layoutet og funktionaliteten slank, så webstedet er kompakt og hurtigt.

Folk rundt omkring i verden har problemer med at indlæse websider, fordi det tager for meget tid at åbne dem. Den gennemsnitlige webside er omkring 2.300 kB, og imageboards eller videoplatforme er ofte utilgængelige, fordi indholdet er for stort til at downloade med en svag eller spredt forbindelse.

Jeg håber, at dette cache-system hjælper med at tilbyde et alternativ, der kræver mindre dataforbrug. Det er tid til at gøre internettet og folks liv mere memeingfull ved at gøre dette stykke internetkultur tilgængeligt for alle når som helst.

Resten af ​​artiklen handler om den tekniske implementering og lidt om mig selv. Hvis du blot vil se på projektet, skal du gå til CacheMe.me (Sørg for at tjekke værktøjer som offline Memeviewer og mange flere ved at åbne Menu (☰) → Gadgets).

Teknisk del

For at demonstrere ideen skabte jeg et lille eksempel. Jeg brugte ti typiske memer og derefter uendelige memer med tilfældigt genererede tal (har ingen tid til at generere uendelige reelle eksempler).

For at gøre dette eksempel til en rigtig meme-maskine skal du søge i en database og tilføje det returnerede indhold. Hvis du vil se fulde eksempler, skal du tjekke min GitHub. Fronten (HTML, CSS, JS, Kotlin og Swift) vil alligevel være open source.

Forenden

Denne artikel vil fokusere på implementering på nettet af konceptet. Der er en app til Android, men jeg vil ikke gå i detaljer i denne artikel. Hvis du vil have mig til at skrive om det, skal du efterlade en kommentar.

HTML / CSS: Den iv> I use as a meme container needs to have the CSS pro perty 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.

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!