Archie Makuwa

Category: Javascript (page 1 of 2)

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)


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.


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

In this example, I am making of the Vue FontAwesome library which can be downloaded here:

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:

Using HTML5 Web Storage

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)

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.



Wrap colorbox main div into another Raw

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:

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:


How to remove a div containing a button using jQuery




How to compare the result of success function of ajax with a string

So I got this script from the internet that was supposed to make my life easy… but a one day job ended up becoming a 3 day job and this was why:

But… (wait for it)

So in a nutshell: 
Don’t forget to sanitise your results before comparisons…

Adding elements to the home page using JavaScript

This is how you go about doing that:

Another alternative method:


Reduce Wistia Plugin Load Time

If you happen to experience issues with Wistia Plugin load time because you were not loading your javascript asynchronously, try using the following script:



Filtering duplicate img src with jQuery / javascript and only display the first image

Filtering duplicate img src with jQuery / javascript and only display the first image:

Here’s the little trick:



Copyright © 2019 Archie Makuwa

Theme by Anders NorenUp ↑