Az új Meme-sorrend: a játék megváltoztatása egyszerű böngésző-gyorsítótár segítségével

Még 2018-ban sem minden ember fér hozzá a 3G internethez, és csapdába esett egy memeingless világban. Ideje megállítani ezt az őrületet.

Abban az esetben, ha nem ismeri a mém fogalmát, a mém általában egy kép, amely egy adott kontextushoz vagy ötlethez kapcsolódik.

Különböző szöveg hozzáadása ezekhez a képekhez - mémekhez - többnyire az emberi viselkedés kigúnyolásának vagy a helyzetek leírásának módja. A mémek széles körben terjednek az interneten, különösen a közösségi média és a képplatformok segítségével.

Van egy probléma

Ezeket a mémeket milliószor használták milliók viccelésére. Jelenleg az összes keresőmotor, a közösségi média és a képplatform külön-külön tölti be ezeket a képeket. Ez megabájt forgalmat okoz , és adatkapacitásra van szükség a telefonon.

Ötletem

Arra gondoltam, hogy a leggyakrabban használt mémképeket egyszer elmentem, a többi szöveget később dinamikusan csatolom.

Ez remekül működik mémeknél, mivel a képek változatlanok maradnak, és csak a szöveg változik.

Óriási előnye a csökkent adatátvitel. Tíz-tizenöt „normál” kép segítségével egyszerűen 1 MB adatot lehet továbbítani. 1000 mémet és még többet tudok betölteni ugyanazzal az 1 MB adatátvitellel, mert a palin szöveg sokkal könnyebb, mint a képek.

Így például a Medium cikk második mémje képként mentésre kerül és meghaladja a 80 KB-ot, de elmenthető

1. Kép: ”success_kid.jpg”

2. Felső szöveg: „Súlyos éjszakai ivás”

3. Alsó szöveg: „Kulcsokkal, pénztárcával és telefonnal ébredtem”

Ehhez mindössze 0,1 KB kellene , amíg a “success_kid.jpg” kép korábban egyszer volt gyorsítótárban. Ha a kép nincs a böngésző gyorsítótárában, egyszer letöltődik. Ezután további adatátvitel nélkül örökké többször felhasználható.

A felhasználó számára előnyös a betöltési idő és az adatfelhasználás hatalmas csökkenése. Ezzel a rendszerrel nem számít, hogy a mobilszolgáltató fojtotta-e a sávszélességét - akkor is őrülten mémelhet. A rendszer tárhelyet is spórol a telefonján.

100 mém betöltéséhez összesen csak 15 KB került átadásra, mivel a képek már „gyorsítótárban vannak” („Transfer” 0B ), és 15 üzenet kevesebb, mint 1,5 KB adat szükséges. Maga a weboldal kevesebb, mint 10 KB . Ezt úgy értem el:

1. Nem használ plug-ineket / könyvtárakat és nem ír natív kódot.

2. Nem használ képeket az elrendezés és általában a jó minőségű képek létrehozásához.

3. Minden egyszerű és egyszerű .

Mivel a mémek annyira könnyűek, érdemes volt az elrendezést és a funkcionalitást is karcsúnak tartani, így a weboldal kompakt és gyors.

Világszerte az embereknek gondjai vannak a weboldalak betöltésével, mert túl sok időbe telik azok megnyitása. Az átlagos weboldal körülbelül 2.300kB, és a táblák vagy a videoplatformok gyakran elérhetetlenek, mert a tartalom nagymértékben letölthető gyenge vagy fojtott kapcsolattal.

Remélem, hogy ez a gyorsítótár-rendszer segít azáltal, hogy alternatívát kínál, amely kevesebb adatfelhasználást igényel. Itt az ideje, hogy az internetet és az emberek életét minél teljesebbé tegyük azáltal, hogy az internetkultúra ezen darabját bármikor mindenki számára elérhetővé tesszük.

A cikk további része a technikai megvalósításról és egy kicsit magamról szól. Ha csak egy pillantást szeretne vetni a projektre, látogasson el a CacheMe.me oldalra (Győződjön meg róla, hogy olyan eszközöket keres, mint az offline Memeviewer és még sok más a Menü (☰) → Gadgets megnyitásával).

Műszaki rész

Az ötlet bemutatásához készítettem egy kis példát. Tíz tipikus mémet és ezek után végtelen mémeket használtam véletlenszerűen generált számokkal (senkinek sem jutott ideje végtelen valós példák előállítására).

Ha ezt a példát valódi mémgéppé szeretné alakítani , akkor kérdezzen le egy adatbázist, és csatolja a visszaküldött tartalmat. Ha teljes példákat szeretne látni, nézze meg a GitHub-ot. A kezelőfelület (HTML, CSS, JS, Kotlin és Swift) egyébként nyílt forráskódú lesz.

Elülső vég

Ez a cikk a koncepció webes megvalósítására összpontosít . Van egy alkalmazás az Android számára, de ebben a cikkben nem részletezem. Ha azt akarod, hogy írjak róla, írj megjegyzést.

Html / CSS: Aiv> 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!