Feb 4, 2018
Chirp-streams of some characters
Today, I present you a freebie-extra for all readers, not just for patrons.
When the idea came up, I wanted to make it only for patrons, but desisted as the idea evolved.
So, what is this ‘Chirp’?
Chirp is an open-source universe-wide interconnected microblogging network made up of many independent servers and service providers. In which users from any server can connect with users from other servers just by adding the server handle to the username.
In short, it is a microblogging platform inspired by Twitter.
I use this chirp-platform idea to portray some of the characters’ thoughts outside of the main story. Of course, I synchronize these ‘expressions’ with what happens inside the story, and try to keep it up-to-date with the main story.
However, I am still working on some ‘chirps’ and their comments. Only Aia’s and Kira’s streams are, somewhat, up-to-date up to the chapter ‘Falcon’, with exception of the comments.
I have decided to do, for now at least, just the streams of the Aces of Aces, meaning, Aia’s, Enya’s, Jim’s and Kira’s.
However, I will concentrate mainly on Aia’s and Kira’s streams, as they are, for me, the most important ones. Enya’s and Jim’s streams will slowly follow suit, but I will only ‘publish’ important ‘chirps’ related to the story or to portray some details about their characters.
Characters’ Chirp-streams:
- Aia: thequeen.istm.es
- Kira: phoenix.istm.es
- Enya: speedkitty.istm.es
- Jim: spacecowboy.istm.es
Behind the scenes
What is behind?
Note: this is a bit technical... but might be interesting :-)
Taking into account that I am not a professional web designer, I experimented with HTML, PHP and CSS.
Using Bootstrap for the overall design, Fontawesome for the icons and graphic elements, and PHP for the logic, I created a kind of template in which I can add new messages ‘easily’.
With ‘easily’ I mean that I only have to add and fill out an array of data. This is not a database driven site. If it the stream grows too big for the arrays, I will think of porting it to a MySQL database, but not too keen to do it. I do know some basics of databases, but I have no time to research too deeply into it.
How does it work?
I created/wrote:
- An overall template with Bootstrap.
- A template for the individual ‘chirps’.
- The basic array of items to show in the chirp-template.
- A loop which loops through the array and introduces the items into the template.
- A further template for the comments.
- A second-level array for the comments.
- A second loop which loops through the comments and renders them.
- Some add-on arrays and strings to render special features, such as verification badges, system-messages and author comments.
Keep in mind that I am a rookie in this web-stuff and that, most likely, my code is an absolute mess and not optimized. If you have some hints to share, I will gladly implement them. For now, as long the page generation time does not overtax the PHP execution time on my virtual server, I am happy.
Some insights
The template is, as mentioned, based on Bootstrap for the sake of simplicity. This way, I do not need to create all CSS elements just fine-tune some details.
This template shows Aia’s chirp-stream. It includes the user info panel with a (nonexistent) profile picture, a custom message and the badges she has earned. Hover over the badges to learn what they mean ;-)
The (hidden) trending topics is a simple array I can update whenever I like.
Each chirp has a title, date and time, sub-title, main message; likes, shares and comments statistics; and featured comments.
Each featured comment shows the username, the date and time, the comment, and likes and dislikes.
The chirps and the comments contain emojis. I hope that anyone can see them properly…
The template is, thanks to Bootstrap, responsive and, thus, mobile-friendly. If you cannot see the emojis on your computer, try with your tablet or smartphone.
I experimented with the possibility of displaying ‘rechirps’, although I have to copy-paste the content, it works.
In the beginning, I named the chirp-array file ‘blog’ which included other stuff I took out while I worked on. Although the filename does not correspond exactly with the content, I kept it as I would have to change several other filenames for consistency.
At the beginning of the file, I declare the last edit date which shows up on the floating message on the bottom, the username and if a login message has to be shown at the end (see Enya’s and Jim’s streams).
These are the arrays containing the chirps and the comments.
The content should be obvious ;-)
This is the chirps-template.
It shows some of the logic and the PHP-‘echoes’ which display the content of the above array.
And this is part of the comments-template.
It has more if-logics than the chirps-template itself as it accounts for system messages, author comments, banned-messages, the URLs to other profiles, the verification badges, plus other details.
Some other stuff
As I do not have useful images yet, I opted to simply state that the characters either deleted the profile picture, do not know how to upload images (such as Kira) or to show a symbol (such as Enya).
About the absurdly high numbers
The likes, dislikes, loves, shares and comments are that absurdly high on purpose. Take into account that this is a universe-wide social network and that the characters are famous in their time.
The software behind
I already mentioned the technology I used to create these chirp-streams: Bootstrap, jQuery, Fontawesome, PHP, HTML and custom CSS.
The application I used to create all this, and I use to keep ‘posting’ for the characters, is Coda 2, a Mac app which is a bit of an allrounder for web design/programming. It includes not only the ‘programming’ assistance and code highlight (as usual) but also includes FTP and Terminal.
That’s it
I hope you enjoy this extra which will be updated continuously.
Thank you for your patronage and support,
SSjr