Archie Makuwa's Blog

Using HTML5 Web Storage

03/06/2018 / Archie Makuwa

What is HTML5 Web Storage?

With web storage, web applications can store data locally within the user’s browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and the information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Browser Support

The following web browsers supported:

Google Chrome 4.0 +
Internet Explorer 8.0 +
Firefox 3.5 +
Safari 4.0 +
Opera 11.5 +

Usage Examples

HTML web storage provides two objects for storing data on the client:

window.localStorage – stores data with no expiration date
window.sessionStorage – stores data for one session (data is lost when the browser tab is closed)

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

if (typeof(Storage) !== "undefined") {

// Code for localStorage/sessionStorage.

} else {

// Sorry! No Web Storage support..

}

I also recently used the script to load a popup video once on a website. The video will not load again unless the session is terminated somehow (closing browser tab or moving away from the site). I used Fancybox2 in this example – look, this is really some basic shit but you get the idea.

jQuery( document ).ready(function($) {

    setTimeout(function() {

        if (!sessionStorage.alreadyClicked) {   // keep browser session
            $("a.hospo-vid").fancybox().trigger('click');
            sessionStorage.alreadyClicked = 1;
        }

    }, 3000);

});

jQuery( document ).ready(function($) {

setTimeout(function() {

if (!sessionStorage.alreadyClicked) { // keep browser session

$("a.hospo-vid").fancybox().trigger('click');

sessionStorage.alreadyClicked = 1;

}

}, 3000);

});

Why I haven’t posted anything in 1 year and 6 months

02/06/2018 / Archie Makuwa

I know I don’t have any following on social media or anywhere else – not even on this blog. I am sharing this for the sake of sharing.

My last blog post was on the 22 December in 2016 which was around the same time I left a full-time job at Tenacity Works in Cape Town to start a journey on my own.

I have been kept busy ever since juggling shit I never thought I would be juggling some day. I became a boyfriend, an accountant, a salesman, a system administrator, a developer, a technician and I became *fat in the process. In the process, I also attracted a lot of bad business partners – the guys who would call on a Saturday and disturb the peace.

So… I haven’t really had enough time to do stuff that matters, like losing weight, being a good boyfriend, blogging, hiking and so forth. I have made a commitment though to start making the time, so keep watching this space, my Twitter or Instagram.

*fat – currently the scale is standing at 115kg (I am overweight)

Automatically remove a canceled order in WooCommerce [UnTested]

22/11/2016 / Archie Makuwa

Based on a question on StackExchange, please find a solution below. We have not tested this, but it was a quick solution by: the_dramatist and kinda looks right. Please test!

add_action( 'woocommerce_order_status_failed', 'the_dramatist_woocommerce_auto_delete_order' );
add_action( 'woocommerce_order_status_pending', 'the_dramatist_woocommerce_auto_delete_order' );
add_action( 'woocommerce_order_status_cancelled', 'the_dramatist_woocommerce_auto_delete_order' );
function the_dramatist_woocommerce_auto_delete_order( $order_id ) {
    $current_time = date('h:i:s');
    sleep(300); // 5*60 = 300 seconds. Here 1minute = 60 seconds.
    global $woocommerce;
    $order = new WC_Order( $order_id );
    $order_status = $order->get_status();
    if ( !$order_id )
        return false;
    if ('cancelled' == $order_status || 'failed' == $order_status ||   'pending' == $order_status ) {
        wp_delete_post($order_id,true);
        return true;
    }
    return false;
}

add_action( 'woocommerce_order_status_failed', 'the_dramatist_woocommerce_auto_delete_order' );

add_action( 'woocommerce_order_status_pending', 'the_dramatist_woocommerce_auto_delete_order' );

add_action( 'woocommerce_order_status_cancelled', 'the_dramatist_woocommerce_auto_delete_order' );

function the_dramatist_woocommerce_auto_delete_order( $order_id ) {

$current_time = date('h:i:s');

sleep(300); // 5*60 = 300 seconds. Here 1minute = 60 seconds.

global $woocommerce;

$order = new WC_Order( $order_id );

$order_status = $order->get_status();

if ( !$order_id )

return false;

if ('cancelled' == $order_status || 'failed' == $order_status || 'pending' == $order_status ) {

wp_delete_post($order_id,true);

return true;

}

return false;

}

Convert all WordPress status from Trash to Drafts

31/10/2016 / Archie Makuwa

Have you ever found yourself in a situation where you have to covert hundreds and hundreds of posts from the Trash folder into Drafts?

You can easily execute that using one easy mySQL query:

UPDATE wp_posts SET `post_status` = 'draft' WHERE post_type = 'post' AND `post_status` = 'trash'

1	UPDATE wp_posts SET `post_status` = 'draft' WHERE post_type = 'post' AND `post_status` = 'trash'

Open all external links and PDFs in an external window or tab using jQuery

07/10/2016 / Archie Makuwa

This is how you would open all external links and PDFs in an external window or tab using jQuery.

$('a').each(function() {
    var a = new RegExp('/' + window.location.host + '/');
    if (!a.test(this.href)) {
        $(this).attr("target","_blank");
    }
});

// force all pdf links to open in a new window
$('a[href$=".pdf"]').attr('target', '_blank');

$('a').each(function() {

var a = new RegExp('/' + window.location.host + '/');

if (!a.test(this.href)) {

$(this).attr("target","_blank");

}

});

// force all pdf links to open in a new window

$('a[href$=".pdf"]').attr('target', '_blank');

Now leave me alone…

Change local server time using php.ini on a shared hosting environment

24/09/2016 / Archie Makuwa

Have you ever been a cheapskate and opted for a shared hosting environment in a foreign country merely because it was cheaper? Haver you ever been frustrated for not being able to control the server system time because obviously, that is not your server?

Cheapskate – A stingy person. Somebody who buys cheap in favour of higher quality or better stuff. Even though they might be able to afford the better. Perhaps ungenerously trying not to spend much on their friends. Not particularly offensive, and often intended to ridicule in a light-hearted manner. North American origin (skate apparently meaning fellow).

Well the good news is you can use the php.ini file in your shared hosting account to take control of the server local time as follows:

ini_set('date.timezone', 'YourTimezoneHere');

1	ini_set('date.timezone', 'YourTimezoneHere');

A list of supported time zones: http://php.net/manual/en/timezones.php

E.g:

ini_set('date.timezone', 'Africa/Johannesburg');

1	ini_set('date.timezone', 'Africa/Johannesburg');

Wrap colorbox main div into another Raw

23/09/2016 / Archie Makuwa

The last time I worked with the Colorbox library was during my “hardcore” Drupal7 days and that was many months ago. I recently found myself creating galleries, pop-ups and so forth over the past 48 hours using jQuery ColorBox: http://www.jacklmoore.com/colorbox/

If you have ever wanted to know how you could easily wrap the colorbox main div with another div, this is how easy it is to do that:

$('#whatever').colorbox({
  open: true,
  height: 500,
  width: 500,
  onComplete: function() {
      $("#colorbox").wrap("&lt;div id='colorbox_wrapper' /&gt;")
  },
  onCleanup: function() {
      $("#colorbox").unwrap("&lt;div id='colorbox_wrapper' /&gt;")
  }
});

$('#whatever').colorbox({

open: true,

height: 500,

width: 500,

onComplete: function() {

$("#colorbox").wrap("<div id='colorbox_wrapper' />")

onCleanup: function() {

$("#colorbox").unwrap("<div id='colorbox_wrapper' />")

}

});

Importing a web font using @font-face in shopify’s liquid Raw

21/09/2016 / Archie Makuwa

@font-face {
font-family: 'font';
  src: url('{{ 'font.eot' | asset_url }}');
src: url('{{ 'font.eot' | asset_url }}?#iefix') format('eot'),
url('{{ 'font.woff' | asset_url }}') format('woff'),
url('{{ 'font.ttf' | asset_url }}') format('truetype'),
url('{{ 'font.svg' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
}
/* fixes choppy text in chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'font';
src: url('{{ 'font.svg' | asset_url }}') format('svg');
  }
}

@font-face {

font-family: 'font';

src: url('{{ 'font.eot' | asset_url }}');

src: url('{{ 'font.eot' | asset_url }}?#iefix') format('eot'),

url('{{ 'font.woff' | asset_url }}') format('woff'),

url('{{ 'font.ttf' | asset_url }}') format('truetype'),

url('{{ 'font.svg' | asset_url }}') format('svg');

font-weight: normal;

font-style: normal;

}

/* fixes choppy text in chrome */

@media screen and (-webkit-min-device-pixel-ratio:0) {

@font-face {

font-family: 'font';

src: url('{{ 'font.svg' | asset_url }}') format('svg');

}

List all WordPress Categories and their IDs

19/09/2016 / Archie Makuwa

These few lines can save your life if you are “stupid” like me:

<?php

    $categories_ids = get_terms( 'category' );
    
    //print_r($categories_ids);
    echo '<ul>';
    foreach ( $categories_ids as $cats ) {
        echo '<li>' . $cats->name . ' – Id: ' . $cats->term_id . '</li>';
    }
    echo '</ul>';

?>

<?php

$categories_ids = get_terms( 'category' );

//print_r($categories_ids);

echo '<ul>';

foreach ( $categories_ids as $cats ) {

echo '<li>' . $cats->name . ' – Id: ' . $cats->term_id . '</li>';

}

echo '</ul>';

WordPress | Get content from a specific post using post_id

05/09/2016 / Archie Makuwa

Hi,

This is really simple to understand:

/**
 * You often need to get the content or title from a specific post. 
 * Sometimes, using a custom loop is the better option, but when you only need
 * to get information from a specific post, there’s a better option 
 */


// wordpress snippet  
echo get_post_field('post_content', $post_id);

/**

* You often need to get the content or title from a specific post.

* Sometimes, using a custom loop is the better option, but when you only need

* to get information from a specific post, there’s a better option

// wordpress snippet

echo get_post_field('post_content', $post_id);

Good bye!