I have absolutely no idea if anyone reads this, and honestly at this point in my internet "career" i kinda really don't care.
I'm not doing this to please anyone else, except for myself, which is kinda egocentrical, but since nobody else cares, i also don't care that it is.
Anyway, i have made yet another change to backend of this site, which was previously built on a flatfile php blog system i came up in an afternoon, now i have upgrade to an all-new flatfile php blog system that i have built in an afternoon.
But there are a lot of key changes, and mostly its that this new system is completely open source so you can go there and laugh at my code all you need.
This time, its built entirely using OOP and being modular and expansible enough that i can built upon the top of it, without having to re-build from scratch.
I already have some ideas on how to improve it, but we will see how that goes, let's not get ahead of ourselves.
So, about the code, if i show you the index.php of this very page, this is what you get:
require_once('class.tiblognev.php');
$blog = new tiblognev('tibonev dump of stuff');
$blog->render($_GET['p'] ?? null);
Yes, that is the entire index.php file. Its a very simples, we load a file into memory, instantiate the class, and call the render method, which can take an optional variable, in the form of a slug based on the filename of the post or if that isn't present, it pass a null.
Then the entire page is rendered.
But maybe i am getting ahead of myself, let's first take a look at the entire site file structure:
\posts\*.txt - each file here is a post. \index.php - the file your browser runs. \class.tiblognev.php - the backend engine. \template_page.txt - this is the template of entire page, sans posts. \template_posts.txt - this is the template of the posts, sans page.
As you can see, the engine takes the template_page.txt, look for the space dedicated to the posts, and then build each post based on the template_post.txt, puts all together and renders on the screen.
PHP is extremely fast with these kind of operations, usually this page loads in less than half a sec or under 500ms.
The render method also chooses between iterating all posts or a single post, if a slug (which is just the filename minus extension) is present as a parameter on the render method.
But, you're probably not asking yourself, how did you achieve that speed? Well, fear not, dear reader, for i am about to show you 2 neat tricks:
First one: Caching (insert sarcastic WOW sound here)
private function posts_process(): array {
if($this->posts_cache !== null) {
return $this->posts_cache;
}
...bunch of code..
$this->posts_cache = $posts;
return $posts;
}
Basically if i need to render several posts, my code iterates on the posts only once. because i do the most basic version of a cache known to man. I store the values i need on a variable and call that, and only run the rest of the function if my cache variable is empty.
Genius, right?
And the second trick is: stacking
private function post_style(array $post): string {
$template = $this->load_template($this->template_post);
return strtr($template, [
'%TITLE%' => $post['title'],
'%CONTENT%' => $post['content'],
'%FILENAME%' => $post['slug']
]);
}
Basically PHP allows me to stack the substr function via strtr, which allows me to stack all the replacements i need to, in a single call, making it cleaner and faster.
Now, does anyone care about this? Honestely, most like not, but if you're new to OOP or PHP and want to tackle a project that is easy to do, recreating this blog system might be a fun challenge.
Now, about this CRT effect? This is done entirely in CSS, with CSS Animations.
For the main scanlines, we do this:
.scanlines {
background: repeating-linear-gradient(transparent, transparent 2px, black 3px, black 3px);
background-size: auto 100%;
background-position: 0px 0px;
opacity: 0.5;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
z-index:1000;
padding:0px;
margin:0px;
animation: scanlines-ani infinite 15s linear;
pointer-events: none;
}
@keyframes scanlines-ani {
from { background-position: 0 0; }
to { background-position: 0 100vh; }
}
So we basically created a venetian window, using a repeating-linear-gradient, and then we move it around the screen, at 15s per full motion.
For the upgoing grey line, is pretty much the same thing, but reversed:
@keyframes greyline-ani {
0% { top:100vh; opacity:0.02; }
100% { top:-1vh; }
}
We start at the bottom and go up slowly.
And finally for the glowing text, its a simple, static text-shadow call:
text-shadow: 0 0 5px #eeeeee; /* E E E its in the EEEEEEEEEEEEEE */
And that is it. That is how i did this page, this time. Will i change it in 6 months? There's a really good chance that yes, i will. But who knows? Not me.
Resources:
template_page.txt is avaiable at: here
And the full thing is avaiable here: here
