de Philipp

Noua comandă Meme: schimbarea jocului cu cache-ul simplu al browserului

Noua comanda Meme schimbarea jocului cu cache ul simplu al browserului

Chiar și în 2018, nu toți oamenii au acces la internet 3G și sunt prinși într-o lume fără meme. E timpul să oprești această nebunie.

În cazul în care nu sunteți familiarizați cu eu eu concept, un meme este de obicei o imagine asociată cu un anumit context sau idee.

Adăugarea de text diferit acelor imagini – meme – este folosită mai ales ca o modalitate de a ridiculiza comportamentul uman sau de a descrie situații. Memele sunt răspândite pe scară largă online, în special prin intermediul rețelelor sociale și al platformelor de imagine.

1611657306 159 Noua comanda Meme schimbarea jocului cu cache ul simplu al browserului
Meme-ul tău tipic de alături

Există o problemă

Fiecare dintre aceste meme a fost folosit de milioane de ori pentru a face milioane de glume. În acest moment, toate motoarele de căutare, rețelele sociale și platformele de imagine încarcă fiecare dintre aceste imagini separat. Asta duce la megaocteți de trafic și necesită capacitate de date pe telefonul dvs.

1611657307 722 Noua comanda Meme schimbarea jocului cu cache ul simplu al browserului
Rezultatele căutării pentru „Bad Luck Brian”

Ideea mea

Mi-a venit ideea de a salva cele mai utilizate imagini meme o dată și de a adăuga restul textului mai târziu dinamic.

Acest lucru funcționează excelent pentru meme, deoarece imaginile rămân aceleași și doar textul se modifică.

Avantajul imens este transferul redus de date. Zece până la cincisprezece imagini „normale” pot transfera cu ușurință 1 MB de date. Pot încărca 1000 de meme și multe altele cu același transfer de date de 1 MB, deoarece textul palin este mult mai ușor decât imaginile.

Deci, de exemplu, al doilea mem din acest articol Medium este salvat ca imagine și s-a încheiat 80kB dar ar putea fi, de asemenea, salvat ca

1. Imagine : „Success_kid.jpg”

2. Textul de sus : „Noapte grea de băut”

3. Textul de jos: „M-am trezit cu chei, portofel și telefon”

Acest lucru ar necesita doar 0,1kB atâta timp cât imaginea „success_kid.jpg” a fost stocată în cache odată. Dacă imaginea nu se află în memoria cache a browserului, aceasta va fi descărcată o singură dată. Ar putea fi apoi utilizat în mod repetat pentru totdeauna, fără alte transferuri de date.

Utilizatorul beneficiază de o scădere enormă a timpului de încărcare și a utilizării datelor. Cu acest sistem, nu contează dacă furnizorul dvs. de telefonie mobilă v-a restricționat lățimea de bandă – puteți totuși să vă memeți ca nebun. De asemenea, sistemul economisește spațiu de stocare pe telefon.

1611657308 514 Noua comanda Meme schimbarea jocului cu cache ul simplu al browserului
Fiecare „Tip XHR” = 15 Memes, Document = Cod pentru aspect și funcționalitate

A încărca 100 meme, numai 15kB au fost transferate în total, deoarece imaginile sunt deja „cache” („Transferate” 0B) și 15 postări necesită mai puțin de 1,5 kB de date. Site-ul în sine este mai mic decât 10kB. Am realizat acest lucru prin:

1. Nu folosesc orice plugin / bibliotecă și scrierea codului nativ.

2. Nu folosesc imagini pentru a crea aspectul și imagini de înaltă calitate în general.

3. Păstrarea tuturor simplu simplu.

Deoarece memele sunt atât de ușoare, a avut sens să păstreze aspectul și funcționalitatea, astfel încât site-ul web este compact și rapid.

Oamenii din întreaga lume au probleme la încărcarea paginilor web, deoarece este nevoie de prea mult timp pentru a le deschide. media paginii web este de aproximativ 2.300kB, iar imaginile sau platformele video sunt de multe ori inaccesibile, deoarece conținutul este prea mare pentru a fi descărcat cu o conexiune slabă sau limitată.

Sper că acest sistem cache va ajuta oferind o alternativă care necesită mai puțină utilizare a datelor. Este timpul să facem internetul și viața oamenilor mai memorabile făcând această bucată de cultură a internetului accesibilă oricui oricând.

Restul articolului este despre implementarea tehnică și un pic despre mine. Dacă doriți pur și simplu să aruncați o privire la proiect, accesați CacheMe.me (Asigurați-vă că verificați instrumente precum Memeviewer offline și multe altele deschizând Meniul (☰) → Gadgeturi).

Partea tehnică

Pentru a demonstra ideea, am creat un mic exemplu. Am folosit zece meme tipice și, după aceea, nesfârșite meme cu numere generate aleatoriu (nimeni nu are timp să genereze exemple reale la infinit).

Pentru a transforma acest exemplu într-o mașină de meme reală, interogați o bază de date și adăugați conținutul returnat. Dacă doriți să vedeți exemple complete, consultați GitHub. Front-end-ul (HTML, CSS, JS, Kotlin și Swift) va fi oricum open source.

În față

Acest articol va concentrare pe implementarea web a conceptului. Există o aplicație pentru Android, dar nu voi intra în niciun detaliu în acest articol. Dacă vrei să scriu despre asta, lasă un comentariu.

Html / CSS: <div> Eu folosesc ca container meme trebuie să aibă CSS property position:relativ; deci textul va fi pe imagine, and text-align:centru pentru a alinia textul în centru (cine ar fi ghicit).

/* 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 }

Textul primește un font-family: Impact; color: white; -webkit-text-stroke: 1px #000 pentru a obține textul tipic în stil meme.position:absolute atribut, în combinație cu containerul meme position:relative, este folosit pentru a obține textul deasupra imaginii. Prin adăugarea de atribute precumz-index:99 și pointer-events:none Am făcut ca meme să se simtă mai degrabă ca o imagine obișnuită.

<!-- The Meme structure in its natural shape --><h2>title</h2><div style=”position: relative;text-align: center;”>  <span class=”text1">first text</span>  <img src=”image_url">  <span class=”text2">second text</span></div>

JavaScript: Pentru a obține mai mult / conținut nesfârșit, apelez o funcție în acest caz cu Ajax / XHR (astfel încât site-ul nu se va reîncărca). Aceasta trimite o cerere către server pentru mai mult conținut. Dacă răspunsul este în format HTML, îl adaug direct astfel:

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();};

Dacă resposeText este formatat JSON, analizez mai întâi textul răspunsului, apoi creez HTML din conținutul din for-loop ca astfel:

...var meme collection = JSON.parse(xhr.responseText)for (var i = 0; i <= meme_collection.length; i++) {  var o = '<h2>title</h2><div style="position: relative;"><span class="text1">'+meme_collection[i]["text1"]+'</span><img src="'+meme_collection[i]["image"]+'"><span class="text2">'+meme_collection[i]["text2"]+'</span></div>'
  document.getElementsByTagName("body").[0].insertAdjacentHTML("beforeend", o)}

Cea mai bună parte: nici măcar nu trebuie să scriu o funcție pentru a ascunde imaginile în cache, fiecare browser web face acest lucru în mod implicit. Puteți pur și simplu reutiliza același link de imagine și „magia” se întâmplă deja.

1611657308 722 Noua comanda Meme schimbarea jocului cu cache ul simplu al browserului

Backend

Efectul economisirii datelor este rezultatul modului în care este structurat front-end-ul (HTML / XML) – astfel încât backend-ul nu este cu adevărat relevant pentru efectul de salvare a datelor. Practic, este necesar un server care returnează date formatate HTML sau JSON (textul de sus, textul de jos, numele imaginii).

Pentru proiectul meu, am ales Django (un cadru web Python). Am mai integrat unele Golang. Django / Python se ocupă de platformă în general (Utilizatori, Conținut și HTML) în timp ce Golang sare pentru a gestiona cererile API și pentru a servi JSON clientului. Ambele limbaje de programare funcționează la fel PostgreSQL Bază de date.

$ whoami

Numele meu este Philipp, iar anul trecut am început să învăț codarea alături de studii. Am vrut mereu să învăț cum să codez, dar mi-a fost frică de cod, deoarece mi-am imaginat că este foarte abstract și complex. Am avut parțial dreptate. Există dezvoltarea de aplicații web, mobile și desktop și fiecare dintre ele necesită un set de abilități diferit. Există o mulțime de limbi diferite, cadre și biblioteci acolo și toată lumea recomandă să învețe ceva diferit.

1611657309 966 Noua comanda Meme schimbarea jocului cu cache ul simplu al browserului
Subiecte majore în programare și modul în care acestea sunt conectate. Din Sondaj StackOverflow

Din fericire am dat peste Routech, care a fost un punct de plecare minunat pentru a învăța și a intra în codificare. Aș putea decide singur când și unde să învăț și, cel mai important, calea clară a cursului m-a ținut pe drumul ce să învăț în continuare. Mereu a ajutat să văd că alte persoane au probleme similare și nu am fost singurul care s-a străduit să rezolve algoritmi „ușori”.

Comunitatea Routech a fost suficient de susținătoare pentru a mă duce în primele săptămâni / luni de frustrare și m-a îndrumat o modalitate de a începe proiecte pe cont propriu. După ce mi-am terminat certificatul de front-end, am început să intru în Python și după 6 luni am reușit să obțin o poziție Full Stack Junior (cu jumătate de normă de când trebuie să-mi termin studiile) într-o companie tânără.

Mulțumesc întregii comunități de programare. Fără Routech, StackOverflow și GitHub, nu aș fi ajuns atât de departe. De asemenea, mulțumită tuturor colegilor mei care fac meme, meme-urile tale erau acolo când nimeni altcineva nu era.

1611657309 627 Noua comanda Meme schimbarea jocului cu cache ul simplu al browserului
Noua comandă Meme

Pentru a vă bucura de unele Memorii cache și pentru a vă alătura revoluției, accesați CacheMe.me sau descărcați fișierul Aplicația Android!