1. All calls to the API must now use the oAuth authentication as all areas of the API will be on lock down
2. Desktop based clients that make use of the API will be restricted to 100, 000 unless they receive special permission to continue making API connections
3. The display guidelines have changed so any developer making a clone of what the tweet view looks like needs to follow the guide now

So that’s just a very brief overview but the one I really got interested about was the API limit for desktop clients, for a long time now they have given us the freedom of seamlessly going between the website and viewing tweets directly on our desktop by removing a lot of the crud that we didn’t need to see so we got the best experience possible. This has worked for millions of users for a long time but now Twitter want’s to restrict the amount of calls a single application can make to their API regardless of which platform you use the app on, for us as the consumer of the product(s) we might think it doesn’t affect us but you would be wrong.

Twitter is going to throttle apps so only about 200, 000 users will be able to use their favourite app on their iDevice, Android, tablet, desktop etc… See the below for how this is going to work:

• If an existing application already has 100, 000+ users they will be allowed to continue growing until they reach 200% or 200, 000 users
• If a new or existing application has less then 100, 000 users but reach that limit they will need to request from Twitter directly in order to allow extra users to use the app
• If an application hits 200, 000 users then we are all screwed as I can only see Twitter saying no more or asking for a monthly fee to continue allowing extra connections but who know what will happen

So that’s pretty much my rant for what will I think make Twitter an unpopular site to visit now that app.net has been launched, I say stay tuned into their blogged as I dislike visiting browser based websites if they have an easily accessible application that I can use on my iPhone and Macbook Pro.

See the full overhaul article here: https://dev.twitter.com/blog/changes-coming-to-twitter-api

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/

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.

To jump straight into it i would have to say on a personal level SASS along with Compass are 2 of the most powerful technologies i have ever used for my development, I say this with high confidence as for the last 6 months i have been using LESS which like SASS allows for a simple way of writing your CSS in a way which improves your workflow. If you were to compare SASS and LESS that might look the same at first glance but as you go through what seems like endless layers you will find SASS to be the most powerful preprocessor currently available to developers even without Compass.

See the following for some of the features which i have already used that have made my life easier thus far:

• Mixins
• Variables
• Functions
• Better imports
• Includes
• Interpolation for variables
• For, while and foreach loops

I know that LESS supports some of these features as well and if your project only requires things such as mixins and variables then that would be fine for small projects but from a long term perspective SASS + Compass will suit any project, see the following which are some basic CSS examples using SASS and Compass together.

#container {
    background-color: red;
    padding: 10px;

    h1 & {
        color: red;
    }
}

This would generate the following output:

#container {
    background-color: red;
    padding: 10px;
}

#container h1 {
    color: red;
}

To explain how you actually get this result you first need to understand what the ampersand means when we write something like h1 &, in SASS we can use the following syntax two ways as it means two different things based on where you put the ampersand. The above example shows we define a h1 selector and declare the ampersand which in this case inherits the parent selector we nested the h1 in, if you have followed along so far you have worked out that #container is the magic parent in the example.

See the below which explains the second way you can use the ampersand:

a {
    color: red;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

And the result will be:

a {
    color: red;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Looking at both examples now there isn’t any different apart from the way the syntax works, when we use the ampersand before a pseudo selector/element it SASS automatically knows to inherit the parent before it where as if we define the ampersand part way down the nested selector it inherit the parent selector allowing us to create much short selectors in our SASS and SCSS files. Now that you have a grasp on this really cool feature I’ll show you a couple of more of my favourites which are interpolated variables and for loops.

@for $i from 1 to 3 {
    $size: $i * 10;

    .font-size-#{$size} {
        font-size: #{$size}px;
    }
}

Now before you jump the gun and say this will result in 3 selectors you would be wrong, when we use “to” in SASS it looks at the first parameter we give it and the second parameter and only loops between them which will only result in 2 selectors. See the below:

.font-size-10 {
    font-size: 10px;
}

.font-size-20 {
    font-size: 20px;
}

If you want 3 selectors to be output in your CSS then instead of “to” we can use “through” which goes from 1 through 3 but takes one extra step to get the third selector we would expect, moving on though lets talk about interpolated variables which if your new to you wouldn’t have noticed in the last example even though they we’re looking straight at you. Basically what they are is escaped variables that a prefixed or suffixed string can be used with in order to achieve dynamic values allowing for more maintainable CSS.

A simple way to remember what an interpolated variable is would be to break in down into it’s key elements:

• The pound or hash (this is a dollar sign in PHP)
• followed by an opening curly brace
• then followed by the variable
• and finally closed with a closing curly brace

This is exactly the same way you write the syntax in PHP except the “pound/hash” becomes a “$” dollar sign but it works exactly the same way, now that you have found out some of the reasons why I am already in love with SASS but i recommend you take it for a spin yourself as you will be surprised by how quickly you pick it up.

Hopefully i didn’t rant too much having not written an article in so long but i do hope you found it useful enough to convert yourself to SASS, i will write an article soon about using Compass along side SASS as it offers great benefits in it’s own right.

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:

#myNamespace {
    .box-shadow () {
        box-shadow:         @arguments;
        -moz-box-shadow:    @arguments;
        -webkit-box-shadow: @arguments;
    }
}

The next thing i did was simply call the namespace and function like you would normally do with LESS but instead of passing a specific set of arguments i gave it 3 sets of arguments that were comma seperated:

div {
    #myNamespace > .box-shadow(
        5px, 5px, 0, 6px, rgba(0,0,0, .5), ~',',
        7px, 7px, 0, 8px, rgba(51,51,51, .4), ~',',
        inset, 0, 0, 3px, rgba(0,0,0, .4)
    );
}

So there you have it, a simple way to create multiple box shadows using one function inside a custom namespace using the LESS CSS language.

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')

As you can see we first split the string by searching for any spaces and if any are found we then split the string again using a specific pipe separator which allows us to create a word separated expression which is pretty much the most simple way to accomplish this, apart from that you should be able to use the final code below in any browser that doesn’t have native support for getElementsByClassName.

if (typeof document.getElementsByClassName === 'undefined') {
    // If the current browser doesn't support the built in class method lets
    // create our own to emulate it
    Object.prototype.getElementsByClassName = function(c) {
        // Collect all the elements in the DOM
        var ele = this.getElementsByTagName('*'),
            tmp = [],
            reg = new RegExp('(' + c.split(' ').join('|') + ')', 'i');

        for (var i = 0; i < ele.length; i++) {
            // Cache the current element to prevent memory leaks
            var e = ele[i];

            if (typeof e.className !== 'undefined' && e.className.match(reg)) {
                // To improve performance when appending a new array item use the length
                // to increment the current index
                tmp[tmp.length] = e;
            }
        }

        return tmp;
    };
}

I hope you enjoyed this simple snippet/tutorial as i hope to produce more soon!

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) {}
}

Now you can see we have solved the processing issue by simply checking if the method exists and only bind the prototype when its needed, next what we need to do is select all the elements from the DOM which we can do by using document.getElementsByTagName('*') which has been standard in all browsers since IE5 so no need to worry about browser compatibility.

if (typeof document.getElementsByClassName === 'undefined') {
    // If the current browser doesn't support the built in class method lets
    // create our own to emulate it
    Object.prototype.getElementsByClassName = function(c) {
        // Collect all the elements in the DOM
        var ele = document.getElementsByTagName('*'),
            tmp = [],
            reg = new RegExp(c, 'i');
    };
}

You can see i have specified some other variables but ill get to those in a second, basically we have just told the browser we can to grab every element currently in the DOM no matter what it is. The other two variables you see are for storage and performance, when we iterate through the elements we are going to cache the object for each matched element to avoid memory leaks ask it can happen. The reason we are setting the regular expression outside of the loop is because we don’t want to waste precious resources we could be using elsewhere by declaring the same variable over and over again in the loop, this goes for any other variable that can play a role in a loop that only needs to be declared once.

Now what we need to do is build the loop that we scan each element in the page and check the class name if the attribute class exists and append the element object to the tmp array:

if (typeof document.getElementsByClassName === 'undefined') {
    // If the current browser doesn't support the built in class method lets
    // create our own to emulate it
    Object.prototype.getElementsByClassName = function(c) {
        // Collect all the elements in the DOM
        var ele = document.getElementsByTagName('*'),
            tmp = [],
            reg = new RegExp(c, 'i');

        for (var i = 0; i < ele.length; i++) {
            // Cache the current element to prevent memory leaks
            var e = ele[i];

            if (typeof e.className !== 'undefined' && e.className.match(reg)) {
                // To improve performance when appending a new array item use the length
                // to increment the current index
                tmp[tmp.length] = e;
            }
        }

        return tmp;
    };
}

Nothing to it right? Alright maybe if your new to JS it might be confusing so let me break it down, first we store the current element object as it improves performance we calling it multiple times within a loop. Next we check if the attribute or in this class element property className exists and if it does match it against the regular expression we setup earlier, next we store the element object in the tmp array but you will notice we use tmp.length which is a better way for performance as your not requesting the browser to determine the next interation of the loop. Once all that is done we simply return the array and from there we can use our normal JS declarations to request the elements with a class name of foo for example.

var foo = document.getElementsByClassName('foo'),
    bar = document.getElementsByClassName('bar');

alert('Foo: ' + foo.length + '\nBar: ' + bar.length);

var a = document.getElementsByClassName('item');
alert('Items: ' + a.length);

So now that we have everything together you can play around with the code at Tinkerbin using the following link http://tinkerbin.com/tnHWOnTr, i hope you have enjoyed reading this as i thought it may help at least one developer in need.

Well it should be confusing as Google is planning to walk through shopping centers all over the globe so you can see stores in your browser and on your mobile device before you even leave your home, when you think about it the idea is great but i see 1 fatal flaw in the plan that may make many people feel uneasy about when the pictures reach the internet. As everyone should know Google doesn’t ask your permission when the Google Maps images reach the internet which has been fine up until now because they have only captured people outdoors, when it comes down to it though do you really want your face on Google Maps publicly exposed while you walk around or shop in a store?

I know i sure don’t without my permission first as it’s wrong that a company as big as Google can take pictures and put them on the web without our permission but when we do it we face copyright laws and such, i personally don’t want my face publicly facing the world as you never know who’s looking at the map and what they might do with it. In today’s day and age you never know who might be using the service for reasons other then finding the correct way to there destination and such, i know this won’t deter Google in any way, shape or form but i feel like we the public have a say in what should be allowed to be uploaded to the web and what should NOT be!

Some people may disagree but there is a main reason why countries have individual privacy laws which protects us from companies like Google doing such a thing but apparently like i said before they are exempt from these laws and free to do what they want when they want, I’m not smart enough to start a global poll or enough but simply spreading the word around should be enough to grab the attention of the Google developers that we should have a say before this extended service goes live in Google Maps.