Back to the Future–Predictions for 2012 in Tech

by Auri Rahimzadeh

A couple more days and it’ll be 2012. What a year! Let’s take a look at some new tech happenings from this year that got us pretty excited, and bummed, too:

• Microsoft’s overall software reputation appears to be a lot better this year, with huge adoptions numbers for Windows 7… congrats on a great product, guys!
• Windows Phone Mango (hey-oh! they shipped a great product, but it needs some company love!)
• Android Ice Cream Sandwich (and the laughs that it was [legitimately] only on one phone!)
• Plasma finally went on clearance, and good riddance (Sasha’s gonna kill for me this one)
• iPads as laptop replacements (only to be carried around with keyboard cases)
• AMD Fusion APUs (finally, low power processors that don’t suck)
• *Still* no good office applications for Android
• Large HDTVs are finally affordable *and* green
• R.I.P. Steve Jobs – we will miss you

And here’s what will probably be declared dead in 2012, or so I hope:

• Standalone portable game systems – who needs ‘em now that even media players run Android, have dual core processors, and play games from the Market?
• Blu-ray 3D
• Non-glasses-less 3D in the home
• Non-LED backlit displays
• Windows XP
• IE 6, finally (although they’ll probably stick with IE8 and up)
• Windows CE-based handhelds
• ThunderBolt®/LightSpeed® ports on average consumer computers, with USB 3.0 being used instead
• Google+ – does anybody use it?
• Any iPod with a capacity under 32 GB

Things I’m looking forward to, or hoping are created this year:

• Our 10th year in business – YES!
• Windows 8, especially how it will run on ARM
• Better Windows Phone advertising by Microsoft
• Lots of interesting new things out of MS, now that their DOJ shackles are off
• Windows Live Mesh integration in Windows 8, and a backup plan for using Live Mesh to auto-backup important files to the cloud, for free
• CES 2012 (Vegas)
• CEATEC 2012 (Japan)
• Sprint’s Wi-Max based 4G, and a class action lawsuit for all those who paid the $10/month surcharge for a service Sprint didn’t offer in their area (ahem)
• An Android interface building kit from Google that doesn’t’ stink, and helps you create great looking apps
• A web service connectivity API for Android that doesn’t stink, either
• A free utility to convert Flash to Android / iOS / Windows Phone apps, or at least get you a good way there
• A free utility to convert Silverlight or Flash to HTML 5-based apps (I think Adobe’s working on this already, and Microsoft might beat them to it)
• XCode for Windows (and I wonder if it won’t work on Windows8 when that’s released)
• Superbowl 2012 in Indianapolis! w00t!

If I’m wrong about any of this, we may not be around to complain, since the world is apparently going to end before Christmas next year. Get your complaints in now!

My friend Andy Marken also has a great write-up about 2011 and 2012, which you can read here…

Interesting Article: The Rise and Rise of JavaScript

I’m a big fan of computer history, and especially the history of the Web. Anybody remember LiveScript? Well, folks, that’s what Netscape – remember them? – called JavaScript before they licensed the name from Sun. If you’re only starting to get into JavaScript development, you’re lucky – the beginnings of it were horrible, plagued with incompatibility and lots and lots of swearing.

I came across a great article about JavaScript and its beginnings and where it is now. It’s always good to know the past, which will prevent problems in the future, or so we hope. Enjoy the read.

http://dannorth.net/2011/12/19/the-rise-and-rise-of-javascript/

-Auri

CSS Specificity: What It Is, and Knowing the Rules

by Nicholas Bannister Andrews, UX Engineer, The Auri Group

CSS specificity is not actually difficult to calculate once you know the rules. And knowing the rules can make it easier for you to construct efficient CSS selectors to target exactly what you want without making the selector convoluted and overly complex. This can lead to properties either matching more or less than what you want them to match.

I learn best by doing so I created a small webapp to calculate the specificity of the CSS styles it is given.

It does not parse or validate CSS, so you should probably use the W3C CSS validator to make sure everything is copacetic. I also made the source code available on github.com for those who like code.

Specificity Rules

I used the rules published at http://reference.sitepoint.com/css/specificity as they seemed the most straight forward and easiest to follow.

The first rule on inline styles I ignore, as my webapp processes stylesheets rather than entire webpages. I personally stay away from inline styles as they can make debugging much more difficult down the road and make style upkeep difficult by multipling the number of places you have to search.

1. If one declaration is from a style attribute, rather than a rule with a selector (an inline style), it has the highest specificity. If none of the declarations are inline, proceed to step two.

2. Count the ID selectors. The declaration with the highest count has the highest specificity. If two or more have the same number of ID selectors, or they all have zero ID selectors, proceed to step three.

3. Count the class selectors (for example, ".test"), attribute selectors (for example, "[type="submit"]"), and pseudo-classes (for example, ":hover"). The declaration with the highest total has the highest specificity. If two or more have the same total, or they all have totals of zero, proceed to step four.

4. Count the element type selectors (for example "div") and pseudo-elements (for example, "::first-letter"). The declaration with the highest total has the highest specificity.

Examples

Now for an example. Say we are comparing two similar style rules that are targeting first-child list elements. The first is: "ul#special-list.inline-list li:first-child" and the second rule is: "div#main-content ul.inline-list li:first-child"

Let’s count the selectors!

IDs

• Rule 1: one (1) ID; #special-list
• Rule 2: one (1) ID; #main-content

Classes/Pseudo-classes/Attributes

• Rule 1: one (1) class; .inline-list and one (1) pseudo-class, :first-child
• Rule 2: one (1) class; .inline-list and one (1) pseudo-class, :first-child

Elements/Pseudo-elements

• Rule 1: two (2) elements; ul and li
• Rule 2: three (3) elements; div, ul, and li

This gives us the specificity matrix of [0,1,2,2] and [0,1,2,3]. Again, the "0" in the first column is for inline styles.

So, Rule 2 is more specific because it has one more element selector than Rule 1 does, while the other columns, for Inline Styles, IDs, and Classes, are all equal.

Now, let’s consider the following rules on level 1 headings: – Rule 1: "#main-content h1" – Rule 2: "body div article section h1"

The first has an ID of "#main-content" and a single element of "h1". The second consists of only five (5) element selectors: "body", "div", "article", "section", and "h1".

Since the first rule has an ID and the second does not, the first rule wins the specificity contest. A higher number in a same or preceding column will always trump any number in following column.

But what happens if they are equal on all columns? Well, that’s easy. The rule that comes last overrides the rules that came before.

Hopefully now, you’re beginning to understand the way specificity works. If not, fear not! Check out the resources below.

References

1. http://reference.sitepoint.com/css/specificity

2. http://www.w3.org/TR/CSS2/cascade.html#specificity