I spend a heavy amount of my day copy/pasting CLI commands, as such I didn’t want the path or repo status in my terminal, but did want “$” to help indicate it’s a terminal command. Not finding something minimal on the Oh My ZSH themes, I created this simple one:

It’s simply $, nothing else. No bells, no whistles.

Convert Alfred snippets (.json) to Espanso matches (.yaml) »

Moving to Linux this month (Pop_OS to be specific), the biggest change was leaving Alfred behind. While almost every other tool or app had a nearly exact replacement, I could not find any launchers on Linux that had the huge number of power user features Alfred has. However, I found lots of amazing small apps that do just one feature and do it well.

One of those apps was Espanso, a light weight CLI focused text expander. Using Alfred on macOS, the global snippets where a big part of my workflow. After a bit of reading, on Linux I stumbled on Espanso which seems like one of the best text expanders available. A quick browse of the well written and maintained documentation and it’s clear why.

The UX for the actual text expanding was the exact same, however the setup was a bit different between the two apps. There’s no simple way to just import Alfred snippets into Espanso, so a bit of data massaging was required.

To do this I first exported Alfred snippets (either by browsing Alfreds preferences folder, or Exporting the snippets manually in Alfred > Features > Snippets > Export), I then jotted up and ran this script to convert Alfreds method of storing the snippets in .json to Espanso’s .yaml format, & tweaking some minor differences with cursor and clipboard variables:

A pretty simple difference and straight forward result. Then it was just copy & paste of the output to the bottom of ~/.config/espanso/default.yaml

If this doesn’t work and Espanso complains of errors, try opening default.yaml in VSCode or another editor and add YAML Syntax extension or similar. This should flag any syntax errors for manual resolving. In my case one or two regex patterns I have saved were just a bit to regex’y for my simple str_replace()’s.

All and all it wasn’t a heavy lift, & I managed to wrangle all 388 some snippets of mine over.

Troubleshooting xdebug setup on VVV with VS Code »

Some tips for troubleshooting setting up xdebug on VVV while using VSCode and Felix Becker’s PHP Debug extension and BrianGilbert_‘s Xdebug Helper for Firefox add-on.

Ensure xdebug is turned on within vvv

You may check xdebug status by taking a peak at your servers http://vvv.test/phpinfo/ page. If not on, via https://github.com/Varying-Vagrant-Vagrants/VVV/wiki/Code-Debugging we can toggle it on by accessing the virtual machine via ssh, then running a command that will turn xdebug on and restart PHP:

$ cd ~/your/location/for/vvv/
$ vagrant ssh
$ /vagrant/config/homebin/xdebug_on

The xdebug_on command is supposed to work without the full path, but I haven’t much luck with that. As a second saver, I store this full path in my text expanded since every time the machine is restarted xdebug being on does not persist and it will need to be manually turned on. A bash_alias entry could be made as well.

Ensure the browser extension is turned on

Yes, simple, but often forgotten.

Ensure you’ve started debugging in VS Code

Again, yes, simple, but often forgotten.

Ensure VVV is up to date

Older versions of vvv have compatibility issues with xdebug and php. Ensure you’re running the latest version of vvv, that vagrant itself is up to date, and that you’re using the latest version of php.

Turn off “Everything” breaks

Sometimes xdebug works while setting it up, VSCode pops up, but it stops on a breakpoint that isn’t the one you specified, it’s a random file from your app. This is an error that was picked up and xdebug stoped on because the default VSCode extension has it specified to break on “everything”. Unselect this in the Debug sidebar:

Check the xdebug profile is correct

Via the debug sidebar (shift+cmd+d), we’ll view our xdebug configuration file. Here’s an example of a WordPress plugin delete-thumbnails and the path I used

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/srv/www/vvv-vip/public_html/wp-content/plugins/delete-thumbnails": "${workspaceFolder}"
            },
        }
    ]
}

Two important notes:

  • VVV has two initial paths to get to your sites, /srv/and /vagrant/, the latter is a symbolic link which xdebug does not understand, you must use /srv/
  • Other tutorials may say to use ${workspaceRoot}, this variable is deprecated in favor of ${workspaceFolder}

Try a breakpoint outside of your current script

We usually want our breakpoints on what we’re working on, and we’re frustrated when xdebug doesn’t pick up on the breakpoint, so we dig around our config to check what’s wrong. Let’s first make sure that our desired code is actually running and capable of breakpointing, after all, the code not running might be why we’re firing up xdebug!

Add a breakpoint at the root of your application, somewhere you know runs 100% for sure. In WordPress, this will often be in either WordPress’ /index.php file, or the primary file in your current theme or plugin. For this plugin I’m working on, I checked that the plugin is activated, and I’ve placed a breakpoints on a fake var on the main fire which I know for sure loads:

On Remote Servers: Check That Your Port is Open

Ensure you are connected to the server with an the posted specified open, & any port forwarding for the remote address is set in ~/.ssh/config

Is your VSCode the nightly build?

I’ve heard of users being unable to run xdebug while using their beta releases. Best to always use the stable releases.

Tabbing Through Links in FireFox »

I migrated from Chrome to Firefox in a support of Open Source software and because all other browsers have caught up to Chrome in terms of quality, performance, tools, and integrations.

Nothing much has been different except by default you cannot tab through links on a webpage! I’m a huge proponent of using my mouse/trackpad as little as possible, so this was a deal breaker for me.

Luckily, there’s a hidden setting in Firefox, visit about:config in the address bar, right click to “Add New » Integer”, create a key of accessibility.tabfocus and set the value to 7.

You should now be able to tab through all your links, which saves so much time on Google and other straight forward sites.


While reviewing this, you can also adjust how the TAB key behaves in dialog boxes. Checkout System Preferences » Keyboard » Shortcuts » Full Keyboard Access.

Sticky Buttons Within A Section »

Sticky Buttons Within A Section

Common practices for sticking elements weren’t working for me: position: sticky and stickybits. I didn’t want to use jQuery either, normally I’d reach to use waypoints.inview. So I wrote my own in vanilla Javascript.

The nice part is it was much easier to do a sticky bottom. Scroll to element, bottom of viewport hits bottom of to-be-stuck element, and carries it down until the end of its parent element.

https://codepen.io/davidsword/pen/OEZMay

This is a great feature for section-specific call to actions.

Every Image URL Filter For WordPress, Front & Back End »

I had a project where every single media library image URL needed to be filtered, backend and front end. As far as I’ve found these were the filters for every area:

The myplugin_filter_html_image_urls() function peals out images with regex from areas where it’s not just the URL being sent. This function may require verification of the current domain incase bad practices of using external images is being done.

TinyPNG & TinyJPG in Command Line »

tinypng-cli is an amazing tool to compress an image, or a directory of images with a single command. It’s beautiful for fixing the few images that a normal compressors miss or don’t do a good job on, or the images that slip between the cracks.

A big part of my day is ensuring all my sites have very high Google Page Speed scores, which are heavily factored by images alone. I sure I wish I had known about this tool years sooner, would of saved me hours of manually work.

Really simple to setup:

  • Get a API key from TinyPNG (free tier: 500 image cap)
  • Have npm installed on your server
  • Install tinypng-cli npm install -g tinypng-cli
  • Start compressing tinypng demo.png -k #####

Easiest way to Backup WordPress to S3 »

I explored and tested a bunch of WordPress plugins for S3 – they’re excellent in their own right, but I was bothered by the bloat & weight on PHP for the backup. Don’t get me wrong, I understand it’s a complex undertaking when you’re creating a backup/restore UI, working off wp-cron, creating many features that benefit lots of people, etc. But I didn’t need any of that – I just need my server backed up without dealing with anything.

Quick search of  Github lead me to a beautiful shell script that uses wp-cli and awscli to preform the backups. Here’s the kicker: it takes less than 40 lines of code. I modified it a bit for my needs and it works better than I thought possible:

Amazing. Runs with sh backup.sh thrown into crontab. Amazing.

Gutenberg Presentation »

Gutenberg Presentation

An Introduction to Gutenberg

Wednesday, Apr 11, 2018, 6:00 PM

Vernon Library
2800 – 30th Ave Vernon, BC

23 WordPress Enthusiasts Went

Gutenberg will be replacing the text editor on your WordPress website, prepare yourself! Learn all about WordPress’s upcoming editor. In this meetup we’ll cover: – the reasons for Gutenberg’s creation – it’s ease of use and the problems it solves – the current and future state of themes in relation to Gutenberg – a sneak peak at what plugins will s…

Check out this Meetup →

Gutenberg will be replacing the text editor on your WordPress website, prepare yourself!

Learn all about WordPress’s upcoming editor. In this meetup we’ll cover:

  • the reasons for Gutenberg’s creation
  • it’s ease of use and the problems it solves
  • the current and future state of themes in relation to Gutenberg
  • a sneak peak at what plugins will soon look like in Gutenberg
  • what this all means for your WordPress site
  • what this all means for the future of WordPress
  • how Gutenberg will become a full fledged Page Builder
  • developers: overview of logic, plus tips & tools for writing blocks

Not required but feel free to bring along your laptop, there’s hands on tools to test out Gutenberg (without having to install Gutenberg on your site [but we’ll cover that too])

Followed by an open Q&A about anything and everything WordPress.

Update: slides https://io.davidsword.ca/201804_gutenberg_presentation.pdf