Development Posts

October 16, 2014

#T4 – Tips and Tricks–jQuery Select2

Who doesn’t like a walk down memory lane? In our #T4 series, SoftLayer brings back popular tech tip blog posts. #ThrowbackThursday #T4 #ThrowbackThursdayTechTips

Creating a drop-down menu? Here’s an abridged version of our Tips and Tricks – jQuery Select2 Plugin post from two years ago tomorrow!

Turn your drop-down menu from this:
Option Select

To this:

Pretty Option Select

  1. Download Select2 and upload it to your server.
  2. Add the jQuery library and scripts to the <head> of the page document:
  3. <script src="jquery.js" type="text/javascript"></script> 
    <script src="select2.js" type="text/javascript"></script>
  4. Add Select2's included style sheet:
  5. <link href="select2.css" rel="stylesheet"/>

  6. Before closing the <head> tag, invoke the Select2 function:
  7. <script>
    $(document).ready(function() { $("#selectPretty").select2(); });
    </script>
  8. Then add the #selectPretty ID to the select element you want to improve:
    <select id="selectPretty">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
    <option value="Option3">Option 3</option>
    <option value="Option4">Option 4</option>
    </select>

For questions, comments, or just feel like chatting, contact us at social@softlayer.com.

-Cassandra

September 24, 2014

HTML5 – Back to Basics with a Strong Foundation Pt. 1

If you guys have read any of my other blogs, I’m sure you’ll notice a pattern: rather than discussing opinions or news of new technologies, more often than not, I like to write more in the form of tutorials and hands-on exercises that demonstrate either fundamentals or new tips and tricks that I have learned.

In this blog, I’d like to discuss HTML5. I know, I know, it’s not exactly a subject that’s brand new. However, with as many HTML5 implementations as there are out there, and throughout many discussions, I’ve realized that many of the most talented Web developers have had to return to the basics of HTML5 features and techniques in order to redesign projects the same way they developed them.

Simply put: If we forget what we’ve done and scripted for over two decades with previous HTML versions and return to the basics, we can re-learn a new foundation that is sure to make us stronger developers and smarter engineers.

I. Declaration of Independence … or at least a declaration you don’t have to spend hours memorizing!

One of the most raved about features of HTML5 (and yet one of the simplest new features) is the new Doctype. How many of you had to Google the standard Doctype every single time you started a new project? Or perhaps you kept the tag in a code bin for easy copy/pasting? Well, no more!

The old (4 and below) way:

<!DOCTYPE HTML PUBLIC “=//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd>

Of course the actual strict/transitional or html/xhtml would vary depending on your page, but they pretty much worked the same way.

The new HTML5 way:

<!DOCTYPE html>

Done. I know it seems like such a simple thing, but returning to the foundation of what we learned so many years ago and re-learning them in the new HTML5 way will not only strengthen our sites, but it will also build a brand new foundation of flexibility and efficiency. Technology evolves at such a rapid pace that if we don’t keep up, we’re going to be left chasing the wagon of the future.

II. Editable content WITHOUT JavaScript!

HTML5 has added so many advanced features that our need for jQuery can be cut by nearly a third (depending on our requirements of course), which in turn greatly reduces the overhead of the browser’s need to process a ton of jQuery functions. If we utilize just a few of HTML5’s awesome new jQuery-like features, we can speed up our site and keep our .js scripts smaller!

Just for giggles (if you’re not familiar with HTML5’s editable content), give this a try:

<!DOCTYPE html>
 <html>
<head>
    <title>SLayer’s Awesome List</title>
</head>
<body>
    <h1> SLayer’s 5 Most Awesome Bloggers </h1>
        <ul contenteditable=”true”>
            <li>Steve Kinman</li>
            <li>Kevin Hazard</li>
            <li>Gary Kinman</li>
            <li>Matthew Herring</li>
            <li>Mark Quigley</li>
        </ul>
</body>
</html>

Put that into an .html file, and open it up in your favorite browser. You’ll see what should look like this:

A simple list of course. In the years of your career I’m sure you’ve made tens of thousands of these. What’s cool about this list, if you’re not familiar with all of HTML5’s neat little tricks, is that this list is editable. Go ahead and try clicking on the list item and replace the names; even add your own name!

As you can see, I didn’t have the heart to remove any of our most frequent bloggers, so I just appended my name to Mark Quigley (of course, that’s not my true SoftLayer Blog ranking, but one day soon … it shall be!)
This feature may not save the user’s edits, but if you add in some nifty HTML5 storage abilities (local or session), you could have yourself a pretty robust application!

III. Beautiful placeholders to hold a place for my heart.

One of my biggest gripes every time I’d either design or program a user interface (registration, account functionality) was the fact that I would have to integrate a jQuery function just to add a little bit of extra help with the text boxes. Placeholders never worked as they should. Sometimes we just didn’t have enough real estate on the page for the amount of instruction as we needed, which meant another placeholder maker for jQuery.

HTML5 now comes equipped with beautiful support for placeholder text (well, I suppose it depends on your POV on designing/developing forms. If you do it as much as I do, the new placeholders are the holy grail of usable forms!). A very simple preview of what HTML form life was like before HTML5 (without the jQuery function to add text to just one input box):

The fact is: Sometimes we don’t always have the real estate that we would like to provide the user enough instructions to clarify what needs to be done!

This simple form could end up being very confusing for the user. It’s so simple, yet there are several ways to enter a phone number, and depending on the backend, it may only accept one format.

Let’s add a placeholder to that textbox and clear things up:

<input placeholder="(555) 555-5555" type="text" name="phone" id="phone" />

Just by adding the simple placeholder attribute, we have now cleared up exactly what format we need the phone number! Now let’s have a look:

It’s funny how a simple, light-colored demonstration of acceptable input can really beautify a form and increase usability. With the placeholder attribute in place in this example, I’m not even sure it’s necessary to have the instruction text on the right, as we can clearly see we need 10 digits, with parenthesis and dashes.

Well my friends, looking at the word count of this document, it looks like this blog is coming to a close, and I’ve only gone over three of my favorite foundational features of HTML5, so you know what that means … Part 2!

-Cassandra

September 16, 2014

CSS3 Tips and Tricks – Generated Content Without jQuery

If you guys have read any of my past blogs, you know how much I LOVE jQuery, but every good developer knows that if there’s an easier or more efficient way of doing something: DO IT. With all the new developments with CSS3, HTML5, etc. etc., sometimes we have to get back to basics to relearn how to do things more efficiently, so here it goes!

Nearly every website has some form of 2.0/dynamic/generated content nowadays, and if your site doesn’t… well, it probably should catch up! I’ll show you how with some new CSS tricks and how it can reduce a lot of overhead of including the entire jQuery library (which would save you approximately 84kb per page load, assuming you have no other asynchronous/client side functionality you need).

I’ll start off with an easy example, since I know most of you take these examples and let your creativity run wild for your own projects. (Note to self: start a “Code Gone Wild” series.)

Usually this is the part where I say “First, let’s include the jQuery library as always.” Not this time, let’s break the rules!

FIRST, start off your document like any other (with the basic structure, set your DOCTYPE appropriately, i.e. strict vs transitional):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Wow, you can already tell this generated content’s going to be a TON easier than using jQuery (for those of you whom aren’t already jQuery fans).

Now let’s add in a div there; every time we hover over that div, we’re going to display our generated content with CSS. Inside of our div, we’re going to place a simple span, like so:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
     <div class=”slisawesome”>
          <span data-title="Hello Cassandra!">What’s my name?</span>
     </div>
</body>
</html>

As you can see, the span content contains a simple question and the data-title attribute contains the answer to that question.

Now let’s just make this div a little bit prettier before we get into the fancy stuff.

Add some style to the <head> section of our document:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
</style>

Now you should have something that looks like this:

This is good; this is what you should have. Now let’s make the magic happen and add the rest of our CSS3:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
     .slisawesome span::before {
          content:attr(data-title); /* assigning the data-title attribute value to the content */
          opacity: 0; /* hiding data-title until we hover over it */
          position: absolute; /* positioning our data-title content */
          margin-top: 50px; /* putting more space between our question and answer */
 
          /* Fancy transitions for our data-title when we hover over our question */
          /* which I’m TOTALLY going to write another blog for ;) If you guys want, of course */
          -webkit-transition:opacity 0.4s; /* determines the speed of the transition */
          transition:opacity 0.4s; /* determines the speed of the transition */
     }
</style>

Now, right now, your page should still look like this:

That’s okay! We still have ONE more step to go:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
     .slisawesome span::before {
          content:attr(data-title); /* assigning the data-title attribute value to the content */
          opacity: 0; /* hiding data-title until we hover over it */
          position: absolute; /* positioning our data-title content */
          margin-top: 50px; /* putting more space between our question and answer */
 
          /* Fancy transitions for our data-title when we hover over our question */
          /* which I’m TOTALLY going to write another blog for ;) If you guys want, of course */
          -webkit-transition:opacity 0.4s; /* determines the speed of the transition */
          transition:opacity 0.4s; /* determines the speed of the transition */
     }
     /* Drum Roll --------- Here’s our hover magic */
     .slisawesome span:hover::before{
          opacity:1;
     }
     /* Okay… that was a little anticlimactic… losing cool points */
</style>

Despite my anticlimactic adding of “the magic,” we just added a :hover that will show full opacity when we hover, so refresh your page and try it out! You should see something like this when you hover over THE QUESTION:

Of course you could REALLY start getting fancy with this by adding some php variables for the logged in user, or perhaps make it dynamic to location, time, etc. The possibilities are endless, so go… go and expand on this awesome generated content technique!

-Cassandra

June 5, 2014

Sysadmin Tips and Tricks - Understanding the 'Default Deny' Server Security Principle

In the desktop world, people tend to feel good about their system’s security when they have the latest anti-virus and anti-spyware installed and keep their applications up-to-date. Those of us who compute for a living know that this is nothing close to resembling a “secure” state. But it’s the best option for non-technical people at this time.

Servers, on the other hand, exist in a more hostile environment than desktop machines, which is why keeping them secure requires skilled professionals. This means not only doing things like keeping applications patched and up-to-date, but also grasping the underlying principles of system security. Doing that allows us to make informed and skillful decisions for our unique systems—because no one knows our servers as well as we do.

One very powerful concept is “Default Deny” (as in Deny by Default), by which means that "Everything, not explicitly permitted, is forbidden." What does this mean, and why is it important?

Let’s look at a simple example using file permissions. Let’s say you installed a CGI (Common Gateway Interface) application, such as some blog software, and you’re having trouble getting it to work. You’ve decided the problem is the permissions on the configuration file. In this case, user “rasto” is the owner of the file. You try chmodding it 755 and it works like this:

-rwxr-xr-x 1 rasto rasto 216 May 27 16:11 configuration.ini

Now that it works, you’re ready to move to your next project. But there’s a possible security problem here. As you can see, you have left the configuration file Readable and Executable by Other. There is almost certainly no reason for that because CGI scripts are typically run as the owner of the file. There is potentially no reason for users of the same group (or other random users of the system) to be able to Read this configuration file. After all, some configuration files contain database passwords. If I have access to another user on this system, I could simply “cat” the configuration file and get trivial access to your data!

So the trick is to find the least permissions required to run this script. With a little work, you may discover that it runs just fine with 700:

-rwx------ 1 rasto rasto 216 May 27 16:11 configuration.ini

By taking a little extra time, you have made your system much more secure. “Default Deny” means deny everything that is not explicitly required. The beautiful thing about this policy is that you can remove vulnerabilities that you neither comprehend nor even know about. Instead of making a list of “bad” things you essentially make a list of “good” things, and allow only those things to happen. You don’t even have to realize that someone could read the file because you’ve made it a policy to always allow the least amount of access possible to all things.

Another example might be to prune your php.ini to get rid of any expanded capabilities not required by PHP scripts running on your system. If a zero-day vulnerability arises in PHP that affects one of the things you’ve disallowed, it simply won’t affect you because you’ve disabled it by default.

Another scenario might be to remove packages from your system that are not being used. If someone tries to inject some Ruby code into your system, it won’t run without Ruby present. If you’re not using it, get rid of it, and it can’t be used against you.

Note: It’s very easy to be wrong about what is not being used on your system—you can definitely break things this way—I suggest a go-slow approach, particularly in regards to built-in packages.

The important thing is the concept. I hope you can see now why a Default Deny policy is a powerful tool to help keep your system more secure.

-Lee

June 3, 2014

My 5 Favorite Sublime Text 2 Plugins

I can’t believe that is was only a mere year ago since I learned of Sublime Text 2. I know, I know … where have I been? What kind of developer was I that I didn’t even know of Sublime Text? I’ll take the criticism, as I can honestly say it has been the best text editor I have ever used.

It’s extremely fast. I rarely wait for saves, uploads, or syntax highlighting, it keeps up with everything I do and allows me to develop directly from the keyboard. I hardly ever reach for my mouse!

It looks awesome. It has kind of retro-look for those developers who remember coding purely from the terminal or DOS. It really brings back memories.

It can be extended. Need some extra functionality that doesn’t come out-of-the-box? Sublime Text 2 has a range of available plugins that you can install to enhance your capabilities with this awesome text editor. In this blog, I’ll cover my top five favorite plugins of all time, what they do, and why they’re great!

1. BracketHighlighter

Many people believe that bracket highlighting should be a ready-made helper for developers of all languages. I agree on this point, however, at least Sublime Text 2 provides a plugin for this. It’s a very simple addition; it allows you to see if your opening brackets have an accompanying closing bracket. Many developers will tell you stories of these large and complex programs that consumed much of their time as they searched for one simple error … only to find that it was just a missing closing bracket.

In addition, it highlights opening and closing tags and quotes, for those of you who do a lot of HTML/XHTML, both bracket and tag settings are customizable.

For more details on the plugin check out the BracketHighlighter GitHub page.

2. DocBlockr

This is a neat plugin that speeds up and simplifies documentation. It supports PHP, Javascript, Java, Action Script, Objective C, C, C++, and Coffee Script.

By typing this:

/** (Press Enter)

The plugin automatically returns this:

/**
*
*/

Boom, the quickest way to document that I’ve ever seen.

In order to document your functions, just put it in your comment:

/** (Press Enter)
function myFunction(var1, var2) { }

And, it'll become:

/**
*[myFunction description]
* @param {[type]} var1 [description]
* @param {[type]} var2 [description]
* @param {[type]}
*/

function myFunction (var1, var2) { }

When you want to do variable documentation, the structure is similar:

/** (Press Enter)
myVar = 10

The plugin will fill out the documentation block like this:

/**
*[myVar description]
* @type {Number}
*/

Tell me that this isn’t nifty! If you want to try it out or just get a closer look at this plugin, head here.

3. Emmet (previously known as Zen Coding)

Unfortunately, I encountered some oddities when I tried to install Emmet with SublimeLinter, so I decided to disable the Linter in favor of Emmet to give it a spin. I absolutely love Emmet.

It provides a much more efficient way to code by providing what they call “abbreviations.” For example, if I want to create a div with an unordered list and one bullet point in it, Emmet lets me save myself a lot of time ... I can type this into Sublime:

div>ul>li

And press Control+E, and my code automatically turns into this:

<div>
    <ul>
        <li></li>
    </ul>
</div>

If I need to add multiple <li> tags, I can easily replicate them with a small addition:

div>ul>li*3

When I hit Control+E, voila! The unordered list structure is quickly generated:

<div>
    <ul>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
</div>

That's just the tip of the iceberg when it comes to Emmet's functionality, and if you’re as impressed as I am, you should check out their site: http://docs.emmet.io/

4. SFTP

I think the title of the plugin says it all. It allows you to directly connect to your server and sync projects and files just by saving. You will never have to edit a file in a text editor, open your FTP client and upload the file again. Now, you can do it directly from Sublime Text 2.

When used in conjunction with Projects, you’ll find that you can easily save hours of time spent on remote uploading. By far, SFTP for Sublime Projects is one of the most essential plugins you’ll need for any project!

5. SideBarEnhancements

This is a small plugin that makes minor adjustments to the Files and Folders sidebar, providing a more intuitive interface. Though this doesn’t add much functionality, it can definitely speed things up. Take a look at the plugin on the SideBarEnhancements GitHub page

I hope this list of Sublime Text 2 plugins will enhance your capabilities and ease up your processes, as it has done for me. Give them a try and let me know what you think. Also, if you have a different favorite plugin, I’d love to hear about it.

-Cassandra

May 1, 2014

New App Release: SoftLayer Mobile for Windows 8.1

Today, the SoftLayer development team is launching a new platform accessibility tool for SoftLayer customers who want to easily manage their infrastructure from Windows. We've gotten a great response from the users of SoftLayer Mobile app for Windows Phone, so we turned our attention to creating an app for customers on Windows 8.1: SoftLayer Mobile for Windows 8.1.

With a growing number of users adopting and embracing Windows 8.1 on their PCs, and the Windows Store is becoming a vibrant community of useful apps for those customers. There are more than 145,000 apps on the Windows Store, and that number is expected to increase exponentially following Microsoft’s recent introduction of "Universal Apps for Windows Phone 8.1 and Windows 8.1.” With all that goodness and an expanding market, it was imperative for our mobile development team to build an app for customers using Windows 8.1 as their default OS or carrying Windows RT tablets.

Why Windows 8.1?

Our team wants to provide simple, efficient ways for customers to connect to SoftLayer infrastructure and perform any necessary management tasks while on-the-go. Our team is inspired by the power of connected devices in Windows ecosystem. By developing an app for Windows 8.1, we will slowly bring the phone, tablet and PC onto one streamlined platform — a concept many smart devices are adopting quickly.

What’s Fresh?

New Dashboard

The SoftLayer Mobile app for Windows 8.1 is a fresh new approach to its Windows Phone sibling. The app provides a dashboard view after authentication that provides a snapshot of some of the most commonly used information and controls in the portal.

Currently, the dashboard supports four different panels: Tickets, devices, accounting and bandwidth. All display an overview of relevant information for you and your environment. The dashboard also allows you to quickly add a ticket or make a one-time payment on your account.

SoftLayer Mobile for Windows 8.1

In-line Ticket Updates

In the new tickets module, you can update tickets without ever leaving the page. This functionality is similar to what you see on many social websites, and it's integrated to be seamless.

SoftLayer Mobile for Windows 8.1

Search Everywhere!

One of the coolest additions to the new app is the introduction of search functionality in each module. Now, you can search a ticket, a device, or an invoice by just typing into the search box! The search capability lets you spend less time scrolling and more time working.

SoftLayer Mobile for Windows 8.1

Bandwidth Display

Smart phones have apps that measure and report how much data you are using, and your infrastructure should be similarly transparent Bandwidth usage is an important aspect of server management, so we built the bandwidth module to show your infrastructure's public and private traffic for current and previous billing cycles. This view also helps you see when a server is about to reach its limits so that you can plan accordingly.

SoftLayer Mobile for Windows 8.1

The module provides two ways to look at the data:

  • In a tabular form by clicking the “Show/Hide Traffic Details” button.
  • In a graphic representation by clicking the “View Graph” button.

SoftLayer Mobile for Windows 8.1

Same Functionality. Better Experience.

Sometimes change is not always needed for a nicely crafted feature. The new app keeps the same feature richness of the Windows Phone app and arranges it in a user-friendly way. For example, in the devices module, you can navigate to between different tabs to get the information you need, from password lists and attached tickets to a specific device or monitoring alarms.

The “Remote Control” section on the module allows you to perform actions such as rebooting, power cycles, restarts and pinging servers. In addition, you can view hardware and software installed on the device along with the hardware and network components attached. In the current phone version, you can only see the root password for the device, but in the Windows 8.1 app, you see all passwords for the server.

SoftLayer Mobile for Windows 8.1

What's Next?

During the development of this app, the team's goal was to test to adopt a framework that would be ideal for scaling. More and more developers are adopting a Model-View-Model (MVVM) approach to mobile and web app development, so our goal was to use that approach for this project. The significant challenge we faced when adopting this approach was finding a well-supported framework that met our application's needs. We weren't able to find suitable frameworks that committed regular updates in SDKs or in APIs, so we ended up using the same MVVM principles without any underlying framework. In the end, the project allowed us to create our own framework for future projects!

There are many exciting features that are lined up for the Windows 8.1 app. Download it now: SoftLayer Mobile for Windows 8.1

After you try it out, please submit your feedback ... We want to keep improving the app by providing the features and functionality that matter most to you.

-Imran

April 23, 2014

Sysadmin Tips and Tricks - Stop Using Root!

A common mistake newer Linux system administrators make is the overuse of root. It seems so easy! Everything is so much simpler! But in the end, it’s not—and it’s only a matter of time before you wish you had not been so free and easy with your super-user, use. Let me try to convince you.

Let’s start with a little history. The antecedents of Linux go all the way back to the early 1970s, when computers cost tens of thousands of dollars (at least). With that kind of expense, you as a user would hardly have a computer sitting on your desk (not to mention they were at least refrigerator-sized), and you would also not have the use of it dedicated to your needs. What was obviously needed was an operating system that would allow multiple users to use the machine at once, via terminals, in order to make the most use of the computing resources available.

If you think about it, it’s clear that the operating system had to be very good at keeping users from being able to stomp on each other’s files and processes. So the early UNIX™ variants were multi-user systems from the get-go. In the ensuing forty years, these systems have only gotten better at keeping the various users and processes from harming each other. And this is the technology that you’re paying for when you use Linux or other modern variants.

Now, you may think, “That doesn’t apply to me—I’m the only user on my server!” But are you, really?

You probably run Apache, which is generally run as the user httpd or apache. Why not root? Because if you run Apache as root, then anyone on the outside who manages to get Apache to execute arbitrary code, would then have that code running as root! Next thing you know, they can execute "rm –rf /," or worse, invade your system altogether and steal proprietary information. By running as a non-root user, even if the attacker gets total access to that user, they are limited to what that user can touch. Thus, user httpd is compromised, but not the entire server.

The same thing is true for mail servers, FTP servers, and so on. They all rely on the Linux permissions system in order to give the programs access to as little as possible—ideally, only exactly what they need to do their jobs.

So, think of yourself as another process on the system. When you log in as your regular user, you are limited in what you can do. But this is not intended to harm you or irritate you—indeed; the system is designed to keep you from accidentally doing damage to your server.

For example, consider if you wanted to completely remove a directory called ‘home’ within your home directory. Note the ever so slight difference between the first command:

rm –R home

And the second command:

rm –R /home

The first command removes a directory called ‘home’ from wherever you happen to be sitting on the file system. The second removes all users’ home directories from the system. One little slash makes all the difference in the world. This is probably why it has been said that Linux gives you enough rope to hang yourself with. Executing the second command as root looks like this:

server:# rm –R /home 
server.com#

And it’s just gone! Whereas if you accidentally put that slash in there while logged in as your user, you would get:

server:# rm –R /home 
server:# rm: cannot remove `home’: Permission denied

This will annoy you, until you realize that if you’d done it as root you would have wiped out all your customers home directories.

In short, just like the processes that run on your machine, you would be well served to use only the permissions you need. This is why many Linux distributions today encourage the use of sudo—you don’t even become root, but just execute things as root when needed. It’s a good policy, and makes the best use of four decades of expertise that have gone into the system you are using.

- Lee

P.S. This is also why you pretty much never want to chmod 777 anything!

January 10, 2014

Platform Improvements: VLAN Management

As director of product development, I'm tasked with providing SoftLayer customers greater usability and self-service tools on our platform. Often, that challenge involves finding, testing, and introducing new products, but a significant amount of my attention focuses on internal projects to tweak and improve our existing products and services. To give you an idea of what that kind of "behind the scenes" project looks like, I'll fill you in on a few of the updates we recently rolled out to improve the way customers interact with and manage their Virtual LANs (VLANs).

VLANs play a significant role in SoftLayer's platform. In the most basic sense, VLANs fool servers into thinking they're behind the same network switch. If you have multiple servers in the same data center and behind the same router, you could have them all on the same VLAN, and all traffic between the servers would be handled at the layer-2 network level. For customers with multi-tier applications, zones can be created to isolate specific servers into separate VLANs — database servers, app servers, and Web servers can all be isolated in their own security partitions to meet specific security and/or compliance requirements.

In the past, VLANs were all issued distinct numbers so that we could logically and consistently differentiate them from each other. That utilitarian approach has proven to be functional, but we noticed an opportunity to make the naming and management of VLANs more customer-friendly without losing that functionality. Because many of our customers operate large environments with multiple VLANs, they've had the challenge of remembering which servers live behind which VLAN number, and the process of organizing all of that information was pretty daunting. Imagine an old telephone switchboard with criss-crossing wires connecting several numbered jacks (and not connecting others). This is where our new improvements come in.

Customers now have the ability to name their VLANs, and we've made updates that increase visibility into the resources (servers, firewalls, gateways, and subnets) that reside inside specific VLANs. In practice, that means you can name your VLAN that houses database servers "DB" or label it to pinpoint a specific department inside your organization. When you need to find one of those VLANs, you can easily search for it by name and make changes to it easily.

VLAN List View

VLAN Naming

VLAN Detail Page

VLAN Naming

While these little improvements may seem simple, they make life much easier for IT departments and sysadmins with large, complex environments. If you don't need this kind of functionality, we don't throw it in your face, but if you do need it, we make it clear and easily accessible.

If you ever come across quirks in the portal that you'd like us to address, please let us know. We love making big waves by announcing new products and services, but we get as much (or more) joy from finding subtle ways to streamline and improve the way our customers interact with our platform.

-Bryce

November 14, 2013

Enhancing Usability by Building User Confidence

Consider your experiences with web applications, and see if this scenario seems familiar: Your electricity bill has some incorrect charges on it. Fearing that you will have to spend 40 minutes on hold if you call in, you find that the electric company website has a support center where you can submit billing issues and questions; you are saved! You carefully fill out the form with your sixteen-digit account number and detailed description of the incorrect charges. You read it over and click the submit button. Your page goes blank for a couple of seconds, the form comes back with a note saying you typed in your phone number incorrectly, and the detailed description you spent eleven minutes meticulously writing is gone.

Web applications have gotten much better at preventing these kinds of user experiences over the past few years, and I'm sure that none of your applications have this problem (if they do, fix it right now!), but "usability" is more than just handling errors gracefully. Having a seamless process is only half the battle when it comes to giving your users a great experience with your application. The other half of the battle is a much more subjective: Your users need to feel confident in their success every step of the way. By keeping a few general guidelines in mind, you can instill confidence in your users so that they feel positive about your application from start to finish with whatever they are trying to accomplish.

1. Keep the user in a familiar context.

As the user in our electric company support application example, let's assume the process works and does not lose any of my information. I have to have faith that the application is going to do what I expect it to do when the page refreshes. Faith and unfamiliar technology do not exactly go hand in hand. Instead of having the form submit with a page refresh, the site's developers could introduce a progress wheel or other another kind of indicator that shows the data is being submitted while the content is still visible. If detailed content never goes away during the submission process, I'm confident that I still have access to my information.

Another example of the same principle is the use of modal windows. Modal windows are presented on top of a previous page, so users have a clear way of going back if they get confused or decide they navigated to the wrong place. By providing this new content on top of a familiar page, users are much less likely to feel disoriented if they get stuck or lost, and they will feel more confident when they're using the application.

2. Reassure the user with immediate feedback.

By communicating frequently and clearly, users are reassured, and they are much less likely to become anxious. Users want to see their actions get a response from your application. In our electric company support application example, imagine how much better the experience would be if a small blurb was displayed in red next to the phone number text box when I typed in my phone number in the wrong format. The immediate feedback would pinpoint the problem when it is easy to correct, and it would make me confident that when the phone number is updated, the application will continue to work as expected.

3. Provide warnings or extra information for dangerous or complicated operations.

When users are new to an application, they are not always sure which actions will have negative consequences. This is another great opportunity for communication. Providing notices or alerts for important or risky operations can offer a good dose of hesitation for new users who aren't prepared. Effective warnings or notices will tell the user when they will want to perform this action or what the negative consequences might be, so the user can make an informed decision. Users are confident with informed decisions because a lack information causes anxiety.

I learned how to implement this tip when I designed a wizard system for a previous employer that standardized how the company's application would walked users through any step-by-step process. My team decided early on to standardize a review step at the end of any implemented wizard. This was an extra step that every user had to go through for every wizard in the application, but it made all of the related processes much more usable and communicative. This extra information gave the users a chance to see the totality of the operation they were performing, and it gave them a chance to correct any mistakes. Implementing this tip resulted in users who were fully informed and confident throught the process of very complicated operations.

4. Do not assume your users know your terminology, and don't expect them to learn it.

Every organization has its own language. I have never encountered an exception to this rule. It cannot be helped! Inside your organization, you come up with a defined vocabulary for referencing the topics you have to work with every day, but your users won't necessarily understand the terminology you use internally. Some of your ardent users pick up on your language through osmosis, but the vast majority of users just get confused when they encounter terms they are not familiar with.

When interacting with users, refrain from using any of your internal language, and strictly adhere to a universally-accepted vocabulary. In many cases, you need shorthand to describe complex concepts that users will already understand. In this situation, always use universal or industry-wide vocabulary if it is available.

This practice can be challenging and will often require extra work. Let's say you have a page in your application dealing with "display devices," which could either be TVs or monitors. All of your employees talk about display devices because to your organization, they are essentially the same thing. The technology of your application handles all display devices in exactly the same way, so as good software designers you have this abstracted (or condensed for non-technical people) so that you have the least amount of code possible. The easiest route is to just have a page that talks about display devices. The challenge with that approach is that your users understand what monitors and TVs are, but they don't necessarily think of those as display devices.

If that's the case, you should use the words "monitors" and "TVs" when you're talking about display devices externally. This can be difficult, and it requires a lot of discipline, but when you provide familiar terminology, users won't be disoriented by basic terms. To make users more comfortable, speak to them in their language. Don't expect them to learn yours, because most of them won't.

When you look at usability through the subjective lens of user confidence, you'll find opportunities to enhance your user experience ... even when you aren't necessarily fixing anything that's broken. While it's difficult to quantify, confidence is at the heart of what makes people like or dislike any product or tool. Pay careful attention to the level of confidence your users have throughout your application, and your application can reach new heights.

-Tony

November 11, 2013

Sysadmin Tips and Tricks - Using the ‘for’ Loop in Bash

Ever have a bunch of files to rename or a large set of files to move to different directories? Ever find yourself copy/pasting nearly identical commands a few hundred times to get a job done? A system administrator's life is full of tedious tasks that can be eliminated or simplified with the proper tools. That's right ... Those tedious tasks don't have to be executed manually! I'd like to introduce you to one of the simplest tools to automate time-consuming repetitive processes in Bash — the for loop.

Whether you have been programming for a few weeks or a few decades, you should be able to quickly pick up on how the for loop works and what it can do for you. To get started, let's take a look at a few simple examples of what the for loop looks like. For these exercises, it's always best to use a temporary directory while you're learning and practicing for loops. The command is very powerful, and we wouldn't want you to damage your system while you're still learning.

Here is our temporary directory:

rasto@lmlatham:~/temp$ ls -la
total 8
drwxr-xr-x 2 rasto rasto 4096 Oct 23 15:54 .
drwxr-xr-x 34 rasto rasto 4096 Oct 23 16:00 ..
rasto@lmlatham:~/temp$

We want to fill the directory with files, so let's use the for loop:

rasto@lmlatham:~/temp$ for cats_are_cool in {a..z}; do touch $cats_are_cool; done;
rasto@lmlatham:~/temp$

Note: This should be typed all in one line.

Here's the result:

rasto@lmlatham:~/temp$ ls -l
total 0
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 a
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 b
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 c
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 d
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 e
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 f
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 g
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 h
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 i
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 j
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 k
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 l
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 m
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 n
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 o
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 p
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 q
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 r
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 s
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 t
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 u
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 v
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 w
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 x
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 y
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 z
rasto@lmlatham:~/temp$

How did that simple command populate the directory with all of the letters in the alphabet? Let's break it down.

for cats_are_cool in {a..z}

The for is the command we are running, which is built into the Bash shell. cats_are_cool is a variable we are declaring. The specific name of the variable can be whatever you want it to be. Traditionally people often use f, but the variable we're using is a little more fun. Hereafter, our variable will be referred to as $cats_are_cool (or $f if you used the more boring "f" variable). Aside: You may be familiar with declaring a variable without the $ sign, and then using the $sign to invoke it when declaring environment variables.

When our command is executed, the variable we declared in {a..z}, will assume each of the values of a to z. Next, we use the semicolon to indicate we are done with the first phase of our for loop. The next part starts with do, which say for each of a–z, do <some thing>. In this case, we are creating files by touching them via touch $cats_are_cool. The first time through the loop, the command creates a, the second time through b and so forth. We complete that command with a semicolon, then we declare we are finished with the loop with "done".

This might be a great time to experiment with the command above, making small changes, if you wish. Let's do a little more. I just realized that I made a mistake. I meant to give the files a .txt extension. This is how we'd make that happen:

for dogs_are_ok_too in {a..z}; do mv $dogs_are_ok_too $dogs_are_ok_too.txt; done;
Note: It would be perfectly okay to re-use $cats_are_cool here. The variables are not persistent between executions.

As you can see, I updated the command so that a would be renamed a.txt, b would be renamed b.txt and so forth. Why would I want to do that manually, 26 times? If we check our directory, we see that everything was completed in that single command:

rasto@lmlatham:~/temp$ ls -l
total 0
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 a.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 b.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 c.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 d.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 e.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 f.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 g.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 h.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 i.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 j.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 k.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 l.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 m.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 n.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 o.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 p.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 q.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 r.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 s.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 t.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 u.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 v.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 w.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 x.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 y.txt
-rw-rw-r-- 1 rasto rasto 0 Oct 23 16:13 z.txt
rasto@lmlatham:~/temp$

Now we have files, but we don't want them to be empty. Let's put some text in them:

for f in `ls`; do cat /etc/passwd > $f; done

Note the backticks around ls. In Bash, backticks mean, "execute this and return the results," so it's like you executed ls and fed the results to the for loop! Next, cat /etc/passwd is redirecting the results to $f, in filenames a.txt, b.txt, etc. Still with me?

So now I've got a bunch of files with copies of /etc/passwd in them. What if I never wanted files for a, g, or h? First, I'd get a list of just the files I want to get rid of:

rasto@lmlatham:~/temp$ ls | egrep 'a|g|h'
a.txt
g.txt
h.txt

Then I could plug that command into the for loop (using backticks again) and do the removal of those files:

for f in `ls | egrep 'a|g|h'`; do rm $f; done

I know these examples don't seem very complex, but they give you a great first-look at the kind of functionality made possible by the for loop in Bash. Give it a whirl. Once you start smartly incorporating it in your day-to-day operations, you'll save yourself massive amounts of time ... Especially when you come across thousands or tens of thousands of very similar tasks.

Don't do work a computer should do!

-Lee

Subscribe to development