All posts in Web Development

jQuery 1.8.0 is here

Its always a great morning when you find out a fantastic library such as jQuery has been updated to a new version with more benefits and much better performance overall, it offers a lot of handy improvements to help all of us as developers including a re-architected version of the Sizzle engine which drives the most powerful JavaScript selector engine I personally have ever used.

Other features include vendor prefixed properties so no longer do we have to do things like:

$('element').css({
    '-webkit-transform' : 'rotate(90deg)',
    '-moz-transform'    : 'rotate(90deg)',
    '-ms-transform'     : 'rotate(90deg)',
    '-o-transform'      : 'rotate(90deg)',
    'transform'         : 'rotate(90deg)'
});

Now all we need to do is this:

$('element').css('transform', 'rotate(90deg)');

I think this feature alone will make my life easier since now I won’t need to contend with un-needed overhead that otherwise slowed down performance, for a full list of changes, fixes and new features see the following url.

http://blog.jquery.com/2012/08/09/jquery-1-8-released/

My initial thoughts about SASS

I like many others are always looking towards new ways to improve our workflow habit’s so we can cut down on our development time making our day-to-day job much more enjoyable for us and keeps our clients happy, one new technology that has been a big hit for pretty much the last two years now is preprocessors for CSS which can be explained by the following quote by Wikipedia.

In computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers.

We can take advantage of these preprocessors by making simple and advanced maths that normally we couldn’t if we used a plain old .css file, because of these advantages we can also extend the abilities the compilers can manage allowing for the most efficient style sheet a developer could ever hope for.

Read more…

LESS CSS: Quick Tip – 1

I’m now starting to get a little deeper into the LESS CSS language and i thought i would challenge myself early on, basically i wanted to create a namespace that contained functions i could reference for things such as box-shadow and border-radius. The problem i found instantly is that while setting static vars is great and all it’s not ideal for dynamic values that you may want to use in a non standard order, to overcome the problem i did a little reading on the LESS CSS website and found i could reference @arguments to retrieve all the values given in the function and then use ~',' to escape the comma so i could then for instance create multiple box shadows without the need to call the namespace again and again.

So to start off with i simply created the namespace and the function with an empty argument reference so that it didn’t expect any specific value pattern which would cause parsing errors, next i simply set the vendor prefixed properties for box-shadow and passed @arguments as the value: Read more…

So in the first part of this small snippet/tutorial i gave you a general concept of targeting classes in a cross browser environment without the need to use a library such as jQuery, in this second and last part i will show you the last few modifications needed to allow for element specific selections and multiple class selections with just a couple of changes. Basically the main two changes in this final part will focus on the wildcard selector and the regular expression in which are the key declarations we need otherwise the prototype won’t work as expected or at all, the first change will need to make is changing document to this:

var ele = document.getElementsByTagName('*')

↓↓↓↓↓↓↓↓↓↓

var ele = this.getElementsByTagName('*')

Next we need to change the regular expression so it looks for multiple classes within the given argument, to accomplish this we simply use the split and join methods like below:

reg = new RegExp(c, 'i')

↓↓↓↓↓↓↓↓↓↓

reg = new RegExp('(' + c.split(' ').join('|') + ')', 'i')

Read more…

I’m sure this has been posted before on the web but i felt like writing my own version anyway, if you notice performance tweaks as such or anything else simply leave a comment below and I’ll alter the code.

Basically these days classes are the best way for managing any website as you can assign them to elements and specifically select those elements in the CSS just by associating it with the class name, JS is also a great tool for manipulating these elements as it allows us to select a whole group of them at once without the need to manually go through and find the elements. This is all good and well when it comes to use libraries such as jQuery but when you only need to write a small amount of JS you would need something more simple.

In modern browsers the document.getElementsByClassName method is available to use but in IE8 and below the story isn’t the same, to accomplish the exact same result in all browsers we simply need to emulate the method as a protoype of the Object object.

Object.prototype.getElementsByClassName = function(c) {}

Now we can just create this really simple prototype and not think twice about how it runs in moderns browsers but if we want to avoid using extra processing power we can wrap it in an IF statement and check to see if the method exists within the document object.

if (typeof document.getElementsByClassName === 'undefined') {
    Object.prototype.getElementsByClassName = function(c) {}
}

Read more…

Need a CSS boost to get your day going? Look no further then CSS Tricks!