Archie Makuwa

Append list items to another list using jQuery

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

 

Sample jQuery

 

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?

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

 

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

Managing Wildcard Subdomains with Vue-Router

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

 

Quick rsync snippet

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).

  1. Zip the files (I find this cleaner)

     
  2. Rsync the files

     
  3. Unzip the files and move them into correct paths

     

 

How to integrate FontAwesome with Nuxt.js using Yarn

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

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

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

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):

 

FontAwesome icon reference: 

https://fontawesome.com/icons

A quick debugging PHP code in WordPress snippet

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.

 

 

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

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

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.

  1. 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)
  2. Go to “Settings > Dial-up “
  3. And then “Profile Management”
  4. 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.
  5. 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

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:

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

« Older posts

Copyright © 2019 Archie Makuwa

Theme by Anders NorenUp ↑