How To Install xdebug on PHP 7.1

in Testing

Xdebug is a very useful tool when it comes to PHP development, it's a PHP extension that allows you to profile and debug your PHP code. It even allows you...

Read More


Create Date Archives Page – VueJS WordPress Theme

in WordPress Theme

In this tutorial, we're going to build a date archives page for your WordPress theme so that you can display a list of your previous posts sorted by date. If...

Read More


CSS Double Circle Bounce

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Create Search Results Page – VueJS WordPress Theme

in WordPress Theme

In this tutorial we're going to revisit the Creating the Homepage tutorial and create the search form we added to the homepage. In the Homepage tutorial we added a component...

Read More


CSS Dot Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Create Author Page – VueJS WordPress Theme

in WordPress Theme

If you have a multi-author blog then you will have information about the author of the post on the page so that user's can find out more about the author...

Read More


FREE

Bootstrapping your MEAN Stack application with Openshift, Kubernetes and Docker

in Articles

The MEAN stack is a popular, open-source, full-stack JavaScript framework for building dynamic websites and web applications. By combining useful JavaScript modules such as MongoDB, Express.js, AngularJS, and Node.js. The...

Read More


CSS Walking Circles

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Create Category Page – VueJS WordPress Theme

in WordPress Theme

The next tutorial in the VueJS WordPress theme series we're going to create the category pages for the theme. So far in the theme, we've created the homepage, the blog...

Read More


Create Static Pages – VueJS WordPress Theme

in WordPress Theme

In the last tutorial we setup routes and components for our blog posts, we did this with dynamic routes. In this tutorial, we're going to create the routes and VueJS...

Read More


Create The Post Page – VueJS WordPress Theme

in WordPress Theme

In the previous tutorial, we created the Homepage for the VueJS theme, with the Homepage showing a list of posts with a link to the post page we can now...

Read More


FREE

Free Files For April 2017

in Freebies

Each month the Envato marketplace brings you free premium files, here's the free files for April 2017. Envato is a web marketplace where you can get premium files for different...

Read More


CSS Clock Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Creating The Homepage – VueJS WordPress Theme

in WordPress Theme

With the project setup, we can now focus on building the pages we need for the WordPress theme. First we're going to start off with the homepage, throughout this project...

Read More


Building The App.vue Component

in WordPress Theme

The most important component that we need to create is the vue App.vue component, this is the main Vue component that the application will use. This is the file that...

Read More


Making API Requests With Axios

in WordPress Theme

To make requests to the WordPress REST API we need to install another library to help us make these requests. We can use something like jQuery which has helpers for...

Read More


Setup The WordPress Routes

in WordPress Theme

With the styling for the theme setup and ready to go we can set up the routing for the WordPress theme. In a normal WordPress build, this is the section...

Read More


CSS Circle Triangle

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Setup Styling For The Theme

in WordPress Theme

For the styling of this project, we'll simply be going to use a CSS framework like Bulma to speed things up. Bulma is a CSS framework that uses SASS and...

Read More


VueJS Project Structure

in WordPress Theme

In the previous tutorial, we created a new VueJS project using the vue-cli command, in this tutorial we're going to investigate what this has done and look into how we...

Read More


Building A WordPress Theme Using VueJS

in WordPress Theme

In this series, we're going to use VueJS to create a WordPress theme using the WordPress REST API to display your WordPress content. I'll try to go through all the...

Read More


FREE

Creating A REST API With Lumen

in Lumen

In this article, we will investigate how you can easily create a simple REST API using Lumen. To illustrate this API, we'll create a Books table, and then perform CRUD...

Read More


CSS Circle Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


VueJS Slots

in VueJS Basics

VueJS Slots is a way of injecting content into your rendered Vue components. This allows the component to become more flexible and reusable. In this tutorial, we're going to investigate...

Read More


FREE

Remove Image Backgrounds with PhotoScissors

in Resources

Introducing PhotoScissors v3. This incredibly popular Windows and Mac app is now even better than ever! Ever want to put your friend's head on an elephant's body? Not for real,...

Read More


CSS Box Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


CSS Block Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


FREE

Free Files For March 2017

in Freebies

Each month the Envato marketplace brings you free premium files, here's the free files for March 2017. Envato is a web marketplace where you can get premium files for different...

Read More


WordPress REST API Authentication

in REST API

In this tutorial, we're going to investigate authentication with the WordPress REST API. By default, the WordPress REST API has some open endpoints and some cookie authentication endpoints. The main...

Read More


CSS Battery Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


CSS Animated Circle Spinner 2

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Create A Welcome Page For Your WordPress Plugin

in Plugin Development

Whenever you install WordPress or upgrade WordPress you get a nice welcome page that shows you some of the features that you've just installed. Some big WordPress plugins do the...

Read More


CSS Typing Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Wait For iFrame To Load jQuery

in jQuery

Recently I've had a project that needed to do some work in JavaScript on code within an iframe. The problem I was facing was that the website inside the iframe...

Read More


FREE

Organising Your Hosts File

in Web Development

If you're freelancer or work for a large company you could find yourself with a large and sometimes out of control /etc/hosts file. I can have about 50 sites on...

Read More


Deploy Code With Git Push

in Git

In this tutorial we're going to learn about quite possibly the easiest way of deploying your code onto a staging or production environment. In the past it was common place...

Read More


CSS Animated Circle Spinner

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


FREE

Free Files For February 2017

in Freebies

Each month the Envato marketplace brings you free premium files, here's the free files for February 2017. Envato is a web marketplace where you can get premium files for different...

Read More


Modify WordPress REST Endpoint Response

in REST API

When working with the WordPress REST API you can get all the information back you need for a specific post. This data will consist of all the standard information such...

Read More


CSS Typing Indicator

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Create Your Own WordPress Rest Endpoints

in REST API

As the REST API is still relatively new there might be some endpoints that don't currently exist such as getting the post archives where you would normally use the function...

Read More


FREE

MySQL Workbench To Laravel Migration

in Laravel

We all have our favourite database GUIs, some work with PHPMyAdmin others use tools such as MySQL Workbench. I tend to use MySQL Workbench more than any database GUI tool....

Read More


CSS Three Circle Loader

in CSS Loaders

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please...

Read More


Get Posts Between Certain Dates WordPress REST API

in REST API

When building your WordPress theme using the REST API one of the pages you might want to correct is the Post archives page that displays all the posts for a...

Read More


How To Disable Auto WordPress Responsive Images

in Media

As of 4.4 WordPress will automatically add the srcset attribute to the images in your content. The srcset attribute allows you to define different images to use at different viewport...

Read More


FREE

WordPress Shortcode To Display Logged In Author Posts

in Shortcodes

In this tutorial we're going to build a WordPress shortcode that will allow us to only show the posts of the logged in user. This is useful if you have...

Read More


FREE

CSS Three Bar Loader

in CSS Loaders

This is the first post in the series of creating CSS only loaders. Loaders are used to show the user that the app is busy preforming a task and that...

Read More


Only Allow Access To REST To Logged In Users

in REST API

The WordPress REST API is a very exciting feature of WordPress, it was introduced into the core in version 4.7 and is getting a lot of attention from the developers...

Read More


Installing Laravel With Homestead

in Laravel

To get started first we need to install Laravel. Installing Laravel There are multiple ways you can install Laravel, the easiest way you can install Laravel is by using composer....

Read More


FREE

Todo Application

in Todo Application

Recently I've wrote about how you can best get started with Laravel and also how to get started with VueJS. Since building a Todo application is one of the best...

Read More


FREE

WordPress REST API

in REST API

WordPress is the most popular CMS used on the internet and has been for some time. Because of popularity and being open source software there are 100s/1000s of people looking...

Read More


Building A Weather App With VueJS

in VueJS

In this tutorial we're going to build a component we can use to display the weather of a location in VueJS. This component will be created with a location search...

Read More


FREE

Cleaning Up After Your Plugin

in Plugin Development

In this tutorial we're going to look into how you can clean up after your WordPress plugin when it's deactivated or uninstalled. This is an area of plugin development that...

Read More


FREE

Free Files For January 2017

in Freebies

Happy New Year and more free files from Envato. Each month the Envato marketplace brings you free premium files, here's the first free files for January 2017. Envato is a...

Read More


VueJS: Single File Components

in VueJS Basics

When you're defining new components in VueJS you can use the method Vue.component like we've used in a previous tutorial about Vue. This has created a Vue component of todo-item...

Read More


VueJS: Mixins

in VueJS Basics

Mixins are a way of reusing functionality from within your Vue Components. A mixing will use the same properties as a component such as created, methods and when a component...

Read More


VueJS: Transition Effects

in VueJS Basics

VueJS provides an inbuilt way of providing transitions when making changes to the DOM, these can be applied when inserting items, updating items or deleting items from the DOM. Transition...

Read More


VueJS: Route Meta Data

in VueJS Router

You can add additional information to a specific route by giving it route meta data, this meta data can then be picked up by the router on the beforeEach() function...

Read More


VueJS: Vue Router Restricting Routes

in VueJS Router

In the previous examples of using the Vue Router we learnt how to build routes and how we can navigate around the application to view the previous examples please see...

Read More


VueJS: Vue Router History

in VueJS Router

Looking at some of the examples we have of the Vue router you'll notice that the browser is automatically add a hash to the end of the URL. This is...

Read More


VueJS: Redirect Unmatched Routes To 404

in VueJS Router

Like any other website if the router can not find the URL you're navigating to then you need to display a 404 page to your user for them to know...

Read More


VueJS: Vue Router Change Page

in VueJS Router

Sometimes while you're developing you find situations where you need to redirect to a different page or go back to the last page. For example you could have a form...

Read More


VueJS: Vue Router Child Paths

in VueJS Router

In a real world example you'll be creating an application that has a few nested URLs for example a user account will have URLs such as /account /account/security /account/notifications /account/billing...

Read More


VueJS: Vue Router Reacting To Route Changes

in VueJS Router

The the last example we learnt how to create dynamic routes in VueJs. This allows you to have the same component be reused on multiple page, for example if we...

Read More


VueJS: Vue Router Dynamic Routes

in VueJS Router

In a previous example we learnt how to use the Vue Router. In this example we just used simple links to a single page. But as you know most apps...

Read More


Export All WordPress URLs

in SEO

In this tutorial we're going to create a way you can export all of your WordPress URLs into a CSV file. This is very important task to do when migrating...

Read More


VueJS: Vue Router

in VueJS Router

An important part of a JavaScript website is the ability to show different content depending on the URL you navigate to. In traditional web development this URL will point to...

Read More


VueJS: Building A Comments Section

in VueJS

To carry on through the learning of VueJS we're going to build a real world example of creating a comments section in your website. We're going to use an API...

Read More


FREE

Free Files For December 2016

in Freebies

Start of the month again so we get some more free files from Envato. Each month the Envato marketplace brings you free premium files, here's the first free files for...

Read More


VueJS: Building A Simple Calculator

in VueJS

In previous tutorials of VueJS we've learnt the basics of how to use Vue, but we haven't really learning how to build an application. In this tutorial we're going to...

Read More


VueJS: Building A Confirmation Modal

in VueJS

In this tutorial we're going to learn how you can create a deletion confirmation modal in VueJS. This technique is important when you have a form or a link asking...

Read More


VueJS CRUD: Product Search

in VueJS Crud

With a product list on the page it will be a good idea to be able to search through the products by product name so that you can find the...

Read More


VueJS: Make API Requests With Vue Resource

in VueJS Basics

When developing in JavaScript the majority of the ways you get data to show on the screen is through APIs, these will return JSON format of data and parsed by...

Read More


VueJS CRUD: Form Notifications

in VueJS Crud

The notification component will be used to display an alert to the user either success or error. This component requires data to be passed into it via props, this allows...

Read More


VueJS CRUD: Delete Product Page

in VueJS Crud

The Delete Product Page is a confirmation page used to delete the product from the database. It will simply consist of a button to submit the form, on submitting the...

Read More


VueJS CRUD: Edit Product Page

in VueJS Crud

The Edit Product Page will be used to allow a user to edit a specific product. This needs to work off a URL like /product/edit/:id with :id being the product...

Read More


VueJS: Vue Components

in VueJS Basics

In this tutorial we're going to learn how we can create reuseable templates in VueJS by creating Vue components. For this example we're going to re-visit the todo list loop...

Read More


VueJS CRUD: Create Product Page

in VueJS Crud

The Create Product Page will display a form allowing us to fill out new product data and POST this to the API to store the product data in the JSON...

Read More


VueJS CRUD: All Products Page

in VueJS Crud

The first page we're going to create is the All Products page this in very simple at the moment and will display all the products located in the products data...

Read More


FREE

Black Friday Deals 2016

in Resources

Black Friday is the time of year where if you want a new hosting provider, if you want a new plugin, a new Premium Theme or anything tool for your...

Read More


VueJS: Computed Functions

in VueJS Basics

In a previous tutorial we learnt how you can add a message to the page in VueJS by using the handlebars syntax. Along with simply outputting data properties on the...

Read More


VueJS CRUD: Instantiate Application

in VueJS Crud

The main.js is the import file for webpack so this is the file that we need to bootstrap the application from. First we need to import Vue which is simply...

Read More


VueJS CRUD: Single HTML Page

in VueJS Crud

This CRUD application will run off a single HTML page, this takes advantage of the VueJS router functionality, by allowing us to replace the components in view by switching out...

Read More


VueJS CRUD: Create a Node.js API Using Express

in VueJS Crud

For this project we're going to build an API from Node.js to process the products we can use in the CRUD application. Normally I would use an API using something...

Read More


VueJS CRUD: Install Webpack

in VueJS Crud

What Is Webpack? The image above sums up Webpack perfectly, it takes your project modules like Javascript, CSS, images and bundles them up into static files for the browser to...

Read More


VueJS: Click Counter

in VueJS Basics

In this tutorial we're going to build a simple click counter using VueJS. For this we're going to simply have a button on the page and on the click event...

Read More


VueJS CRUD: NPM To Load Dependencies

in VueJS Crud

What Is NPM? NPM is the Node Package Manager that is used to install, publish and manage your node programs. If you're coming from a PHP background then you can...

Read More


VueJS CRUD: Setup Application

in VueJS Crud

To start off this project we first need to create and setup the structure of our files. At the root of the project we have index.html package.json README.md server.js webpack.config.js...

Read More


FREE

VueJS: Preventing Default

in VueJS Basics

A common task you have to do when working on JavaScript applications is preventing default browser behaviour, probably the most common situation you find yourself in with this is when...

Read More


FREE

CRUD Application With VueJS

in VueJS Crud

In this series we're going to learn how to create crud pages for your application using VueJS. VueJS is gaining a lot of popularity at the moment in front-end development...

Read More


FREE

VueJS: Managing User Input

in VueJS Basics

In a previous tutorial we looked at how you can bind Vue data points to HTML attributes. In this tutorial we're going to look into how you can bind Vue...

Read More


FREE

Whats New In WordPress 4.7

in WordPress Versions

WordPress 4.7 is in beta 2 and there are some nice new features being added to the new version. Hopefully they will be fully released soon, but here's some of...

Read More


FREE

VueJS: Binding To A Class

in VueJS Basics

In a previous VueJS tutorial we learnt how you can bind to a HTML attribute such as title, in this tutorial we're going to go further with that concept and...

Read More


FREE

ThemeFurnace Theme Lucienne & 50% Off Coupon

in Resources

Lucienne is the latest Theme available as part of the ThemeFurnace membership. There is now a total 22 WordPress themes available to all members of the ThemeFurnace theme shop. Normally...

Read More


FREE

VueJS: Loop List Elements

in VueJS Basics

Just like other programming languages you'll need to be able to loop through data and perform a common task with each data point. The most common JavaScript data form is...

Read More


FREE

Free Files For November 2016

in Freebies

Start of the month again so we get some more free files from Envato. Each month the Envato marketplace brings you free premium files, here's the first free files for...

Read More


FREE

VueJS: Conditional Show And Hide

in VueJS Basics

Previously we've seen in Vue how to display data to the page and how to bind data to a HTML attribute. In this tutorial we're going to use conditions to...

Read More


FREE

VueJS: Bind To HTML Attribute

in VueJS Basics

In the previous tutorial we saw how we can use the data property to display content on the screen, is this you'll see how you can bind this data to...

Read More


FREE

Display Data With VueJS

in VueJS Basics

This is the first post from the learning VueJS series, you can see all the code examples in this series on the following Github repository. Vue Examples The first thing...

Read More


FREE

Getting Started With VueJS

in VueJS Basics

In this tutorial we're going to look at the basics of getting started with VueJS. VueJS is a JavaScript framework which is focused on the view layer only, and is...

Read More


FREE

The Complete Web Developer Course

in Resources

Whether you're a total programming amateur or an innovative coder, you have plenty to gain from this resourceful programming course, from Rob Percival. The Complete Web Developer Course will have...

Read More


FREE

Svg Patterns With Hero patterns

in Resources

Hero Patterns is a nice website that offers free SVG pattern background generators. With SVG quickly growing as the preferred method for using graphics on the web, there are still...

Read More


CSS Animation Link Underline

in Animation

In this tutorial we're going to investigate how you can use CSS animation using transition to create link effects on the hover event of the visitor. Were going to look...

Read More