Η νέα παραγγελία Meme: αλλαγή του παιχνιδιού με απλή προσωρινή αποθήκευση του προγράμματος περιήγησης

Ακόμα και το 2018, δεν έχουν όλοι οι άνθρωποι πρόσβαση στο Διαδίκτυο 3G και παγιδεύονται μέσα σε έναν κόσμο που δεν μιλάει. Ήρθε η ώρα να σταματήσετε αυτήν την τρέλα.

Σε περίπτωση που δεν είστε εξοικειωμένοι με την έννοια του meme , ένα meme είναι συνήθως μια εικόνα που σχετίζεται με ένα συγκεκριμένο πλαίσιο ή ιδέα.

Η προσθήκη διαφορετικού κειμένου σε αυτές τις εικόνες - memes - χρησιμοποιείται κυρίως ως τρόπος γελοιοποίησης της ανθρώπινης συμπεριφοράς ή για την περιγραφή καταστάσεων. Τα memes διαδίδονται ευρέως στο διαδίκτυο, ειδικά μέσω των κοινωνικών μέσων και των πλατφορμών εικόνων.

Υπάρχει ένα πρόβλημα

Κάθε ένα από αυτά τα μιμίδια έχει χρησιμοποιηθεί εκατομμύρια φορές για να κάνει εκατομμύρια αστεία. Αυτήν τη στιγμή, όλες οι μηχανές αναζήτησης, τα μέσα κοινωνικής δικτύωσης και οι πλατφόρμες εικόνων φορτώνουν καθεμία από αυτές τις εικόνες ξεχωριστά. Αυτό προκαλεί megabyte επισκεψιμότητας και απαιτεί χωρητικότητα δεδομένων στο τηλέφωνό σας.

Η ιδέα μου

Ήρθα με την ιδέα να αποθηκεύσω τις εικόνες meme που χρησιμοποιούνται πιο συχνά και να προσθέσω το υπόλοιπο κείμενο αργότερα δυναμικά.

Αυτό λειτουργεί τέλεια για τα μιμίδια, καθώς οι εικόνες παραμένουν ίδιες και μόνο το κείμενο αλλάζει.

Το τεράστιο πλεονέκτημα είναι η μειωμένη μεταφορά δεδομένων. Δέκα έως δεκαπέντε «κανονικές» εικόνες μπορούν εύκολα να μεταφέρουν δεδομένα 1MB. Μπορώ να φορτώσω 1000 memes και περισσότερα με το ίδιο 1MB μεταφοράς δεδομένων, επειδή το κείμενο palin είναι πολύ ελαφρύτερο από τις εικόνες.

Έτσι, για παράδειγμα, το δεύτερο meme από αυτό το άρθρο Medium αποθηκεύεται ως εικόνα και είναι πάνω από 80kB αλλά θα μπορούσε επίσης να αποθηκευτεί ως

1. Εικόνα: "success_kid.jpg"

2. Κορυφαίο κείμενο: "Βαριά βραδιά ποτού"

3. Κάτω κείμενο: "Ξύπνα με κλειδιά, πορτοφόλι και τηλέφωνο"

Αυτό θα απαιτούσε μόλις 0.1kB για όσο διάστημα η εικόνα "success_kid.jpg" είχε προσωρινά αποθηκευτεί. Εάν η εικόνα δεν βρίσκεται στην προσωρινή μνήμη του προγράμματος περιήγησης, θα ληφθεί μία φορά. Στη συνέχεια θα μπορούσε να χρησιμοποιηθεί επανειλημμένα για πάντα χωρίς περαιτέρω μεταφορά δεδομένων.

Ο χρήστης επωφελείται από την τεράστια μείωση του χρόνου φόρτωσης και της χρήσης δεδομένων. Με αυτό το σύστημα, δεν έχει σημασία αν ο πάροχος κινητής τηλεφωνίας σας πέταξε το εύρος ζώνης σας - μπορείτε ακόμα να μιμηθείτε σαν τρελός. Το σύστημα εξοικονομεί επίσης χώρο αποθήκευσης στο τηλέφωνό σας.

Για τη φόρτωση 100 meme, μεταφέρθηκαν μόνο 15kB συνολικά, καθώς οι εικόνες έχουν ήδη αποθηκευτεί στην κρυφή μνήμη ("Μεταφέρθηκε" 0B ) και 15 δημοσιεύσεις απαιτούν λιγότερα από 1,5kB δεδομένων. Ο ίδιος ο ιστότοπος είναι μικρότερος από 10kB . Το πέτυχα αυτό:

1. Μη χρήση προσθηκών / βιβλιοθηκών και σύνταξη εγγενούς κώδικα.

2. Μη χρήση εικόνων για τη δημιουργία της διάταξης και των εικόνων υψηλής ποιότητας γενικά.

3. Διατηρώντας τα πάντα απλά .

Δεδομένου ότι τα μιμίδια είναι τόσο ελαφριά, ήταν λογικό να διατηρήσετε τη διάταξη και τη λειτουργικότητά σας άπαχη, έτσι ο ιστότοπος είναι συμπαγής και γρήγορος.

Οι άνθρωποι σε όλο τον κόσμο αντιμετωπίζουν προβλήματα κατά τη φόρτωση ιστοσελίδων, επειδή χρειάζεται πολύς χρόνος για να τις ανοίξουν. Η μέση ιστοσελίδα είναι περίπου 2.300kB και οι πίνακες εικόνων ή οι πλατφόρμες βίντεο συχνά δεν είναι προσβάσιμες, επειδή το περιεχόμενο είναι πολύ μεγάλο για λήψη με μια αδύναμη ή πεταλούδα σύνδεση.

Ελπίζω ότι αυτό το σύστημα προσωρινής μνήμης θα βοηθήσει παρέχοντας μια εναλλακτική λύση που απαιτεί λιγότερη χρήση δεδομένων. Ήρθε η ώρα να κάνετε το Διαδίκτυο και τη ζωή των ανθρώπων πιο αξιομνημόνευτη κάνοντας αυτό το κομμάτι της κουλτούρας του Διαδικτύου προσβάσιμο σε όλους ανά πάσα στιγμή.

Το υπόλοιπο άρθρο αφορά την τεχνική εφαρμογή και λίγο για τον εαυτό μου. Εάν θέλετε απλώς να ρίξετε μια ματιά στο έργο, μεταβείτε στο CacheMe.me (Βεβαιωθείτε ότι έχετε ελέγξει εργαλεία όπως το offline Memeviewer και πολλά άλλα ανοίγοντας το Μενού (☰) → Gadgets).

Τεχνικό μέρος

Για να δείξω την ιδέα, δημιούργησα ένα μικρό παράδειγμα. Χρησιμοποίησα δέκα τυπικά μιμίδια και, μετά από αυτό, ατελείωτα μιμίδια με τυχαίους αριθμούς που δημιουργήθηκαν (κανένας δεν είχε χρόνο να δημιουργήσει αληθινά παραδείγματα).

Για να μετατρέψετε αυτό το παράδειγμα σε πραγματικό μηχάνημα , ζητήστε μια βάση δεδομένων και προσθέστε το επιστρεφόμενο περιεχόμενο. Αν θέλετε να δείτε πλήρη παραδείγματα δείτε το GitHub μου. Το μπροστινό μέρος (HTML, CSS, JS, Kotlin και Swift) πρόκειται να είναι ανοιχτού κώδικα, ούτως ή άλλως.

Μπροστινό άκρο

Αυτό το άρθρο θα επικεντρωθεί στην υλοποίηση του concept από το Διαδίκτυο. Υπάρχει μια εφαρμογή για Android, αλλά δεν θα αναφερθώ σε λεπτομέρειες σε αυτό το άρθρο. Εάν θέλετε να γράψω γι 'αυτό, αφήστε ένα σχόλιο.

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