In the first part of this tutorial we created a very simple jQuery plugin, but the main problem with what we created was that the user didn't have any control over how the tooltip would appear, and in this second part we will create the necessary code to allow the user to change the defaults and replace them with their styles. Creating our options ... The first thing we need to do to allow the user to pass their own styles when calling the plugin is change the code we use to name the plugin, our code was: $.fn.tooltipMe...
Creating your first jQuery plugin means that you’re no longer a beginner. You can now create something that you can use over and over again, or even package and sell to other developers. It may seem hard, but in reality creating a jQuery plugin is actually a simple process. In this article I’ll show you how simple by creating a simple tooltip plugin. The markup ... Any jQuery plugin requires some kind of markup and in our case all the plugin will need to be able to run properly is an anchor tag that...
We’re creating more and more demanding websites, with more and more assets. Now more than ever we need to make our sites blazing fast on desktop and on mobile. Fortunately there are some simple steps that we can take to achieve this… 1) Optimize images ... This may seem obvious, but it’s surprising how many people fail to optimize their images. What’s more, there’s a huge difference between using a medium sized image, and a fully optimized image. Image optimization doesn’t just reduce the...
Welcome, friends, to your first lesson in version control. This article is entirely for non-expert-programmers. If you’re already an expert, this article isn't for you. Shoo. For those programmers who don’t already know it all, readable information can be hard to come by. Most of the things I've read about version control systems like Git and Subversion are written in harshly-accented programmerese. This is my attempt to simplify the concept in plain English for those of us who are just getting...
It sounds really impossible that a language like CSS can be object oriented but it is possible to implement OOP ideas in CSS to make it into a much more pleasant writing experience whilst along the way making your CSS faster to load. What is object-oriented CSS? ... When you hear “object oriented CSS” you may think that this is somehow a new CSS, a pre-processor or something that was added to CSS but no, object-oriented CSS is the same CSS we have always written; but in a cleaner, dryer way so it's merely...
The most amazing part of all the technologies that came with HTML5 is how easily they can be used to create little apps that make our lives a lot easier. It’s surprisingly simple to combine them to create something practical and simple. Today we will be using geolocation and the Weather Underground API to create a simple Weather App that will determine where you are and tell you the current weather for your location. To work with the Weather Underground API you will need an API key but don’t worry...
Nowadays, most of us use JavaScript frameworks. That’s because they allow you to abstract the DOM and avoid dealing with HTML. These frameworks are always cropping up, some good, some bad. One of the better is React, which has been put together by the team at Facebook. React is a library for building user interfaces that uses JSX, an XML-based template language that compiles to JavaScript and in essence creates a virtual DOM for you. Using React ... To get started head over to the website and download...
In the first article we saw the beginnings of a an Anchor theme, as we created the header and got a better understanding how Anchor works under the hood. In this article it's time to get our hands dirty in the posts.php file and with the footer in order to finish our very simple Anchor theme. posts.php ... This is the page where you get all the home page posts, the blog page if you wish, and this is where we’ll perform our main loop and place all our posts. The first thing we need to do is get the header and open our...