Dark Mode Twenty Sixteen

I decided I wanted to have a dark mode on this site. It’s a nice feature, and with some CSS can be made to auto change based on the user preferences—meaning you will only see it if your computer / phone is in dark mode.

The theme I use is Twenty Sixteen, which I have previously modified for some changes to typography.

The task, similar to to the typography change, started by searching through the CSS file to find any reference to color. I then took those references and organized them by what color they were using.

The pallet turned out to be 5 primary colors, two accent ones (which were used as inverses of each other). I hunted for colors to use and put together a dark theme that looks like this:

screenshot of this website with the dark mode theme active, background is black and dark grey, words are white and blue

I used a simple media query to allow the site to change with the user preferences:

@media screen and (prefers-color-scheme: dark)

There was one issue I found. Twenty Sixteen has color customizations that load stylesheets at the bottom of the header. I tried a few things to get the dark mode css to load after that, which would mean both were working, but couldn’t get it to work.

I used the functions.php file to remove both the loaded CSS and the options from the customizer to prevent any issues. I plan to figure this one out so modifications to ‘light’ mode will work with ‘dark’ mode.

I did make an option pane to let you switch which dark pallet you’d like to use. Alpenglow is a theme for Firefox with a rich purple pallet, and I wanted to see if I could make something similar for this and have the option to change back and forth if I need to (spoiler, it worked).

Continue reading “Dark Mode Twenty Sixteen”

Sometimes, the Beginning is the best place to Continue

I’ve been taking an online course on CSS that starts from the basics.

My original ‘course’ in CSS was on the job training as we converted a site from tables to CSS divs somewhere in the summer of 2000.

A lot has changed in the world of web programming since the dot-com boom when I was doing it professionally (well, as professionally as any of us were, I suppose), and while I still make web things, from WordPress plugins and themes to even dabbling in React.js and Svelte, it’s not my profession anymore. This means that while I’m dipping my toes back in everyone in a while—scraping through Google searches to find the answers to my questions—I’m not active enough in the space to catch up by working.

That was how I learned these things, programming Perl, then PHP, adding JavaScript to have mouse-overs. Tables for layout, and I’m going to admit here, in public, that there are days I wish we went back to tables for layout. I learned CSS ‘real-time’ as we updated the site from tables, hard coded styles and background images to a more fluid CSS layout over the summer.

The thing is this: sometimes the best way to learn is to start from the beginning. Sure, I know everything in the first couple lessons, but it wasn’t long before something new came out. A new term, a new phrase, a new best practice.

I know CSS. But I learned it then and patch-worked myself through updates and improvements throughout these years. I knew CSS, and even though I still use it often, the foundation is based on the lessons learned, right and wrong, all those years ago. At some point… at this point, the best way to continue learning is to start over.

Because it is not just specs and code that has changed over the years, but vocabulary, best practices, formatting and naming conventions (not that we had naming conventions in 1999).

This makes a basic course a refresher and a new foundation to build on from here. Don’t be afraid or prideful to take a step back and go over the basics once again.

On Open Source and Syncing

I’ve been wanting to dip my toes into the open source world for a long time. I certainly have used open source projects for a long time. I was an active supporter of NeoOffice, the OpenOffice.org port for Mac, helping to write documentation, and answering support questions. It was fun.

This time I am the one writing the code. This is my first project, but from the looks of my hard drive this won’t be my last.

Introducing sync.applescript

Makes it sound like something spectacular, no? This one is for you Mac users who want to have files backed up / synced onto a thumb drive. It is designed to be run from the destination location and sync files found elsewhere.

So, for example, I keep a copy on a thumb drive. I plug in the drive, run the application and it updates folders on the drive to match the folders on my computer—updating the changed files and deleting the deleted files.

It is a one-way sync, updating directory with any changes in directory, filling a backup role, rather than a true sync.

It uses AppleScript to run a command line utility call rsync to do so.

I’ve set it up on GitHub for anyone who wants it.

https://github.com/jakeosx/sync-applescript

How Do I use that?

Go to the GitHub page, download the AppleScript file, put it in the directory you want your files to be copied to (so I put mine on the thumb drive). Read the README. It has all the answers you want!

Basically, you add in the path to the folders you want to copy, and tell it if your drive is FAT32/exFAT or no.

Seriously, I spent a lot of time on that README, and it should have all the answers!

It is also released under the GPL3, so feel free to copy, use, pass it around, modify as you wish as per that license!

WARNING

NEVER TEST SHIT YOU FIND ON THE INTERNET ON LIVE DATA! Try this out with a copied folder to make sure you get it. It isn’t set up to delete anything on the origin folder, but will on your synced folder. Play with a few files and see how it works before you set it up for real.

BACK UP YOUR SHIT. ALL OF IT. And yes, that is the intent of this program, but still.