Автор оригинала: FreeCodeCamp Community Member.
Филипп
Даже в 2018 году не все люди имеют доступ к Интернету 3G и в ловушке мира в ловушке в мире не попадают в меру. Пришло время остановить это безумие.
Если вы не знакомы с мем Концепция, мем, как правило, является изображением, связанным с определенным контекстом или идеей.
Добавление другого текста на эти изображения – MEMES – в основном используется как способ высмеивать человеческое поведение или описать ситуации. Метки распространяются широко онлайн, особенно через социальные медиа и платформы изображений.
Существует проблема
Каждый из этих мем использовался миллионы раз, чтобы заработать миллионы шуток. Прямо сейчас все поисковые системы, социальные сети и платформы изображения загружают каждое из этих изображений отдельно. Это вызывает Мегабайты трафика и требует емкости данных на вашем телефоне.
Моя идея
Я пришел с идеей, чтобы сэкономить самые используемые изображения мема один раз, и добавив остаток текста позже динамично.
Это отлично работает для MEMES, поскольку изображения остаются одинаковыми и только текстовые изменения.
Огромное преимущество – это снижение передачи данных. Десять до пятнадцати «нормальных» изображений могут легко передавать 1 МБ данных. Я могу загрузить 1000 мем и больше с одинаковой 1 МБ передачи данных, потому что текст PALIN намного легче изображения.
Итак, например, вторая мема из этой среды сохраняется как изображение и является над 80 КБ но может быть также сохранен как
1. Изображение: “Success_kid.jpg”
2. Top Text: «Сильная ночь питья»
3. Нижний текст: «Проснулся с ключами, кошельком и телефоном»
Это потребует только 0,1 КБ Поскольку изображение «Success_KID.JPG» было кэшировано один раз раньше. Если изображение не находится в кэше браузера, он будет загружен один раз. Затем он может быть неоднократно используется без каких-либо дополнительных передач данных.
Пользовательский выигрывает от огромного снижения времени загрузки и использования данных. С этой системой не имеет значения, если ваш мобильный провайдер включил свою пропускную способность – вы все равно можете воспользоваться сумасшедшим. Система также экономит место для хранения на вашем телефоне.
Загрузить 100 MEMES, только 15 КБ Были перенесены в общей сложности, поскольку изображения уже «кэшируются» («передано» 0B ) и 15 постов требуют меньше, чем 1,5 кб данных. Сам сайт меньше, чем 10 КБ Отказ Я достиг этого:
1. Не использует Любые плагины/библиотеки и пишущий родной код.
2. Не использует Изображения для создания макета и высококачественных изображений в целом.
3. Хранить все простой простой Отказ
Поскольку MEMES настолько легки, имел смысл сохранить макет и функциональность, а также наклон, поэтому веб-сайт является компактным и быстрым.
У людей по всему миру возникают проблемы, загружающие веб-страницы, потому что это займет слишком много времени, чтобы открыть их. Средняя веб-страница около 2,300 КБ и ImageBoards или видеоплатформы часто недоступны, потому что контент является большим для загрузки со слабым или дрослевым соединением.
Я надеюсь, что эта система кэша поможет, предоставляя альтернативу, которая требует меньшего использования данных. Пришло время сделать Интернет и жизнь людей больше Memeingfull, сделав этот кусок интернет-культуры, доступной для всех в любое время.
Остальная часть статьи касается технической реализации и немного о себе. Если вы просто хотите взглянуть на проект, перейдите к CacheMe.me (Обязательно проверьте инструменты, такие как автономный Memeviewer, и многие другие, открывающие меню (☰) → Гаджеты).
Техническая часть
Чтобы продемонстрировать идею, я создал небольшой пример. Я использовал десять типичных мем и, после этого бесконечные мемы со случайными сгенерированными числами (никто не станет временем для генерации бесконечности реальных примеров).
Превратить этот пример в реальную мем машину Запросите базу данных и добавьте возвращенный контент. Если вы хотите увидеть полные примеры, проверьте мой Github Отказ В любом случае, передний конец (HTML, CSS, JS, Kotlin и Swift) будет открытым исходным кодом.
Внешний интерфейс
Эта статья будет Фокус на веб-реализацию концепции. Есть приложение для Android, но я не буду войти в какие-либо детали в этой статье. Если вы хотите, чтобы я написал об этом, оставьте комментарий.
HTML/CSS: Пятна: Rel артикул; Так что текст будет на изображении и выравнивание текста: Центр выравнивания текста в центре (который бы догадался).
/* 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 }Текст получает Семья шрифта: удар; цвет белый; -webkit-text-hush: 1px # 000 Для достижения типичного текста в стиле мем. Должность: абсолютный атрибут, в сочетании с контейнером MEME Должность: относительный используется для получения текста поверх изображения. Добавляя атрибуты, такие как Z-индекс: 99 и Указатели-события: нет Я сделал меме больше похоже на обычное изображение.
title
first textsecond text
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();};Если Reposetext Является ли JSON отформатирован, я сначала разбираю текст ответа, затем создайте HTML из контента в пределах для петли вот так:
...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)}Лучшая часть: мне даже не нужно писать функцию, чтобы кэшировать изображения, каждый веб-браузер делает это по умолчанию. Вы можете просто повторно повторно использовать одну и ту же ссылку изображения, а? Magic уже происходит.
Довериться
Влияние сбережений данных является результатом того, как передний конец (HTML/XML) структурирован – поэтому бэкэнда действительно не имеет значения для эффекта сохранения данных. По сути, сервер, который возвращает данные HTML или JSON (Top Text, нижний текст, имя изображения) – это все, что требуется.
Для моего проекта я выбрал Джанго (веб-каркас Python). Я также интегрировал некоторые Голанг Отказ Django/Python позаботится о платформе в целом (пользователи, контент и HTML), в то время как Голанг переходит в обрабатывать запросы API и служить JSON клиенту. Оба языка программирования работают с тем же PostgreSQL база данных Отказ
$ WHOAMI
Меня зовут Филипп, и в прошлом году я начал учиться кодировать рядом с учебой. Я всегда хотел научиться кодировать, но был напуган кодом, так как я представлял, чтобы это было очень абстрактным и сложным. Я был частично прав. Есть веб, мобильное и настольное разработка приложений, и каждый из них требует другого набора навыков. Там есть тонна разных языков, каркасов и библиотек, и все рекомендуют узнать что-то другое.
К счастью, я столкнулся с FreeCodeCamp, который был удивительной отправной точкой для изучения и попадания в кодировку. Я мог бы самостоятельно решить, когда и где учиться и, самое главное, четкий путь курса держал меня на треке, что нужно учиться дальше. Это всегда помогло видеть, что у других людей были подобные проблемы, и я не единственный, кто изо всех сил пытался решить «легкие» алгоритмы.
Сообщество FreeCodeCamp было достаточно поддерживать, чтобы нести меня в эти первые недели/месяцы разочарования, и направляясь мне способ начать проекты самостоятельно. После окончания сертификата моего переднего конца я начал попасть в Python и через 6 месяцев я смог получить полную мочевую позицию (неполный рабочий день с тех пор, как я должен закончить учебу) в молодой компании.
Благодаря всем сообществу программирования. Без FreeCodeCamp, Stackoverflow и Github, я бы не пришел так далеко. Также благодаря всем моим товарищам Memeing людей ваши мемы были там, когда никто не был.
Чтобы насладиться кэшированными мемами и присоединиться к революции, пойти в CacheMe.me или скачать Android приложение !