Archie Makuwa

jQuery if window width is between.js

19/06/2019 / Archie Makuwa

Snipped Wednesday

$(document).ready(function(){
    if ( $(window).width() > 480 && $(window).width() < 768) {
       // do stuff
    } else{
       // do stuff
    }
});

$(document).ready(function(){

if ( $(window).width() > 480 && $(window).width() < 768) {

// do stuff

} else{

// do stuff

}

});

Append list items to another list using jQuery

05/06/2019 / Archie Makuwa

Say you have a website with two menus and you want to move the child list items to the parent list items at a certain breakpoint (for mobile devices). This is how you go about accomplishing that:

Sample HTML

<ul class="parent-menu">
   <li>...</>
   <li>...</>
   <li>...</>
</ul>

<ul class="child-menu">
   <li>...</>
   <li>...</>
   <li>...</>
</ul>

</ul>

</ul>

Sample jQuery

var $window = $(window);

function checkWidth() {
   
    // get window size (on load on on event)
    var windowsize = $window.width();       
    
    // Move top menu items into parent menu at 991px or below
    if (windowsize <= 991) {
 
        var child_menu = $('ul.child-menu').remove().children('li');
        var count = child_menu.lenth;
      
        child_menu.each(function(i) {

            // in case you need to add special classes to the list items
            var new_primary_menu = $(this).addClass("from-primary-menu");     
            
            // appendTo parent menu
            new_primary_menu.appendTo('ul.primary-menu');   

        });
        
    } 

}


/ Execute on load 
checkWidth();   

// Bind event listener for window resize
$(window).resize(checkWidth);

var $window = $(window);

function checkWidth() {

// get window size (on load on on event)

var windowsize = $window.width();

// Move top menu items into parent menu at 991px or below

if (windowsize <= 991) {

var child_menu = $('ul.child-menu').remove().children('li');

var count = child_menu.lenth;

child_menu.each(function(i) {

// in case you need to add special classes to the list items

var new_primary_menu = $(this).addClass("from-primary-menu");

// appendTo parent menu

new_primary_menu.appendTo('ul.primary-menu');

});

}

/ Execute on load

checkWidth();

// Bind event listener for window resize

$(window).resize(checkWidth);

The above script it to simply move list items from one unordered list to another. You still have to write your own custom script to deal with how you want the menu to work. Here are a few inspirations from CodePen.

jQuery: How to detect window width on the fly?

05/06/2019 / Archie Makuwa

jQuery: How to detect window width on the fly? (Script from StackOverflow)

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

$(document).ready(function() {

// Optimalisation: Store the references outside the event handler:

var $window = $(window);

var $pane = $('#pane1');

function checkWidth() {

var windowsize = $window.width();

if (windowsize > 440) {

//if the window is greater than 440px wide then turn on jScrollPane..

$pane.jScrollPane({

scrollbarWidth:15,

scrollbarMargin:52

});

}

// Execute on load

checkWidth();

// Bind event listener

$(window).resize(checkWidth);

});

Random: Just noticed @netflix’s “How to sell drugs online (fast)” uses @vuejs and @vuetifyjs

02/06/2019 / Archie Makuwa

Just noticed @netflix's "How to sell drugs online (fast)" uses @vuejs and @vuetifyjs

(Seems to be a Todo boilerplate, ep2 @ 15:00)

Pretty fun to see 😃🎉#HowToSellDrugsOnlineFast pic.twitter.com/JsCtRiNuSd

— data (@daniandl) June 2, 2019

Managing Wildcard Subdomains with Vue-Router

24/05/2019 / Archie Makuwa

Source: https://levelup.gitconnected.com/managing-wildcard-subdomains-with-vue-router-9fd74518f2f5

const router = new VueRouter({
	routes: [
		{
			path: '*', 
			name: user, 
			component: User
		}
	]
})

router.beforeEach((to, from, next) => {
	var subdir = window.location.host.split('.')[0]
	var domain = 'location'		// the name of your website 
	var pageToLoad = 'user'		// the nameof your named route 

	if (subdir !== domain && to.name !== pageToLoad) {
		next.({name: pageToLoad, params: {}}) 	// make a new request to the page 
	} else {
		next()		// if there is no subdirectory, proceed as normal 
	}
})

const router = new VueRouter({

routes: [

{

path: '*',

name: user,

component: User

}

]

})

router.beforeEach((to, from, next) => {

var subdir = window.location.host.split('.')[0]

var domain = 'location' // the name of your website

var pageToLoad = 'user' // the nameof your named route

if (subdir !== domain && to.name !== pageToLoad) {

next.({name: pageToLoad, params: {}}) // make a new request to the page

} else {

next() // if there is no subdirectory, proceed as normal

}

})

Quick rsync snippet

04/03/2019 / Archie Makuwa

A little script for the days when you head is not working. The script copies files from your local machine on to a remote server (assuming you don’t have SSH keys stored on the server).

Zip the files (I find this cleaner)

zip -r myZippedFolderToUpload.zip folderToZip

1

zip -r myZippedFolderToUpload.zip folderToZip
Rsync the files

rsync -azv --progress ~/files/myZippedFolderToUpload.zip : user@192.168.1.1/~/remoteFolderReceivingUploads

1

rsync -azv --progress ~/files/myZippedFolderToUpload.zip : user@192.168.1.1/~/remoteFolderReceivingUploads
Unzip the files and move them into correct paths

unzip myZippedFolderToUpload.zip . // this will unzip to current folder

1

unzip myZippedFolderToUpload.zip . // this will unzip to current folder

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.