изменение игры с помощью простого кэширования браузера

1656598574 izmenenie igry s pomoshhyu prostogo keshirovaniya brauzera

от Филиппа

1*sa36HnySp33Inkm62q-Scw

Даже в 2018 году не все люди имеют доступ в Интернет 3G и находятся в ловушке в мире без мемей. Пора остановить это безумие.

Если вы не знакомы с мем Концепция мем, как правило, является изображением, связанным с конкретным контекстом или идеей.

Добавление этих изображений различного текста — мемов — в основном используется как способ высмеять человеческое поведение или описывать ситуации. Мемы широко распространяются в Интернете, особенно через социальные сети и платформы изображений.

1*Nw3DnbmpuEBnbtP-gdqyfg
Ваш типичный соседский мем

Есть проблема

Каждый из этих мем использовался миллионы раз, чтобы сделать миллионы шуток. Сейчас все поисковые системы, социальные сети и платформы изображений загружают каждое из этих изображений в отдельности. Это вызывает мегабайты трафика, и требуется емкость данных на вашем телефоне.

1*Bt-YmOk2Aa2F4Hbj1FaQIw
Результаты поиска для «Bad Luck Brian»

Моя идея

У меня возникла идея один раз сохранить самые употребительные изображения мемов, а затем динамически добавить остальной текст.

Это отлично подходит для мемов, поскольку изображения остаются неизменными, а меняется только текст.

Огромным преимуществом является сокращение передачи данных. От десяти до пятнадцати «обычных» изображений можно легко передать 1 МБ данных. Я могу загрузить 1000 и более мемов с тем же 1 МБ передачи данных, поскольку текст Palin гораздо легче изображения.

Так, например, второй мем из этой статьи Medium сохранен как изображение и закончен 80 Кб но также можно сохранить как

1. Изображение: ”success_kid.jpg”

2. Верхний текст: «Тясная ночь выпивки»

3. Нижний текст: «Проснулся с ключами, кошельком и телефоном»

Это требовало бы просто 0,1 Кб пока изображение «success_kid.jpg» было кэшировано один раз. Если в кэше браузера нет изображения, оно будет загружено один раз. Затем его можно было бы использовать постоянно без какой-либо дальнейшей передачи данных.

Пользователь получает выгоду от значительного уменьшения времени загрузки и использования данных. С этой системой не имеет значения, уменьшил ли ваш провайдер мобильной связи вашу пропускную способность — вы все равно можете читать мем, как сумасшедший. Система также экономит место на вашем телефоне.

1*ZMaYMU0jYu1hLypBslw_pA
Каждый «Тип XHR» = 15 мем, документ = код для макета и функциональности

Чтобы скачать 100 только мемы 15 Кб были переданы в целом, поскольку изображения уже «кэшированы» («Передано») 0B) и 15 сообщений требуют меньше чем 1,5 Кб данных. Сам веб-сайт меньше чем 10 КБ. Я достиг этого благодаря:

1. Не используете любые плагины/библиотеки и написание родного кода.

2. Не используете изображение для создания макета и изображения высокого качества в целом.

3. Хранить все просто прост.

Поскольку мемы настолько легки, было смысл сохранить макет и функциональные возможности, чтобы веб-сайт был компактным и быстрым.

Люди во всем мире испытывают проблемы с загрузкой веб-страниц, поскольку их открытие занимает слишком много времени. Средний размер веб-страницы составляет около 2300 КБ, а графические доски или видеоплатформы часто недоступны, поскольку содержимое слишком большое для загрузки со слабым или ограниченным соединением.

Я надеюсь, что эта система кэша поможет, предоставив альтернативу, требующую меньшего использования данных. Пора сделать Интернет и жизнь людей более насыщенными, сделав этот фрагмент Интернет-культуры доступным для всех и в любое время.

Остальные статьи о технической реализации и немного обо мне. Если вы просто хотите посмотреть на проект, перейдите по ссылке CacheMe.me (Обязательно проверьте такие инструменты, как автономный Memeviewer и многие другие, открыв Меню(☰) → Гаджеты).

Техническая часть

Чтобы показать идею, я создал небольшой пример. Я использовал десять типичных мемов, а затем бесконечные мемы со случайно сгенерированными числами (у кого-то нет времени для создания бесконечности реальных примеров).

Чтобы превратить этот пример в настоящую машину мэмов, сделать запрос в базу данных и добавить полученное содержимое. Если вы хотите увидеть полные примеры, посмотрите мой GitHub. В любом случае интерфейс (HTML, CSS, JS, Kotlin и Swift) будет открыт.

Передняя часть

Эта статья будет фокус концепции веб-реализации. Существует приложение для Android, но я не буду вдаваться в детали в этой статье. Если вы хотите, чтобы я об этом написал, оставьте комментарий.

Html/CSS: The <div> Я использую в качестве контейнера мему, чтобы иметь CSS property position:relактивный; поэтому текст будет на изображении, and text-align:по центру, чтобы выровнять текст по центру (кто догадался).

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

Текст получает а font-family: Impact; color: white; -webkit-text-stroke: 1px #000 чтобы достичь типичного текста в стиле мема. Theposition:absolute атрибут в сочетании с контейнером мема position:relative, используется для размещения текста над изображением. Добавив такие атрибуты, какz-index:99 и pointer-events:none Я сделал мем похожим на обычное изображение.

<!-- 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: Чтобы получить большее/бесконечное содержимое, я вызываю функцию в этом случае с Ajax/XHR (поэтому сайт не перезагружается). Это посылает на сервер запрос на получение дополнительного содержимого. Если ответ в формате HTML, я добавляю его прямо так:

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

Если resposeText в формате JSON, я сначала анализирую текст ответа, а затем создаю HTML из содержимого в a for-loop вот так:

...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)}

Лучшая часть: мне даже не нужно писать функцию для кэширования, каждый веб-браузер делает это по умолчанию. Вы можете просто повторно использовать ту же ссылку на изображение, и «магия» уже происходит.

1*pAmE_dqKdzDrjO6_deW2vg

Бекенд

Эффект сбережения данных является результатом структурированного интерфейса (HTML/XML), поэтому бэкенд на самом деле не имеет значения для эффекта сохранения данных. В основном, сервер, возвращающий данные в формате HTML или JSON (текст вверху, нижний текст, имя изображения) – это все, что нужно.

Для своего проекта я выбрал Джанго (веб-фреймворк Python). Я также интегрировал некоторые Голанг. Django/Python заботится о платформе в целом (пользователи, контент и HTML), а Golang берется за обработку запросов API и передачу JSON клиенту. Оба языка программирования работают с одинаковым PostgreSQL базы данных.

$whoami

Меня зовут Филипп, и в прошлом году я начал изучать кодирование вместе с учебой. Я всегда хотел научиться кодировать, но боялся кода, поскольку представлял его очень абстрактным и сложным. Частично я был прав. Существует разработка веб-приложений, мобильных и настольных приложений, и для каждого из них нужны разные навыки. Существует масса разных языков, фреймворков и библиотек, и каждый рекомендует учить что-то свое.

1*ZQ-nJEzv6ONWBlfNHFpMZw
Основные темы программирования и как они связаны. С опроса StackOverflow

К счастью, я наткнулся на freeCodeCamp, который был великолепной отправной точкой для обучения и вникновения в кодировку. Я мог самостоятельно решать, когда и где учиться, и главное, четкий курс курса держал меня в курсе того, что изучать дальше. Всегда помогало видеть, что у других людей были подобные проблемы, и я был не единственным, кто пытался решить «легкие» алгоритмы.

Сообщество freeCodeCamp достаточно поддержало меня, чтобы пережить эти первые недели/месяцы разочарований, и подсказало мне путь самостоятельно начинать проекты. После окончания моего фронт-энд сертификата я начал изучать Python и через 6 месяцев я смог получить Full Stack Junior Position (неполный рабочий день, поскольку я должен закончить обучение) в молодой компании.

Спасибо всему сообществу программистов. Без freeCodeCamp, StackOverflow и GitHub, я бы не зашел так далеко. Кроме того, благодаря всем моим собратьям-мемеам ваши мемы были там, когда никого больше не было.

1*HqjMpHNELDuu8UzEreH7kQ
Новый порядок мемов

Чтобы наслаждаться некоторыми кэшированными мемами и присоединиться к революции, перейдите на CacheMe.me или загрузите приложение для Android!

Добавить комментарий

Ваш адрес email не будет опубликован.