As a reader of the Kissmetrics Blog, I found the recent post on authenticity in the digital age as one of the most thorough explanations of how we all can and ought to approach interacting with each other over this depersonalized medium. Authenticity is now a buzzword and the paradigm for online interaction.
At the heart of the post is a summary of how authenticity rose to prominence. ”The more virtual our lives get, the more we hunger after something genuine. What people really want now is not just a product or a service, it’s an experience. An experience that is more honest and transparent… more authentic – and businesses are going to have to keep up with growing consumer authority and give people what they want if they want to survive”
What does that mean?
Authenticity is sort of a state of grace. When you are perceived to be authentic your work gathers a sense of weight and gravity; extending your words in to actions.
So who is being honest and transparent… and having fun with it.
If you haven’t been reading online: Flickr, a part of the “rising-phoenix” Yahoo, has been revamping and recently had sustained 4 hour outage during their update. With this image and tweet they have changed their dialogue about their outage:
Experiencing slowness or having trouble accessing the site? We're on it, and are working to fix the issue as quickly as possible. #badpanda
— Flickr (@Flickr) May 24, 2013
The tweet and error page combination got the following reactions:
The new fail screen at @Flickr is so funny I almost want them to break more often pic.twitter.com/IMjGXkPfef #badpanda
— Mats Einarsen (@matseinarsen) May 24, 2013
Despite the downtime, it's quite fun to see Flickr's #badpanda error page — that I built — all over the internets
— Niklas Nordlund (@Acampada) May 25, 2013
flickr's new error page is quite good #badPanda pic.twitter.com/1YULNgrbkc
— Stuart Lodge (@slodge) May 24, 2013
Awesome "Bad Panda!" error page on Flickr. Pity the site was down when I went to look at the new site. pic.twitter.com/42OMtxiuOf
— Matt Smith (@alphanum3ric) May 24, 2013
Loving the humor in the @Flickr error page. "Bad, bad panda!" pic.twitter.com/NxkL8nEM5L
— Toby Phillips (@TobyCPhillips) May 23, 2013
That’s a pretty positive consensus about a basically negative situation. Flickr’s downtime issues normally would cause mass panic-to-anger, but they remained on top of their situation and flipped a negative to a positive through authenticity.
Let’s dissect how they did it. First, Flickr deserves a big round of applause for their preparedness. Flickr’s failover page is something we have always recommended for emergency situations and their use of Twitter to stabilize and broadcast status information to their customers really help set expectations. Those actions broadcast honesty and transparency out to your audience and allows you to control the collective experience of the outage by both your staff and customers.
Flickr has been updating it’s page as part of Yahoo’s overall attempt to rebrand itself. The update promised 1 terabyte of storage space for users to hold full-resolution photos at the highest quality This big promise is likely the large undertaking that let them know that they needed to be prepared for outages in the future.
Second, their sense of humor has hit the right spot with the twitterverse and their customers. Humor is so difficult to dissect and replicate because every great comedian has their own voice and timing. But it is clear that Flickr nailed it by being cute with a) the small girl with a hilarious expression b) the cute animal (sort of) c) it is kind of an absurd photo d) most important, their hashtag and its connection with the copy of the error page. The #badpanda hastag allowed things to trend across twitter and get on the The Next Web main page to garner media attention quickly.
Third, they put themselves ahead of the game. This might be the most important and authentic part. Think, for instance, if Flickr had tried to shrug off the importance of their downtime. Downtime, we all know is a reality of every internet company and every server. This fact can lead most of us down a pretty cynical path of ignoring outages or treating them as insignificant to your customers. And cynicism is that caustic enemy of innovation and authenticity.
Being ahead of the game meant most of all letting the downtime be a twitter trend. Instead of being hyper protective of their errors and mistakes, Flickr chose to put themselves in a position of honesty and transparency. #badpanda has none of the look and feel of a corporate denial of liability or the stink of a bad PR team’s diversions.
And that is how Flickr won the authenticity game just the other day. Through advanced preparation they turned a bad situation into a good media-marketing boost. Despite, the fact that outages are almost always bad, Flickr, by being true and authentic, made it feel like they are a real, responsible company. Authenticity is a feeling that we get from the way people behave and this ladies and gentlemen of the jury is how to behave to your customers: prepare for breaks in your system, be honest about those breaks, and maybe be funny about them.
Maintenance schedules are an incredibly useful feature for managing recurring work and planned server updates that our system has had for a while. They work by deactivating notification for a configured period of time, either one time or on an automatic recurring schedule. This way you are not bothered by outage alerts during times when you know your server will be down. This keeps your work flow more productive and avoids your team developing a habit of ignoring alerts.
Based on seeing how customers have used the maintenance functionality over the past few years, we have added a number of enhancements as part of our latest 3.9 release.
First, we’ve added an Active Maintenance bar next to the Outage bar in the top navigation of the Panopta control panel. The Active Maintenance bar not only gives you a quick readout of all currently active maintenance but clicking on it will display details of the active maintenance and allow you to modify them in-line. In the screenshot below, you can see the new controls that let you easily extend the original 30 minute maintenance for up to another 2 hours or just as easily end the scheduled maintenance immediately.
We’ve also added the ability to pause checks during maintenance. Normally, we disable alerting during maintenance but continue to perform regular checks. In some cases, this makes troubleshooting and testing difficult because your application is being hit regularly with our monitoring requests. Now, with the click you can turn off checks either when scheduling upcoming maintenance or through the Active Maintenance bar.
Ever bring the server down for an upgrade and receive an alert because you forgot to create a maintenance period? The last thing you want to do at that moment is jump through hoops to configure the maintenance period, so we created an option for immediate maintenance on the server page. Immediate maintenance allows you to schedule impromptu maintenance, so you can start working on your servers right then (or after the fact). Just pull up the server’s page in the control panel and hit one of the pre-configured buttons to start maintenance for anywhere between 5 minutes and an hour.
Finally, we have revamped the overall Maintenance section of the control panel. It now clearly displays all current and upcoming maintenance periods, with details on what servers are affected, when the next start time is, and controls for updating these settings. A separate tab shows your complete history of already completed maintenance periods, so you can easily go back to see what maintenance was done when.
We hope these features allow your team to work together more effectively. If you have other suggestions on how to make maintenance more useful, please let us know or share in the comments below!
According to Gartner research, worldwide SaaS revenue grew 17.9% in 2012 to $14.5 billion and will top $22.1 billion in 2015. As budgets for big IT projects shrink and mobile devices provide ubiquitous connectivity, many businesses are getting more comfortable having their business-critical applications delivered as a service rather than on-site installed software. As a result, more and more new tools are being provided as SaaS only.
For entrepreneurs, the model is attractive as well – it provides an opportunity to launch a new idea with significantly less startup capital than in the past. However, there are a number of challenges to the SaaS model. The centralized nature makes upgrades and deployment much easier than traditional software, allows you to leverage shared infrastructure across customers and enables rapid iteration of ideas. But it also means that you have all your eggs in one basket, with the risk of a service problem having much wider impact.
The Challenges of SaaS
While attractive, it’s definitely not an easy route to do really well. In the 5+ years we’ve been offering monitoring as a service, we’ve encountered a number of challenges related to the fundamental setup of SaaS applications, and have managed to build a thriving business around it. Based on our experience, here are a number of key challenges that you’ll face.
Every Minute Counts
Unlike a content site or e-commerce site, your customers likely use your tool day in and day out, accessing continually throughout their work day. Disruptions to their regular work cycle can quickly degrade the trust they place in your service. Once they have lost trust, it is very difficult to keep them as a customer, because you’re operating in a competitive market. For us, this has meant an ongoing focus on making our service as accurate as possible, as false positives and missed alerts are the quickest way to lose confidence in the monitoring world.
Regardless of the benefits you may provide, without trust your customers will have a hard time placing their critical data and operations in your hands.
Think Global
The global nature of the SaaS marketplace is definitely enticing from a sales perspective, but it also adds to the challenges. For a successful service, customers are often distributed around the world. This makes any sort of scheduled maintenance or downtime difficult to accommodate as it is always business hours somewhere. It also means that you have to be reactive to problems as they arise whenever that might be.
Additionally, it means that that your application needs to be designed to handle things like timezones and the varying ways of handling daylight savings time around the world (this is a full post of it’s own, which we’ll publish soon!) and other localization aspects.
Tread carefully during the initial dance
Finally, with the free trial or freemium model, disruptions in service are particularly dangerous because these are the customers you need to convert or up-sell. During this crucial initial phase of your relationship, potential customers are even more wary of problems. Not that outages are ever a good thing, but service disruptions during a trial period can effectively torpedo your conversion chances.
How can monitoring help?
Fortunately, there are ways to deal with these challenges. One of which is monitoring, which serves as your 24×7 eyes and ears for your infrastructure. However, the impact of monitoring is only as effective as the thought you put into it. Based on our experience working with thousands of SaaS providers, as well as running our own global operations, we have the following suggestions to improve the impact of your monitoring:
1. Monitor everything
Most SaaS tools rely on a number of third party services to function, any one of which can break and bring the service down. Just tracking the status of your core servers is not enough to ensure that everything your customers depend on is working correctly.
Send and receive email? Make sure you monitor your inbound and outbound mail servers. Use an external service for authentication, logging or hosting of Javascript/CSS/font resources? Make sure you know when they have problems as they can bubble up to cause problems with your service. Use a queuing system like RabbitMQ for asynchronous processing? Make sure it is accepting connections and is processing messages.
Ultimately, all of these pieces are interconnected and combine together to produce your application, and any one of them can disrupt your customer’s experience. Make sure that you know as soon as there are problems with any of them so you can minimize the impact.
2. Track system resources
In addition to making sure that your application is responding to network requests, also monitor all of the critical system resources they rely on such as CPU levels, memory capacity and disk usage. Beyond these basics, make sure to track any special-purpose metrics such as critical database performance indicators, etc. Ideally you should instrument your application to track any domain-specific metrics that indicate how your application is performing.
Having this information lets you avoid catastrophes, ranging from something as simple as running out of disk space on an application server to hard-to-predict problems that arise as corner cases. Beyond the immediate service disruptions these can cause, they often require a painful, time-consuming maintenance session to clean up.
This level of monitoring also gives you trend data on your resource usage for forecasting and budgeting purposes. This is critical as your business expands and you need to look to grow your infrastructure – being able to plan grown based on hard resource data lets you more accurately predict your needs which means you can properly time your growth and ultimately save money on servers and other infrastructure.
3. Get a single-pane view of your infrastructure
When running a quickly growing SaaS service, you’re actively managing all aspects of your business, with technical, sales, marketing and operations issues all jockeying for your attention. For your day-to-day operations, you don’t have time to do mental interpolation between numerous systems in order to get a view of how your infrastructure is doing.
This is even more true when problems arise – you need to be able to quickly figure out what the current status is, how it got there, and decide what needs to be done to fix it. Your monitoring tools should support this and enable your team to respond rather than getting in the way of decisions.
Make sure that whatever tool you use for monitoring provides a single-pane view of all of your infrastructure, regardless of where it sits and who has primary responsibility for it. By bringing the status of all of your components together into one tool, you can quickly detect systematic problems even if they span different hosting companies, datacenters or third-party service providers.
4. Be prepared for things to break
Despite our best efforts, Murphy’s Law continues to apply in the SaaS age. Regardless of how hard you prepare, things can and will break. Your best approach for dealing with this is to actively think through all of the most likely failure scenarios and anticipate the signs of the problem and how to react and correct them. Doing this in advance helps you and your team build “muscle memory” which allows you to react faster when real disaster strikes. Doing a test drive of failure responses also verifies that your backups and disaster recovery systems are properly configured and functioning correctly.
As part of this, you should do dry runs of detecting and reacting to alerts from your monitoring system. When things really do break, you don’t want to find out that you have a typo in someone’s phone number, your alert emails are getting flagged as spam, or that you don’t have the critical login credentials for the systems that you need to reach in order to put out the fires.
Be ready to respond
While nothing will eliminate problems from arising, a complete monitoring setup will give you an advantage in responding to problems efficiently, which will you deliver a more reliable SaaS service and help escalate the growth of your business.
If your current monitoring system is lacking in any of these areas, get in touch and we’d be happy to do a complimentary assessment of your monitoring setup and recommend ways to improve your visibility.
If you have been keeping up with us, you’ll know that Panopta loves E-Commerce and is happy to see it blossoming.The New York Times, yesterday, posted an article on the growth in e-commerce by new players signalling that E-Commerce is no longer just the migration of existing companies to the internet. The article highlights how E-Commerce companies are hacking the middlemen out of brick and mortar stores and going straight to suppliers to significantly alter their industries. These altered industries, however, have their own issues.
Avant-garde Shopping
The primary issue for new e-commerce businesses like Warby Parker, Poppin, and Crane and Canopy, however, is not the elimination of middleman -”Going to factories in China is the easiest part”- it is building a reputation with customers and spreading the word around. And we have 3 take-aways about building respect in the E-commerce industry from what we’ve seen.
E-commerce is about service and content creation. Unlike brick and mortar stores where making objects easy to buy was the crucial part of the business and having a big sign and a great location to grabbed customers; E-commerce needs you to serve them in a constant and consistent way, not unlike a SaaS. Think about it, it is easier than ever to buy something yet that is broadly speaking true for everyone with the proliferation of services like Paypal. So access is no longer a part of the customer’s equation. So your location on internet and its ease of use does nothing to benefit you, your trump card now is making your site a “location” a place customers want to be because your site offers content and a voice that speaks to them. More than ever, being a merchant means having a distinct voice, not unlike a writer.
We have been tracking all sorts of e-commerce brands for a while now and we know that all the rules for a brick and mortar store are inverted. Traditional stores have traditional expectations attached to them: for example they only give you things after your first purchase. That paradigm has shifted, Poppin has an entire category of free stuff that markets its charm very quickly. Why has it shifted this way? The web is inside your customer’s house, their phone, and their tablet. You have to have a reason to be in their space.
Also, you have to be distinct in your service offering and savings in ways that traditional stores don’t. Hint: can anybody tell me the real difference between KMart, Kohls, and Sears?
So they key here is building a strong brand through being respectful and respected by customers.
Branding is your respect-machine
Here are Panopta’s top observations on building a great E-Commerce brand.
- Treat it like a service.The internet has taken over everything because it is immediate and our expectations have shifted to the immediate. Every minute counts so be there for you customers every minute of every day whether its your webpage or your email servers. You must do all the back end stuff to guarantee that your brand is there for your customers whenever they want it. Going back to the fact that the web is literally in your customers houses and spaces don’t disrespect them by not serving them. This means providing content and suggestions in your copy, emails, blog that goes along with them leading better lives. People want to buy things from a voice that they respect and delivers “cool” or “relevant” information to them.
- Create your own terms for SEO. Unless your product is entirely new in its conception and use then odds are Amazon already sells something like it and that “gets the job done.” In essence, “do you” and sell your product based on its image and lifestyle not its QVC-style features. Content may be the king but content is not just a product anymore but the entire sensibility of the product. And the internet is terrible place for sales-pitches because it is so transparent and there is so much genuine content that already exists. No one has time to care about your sales-pitch. Give your customers something that will slow them down and say, “hey, that’s sweet.” This means creating your own words and terms to put you ahead of the curve.
- Stay visible. Don’t play games with you uptime availability. This one is pretty simple but it bears repeating because some traditional stores don’t understand this and it is reflected in their approach to the internet. Our favorite example is J&R whose webpage is built like a long list of pictures and long-non-descriptive-names-of-products-they-sell. Not only do they fail to offer anything to anyone in terms of content and advice on their page but their webpage, unsurprisingly had 423 minutes of downtime last quarter. They don’t use the internet as medium for communication but rather treat it like a catalog. Yet even catalogs offer a strong image of how or why one would use something for example the J. Crew catalog has always been very persuasive at selling the preppy lifestyle by subtly suggesting places to go and things to do in your J.Crew clothes. J&R’s webpage and its downtime has the effect sending out a catalog that looks like a phone book and it is only mailed out on rainy days.
These three simple things are a starting point for building respect with your customers and establish a dialogue for your business in an open and clear way. Perhaps this reason for this is all related to how open-source is the lingua franca of the internet and your servers, and that same mentality of open-source has slipped in to something as distant as selling bed linens. Who knows why? But today, content and access are king. Long live content. Long live access.
About Panopta
Through real-time performance monitoring, Panopta provides IT professionals and hosts reliable, actionable data for optimizing website and application availability, as well as managing service disruptions. Panopta monitors websites, email servers and network infrastructure for thousands of customers in a variety of key market segments. It serves as a trusted source of website and online application monitoring and provides independent analysis based on objective data.
One of Panopta’s strengths is its configurability to meet your specific monitoring and notification needs. Translating all of these configuration options in a simple and intuitive user interface and experience is challenging, so to meet this challenge, we built the Application Wizard for Bootstrap. The Application Wizard is a Bootstrap addon that allows multi-step forms to progress in a natural order while remaining flexible.
Live Demo:
To share it’s utility, we’ve open sourced the Application Wizard on Github. It works as a drop-in addon to bootstrap and requires little configuration outside of setting up the wizard modal itself.
To see this in action signup for Panopta today
- Download
- Installation
- Working with Cards
- Validation
- Interesting Events
- Submitting Data
- Wizard Class
- WizardCard Class
Download
Get the latest source on Github. Requirements are Bootstrap >= 2.2.2 (current).
Installation
To use, include the wizard stylesheet after the bootstrap stylesheet:
|
1 |
<link href="bootstrap-wizard/bootstrap-wizard.css" rel="stylesheet" /> |
And the wizard javascript after the bootstrap javascript:
|
1 |
<script src="bootstrap-wizard/bootstrap-wizard.js" type="text/javascript"></script> |
And create the required boilerplate markup for your wizard content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="wizard" id="some-wizard"> <h1>Wizard Title</h1> <div class="wizard-card" data-cardname="card1"> <h3>Card 1</h3> Some content </div> <div class="wizard-card" data-cardname="card2"> <h3>Card 2</h3> Some other content </div> </div> |
Each .wizard-card will be its own step in the Application Wizard, and the h3 tag will be used for its navigation name on the left. Also notice the data-cardname attribute on each card. While not required, this can be used to access the cards by a specific name.
Lastly, initialize the wizard:
|
1 2 3 4 |
$(function() { var options = {}; var wizard = $("#some-wizard").wizard(options); }); |
And when you’re ready to display it, for example, on a button click, use wizard.show();
Working with Cards
Cards can be accessed through the cards attribute on the wizard object. By default, this is an object whose keys are the text from the h3 tags, and whose values are instances of the WizardCard class. So for example, with the following markup:
|
1 2 3 4 5 6 |
<div class="wizard" id="some-wizard"> <div class="wizard-card"> <h3>Card 1</h3> <div>...</div> </div> </div> |
You could access this card the following way:
|
1 2 |
var wizard = $("#some-wizard").wizard(); var card = wizard.cards["Card 1"]; |
From this card object, you can call any of the card methods.
You can also set a card’s name specifically by using the data-cardname attribute:
|
1 2 3 4 5 6 |
<div class="wizard" id="some-wizard"> <div class="wizard-card" data-cardname="card1"> <h3>Card 1</h3> <div>...</div> </div> </div> |
Now you can access the card by the name “card1″:
|
1 2 |
var wizard = $("#some-wizard").wizard(); var card = wizard.cards["card1"]; |
Validation
Most wizard cards will require some kind of validation of the input before proceeding to the next card. This validation is not intended to sanitize malicious data to be trustworthy (this should be done server-side), merely to catch any obvious common problems with the data.
Validation can be attached inline to form elements by using the xhtml data attribute:
|
1 2 3 4 |
<div class="wizard-card"> <h3>Card 1</h3> Name <input type="text" name="name" data-validate="validateName" /> </div> |
When the Next button is clicked for the card, validateName will be called with the element as its first argument. Here’s an example validation function:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function validateName(el) { var name = el.val(); var retValue = {}; if (name == "") { retValue.status = false; retValue.msg = "Please enter a name"; } else { retValue.status = true; } return retValue; } |
If the validator returns with an object with .status == false, then an error popup will display on the element and the wizard will not be allowed to progress to the next step. The wizard will only progress when all of the validators on the page return with a status of true.
Entire cards may be assigned a validation function by using the xhtml “data” attribute:
|
1 2 3 4 |
<div class="wizard-card" data-validate="someFunction"> <h3>Card 1</h3> Some content </div> |
someFunction will receive a WizardCard object on which you can manually search for the inputs on that card and validate them. This is useful for validating complex interdependencies between many inputs, for example, if a name field can only be empty if another field is populated.
The final method for validating entire cards is to subscribe to the the “validate” event and provide a validation function:
|
1 2 3 4 5 6 7 8 9 |
wizard.cards["Card 1"].on("validate", function(card) { var input = card.el.find("input"); var name = input.val(); if (name == "") { card.wizard.errorPopover(input, "Name cannot be empty"); return false; } return true; }); |
A card-level validation function is slightly different from an input-level validation function. In a card-level function, you are required to display any error popovers, using the wizard object’s errorPopover() method, as well as returning true or false to tell the wizard whether or not it should advance to the next step.
Interesting Events
The following events are the most interesting when integrating the wizard:
WizardCard events:
- loaded – when the card is first loaded (when the card is selected but has never been selected before). This is useful for lazy-loading content.
- validate – when the card is being validated. The callback assigned to this can itself be used as a validator if it returns a boolean.
Wizard events:
- reset – when the X (close) button is clicked, or if you triggered this event manually via the “reset” method. You’re responsible for resetting all card inputs, as the reset method will only reset the wizard’s internal state.
- submit – when the submit button is clicked on the final card. Typically the handler assigned to this is responsible for handling all ajax communication. The default handler is Wizard._defaultSubmit.
All events are documented under the Wizard and WizardCard class documentation.
Submitting Data
The easiest way to submit data to the wizard is to pass in a submitUrl on construction:
|
1 |
var wizard = $("#some-wizard").wizard({submitUrl: "/some_url"}); |
When the wizard reaches its last step and the user clicks the submit button, all of the inputs from all of the wizard cards will be aggregated together and POSTed to your submitUrl.
If you wish to implement your own submit listener, take a look at the source of the Wizard._defaultSubmit method, which is the default submit listener:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function(wizard) { $.ajax({ type: "POST", url: wizard.args.submitUrl, data: wizard.serialize(), dataType: "json", success: function(resp) { wizard.submitSuccess(); wizard.hideButtons(); wizard.updateProgressBar(0); }, error: function() { wizard.submitFailure(); wizard.hideButtons(); }, }); } |
The wizard class implements the serialize() and serializeArray() methods of JQuery form elements. These methods will scan through all the form input elements in your wizard cards, aggregate the names and values, and return a data structure for submitting via an ajax call.
After your submission, depending on whether your submission succeeded, failed, or had an error, you can display a specific hidden card to reflect the submission status. These submission cards must first be defined in the html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="wizard" id="some-wizard"> <!-- normal wizard cards: --> <div class="wizard-card" data-cardname="card1"> <h3>Card 1</h3> <div>...</div> </div> <!-- begin special status cards below: --> <div class="wizard-success"> submission succeeded! </div> <div class="wizard-error"> submission had an error </div> <div class="wizard-failure"> submission failed </div> </div> |
These 3 cards are hidden by default and only appear when you specifically activate them. Typically, these cards will be activated by status of an ajax post:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
wizard.on("submit", function(wizard) { $.ajax({ url: "/wizard_submit", type: "POST", data: wizard.serialize(), success: function() { wizard.submitSuccess(); // displays the success card wizard.hideButtons(); // hides the next and back buttons wizard.updateProgressBar(0); // sets the progress meter to 0 }, error: function() { wizard.submitError(); // display the error card wizard.hideButtons(); // hides the next and back buttons } }); }); |
By activating these cards in the ajax request handlers, you can display information relevant to the status of the submit request
After submission, you may wish to reset the wizard to some default state. See the reset() method in the wizard class for details on this.
Wizard Class
$.wizard([options])
The wizard constructor takes an optional object of options:
- width – the total width of the wizard, default: 750px
- increaseHeight – how many pixels to increase the default height by, default: 0
- buttons – an object containing the following sub options:
- nextText – the text for the “next” button, default: “Next”
- backText – the text for the “back” button, default: “Back”
- submitText – the text for the “submit” button, default: “Submit”
- submittingText – the text for when the wizard is being submitted, default: “Submitting”
- progressBarCurrent – boolean instructing the wizard’s progress bar to follow the currently active step, instead of the furthest reached step.
el
The div element that holds the wizard’s html layout. This is the generated html of the wizard modal, not the original html passed into $().wizard(); For the original html, use the markup attribute.
markup
A reference to the original html markup used to build the wizard. This is the html entered manually on the page, which is passed into $().wizard();
show()
Displays the wizard
hide()
Alias for close()
close()
Closes the wizard
serialize()
Returns all inputs from the wizard cards as a key=value query string. See JQuery’s serialize()
serializeArray()
Returns all inputs from the wizard cards as a list of objects with name and value attributes. See JQuery’s serializeArray()
on(eventName, callback)
Binds a callback to the eventName. Valid event names are:
- reset – when the reset() method has been called
- incrementCard – when the next card becomes the current card
- decrementCard – when the previous card becomes the current card
- readySubmit – when the wizard has reached its final card
- progressBar – when the progress bar is incremented. The first argument passed to the callback is the new progress percent from 0 to 100.
- submit – when the submit button is clicked on the final card
- loading – triggered after the submit trigger has been fired
getActiveCard()
Returns a WizardCard object for the active card
setTitle(title)
Sets the main title in the wizard header
setSubtitle(subtitle)
Sets the secondary, less pronounced title in the wizard header
trigger(eventName, …)
Triggers an event eventName, with an optional number of arguments (or no arguments)
errorPopover(element, msg)
This creates an error popup on element, with content msg. This is useful being called from a card-level validator, where you might want to pick specific elements on a card on which to show an error tooltip.
changeNextButton(text, [cls])
Changes the “next” button (used to advance steps in the wizard) to have text text and optionally css class cls. This is used internally by the wizard when the last step is reached, to display a green “submit” button, but it may be useful elsewhere.
updateProgressBar(percent)
Sets the progress bar in the lower right to percent complete. This typically shouldn’t be touched by user code, but it can be useful to call updateProgressBar(0) after a submit handler returns. See Submitting Data.
hideButtons()/showButtons()
Hides or shows the next and previous buttons. This is only really useful after a submission handler returns. See Submitting Data.
submitSuccess()/submitError()/submitFailure()
Shows the special submit cards. This is only really useful after a submission handler returns. See Submitting Data.
reset()
Resets the wizard to its original state. This only resets wizard internals, and does not affect your form elements. If you want to reset those, listen for the “reset” event, and write some code to reset your elements manually. For example
|
1 2 3 4 5 |
wizard.on("reset", function(wizard) { $.each(wizard.cards, function(name, card) { card.el.find("input").val(); // resets all inputs on a card to "" }); }); |
WizardCard Class
Objects of this class fill the wizard.cards object.
el
The div element that holds the card’s layout. Use this when searching for elements in a specific card (like a specific input box or button, for example).
wizard
This is a reference to the wizard object to which this card belongs. Typically, this is used in card-level validators to call the errorPopover() method.
validate()
Called automatically when the next button is clicked, this method runs all validators on elements contained in the card, as well as any card-level validator, if one exists. This will return true if all validators return true, otherwise false.
trigger(eventName, …)
Triggers an event eventName, with an optional number of arguments (or no arguments)
on(eventName, callback)
Binds a callback to the eventName. Valid event names are:
- reload – when the card is first loaded or when the reload() function is called.
- loaded – called when a card is first loaded
- selected – when this card is selected as the active wizard card
- markVisited – when this card is marked as visited, meaning, typically, that the user can go back to it from a different step
- unmarkVisited – removing this card as a visited card
- deselect – when this card is changed from. The new card will receive the select event, and the old card will receive the deselect event.
- validate – called when the card is being validated. The callback assigned to this can serve as a validator itself, if it returns a boolean.
About Panopta
Through real-time performance monitoring, Panopta provides IT professionals and hosts reliable, actionable data for optimizing website and application availability, as well as managing service disruptions. Panopta monitors websites, email servers and network infrastructure for thousands of customers in a variety of key market segments. It serves as a trusted source of website and online application monitoring and provides independent analysis based on objective data.
Americans spent $42.3 billion in retail e-commerce purchases over this holiday season and Panopta was there observing all those retailers and their network availability. After crunching the numbers from the 2012 Panopta Holiday Index, our analysis points to an uptrend for retailer availability compared to previous years.
The Panopta Holiday Index is designed as a high-level metric for measuring the uptime of the top 130 most popular retailers. The index is a free resource for retailers and our users as a comparison tool for their uptime performance during the holiday season. To those unfamiliar with the concept, uptime measures a server’s ability to be accessed by a user anywhere in the globe. This is pertinent to that $42.3 billion because server uptime is a basic necessity for retailers to be accessible to customers and revenue.
The Results
From November 15th, 2012 to January 4th, 2013, there was over 128 hours of total downtime from 86 of the 130 retail sites. Those 86 sites with outages averaged 89 minutes of total downtime. The remaining 44 had no measurable outages, responding properly to each of our 72,000 checks.
The outstanding 44 sites without outages include large retailers like Nike, Amazon, and Macy’s but also more specialized retailers like Williams-Sonoma, Hammacher Schlemmer, and Frys.com. The variety of industries from the monolithic online-only retailer Amazon to the specialty cookware retailer, Williams-Sonoma, reflect a sense that exceptional uptime management is important for all sectors of business whether it is a large exclusively online business or a specialized mixed e-commerce and brick-and-mortar retail operation.
The 86 retailers who had significant outages also reflect a mixed bag of retail types but their core problem was singular: mismanagement of server resources. The top twenty most underperforming sites had a combined total of 102 hours of downtime. Follow the link here to see the complete list. Some particular problem sites that stood out:
- CB2 had 19 separate instances of outages with some ranging in 7 minutes all the way up to 22 minutes.
- BassPro Shops had eight outages with a total of 262 minutes of downtime.
- J&R had 18 outages that brought them up to a whopping 423 minutes of downtime.
Of those three performers each of them sells markedly different goods on completely different scales but obviously have poor server management in common. This highlights the fact that it does not matter the type or size of the business; all retailers need to take control of their network availability.
What it All Means
Compared to the 336 hours total downtime in 2011, retailer’s server performance in 2012 improved. It is clear that retailers have made adjustments to the shift in holiday shopping to the internet. This general trend of better server performance by retailers is not a tide that lifts all ships equally – the websites that appeared in our pre-holiday white paper as our best performers all remained as the best performers while the worst performers all fell into the bottom twenty.
While we have seen a steady improvement from online retailers overall in this past shopping season, this improvement has not been significant enough to say that retailers have mastered the use of the internet to bolster shopping and improve customer’s experience by being available at all times. Instead, the facts serve only to tell us that retailers must continue to improve their network availability and remain vigilant to network errors. There are uptime management solutions that can buttress underperforming networks and help improve even the most robust servers. Solutions like external server monitoring to inform your network professionals about outages. Two tiered internal monitoring with checks on network connections and individual server statistics can improve infrastructure administration by providing actionable data to your staff.
The E-Commerce Site Performance Predictions: Who is positioned to Capitalize on the 2012 Holiday Season? white paper published by Panopta in early November set aside some predictions for this last season, based on data from past years and the first nine months of the year, most of which have been accurate. Our best practice performers IKEA, Zappos.com, Overstock.com, and Bloomingdales had 100 percent uptime maintaining a meticulous record. The domains with the worst outage histories Fossil, Harry and David, Abercrombie and Fitch, and J&R all had significant downtime during the holiday season and year.
If you’re looking to improve your site’s availability or just ensure that your strong performance continues, give us a call at 1-800-606-7153 or email us at sales@panopta.com to find out more about our advanced monitoring solutions.
Given the increased media attention to online shopping including MediaPost reported data from ComScore showing Black Friday online sales increased 26 percent from last year totaling $1.04 billion. And the National Retail Federation’s Shop.org projecting online sales to reach $96 billion this holiday season, it is clear that shoppers are rapidly shifting to an increasingly online shopping experience, adding to the importance of retailer managing website outages efficiently or avoiding them altogether.
In the spirit of holiday commerce, Panopta is currently monitoring over 130 major retail websites for outages and during the highly anticipated Thanksgiving, Black Friday and Cyber Monday shopping weekend we found that few suffered significant outages which impacted the consumer shopping experience.
Previously, Panopta found that about 45 percent of the analyzed sites’ uptime fell below the 99.9 percent industry standard of acceptable availability between January and September, even when excluding overnight hours from the analysis, signaling the potential for significant unplanned outages during the high-traffic holiday shopping season. Over Thanksgiving weekend, a handful of major retailers did suffer outages, some reaching more than 90 minutes, but these primarily occurred during the overnight or off-peak hours.
So far, most retailers have made it over the bar of acceptable availability.
The worst performing sites tracked by Panopta include Kmart, Sears, CDW, Tiger Direct and Victoria’s Secret. Fortunately, while each has suffered significant downtime, the outages primarily occurred in off-peak hours reducing their impact to the bottom line. However, as consumers embrace the new trend of season-long online deals beginning on Thanksgiving, retailers can’t rest on their laurels simply because Cyber Monday has come and gone; there’s still nearly a month of online shopping before Christmas Day.
We will continue to monitor retailer uptime during the holiday season and keep you posted on the Panopta Availability Index.
In an ongoing effort to bring our customers the best possible monitoring service, we’re proud to announce the latest release of Panopta. The update to version 3.7 adds new features, useful bug fixes and various improvements. Here are the highlights:
HipChat notifications. At Panopta, we use HipChat for a lot of our internal communication, so building notifications for HipChat made a lot of sense. Get your outage alerts pushed to any of your HipChat rooms.
Real-time network service checks. Is this check going to pass or fail? Before we added real-time network service checks, this was the question you’d ask yourself during configuration. Now, any time you’re setting up a check just click on the Test tab and run a real-time test to get instant feedback!
Post-outage traceroutes. View a traceroute ran by your primary checker after an outage resolution and compare it with those performed during the outage.
Growl-like outage state changes. Users logged into the Panopta Control Panel will see Growl-like alerts when the state of an outage changes.
Improvements to the Windows Monitoring Agent. The Windows Monitoring Agent has been through many iterations during the last two months and we’re happy to say it’s our best version to date. The installer automatically installs any missing prerequisites and finds your server from the Panopta Control Panel making the setup process more streamlined. This is just the beginning of what we have planned.
In addition to all that great stuff, we’ve made minor bug fixes and UI improvements too! We hope you’re as happy with the new update to Panopta 3.7 as we are. Don’t be shy! Share with us your questions and feedback, and thank you to everyone who made this possible.
On Friday, October 12 we will be activating a new monitoring location in Jakarta, Indonesia with IP address 113.20.28.22, which brings us to five locations in Asia and the Pacific Rim, including Tokyo, Hong Kong, Singapore and Sydney. Please update your firewalls accordingly if you have IP restrictions in place for our monitoring nodes. For a complete list of our monitoring network addresses, see http://www.panopta.com/about-panopta/monitoring-network
The IP addresses for our Los Angeles and Milan monitoring locations are changing as of Friday, October 12. The new addresses will be 96.44.136.55 (Los Angeles) and 95.141.33.199 (Milan). Please update your firewalls accordingly if you have IP restrictions in place for our monitoring nodes. For a complete list of our monitoring network addresses, see http://www.panopta.com/about-panopta/monitoring-network/
Read our blog
