Archie Makuwa

How to integrate FontAwesome with Nuxt.js using Yarn

05/02/2019 / Archie Makuwa

I recently started working with Vue.js and I fell in love with the Nuxt.js framework. Coming from a Php and Bootstrap, the closest and most popular free icons framework happened to be FontAwesome – which I believe is the very same reason you ended up on this page.

Definitions:

Bootstrap – is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
FontAwesome – is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap and later was incorporated into the BootstrapCDN.
Vue.js – is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
Nuxt.js – is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps. Nuxt.js abstracts away the details of server and client code distribution so you can focus on application development.

Getting Started:

I am assuming you already have your Nuxt.js set up, running and you are simply looking to integrate the FontAwesome library.

I am also assuming that your Nuxt project uses Yarn. Here is Nuxt boilerplate based on Yarn: https://github.com/nuxt/nuxt.js/

In this example, I am making of the Vue FontAwesome library which can be downloaded here: https://github.com/FortAwesome/vue-fontawesome

Step 01: Install the fon

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/vue-fontawesome
$ yarn add @fortawesome/free-brands-svg-icons

$ yarn add @fortawesome/fontawesome-svg-core

$ yarn add @fortawesome/free-solid-svg-icons

$ yarn add @fortawesome/vue-fontawesome

$ yarn add @fortawesome/free-brands-svg-icons

Step 02: Inside your Nuxt.js project add a plugins/fontawesome.js file.

import Vue from 'vue'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

config.autoAddCss = false

library.add(fas, fab)

// Register the component globally
Vue.component('font-awesome-icon', FontAwesomeIcon)

import Vue from 'vue'

import { library, config } from '@fortawesome/fontawesome-svg-core'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { fas } from '@fortawesome/free-solid-svg-icons'

import { fab } from '@fortawesome/free-brands-svg-icons'

config.autoAddCss = false

library.add(fas, fab)

// Register the component globally

Vue.component('font-awesome-icon', FontAwesomeIcon)

Step 03: Modify nuxt.config.js adding to the css and plugins sections.

css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
]

css: [

'@fortawesome/fontawesome-svg-core/styles.css'

]

plugins: [
  '~/plugins/fontawesome.js'
]

plugins: [

'~/plugins/fontawesome.js'

]

Step 04: Usage / Example

You are not sorted. To use the Font Icons (including the brands, e.g. Instagram, Twitter, etc), simply refer to the emails below (brand and general usage):

<a
  href="https://www.instagram.com/"
  target="_blank">
  <font-awesome-icon :icon="['fab', 'instagram']" size="lg" />
</a>

href="https://www.instagram.com/"

target="_blank">

<font-awesome-icon :icon="['fab', 'instagram']" size="lg" />

</a>

<font-awesome-icon icon="envelope" />
<a
  href="mailto:info@test.co.za?subject=Website Enquiry">
  info@test.co.za
</a>

<font-awesome-icon icon="envelope" />

href="mailto:info@test.co.za?subject=Website Enquiry">

info@test.co.za

</a>

FontAwesome icon reference:

https://fontawesome.com/icons

A quick debugging PHP code in WordPress snippet

29/01/2019 / Archie Makuwa

Debugging PHP code is part of any project, but WordPress comes with specific debug systems designed to simplify the process as well as standardize code across the core, plugins, and themes.

define( 'WP_DEBUG', true );        // Enable WordPress debug mode
define( 'WP_DEBUG_LOG', true );    // Enalbe all errors to also be saved to a debug.log inside the /wp-content/ 
define( 'SCRIPT_DEBUG', true );    // Loads non-minified WordPRess scripts (can be exntended to plugins as well)
@ini_set( 'display_errors', 1 );   // Display all errors

define( 'WP_DEBUG', true ); // Enable WordPress debug mode

define( 'WP_DEBUG_LOG', true ); // Enalbe all errors to also be saved to a debug.log inside the /wp-content/

define( 'SCRIPT_DEBUG', true ); // Loads non-minified WordPRess scripts (can be exntended to plugins as well)

@ini_set( 'display_errors', 1 ); // Display all errors

Google killed the confidence in the “Green Padlock” on HTTPS sites

05/12/2018 / Archie Makuwa

HTTPS is a way of securing your website. It gives you a nice, green padlock and, to most users, it means all is safe with that website and you can trust this website and feel free to enter credit card details and passwords on any site with such a reassuring, green padlock.

Recently, Google phased out the green lock icon and “Secure” label next to URLs on Chrome – pointing out that safe websites should be the norm on the internet.

I live in Africa (South Africa to be specific), and there is a huge lack of cyber-security awareness. Most of our parents or even peers do not know how to identify a secure website when they come across one. In South Africa (SA), there are currently no government-led cybersecurity awareness and education initiatives. It is a continent where phishing and fake news thrives like a well-fed monster.

The green padlock is a complicated thing. And the issue is how to condense those complications for the average user. While I, and others, may be interested in the subject, my parents, for example, are not. And they should not be restricted from using the web simply because they do not have a university degree in software engineering. I think most people in 3rd world countries (or people in general, who are not tech savvy) will be tricked into obvious fraudulent websites. I am aware that a green lock does not mean the site is not fraudulent, but I think extended validation SSL certificates should at least be set apart from the rest, but that too is not the case in Google Chrome.

I know this is not technical or does not offer any solution (it is not helpful in anyway), it is a rant. I am disappointed and I truly think that Google killed the confidence in the “Green Padlock” on HTTPS sites.

I guess the question now is, how best do we educate people about online security – more especially those who have no idea? Those who have never shopped online. I am not sure of the exact figures, but: According to 2011 estimates, about 13.5% of the African population has Internet access. While Africa accounts for 15.0% of the world’s population, only 6.2% of the World’s Internet subscribers are Africans. Africans who have access to broadband connections are estimated to be in percentage of 1% or lower.

We have a lot of clueless individuals who are still impacted by the digital cloud and many of them will fall victim to internet fraud merely because some company decided to do things differently and without properly putting in place the right resources to better guide the novices on the internet.

How to set up “unrestricted” APN on Telkom LTE / 3G

05/12/2018 / Archie Makuwa

Recently, I found myself and some of my clients complaining that they were being logged out of the web hosting services on both the South African Hetzner and cPanel services. I had no idea what was happening as I was drowning in work and when I finally got a chance to log in, I experienced the same problem.

After a 20 second call with a support agent Hetzner, who pointed out the problem came from Telkom, I spent 45 minutes trying to get my calls answered and when I finally got through, the call center proved fruitless.

After some digging around on the internet, I eventually found a working solution.

The first step is to log in to your Telkom Router: http://192.168.8.1 (or your router IP address if using a custom router)
Go to “Settings > Dial-up “
And then “Profile Management”
The old profile name will be TelkomSA and will be set as the default. You then need to create a new profile with the following details:
1. Profile name: unrestricted
2. IP type: IPv4
3. APN: unrestricted
4. And then leave the rest of the fields blank.
Save and set the new “Unrestricted APN” profile as your default profile. The noticeable change when connecting to the internet is your our IP address will change from 197.x.x.x to 41.x.x.x

Please note that the settings work on any device that you use to login to the internet, so your WiFi router or mobile device can be configured to work with the new profile settings.

LearnDash – Auto enroll users

08/07/2018 / Archie Makuwa

Recently, a client of mine wanted to run a promotion on some of his online courses. He wanted to get users to signup, and then automatically enrolled to a certain course/courses:

The solution was relatively easy:

//function auto_enroll_journey1( $user_id ) {

    $current_user = wp_get_current_user();
    $user_id = $current_user->ID;

    if ( in_array( 'subscriber', (array) $current_user->roles ) ) {

        if( !sfwd_lms_has_access(1521, $user_id) ) {
            ld_update_course_access( $user_id, 1521, false );       // 1521 - Journey 1
        }

    }

//}

//add_filter('sfwd_lms_has_access', 'auto_enroll_journey1', 10, 3);

//function auto_enroll_journey1( $user_id ) {

$current_user = wp_get_current_user();

$user_id = $current_user->ID;

if ( in_array( 'subscriber', (array) $current_user->roles ) ) {

if( !sfwd_lms_has_access(1521, $user_id) ) {

ld_update_course_access( $user_id, 1521, false ); // 1521 - Journey 1

}

//}

//add_filter('sfwd_lms_has_access', 'auto_enroll_journey1', 10, 3);

You can run the snippet straight, within another function or a function its own, as indicated above.

Overwrite WordPress’ wp_admin from email address

30/06/2018 / Archie Makuwa

Have you ever wanted to change the “from:” in WordPress using the CODE? See below for a quick solution (snippet).

add_filter('wp_mail_from','yoursite_wp_mail_from');
function yoursite_wp_mail_from($content_type) {
    return 'i_am@bossinabentley.co.za';
}
add_filter('wp_mail_from_name','yoursite_wp_mail_from_name');
function yoursite_wp_mail_from_name($name) {
    return 'A Boss In A Bentley';
}

add_filter('wp_mail_from','yoursite_wp_mail_from');

function yoursite_wp_mail_from($content_type) {

return 'i_am@bossinabentley.co.za';

}

add_filter('wp_mail_from_name','yoursite_wp_mail_from_name');

function yoursite_wp_mail_from_name($name) {

return 'A Boss In A Bentley';

}

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'