Archie Makuwa

Category: Javascript (page 1 of 2)

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

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

 

How to remove a div containing a button using jQuery

HTML

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:

 

Google Maps with a Marker and an InfoWindow

Ja, it is what it is… You are probably here because you battled to get your Google map to load with a marker and an InfoWindow. Just copy and paste the script below in your code and amend as desired.

ja

 

Introduction to Grunt.js – The grunt file

Hello and welcome to Grunt. This is my setup file…

 

Olderposts

Copyright © 2019 Archie Makuwa

Theme by Anders NorenUp ↑