Category: Development

Taking back ownership of the word ‘freelancer’

PHPSouthAfrica

Based on some prompting by Hugh I applied as a speaker at PHPSouthAfrica this year. Apparently they still don’t know how little I actually know as they accepted my talk submission ūüėČ

I’ll be talking just after afternoon tea about a topic that has been on my mind since 2010, that of the common perception of the freelancer, specifically when it comes to developers.

A freelancer or freelance worker is defined as a person who is self-employed and is not necessarily committed to a particular employer long-term. Since becoming a freelance developer in 2010 I’ve discovered that there is a stigma attached to the word. I don’t know if it is developer specific, but every time I meet or take on a new client the fact that I am ‘freelance’ tends to inspire visions of horror, usually of poor deliverables, bad client support and just a general lack of responsibility. In my talk, I would like to unpack this problem and provide some solutions to it.

Here are the slides for this talk.

Filed under: Development, Experiences, FreelancingTagged with:

Gutenberg day 8 – Contributing to Core

I’m attempting my first shot at contributing to WordPress core with ticket that was opened 8 years ago!

I feel like it’s small enough that I can get something done by the time the next release rolls around but useful enough that it will make peoples lives easier.

Feel free to follow the ticket to see how it pans out.

In other news, using Gutenberg today was a bit of a pain. Because I use Jetpack’s publicise functionality to share my content socially and Jetpack does not yet support Gutenberg (for obvious reasons) I have to write up the post in Gutenberg but not publish it and then edit the Post in the usual way and publish it. Today this lead to me loosing all my content and merely switching to the regular post editor. Fun times.

Filed under: Development, Experiences, Freelancing, WordPress

Gutenberg day 7 – New things

WP HackerCast

Today I'm especially excited to blog as I have a little news to share. The first episode of my new podcast has officially been published.

WP Hacker Cast is my way of talking to and learning from all the great WordPress developers I know and communicate with. I've got some great interviews coming up, but the first is always the most special.

I hope you enjoy it.

Filed under: Development, Experiences, Freelancing, WordPress

A month with Gutenberg

Gutenberg

If you are in any way involved with WordPress and unless you've been living under a rock you're aware of the new Gutenberg editor that is currently in development.

Gutenberg is what Matt and many other WordPress developers see as the future of WordPress. However, as with most new things, it's not been met with universal praise, with some even going so far as to review poorly, strange given that it is very clearly marked as a 'beta' product.

Something that Matt and others have asked for is for user feedback. I've mostly stayed away from testing Gutenberg as I don't often have a lot of time for blogging lately. However, seeing as September is spring month in South Africa I've decided to try a little experiment.

From today and for the rest of September I will attempt to write one blog post a day using Gutenberg. I am hoping that this will a) give me some time to test out the new editor and b) force me to write something every day. My ultimate goal is to try and both give useful feedback back to the Gutenberg team as well as start a pattern of blogging daily.

Are you currently using Gutenberg? Let me know in the comments what your opinion of it is, by the end of the month I should be able to have worked with it enough to have formed my own.

Filed under: Development, Experiences, WordPressTagged with:

What’s your Git Strategy?

As a freelance WordPress developer/consultant I rarely work in a team environment. So my usage of Git is mostly for my own purposes of being able to have my code backed up somewhere and the ability to create branches to try out new pieces of functionality without affecting the ‘master’ code base.

Recently I was chatting to Simon Dowdles, another Cape Town based WordPress developer, about this. He is, in his own words, very strict about a Git workflow. We agreed that it would be a good idea to implement a better system, so we put his workflow into place.

  1. Development branch is where all UP TO DATE and approved code lives
  2. Master branch is the truth and is ALWAYS what is on production
  3. Feature/hotfix branches are branched off of develop and only come back into develop with a Pull Request
  4. Release branches are made off of develop for releases, the release is done, merged back into master and tagged with the appropriate version tag (ie 1.2.0)
  5. Release branch is deleted, and there is only ever one

On the surface this all seems very obvious but it is often something that one tends to dismiss when working alone on the code base. After working with it for a few days however I can already see the benefits.

Lets first look at a real work example of how this would work in practice.

Setup

Firstly the repository is going to need a develop branch. So inside the root of my project folder I’ll create the develop branch from the master branch.

git checkout -b develop

And then push the branch

git push -u origin develop

If the develop branch already exists I can just switch to it

git checkout develop

Now I will need to create my feature branch, to make my code changes. So while still on the develop branch, create a a feature branch

git checkout -b feature/my-cool-feature

Usage

I can now starting coding my changes, committing frequently. I tend to commit every time I complete a chunk of functionality. So if I fix a bug, I commit. If I add a function and its more or less complete I commit.

git commit -a

At the end of every day, or if I am going to leave my workstation for a period of time, I push all current commits to the feature branch.

git push -u origin feature/my-cool-feature

When I am convinced it is good to go, I will submit a pull request or PR. When I create my PR I will request that it is merged into the develop branch, NOT master.

As we are using GitHub for this project I prefer to use the web based tools to create a PR, but most of the other cloud based Git services provide similar tools.

The rest of the team will review this PR, which will involve testing. They will scrutinise my code and provide feedback and I will fix or alter things to suit the team/project coding style(s).

Each time I commit the above changes, the team in the PR is notified and will see the changes in the PR.

When everyone is happy, they approve the PR and I merge my PR into the develop branch. At the same time I can choose to delete my feature branch (which I typically do)

The develop¬†branch now has more (stable) code in it, and part of my PR should have been a version bump. (for example let’s say to 1.0.1)

Release

The team decides it is time to release version 1.0.1

First I need to make sure all my code is up to date

git pull

And then make sure I am in the develop branch. This is the branch that has all the approved code for the next release (1.0.1).

git checkout develop

I create a release branch called release/1.0.1 off of develop

git checkout -b release/1.0.1

The code gets deployed ( in this case its a WordPress plugin, so it means pushing all the code to the wordpress.org plugin repository, more on that another day ūüėČ )

 

I then merge the release/1.0.1 branch back into the master branch and tag it as release 1.0.1, again using all the GitHub PR, merging and tagging tools.

And we’re done, release 1.0.1 is in the wild and by following this approach, master is ALWAYS the truth. If for example release 1.0.2¬†were to fail, we simply roll everything back to master.

Wrap up

I’ve been working like this for three releases of the project so far and I have to say, once I had all the steps in my head, it did make developing, merging and releasing a lot smoother and more controlled.

Are you using Git as part of a team? If so I’d love to hear your comments on the idea of having a Git Workflow/Strategy.

Filed under: Development, Freelancing, WordPressTagged with: , ,

Hooking into the onclick event of buttons in Divi

In the Divi Theme Users & Elegant Marketplace group, Brett Bumeter asked, “anyone ever find a quick way to add an onclick event to a Divi Button?”

More specifically, Brett needs to replicate the onclick event on a regular html button, but using a Divi button.

<button onclick="myFunction()">Click me</button>

First thing we need to do is look at a Divi button’s html.

<a class="et_pb_button  et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="">Button</a>

So a Divi button is really just a styled anchor tag. That’s fine, we can use the onclick event on an anchor tag. However we can’t edit a Divi button’s html, so we can’t add a function to the onclick event. What we can do is use some jQuery to bind a function to the anchors onclick event.

Here’s what that would look like:

$(".et_pb_button").on("click", function(){
    event.preventDefault();
    alert("Button clicked"); 
 });

So what this does is bind to the onclick event of any element that has a class of “et_pb_button”, prevent the default action of that element (in this case opening a url) and then performs whatever functionality you need (in this case showing the alert).

Pretty simple really. You can use this Javascript snippet in a child theme as is, or you can insert it into the Divi Theme Options -> Integrations -> Add code to the < head > of your blog’ area. If you are going to go the second route, you will need to wrap the snippet above in a document ready enclosure and some script tags, like so

<script>
jQuery(function ($) {
    $( document ).ready(function() {
        $(".et_pb_button").on("click", function(){
            event.preventDefault();
            alert("Button clicked"); 
        });
    }); 
});
</script>

You could also take this a step further, and use it to pass some data to the onclick event, by using a custom button id or class. Let’s say we give the button a custom id of ‘one’.

$(".et_pb_button").on("click", function(){
    var id = $(this).attr("id");
    alert("Button " + id + " clicked");
});

In this instance the custom id of ‘one’ would be passed to the ‘id’ variable, which could then be used to call some other function, which needs that value.

Happy Diviing.

Filed under: Development, Divi, WordPressTagged with: , ,

Using anchor links to open accordions and tabs in Divi – from another page!

The most popular article on my blog so far (by way of comments on it) is the one on¬†Using anchor links to open accordions and tabs in Divi. It’s so popular that when the demo page broke recently I even had a few people comment to ask if the process still worked with newer versions of Divi (it does, by the way).

It being the most popular article, the most popular question I get about it is “How do I link to and open an accordion or tab, from an external page?”. Well, today I share that solution.

Before we begin – This article is going to be a little more advanced than my usual Divi posts. This is because it is going to require delving into the world of PHP and WordPress action hooks. For the purposes of this article I am not going to delve too deeply into those topics, so I do suggest¬†reading¬†the relevant documentation on WordPress.org. Also, for the purposes of this article, you are going to need to know how to include PHP into your WordPress site (either via a Divi child theme or a plugin). If you are new to PHP I recommend reading my Child Theme series, especially the article on Making child themes part of your development best practice.¬†For this article, we’ll use a child theme, because it’s the easiest way.

Ok, all caught up? Good, let’s begin!

Preparation: Understand Query Strings

The first thing you need to understand is query strings. Query strings are not something you see a lot of lately (as pretty permalinks are the norm) but they are what existed before permalinks were made popular. Query strings look something like this:

 http://mycooldomain.com/?post_name=my-cool-article 

See how I am specifying that post_name is equal to my-cool-article after the question mark sign? This is a query string. In this string I am passing the variable post_name and giving it a value of my-cool-article. Once the url before the query string loads (in this case just the home page of the domain) I can check for that variable using the global PHP $_GET variable array and, if it exists, do something with it.

 
$passed_post_name = $_GET['post_name'];
// do something with the $passed_post_name variable

In order to open a specific tab or accordion on page A from page B, I need to setup my anchor links on page B to point to page A, but those links should also include a query string variable, in this instance the name of the accordion or tab item I want to open.

So, for the purposes of this topic my query string will something look like this

 ?et_open_accordion=et_pb_accordion_item_1 

or

 ?et_open_tab=et_pb_tab_1 

You’ll see that I am passing the class identifier of the accordion or tab item to open as the value. (more on this later)

Step 1: Making some jQuery changes

Let’s first take a look at the accordion ‘open’ snippet I posted in the original article:

jQuery(function ($) {
  //accordion
  $('#open-accordion-dance a').on('click', function(event){
    $('#my-accordian .et_pb_accordion_item_1 .et_pb_toggle_title').click();
    $("html, body").animate({ scrollTop: $('#my-accordian').offset().top }, 1000);
  });
  //tab
  $('#open-tab-dance a').on('click', function(event){
    $('#my-tabs .et_pb_tab_1 a').click();
    $("html, body").animate({ scrollTop: $('#my-tabs').offset().top }, 1000);
  });
});

The important thing to look at is the css class identifier for the accordion or item we’re triggering the click on, in this case .et_pb_accordion_item_1¬†or¬†.et_pb_tab_1. See how this is the same as the value being passed in the query string above. What we need to do now is to be able to specify that value as a JavaScript variable somehow and pass that variable into the JavaScript, to trigger the click of our selected accordion item, when the page loads.

The second thing we will need to do is make sure that this code only fires, once the entire document has loaded. Currently it waits for you to click a link on the same page, but now we’ll be loading the page with the accordion or tab content and then triggering the click.

The change to the JavaScript looks like this:

jQuery(function ($) {
  $( document ).ready(function() {
    // accordion
    if (typeof openers.accordion !== 'undefined') {
      var accordion_element = '#my-accordian .' + openers.accordion + ' h5.et_pb_toggle_title';
      $(accordion_element).click();
      $("html, body").animate({ scrollTop: $('#my-accordian').offset().top }, 1000);
    }
    // tab
    if (typeof openers.tab !== 'undefined') {
      var tab_element = '#my-tabs .' + openers.tab + ' a';
      $(tab_element).click();
      $("html, body").animate({ scrollTop: $('#my-tabs').offset().top }, 1000);
    }
  });
});

Note how I have changed the¬†et_pb_accordion_item_1¬†and¬†et_pb_tab_1¬†to openers.accordion and openers.tab¬†and instead of those variables being inside the class selector string they are being concatenated to the string (see, I told you this was a little more advanced). I’m also wrapping the entire thing inside a¬†$( document ).ready(function() {}¬†and removing the on(“click”) event handlers and checking if there is an instance of either openers.accordion or openers.tab. If either exists it will fire the relevant ‘open and animate to’ code.

 

Step 2: Mix in some PHP

Right, so now that we have this updated JavaScript we need to setup those¬†openers¬†variables, based on the query string. Do to this we need to do two things a) enqueue the JavaScript in the¬†child theme and b) pass some PHP variables to the JavaScript. To achieve this we’ll put all our PHP code into a functions.php file of a child theme.

Instead of using the Divi Theme Options Code Integration tab for the JavaScript, we need to save it in a file in our child theme and hook a function into the wp_enqueue_scripts action hook (the same one used to enqueue child theme CSS). It looks something like this:

function my_theme_enqueue_scripts() {
wp_register_script( 'some_handle', 'path/to/myscript.js' );
wp_enqueue_script( 'some_handle' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

We also need to make the PHP variable available to the script. This is done by using the wp_localize_script function, which allows you to pass any variable from PHP to the JavaScript script you are enqueuing using wp_localize_script.

function my_theme_enqueue_scripts() {
    wp_register_script( 'some_handle', 'path/to/myscript.js' );
    $variable_array = array(
        'my_javascript_variable' =&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; 'some value'
    );
    wp_localize_script( 'some_handle', 'javscript_object_name', $translation_array );
    wp_enqueue_script( 'some_handle' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

What this does is pass a PHP array of variables ( $variable_array  ) into the JavaScript layer as a JavaScript object ( javscript_object_name ) and makes them available to use in the JavaScript layer.

Finally we’ll need to capture the variables passed from the query string. That looks something like this:

$variable_array = array(); 
if( isset( $_GET['et_open_accordion'] ) ){ 
  $variable_array['accordion'] = $_GET['et_open_accordion']; 
} 
if( isset( $_GET['et_open_tab'] ) ){ 
  $variable_array['tab'] = $_GET['et_open_tab']; 
}

There are also some other things we need to setup, like defining path urls for enqueing files and setting up the Divi parent stylesheets. Again I’m not going to go into too much detail, but the final functions.php file looks like this:

define( 'PARENT_THEME_URL', trailingslashit( get_template_directory_uri( ) ) );
define( 'CHILD_THEME_URL', trailingslashit( get_stylesheet_directory_uri( ) ) );

function divi_child_theme_enqueue_styles() {

	$parent_style = 'divi-style'; // This is the 'parent-style'.

	wp_enqueue_style( $parent_style, PARENT_THEME_URL . 'style.css' );
	wp_enqueue_style( 'divi-child-style', CHILD_THEME_URL . 'style.css', array( $parent_style ) );

	$functions_script = 'divi-child-functions';

	$data = array();

	if( isset( $_GET['et_open_accordion'] ) ){
		$data['accordion'] = $_GET['et_open_accordion'];
	}

	if( isset( $_GET['et_open_tab'] ) ){
		$data['tab'] = $_GET['et_open_tab'];
	}

	wp_register_script( $functions_script, CHILD_THEME_URL . 'functions.js', array( 'jquery' ), '1.0', true );
	wp_localize_script( $functions_script, 'openers', $data );
	wp_enqueue_script( $functions_script );

}
add_action( 'wp_enqueue_scripts', 'divi_child_theme_enqueue_styles' );

Step 4: Putting it all together.

So, you have your functions.php file, retrieving the passed variables, setting up the javascript variables and enqueing the relevant javascript file to make it all work. All you have to do now is create a page with anchors that link to the correct location, including your query strings. And we’re all set.

To make it easier for you to test out, I’ve create a very basic Divi child theme, including all the above code, that you can just install, configure and use out of the box. You can grab this child theme demo from the GitHub page.

One thing to note, this article and child theme are for the purposes of explaining the basics of linking to open tabs or accordions. In the real world you should be considering escaping the query variables in the PHP to ensure no one injects any dodgy code into your site. This article is a good place to start.

Happy Divi-ing.

Update: Thanks to Nathan Duvall for pointing out how to manage this with Divi toggles.

(function($){
    $(window).load(function(){
        var et_hash = window.location.hash;
        if(window.location.hash) {
        $( '.et_pb_toggle' + et_hash ).removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
    }
});
})(jQuery)

Credit: https://bernadot.com/divi-theme-how-to-open-toggled-modules-with-a-url-hashtag/

Filed under: Development, Divi, WordPressTagged with: , ,

Remembering Why – Part 2

Horizon

Some time ago I wrote a blog post on remembering why I got into developing web applications in the first place. At the time I was struggling to find my focus as a developer. I’m happy to report that since then I have (more or less) figured that out.

I’ve since realised that one of my problems is that when I started out, I didn’t have a vision, mission statement or personal creed for why I wanted to do what I am doing. I just knew that I wanted to do it. Being on my own I didn’t think of such things, I tend to just rush in where angels fear to tread and then figure it out as I go along.

Today I was introduced to the Automattic creed and I was blown out of my socks. It really resonated with me, as every point in the creed is something that I believe in, a reason why I became a web developer and why I support and believe in open source as more than just a decision on software licensing. So, going into 2017 I am going to remind myself of this as much as possible.

Here is the Automattic creed:

I will never stop learning. I won’t just work on things that are assigned to me. I know there’s no such thing as a status quo. I will build our business sustainably through passionate and loyal customers. I will never pass up an opportunity to help out a colleague, and I’ll remember the days before I knew everything. I am more motivated by impact than money, and I know that Open Source is one of the most powerful ideas of our generation. I will communicate as much as possible, because it’s the oxygen of a distributed company. I am in a marathon, not a sprint, and no matter how far away the goal is, the only way to get there is by putting one foot in front of another every day. Given time, there is no problem that’s insurmountable.

That’s pretty powerful stuff!

Filed under: Development, Freelancing, WordPressTagged with: , ,

Turn any button into an Add to Cart button

Turn any button into an add to cart button

The thing I love about blogging about WordPress is how many great questions come out of the comments of previous blogs.

Today, on my post on ‘Adding the cart button to your shop pages in Divi‘, I was asked the following:

I am trying to put an Add-to-cart button in the main Divi slider. Now Divi slider only gives an option to input a URL for the default slider button. But i was wondering is there a way to modify that button and convert it into a WooCommerce AddtoCart button?

So, there’s no way to make a slider button (or any other button for that matter) an add to cart button. But what you can do is replicate the Add to Cart functionality on any button by entering the right url.

What a lot of people don’t know is that all the Divi add to cart buttons are doing is performing the add to cart action behind the scenes. To add a product to your cart all you need to do is pass a a variable called ‘add-to-cart’ with a value that is the id of a product and WooCommerce will add that product to your cart.

So lets say your site url is http://www.myawesomeshop.com/. To turn that url into an add to cart url you just need to add ?add-to-cart=[ID] to the end of it, where [ID] is the id of the product you want the customer to add to their cart.

http://www.myawesomeshop.com/?add-to-cart=[ID]

If you aren’t sure what the product id is, just look at any product. It’s the value that appears next to ID when you hover over a product. If you edit a product, its the value for post that appears in the address bar

http://www.myawesomeshop.com/wp-admin/post.php?post=[ID]&action=edit

Also, make sure you include the trailing slash at the end of the site url, otherwise things won’t work.

So that’s it, append ?add-to-cart=[ID] to the end of your site url ( don’t forget the trailing slash ) and turn any url into an ‘add to cart’ url.

Happy Diviing.

 

Filed under: Development, Divi, WordPressTagged with: ,

Codeable Review – October 2016

work-review

October marks my second month at Codeable. My first month was very quiet, mostly because I was still busy with other things in September, including WordCamp. I also took my time getting into the Codeable process, commenting on only a few smaller tasks. I closed my first small task mid October, so I’m considering October as my first official month¬†as a Codeable developer.

It should be noted that due to my other commitments I only have an average of about 20 WordPress development hours available in a week, which I try to split between plugin development, blogging and Codeable work. This means I tend to focus on smaller projects that don’t require my time for longer than about 4 – 6 hours a day, unless the deadline is very flexible.

Fellow Codeable expert, WordCamp speaker and all around nice guy¬†Nathan Ello believes “transparency trumps secrecy” and I tend to agree with him. With that in mind, below you will find my income and client reviews from Codeable for the month of October.

Show me the money

First, a quick calculation. Based on the minimum number of hours I have available for Codeable development (4) and the Codeable minimum suggested hourly rate of $60, I am aiming to earn about $720 per week or about $2800 per month. For some this may not be much, but for my situation it is an acceptable amount (for now). I am also basing my income for the month on the amount I can withdraw on the 25th of that month, so any project I get hired for during or after that day, or that gets paid out after that date, gets moved into the following month.

So how did October go? To be honest it wasnt amazing, but I am happy with it. I’m already on a good path to more than double my October income in¬†November and I’ve more or less figured out a good balance between Codeable work and my other ventures.

My total Codeable income for October is¬†$504.50.¬†Now as you will agree that’s only about a quarter of my target amount above, but I really only closed those projects in the last week of October. I was also hired for a task of about $1000 in October that is still ongoing and I have another¬†project of a¬†little over $1000 lined up for November. So November is already close to my target within¬†the first week.

Happiness report

More important than the money is how my clients view my work. As I don’t have a lot of closed tasks for October I don’t have a huge amount of reviews on my profile, but those that I do have are very positive.

“Jonathan is The Best! Very knowledgeable and Very Professional. He is the right man for all Tasks. Glad to find him here. :)”

“Perfect teamwork. Clear communication and perfect coding.”

“A star! Smashing tutor”

A few thanks

Getting through the first few months at Codeable wasn’t easy with my specific situation. I had a few ups and downs, and I probably wouldn’t have made it this far without the help of the Codeable support team (Chris, Raleigh, Liam, David and Per) and a few fellow developers (Justin, Robin, Panos and anyone else I’ve forgotten to mention, who make hanging out on the Codeable Slack a blast) who helped and guided me along the way. A special shout out to Justin who had a nice little chat with me on Slack one day and gave me the push I needed to get back up in the horse, thanks man!

October was OK, November is already looking good, here’s to wrapping up the year on a great footing to kick off 2017 with a bang at Codeable!

Filed under: Development, Freelancing, WordPressTagged with: ,