Blog

React Counter Customizer

Eons ago, I briefly looked into ReactJS, to see what all the hype was about. At the time, I didn’t see much value in it since it didn’t look applicable to the projects that I was working on. Recently, I decided to give it another go. I took a deeper dive this time, and tried making a React-based customizer for my radial Counter JavaScript library.

Read on! “React Counter Customizer”

Running WordPress PHPUnit Tests With Docker

I recently moved my web development workspace from MAMP to LAMP with Docker. The transition was difficult, due to issues with Ruby and RVM on my host machine. Now that it is working, all is well!

When I started tinkering with Docker, my goal was just to see if I could replicate my WordPress development environment. After I did that, I improved it a bit. Now, i’ve suitably compartmentalized each project. Each WordPress project has its own WordPress installation, MySQL server, error logs, plugin and theme directories.

The only thing missing was being able to run unit tests!

Read on! “Running WordPress PHPUnit Tests With Docker”

Ambient Weaver

Ambient Weaver is an ambient sound player for macOS 10.12.2+ and Windows 10. The core mechanics of the player include the ability to create playlists which contain customizable sound tracks. Each track has controls for volume, a starting point, and whether or not the track should repeat. Normal audio players, designed for non-ambient songs, run one track at a time. When those players are used for ambient sounds, there are always momentary breaks in the sound that can break the listener’s concentration. That is the nature of having one playback loop. Ambient Weaver gives each track it’s own loop. This allows for tracks to be overlain in a way that masks the momentary breaks, creating a seamless listening experience.

Read on! “Ambient Weaver”

I Switched From Pixelmator To Affinity Designer, and It’s Awesome!

affinity-designer-1916x1053

On Friday, I dropped $49.99 via the App Store to get the MacOS edition of Serif (Europe) Ltd.’s Affinity Designer. Already, I’m very impressed. Previously I had been using an outdated version of Pixelmator. It was outdated for various reasons, but the point is, it ultimately became unusable. That situation was unfortunate, but understandable.

When it was working normally, Pixelmator was leaps and bounds better than any of the other Adobe alternatives—read, “Inkscape and GIMP”. Pixelmator allowed me to do raster and vector graphic work, without having to sell my soul (and wallet) to Adobe. I’m very grateful for that. However, any mildly complex operations such as working with vector shapes, paths, or masks were very unintuitive.

Oh, and the UX in Affinity Designer is infinitely better. Pixelmator suffered from a plethora of disconnected menus that could cover up the workspace. Affinity Designer’s UI follows the lead of Adobe Illustrator in that the viewport is actually inset. That way the UI outlines the viewport and doesn’t cover up whatever you’re working on. From what I gather the menus are customizable (I didn’t have a reason to do that, so I can’t confirm). Best of all, the viewport isn’t limited by the dimensions of the canvas I’m working on! I can actually move around!

Anyway, I thought I’d share my initial experience with the program. I think that it will be a fantastic edition to my design toolbox. If you’re in a similar situation, Affinity Designer is worth a look.

Basic WordPress Theme

An example of the theme's front page.
The front page!

The Basic theme is exactly what it sounds like. It’s a barebones starter theme built on top of the fantastic Underscores theme (_s). With support for Sass and some build tools that I pieced together, modification is reasonably easy.

Now, I’ve got a launch pad project for simple WordPress site development! Actually, we have a launch pad project for simple WordPress development. I’ve hosted the source code and build tools on Github. You can build the project yourself!

Read on! “Basic WordPress Theme”

JavaScript Radial Counter Library and WordPress

As a follow up to the post I wrote about my HTML5/JavaScript Radial Counter Library, I want to talk about how I am utilizing the library in my current theme. In order to make the library easily reusable throughout the site, I made a shortcode specifically for the counters. More accurately, I made a shortcode for the counters, and a shortcode to wrap the counters. The wrapping shortcode is particularly useful for ensuring that the positioning and styling of the counters works on both desktop and mobile.

Read on! “JavaScript Radial Counter Library and WordPress”

Setting Up GitHub Pages (For Beginners)

I’ve frequently heard questions about getting started with Git and utilizing GitHub pages. Things like, where to start and if there are any good resources to follow. It got to a point where I deemed it worthy of a tutorial! In this video I touch on:

  • installing Git
  • making basic Git configurations
  • creating a GitHub repository
  • pushing to a remote repository from a local one
  • creating a gh-pages branch for project-based hosting (e.g. https://username.github.io/repo)

For non-Mac users, the downloads page on the Git website contains everything necessary to install Git.

HTML5/JavaScript Radial Counter Library

2 yrs
JavaScript
2 yrs
HTML5
2 yrs
Awesomeness

When I started designing my new portfolio theme, I wanted the ability to present my technical skills in a more interesting way. That led me to the idea of counters. I needed the counters to display the amount of time that i’ve worked with a specific language/framework. The one gotcha was, I would have to keep the counters up to date. Thus, I arrived at a design for the counters, which required options for…

  • custom styles
  • custom text
  • self-managed durations

Read on! “HTML5/JavaScript Radial Counter Library”