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


FREE

Getting Started With Laravel

in Laravel

Laravel is one of the most popular, if not THE most popular PHP framework and after using Laravel and comparing it with the likes of Zend and Symfony it's easy...

Read More


FREE

Javascript Copy and Paste

in Javascript

In a previous tutorial we saw how you can create a copy and paste button using jQuery and the ZeroClipboard flash extension. The problem with this is that it requires...

Read More


Add Font Awesome To WordPress Menu Items

in Navigation Menus

Font awesome is a huge library of icons that uses fonts and CSS pseudo selectors to add these icons to your page. This technique means loading the icons is very...

Read More


FREE

Moving To Javascript Development

in Javascript

Over the last couple of years there's been a growing trend in web development, this is the moving away from traditional back-end development and more to front-end development using Javascript....

Read More


FREE

Free Files For October 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


Hotlink Protection On Nginx

in Web Development

I recently created a WordPress plugin called Redirection Manager which will keep track of all 404s on your website and log the URL and the referrer of the link. In...

Read More


FREE

20% Off Inky deals Daily Offers and Deals

in Coupons

Inky deals gives you loads of great deals daily for things such as: Graphic Design WordPress Photoshop Web Design Vector Illustrations Bundles Fonts Apps Daily $0.99 deals Use this voucher...

Read More


CSS Bouncing Arrow

in Animation

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .arrow { cursor: pointer; position: relative; bottom:...

Read More


Fixing Analytics Leverage Browser Caching

in Web Development

If you've read my previous articles you would of seen a post from last month about trying to reach the 100/100 on Google's pagespeed tool. This doesn't necessarily improve your...

Read More


FREE

But It’s Not Supported In IE

in Articles

As a web developer or web designer most likely you've heard somebody say it's not supported on IE? Or worse it's not supported in IE6. I've had people say this...

Read More


How To Use Page Templates In A Plugin

in Plugin Development

In this tutorial we're going to investigate how you can override a theme template files from your WordPress plugins. For this we're going to be using two filters: theme_page_templates template_include...

Read More


FREE

JSON Of VAT Values

in Resources

If you're working on a project that needs to get VAT rates you may find this repository useful. It's a Github repository located Github VAT Rates Which provides you with...

Read More


Change WordPress Default Email From Name

in WordPress

If you send emails from your WordPress site using the wp_mail() function you might of noticed that the email address and the email name is not being sent as you...

Read More


FREE

Javascript Check For Daylight Saving

in Javascript

Trying to work out the correct DateTime offset of a visitor can be tricky, the easiest way of doing this would be with JavaScript. You can find out the visitors...

Read More


How To Reverse jQuery SlideUp And SlideDown

in jQuery

By default jQuery slideDown will obviously slide the element down to display the contents and slideUp will slide the element up to hide the contents. What if you want to...

Read More


FREE

How To Intercept 404 Errors In WordPress

in SEO

When you go to a URL in WordPress it first needs to analyse this URL and decide what content it is going to show to the user. WordPress will take...

Read More


FREE

KeyCDN Giveaway – Win a 1TB CDN Account

in Resources

Enter below to win 1 of 3, 1TB CDN accounts from KeyCDN to turbocharge your website. KeyCDN KeyCDN is a high-performance content delivery network provider based in Switzerland, which turbocharges...

Read More


FREE

Free Files For September 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


Back To Top Pure JavaScript

in Javascript

A popular trend you see on many websites is the back to top button, where the user will click this button to automatically scroll back to the top of the...

Read More


FREE

Attempt At Scoring 100 On Google PageSpeed

in Web Development

With PageSpeed being so important to Google and other search engines they have created a nice tool to judge the speed and optimization of your website by using Google PageSpeed...

Read More


FREE

Free Files For August 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

Meet Drizzle, a simple paywall for your premium content

in Resources

About Drizzle If you’re a full-time blogger or publisher and not happy with monetizing your content using intrusive banner ads, you may want to consider paid subscriptions and micropayments. Drizzle...

Read More


FREE

Development Workflow With Vagrant

in Web Development

In this tutorial we're going to look into using Vagrant and why we should include this in our development workflow. What Is Vagrant Vagrant allows you to build and configure...

Read More


FREE

Configuring Multiple Database Connections In Lumen

in Laravel

In Lumen you can create a database connection by filling out the default information you can find in .env file. But if you need multiple database connections you can do...

Read More


FREE

Free Files For July 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

Nth-child Sass Mixins

in Sass

In this tutorial we're going to investigate some quick Sass mixins that can make working with nth-child that little bit easier. The CSS nth-child selector allows you to select a...

Read More


FREE

How To Install Bower on Ubuntu

in Web Development

In this tutorial we're going to be installing Bower onto Ubuntu. Bower is a package manager for front-end libraries, similar to that of composer. It runs on Node.js and uses...

Read More


FREE

List All Containers On Docker

in Web Development

Docker is a piece of software that allows you to run a complete filesystem in it's own environment like a virtual machine buy by using containers to wrap up the...

Read More


FREE

Free Files For June 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


Build Your Own Responsive Tester Page

in Media Queries

Today with all the different devices we can use on the internet it is very important that your website is responsive and can be viewed in any browser on any...

Read More