Archie Makuwa

Category: Html5

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

HTML5 download attribute

Well, I recently got lost when a colleague asked me to add a download attribute to the price list (pdf) link… I was like: “What the f*…”

This is how you would go about using the download attribute:

…and when the user clicks the link, the download attribute appears in the save dialog instead of the garbled mess that was there before. In this case, the file will be downloaded as pricelist.pdf. The download attribute also triggers a force download.

How to create w mobile 3 level menu

This is how you would go about creating a three level WordPress menu that clicks to open all the way down to the third level sub menu. Using the normal default WordPress menu:

And you can have a menu that looks like this:

menu

 

And this is is the javascript that makes the magic happens:

 

WordPress shortcode to easily integrate a Google Map on your blog

To create the shortcode, paste the code below into your functions.php file:

Once you have saved your function.php file, you can start integrating Google Maps into your posts and pages. To do so, get the url of the map you’d like to display, and use the shortcode as shown below:

or with custom width and height parameters:

Thanks to Rockable Themes for the tip!

What is HTML5?

Introduction

I assume you are familiar with HTML (Hype Text Markup Language) and in this case, HTML4. Wikipedia describes HTML5 as the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997). HTML5 is still currently under development although you can already start implementing it in your designs; however changes to the specifications are inevitable. This means that, not all of its features are supported yet by any browser and this means you should be careful when coding with the HTML5 standard.

The core of HTML5 is to improve the language support for the latest multimedia while keeping it easily readable by humans, computers and other devices alike.

 

 

Show me an example of HTML5 code:

 

 

HTML5 tags explained

<!DOCTYPE html> – to indicate that the doctype and HTML content is coded in HTML5

 

<article> – For a standalone article on a page. Articles can be nested within other articles; for example, a blog post would be contained in <article> tags and each comment would be contained within a nested <article> tag.

 

<aside> – For content contained in an aside. Often used for navigation elements or for a list of articles or categories (e.g., in a blog).

 

<audio> – For embedding audio files.

 

<embed> – For backwards compatibility with the non-standard (but well supported) <embed> tag in HTML4.

 

<command> – For command buttons similar to what you might see in the Microsoft Office 2010 ribbon. The <command> tag must be nested in <menu>.

 

<footer> – For the footer of a page or a section.

 

<header> – For the header of a page or a section.

 

<nav> – For holding a group of navigation links.

 

<section> – For creating a <section> on the page. This helps the browser (user agent) determine the page outline.

 

<video> – For embedding video files

 

<progress> – For a progress indicator (e.g., for a loading).

 

<mark> – For showing marked (or highlighted) text. Unlike <strong> or <em>, <mark> doesn’t give the text any special meaning. The best example is marking a word or phrase that a user has searched on within the search results.

 

For more HTML5 tags, please goto: http://www.w3schools.com/tags/default.asp

 

Copyright © 2019 Archie Makuwa

Theme by Anders NorenUp ↑