Skip to content.

A Note About Website Navigation

Skip to main menu.

For users of screen readers, depending on the screen resolution, the two checkboxes are for opening and closing the side menus that appear to the left and right side of the screen. This is designed both for large screens and for mobile devices with a touch screen. Checking either the main menu or sidebar checkboxes causes the menu to open from the left or right side of the screen, respectively. Clearing the checkox in either the main menu or sidebar closes the menu. The checkboxes are visible to screen readers such as JAWS and NVDA for Windows, Voiceover for Mac, and Orca screen reader for Linux. When a screen reader says "clickable" for both main menu and sidebar, that is for the respective checkboxes. End of explaination.

Category: Announcements

When Uploading A Screenshot of a Website, Be Aware Of Your Browser Tabs

When uploading a screenshot of your website (or someone else’s website), make sure your email address (or portion of your email address) is not exposed when taking a screenshot. I uploaded my screenshot of pagination for my website and a part of my email address has been exposed over the web and I had to retake the screenshot without it. If you have a webmail opened in one browser tab such as GMail/Google Workspace, your browser tab will look similar to this:

Inbox (5): yourname(at)your…

That tab is exposed by the <title> tag inside a website. Here’s what I mean:

    <title>Inbox (5): yourname(at)yourdomainname(dot)com</title>
    <h1>Your E-Mail Provider</h1>
    <p>Your email messages go here.</p>

Instead of “@”, I use “(at)” so that spam harvesters and bots won’t harvest any email addresses in my website; however, I won’t give away any of my 170+ email addresses at all. Pay special attention to the title of web pages that you currently have opened. By “title,” I meant your browser tabs. My advice is do not leave anything sensitive unattended. I hope I can be of help to everyone. Be safe out there in the web!

ClassicPress and Custom CMS For My Website

Transitioning From Custom CMS To ClassicPress

I have rebuilt my website using ClassicPress instead of a custom-built Content Management System (CMS for short). The reason for why I chose ClassicPress is simplicity. However, simplicity comes with compromises regarding the security and underlying control of my website such as not being able to separate the administration panel from the core CMS. I have first built my website with my own theme in mind due to my experience with HTML, CSS, JavaScript, and PHP. I built my own admin panel from scratch as well, although it’s very tedious and it took me a lot of time. Even though building my admin panel is tedious, mine turned out pretty well–well, almost. I wanted to write PHP code that would synchronize my changes from hte local database to my production database, but I did not put my time into it. So, while building my CMS from scratch is fun, at the end of the day, ClassicPress simplifies the implementation of features for me such as search, categories, and archive for listing posts by month.

About my website that I built with a custom CMS, I focused in the paradigm called Model-View-Controller, or MVC for short. I will get into more detail at a later time as I want to keep my blog article short. However, I can show you the images for those who have eyesight.

My blog written with custom CMS in mind.
My blog written with custom CMS in mind.

My admin panel for my website.
An image showing my administration panel that shows a list of tags for each category.

I designed my administration panel in such a way that without a client certificate, I cannot login for security reasons. Plus, no one can log into my administration panel within my production website, but because I switched to ClassicPress, anyone with my username and password can or else do a brute-force attack against my website’s admin dashboard. And plus, remember when I mentioned that I can’t separate the ClassicPress Admin Dashboard from my website? That’s one of the compromises I have to make. Plus, I would also lose my ability to associate tags with one or more categories. I also can’t trust the security of underlying code that makes a connection to the database. I will have to update ClassicPress to ensure the vulnerabilities have been patched.

Custom CMS: Built With Security In Mind

I’m not going to show code or anything; however, I want to tell you the details regarding how I wrote my own CMS with security in mind. First, no website is secure, so there will always be vulnerabilities, including vulnerabilities in a web server. I do a lot of abstraction between PHP code and the database server. To do that, I make use of prepared statements in PHP that separates data (“testing123”) from the query (“‘; DROP myTable;–“). In the database side, I use stored procedures that execute a sequence of commands needed to perform tasks within the database server. Inside a stored procedure, I wrote a prepared statement, pass along values, and execute the command. In other words, I can put “CALL spShowBlogPosts” inside the PHP’s prepare() function, pass in the values as parameters, and call execute() in PHP. And the database server will do the rest and even return the result back to the PHP application! If you are interested, have a read about stored procedures.

And what about something like this for Twitter in ClassicPress that I used in my custom CMS? I have created fields for description and thumbnail in the database.

  <meta charset="utf-8" lang="en" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="Grayson Peddie" />
  <?php if($isHome) { ?>
  <title>Blog - Grayson Peddie</title>
  <meta name="description" content="My home page for my blog." />
  <meta name="twitter:title" content="Grayson Peddie's Blog Site" />
  <meta name="twitter:description" content="My home page for my blog." />
  <meta name="twitter:image" content="" />
  <meta name="twitter:image:alt" content="A photo of Grayson Peddie." />
  <?php } else if($isCategory) { ?>
  <title>Category: <?=$data[1][0]["CategoryName"] ?> - Grayson Peddie</title>
  <meta name="description" content="List of blog articles for the category
    "<?=$data[1][0]['CategoryName'] ?>." <?=$data[1][0]['CategoryDescription'] ?>" />
  <meta name="twitter:title" content="Category: <?=$data[1][0]['CategoryName'] ?>" />
  <meta name="twitter:description" content="<?=$data[1][0]['CategoryDescription'] ?>" />
  <meta name="twitter:image" content="" />
  <meta name="twitter:image:alt" content="A photo of Grayson Peddie." />
  <?php } else if($isTag) { ?>
  <title>Tag: <?=$data[1][0]["TagName"] ?> - Grayson Peddie</title>
  <meta name="description" content="List of blog articles for the tag
    "<?=$data[1][0]['TagName'] ?>"." />
  <meta name="twitter:title" content="Tag: <?=$data[1][0]['TagName'] ?>" />
  <meta name="twitter:description" content="List of blog articles for <?=$data[1][0]['TagName'] ?>" />
  <meta name="twitter:image" content="" />
  <meta name="twitter:image:alt" content="A photo of Grayson Peddie." />
  <?php } else if($isSlug) { ?>
  <title><?=$data[1]['BlogTitle'] ?> - Grayson Peddie</title>
  <meta name="description" content="<?=$data[1]['BlogDescription'] ?>" />
  <meta name="twitter:title" content="<?=$data[1]['BlogTitle'] ?>" />
  <meta name="twitter:description" content="<?=$data[1]['BlogDescription'] ?>" />
  <?php if(isset($data[1]["BlogShowImage"]) && $data[1]['BlogShowImage']) { ?>
  <meta name="twitter:image" content="<?=$data[1]['BlogImage'] ?>" />
  <meta name="twitter:image:alt" content="<?=$data[1]['BlogImageTitle'] ?>" />
  <?php } else { ?>
  <meta name="twitter:image" content="" />
  <meta name="twitter:image:alt" content="A photo of Grayson Peddie." />
  <?php } ?>
  <?php } ?>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@graysonpeddie" />
  <meta name="twitter:creator" content="@graysonpeddie" />
  <link rel="preload stylesheet" as="style" href="/res/css/site.css" />
  <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 64x64" type="image/png">

The functions in PHP are quite similar to WordPress/ClassicPress’s functions such as is_single(), is_category(), etc. I even have a boolean variable for checking if the image for the thumbnail will be shown in Twitter. Maybe I might check out some Twitter plugins but I won’t install it unless it is absolutely necessary.

Why ClassicPress? Why not WordPress?

With new unwanted features comes new security vulnerabilities. Even though it’s important to keep WordPress up-to-date, that “up-to-date” means new features that I have no plans on using it. That’s why I’m happy that the developers of ClassicPress are taking a “security-first approach.” Plus, I applaud the ClassicPress team for keeping bloat minimal by removing features and plugins that I don’t care to use as part of my website. If you are interested, you can read the roadmap for ClassicPress 1 and 2. ClassicPress 2 is still in development and I’m very optimistic about what the ClassicPress 2 will bring. Hopefully I won’t have to modify the PHP code for my custom theme, but if I have to, I would hope the changes will be minimal.

As for enabling comments, you can @ me in Twitter. My Twitter handle is @graysonpeddie. I won’t enable comments unless I want comment spam in my website (and seriously, I don’t). I might enable comments in articles if I get a lot of traffic. But hey, thanks for checking out my website. Hopefully I won’t abandon my website just because I don’t have the time to write PHP code for synchronizing my development database with my production database. Writing PHP code is hard! 🙂