What Does 2013 Hold For Web Technology?

2012 was a great year for web development, with many emerging technologies becoming mainstream and plenty of obscure design trends becoming a reality. 2013 looks to follow on in similar style with more and more resources being available to developers to release their vision. In no particular order let's have a look at five technology picks to look out for in 2013.

Responsive Web Design

Not often thought of as a technology, but with more and more handheld devices been brought to the market on almost a daily basis, webmasters alike are now required to incorporate their designs to cater for numerous smaller screens. In the past it was accustom to design two separate sites for a project, so mobile users can access the content albeit on a smaller screen. This quickly became tiresome for those involved as you would need to create two sets of content for each along with two separate designs. Now with the addition of smartphones and tablets the web is constantly in reach of our finger tips for almost anyone.

Now content has to be smart, interchangeable and designed in such a way to be accessible across the whole device market. Basing your designs around the content will shape the future, and with Responsive Design you can allow the content to scale to the device which is being used. Now one base design can fit all and be further molded to embrace the device, not overshadow it. It will be interesting to see how this design trend fairs in the coming months and what further development can be implemented to essentially reduce the disparity between devices.

Twitter Bootstrap

Firmly established as one of the most popular framework's out there on the web space market, Twitter Bootstrap has become a standard for rapid prototyping of web applications and is used by many developers worldwide for its quick and unambitious use of grid layouts and availability of additional tools. Project lead's Mark Otto and Jacob Thornton have recently shifted the project into it's own open source organisation to help further progress the framework. This and the fact that they see Bootstrap as an ever evolving project with updates and bug fixes being put out on a swift and constant basis.

Since being posted on GitHub the web development community have really gotten behind and helped shaped the project with over 246 third party Bootstrap resources being created. Bootstrap seems to be riding on top of the wave and i predict this will continue throughout 2013.





Brackets

On the outset the Brackets project may seem to observers that it's just another plain old text editor vying for a piece of the pie in the seemingly never ending list of text editors. It's built with HTML 5, CSS and JavaScript, hosted on GitHub as open source and is free licensed under the MIT licence. Some of the features that are included off the bat are due to it been written in web code all of the source code is readily editable, allowing you to cater the interface to your requirements. Also included is a bundled version of JSLint which is often a life saver, helping to eliminate broken code on the offset rather than crossing hairs further down the line.

All this being said, you may think, so what? I can already do that in the editor i currently use, however i forgot to mention one key thing, this project is backed by technology goliath Adobe. Not only is it their first venture into the open source field, but it will be interesting to see the ramifications Adobe has on the project and where the monetization side of things will come into play.




Backbone.js

With browser speed ever increasing, JavaScript is beginning to come into it's own and is often seen as the linchpin for fast and sleek web applications. JavaScript libraries are now something every developer should include in their armory to structure their js code. The core development team behind one of the most popular js library's Backbone, is looking to push towards it's 1.0 release, which has been on the cards since March of last year.

The popularity of Backbone stems from a need to release data that can often become tied to the DOM. The principles behind this are to give freedom to the developer to build upon and allow them to structure their code in a Model, View, Controller method. 2013 looks set to be another bumper year for the team behind Backbone.

Sublime Text 2

Early in 2011 the one man outfit, Jon Skinner, released version 2 of the updated python based extension of Vim. At the end of July 2012 the project finally came out of beta, releasing the feature rich text based editor to the world. Since then more and more features have been added, to name a few, a Go To Anything navigation tool to move between files, Column Selection and MultiSelect Editing allowing for chunks of columns to be selected and edited altogether on the fly. Furthermore Sublime Text is inbuilt with it's own Package Control allowing for users to find, install, update and remove extensions without having to restart Sublime Text 2. The list of extensions or packages is huge and they allow for an auto-update feature alongside GitHub to download the latest version from their respective repository.

Above all Sublime Text 2 is fast and minimalist in design, it's no surprise it's fastly becoming the most widely use text editor amongst developers. 2013 seems likely to be a springboard for this project with the announcement of some interesting new features to be incorporated in the coming months.






All in all 2013 sets to be year based around fluidity of design, content to become smarter and the usability of additional resources and tools to become integral to accomplishing web applications. The future looks bright and in an ever changing industry it will be interesting to see the way in which web development is shaped within the coming months.

Most Useful Features of HTML5 Boilerplate

Often when we are developing multiple websites, we come accustom to the reuse of code to lay down the foundations of our work. Google's own, front-end developer, Paul Irish and Divya Manian have put together a superb resource to be used as a starting point to for any website or web application. In essence it's a collection of the best practices used by front-end developers, by combining commonly used snippets and placing them into a HTML and CSS folder structure.

We have highlighted some of our favorite features, displayed in code snippets below.

Page load speed increase

 
<!--[if IE]><![endif]--> 

Traditionally, conditional stylesheets were blocked until the CSS files were fully downloaded, hence increasing the page load time. This fix improves the page speed by using the empty conditional comment before any CSS is loaded into the document and ultimately increases the performance of the site.

Optimized Google Analytics

The resource includes an optimized asynchronous version of Google's Analytics tool. As almost all websites include this tracking tool it's great to have to best possible version included. See here for the nuts and bolts of how this is done.

HTML5 ready CSS reset

/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

Following on from the ever popular Eric Myer CSS reset, Boilerplate includes an updated HTML5 supported version that sets all the structural tags as block level and resets all of their default styling as expected.

Forced scrollbar

html { overflow-y: scroll; }

Often when pages are loaded, they can sometimes be shorter than the size of the screen. This can sometimes force the content to jump from side to side. The CSS attribute "overflow-y: scroll" is added to the html element to force show the scrollbar whatever the size of the content.

Highlight text selection color

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

With the "::selection" and for Firefox, the "::-moz-selection", this selector has been added so you can now alter the color of what the user will see whenever they highlight text. The default color is pink, which you may wan't to change if you are developing a professional website.

Print CSS

/* print styles
* inlined to avoid required HTTP connection 

www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; 
text-shadow: none; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }    
.ir a:after { content: ""; }  /* Don't show links for images */    
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }    
img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

Some of the handy features in the print styles included by default are the ability to adjust the size of the images to make sure that when printing the images do not reach the outer bounds of the normal page view. Boilerplate also has black set as the default color for printing, it includes a comment pointing out that "black prints out faster".

A few other features to be noted are that as browsers only look for the original character set "charset=utf-8", they have only used this in the meta tag, getting rid of the "content type" and "text/html" attributes, which weren't being used by the browsers anyway. Boilerplate also includes a link to where the latest version of jQuery in the Google API library, so there will be no need to keep updating the link when a new version is released. Furthermore Boilerplate includes the "no-js" snippet in the html element, which is used to handle browsers that do not support JavaScript. This can be directly placed as a selector in the CSS file to link to and for instance hide all h1 elements if JavaScript is not supported.

LastPass Password Manager Overview

With the emergence of mobile technology and social media our use of passwords is more important now than ever. Almost all of our time spent browsing the Internet will be used in some form or the other of initially creating an account, to access the desired service. Authentication has grown alongside the growth of networking, with the basic principles being in place to acknowledge that the username is data that is public and the password is data that is private.

Considering that all other systems you interact with are secure, which you would hope was true when signing up for a service, leaves the only vulnerability to be guessing the user(s) password. In order to reduce this vulnerability, there are a few steps that can be taken to make sure your password is unguessable:

• Make the password long, 8-10 characters is generally accepted as being a strong length. A 5 character long password has 60,000,000 possible combinations whereas a 10 character length has 3,700,000,000,000,000 possible alpha numeric combinations.
• Give the password no meaning. Don't include words, such as a pet's name and also include upper and lower case characters along with numbers.
• Don't use the same password twice. How do you know if the same password you use to access your bank for instance, is not being abused by xyz.com which you may have just signed up for.

So straightaway you have lots of different, long, gibberish passwords for all the sites you use, but now there is noway to remember them all or have the ability to keep typing them in. This is where LastPass comes in "The last password you will ever need". 

LastPass allows you to add login information to any site you access via plugin and store it in their database. They further enhance their security by not storing any sensitive data as all the encryption is done locally, so they will only receive an encrypted token as a result of the locally done 256 AES hashing processes it goes through. You can access your vault securely with the universal browser plugin or by logging on on their site with your master password (aka the only password you will ever need), which also allows for an on screen keyboard to be used to avoid key loggers. Then the next time you visit a site which you have previously stored your login data in your database, your data will now be auto filled ready for you to login.

Secure vault.

LastPass also runs on any platform you can possibly use, for instance LassPass have created a tabbed browser for the iPad which does not allow plugins. This bypasses issues found with traditional password managers offered by browsers. For instance you may use Firefox at home which stores all your passwords, but when you are at work using Internet Explorer you no longer access to the passwords stored on Firefox at home.

One time password creation screen.

Other useful features LastPass provides is a secure vault which can store generic forms such as credit card information, personal data or just plain notes which can also be used as a form fill on websites.

You can also access your database by using one time passwords, which can be created after login to be used on machines where you maybe unsure if your being watched whilst you browse and remain available until they have been used once. Similary you can see open sessions of your vault and close them locally and another great tool is the security check, which scans all passwords in your vault, scores them and recommends ways to further improve them. There are many many more features which i have not included but can be viewed in detail on their site. 

In summary amongst the value of the tools, being all free accept using the features on mobile devices which only costs the equivalent $1 a month, the system is a total life saver. I too was one who in the past used to overlook password security and like many others reuse a small number of easily rememberable passwords for everything. LastPass has gone out of their way to create an extremely secure solution, which is trustable allowing for safer gibberish passwords to be stored and access with ease, anywhere on anything at anytime.

Sold? get LastPass here.

Facebook rates Opera over Google Chrome

Sparking more fuel for debate between Facebook and Google, the Facebook management team have replaced the search giant’s popular Chrome web browser with the Norwegian backed Opera on their list of supported browsers. This landing page only appears when using unsupported browsers, in particular Google Chrome and suggests that users try Internet Explorer, Firefox or Opera instead.

There are two points that initially bring attention to this bold statement. Firstly, Facebook have recently been very keen to add Opera to it's list of acquisitions, since the people behind the browser were actively looking for potential buyers. This comes weeks after the acquisition of Instagram for a cool $1 billion along with the IPO of the goliath social networking site, valuing the company at $104 billion, the largest to date ever for a newly listed company.

Opposed to it's meager 1.77% market share in the desktop browser marker, Opera occupies the largest stake in the mobile market at 22.86%. Facebook also has strong rumors to suggest that a smartphone maybe in the works and plans to tie the possible purchase of Opera within it's development.

The other point to take note of is that last month Google Chrome became the most popular desktop browser of them all, knocking Microsoft's Internet Explorer off the top spot for the first time this millennium. The rivalry between Facebook and Google has been heating up over the past few years, as Google has tried multiple times grasp a strangle hold on the Social Networking market, with the latest offering, Google+ putting up the strongest fight. The decision to remove Chrome from it's list of supported browsers maybe a tongue in cheek attempt by Facebook to question the popularity of the browser, as the saga continues.

Top 7 Recommended Google Chrome Extensions

A few years ago I decided to switch browsers from the open source Mozilla Firefox to Google’s ever popular Chrome. At first I was a little hesitant as I had begun to come accustom to the many extensions I had installed on Firefox. Though I was pleasantly surprised to find out the large quantity of extensions that exist on Chrome are in part, the same as Firefox.

Oddly enough, my current browser of choice is not the base Google Chrome package, but the Chromium based ‘SRWare Iron’. This is exactly the same in look and feel as Chrome, but with increased privacy, as it can be quite jaw dropping to see what data Google can extract from your Chrome usage. I am also becoming strangely familiar with another Chromium based browser, called ‘RockMelt’. This latest offering is billed as being the web’s only social browser, I find it extremely useful for viewing feed updates and posting on Facebook and Twitter. I also still use Firefox as my main development browser.

Anyway, now it’s time to get down to business! It can be difficult to sift through the Chrome web store, to find the useful extensions that are really worth installing and avoid the useless ones. So here are my Top 7 Recommended Google Chrome Extensions.


7. Clickable Links
Ever found it annoying when you receive an email or go on pretty much any site and find a link that isn't clickable and only shows the text? Well, Clickable Links solves this, I have almost come so accustom to this extension that when I switch to another computers' browser and I visit the same content, e.g. email, none of the links work.

6. 365Scores Notifier
This one might not be everyone's cup of tea, but if you have even just a slight interest in sport this extension is a must. It covers a vast number of sports from hockey to tennis and baseball to volleyball, though what I have mainly been using this extension for is the football scores.

It’s superb, I think at times it is even faster at reporting the live scores than the national broadcasters. The design is also extremely intuitive, you select the teams and leagues you want to follow, then what you know a little box appears notifying when for instance a team scores.

5. Ghostery
Ghostery is an extension that displays scripts that run on any website, which seek to track your activity, such as Google Analytics.

It will then provide a user-friendly list of the scripts running on the page, which can be blocked by the users’ preference.

It’s really handy to see who tracks what and can sometimes be quite eye opening to see the lengths sites will go to track your activity.

4. Mail Checker Plus for Google Mail
I’ll give you 3 guesses for what you think this extension does? No, your wrong! Hah, only kidding, I would imagine if you are astute enough you should be able to figure this one out.

The best part about this extension is the pop-up it does similar to 365Scores Notifier, whenever you get new mail and or when you load up your browser. It’s great as you don’t need to have a Gmail page open to check your mail for new messages.

The inbuilt options are fairly customisable and the pop-up includes the ability to mark the email as read, archive it, delete it or mark as spam as well as a short description. There maybe some privacy concerns with the setup as it does require you to pass your Gmail login information into the install, though I have never found any problems using this, it’s just something to bear in mind.

3. YTshowRating
Ever been disappointed when clicking on a related video on YouTube to find out that in fact its just 4 minutes of a static picture or it features the song ‘Rick Astley - Never Gonna Give You Up’ or just simply it was not what you were expecting. Well, from now on you will never have this problem again, as the extension YTshowRating solves this.

It cleverly and somewhat mystically manages to get access to all the related videos and then post the related like or dislike bar underneath the video thumbnail. So you can now get an insight for what the video will be like, generally if it’s good the bar will be fully green or terrible, fully red.

2. WOT
WOT stands for ‘Web of Trust’, in effect, this extension is a website reputation ranking tool, where the basic user can use the crowd sourced data to gain an idea of the safety, trustworthiness, reliability and privacy in the shape of a circular icon.

It’s quite simple, once the extension is installed every link will have this icon next to it. The colour indication is fairly self explanatory if its green its good, orange is average, red is poor and opaque means there is no rating.

You can click on the icon to read the ratings in more depth as well as show the accuracy of the rating, with the more greyed people icons the more reliable the rating is. This is also the section where you can have your say, WOT encourages all users to provide ratings and add comments.

All in all its a fab extension, which relies on the trust of input from its user and I would say it pretty much hits the mark in terms of accuracy and reliability.

1. Adblock Plus
My first choice is a real no brainer, if you know anything about browser extensions, the chances are you will of heard of either AdBlock or Adblock Plus. Both have estimated downloads of over 100 million and since I used Adblock Plus on Firefox, when I switched to Chrome I stuck with the same. I am still yet to test ‘Adblock’ but I can’t image there is too much difference between them.

The way these extensions work is you subscribe to a general filter, which will recognise certain page elements, i.e adverts and prevent them from displaying. The ramifications of this similar to Ghostery is not only the safety aspect, but with fewer elements to load, pages will load faster.

The fact that I rank this at number one shows how highly I think of this extension and I think no one should browse the web without this.

In summary, browsers have come along way since the beginnings of the Web, with these utilities being in my opinion the foundation of a better web experience. Extensions are now more common place than ever and hopefully they are here to stay.

App Download Reaches Record High Over the Winter Break

An impressive increase of 60% mobile app downloads was seen from the 25th December through to 31st December over the week prior. Mobile analytics firm Flurry, estimates that this was the first time the 1 billion download mark has been passed over a 7 day time period.

Flurry describes this as a “power week” where an estimated 20 million iOS and Android devices were activated. Flurry estimates that prior to the winter break, the global active installed of Android and iOS devices was 245 million, suggesting an 8% increase in the final week.

The United States is recognised to be behind the bulk of the app downloads, with over 40%, 509 million being attributed to them. China places in 2nd with 99 million and the UK is snapping at their heals at 81 million. Canada, Germany and France each share around 40 million, this is around 3%.

Flurry vice-president of marketing, Peter Farago, suggests that in the future these seemingly large download figures will be common place with the constant growth of mobile internet devices.

“Looking forward to 2012, Flurry expects breaking the one-billion-download-barrier per week will become more common-place. While iOS and Android growth continues to amaze, the market is still by all measures relatively nascent.”

Flurry attributes its ability to collect such data is due to their large detection penetration of over 140,000 apps.

 “Flurry can detect over 90% of all new devices activated each day.”

The majority of the popular apps are free to download games, such as Angry Birds and Where’s My Water? For the UK, free TV catch-up apps like BBC iPlayer, ITV Player and 4oD reign supreme.

Facebook to Display your Life

Facebook is set to reach deeper into your life with the new features outlined at Facebook's annual developers conference f8 this week. Facebook's master plan is to boldly go where noone has gone before to add entertainment to the social sharing space.

The key driver is allowing users to share what they are consuming, whether it be movies, music or articles. Facebook has recently partnered with the likes of Spotify and Netflix allowing for members to expose their interests in streamed entertainment to their friends.
The latest feature Facebook has sought to implement is to replace users profiles with an audio and visual timeline of their life. Facebook's founder Mark Zuckerberg, demonstrated the new 'timeline' at f8 using his page as an example, by showing pictures of him as a baby and progressing up through his life with the content being organised into years. The update is expected to be rolled out within the next "few weeks".

Unlike Twitter or Google+ which are heavily focused on the exchange of messages between users, Facebook has realized its USP is their content is orientated around allowing people to document their life's history. The latest step is seeing Facebook move away from a purely social sharing site and to expand to become ultimately your life online.

Video: Mark Zuckerberg explains 'Timeline'

Privacy is of an utmost importance to Facebook and they have stressed that members will be able to use the recently simplified privacy controls to manage their content.

That said, are we seeing the beginnings of a similarity from the real world to the virtual world, where market dominance will lead to reduced diversification? In years to come will we only need to use a handful of sites to satisfy our every web need?