2013 Typeahead.js for jQuery – Twitter’s Flexible Autocomplete

Is Twitter enjoying Open Source more and more? For years they weren’t to be seen, then they released Bootstrap to the community and now they are pushing out new projects regularly. The newest addition is titled Typeahead.js. This plugin for jQuery adds autocompletion to any input element you want to enhance that way. The autocompletion data can be hard-coded or called from JSON files on local or remote storage.

Typeahead.js: Autocompletion At Its Best

Typeahead.js relies on jQuery from 1.9 onwards. Twitter’s engineers created it to fit their own needs for a flexible, yet easily implementable autocompletion functionality. A few days ago they released the solution to Github under the liberal MIT licence, which allows for free private as well as commercial use. Contributors are welcome.
What lets Typeahead.js stand out from the crowd is its openness as to the origin of the data pulled in for autocompletion purposes. The easiest, yet most common way, is to hard-code the data inside the HTML document, the function call to be more precise. I wouldn’t have started writing this article, if Typeahead.js was limited to this method. Anyway, hard-coded data may be absolutely sufficient in smaller scenarios.
Let’s take a look at a hard-coded autocompletion setting that would autosuggest the names of the planets of our solar system on input:

1 2 3 4 5 6

$('#input').typeahead([ { name: 'planets', local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ] } ]);

Some hard-coded Arabic phrases. Yes, Typeahead.js handles RTL, also…

Far more mighty is the functionality of pulling in data from JSON files. Several ways lead to the same result. JSON files on external storage providers can be read and prefetched to localStorage. This would guarantee for a high query speed:

1 2 3 4 5 6

$('#input').typeahead([ { name: 'countries', prefetch: '/countries.json', } ]);

Prefetched JSON, queried from localStorage

As this only makes sense for datasets under a certain size limit, Typeahead.js adds the ability to query the dataset live using the common parameter q?=. This mode of operation certainly is slightly slower, as each input invokes an external query. The difference in terms of our function call is small. Instead of using the parameter prefetch we tell the script to leave the dataset remote.
Methods can be combined for highest flexibility, e.g. as a reaction to a slow network connection we could fall back to prefetch. The advisable configuration depends on the individual project. It is even possible to call the data from different datasets or have different autocompletion inputs on one and the same page with the same or different datasets.
The user does not need to look behind the scenes as Typeahead.js cares for a seamless user experience. They just need to type, the JavaScript cares for the rest. The best suggestion is shown grayed out while the user types. Suggestions need not be single words, instead they can even consist of formatted content, such as the account data of a Twitter account or the base data of an Open Source project. These suggestions can then be chosen using the mouse or the arrow keys.
Typeahead.js comes with a CSS which you shouldn’t expect too much from. It does not alter the visual impression at all as it is only intended to position the suggestion and to control the drop down functionality. To beautify the input element you need to handcraft this aspect. Typeahead.js creates classes in relation to the status of the process, which you can (and have to) use to address with appropriate style definitions.
Are you a Bootstrap user and like the new Typeahead.js so much more than the already available (but not that impressive) functionality from inside the framework, you need not worry. You simply call Typeahead.js immediately after Bootstrap and configure it to your liking.

Read more »

When To Build a Site with SilverStripe CMS (and when not to)

Alright folks, we are back with yet another Content Management System review. As always, I shall be reviewing a CMS and assessing its usability and performance for creating a website. And which CMS is it going to be this month? None other than SilverStripe! SilverStripe is an extremely popular open source CMS that comes with a BSD license. Ah…this makes me fall in love with it already: I have always had a soft corner for BSD and MPL licenses, in comparison to GPL.
That said, SilverStripe is a quite capable piece of software, and I will be taking a look at its prowess in this article.

However, I will be staying aloof from technical details such as installation procedure, simply because such information belongs in the CMS help files, not the review. Instead, my focus will be on the assessment of SilverStripe as a viable CMS for running and managing your website.
Note: Just in case you missed the previous CMS review installations, here they are: MODX, Concrete5, Joomla!, and Habari.

SilverStripe: To Use Or Not To Use

1. Usability (Ease of Use)

Note: You can view a demo of SilverStripe on this page.
While personally I have never been a huge fan of the default blue theme, overall, the SilverStripe admin interface looks super user-friendly. And trust me, this is not an exaggerated claim.
First up, once you login, you will notice that the admin panel has lesser menus as compared to most other CMSs — a huge positive point for me, because the easiest way to kill the usability prospects of any software is to clutter its interface (case in point: Joomla!).
Apart from being functional, SilverStripe seems to do almost anything that you would expect from a CMS. The Help menu is right within the CMS interface, so you won’t feel lost. However, I do feel that ‘Security’ seems to be a misleading title for a menu — it is primarily about user roles anyway.

Also, in order to get full points on the usability scale, SilverStripe definitely needs a clear way to install themes and extensions or modules right within the admin panel itself — possibly a new menu or sub-menu (say, ‘Extend’–>’Modules’, and so on). Agreed, a user may get accustomed to SilverStripe over time and will not miss a separate menu for this purpose, but overall, themes and extensions belong in a separate menu within the admin panel.
Lastly, the framework itself is one of the cleanest pieces of code I have seen of late — though it doesn’t make much sense to talk at length about the framework as a stand-alone entity in a CMS review.

• Pros: Clean interface, easy to get used to
• Cons: Needs a separate menu for themes and modules/extensions

2. Flexibility and Customization

In terms of customization, SilverStripe repository offers themes, modules and extensions/plugins. Some time back, when I last used SilverStripe, I had coded a couple of widgets and themes myself — not because I wanted to (I’m lousy with PHP software, generally), but simply because the official repository did not have a theme worth using. Sadly, in terms of themes, the picture has not yet changed.
The repository, though well populated, does not have many gorgeous themes. However, considering the fact that most of SilverStripe’s user base believes in self-coded templates, this is not a deterrent anyway.

In terms of modules however, the story is brighter: there are separate modules for Portfolio, Blog, and so on. All in all, if you wish to extend your website, you will not experience much difficulty in doing so. On the other hand, in terms of appearance, consider yourself to be on your own.
And, before I forget, SilverStripe indeed is flexible, and you can create virtually any type of website using it: I suggest you check this and this to testify.

• Pros: Good set of modules and extensions
• Cons: Needs more good quality ready-made themes

3. Community and Documentation (Help and Support)

The community surely is pretty active, with multiple meetup groups in various corners of the world. Beyond that, the forums and the IRC channel are well populated too. However, I have often felt that SilverStripe sometimes lags behind MODX and others when it comes to community engagement — not in terms of numbers, but primarily because most MODX users are super ‘loyalists’, a feeling that is not so visible in SilverStripe’s community (it is difficult to generalize this observation, though).
The documentation is, probably, one of the primary reasons why anyone might consider migrating to SilverStripe — you have separate guides for creating themes and modules, as well as various screencasts, in addition to the detailed API documentation. That said, there is not much third-party documentation available.

• Pros: Active community, good documentation
• Cons: Not much third party documentation in the form of blogs or special forums

4. Other Miscellaneous Elements

SilverStripe has so far been translated into 65 languages and has been downloaded over 714,000 times. Need more stats? The forum itself has over 80,000 posts and over 270 companies are part of the Developer Network. Oh, and it is used by various awesome folks, including the likes of Air New Zealand.
Definitely awesome, right? It sure is!
For some reason, SilverStripe seems to be evolving more into a regional tool than a global software (check this page, for instance: the majority is from Australia/New Zealand) — if it were a coffee shop, this would’ve worked to its advantage: “best coffee in the region!”.
What about the 65 translations? Yes, this aspect surely does show that SilverStripe has a global audience, or at least is capable of establishing a global presence.

Though the weak presence in some parts of the globe may be something to bemoan, the bigger problem lies in themes and extensions for SilverStripe — the CMS needs some premium addons.
SilverStripe has its own Developer Network, and the parent company offers paid development services to its users. Surprisingly, hardly any developer firm from the Network (or even the parent organization for that matter) seems to have taken an interest in developing premium themes and modules for the CMS. If it were Habari, non-availability of premium content was understandable: negligible commercialization model, the parent company offers no paid development services, not many firms offer development services to clients, and so on. But SilverStripe has all the ingredients needed for the purpose: developers who are keen on working for profit, developers who are keen on helping the CMS grow, as well as a parent organization that is much more than a mere spectator. Still, premium themes and addons are not much visible. This is a huge area that needs considerable work, if SilverStripe is to grow and attract newer users.

• Pros: Good stable of developers, well localized CMS
• Cons: Needs premium modules, themes and addons

5. Comparing SilverStripe With Other CMSs

So, how does SilverStripe fare in comparison to other CMSs?
First up, WordPress. SilverStripe has had a distinct advantage over WordPress: unlike WP, SilverStripe has never witnessed a shift in its target user base. WP began as a blogging tool, and eventually became a CMS. SilverStripe, on the other hand, has not undergone such changes, and this fact is evident in its user interface itself: a clearly defined and well laid-out mechanism. Yet, at the end of the day, as I have already discussed, studios in the likes of WooThemes and WPZOOM do not develop for SilverStripe, and this becomes a drawback.
If you compare SilverStripe with Drupal and Joomla!, on the other hand, the story is different. Both Drupal and Joomla!, at first look, appear to be bigger heavyweights in comparison to SilverStripe. Maybe they are, but in my book, SilverStripe will get more marks than both of them. Why? Because SilverStripe has a properly defined rationale behind it: a framework, an ideology and more importantly, the forum and community seem to be better organized as compared to that of Drupal or Joomla!
Speaking of Concrete5 and SilverStripe, these two seem to have a lot in common. In fact, even the community and repositories look pretty similar. Concrete5, though, has done one thing that SilverStripe needs to do: started already with premium themes!
And before we proceed to conclude this article, I must also note, that I find the SilverStripe framework sort of similar to that of Zikula, at least in terms of anatomy.

Conclusion

And, to sum it up:
You should use SilverStripe if:

• You need a truly open source solution (BSD-L > GPL. Yes, I said it. Go ahead, shoot me!).
• You are looking for a framework that you can customize.
• You want a CMS that does not give you 999,999 plugins and expect you to choose the right one.

Also, you should not use SilverStripe if:

• You need awesome, readymade templates, and designing one yourself is too much for you.
• You are unsure about your coding skills.
• You are happy with your current CMS (if it ain’t broken, don’t fix it!).

Have you ever used, or wish to use SilverStripe? Have your say in the comments below!

Read more »

2013 WebEngage Interactivates Your Website

Your main goal in running a commercial website may be set to high profitability. Especially when you are running an online shop, you will want to generate the highest revenue possible, the more buyers you attract the better. In ecommerce one strong handicap exists. You cannot interact with the prospective buyer in a way you would be able to in a real shop of the analog world. The would-be buyer has to rely on the one-way communicative efforts your website offers. WebEngage changes that, if you let it…

WebEngage: Your Customer Is King

WebEngage is a software that cares for three main pillars of customer satisfaction. And they all relate to – as you could have already guessed – engagement. WebEngage lets you engage with the visitors of your website or lets them engage with you, any way round you like to see it.

WebEngage: Three Pillars of Customer Satisfaction

Before I show you the benefits in closer detail, let me emphasize what convinced me almost immediately. It’s the ease and speed of implementation. With WebEngage you need not change anything on your site. You just add a short JavaScript snippet and you are good to go. The rest of the configuration is done through a user-friendly dashboard on behalf of WebEngage’s cloud servers (powered by Amazon Web Services). Besides having to add the JavaScript, you will never have to touch the code of your site again. Any enhancement taking place – and there always happen some with more to come – is immediately available to you as WebEngage is a specimen of the so-called Software-as-a-Service (SaaS).
That way it took me five minutes to get going. Ten more minutes were needed to finish my feedback form and some notifications as well as a short survey. I assume we’ve come to the point where I should tell you more about the WebEngage feature set.
WebEngage comprises of three modules entitled Survey, Feedback and Notifications. These titles are not really self-explanatory and even – at least if you do not dig deeper – imply similar functionality. Of course the features relate to one another as they are all part of the bigger purpose of turning your customers to kings…
The following video shows the benefits of the product trio nicely. Take 102 seconds and watch it:

WebEngage Surveys Allows For Tailored Feedback

Let’s take a look at Surveys. A survey is exactly what you thought it was. A short or not so short questionnaire you try to make your customers answer to. As I write about it, I notice that it takes a good ability of abstraction to understand what kind of powerful tools WebEngage equips you with. So let me show you some real world uses a survey as defined by WebEngage could provide. A survey would be right for you if:

• you’ve got a flower shop and you want to give your visitors the possibility to name a plant they’d like to see added to your stock of products.
• you’ve got a rather detailed spec sheet for different versions of the same product, just as WebEngage has. On the pricing page you might want to assist your prospective customers further by offering specific help.
• you’re running a special sale and would like to know if or if not there is interest in further activities like these.
• you want to know more about customers visiting you from specific regions of the globe.
• you want to know more about a specific section of your visitors, probably males, females or visitors using a certain browser or certain search phrases and more.
• you might want to give your buyers the possibility to voice their opinion post purchase on how the sales process worked for them.

WebEngage: Survey In Action

These are a mere few examples. There are almost endless possibilities.

WebEngage Feedback Let’s Your Visitors Have Their Say

The above mentioned targeting possibilities are valid throughout the whole product range. So also for Feedback you can target specific locations, specific referrers, specific search terms and more.
What Feedback was originally invented for was the more technical feedback, that’s needed whenever there is something broken or not running flawlessly. Images, that are not loading, links, that are not working, designs, that are not displaying correctly. You name it. To address these issues even visually, WebEngage comes with the ability to automatically add a screen-shot of the page the feedback was submitted from.

WebEngage: Feedback Live On Site

Besides that, Feedback is similar to Survey, but conceived to be its more general counterpart. The module Feedback is something you will want to position prominently and consistently on every page of your website. It is the hot wire between you and your (prospective) customers.
Feedback is thought up as being omnipresent, still it can come in different appearances depending on where on the site it is going to be displayed. The form is fully customizable and is even able to handle different purposes through different categories within one single layout. It is even able to react on choices made inside the form.

WebEngage: Feedback Form In The Making

Though it has a clear and unmistakable name, Feedback can serve more purposes than I can come up with now. Take it as a form for job applications, for example. You could even allow applicants to upload their resumes. Let your visitors provide you with new ideas, hints, tipps. Whatever useful might come from the outside world into your digital home, Feedback will be able to take care of it.
In one word: WebEngage Feedback is the simplest customer support tool ever. It let’s you build your own support form and gets you up and running in minutes.

WebEngage Notifications Push News To Your Visitors

The just recently extended module Notifications is a dream for every store owner and marketers alike. Besides being able to inform visitors about the coming spring sale or the maintenance downtime of your website in the next two hours or the fact, that your visitor has reached you with an outdated browser, you can enhance the revenue stream.
Think of a new customer. This customer has found your shop and put quite a few items into the shopping cart, yet has not shown any activity in the last 30 seconds. As you will not want to lose that prospective buyer you would be happy to be able to push him a little, just like a salesman in a real-world shop would do. “If you take these items, I give you a 10% discount on everything,” might be what you would want to say.

WebEngage: Classic Notification Live On Site

WebEngage: Classic Notification In The Making

“Not possible”, you think? With WebEngage you should think again, as this is exactly one of the lots of possibilities Notifications has to offer. Notifications are always helpful, when and where you want to push a special information to your visitors or a targeted subset of them, which can become as small as one individual.
Probably you’re selling globally, while not all global areas convert equally strong. With Notifications you could target special areas with special offers. So while your revenue in the United States is stable on a high level, you might want to offer massive discounts to buyers from Asia, to strengthen your market share there. Or the other way round: your home base is in the United States and while selling globally you want to reward the buyers located closest to you and offer discounts or free shipping or a free, star-spangled teddy bear with every order…

WebEngage’s Tools Are All Accessible From One Dashboard

Besides providing you with all the described possibilities and many, many more I didn’t describe, WebEngage incorporates a full-fledged analytics tool. Think of it as a Google Analytics focused on customer satisfaction. Every tool has its own detailed statistics area in the dashboard, from where you control the behavior of all of WebEngage on your website.

WebEngage: Targeted Notification Based On Product Chosen

From the dashboard you create your forms, you design your surveys and notifications. There is a gallery of ready-made layouts and there is the possibility to craft your own CSS. A relatively new JavaScript API gives you even more control over the behavior of the tools inside your website. This way, you could attach a survey to a UI element and define the survey be opened on click on the given element, again, for example. Possibilities are far from limited. Did I mention that the form builders offer drag and drop functionality?
WordPress users seeking to empower their site to benefit from WebEngage are encouraged to not put in the code snippet manually, but rather to use the dedicated WordPress plug-in, available via WordPress Extend.
WebEngage provides detailed instructions for the implementation of the code snippet into other systems, such as Shopify, Magento, Bigcommerce, Blogger and Tumblr as well as the default implementation into any given HTML document.

WebEngage: Who And How Much!

The WebEngage team consists of six people and is based in India. It managed to acquire a solid funding and is growing fast in terms of the numbers of customers. In a little more than one year, WebEngage managed to convince almost 7,000 customers. With their product getting better by the hour, their growth is constantly accelerating. Some compare them to 37signals even.
With a small team, expenses are manageable. This might serve as a valid explanation for the customer-friendly pricing policy also. While it is getting more common to not offer any free plans any longer, WebEngage still has this account in store, a question of manners.

WebEngage: Callout Notifications Make Sense Attached To UI Elements

“Serious” work can be done with the “Standard” plan for 49 USD per website and month. This plan includes the whole feature set I described throughout this article, while only lacking on some custom targeting features. If you need the latter, 99 USD for the “Premium” plan shouldn’t ring expensive in your ears.
All plans, except for the “Enterprise” plan, which has to be negotiated as to its pricing, have their limitations foremost in regard to quantities. Active surveys are limited from 10 to 500, responses are limited. Just look at the comparison table yourself. For smaller websites I would recommend the “Basic” plan for 15 USD per month, if only it had custom styling capabilities, which it doesn’t.
So I advise you to choose the “Standard” plan. You won’t go wrong there and can of course always upgrade to the next level. But before you decide to buy a pig in a poke, go ahead and sign up for a 14-day trial of your desired plan.

Read more »

Free WordPress Themes Fresh From January and February 2013

Our goal is to round up the new theme releases for self-hosted WordPress installations monthly. With January being a rather weak month in terms of numbers we decided to accumulate the themes from the first two months. From experience we can assume that now, after the cold months pass developer’s enthusiasm comes back and more themes will be conceived. Generally we can conclude that WordPress theme developers focus on responsive layouts more often than not. Mobile clients have their impact here. In this roundup we have two themes that are based on Twitter’s fantastic framework Bootstrap, Hybrid Core also has its share again. See for yourself…

WordPress Themes: January and February 2013

Note: Demo and Download links for each theme can be reached by clicking on the theme’s screenshot in the gallery below. From inside the gallery you can easily navigate from theme to theme.

WordPress Themes 01/02 2013: Comparison Table

Theme Name	Genre	Responsive	Localization	Misc.	USP
Teal	Magazine	Yes	No	Multiple sliders, Custom ads	Pro version also available
Pyramid	Blog	No	Yes	Nil.	NA
Silver Blue	Blog	Yes	Yes	Requires multiple plugins	Two color schemes
Spine	Blog	Yes	Yes	Nil.	Based on Hybrid Core and Zurb Foundation frontend framework
Photologger	Photoblog	Yes	No	Microformat support, single column	NA
WP StrapSlider Lite	Magazine, Blog	Yes	No	Homepage Carousel	Based on Twitter Bootstrap, Pro version to follow
Preference Lite	Corporate	Yes	Yes	Multiple colors	Based on Twitter Bootstrap, Pro version also available
FloZo	Corporate, Portfolio	No	No	Nil.	NA
Xenon	Photoblog, Portfolio	No	No	Custom color scheme or link colors	NA
Yorkshire	Magazine	No	No	Nil	jQuery 3D image slider
Zoren	Photoblog, Portfolio, Magazine	Yes	No	Nil	NA
Ajaxify	Magazine, Blog	No	No	3 color schemes: black, white and red	AJAX Navigation
Underfire	Gaming, Sports	No	No	Nil	jQuery homepage slider
Pilgrim	Portfolio	No	No	Custom homepage template	jQuery slider
Frank	Blog	Yes	No	No JavaScript dependence	Super-fast: Google PageSpeed score of 97 out of 100
Focused	Blog, Tumblog	Yes	Yes	Supports post formats	NA
Sukelius Magazine	Magazine	No	Yes	Multiple widget areas and menus	Based on Hybrid Core framework

Don’t cry just because you’ve reached the end of this edition of our free themes roundup. We’ll be back next month. Meanwhile, just in case you missed our roundups for 2012, here they are: December, November, October and September. We even did a Best Of 2012.
What do you think of this collection of free WP themes? Did we miss out on any? Have your say in the comments below!

Read more »