Category: Coding And Design

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.

Here’s is another write up by Josh Pollock on using Vue inside of the admin while taking advantage of ES6

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.

WordVue is starter theme that helps you set up a workflow for a Vue powered WordPress theme

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. (see related gist)

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.

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=””]

An Exploration Of Website Layout Patterns

A blog commenter I came across recently was praising the merits of sticking to the tried and tested layout of a header, title, post content with a sidebar on the left or right and a footer at the bottom. It was a commentary on the complex layout options found in bulky commercial themes and the flexibility marketed in the various page builder plugins. Sticking to a basic layout is simple and it works but also a bit dull. Truth is, most of the popular sites have very unique layout patterns.

Currently I’m working on a theme framework for my WordPress projects and I was looking for a good system to support a large variety of layout use cases. So I went to do a bit of research and explored a sampling of popular sites and attempted to note down broad layout patterns in varying detail.

I looked at sites in a wide browser window, just to maximize the layout possibilities. What struck me was that there’s quite a variety of layouts. Optimal layout has a lot to do with the type of content on offer and so it’s interesting to see the different approaches. There are some interesting trends finding their way into these high traffic sites. Grids are very popular across the board, some sites make decent use of infinite scrolling (pinterest), linear layouts without sidebars have become very popular too (see Paypal’s new home page). Content heavy sites still make heavy use of sidebars, but the way they are implemented is quite diverse. Also interesting is seeing sites utilize a separate sidebar starting at the comments section under an article (SBNation and Techcrunch do that).

I decided to share some notes I took below. It’s not meant to be exhaustive or completely accurate, just an impression really. Thought I might as well publish it as a quasi-interesting work note.

layout-variations-on-the-web

 

A quick & dirty fix for the devious appearance of nbsp; (non-breaking spaces) in TinyMce editor

Sometimes when pasting content into WordPress’ native tinymce editor, non-breaking space characters appear in the output where there should be spaces. You can verify this is this issue by inspecting the source code in your browser’s dev tools. As a result text may break outside of its container and give a disastrous look. When troubleshooting this, you look at the editor in Text or Visual mode there appear to be just normal spaces. Strange.

My first instinct is to see if there are any content filters going on at the front-end. A common instigator for markup issues can be wp_autop() or some other filtering function. This was not the case though.

So I decided to correct the problem at the source, since the issue was happening with pasted text inside the tinymce editor.

It goes like this:

1) open up dev tools in your browser (control + shift + i for Chrome on Windows)

2) go to the console tab

3) Here you can enter commands. We are going to run some manual lines of jQuery/js . Make sure you have the visual mode enabled.

var contents = jQuery('#content_ifr').contents().find('#tinymce').html();

This stores the content that tinyMCE is working with in a variable.

var filtered = contents.replace(/ /g, ' ');

This filters that content and replaces non-breaking spaces with normal spaces. Note that this also gets rid of deliberate/manual instances of non-breaking spaces. If you need to preserve these, you’ll need more complex code or you’ll need to reapply them manually.

jQuery('#content_ifr').contents().find('#tinymce').html(filtered);

This replaces the tinyMCE window with the filtered content.

4) Update the post. Check on the front-end. And now your text should look proper.