Нови Меме редослед: промена игре помоћу једноставног кеширања у прегледачу

Чак и у 2018. години, немају сви људи приступ 3Г Интернету и заробљени су у свету без меморије. Време је да зауставимо ово лудило.

У случају да нисте упознати са концептом мема , мем је обично слика повезана са одређеним контекстом или идејом.

Додавање различитог текста тим сликама - мемовима - углавном се користи као начин исмевања људског понашања или описивања ситуација. Мемови се широко шире на мрежи, посебно путем друштвених медија и имиџ платформи.

Постоји проблем

Сваки од ових мемова коришћен је милионима пута да би се правио милион шала. Тренутно сви претраживачи, друштвени медији и платформе слика учитавају сваку од ових слика засебно. То узрокује мегабајте саобраћаја и захтева капацитет података на вашем телефону.

Моја идеја

Дошао сам на идеју да једном сачувам најчешће коришћене мем меморије, а остатак текста касније додам динамички.

Ово одлично ради за меме, јер слике остају исте и само се текст мења.

Огромна предност је смањен пренос података. Десет до петнаест „нормалних“ слика може лако пренети 1 МБ података. Могу да учитам 1000 и више мемова са истим 1 МБ преноса података, јер је палин текст много лакши од слика.

Тако је, на пример, други мем из овог чланка Медијум сачуван као слика и има више од 80 кБ, али такође може бити сачуван као

1. Слика: ”суццесс_кид.јпг”

2. Горњи текст: „Тешка ноћ пијења“

3. Текст одоздо: „Пробудио се са кључевима, новчаником и телефоном“

То би захтевало само 0,1 кБ све док је слика „суццесс_кид.јпг“ била једном кеширана. Ако се слика не налази у кешу прегледача, преузела би се једном. Тада би се могао непрекидно користити заувек без даљег преноса података.

Корисник има користи од огромног смањења времена учитавања и употребе података. Са овим системом није важно да ли вам је мобилни провајдер смањио пропусни опсег - и даље можете да памтите као луди. Систем такође штеди простор за складиштење на вашем телефону.

Да би се учитало 100 мемова , пребачено је укупно само 15 кБ , јер су слике већ „кеширане“ („Пребачено“ ), а 15 постова захтева мање од 1,5 кБ података. Сама веб локација је мања од 10кБ . То сам постигао:

1. Не користите никакве додатке / библиотеке и не пишете изворни код.

2. Непотреба слика за креирање изгледа и слика високог квалитета уопште.

3. Одржавање свега једноставног .

Будући да су мемови тако лагани, било је логично да изглед и функционалност остану витки, тако да је веб страница компактна и брза.

Људи широм света имају проблема са учитавањем веб страница, јер је потребно превише времена за њихово отварање. Просечна веб страница је око 2.300 кБ, а плоче са сликама или видео платформе су често недоступне јер је садржај велик за преузимање са слабом или ограниченом везом.

Надам се да ће овај кеш систем помоћи пружањем алтернативе која захтева мање употребе података. Време је да интернет и животе људи учинимо још незаборавнијим тако што ћемо овај комад интернет културе учинити доступним свима у било ком тренутку.

Остатак чланка говори о техничкој имплементацији и помало о себи. Ако једноставно желите да погледате пројекат, идите на ЦацхеМе.ме (Обавезно погледајте алате као што је оффлине Мемевиевер и многи други тако што ћете отворити Мени (☰) → Гадгети).

Технички део

Да бих демонстрирао идеју, створио сам мали пример. Користио сам десет типичних мема и након тога бескрајне меме са случајно генерисаним бројевима (нико нема времена за генерисање бесконачних стварних примера).

Да бисте овај пример претворили у праву мем меморију , упите базу података и додајте враћени садржај. Ако желите да видите пуне примере, погледајте мој ГитХуб. Предњи крај (ХТМЛ, ЦСС, ЈС, Котлин и Свифт) ионако ће бити отворен.

Предњи крај

Овај чланак ће се фокусирати на имплементацију концепта на мрежи. Постоји апликација за Андроид, али у овом чланку нећу улазити у детаље. Ако желите да пишем о томе, оставите коментар.

Хтмл / ЦСС: Тхе 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!