Author: Peter Knight

WordPress and Vue Guides and Resources

Vue is a very attractive framework for building interfaces that has rapidly become an alternative to other popular tools like React & Angular. It’s lean, it’s fast and it’s actually fun to use while making code easier to read and reason with. It’s beginner friendly while also providing every foundation needed to build out the most complex of apps and websites. It’s great for individual coders but also allows works well in large teams of collaborators.

Why Vue Works Great in WordPress Projects

In a WordPress setting Vue.js is a suitable solution for small pieces of functionality as well as entire themes because it is a small payload. Vue uses html templates that are easy to understand. Unlike some other frameworks, you don’t need tooling to get started. You can include Vue on your page and start creating components without ever touching webpack, node.js or configuring a transpiler without any noticeable dip in performance. Those tools are only required if you want to take the development approach up a notch.

Vue compares favourably to other ways of building interfaces. If you’re just using plain javascript or leveraging jQuery, Vue will help you write less onerous code that is more efficient. More sophisticated tools such as React and Angular have arguably a higher barrier to entry by comparison. Working with css and creating transitions also is easier in Vue. Vue allows you to work with ‘single file components’ where you can easily organize and reason with the different parts that make up a component; javascript logic, html templating and css are kept separate, yet come together in the same file. If you already have mastered any one of these languages, working with Vue may feel much more comfortable to you than working with similar components written for other frameworks.

Another benefit of Vue is that any additional tools you might choose to compliment Vue with are pretty easy to chose. For additional state management help you can add on Vuex, for routing there is vue-router and vue-resource provides a bunch of goodies when making web requests. You don’t have to endlessly research and compare the merits of different competing 3rd party projects like is the case in the React ecosystem (a disadvantage of React’s more sprawling ecosystem).

Learning Vue and Complimentary Tools

The home of the Vue project is noted for its excellence and is the best place to learn the ins and outs of Vue, go visit it here:

Guide to Vue.js

Vuex is a complimentary library that is useful for non-trivial projects that use Vue that you might like. It also comes with excellent documentation from the project’s creator:

What is Vuex

Video tutorials:

Vue.js 2 – Getting Started is a free video series on Youtube by @Maxedapps. If you like the instructor, he also has a paid course on Udemy that is excellent value.

Vue.js 2.0 in 60 minutes by Traversy Media.

Learn Vue2: Step by Step is a free(?) video series on laracasts.

Books:

Learning Vue.js 2 by Olga Filipova

Vue.js 2 Cookbook by Andrea Passaglia

Vue.js 2 Basics: Learn the basics of vue.js and earn your blackbelt by Tony Lea

WordPress Guides & Tutorials

Tutorials by Paulund that cover Vue usage in WordPress.

Josh Pollock wrote one of the first Vue tutorials for WordPress over at TorqueMag, describing how to work with Vue & the REST API.

WordPress Projects Using Vue

Here is a Krogsgard codepen with a simple demo for displaying WordPress posts with Vue.

Riad has set up a limited experiment for Gutenberg the WordPress editor project which uses Vue instead of React.

Bill Stavroulakis has worked on an offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps.

Wyvern provides WordPress theme boiler plate for a Vue project.

RtCamp have created Vue Theme, a starter theme which uses Vue as the basis.

Configuring RxDB for Nuxt+Electron using SQLITE3

RxDB is a tool for setting up a reactive database which in turn uses PouchDB, which in turn offers a variety of adapters that can build different types of databases with solutions like indexeddb and websql. It wasn’t altogether clear to me whether it would work nicely in an Electron app, and a nuxt.js driven one at that. Installation was a right nightmare.

To get setup you probably want to use sqlite / the websql adapter in pouchdb/RxDB. This involves configuring node-gyp and a bunch of dependencies. It won’t run properly out of the box until you tailor it to the version of electron you are running. To get sqlite3 running you will need a bunch of other dependencies installed as well, such as python 2.7. On Windows the most convenient way to do is to install windows-build-tools.

Here are some helpful tips if you have trouble installing windows build tools

If you get errors like “electron-v1.3-win32-x64\node_sqlite3.node module missing” you can try performing the manual steps outlined here and here. The important bit is that you need to tie your sqlite3 package to the specific version of electron that you have running in your project.

I also was getting webpack errors (unexpected character # at 1:0) relating to js files that open with a # hash/shebang directive. To fix that you can install the shebang loader and run it on the js files (like this) in question as a loader in your webpack configuration. In a nuxt project you configure your webpack config modifications in the nuxt.config.js file!

If you fail to get things running like I did for 3 days (until I got it working), there are alternatives like lowdb, nedb or realm but it really depends on what kind of setup you need in your project.

Update

So it turns out the hardest part of setting up RxDB with sqlite3 is due to webpack not working well with native add-ons. There are a whole slew of build/parsing errors you will encounter by the dependencies that are introduced via node-gyp, node-pre-gyp and sqlite3. The errors are very similar to ones mentioned in this webpack related thread. Some examples:

SyntaxError: Unexpected character '#' (1:0)
the request of a dependency is an expression
Module not found: Error: Cannot resolve module 'node-gyp'
node-pre-gyp/~/tar/tar.js
Module build failed: SyntaxError: Invalid number (108:10)

Workaround

Because nuxt.js uses a SSR approach you’re kind of stuck with webpack for all your components. However, RxDB can work just fine with sqlite3 (via the pouchdb-node-websql-adapter) on the client. This offers one way of working around webpack: just load up RxDB as a script asset on the client and access it inside a Vue instance. You can configure a header script in your nuxt.config.js file. You may want to set webSecurity to false to be able to load the script as a local file.

Advanced Guides & Resources Dealing with the Customizer API in WordPress

The customizer is one of the newest and most fast developing areas in WordPress. It’s also one of the tougher APIs to code for because there are a lot of moving parts and to get the most out of it you really need to be proficient with the javascript based API as well as the PHP based API. Here is an evolving list of resources that go beyond the Codex pages to help developers out as they build out their own customizer functionality.

Code Examples For Working With the Customizer API by the Theme Review Team

Various examples of working with the Customize API, such as creating simple and advanced panels/sections/controls/settings. But it’s mostly PHP and doesn’t touch much on the client side of things.

Code Example For Creating a Postmeta Based Customizer Setting

This is a working example of a postmeta based customizer setting by Weston Ruter. Note that some of this code won’t transfer seamlessly to, say a custom post type scenario without some adjustments, because it hardcodes for a post type of post.

The Complete Guide to the WordPress Theme Customizer

Daniel Pataki does a good job walking through a more complete tour of what you might be able to accomplish with JS driven logic.

Dependently-Contextual Customizer Controls

Weston Ruter guides you on creating Customizer controls that instantly toggle on or off depending on state using client-side logic.

Customizer JavaScript APIs: The Previewer

This is an excellent little tutorial that shows you how to interact with customizer controls programmatically by actions triggered on the preview page.

Resetting the Customizer to a Blank Slate

A useful starting point if you want to create a dedicated customizer setup that is separate from the default experience.

Customizer tutorials and documentation

An older post by Justin Tadlock grouping some guides and articles on the customizer

And lastly two streams of resources of new guides and updates on the customizer are here:

XWP’s Make Blog Covering The Customizer

And the Make blog covering the customizer on WordPress.org:

Make Blog posts Tagged with Customizer

How to commit an existing local project into Bitbucket with SourceTree

If you decide you want to commit a project you have hosted on your machine into BitBucket and you’re using Sourcetree to manage it, you’ll find that there is no straightforward way to do that. When you try to create a new Repo inside Sourcetree, it demands that the project starts in a new, empty folder. There is no option to setup a new repo from existing files. This means it’s actually stupidly impossible to commit existing project files into a fresh repository in one smooth operation.

People have posted alternative ways of getting around this but the simplest way to do it goes like this:

  1. Create a repo inside BitBucket
  2. Create a new folder on your machine which will act as a placeholder
  3. In SourceTree go through the new repository dialogs and link it to the repo on Bitbucket and the folder you created in step 2.
  4. After completing step 3 there will be a .git folder in your placeholder folder, move it to where you actual project files exist
  5. SourceTree will automatically figure out that the folder was moved, you can delete this bookmark
  6. Re-add the project by dragging the folder containing your project files and .git folder into SourceTree
  7. Now you can commit your files into BitBucket from SourceTree

It’s the easiest way because it takes advantage of the fact that .git folders can be easily moved without messing things up in SourceTree.

Why anybody doing computer work should use gaming equipment

The many benefits of hotkeys

I’ve always been keen on hotkeys as they help you get stuff done faster as well reduce the amount of friction you get from having to do repetitive operations. It’s a huge time saver. These wins you get with hotkeys also compound over time to make those few seconds saved per operation grow into hours. And last but not least, when you are in the zone with your writing or your designing, your drawing or your programming, you want to stay in the flow! Hotkeys help you stay in the flow by reducing the amount of time navigating the screen, typing, searching for what you need and contorting your fingers.

Keyboards and mice with programmable keys

So I’ve always paid attention to input devices that provide extra keys, but for some strange reason regular keyboards aimed at those doing computer work rarely come outfitted with a meaningful amount of programmable keys. But hardware companies do cater to gamers and they happen to love hotkeys. For this reason, if you want to maximize the utility you can get from hotkeys, you are best looking at some gaming equipment. These devices may look designed for a younger audience but they are more than equipped to deal with a professional workload. They are designed for precision, endurance, responsiveness and programmability on an order of magnitude more than regular consumer products. In other words, if you do serious computer work, use gaming equipment.

Most people when they think of programmable keys, they think of keyboards and maybe a mouse with a few extra keys. But my Perdition mouse has 18 programmable keys and has made the most gains for me.

Example use cases & a magical mouse button recipe

Hotkeys can do a variety of things. You can program to output any length of text or key presses. You can of course configure complex keyboard shortcuts into a single button so you don’t have to do finger gymnastics. You can record and play macros and automate complex sequences of commands.

I have fallen in love with my mouse configuration, let me show you the ways:

  • separate buttons for Copy, Paste and Cut. It’s amazing how much work quicker using these buttons is than with regular keyboard presses.
  • a button to bring up clipboard history and paste any item from that history
  • manage virtual desktops by toggling between desktops with separate keys
  • instantly scroll to the top or bottom of a page, something that is very useful in today’s web when pages have gotten more scroll heavy
  • Forward and Back buttons work in almost every program
  • Screen dimming keys (using f.lux) at a finger’s touch
  • zoom in or zoom out by pressing a button and moving the mouse wheel

Recommended Keyboards

Logitech G510s Gaming Keyboard with Game Panel LCD Screen

Logitech G11 Gaming Keyboard (Black/Silver)

SteelSeries Merc Stealth Gaming Keyboard

Due to the SteelSeries Merc Stealth Gaming Keyboard’ many programmable hotkeys, it can boost productivity for writers, designers and programmers
A picture of the Logitech G11, it’s the keyboard I use because it features 18 programmable hotkeys on the side and 3 modes to use those 18 keys for 54 hotkeys.
Logitech’s G510s features 18 programmable hotkeys on the left side and you make 3 configurations with those 18 keys for 54 hotkeys that will boost your productivity with your professional tools

Recommended Mice

Razer Naga Ergonomic MMO Gaming Mouse

This Razer Naga Ergonomic Gaming Mouse boasts 12 thumb buttons, originally geared toward MMO games, it’s perfect for adding a variety of work related hotkeys

SHARKK® Gaming Mouse for the Pro Gamer 16400 DPI High Precision Programmable Laser Gaming Mouse for PC and MMO with Omron Micro Switches 18 Programmable Buttons Weight Tuning Cartridge Gaming Mouse with 12 Side Buttons 5 programmable user profiles

Sharkk’s pro gaming mouse has 18 programmable keys, which is amazing. It blows a normal mouse out of the water as far as productivity goes.

Redragon M901 PERDITION 16400 DPI High-Precision Programmable Laser Gaming Mouse (Black)

Redragon’s Perdition series is the mouse I own and hit has 18 programmable hotkeys and flashy programmable lights to go with it. It’s the best mouse I’ve used for my work flow.

My NBA Season 2015-2016 Predictions

Just for fun!

Rookie of the Year: Emmanuel Mudiay

MVP: Harden

Finals: Warriors – Bulls, Warriors win

Standings prediction:

  1. Warriors
    63 wins. Same team as last year, when they were far and away the best team. All of their young core players now have championship experience
  2. Oklahoma
    60 wins. A fresh coaching philosophy to go with 2 top five players, Ibaka’s defensive anchoring and decent role players should guarantee a Western Conference finals spot
  3. Clippers
    59 wins. On paper, the best team. They have the most productive players in the league at three positions and a deep bench. Chemistry will prevent them from winning
  4. Memphis
    57 wins. Good roster additions and when healthy one of the toughest teams in the league
  5. Rockets
    57 wins. Super deep but no signs that the star players will mesh in a way that makes the whole more than just their parts combined.
  6. Spurs
    54 wins. The best coached team in the league, but will drop off due to poor point guard play, age decline. Aldridge doesn’t amplify what the Spurs do best.
  7. Chicago
    58 wins. A well-coached team, with a very deep line up and the offense to make it work
  8. Cavaliers
    50 wins. I don’t think they’ll be healthy at the start or end of the season. Kevin Love adds as much as he takes away. They succeeded last year through pure will, gutsy play from role players who won’t be on the floor if Irving and Love are playing.
  9. Pelicans
    44 wins. A lot of injury concerns, but the best player in the league can carry them
  10. Hawks
    49 wins. An efficient well-coordinated machine. Not sure if Korver can replicate past successes and will there be friction around Schroeder’s ambitions and the team.
  11. Heat
    48 wins. A dangerous team but there’s not a lot of 3pt scoring and we’ve no idea how the starting 5 gels because they haven’t played together. Feels like a mish mash of some very good pieces.
  12. Wizards
    48 wins. Elite play in the backcourt, solid front court and interesting depth.
  13. Bucks
    47 wins. Offensive upgrades, defensive downgrades should land them around .500 and perhaps even more in the East
  14. Celtics
    45 wins. Excellent coaching, but the roster features no remarkable players, there’s only so much you can do with non-allstar level players. And that ceiling has to be lower than what the Hawks achieved with 4.
  15. Raptors
    44 wins. Firmly belong in the good but not great category
  16. Suns
    42 wins. Well coached, competitive, decent roster but no reason to think they will be any more than an 8 seed
  17. Pistons
    42 wins. Van Gundy can take this squad to the playoffs with a roster complimenting Drummond’s play. But their point guards are iffy and Drummond does not appear to have the kind of hard core determination you see in elite caliber players.
  18. Kings
    42 wins. They will compete almost every night and have a lot of talent, they are only low because of combustibility in their roster makeup.
  19. Pacers
    35 wins. One of the best coaches in the league will get a lot out of any collection of players and Paul George looks good
  20. Timberwolves
    35 wins. Loaded with young talent and some veteran leadership is present as well
  21. Utah
    34 wins. Overrated at this point
  22. Mavericks
    32 wins. Pretty weak roster but enough talent and coaching to get 30+ wins. I predict Deron Williams will be yet another player that didn’t pan out.
  23. Magic
    27 wins. Talented young players that will compete but not be efficient
  24. Denver
    26 wins. Potential rookie of the year candidate, in form Gallinari and improved chemistry with better coach and departure Lawson. Lot of bad teams to run off the court.
  25. Portland
    24 wins. Lillard will be in hero mode almost all the time. That doesn’t win games in today’s NBA
  26. Lakers
    23 wins. So many inefficient shots await them
  27. Nets
    23 wins. Will win some with strong center play out of Lopez
  28. Knicks
    22 wins. Destined to be bad
  29. Hornets
    22 wins. Mediocrity
  30. Sixers
    18 wins. Meh. Excited to see Okafor play.

Sneak peak of new code snippet plugin for WordPress

Writing code examples inside the WordPress editor is a lousy experience with most plugins. Most of them involve writing down shortcodes, using clunky input dialogs and messing with spacing because tab functionality doesn’t work properly. Syntax highlighter implementations also tend to be onerous, they are often clunky and bloaty and load too much stuff. In fact I was so fed up with existing plugins that I stopped posting code tutorials on this site.

Ever since Tinymce got updated to the v4+ branch new things have become possible with the editor. One of the coolest things is the ability to live preview shortcode output right inside the (visual) editor, as well as easily adding a graphical user interface for these shortcodes. It is an order of magnitude more user-friendly. I don’t think any of the existing code plugins have jumped on board the live-preview train yet, so I decided to implement a solution myself.

I made some nice progress with a plugin I have dubbed ‘Code Shower’. Below is a sneak peak.

here’s an example of how a (css) code snippet looks on the front-end:

[codeshower ui_state=”” language=”text%2Fcss” code=”.excited%20%7B%0A%09font-weight%3A%20bold%3B%0A%09font-size%3A%203em%3B%0A%7D”]

And here is a screenshot of how it looks inside the familiar WordPress post editor:

This shows the live preview inside the WordPress editor displaying my css code snippet
This shows the live preview inside the WordPress editor displaying my css code snippet

And below is what the graphical interface looks like when inserting a new code snippet. It still needs some polish, but it should give you an idea.

This is a pop dialog that shows when adding or editing a code snippet inside the editor.
This is a pop dialog that shows when adding or editing a code snippet inside the editor.

There is still some work to do. Right now I am testing the plugin and it does have a dependency on a commercial plugin I’ve developed called Super Content Widget Pro. I’m probably going to make a it free for customers of Super Content Widget Pro, but we’ll see. Would you be interested in a plugin like this? Let me know.

A guide to choosing a WordPress Plugin and Theme automatic update solution

If you have created a commercial or private plugin or theme and want to provide automatic updates for your product a number of solutions are available to you. With so many different avenues, which one is best for your project?

Code your own updater

There are a few guides out there that show you how to write the code for a basic plugin/theme updater. Notable sources:

Professional WordPress Plugin Development – a foundational book that you should have read if you are serious about WordPress development, it includes a section that shows you how to code an updater.

A Guide to the WordPress HTTP API: Automatic Plugin Updates – a tutsplus article

The benefit of coding your own is that you can keep things nice and simple. If you are needing more sophisticated features, you might find your time is better invested by using an existing solution instead.

Use an existing free updater framework

There are a couple of freely usable frameworks out there that you can get up and running very quickly, notable sources (all can be found on github):

1) W-Shadow has a plugin & theme updater as well as a server script to act as a repository. The server code is not dependent on WordPress, which is both a pro and a con, although it can be easily integrated into a plugin. You can quite easily customize it if you are open to getting your hands dirty with code (if you want to add in your own authentication protocols for example). The code isn’t formatted to WordPress guidelines which can be a bit jarring if you are customizing it. One perk is the ability to parse a zip package and extra all the meta information out of it so you don’t have to type this information out redundantly through an interface or in a script.

2) Automatic Theme & Plugin Updater for Self-hosted themes and plugins by Jeremy Clarke. This I haven’t tested and doesn’t appear to be maintained.

3) Reaktiv Remote Repo. This was created by Aaron Norcross, a reputed and trusted developer. It’s simple, easy to read and integrate. What’s not to love.

Purchase an off-the-shelf self-hostable solution

There are a couple of turn-key commercial solutions

Easy Digital Download has a commercial licensing add-on for software. EDD itself is free and this is a paid add-on, the developer is of a high standard and has managed to create a community around his products.

Woocommerce Software Add-on. It is pricey for an add-on, but it runs off the most popular e-commerce solution for WordPress.

Auto Hosted. The most cost-friendly of the bunch and also the most feature complete.

Sign up to a Hosted Updater Service

There are some pros and cons to using a hosted service.

Pros: you don’t have to maintain the relevant code, it’s all taken care of you. You don’t have to worry about your server going down. There are quite a few extra features that you get.

Cons: you have to worry whether the service sticks around and if the service goes down that can affect your customer relations. The cost grows with time when you pay per month. You have less control over the process. Most importantly though is that you are handing out data to another party and entrusting them to manage it responsibly. If a hosted service is compromised it could send malicious updates. Another business concern is the analytics you give them. By letting them handle your product updates you effectively share your sales data with another company that could bed used or shared in undesirable ways.

WP-Updates. It looks to be a very streamlined and easy to implement solution and also very price friendly. The company behind it is Dev7Studios (which appears to be run by a pair of developers) which has quite a portfolio of products. This is both a good sign and a bad sign. Good because they are likely to stick around long and bad because they might be(or become!) your competitor with one of their products and you would be arming them with valuable analytics.

SellWP is a fully featured solution that also takes care of a shopping cart and all of the other components need to sell WordPress products. It really is designed to get you selling your product as soon as possible. Unlike any other product, the pricing is based on sales and not on a fixed monthly or yearly fee. I think this is great and it’s especially good for those starting out. SellWP is run by a single developer; this might mitigate some of the concerns I have with having another commercial entity have access to valuable analytics, but it’s also a potential risk when a single person is a point of failure. If you are running an appreciable amount of business it would be important to have a plan B in place just in case.

How to recover a lost or disappeared application window (Windows tip)

So this is an issue I have from time to time and it had me dumbfounded. I would lose a handful of windows of programs I had open and running. The usual trick to retrieving lost windows, or windows that have gone ‘off’ screen is to try one of these:

  • hit alt + tab, click the program thumbnail to select it, then use a keyboard shortcut to move it back on screen
  • hit windows + left arrow key or windows + right arrow key will move a window from left to right. Pressing this repeatedly will move this across screens in a multi-monitor setup
  • hit windows + d to show all windows, or windows + shift + m to restore windows
  • right click the windows taskbar and choose one of the windows display options from the menu

This wasn’t working for me because the application windows in question weren’t being recognized. If you check the task manager (navigate to it with control + alt + del) and you see the program in question running in the processes tab, your program is in fact still running. Then you can try this:

Solution:

  1. Install process explorer (a free tool hosted by Microsoft)
  2. Run it
  3. Select the relevant program and right click to open up a menu, select “window”, click “bring to front”

Applies when:

  1. When you have lost an application window while the application is still running (verify it is running with task manager)
  2. When the application is not visible as an active program in the windows task bar and can’t be navigated to with alt + tab
  3. When you can’t restore the window by interfacing with its system tray interface (if applicable)

Autoresize for wp_editor (the TinyMCE editor) in WordPress 4.0+

A lovely feature finding its way into the default post editor for WordPress is autoresizing. This means that you no longer have to scroll up and down inside the editor, it will expand to fit your content automatically removing the scrollbars. It is even better now that the toolbar will always stay in view.

If you are using wp_editor to create custom editing instances, you can take advantage of this feature too. Previously I was using an autoresize plugin for TinyMCE but now it is as simple as passing in a setting.

[codeshower ui_state=”” language=”php” code=”wp_editor(%20%0A%20%20%20%20”%2C%20%2F%2F%20content%0A%20%20%20%20’yourcustomeditorid’%2C%20%2F%2F%20a%20unique%20id%20in%20lowercase%20letters%0A%20%20%20%20array(%0A%20%20%20%20%20%20%20%20’tinymce’%20%3D%3E%20array(%0A%09%09’resize’%20%3D%3E%20false%2C%20%2F%2F%20disables%20the%20ability%20to%20resize%20the%20editor%20with%20the%20mouse%0A%09%09’wp_autoresize_on’%20%3D%3E%20true%20%2F%2F%20editor%20expands%20to%20fit%20content%0A%20%20%20%20)%20%2F%2F%20settings%20array%0A)%3B” linenumber=””]