SitePoint

Native JavaScript Equivalents of jQuery Methods: CSS and Animation

Craig Buckler — Wed, 19 Jun 2013 09:28:29 +0000

Do You Really Need jQuery? Sometimes — especially if you want to support IE6/7/8 using jQuery 1.x. However, modern browser APIs now provide much of the functionality we take for granted in jQuery. In this article, we’re going to look at methods related to CSS.

Class Manipulation

One of the most common jQuery tasks is applying a class to a specific element:

$("#myelement").addClass("myclass");

We can achieve the same thing in native JavaScript:

document.getElementById("myelement").className = "myclass";

This isn’t quite the whole story:

jQuery can apply the class to any number of nodes.
jQuery appends the new class to existing class definitions, but the native example will overwrite them.

In native JavaScript, the className property is simply a string. We therefore need a function to replicate how jQuery works, e.g.

function addClass(node, class) {
	if (!node.length) node = [node];
	for (var n = 0, m = node.length; n < m; n++) {
		if ((" " + node[n].className + " ").indexOf(" "+class+" ") >= 0) {
			node.className += " " + class;
		}
	}
}
// apply myclass to all nodes
addClass(document.getElementById("myelement"), "myclass");

While this code is smaller and faster than jQuery, we’re replicating what’s already available in the library — there’s little point.

Fortunately, modern browsers now offer a new classList property which implements a DOMTokenList — an array-like collection of all classes applied to a node. The following properties are available:

length — the number of class names applied
item(index) — the class name at a specific index
contains(class) — returns true if a node has that class applied
add(class) — applies a new class to the node
remove(class) — removes a class from the node
toggle(class) — removes or adds a class if it’s applied or not applied respectively

We can use this in preference to the clunkier className property:

document.getElementById("myelement").classList.add("myclass");

classList is supported by most browsers except IE9. Fortunately, a couple of shims are available which could be conditionally loaded in that browser.

Style Manipulation

jQuery provides a number of methods to apply specific styles, e.g.

$("#myelement").css({
	color: "#c00",
	backgroundColor: "#eee",
	width: "200px",
	height: "100px",
	borderColor: "#f00"
});

The native equivalent:

var m = document.getElementById("myelement"), c = m.style;
c.color = "#c00";
c.backgroundColor = "#eee";
c.width = "200px";
c.height = "100px";
c.borderColor = "#f00";

Over 10,000 iterations using cached selectors, the jQuery code executed in 6,670ms. Native JavaScript took 330ms — it was 20x faster.

Of course, you shouldn’t use either unless a value needs to be calculated in some way. It’s more efficient to define a class of styles in CSS then apply its name to the element.

Animation

jQuery offers various animated effects out of the box including sliding and fading. Native JavaScript can be faster but none of that matters: CSS3 animation trounces both.

I was initially skeptical about CSS3 animation. It can never offer fine-grained control (such as stopping an animation after N frames) and trespasses on JavaScript’s behavioral responsibilities. However, the benefits more than outweigh the drawbacks:

CSS3 animation is handled by the browser; it will always be faster than JavaScript execution.
CSS3 animation is easier to use and requires significantly less code.
CSS3 offers effects such as 3D transformations which would be impractical — if not impossible — in JavaScript alone.

IE9 and below won’t show the effects but they can degrade gracefully and IE10 should be the dominant version within a few months.

The CSS3 genie will never go back in the lamp. If you’re still using jQuery or JavaScript for DOM animation in modern browsers, you’re probably wasting your time.

That said, JavaScript can be used to react to CSS3 animations when they start, stop or proceed to the next iteration using animationstart, animationend and animationiteration accordingly. For more information, refer to How to Capture CSS3 Animation Events in JavaScript.

In my next article, we’ll finish the series by looking at events, Ajax and utility functions.

A Long Time Ago, On a Web Server Far, Far Away…

Alex Walker — Wed, 19 Jun 2013 05:02:35 +0000

I thought this might be fun.

You may be aware that at last week’s WWDC, Apple announced a shiny, new line of remarkable-looking, high-end Mac Pros.

While they appear to be great hardware, it was the many comparisons drawn between them and Darth Vader that had me chuckling.

I saw them variously described as the ‘Sith Lord’s tissue box’, the ‘Dark side’s coffee cup’ and ‘Darth’s trashcan’.

Let’s face it, with all those glossy black, simple curves and that finely-honed engineering, it doesn’t require a huge leap of imagination to make that connection.

But I don’t think the comparisons end even there.

Have you seen Apple’s new corporate headquarters? Tell me that’s not a ‘Death Star v0.1. beta.’ Give it a few years and that thing will be snuffing out planets left and right. Apple is an efficient, high-tech, well-funded and kinda ruthless empire.

Sound familiar?

As a webgeek and long-time Star Wars fan, it set me to thinking.

If web languages/technologies were Star Wars characters, who would they be?

So, for my own entertainment (and hopefully yours) here’s my personal take on the subject, followed by tongue-in-cheek explanations.

1). IOS = Darth Vader: With that iron-fisted AppStore control, the closed source code philosophy, and the smooth, industrial design lines, it’s hard to go past Apple as ‘the Empire’.

BTW: For the record, I am an iPhone & MacBook Pro user.

It’s interesting to think that five years ago most would have chosen Microsoft here.

2). JavaScript = Yoda: It is cross-browser and cross-platform. It is both front-end and back. Flows through all, it does. Wise you must be to its ways.

3). Rails = Han: Rails guys have sometimes had a reputation for being anti-corporate and even a little cocky. Some have used the word ‘cowboy’. Indeed their founder and spiritual leader once went to lengths to describe himself as ‘an R-rated individual‘. Feels like a good fit here.

4). SASS = Leia: “Will someone get this big walking carpet out of my way?” C’mon, THAT’S pretty sassy!

5). HAML = Luke: I admit HTML5 probably fits better for this spot, but it’s very hard to pass over the HAML/Mark Hammil gag. I couldn’t. Plus, HAML and SASS are sibling languages.

6). Linux = Ben Obi Wan: Aged, never fashionable, slightly mysterious and arcane, but also wise and quietly powerful. “Use the Open Source, Luke.”

I did consider SQL here too.

7). Android = C3PO: I don’t think it needs much explanation. I considered R2-D2 here, but I believe androids are more human-shaped than a bot like R2. It is true that they are both constantly referred to as ‘droids’ in the films though.

8). PHP = Chewbacca: Reliable sidekick or hulking, shambling mess? You be the judge. It’s not wise to upset a Wookiee.

9). Java = Jabba: OK, I admit the name similarities was probably enough for me. Java’s reputation for sluggishness with its enterprise leanings sealed the deal. Nobody wants to be Jabba.

Of course, these are all entirely my own views and are COMPLETELY subjective.

But what do you think?

Have I missed an obvious one?
Would R2-D2 fit in somewhere? (I would have liked drawing that one).
Who is Emperor Palpatine? And Boba Fett?

P.S. I completely refuse to acknowledge the existence of Jar Jar Binks for the purposes of this discussion — although Ricky’s suggestion of IE6 is a beauty!

Top 10 Front-End Development Frameworks: Part 2

Ivaylo Gerchev — Tue, 18 Jun 2013 13:43:29 +0000

In the first part of this article we’ve seen some nice frameworks all related to Bootstrap. If you are weary of all this Bootstrap, take a deep breath and get ready for something really different. Let’s start with the main competitor of Bootstrap – Foundation.

5. Foundation

Foundation is a powerful, feature-rich, responsive front-end framework. With Foundation you can quickly prototype and build websites or apps that work on any kind of device, with tons of included layout constructs, elements and best practices. It’s built with mobile first in mind, utilitizes semantic features, and uses Zepto instead of jQuery in order to brings better user experience and faster performance.

Foundation has a 12-column flexible, nestable grid powerful enough to let you create rapidly multi-device layouts. In terms of features it provides many. There are styles for typography, buttons, forms, and various navigation controls. Many useful CSS components are provided like panels, pricing tables, progress bars, tables, thumbnails, and flex video that can scale properly your video on any device. And, of course, JavaScript plugins including dropdowns, joyride (a simple and easy website tour), magellan ( a sticky navigation that indicates where you are on the page), orbit (a responsive image slider with touch support), reveal (for creating modal dialogs or pop-up windows), sections (a powerful replacement for traditional accordions and tabs), and tooltips.

The framework also offers many useful add-ons.

Stencils – all UI elements available in Foundation in a form of Omnigraffle stencils and vector PDFs for building wireframes and mock-ups faster and more easily.
HTML Templates – handy, ready to go layouts for you to quickly start from and build on. To use them you simply grab the code and drop it between the tags of your page.
Icon Fonts – these are custom icon sets of pictographic icons stored in a handy web font.
SVG Social Icons – a set of resolution-independent social icons.
Responsive Tables - the mechanism of Foundation’s responsive tables is to take the first column and “pin” it to the left of the table, thus allowing you to scroll the other columns under it.
Off-Canvas Layouts – these layouts allows you to keep content or navigation on mobile devices hidden until either a larger screen size allows it to be visible or a user takes action to expose it. And when the last happens the content or navigation slides into view.

As you can see, Foundation is like a treasure-house for web developers/designers. And in order to get only what you need you can use the customizer to build your custom download.

6. GroundworkCSS

GroundworkCSS is a new, fresh addition to the front-end frameworks family. It’s a fully responsive HTML5, CSS and JavaScript toolkit built with the power of Sass and Compass which gives you the ability to rapidly prototype and build websites and apps that work on virtually any device.

It offers an extremely flexible, nestable, fraction-based, fluid grid system that makes creating any layout possible. GroundworkCSS has some really expressive features like tablets and mobile grids which maintain the grid column structure instead of collapsing the grid columns into individual rows when the viewport is below 768 or 480 pixels wide. Another cool feature is a jQuery ResponsiveText plugin which allows you to have dynamically sized text that adapts to the width of the viewport: extremely useful for scalable headlines and building responsive tables.

The framework includes a rich set of UI components like tabs, responsive data tables, buttons, forms, responsive navigation controls, tiles (a beautiful alternative to radio buttons and other boring standard form elements), tooltips, modals, Cycle2 (a powerful, responsive content slider), and many more useful elements and helpers. It also offers a nice set of vector social icons and a full suite of pictographic icons included in FontAwesome.

To see the framework in action you can use the resizer at the top center of the browser window. This way you can test the responsiveness of the components against different sizes and viewports while exploring the framework’s features.

GroundworkCSS is very well documented with many examples, and to get you started quickly the framework also provides you with several responsive templates. The only thing I consider as a weakness is the missing of a way to customize your download.

7. Gumby

Gumby is simple, flexible, and robust front-end framework built with Sass and Compass.

Its fluid-fixed layout self-optimizes the content for desktop and mobile resolutions. It support multiple types of grids, including nested ones, with different column variations . Gumby has two PSD templates that get you started designing on 12 and 16 column grid systems.

The framework offers feature-rich UI Kit which includes buttons, forms, mobile navigation, tabs, skip links, toggles and switches, drawers, responsive images, retina images, and more. Following the latest design trends the UI elements have Metro style flat design but you can use Pretty style with gradient design too, or to mix up both styles as you wish. An awesome set of responsive, resolution independent Entypo icons, for you to use in your web projects, is completely integrated into the Gumby Framework.

Gumby has also a very good customizer with color pickers which helps you to build your custom download with ease.

8. HTML KickStart

HTML KickStart is a HTML5, CSS and jQuery-powered toolkit for easily creating any type of layout. It provides clean, standards-compliant and cross-browser mark-up.

The framework has styles for grids, typography, forms, buttons, tables or lists and cross-browser web elements like a JavaScript slideshow, tabs, breadcrumb navigation, menus with sub-menus, tooltips, and more.

You can use 99Lime UIKIT which has all the UI elements of HTML KickStart ready to be used in your wireframes.

9. IVORY

IVORY is a lightweight, simple and powerful framework that can handle responsive layouts from 320px to 1200px widths. It is packed with 12-column fluid width grid, styles for typography and some essential UI components like buttons, toggle-switches, accordions, tabs, tooltips, and more.

IVORY is a perfect choice when you need a simple and flexible, multi device solution, and your design doesn’t requires extra functionality which other frameworks offer.

10. Kube

Lastly, if you need a solid, yet simple base without needless complexity and extras, for your new project, Kube can be the right choice. Kube is a minimal, responsive and adaptive framework with no imposed styling which gives you the freedom to create. It offers basic styles for grids, forms, typography, tables, buttons, navigation, and other stuff like links or images.

The framework contains one compact CSS file for building responsive layouts with ease and two JS files for implementing tabs and buttons in your designs. If you are looking for maximum flexibility and customization, you can download developer version which includes LESS files, with variables, mixins and modules.

Conclusion

I hope that now, after reading this article, you have a better perspective on the different choices available to you for your next projects. I’ve tried to put here the most popular, feature-rich, well-structured and promising frameworks which I know at the time of this writing. But as you already know things get changed with the speed of the light. So, if you know of some other cool framework not listed here, please share your knowledge in the comments thus making this article even more useful.

Google Retires Chrome Frame

Craig Buckler — Mon, 17 Jun 2013 16:58:39 +0000

Another day, another Google system bites the dust. Google is retiring Chrome Frame. While an exact end date is yet to be announced, support and updates will cease in early 2014.

Chrome Frame is a free plug-in for IE6, 7 and 8 which effectively runs the Chrome (webkit) rendering engine within the oldIE browser. Web developers could send a meta tag or HTTP header to force the browser into Chrome mode while legacy sites and applications retained the default IE view for compatibility.

It was a great idea, although the plug-in was slammed by Microsoft as being a “security risk” and Mozilla claimed it could “fragment the web”. Both may have been legitimate concerns but, in the end, neither came to pass.

Google has decided there’s no need for Chrome Frame in the modern post-oldIE era:

In 2009, many people were using browsers that lagged behind the leading edge. In order to reach the broadest base of users, developers often had to either build multiple versions of their applications or not use the new capabilities at all.

Today, most people are using modern browsers that support the majority of the latest web technologies. Better yet, the usage of legacy browsers is declining significantly and newer browsers stay up to date automatically, which means the leading edge has become mainstream.

Chrome Frame development was only viable while oldIEs remained important. Today, IE6 and 7 account for less than 1% of users. IE8 is relatively high with just under 9%, but it’s dropping almost 1% every month and will become largely irrelevant by 2014 (especially when Microsoft drop XP support).

Google has never revealed Chrome Frame download or usage figures although you will find them in your Analytics statistics. On SitePoint, it’s used by 0.1% of users although that’s unlikely to be typical across the web.

The Google blog states: if you are a developer with an app that points users to Chrome Frame, please prompt visitors to upgrade to a modern browser. Personally, I don’t think that’s necessary. oldIE users are bombarded with messages — they’re unlikely to be using IE6, 7 or 8 because they prefer it. Of course, I hope those users upgrade or switch to a better browser. If they can’t, they can retain Chrome Frame indefinitely — Google won’t magically uninstall it from their machine.

Chrome Frame was novel solution to the oldIE problem. We may never know whether it received a widespread distribution but, as Google point out:

It’s unusual to build something and hope it eventually makes itself obsolete, but in this case we see the retirement of Chrome Frame as evidence of just how far the web has come.

Where Did Coderbits Come From?

Scott Smith — Mon, 17 Jun 2013 14:47:49 +0000

Even as web developers and designers produce more and more sophisticated ways of presenting clients’ products and services online, we are limited in how we can present ourselves to future clients. We can build our own websites, of course, but we’re often still limited to less sophisticated ways of showing ourselves off: resumes and portfolios that are essentially digital copies of a paper-based approach. Isn’t there a more dynamic way? This is what Coderbits claims to do. We asked founder and CEO Scott Smith to explain.

What is Coderbits?

Coderbits is a site that builds intelligent portfolios for software developers and designers. Coderbits tackles the problem of traditional resumes being inadequate at verifying the skills, traits, and knowledge software developers and designers possess.

As a director of software development, I found that using resumes for the purpose of identifying quality candidates fell short. Instead of using resumes to determine which candidates to interview, I was instead forced to hold pre-screen interviews and tests. Both actions wasted my time and that of the candidates in order to determine which candidates to call in for interviews. Sites like LinkedIn provided very little value as well being based on the same premise of resumes. The content is unverified and subjective.

As a software developer, I realized the many sites and services I utilized daily already contained the information needed to automatically build a portfolio that shows what software developers and designers know, what we’ve done, and what our interests are.

Coderbits was founded to leverage that information and empower software developers and designers to easily build a knowledge portfolio and at the same time help employers hire with confidence.

How does it work?

Building a portfolio on coderbits was designed to be simple and require as little input as possible. The Builder is where users are able to link to 60+ sites. Where available, Coderbits offers account linking via OAuth. This is the simplest and easiest way for users to link to an account. When OAuth is not available, linking is done by typing in the account username. Once the account is linked the true magic happens – aggregation.

Profile aggregation occurs when an account is first linked and then on a regular automated schedule. The process involves us going out to linked accounts, gathering up all the bits, merging them into one of many portfolio categories, calculating core skills, interests, and traits, automatically building social connections, awarding many of the 500+ badges, and finally creating a full portfolio.

Because we perform aggregation on a schedule, portfolios are always accurate and up-to-date. When things are added or removed from linked accounts, the portfolio is updated accordingly.

Work Transparently

A mantra of ours here at Coderbits is to Work Transparently. We like to promote this to encourage to people to work in this way – but what does that mean exactly? It means you should try and find ways to work that makes the work available publicly.

For example, if you are deciding which MOOC to sign up for and take courses, you would want to choose ones that make your information available on a public profile. The ideal one to choose would be the one with public profiles and public APIs so you or others can get to your information programmatically.

In this situation you are still benefiting from the service offering and allowing the work you do there to be visible as well.

Fun Facts

Being open, available, and transparent with our users has been key to building a successful service. The input and ideas we receive has proven invaluable.

The Posts feature was originally created for users to submit bugs, feedback, and get help. By usage it has morphed into a community of highly skilled and informed individuals who are willing to share knowledge through professional tips, designs, and content.

The value our users get from Coderbits goes beyond what we had originally planned:

Find new sites and services. We are a discovery engine for them.
See the public perception of your skill sets and where you need to improve.
Motivate yourself to do, learn, and share more.
Connect, find, and engage with other developers and designers.
Test your Twitter API integration using accounts without any followers ;)

Here are a couple of visual demonstrations of the percentile distribution of Coderbits members by programming languages in which they specialize and online entities in which they have a presence.

Coderbits has just emerged from beta and is now available to you. Come on over and see what you think.

Chrome Extensions: Bridging the Gap Between Layers

Maxime Lefrançois — Mon, 17 Jun 2013 13:55:34 +0000

Building a Chrome extension is meant to be easy and in many ways, it is. The documentation is really well done and has loads and loads of examples. Also, it’s quite easy to inspect any of the ones you’ve installed already to see the magic going on behind. Another big plus is that it’s all Javascript, CSS and HTML with the added bonus of the Chrome API for the extra nibble of magic.

Recently, I had to develop a toolbar for my company that would have to read the currently viewed page, show some SEO information, do some AJAX calls and so on. Not really hard, but I did stumble on a problem that was not really well documented (if at all).

Before going further, if you’re not totally familiar with Chrome extension development, I suggest you go read this overview. You’ll understand more about the complexity between the multiple layers of the architecture.

The problem

I decided to load my extension’s UI elements (like the toolbar and miscellaneous popups) through injected iframes in every web page. With that in mind, the communication between multiple iframes, the current DOM, the Chrome Background Javascript file and other layers that Chrome offers was not the easiest thing to do.

In fact, the problem resided with the use of iframes. I had to send lots of data through JSON objects from the Background layer to any of the iframes and vice versa. Manipulating an iframe is not possible from the Content Script injected in the page, because of the cross-domain restriction.

For example, the page URL currently viewed is

http://www.example.com

and the injected iframe URLs are

chrome-extensions://uniqueidmadeoutoflotsandlotsofletters

Communication between both is impossible because cross-domain communication is a big NO-NO.

Why use iframes, then?

Well, iframes are the only way (currently) to isolate a chunk of Javascript, CSS and HTML without being influenced by the current web page style and behavior.

Also, I was stubborn enough to think there was probably a way to communicate between all the layers in a graceful manner. Even though I could not find an answer on Google or StackOverflow.

What’s the solution?

When using the Chrome API method chrome.tabs.sendMessage to send a message from the Background layer, the message is sent to ALL frames, not just the one that has the ContentScript injected.

I don’t know why I didn’t think of that first!

Since it’s the ContentScript that injects the iframes, they ALSO have access to the Chrome API.

So, the iframes can talk to their parent ContentScript with the default DOM method window.parent.postMessage, talk to the Background layer with chrome.extension.sendRequest and they can also listen to the Background layer messages with the chrome.extension.onMessage.addListener method.

How to make it happen?

The idea is simple: I create a set of Receptionists that will handle all the transfers of messages from one layer to another.

Currently, this is how I’ve setup each layer’s roles :

Background (see background.js)

Can receive messages from ContentScript and either redirect them to the proper iframe or process the message.

Can send messages to all frames (ContentScript and iframes).

ContentScript (see inject.js)

Can receive messages from both the Background layer and the iframes.

When coming from an iframe (through the default window.postMessage method) it redirects the message to the Background if specified. If not specified, it processes the message.

Can send messages only to the Background.

Iframe (see iframe.js)

Can receive messages from the only the Background layer, then checks if it was meant for him and then processes the message.

Can send messages to the ContentScript with window.parent.postMessage.

So in other words:

- Background talks to ContentScript and iframes, but only listens to ContentScript.

- ContentScript listens to Background and iframes, but only talks to Background.

- Iframes talks to ContentScript and listen to Background.

Side note: I understand that Background could also listen to iframe messages, but in my example I’ve skipped this concept since it was not necessary.

Differentiating the iframes

Every iframe has a unique ID (called view in my example later below) so it’s easy to redirect the messages to a particular iframe. A simple way to do so is by adding an attribute in the URL when loading the iframe, like this:

chrome.extension.getURL('html/iframe/comment.html?view=comment’);

Messages setup

The messages passed are simple objects containing two properties:

- message

- data

Every layer (Background, ContentScript and IFrame) has a tell method that sends the message with both properties.

tell(‘tell-something’, {attribute1:’a’, attribute2:’b’});

When an iframe sends a message, the current iframe view ID is also sent as a source property in data.

tell(‘tell-parent-something’, {source:’comment’});

When a message needs to be sent to a particular iframe, a view property is added with the right view ID in data.

tell(‘tell-to-an-iframe’, {
    view:’comment’,
    title:’hello world!’
});

If a message needs to be sent to all iframes, I used the “*” wildcard for that.

tell(‘tell-to-all-iframes’, {view:’*’, title:’foo bar’});

If no view is specified, it’s the ContentScript/Background that should process the message.

Now, the example (finally)!

I’ve created a simple extension for liking pages that I call iHeart (you can find the source on my github).

It’s a simple button with a heart on the left side of the screen. When clicked, the user can add a comment and save it. The pages saved will be then listed in the extension popup button:

The gritty details

Every layer has its own telling and listening methods:

Background

Telling

_this.tell = function (message, data){
    var data = data || {};
    chrome.tabs.getSelected(null, function (tab){
        if (!tab) return;
        chrome.tabs.sendMessage(tab.id, {
            message   : message,
            data : data
        });
    });
};

Listening

function onPostMessage (request, sender, sendResponse){
    if (!request.message) return;
    if (request.data.view){
        _this.tell(request.message, request.data);
        return;
    }
    processMessage(request);
};

ContentScript

Telling

function tell (message, data){
    var data = data || {};
    // send a message to "background.js"
    chrome.extension.sendRequest({
        message : message,
        data : data
    });
};

Listening

// messages coming from iframes and the current webpage
function dom_onMessage (event){
    if (!event.data.message) return;
    // tell another iframe a message
    if (event.data.view){
        tell(event.data);
    }else{
        processMessage(event.data);
    }
};
// messages coming from "background.js"
function background_onMessage (request, sender, sendResponse){
    if (request.data.view) return;
    processMessage(request);
};

Iframe

Telling

_this.tell = function (message, data){
var data = data || {};
data.source = _view;
window.parent.postMessage({
        message   : message,
        data : data
    }, '*');
};

Listening

function background_onMessage (request, sender, sendResponse){
    // make sure the message was for this view (you can use the "*" wildcard to target all views)
    if (
        !request.message ||
        !request.data.view ||
        (request.data.view != _view && request.data.view != '*')
    ) return;
    // call the listener callback
    if (_listener) _listener(request);
};

The communication process is quite simple. When you visit a web page and like what you see (it can be anything really, it’s what you like, I won’t judge), you then click on the iHeart button. Then, the button tells to open up the comment iframe.

js/iframe/heart.js

function heart_onClick (event){
    $('.heart').addClass('active');
    _iframe.tell('heart-clicked');
};

It then processes the message in the ContentScript and opens the comment popup.

js/inspect.js

function processMessage (request){
if (!request.message) return;
    switch (request.message){
        case 'iframe-loaded':
            message_onIframeLoaded(request.data);
            break;
        case 'heart-clicked':
            message_onHeartClicked(request.data);
            break;
        case 'save-iheart':
            message_onSaved(request.data);
            break;
    }
};
...
function message_onHeartClicked (data){
    var comment = getView('comment');
    comment.iframe.show();
    tell('open-comment', {
        view:'comment',
        url:window.location.href,
        title:document.title
    });
};

The comment popup shows up and displays the current web page title below the comment box.

js/iframe/comment.js

function onMessage (request){
    switch (request.message){
        case 'open-comment':
            message_onOpenComment(request.data);
            break;
        case 'website-is-hearted':
            message_onIsHearted(request.data);
            break;
    }
};
...
function message_onOpenComment (data){
    $('.page-title').html(data.title);
};

When the save button is pressed, the comment iframe sends the info back to the ContentScript.

js/iframe/comment.js

function save_onClick (event){
    var comment = $('#comment').val() || '';
    _iframe.tell('save-iheart', {
         comment   : comment
    });
};

The ContentScript hides the comment iframe and tell the Background to save the whole thing.

js/inject.js

function message_onSaved (data){
    var comment = getView('comment');
    comment.iframe.hide();
    tell('save-iheart', {
        url:window.location.href,
        title:document.title,
        comment:data.comment
    });
};

And finally, Background finalizes all the details by saving the website in an array.

js/background.js

function onPostMessage (request, sender, sendResponse){
    if (!request.message) return;
    if (request.data.view){
        _this.tell(request.message, request.data);
        return;
    }
    switch (request.message){
        case 'save-iheart':
        message_onSaved(request.data);
        break;
    case 'all-iframes-loaded':
        message_allIframesLoaded(request.data);
        break;
    }
};
…
function message_onSaved (data){
    _websites.push({
        url           : data.url,
        title         : data.title,
        comment       : data.comment
    });
};

And … the receptionists did their job

That’s pretty much it. That’s my solution to a communication problem between multiple types of layers and it wasn’t too hard …

Now, if I could resolve as easily the communication problems in my personal relationship, that would be great, thanks :P

The example could be taken way way further by dealing with validations of data, saving the liked web pages in a database, dealing with resizing of iframes content dynamically, adding some animation to the extension to make it more fun to use. All of that is great and already do-able, but it’s out of scope of this article.

Top 10 Front-End Development Frameworks

Ivaylo Gerchev — Sun, 16 Jun 2013 11:38:58 +0000

(Editor’s note: purely for reasons of length and readability, this article is the first of two parts. This one focuses on the Bootstrap family, more will be profiled in the second part.)

As the Web matures and the range of mobile devices we use to access it rapidly grows, our jobs as web designers and developers get considerably more complicated.

A decade ago things were much simpler. Then, it was almost certain that most of our users were visiting our sites while sitting at their desk, looking at a large monitor. 960 pixels was more or less considered as a good width for a web page. Our main care was dealing with the dozen or so desktop browsers and jumping through a few extra browser hacks to support quirky old versions of Internet Explorer. But now, with the boom of handheld electronic devices in the last five to six years, everything has changed. We’ve seen the introduction of smartphones and tablets of all different sizes, eReaders, browsers on TVs and many others. The diversity is only going to increase each day.

Soon, more people will be accessing the Web on their mobile and alternate devices than on a desktop computer. In fact, already a significant number of people use their mobile phones as their only access to the Internet. That means it is important for us designers and developers to understand how to deal with this entire mobile world. And although, as of this writing, we haven’t entirely figured out how to make all the content we are accustomed to seeing at our desk provide an equally pleasing experience on our handheld devices, the technologies and tools for doing that get better.

One of the primary strategies we use when we deal with unknown viewport size is the so-called responsive web design. It’s a mechanism for providing custom layouts to devices based on the size of the browser window. By default, most browsers on small devices such as smartphones and tablets shrink a web page down to fit the screen and provide ways for zooming and moving around the page. Although it technically works, it is not such a great experience. The text is too small to read, the links too small to tap, and all that zooming and panning around is more or less distracting.

The technique of responsive web design is to serve a single HTML document to all devices by applying different style sheets based on the screen size in order to provide the most optimized layout for that device. For example, when the page is viewed on a large desktop browser, the content can be placed into multiple columns with normal navigation elements. But when that same page is viewed on a small smartphone screen, it appears in one column with large links for easy tapping. You can see just how responsive web design works at the Media Queries gallery site. Just open a design in your browser and then resize the window very narrow and very wide, and watch as the layout changes based on the window size.

So far we’ve seen that, at least for now, responsive web design is an sufficient solution for fighting with the growing device diversity, but what are the actual tools and technologies to implement it in our designs? Do we have to be web gurus to handle it or will just the essential skills we already have be enough? Are there any tools that can help us?

This is where front-end development frameworks come into play. Responsive web design is not so hard to implement but it can be a little bit tricky to make it all work on all targeted devices. Frameworks make this job easier. They allow you to create responsive, standard-compliant websites with minimum effort while at the same time keeping everything simple and consistent. Frameworks give you a lot of benefits such as speed and simplicity, consistency across different devices, and much more. One of the most important advantages is that they are so easy to use that even a person with minimal knowledge can utilize them without any problem.

In brief, if you are serious in today’s web development then using frameworks is a must and not an option. Nowadays your site must be extremely flexible in order to satisfy different browsers, tablets, smartphones and a whole bunch of other handheld devices.

A front-end web development framework is simply a collection of production ready HTML/CSS/JavaScript components that we can use in our designs. There are many frameworks out there but some of them stand out from the crowd. For your facilitation below you will find outlined some of the most powerful and popular frameworks available today. Bear in mind that these are not just CSS grids or so, but instead full-featured front-end development frameworks.

1. Bootstrap

Bootstrap is definitely the most popular and widely used framework, nowadays. It’s a beautiful, intuitive and powerful web design kit for creating cross browser, consistent and good looking interfaces. It offers many of the popular UI components with a plain-yet-elegant style, a grid system and JavaScript plugins for common scenarios.

It is built with LESS and consists of four main parts:

Scaffolding – global styles, responsive 12-column grids and layouts. Bear in mind that Bootstrap doesn’t include responsive features by default. If your design needs to be responsive you have to enable this functionality manually.
Base CSS – this includes fundamental HTML elements like tables, forms, buttons, and images, styled and enhanced with extensible classes.
Components – collection of reusable components like dropdowns, button groups, navigation controls (tabs, pills, lists, breadcrumbs, pagination), thumbnails, progress bars, media objects, and more.
JavaScript – jQuery plugins which bring the above components to life, plus transitions, modals, tool tips, popovers, scrollspy (for automatically updating nav targets based on scroll position), carousel, typeahead (a fast and fully-featured autocomplete library), affix navigation, and more.

Bootstrap is already powerful enough to empower any web interface. But in order to make more use of it and making the development process easier, you can find plenty of tools and resources that complement it. Some of them are listed below:

jQuery UI Bootstrap - an awesome resource for jQuery and Bootstrap fans that combines the power of both. It brings nicely the slickness of Bootstrap to jQuery UI widgets.
jQuery Mobile Bootstrap Theme - similar to the jQuery UI theme above, this is a theme built for jQuery Mobile. It is a handy resource if you have a web front-end built with Bootstrap and want to offer a similar look for mobile.
Fuel UX - this extends Bootstrap with additional lightweight JavaScript controls. It’s easy to install, customize, update, and optimize.
StyleBootstrap.info - Bootstrap has its own customizer but StyleBootstrap is a more detailed one with color pickers and the ability to style each component differently
BootSwatchr - a Bootstrap theme roller that shows the immediate results of your changes. For every generated style, the application generates a unique URL in case you want to share it with others or return and edit anytime later.
Bootswatch - a nice set of free themes for Bootstrap.
Bootsnipp - a good collection of design elements and HTML snippets for Bootstrap. It offers also form and button builders.
LayoutIt - drag and drop interface builder based on the elements and components of Bootstrap. It helps you to compose your design visually by placing and arranging different elements into your layout via drag and drop and then allows you to edit their properties. You get the base code and then expand it. Simple and easy.

2. Fbootstrapp

Fbootstrapp is based on Bootstrap and gives you the same functionality for Facebook iframe apps and designs. It includes base CSS and HTML for all standard components like typography, forms, buttons, tables, grids, navigation, and more, styled in the typical Facebook look and feel.

3. BootMetro

BootMetro is a framework inspired by the Metro UI CSS, which is built on top of Bootstrap, for creating Metro/Windows 8-styled websites. It includes all Bootstrap’s features plus some additional extras like tiled pages, an application bar, and more.

4. Kickstrap

Simply put, Kickstrap is a kind of Bootstrap on steroids. It uses Bootstrap as its base and extends it with many apps, themes and extras. This makes the framework a complete kit for building websites without the need to install anything. Just put it in your site and you are ready to go.

Apps are just bundles of JavaScript and CSS files that run together as a package after your page has finished loading. Some of the apps included by default are Knockout.js, Retina.js, Firebug Lite, and Updater. And you can add many more.

Themes give you the ability to differentiate from most Bootstrap websites’ standard look and feel.

Extras are fan-created additions to extend Bootstrap UI library. They usually use the same or similar syntax.

And Next Time…

Here we conclude our journey in the land of Bootstrap related frameworks. Stay tuned for the next part where more frameworks are waiting for you.

12 Free Google Reader Alternatives

Craig Buckler — Fri, 14 Jun 2013 16:02:28 +0000

Many of us don’t want Google Reader to die but it’s time to face reality. Google is abandoning the service on July 1, 2013 and no amount of pleading will dissuade them. It’s a huge blow for those who depend on the service such as journalists and people who prefer concise news feeds.

Google Reader may have been late to the party but it killed the market for commercial and ad-based RSS readers. Fortunately, some survived and a few new players have arrived…

Desktop and Mobile App RSS Readers

There are number of desktop programs, mobile apps and browser add-ons for viewing RSS feeds:

Feedly
Feedly has probably gained the most from Reader’s demise. It’s available as a Firefox add-on and an app for Android and iOS. However, it currently depends on Google Reader’s back-end so there could be issues on July 1.

Pulse
Pulse will import Google and other RSS feeds but it doesn’t feel quite like other readers. It’s primarily an iOS and Android app — an early web version is available although I found it a little unstable.

RSSOwl
RSSOwl is a multi-platform Java-based desktop application. It’s open source and has many powerful features including synchronization facilities. However, synchronization uses the Google Reader API so it may not remain an option much longer.

Brief
Another Firefox add-on which looks good and imports Google XML subscriptions. However, there’s no synchronization between different installations.

Opera
If you use Opera’s email client, you’ll be pleased to hear there’s a built-in RSS Reader. Whether this remains following Blink integration is another matter.

I’m not keen on OS-based RSS Reader applications: you won’t always be at your PC and cross-device synchronization can be difficult. Fortunately, there are a few…

Web-based RSS Readers

The alternatives include:

Bloglines
Ironically, Bloglines was Google Reader’s biggest causality. The service is back with new owners and offers a similar Google-like summary of headlines and a reasonable mobile experience.

InoReader
InoReader is the closest to a Google Reader experience, especially since you can sign up using your Google Account and import all feeds and starred articles with a single click. The mobile site works well, but it’s no match for the speed of a native app. InoReader is my favorite web-based application at this time.

The Old Reader
I’m not sure about the name, but The Old Reader provides a good-looking interface, easy sign-up, feed import and a responsive design for mobile. It’s a beta product and a little buggy but remains usable.

Comma Feed
A lightweight reader which looks similar — but better — than The Old Reader. It also provides a Google importer and a responsive view for mobile devices.

Good Noows
Good Noows has been around some time and is more attractive than Bloglines with a variety of feed viewing options. However, it’s a heavier application and doesn’t work well on mobile.

NewsBlur
NewsBlur’s servers suffered when Google announced Reader’s death but the service seems stable now. The website is supplemented by mobile apps but you’ll need to pay a subscription to unlock some restrictions.

MultiPLX
MultiPLX is a new (beta) product which offers Google Reader import and list or card views. It looks interesting, but stability may be a concern for a little while.

Nah — Any Other Options?

I’m yet to be convinced any of these are as good as Google Reader on multiple devices. Several of the OS-based apps lack synchronization or attempt to present glossy magazine style layouts. Some of the web alternatives are better but whether they have a long-term future remains to be seen.

One of my current favorites is Tiny Tiny RSS. It’s an open source PHP and MySQL/PostgreSQL application you need to host yourself. Installation is reasonably straight-forward assuming you’re comfortable configuring databases and cron jobs. It imports Google’s XML file and there are several Android apps which can connect to your server.

Tiny Tiny RSS is a reasonable alternative to Google Reader and, even if development ceased, there’s no danger your service will stop working.

There’s one chink of light in the gloom following Google Reader’s expiration: it will open the market to more competitors. Companies including Digg are frantically polishing their own RSS Readers in an attempt to entice those from Google. This list may be very different in a few months.

Learn Ruby on Rails

Fernando Tinoco — Fri, 14 Jun 2013 07:03:12 +0000

Ruby on Rails is the web development framework of the moment, powering GitHub, Twitter, Hulu and many more successful apps and websites. The arrival of Rails 4 is the perfect time to learn it.

SitePoint’s newest ebook, ‘Jump Start Rails’, from Andy Hawthorne, will get you up to speed with Ruby on Rails in just a weekend.

Andy has also prepared the ‘Build your first Rails’ app online course to take you from creating a complete Ruby on Rails 4 app with a log in system all the way to deploying it to Heroku, a leading Rails application hosting environment, in a couple of hours.

Also, our all time great, 10 part tutorial from Patrick Lenz can be found here: Learn Ruby on Rails: the Ultimate Beginner’s Tutorial.

If you are looking for more advanced topics such as this great Introduction to Sass in Rails, head over to RubySource for fresh tutorials and to discover new Ruby gems.

Regular Expressions – Gotta Love Them

Sarah Hawk — Fri, 14 Jun 2013 06:01:10 +0000

This morning I handed over the reigns of our regular Talk with the Experts sessions to Fernando, who did a sterling job of running the chat, the subject of which was Regular Expressions. Our experts today were SitePoint forum staff members Thom Parkin and Allan H, who did an amazing job of explaining a concept that most programmers find pretty sticky.

Here is a list of resources that came out of the session:

What is a Regular Expression?
How to create a RegEx
Syntax and parameters

And if you like puzzles… you may or may not like these…

A RegEx crossword
And another crossword
And another one

If you missed the session today because you didn’t know about it then make sure you sign up for email reminders of future sessions here.

And without further ado – a transcript of the session:

[23:00] Welcome to those people that have just joined. Thom Parkin (@ParkinT) is our expert today. He is a staff member of the SitePoint forums and is here to talk about Regular Expressions

[23:01] AllanH is also a staff member of the Sitepoint forums and will be an expert today.

[23:02] This topic is just TOO BIG for one person.

[23:03] Where would you recommend a complete beginner with next to no experience with regular expressions start? lol

[23:03] There are different “flavors” of regex. we’d like to discuss Perl Compatible Regular Expressions

[23:03] Regular Expressions are universal among most programming languages. However, the implementation varies among the languages too

[23:03] We would like to keep the discussion at a very broad and generic level.

[23:04] Exactly, Allan.

[23:04] Apache mod rewrite, PHP, Javascript, and of course Perl use PCRE

[23:04] The purpose and intent of RegEx is to parse, match, find-and-replace characters and strings.

[23:04] why i must learn regular expression in programming ?

[23:05] Great question.

[23:05] Actually, you are not REQUIRED to learn RegEX

[23:05] You are not required to learn IF or Switch statements.

[23:05] How close are GAWK REs to PCRE?

[23:05] It is just another tool that can (often) help you.

[23:05] There are good string functions but at times they are not powerful enough

[23:05] It’s really about pattern recognition, isn’t it? I’ve seen regular expressions to check that email addresses match an expected format and also in .htaccess redirects…

[23:06] That’s right.

[23:06] And not always so easy

[23:06] I’ve seen some that get what they want and are happy

[23:07] I am not sure how close GAWK’s implementation is to PCRE.

[23:07] … until they also get what they want to NOT get

[23:07] So true, Allan

[23:08] So could you give us an example of a (simple) regular expression?

[23:08] That could be said about all software code, eh?

[23:08] Most times it’s easier to figure out the problem when you get too much than when you don’t get anything

[23:08] JohnLacey asked an excellent question…

[23:08] True enough, I guess regex is part science and part art

[23:09] Email validation is the “classic” use case for RegEx but I don’t think it is a very good example.

[23:09] I started with the PHP documentation

[23:09] Because an email address can fit the prescribed format, but still not exist?

[23:10] Read it and still refer to it often

[23:10] Parsing data to determine, for example, all the digits AFTER a decimal point might be an example of a “simple” RegEx. Allan, do you agree?

[23:10] Yes, and something that might come up

[23:11] Suppose I have this string:

[23:11] 3.14159

[23:11] Using RegEx you look for patterns, as johnlacey mentioned.

[23:11] Allan, correct me where I mis-state anything…

[23:12] The decimal point becomes the “anchor” in our evaluation. We want to see what comes AFTER it.

[23:12] and can’t or don’t want to cast it as a float?

[23:13] DRAT. I cannot type slashes in this chat.

[23:13] /\\

[23:13] \/foo\/

[23:13] Are there control characters that I am not aware of?? I think I just turned off all the power to New York City!!

[23:13] If you knew how many numbers were always in front you could use string funtions

[23:14] “IF” you knew. Right.

[23:14] Suppose you don’t

[23:14] backslash before fwdslash

[23:14] Thanks. That wil further complicate this!!!

[23:14] But for our sake we NEED to get that decimal!

[23:15] \/\d*[.](\d*)\/

[23:15] NO. The preceding slashes appear too.

[23:15] Here’s how I would approach it. The slash ‘d’ represents any ‘digit’ (Numeric)

[23:16] We know there is an UNKNOWN number of digits BEFORE the decimal point.

[23:16] slash d followed by the star \d*

[23:16] isn’t “.” a “wildcard”?

[23:16] Next is the decimal itself. However, a dot is a command character in RegEx so we need to define it as EXPLICIT

[23:17] Exactly, AllanH

[23:17] But if you put characters in square brackets they are evaluated as literals

[23:17] So [.] would represent the dot

[23:17] and only ONE dot

[23:18] Next is the data we are trying to capture. So we must surround it with braces () to represent a group.

[23:18] and that data will ALSO be a set of digits with an unknown length (\d*)

[23:19] But suppose we are not even sure there are ANY digits before the decimal?

[23:19] the “star” means zero or more

[23:19] In that case this \d*[.](\d*) would not work

[23:19] YOu are correct. I was confusing the star and the question mark;

[23:20] which means ONe or more. Bad example. I should have used the ? and then explained the star. *embarrassed.

[23:20] To better answer the original question, here are some ‘essentials’ of the Regular Expression.

[23:21] As AllanH pointed out, the star means zero or more and refers to the set that preceded it.

[23:21] I like the Mozilla Docs for Javascript reference

[23:21] Do you have a link?

[23:22] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

[23:22] That is great! We can go home now!!

[23:22] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

[23:22] Maybe not, Docs aren’t the easiest thing to digest

[23:23] eg. http://www.pcre.org/pcre.txt

[23:23] RegEx is hard for most people because it can be very intimidating.

[23:24] I know I’m only on my second coffee of the day, and my brain is exploding a little just reading the Mozilla documentation. lol

[23:24] Like anything, if you approach it gently – one bite at a time – and practice in small doses…

[23:24] The syntax is weird and the choice of characters make it very confusing to read.

[23:24] I only have and still do learn on a “need to know” basis.

[23:25] Do regular rexpressions vary between languages, or are they pretty universal?

[23:25] There are many tools (online and desktop) that will evaluate RegEx. They let you “Poke and try” different patterns

[23:25] As I said earlier “Regular Expressions are universal among most programming languages. However, the implementation varies among the languages too “

[23:26] There are general syntax rules that do not vary among languages.

[23:26] I think once you get the basic syntax down they’re pretty much alike, at least enough so that you can figure out how to do what you need to by referring to the Docs

[23:26] Ruby, for example, will recognize RegEx in almost anyplace a string could be used.

[23:27] and if it ain’t binary it’s text

[23:29] I think a lot of the “

[23:30] I think a lot of the “tools” eg. match, replace, split – are similar across languages too

[23:30] A lot of web developers first get exposed to RegEx when fixing a bug on an .htaccess file or trying to figure out URL redirections. Do you have any tips or a trick for those cases?

[23:30] Absolutely!!

[23:31] My first response to that question, nandotinoco, is “StackOverflow” !!

[23:31] tongue-in-cheek

[23:31] You could try asking in the http://www.sitepoint.com/forums/forumdisplay.php?97-Server-Configuration-Apache-amp-URL-Rewriting forum

[23:32] That’s better ;-)

[23:32] Those rewrites seem to be a beast of their own.

[23:32] I’ve seen examples where they check for domain.com/directory and change it to domain.com/directory/

[23:32] Apache has things like “flags” that can get tricky at times, but syntax is similar

[23:33] Yes, gotta love “friendly URLs”

[23:33] That’s right. By capturing groups and then reapplying what was captured you can completely rearrange things

[23:34] and being able to redirect an HTTP request from an old page to the new page

[23:35] If you want to sharpen your RegEx skills there are numerous puzzles and crosswords online that use Regular Expressions.

[23:36] Could you like us to one of those puzzles? Sounds like fun (but also a challenge).

[23:36] link us*

[23:37] Searching…

[23:37] How much performance difference do you think there is between using [a-zA-Z] …. [a-z] \/i and [\w] ?

[23:38] my feeling is use what’s easiest to read when starting out, then work in the more elegant as you progress

[23:38] That’s a question that is hard to answer, probably varies among languages and – I bet – would be very slight.

[23:39] Here is one that I admit I have not been able to complete: http://www.coinheist.com/rubik/a_regular_crossword/grid.pdf

[23:39] Thanks ParkinT

[23:39] But, better for beginning, I just found this in a Google search: http://regexcrossword.com/

[23:40] a line that’s say 30 characters long but readable vs. the same effect from one that’s 8 characters long but needs to be mentally “translated”

[23:40] And, this one looks interesting… http://www.regexcrosswords.com/

[23:40] I agree, AllanH.

[23:41] Developers tend to favor ‘elegance’ and ‘cleverness’ a bit too much.

[23:41] I am quite guilty as charged.

[23:41] Concise is a good thing to strive for. But readability is important because MAINTAINING code is critical (and very expensive).

[23:41] and as you say, in terms of performance, negligible difference

[23:42] but we DO like to show off ;)

[23:42] If another developer (or even the future you) has difficulty deciphering the intent of an expression..

[23:42] that translates into time which is money.

[23:42] LOL ABSOLUTELY.

[23:42] I completely agree – readability is so important.

[23:43] lol add a comment that’s longer than the verbose code

[23:43] Perhaps we should take a lesson from those puzzles on line (pun intended) and build a Regular Expression course on Learnables.

[23:44] irt \w compared to [a-z], \w is actually slower because it matches a LOT more than just a-z, including many other language’s “word” characters

[23:44] @ParkinT one for the MC?

[23:46] true indeed a “word” to Perl is not always an English word

[23:47] eg. my_function

[23:47] At the same time, “what’s a few milliseconds among friends?”

[23:48] yes, the performance difference is very small… unless you’re specifically optimising that case, always go for the most readable code

[23:49] So I wonder what I would consider to be the basic essential things to “get” first. escape character comes to mind ;)

[23:50] and ^ start and $ end

[23:50] In my experience the ‘basics’ are those things you use most often.

[23:50] Yes. Start and end. The quantity ? * + {.}

[23:50] And (what I call) the shortcuts: \w \W \s \S

[23:51] \d

[23:51] and the NOT ^

[23:51] I use quantifiers all the time

[23:51] and character classes

[23:51] It is important because MOST RegEx implementations are very greedy

[23:52] Without the quantifiers you could match far beyond the point you intended.

[23:53] true how many times have I seen a thread where the OP wanted a single a tag but was getting the first a tag to the last

[23:53] To follow up on an earlier comment, I have found this to be very, very instructive: http://regexcrossword.com/challenges/tutorial/puzzles/1

[23:54] Click on the HELP in the top navigation area

[23:56] The history of Regular Expressions is very interesting. It began before computers in any form like we know them today.

[23:57] According to Wikipedia (http://en.wikipedia.org/wiki/Regular_expression) around 1950. I would venture to guess NONE of us here were around then. And *I* am pretty old !!

[23:58] Thanks to all of you for taking time to participate.

[23:58] Sitepoint and Learnables represents an incredibly rich resource for modern web developers.

[23:59] Yes, unless anyone wants to ask a final question we should wrap the discussion up here.

[23:59] If there is something about which you are passionate or feel very comfortable talking about, let us know.

[23:59] An ‘expert’ is often only the one who is willing to talk about it out loud.

[23:59] Thanks so much for your time AllanH and ParkinT and for sharing some of your knowledge

[0:00] I wanted to add that regex questions can be asked in other forums too

[0:00] Sitepoint forums!!

[0:00] http://www.sitepoint.com/forums/forumdisplay.php?34-PHP

[0:00] http://www.sitepoint.com/forums/forumdisplay.php?15-JavaScript-amp-jQuery

[0:00] http://www.sitepoint.com/forums/forumdisplay.php?36-Perl-amp-Python

[0:01] For sure. The forums are always there as a great resource. Thanks to everyone else for joining us. Next week we’re talking SASS

[0:01] Next week we GET SASSY

[0:02] You’re most welcome nandotinoco, Thanks all

It’s Not Yours, It’s Mine: Framing Help Content with Personal Pronouns

Georgina Laidlaw — Fri, 14 Jun 2013 01:21:23 +0000

In an intriguing post earlier this year, Dustin Curtis made the case for using the second-person possessive determiner—your—when addressing users through the interface.

His post raises some interesting arguments for and against using “mine” (as in My Account, My Settings) and “your” (Your Profile, Your History), particularly in system interfaces.

Basically his arguments revolve around the issue of whether the interface is an extension of the user, or a tool that the user’s interacting with. And he ultimately decides the latter.

It’s an interesting discussion, but there are a couple of special cases where it can be helpful to cast the interface as an extension of the user. And one of them is Help content.

It’s not yours, it’s mine

The argument for having Help content take the first person (I, my, mine) rather than the second (you, yours) might seem obvious: help content is often presented as FAQs, and user questions are of course cast in the first person.

FAQs

Take a look at the recently reworked 99designs’ help content and imagine these questions in the second person:

How do I write a good design brief?
What package should I choose for my contest?
How do I leave comments in my contest?

These questions fit the first person because we know they’re asked in the first person. They read exactly as our inner voice says them. So to rephrase them in the second person would be passable at best, and incredibly jarring at worst.

Help

If you choose to build a Help Centre or Support page, though, things might well end up being less personal. Google’s Drive help page is a case in point. It follows Curtis’s tool-for-interaction arguments and presents the help as topics or subjects, in the second person:

Install Google Drive on your computer
Enter links in a spreadsheet
Organize your files

These shorter, topic-style headings can be easier to scan and comprehend, but what they gain in directness they pay for with personality. Google does a great job of presenting itself as a massive, impersonal behemoth, and its Drive help pages are no exception.

Support

Evernote strikes an interesting compromise between these two options. Its footer shows three support resource categories: Support Home, Knowledge Base and Forum.

Support Home provides access to all Help resources, and it’s presented in the second person. Here, we’re interacting with the tool.

The Knowledge Base acts sort of like an index and reveals that articles within the knowledge base itself are presented like the FAQs mentioned earlier—in the first person. To my mind, this provides a human aspect to the help content, especially in the context of a page that contains other less personal elements like guide titles and device category names.

Finally, the Forums take the whole FAQ idea that step further, with—as you’d expect—real questions being asked by real people. The question threads are arranged by topic, and the formulation of thread titles is as casual as you’d expect.

The most interesting point here? The forum thread titles frequently imply the first person, but don’t use the personal pronoun I.

Nonetheless, we get the full gamut of help with Evernote, from brand-built Guides, to brand-provided help seen through the lens of a user (FAQs), to the brand’s actual customers asking for and giving one another help, as well as getting it from Evernote staff.

Help: it’s not just about you

As these examples show, help is one area where the I/you debate can get tricky. The approach you use will likely depend on the way you’re framing or presenting your help content—as quick access to common issues (a la 99designs), or as thorough product documentation (as with Drive). (As a side note, this old but still very relevant post makes the point against FAQs as product documentation.)

Beyond that issue, the way you present your help might also reflect something of your brand.

99designs is friendly, and it targets small businesses and entrepreneurs. Personal, helpful FAQs make sense here.

Google is a massive, formal web giant with a massive audience. Cold, impersonal help that gives the impression of having been set in stone by a legion of experts doesn’t seem inappropriate for this brand.

And Evernote strikes a balance between friendly and authoritative, maintaining a warmth in its help content despite using a range of means to organize and provide access to it. Evernote has extremely detailed help, and it could easily have gone the way of Google in presenting it. But it didn’t.

Do you refer to users as “I” or “you” in your help content? How does that reflect—and reflect on—your brand? I’d love to hear your thoughts in the comments.

How to Explain SEO to a Sixth Grader

John Tabita — Wed, 12 Jun 2013 13:30:35 +0000

I’m not a technical SEO person, but I understand the technicalities of SEO well enough.

Search engines use complex (and jealously guarded) mathematical formulas called algorithms to determine how sites rank, which is why no legitimate SEO firm can guarantee results. Many, however, resort to “black hat” SEO, which breaks the established rules and will eventually get your site banned from Google and the other search engines.

Search engines do not actually search the web—they search their index (i.e, database) of the web. Web pages get placed in their index by automated computer programs, called spiders or bots, which crawl the web and add pages to their index. Until these bots find and index your site, there’s no way to appear in the search results.

Obtaining top ranking in the search results requires both on-page and off-page optimization. On-page optimization is everything done to the individual pages of the site so that Google understands what each page is about. This starts with keyword research to determine the best converting keywords you can rank well for, given the competitiveness of your market. These keywords are then used in the title, heading, and throughout the pages of your site.

Off-page optimization involves building backlinks from other authoritative websites to improve your PageRank, which is a link analysis metric applied by Google that assigns a rank to …

Excuse me, Mr. Customer; you seem to be staring off into space. You say I lost you at “algorithms”? But I haven’t even gotten to canonicalization of URLs. Well okay, let me begin again …

Algorithms, Spiders, and Bots—Oh My!

I’m tasked with the job of teaching sales reps how to explain the complexity of SEO with simplicity; otherwise, they’ll never be able to sell it. The problem is, as technically correct as the above might be, is doesn’t answer the burning (and often unasked) question each and every prospect you encounter will have:

“How will this help me make more money?”

To answer that question in a way that a sixth-grader can understand, you must sell SEO using The Concept of Expertise. It goes something like this.

Someone who’s a recognized authority in a field tends to make more money than an amateur, wouldn’t you agree? Because an expert is more likely to be recommended by others and command higher prices, right? Can you tell me someone you consider an expert or authority in his field?

What are some of the qualifications that make this person an expert in your eyes?

Years of experience in a field
Recommendations from others
Endorsements from top industry experts
Depth, breadth, and quality of knowledge

SEO is just like that. It’s the work that goes into making your website an authority in the eyes of search engines like Google, so that they’ll “recommend” it to its users, by ranking you higher than your competition.

Just like offline expertise, SEO requires both time and work. No one becomes an expert overnight, and certainly not without working at it.

Right now, as far as Google’s concerned, your website is an amateur, so it isn’t going to recommend you. My job is to make it—and by extension, you—into an authority, so that they will. Does that make sense?

Never Answer a Question Your Prospect Isn’t Asking

That simple analogy may be all your prospect needs. But here’s where we get it wrong. We think the more we explain, the better the other person will understand.

Not so. If your prospect isn’t asking for more information, stop talking.

Sure, you could go on to explain how “years of experience” equates to the age of his website; how “recommendations from others” is like the number of inbound links from other related sites; that “endorsements from top industry experts” are quality links from other authoritative websites; and how “depth, breadth, and quality of knowledge” is comparable to the size of the website and amount of information found there. But why should you, unless he asks?

Always be prepared to explain the details. But keep in mind that you and I live and breathe this stuff; our prospects do not. The best approach is to spoon-feed them information until they’re satisfied. Confused prospects do not buy; so beware of over-explaining yourself out of a sale.

So how do you “explain SEO to a sixth grader”? What have you used that’s worked successfully? Post your experiences in the comments below.

Image credit

Getting Started with Firefox OS: Hosted and Packaged Apps

Jeff Friesen — Wed, 12 Jun 2013 13:16:09 +0000

Mozilla’s Firefox OS runs Web apps instead of native apps. In Part 1 of my two-part series on getting started with this mobile operating system, I introduced Firefox OS and discussed setting up an environment for developing Web apps.

This article ends the series by introducing you to hosted and packaged apps, which are the two Web app categories supported by Firefox OS. I show you how to create each kind of app, and how to distribute the app via Firefox OS Marketplace.

Discovering Hosted Apps

Firefox OS supports hosted apps, which are websites turned into Web apps — the website is the app. Millions of websites already exist that can be easily turned into hosted apps, giving Firefox OS an exceptional competitive advantage.

Creating a Hosted App

Creating a hosted app is easy. From the dashboard, enter a website’s URL and click the Add URL button. For example, I entered my TutorTutor website’s http://tutortutor.ca URL, as shown in Figure 1.

Figure 1: Enter a URL and click Add URL.

In response to clicking Add URL, the simulator starts running and displays part of my website’s main page — see Figure 2.

Figure 2: Drag the mouse over the simulator screen to view more of this Web page.

The dashboard creates a manifest file (discussed shortly) with default values and then validates it. According to Figure 2, validation resulted in a single warning message:

app submission to the Marketplace needs at least an 128 icon

The error message refers to my not having specified an icon for this app. Firefox OS Marketplace requires a submitted app to have a minimum of one icon whose dimensions are at least 128-by-128 pixels.

In the absence of an icon, the dashboard creates a default application icon for the home screen. When creating the app shown in Figure 2, the dashboard obtained this icon from my website’s favicon.ico file and scaled it up, as shown in Figure 3.

Figure 3: An application icon based on favicon.ico was generated for tutortutor.ca.

Every hosted and packaged app requires a manifest, a JSON file named manifest.webapp. The manifest provides information about the app such as version, name, description, icon location, and locale strings. The dashboard creates a manifest when it isn’t specified.

For example, Listing 1 presents a simple manifest.webapp file that describes my website’s Aquarium page as a hosted app.

{
  "name": "Aquarium",
  "description": "Observe several swimming fish.",
  "launch_path": "/cgi-bin/makepage.cgi?/software/Aquarium"
}

Listing 1: The name and description fields are required for hosted and packaged apps.

The name field identifies the app’s name, which is displayed on the simulator. The description field describes the app and has a maximum length of 1024 characters. The launch_path field identifies the location of the Web resource to be loaded.

Note
To learn more about the app manifest, check out Mozilla’s App manifest and FAQs about app manifests documentation.

I uploaded this manifest.webapp file to my website’s root directory. However, before I could use the dashboard to add this app, I had to add the following MIME type to my Web server and associate it with the .webapp file extension:

application/x-web-app-manifest+json

App manifests must be served with a Content-Type header of application/x-web-app-manifest+json. Although not currently enforced by Firefox, it is enforced by Firefox OS Marketplace.

After accomplishing this task, I entered http://tutortutor.ca/manifest.webapp into the dashboard — see Figure 4.

Figure 4: Enter a manifest URL and click Add Manifest.

In response to clicking Add Manifest, the simulator starts running and displays part of my website’s Aquarium page — see Figure 5.

Figure 5: Drag the mouse over the simulator screen to view more of the aquarium.

The dashboard validates the manifest, resulting in a “Missing 'icons' in Manifest.” warning message because I didn’t specify an icons field in the manifest. As a result, the dashboard chooses a default icon (there is no favicon.ico file in the launch path) — see Figure 6.

Figure 6: A default application icon is generated for Aquarium.

This app should have its own icon. According to the Firefox OS app icons page, the application icon is a 60-by-60-pixel image provided in 24-bit PNG format.

This page provides a list of do’s and don’ts, examples, and templates for creating your icons. I chose a blue rounded circle template along with a PNG-based overlay, created a small rectangular thumbnail image of an aquarium, and combined these images via an online tool.

Continuing, I named this file 60.png, created an /icons directory on my Web server, and uploaded this file to that directory. Then, I modified the manifest.webapp file to look as follows, and uploaded it to my Web server’s root directory:

{
  "name": "Aquarium",
  "description": "Observe several swimming fish.",
  "launch_path": "/cgi-bin/makepage.cgi?/software/Aquarium",
  "icons":
  {
    "60":  "/icons/60.png"
  }
}

I started the simulator and observed the new icon on the home screen that’s shown in Figure 7.

Figure 7: My app icon consists of a rectangular aquarium image over a circle background.

Distributing a Hosted App

After creating a hosted app, you’ll want to distribute it, most likely through Firefox OS Marketplace. In this section, I’ll walk you this process, starting with steps for completing the app.

Firefox OS Marketplace requires that your app have at least a single icon, whose dimensions are at least 128-by-128 pixels. Therefore, you should create this icon and store it in an appropriate location on your Web server (and update manifest.webapp, appropriately).

There are a few other fields that you might want to specify in the manifest. For example, you might want to specify developer and version fields. Listing 2 shows you my final manifest file for the Aquarium app.

{
  "name": "Aquarium",
  "description": "Observe several swimming fish.",
  "version": "1.0",
  "launch_path": "/cgi-bin/makepage.cgi?/software/Aquarium",
  "developer":
  {
    "name": "Jeff Friesen",
    "url": "http://tutortutor.ca"
  },
  "icons":
  {
    "128": "/icons/128.png",
    "60":  "/icons/60.png"
  }
}

Listing 2: I’ve added developer and version information to this manifest.

My final manifest references two icons. The 128-by-128-pixel icon in 128.png is used by Firefox OS Marketplace when presenting the app, and the 60-by-60-pixel icon in 60.png appears on the simulator home screen as the app icon.

Another item to consider is what the user will initially see when clicking the Aquarium icon. Figure 8 shows you that the aquarium shown in Figure 5 is not what the user initially sees.

Figure 8: The user doesn’t initially see the aquarium with swimming fish. The page must be dragged until the aquarium is in view.

I created my website before smartphones and tablets became widespread and haven’t yet redesigned this site to make it mobile friendly. I could use media queries and responsive design for this task.

Note
Mozilla provides extensive documentation on responsive design.

After completing your app, you can submit it to Firefox OS Marketplace. Begin by pointing your browser to the submission page and log in with your free Persona account.

Figure 9: You need to log in via your free Persona account.

After signing in, choose a device type, which would be Firefox OS, and enter the app manifest URL — see Figure 10.

Figure 10: Choose the Firefox OS device type and enter the app’s manifest URL.

The marketplace attempts to validate the app. When it reports validation successful, click the Continue button to fill out app details — see Figure 11.

Figure 11: The screen displays my 128-by-128-pixel icon. The description is taken from the manifest’s description field.

I’m not going to proceed because I don’t feel that Aquarium is ready for publication — I should employ responsive design to provide a better viewing experience when the user is taken to the page.

Discovering Packaged Apps

Firefox OS also supports packaged apps, which are Zip files containing all app assests: HTML, CSS, JavaScript, images, manifests, and so on. Unlike hosted apps, they are downloaded onto the device.

Packaged apps can access sensitive APIs and must be verified by the stores where they’re distributed. A store reviews the app and, if acceptable, signs the Zip file with the app’s private key, assuring the app’s users that the app has been reviewed for security and other issues.

There are three kinds of packaged apps:

Privileged: A privileged app is approved by the Firefox OS Marketplace via a special process. It provides more safety for users when an app wants access to certain sensitive APIs on a device, and is equivalent to a native app on a platform such as iOS or Android.

Certified: A certified app is intended for a critical system function (e.g., a smartphone’s default dialer or system settings app). It’s used for critical functions on a Firefox OS phone, and isn’t intended for third-party apps — most app developers can disregard certified apps.

Plain Packaged: A plain packaged app is a regular packaged app. It cannot use certain sensitive Web APIs. Firefox OS Marketplace signs it, but doesn’t perform the special authentication process used for privileged or certified apps.

For more information on packaged apps (and especially how they differ from hosted apps), check out Mozilla’s Packaged Apps document.

Creating a Packaged App

Creating a packaged app is also easy. To begin, you should set up a simple file and directory structure. For example, I created the following file and directory structure for a packaged app that obtains and displays the current geographic location:

icons
   60.png
   128.png
js
   app.js
   jquery-1.10.1.min.js
index.html
manifest.webapp

Listing 3 presents the contents of index.html.

Where am I?

Geolocation coordinates:

Listing 3: The index.html file is the app’s starting point.

Listing 3 describes the HTML that drives the app. The header includes a title (which a Firefox OS device may or may not use), a script tag that imports jQuery, a script tag that imports the app’s JavaScript logic, and a style tag (discussed shortly).

The app displays a button, followed by a Geolocation coordinates: label, followed by a couple of spans for displaying latitude and longitude, followed by a div for presenting a map image of the current location. These user-interface elements look okay in portrait mode.

In landscape mode, most of the map is cut off and there is excessive whitespace on the right. To improve the user interface, I’ve added a style tag whose media query floats the elements over the screen when the device is in landscape mode.

Listing 4 presents the contents of app.js.

$(function()
{
   if (!("geolocation" in navigator))
   {
      $("#latitude").text("geolocation not available");
      return;
   }
   function getGeoData()
   {
      function success(position)
      {
         var latitude = position.coords.latitude;
         var longitude = position.coords.longitude;
         $("#latitude").text("Latitude: "+latitude);
         $("#longitude").text("Longitude: "+longitude);
         var img = new Image();
         img.src = "http://maps.googleapis.com/maps/api/staticmap?center="+
                   latitude+","+longitude+"&zoom=13&size=300x300&sensor=false";
         var node = document.getElementById("map");
         node.removeChild(node.firstChild);
         node.appendChild(img);
      }
      function error(err)
      {
         $("#latitude").text("unavailable");
      }
      navigator.geolocation.getCurrentPosition(success, error);
   }
   $("#whereami").click(getGeoData);
});

Listing 4: The app.js file defines the app’s logic.

Listing 4 checks that the navigator.geolocation property exists, outputting a geolocation not available message when this property doesn’t exist. Also, it registers a click handler with the whereami button to invoke getGeoData() when the button is clicked.

The getGeoData() function first defines success() and error() functions to be called when the location can be obtained or not (perhaps the user doesn’t give permission). It then executes navigator.geolocation.getCurrentPosition(success, error);.

The user is asked to grant/deny permission. When granted and nothing goes wrong, success() is called with a position argument whose latitude and longitude are extracted and displayed. Also, a Google-based map for this position is obtained and displayed.

Listing 5 presents the contents of manifest.webapp.

{
  "name": "Where am I?",
  "description": "This app tells you where you're located.",
  "version": "1.0",
  "launch_path": "/index.html",
  "developer":
  {
    "name": "Jeff Friesen",
    "url": "http://tutortutor.ca"
  },
  "icons":
  {
    "128": "/icons/128.png",
    "60":  "/icons/60.png"
  },
  "permissions":
  {
    "geolocation":
    {
      "description": "Needed to tell the user where they are"
    }
  }
}

Listing 5: Permission is needed to access the Geolocation API.

An app needs permission to access the Geolocation API. The name of this permission is geolocation, and it must appear as a subfield of a permissions field.

Note
Mozilla’s App permissions document describes `geolocation` and also provides a complete list of permissions.

Figure 12 shows the app running in portrait mode.

Figure 12: The ‘Where am I?’ app in portrait mode.

Figure 13 shows the app running in landscape mode.

Figure 13: The ‘Where am I?’ app in landscape mode.

Distributing a Packaged App

Before you can distribute a packaged app, you need to zip its file and directory structure into a Zip archive. For example, I archived ‘Where am I?’s file and directory structure (repeated below) into whereami.zip:

icons
   60.png
   128.png
js
   app.js
   jquery-1.10.1.min.js
index.html
manifest.webapp

You can now submit this packaged app to Firefox OS Marketplace. As when submitting a hosted app, point your browser to the submission page and log in with your free Persona account.

fter signing in, choose a device type, which would be Firefox OS. Then, click the Packaged tab, click the subsequent Select a file… button, and select the packaged app’s Zip file — see Figure 14.

Figure 14: The Zip file is automatically validated.

Click the Continue button and fill out app details on the resulting page. After filling out these details, click the Continue button again to have the app reviewed.

Conclusion

I’ve introduced hosted and packaged apps, and have shown you how to create and distribute each kind of Web app. To learn more about Firefox OS and app development, check out Mozilla’s extensive documentation at the following sites:

Firefox OS’s focus on Web apps makes it an interesting alternative to Android, iOS, and other native-app-oriented mobile operating systems. With Firefox OS starting to gain momentum, now is a great time to start writing (and eventually monetizing) Web apps for this platform.

Not Your Grandfather’s Open-source

Eran Galperin — Wed, 12 Jun 2013 12:31:40 +0000

Open-source development is on the rise and the effects can be felt throughout the software development world. Hand in hand with the growth of the software engineering community, open-source has become mainstream over the last couple of decades, and is now one of the main building blocks of most software projects.

Business opportunities around open-source have evolved as well. Household names such as Redhat, MySQL and WordPress have shown that with the correct positioning and business model, open-source can be a huge business. Big companies and venture capital have taken note as well, funneling budgets and resources into open-source.

A common misconception about open-source is that it means code that is available for zero cost. The “Free” part of “Free open-source” talks about freedom (as in “free speech”) and not about zero cost (as in “free beer”) – the freedom to read, modify and redistribute the code. While there is natural resistance to spending money on something you are used to getting for free, commercially supporting open-source has only benefits in the long run.

Adding a commercial element to open-source leads to more funds being available to develop and improve open-source products, and for providing professional level support and integration services. This, in turn, reduces the total-cost-of-ownership – the costs associated with using and maintaining an open-source project that might have been provided “as-is” without commercial support.

The economics of open-source

Many look at the successes of Redhat and MySQL as outliers, and still consider open-source as a volunteer process. Hobbyist / volunteer open-source development will always be a big part of what open-source is, but many projects – as they reach a certain level of maturity and popularity – need to find some level of commercial support or face being bogged down by issue reports and feature requests, while core team members eventually move on to gigs that actually pay the bills.

At that point, open-source projects typically evolve in one of several ways:

Project owners release control of the project to the community, and hopefully a team of contributors forms organically to maintain the project over time.
A big company, such as Google or Microsoft, takes ownership of the project and provides paid engineers to work on it full-time.
A dual-licensing model emerges where higher levels of support or features are included in commercial licenses only. This is often termed as “Commercial Open-Source”.

The first option is certainly viable but can be risky – without someone taking ownership of a project, many times development by committee hits a wall and trails off as disagreements about direction and lack of accountability derail an otherwise well-meant effort.

The second option is not really something you can plan for – great when it happens but not something you can count on for sustaining an open-source project.

The third option is what I believe would be the future of most open-source project, as they transition from a hobby to a professional pursuit. Using a dual-license model, with commercial licensing supporting the development of both community and enterprise versions. It’s a model that companies such as Redhat and MySQL used very effectively in building billion dollar businesses and enterprise grade products.

A professional approach to developing open-source products benefits even you, as the end user. The initial cost might rise (especially compared to *zero*), but the overall costs (the total-cost-of-ownership) are significantly reduced.

How many times did you use an open-source project that had a show-stopping issue (for you) that has been opened for over 2 years? Did you ever think to yourself – “I would pay the developer to fix this bug only so I could use this otherwise great product”? What about new features or customization that would take the original developer a fraction of the time to add compared to you and your team? This kind of thinking process happens every day at a score of software houses around the world. Wouldn’t it be great if that option actually existed?

A big opportunity in a huge market. Are you excited yet?

The software market is huge and growing fast, as software penetrates every aspect of our daily lives. As the industry matures and becomes more professional, so do the products that drive it – and especially open-source. With several big names and a host of small successes already in the books, commercial open-source products constantly prove this model works well, and benefits all sides involved.

Building a successful business is not easy regardless of the field, and it’s the same story with open-source products. The opportunity is there, and the time is now – as there are still relatively few professional open-source offerings, especially compared to the huge range of software projects that could benefit from it.

Most likely you have never considered building a business from releasing code. If I have opened your mind a bit for new business opportunities as a software developer, then my goal in writing this article has been achieved.

If you have any questions or comments – hit me up in the comments. Let’s talk about it!