9 shots added to the photography page and Flickr.

I’ve been working on a revamp of my site! In doing so I’ve been practicing some PHP; one thing I wanted to do was have a randomized image on the homepage that would change every day. Looking around online I didn’t find many drop-in solutions I could just stick on the page, so I pieced together my own; and PHP actually makes it rather simple.

    <?php
        $today = (int)date('Yz');
        srand($today);
    
        $files = glob('photography/*.jpg');
        $file = array_rand($files);
        echo '<a href="[#root#]photography/"><img src="' . $files[$file] . '" alt="Picture of the day" style="border: 3px solid #444"></a>';
    ?>

To explain, $today is set to the current date in the Yz format which is in the form of year and day in the year; for example, if today is 4/6/2020, it would come out to 202097. Tomorrow, it’d be 202098. That is converted from a string into an integer with (int), as it is going to seed PHP’s random number generator with srand(). Otherwise, the output would be random on every refresh.

glob() is then used to get all the jpg files in the photography directory and store that as $files. array_rand() is used to select one item’s index value at random from that array. The filename as $files[$file] is then concatenated and printed into the HTML with echo.

Date Taken/Exif Information

If desired, you can display other information about the image as well later down the page. I’ve done this to show the date the image was taken. This too is fairly simple when you get down to it, provided that your image does have this in its Exif metadata.

<?php
    $exif = exif_read_data($files[$file], 'IFD0');
    $takenDate = strtotime($exif['DateTime']);
    echo date('F j, Y', $takenDate);
?>

exif_read_data() is used to read this information. The DateTime IDF0 attribute is fed into strtotime() so it’s understandable by PHP and then echoed out as a new human-readable format with date(). And that’s about it!

Here’s a place with some more Exif information in case you’re into experimenting. Also check out the PHP documentation.

Photography page has been updated with new shots: new stuff starts on the second row. Here’s a sample:

The first version of dotcomboom (the site) was brought upon the world in March 2018.

May saw the iconic(?) graph paper look (something I “borrowed” from the earliest site of an old acquaintance from earlier long-winded group stuff back in 2016 and 2017) ditched in favor of some public domain photography from a content producer I used to watch, and shortly there-after run through a program to make it all pixel-y. Also introduced was a project I had done in node.js called Neohitz, hosted on a site called Glitch, that sought to replace the image-based hit counters and modified date indicators everyone else on my old webhost was using with something more “modern”; that is, if you consider document.write('blah') modern. The jukebox also got removed by the 11th.

Some work was done separating the main navigation from the more minor stuff.

This stuck around until June, when it was tossed for no CSS at all, and very(!) shortly after that, an orange take, which also got restyled shortly afterward.

July saw the introduction of my personal favorite layout of this time, one that I’d use elements for many months to come. I’ll note that this was around the time I began to write and use what would become AutoSite Legacy, then just called AutoSite.

Going into October, I pulled a 180 and moved the whole site to a Bootstrap template for the meme.

Later in October, I came back with a new version of the previous layout. The banner at the top cycled randomly through screenshots of The Powder Toy with some JavaScript.

This would be the final layout on my old web host.

The Dreamhost Era

dotcomboom.somnolescent.net launched as The Snake Shack (with a rather embarassing intro text) in December. This version of the site stayed until March or so and can still be accessed here if you’re brave enough.

July saw a comeback of the earlier layout with a new theme, featuring a hue-adjusted version of the old banner and Hypercard snakes (graciously ripped by mariteaux).

This lasted through October, when the site got another overhaul with the water.css framework.

That brings us to today:

Pages have been added, and things have been tweaked with since, with the blog being formally launched in late January. As for the future? Anything can happen, so keep your eyes peeled.

Here’s a collage I did of the sites in the xxiivv webring. Screenshots were taken and downloaded using this script I hacked up:

import requests
import json
import time

with open("sites.json", "r") as read_file:
    sites = json.load(read_file)
    
    x = -1
    for site in sites:
        x += 1
        print(x, site['url'])
        try:
            r = requests.get("http://image.thum.io/get/noanimate/" + site['url'])
        except:
            time.sleep(2)
            r = requests.get("http://image.thum.io/get/noanimate/" + site['url'])
        title = ""
        try:
            title = "_" + site['title'].replace('\\', '')
        except:
            pass
            
        with open('images/' + str(x) + title + '.png', 'wb') as f:
            f.write(r.content)

They were then fed into this collage maker script to produce the output. Some sites displayed as blank; the only way to work around that would be to use thum.io‘s /wait/ feature; unfortunately that’s only for their registered plans. It still came out neat and I now know of a quick way to make collages.

Escaping attributes and conditionals

I’ve implemented a new thing that’ll be coming to RC3 pertaining to escaping attributes and conditionals. It’s ultra-helpful for documentation, as I have had issues before in trying to keep samples from being processed by Apricot. To escape, you’d add $ to the start of it.

$[#content#]
$[path=index.md]Escaped conditional[/path=]

To compare, here’s what you would’ve had to do before:

<span>&#91;</span>#root#]

Ich.

4/6/2020 – hahaha future dcb here! this broke my photography page that uses php so I removed this. sorry!

Modified dates

Yes, modified dates in AutoSite now! [#modified#] will spit out a date according to your system locale settings. I’ve been using this currently on my site.

Multiple display bug fix

There was a bug where if you had AutoSite open on a second monitor (or even just a higher-res display) and closed it, then reopened AutoSite where that point was not a part of your display setup, the window would be stuck off-screen with no easy way to bring it over. This drove me mad so I fixed it. 8)

Cheat!

Did some spring cleaning on the blog, including an upgrade to WordPress 5.4 (featuring a bunch of Gutenberg improvements, bless them), getting rid of some unused themes and a new URL: /web/dcb_v4/patio, as you may have noticed. If you linked to /blog beforehand, no worries as I’ve put a simple redirect in my .htaccess file.

Redirect 301 /blog /patio

Just know that this URL will be used for the foreseeable future, and updating links could be a good idea if I accidentally wipe .htaccess or something.

Renoise demo from the 23rd that’s certainly less improvised than the last one, more constructed. I would’ve liked to clean it up some more, but this will do for now.

I started reworking w2krepo’s styling back when I switched subdomains in February; finally I’ve come back to it and finished it up.

That list you see is actually dynamically generated with some PHP code I pulled together from stuff off the net.

<table>
<?php
$fileList = glob('*');
foreach($fileList as $filename){
    //Use the is_dir function to make sure that it is a directory.
    if(is_dir($filename) and ($filename != 'icons') and ($filename != 'blurbs')){
	echo '<tr><td style="min-width: 32px;">';
        echo '<a href="', $filename, '/"><img src="icons/', $filename, '.gif" width="32" height="32"></a>';
	echo '</td><td>';
        echo '<a href="', $filename, '/">', $filename, '</a>';
	echo '<br>', file_get_contents('blurbs/' . $filename . '.txt');
	echo '</td></tr>'; 
    }   
}
?>
</table>
<?php
$fileList = glob('*.7z');
foreach($fileList as $filename){
    //Use the is_file function to make sure that it is not a directory.
    if(is_file($filename)){
        echo '<a href="', $filename, '">', $filename, '</a><br>'; 
    }   
}
?>

The small blurbs I use as category descriptions are all stored in this folder. Those get written out through the script.

As for styling the directory indices, it’s pretty basic. I use a .htaccess file so my web server uses header and footer .html files.

<IfModule mod_autoindex.c>
	Options +Indexes
    	IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble
	IndexIgnore header.html footer.html .htaccess index.css vduheader.png
	HeaderName header.html
	ReadmeName footer.html
	
	AddDescription "<span>Executable</span>" .exe
</IfModule>

From there, each folder has a header.html and footer.html file. header.html goes like this:

<!doctype html>
<html>
	<head>
		<title>Productivity</title>
		<link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
	</head>
	<body>
		<h1>Productivity</h1>

And footer.html:

                (I could put a readme here if need be)
	</body>
</html>

Although I would have liked to use one header.html and one footer.html for all of them (using some kind of tags similar to my own project AutoSite) this will work, at least in the interim. Things I could do in the future are adding more file descriptions to the .htaccess or put more information in the footers (possibly contact and contributing information, though that could be a hassle to update for each folder so another time, maybe).

Visit here, or here for HTTP.