Tips and Tricks Posts

I often find that the easiest way to present a complex process is with a relatable analogy. By replacing esoteric technical details with a less intimidating real-world illustration, smart people don’t have to be technically savvy to understand what’s going on. When it comes to explaining abuse-related topics, I find analogies especially helpful. One that I’m particularly keen on in explaining Abuse tickets in the context of a sinking ship.

How many times have you received an Abuse ticket and responded to the issue by suspending what appears to be the culprit account? You provide an update in the ticket, letting our team know that you’ve “taken care of the problem,” and you consider it resolved. A few moments later, the ticket is updated on our end, and an abuse administrator is asking follow-up questions: “How did the issue occur?” “What did you do to resolve the issue?” “What steps are being taken to secure the server in order to prevent further abuse?”

Who cares how the issue happened if it’s resolved now, right? Didn’t I respond quickly and address the problem in the ticket? What gives? Well, dear readers, it’s analogy time:

In the same way that a hull breach can sink a ship, so too can a security hole on your server cause problems for your (and your clients’) data. In the last installment of “Tips from the Abuse Department,” Andrew explained some of the extremely common (and often overlooked) ways servers are compromised and used maliciously. As he mentioned in his post, Abuse tickets are, in many cases, the first notification for many of our customers that “something’s wrong.”

At a crucial point like this, it’s important to get the water out of the boat AND prevent the vessel from taking on any more water. You won’t be sailing smoothly unless both are done as quickly as possible.

Let’s look at an example of what thorough response to an Abuse ticket might look like:

While it’s quite a bit more work than simply identifying the domain and account responsible for the abuse and suspending it, the extra time you spent investigating the cause of the issue will prevent the same issue from happening after your client “fixes” the problem by deleting the files/directories. Invariably, they’d get compromised again in the same way when the domain is restored, and you’d hear from the Abuse department again.

Server security goes hand in hand with systems administration, and even though it’s not a very fun part of the job, it is a 24/7 responsibility that requires diligence and vigilance. By investing time and effort into securing your servers and fixing your hull breach rather than just bailing water overboard, your customers will see less downtime, you’ll be using your server resources more efficiently, and (best of all) you won’t have the Abuse team hounding you about more issues!

-Garrett

P.S. I came up with a brilliant analogy about DNS and the postal service, so that might be a topic for my next post …

As an abuse administrator, I’m surrounded by spam on a daily basis. When someone sends an abuse-related complaint to our abuse@softlayer.com contact address, it gets added to our ticket queue, and our Abuse SLayers take time to investigate and follow up with the customers whose servers violate our acceptable use policy. The majority of those abuse-related submissions are reporting spam coming from our network, and in my interaction with customers, I’ve noticed that spam (and the source of spam) is widely misunderstood.

Most spam tickets we create on customer accounts pinpoint spam sent from a compromised or exploited server. Our direct customer didn’t send the phishing email, malware distribution, pharmacy advertisement or pornographic spam, but that activity came from their account. While they’re accountable for the abusive behavior coming from their server, in many cases, they don’t know that there’s a problem until we post an abuse ticket on their account. These servers are targeted and compromised by common techniques and exploits that could have been easily avoided, but they aren’t very well known outside the world of abuse.

To protect yourself from a spammer, you need to think like a spammer. You need to understand how someone might try to exploit your environment so that you can prevent them from doing so. As you’re looking at ways to secure your server proactively, make sure you target these five exploits in particular:

1. User Auth Login

This is by far the most common exploit to used to send spam. This method involves a person or script using the credentials of a user to send spam through a domain’s mail server. The majority of these incidences are caused by malware on a client PC that obtains the login and password for a domain user and uses that information to log on and send mail from the client PC through the server. Often, these spam messages are sent through a botnet command structure.

When an account is compromised, simply changing the password for the compromised user on the server usually won’t stop the abuse. We see quite a few accounts that continue to send spam after an initial abuse ticket results in a password change. Most servers that are sending spam with this method are found to only be sending a small amount of spam at any given time to avoid detection. The low volume of spam that is being sent per server is made up for by the fact that there are thousands of servers being used for the same spamming campaigns.

In order to stop the User Auth Login exploit, a customer needs to clean all of the malicious software (malware) from their environments. To prevent future User Auth Login compromises, users should be made aware of the potential dangers of untrusted software, and if they believe their machines are infected, they need to know what to do.

2. Tell-a-friend Exploitation

The User Auth Login technique is the most common method employed by spammers, but the “tell-a-friend” script exploitation isn’t far behind when it comes to volume of affected servers. This spamming method find websites that use scripts to invite users to refer friends to a page or product. Spammers will use the ‘Your Message’ field in one of these scripts to input their own content and links, and they’ll push the actual page referral link to the bottom of the message. When these site scripts aren’t secure, the spammer will use them to send hundreds or thousands of messages.

To avoid having your website fall victim to this type of spam, be very wary of any widget or script you add. If you need to add Facebook, Twitter and email “share” functionality to your site, make sure you incorporate a tell-a-friend script that does not allow for customizable messages or does not accept input of more than one email address. Also, users won’t need the “cc” or “bcc” fields, so you can be sure those are axed as well. If you can’t find a good “share” script that you’re comfortable with from a security perspective, it might be a good idea to remove that functionality to avoid exploitation.

3. Uploaded Mailers

Spam sent via an uploaded third party mailer can sometimes prove difficult for admins to locate. An uploaded third party mailer could be capable of creating it’s own outbound SMTP connection, and that would allow a program to bypass the existing MTA on the server and render any legitimate mail logs useless for investigation. Another challenge is that a php mailer can be uploaded to a location within a user’s web content, and that mailer is run by the user ‘nobody’ (the default Apache user).

We strongly suggest configuring your server to have the mail headers show the script’s user (that’s not the Apache default user) and the location the script is running from on the server. Many times, these kinds of mailers are maliciously uploaded after a user’s FTP password is been compromised, so be sure your FTP login information is secure.

4. Software Exploits

The “software exploits” category casts a huge shadow. Every piece of software on a server — from mail servers, content management systems and control panels to the operating system itself — can be targeted by hackers. They probe servers to find security vulnerabilities and weak coding, and when they find a vulnerability, they take control.

The hacker who found the software vulnerability might not actually take advantage of the exploit immediately. That user may sell access to other entities for their use, and that use often ends up being spam. In addition to having strong firewall rules and access restrictions, you should update and maintain the current stable versions of all software on your servers.

5. WordPress Exploits

WordPress exploits would technically fall under the “Software Exploits” category, but I’m breaking it out into its own category simply due to the volume of spam issues that are the result of exploiting this particular piece of software. The first step to protecting against spam being sent through this source is to make sure you have the latest version of WordPress installed. With that done, be sure to research the latest security plugins for that version and install any that are applicable to your environment.

These five techniques are not the only ones used by spammers to take advantage of your environment, but they are some of the most common. To protect yourself from becoming a source of spam, make your servers a more difficult target to exploit. To stop spam, you need to know spam. Now that you know spam, it’s time to stop it. Ask questions, test your environment regularly and watch your logs for any unexplained usage.

-Andrew

Web developers have the unique challenge of marrying coding logic and visual presentation to create an amazing user experience. Trying to find a balance between those two is pretty difficult, and it’s easy to follow one or the other down the rabbit hole. What’s a web developer to do?

I’ve always tried to go the “work smarter, not harder” route, and when it comes to balancing functionality and aesthetics, that usually means that I look around for plugins and open source projects that meet my needs. In the process of sprucing up an form, I came across jQuery Select2, and it quickly became one of my favorite plugins for form formatting. With minimal scripting and little modification, you get some pretty phenomenal results.

We’ve all encountered drop-down selection menus on web forms, and they usually look like this:

Those basic drop-downs meet a developer’s need for functionality, but they aren’t winning any beauty pageants. Beyond the pure aesthetic concerns, when a menu contains dozens (or hundreds) of selectable options, it becomes a little unwieldy. That’s why I was so excited to find Select2.

With Select2, you can turn the old, plain, boring-looking select boxes into beautiful, graceful and more-than-functional select widgets:

Not only is the overall presentation of the data improved, Select2 also includes an auto-complete box. A user can narrow down the results quickly ad easily, and if you’ve got some of those endlessly scrolling select boxes of country names or currencies, your users will absolutely notice the change (and love you for it).

What’s even sexier than the form facelift is that you can add the plugin to your form in a matter of minutes.

After we download Select2 and upload it to our box, we add our the jQuery library and scripts to the <head> of our document:

<script src="jquery.js" type="text/javascript"></script> 
<script src="select2.js" type="text/javascript"></script>

For the gorgeous styling, we’ll also add Select2′s included style sheet:

<link href="select2.css" rel="stylesheet"/>

Before we close our <head> tag, we invoke the Select2 function:

<script>
	$(document).ready(function() { $("#selectPretty").select2(); });
</script>

At this point, Select2 is locked and load, and we just have to add the #selectPretty ID to the select element we 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>

Notice: the selectPretty ID is what we defined when we invoked the Select2 function in our <head> tag.

With miniscule coding effort, we’ve made huge improvements to the presentation of our usually-boring select menu. It’s so easy to implement that even the most black-and-white coding-minded web developers can add some pizzazz to their next form without having to get wrapped up in styling!

-Cassandra

Whether you’re managing a SaaS solution for thousands of large clients around the world or you’re running a small mail server for a few mom-and-pop businesses in your neighborhood, you’re providing IT service for a fee — and your customers expect you to deliver. It’s easy to get caught up in focusing your attention and energy on day-to-day operations, and in doing so, you might neglect some of the looming risks that threaten the continuity of your business. You need to prioritize risk assessment and management.

Just reading that you need to invest in “Risk Management” probably makes you shudder. Admittedly, when a business owner has to start quantifying and qualifying potential areas of business risk, the process can seem daunting and full of questions … “What kinds of risks should I be concerned with?” “Once I find a potential risk, should I mitigate it? Avoid it? Accept it?” “How much do I need to spend on risk management?”

When it comes to risk management in hosting, the biggest topics are information security, backups and disaster recovery. While those general topics are common, each business’s needs will differ greatly in each area. Because risk management isn’t a very “cookie-cutter” process, it’s intimidating. It’s important to understand that protecting your business from risks isn’t a destination … it’s a journey, and whatever you do, you’ll be better off than you were before you did it.

Because there’s not a “100% Complete” moment in the process of risk management, some people think it’s futile — a gross waste of time and resources. History would suggest that risk management can save companies millions of dollars, and that’s just when you look at failures. You don’t see headlines when businesses effectively protect themselves from attempted hacks or when sites automatically fail over to a new server after a hardware failure.

It’s unfortunate how often confidential customer data is unintentionally released by employees or breached by malicious attackers. Especially because those instances are often so easily preventable. When you understand the potential risks of your business’s confidential data in the hands of the wrong people (whether malicious attackers or careless employees), you’ll usually take action to avoid quantifiable losses like monetary fines and unquantifiable ones like the loss of your reputation.

More and more, regulations are being put in place to holding companies accountable for protecting their sensitive information. In the healthcare industry businesses have to meet the strict Health Insurance Portability and Accountability Act (HIPAA) regulations. Sites that accept credit card payments online are required to operate in Payment Card Industry (PCI) Compliance. Data centers will spend hours (and hours and hours) achieving and maintaining their SSAE 16 certification. These rules and requirements are not arbitrarily designed to be restrictive (though they can feel that way sometimes) … They are based on best practices to ultimately protect businesses in those industries from risks that are common throughout the respective industry.

Over the coming months, I’ll discuss ways that you as a SoftLayer customer can mitigate and manage your risk. We’ll talk about security and backup plans that will incrementally protect your business and your customers. While we won’t get to the destination of 100% risk-mitigated operations, we’ll get you walking down the path of continuous risk assessment, identification and mitigation.

Stay tuned!

-Matthew

Wakka wakka wakka wakka. All your base are belong to us. I’m sorry Mario, but our princess is in another castle. It’s dangerous to go alone. Do a barrel roll.

If you can place any of those quotes from the video games of yore, you’ll probably love the Server Challenge II. Taking cues from classic arcade games, we’ve teamed up with Supermicro to build a worthy sequel to our original Server Challenge:

If you come across Server Challenge II at a conference, your task is clear. You step up to the full-sized server rack and perform three simple tasks:

1. Load the data.
2. Connect the network.
3. Save the world.

You’ve got two attempts per day to install twenty-four drive trays into two 2U Supermicro servers and plug eighteen network cables into their correct switches. Get all of that done in the fastest time at the conference, and you walk away with a brand new Macbook Air. During booth setup at GDC Online, we shot a quick video of what that looks like:

The new challenge is sure to garner a lot of attention, and we’re excited to see the competition heat up as the show progresses. Beyond being a fun game, the Server Challenge II is also a great visual for what SoftLayer does. When you get to touch servers in a server hosting company’s booth, you’re probably going to remember us the next time you need to order a new server. You also get to see the Cisco and Supermicro switches that you’d see in all of our thirteen data centers around the world … It’s a tech geek’s dream come true.

In honor of the launch of Server Challenge II, we’re going to offer some “live” coverage of the competition at GDC Online this week. If you want to watch the Server Challenge II GDC Online 2012 remotely via “challenge-cast,” bookmark this blog post and refresh frequently. We’ll update the leader board every hour or two so that you can keep track of how the times are progressing throughout the show:

Game on.

**UPDATE** GDC Online has officially wrapped, and after some last-minute heroics, Derek Manns grabbed the top spot (and the MacBook Air) for his Server Challenge II efforts! If you’ve been watching the leader board throughout the conference, you saw the top attendee time fall from 1:59.30 all the way down to 1:09.48. We hope you’ve enjoyed the “challenge-cast” … Keep an eye on SoftLayer’s event schedule to prepare for your next chance to take on the Server Challenge II.

-@khazard

This guest blog comes to us from Spark::red, a featured member of the SoftLayer Technology Partners Marketplace. Spark::red is a global PCI Level 1 compliant hosting provider specializing in Oracle ATG Commerce. With full-redundancy at every layer, powerful servers, and knowledgeable architects, Spark::red delivers exceptional environments in weeks, instead of months. In this video we talk to Spark::red co-founder Devon Hillard about what Spark::red does, how they help companies that are outgrowing current solutions, and why they chose SoftLayer.

The Three Most Common PCI Compliance Myths

As a hosting provider that specializes in Oracle ATG Commerce, Spark::red has extensive experience and expertise when it comes to the Payment Card Industry Data Security Standards (PCI DSS). If you’re not familiar with PCI DSS, they are standards imposed on companies that process payment data, and they are designed to protect the company and its customers.

We’ve been helping online businesses maintain PCI Compliance for several years now, and in that time, we’ve encountered a great deal of confusion and misinformation when it comes to compliance. Despite numerous documents and articles available on this topic, we’ve found that three myths seem to persist when it comes to PCI DSS compliance. Consider us the PCI DSS compliance mythbusters.

Myth 1: Only large enterprise-level businesses are required to be PCI Compliant.

According to PCI DSS, every company involved in payment card processing online or offline should be PCI Compliant. The list of those companies includes e-commerce businesses of all sizes, banks and web hosting providers. It’s important to note that I said, “should be PCI Compliant” here. There is no federal law that makes PCI compliance a legal requirement. However, a business IS required to be PCI compliant technically in order to take and process Visa or MasterCard payments. Failure to operate in with PCI compliance could mean huge fees if you’re found in violation after a breach.

Payment card data security is the most significant concern for cardholders, and it should be a priority for your business, whether you have two hundred customers or two million customers. If you’re processing ANY credit card payments, you should make sure you are PCI-compliant.

There are four levels of PCI compliance based on the number of credit card transactions your business processes a year, so the PCI compliance process is going to look different for small, medium-sized and large businesses. Visit the PCI Security Standards Council website to check which level of PCI compliance your business needs.

Myth 1: Busted.

Click to read the other two major PCI Compliance myths. »

In the late 90′s, web pages presented their information in a relatively structured fashion, with little concern on how “pretty” the content looked. To a certain extent, that was a result of available technology and resources being a little more limited, but much of the reason was probably because we had no idea what was possible. We’ve come a long way, my friend. These days, it’s tough to spend an hour online without coming across a gorgeous web site with huge animations, a pallet of every color possible, full-width backgrounds and high definition detail.

Those sites may be aesthetically pleasing, but they can be a big pain from a developer’s perspective.

How much load does all of that stuff put on the server every time that web page is visited? As developers, it’s our job to think about both what the visitor sees AND the visitor’s experience in seeing it. Even the most beautiful sites will be ignored if a page takes too long to load. We spend hours optimizing every detail so users can fluidly browse without having to wait. It was in one of these optimization sessions that I discovered “lazy load.”

To be honest, I wasn’t too fond of the word “lazy” in the name, and I especially wasn’t fond of having to explain to my boss that *I* wasn’t being lazy … The jQuery plugin is *named* “Lazy Load.” Lazy Load effectively allows large pieces of content to stay in the backlog until they’re needed. To give you an example of what that looks like, let’s say you have a website with three humungous images, but they’re all in different locations. Instead of pushing the entire load onto the user when they first land on your page, we can break them up and have them load only when the user goes to view them. We’re not reducing the size of the web page; we’re merely helping it work smarter.

Without Lazy Load, a normal web page loads each item when its page is visited. If a website has videos, music, images and some neat user interactivity applications, each of those items will load at the same time:

If you take into consideration how large each of those items are, you can sense the problem. The user only has so much bandwidth to load these items, and something’s gotta give. Usually, it means long loading times. We can’t control how fast each user’s ISP is, but we can reorder our items and let Lazy Load help us prioritize items and load the page more efficiently.

After we snag Lazy Load on Github (jquery.lazyload.js), we put our jQuery scripts in the <head> of our page:

<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script>

Now that the plugin is available to us, we need to determine what we want to load lazily. Images are probably one of the most bothersome page elements, so let’s apply Lazy Load to the images we load in the belazy class. In the <head> of your page (or in the footer if you prefer your JavaScript entries there), you’ll add:

<script type="text/javascript">$("img.belazy").lazyload();</script>

As a result of that function, all image tags with a class of belazy will have Lazy Load run on them. This helps us ensure that we’re not loading ALL of our images lazily. Now we need to choose which images we want to apply Lazy Load to.

Let’s say the image tag of the largest image on one of our page looks like this:

<img src="bighonkingimage.png"/>

To have the lazyload function apply to it, we just have to make a couple tweaks:

<img class="belazy" src="bighonkingimage.png" data-original="bighonkingimage.png"/>

We added class="belazy" to trigger the lazyload function, and we added data-original="bighonkingimage.png" to line up with the formatting required by the newest version of Lazy Load (it’s simply a repeat of the source).

When a user visits our page, bighonkingimage.png will load only when it’s needed!

Pretty neat, eh?

-Cassandra

When I was young, I vividly remember a wise man sharing a proverb with me: “Locks are for honest people.” The memory is so vivid because it completely confused me … “If everyone was honest, there would be no need for locks,” I thought, naively. As it turns out, everyone isn’t honest, and if “locks keep honest people honest,” they don’t do anything to/for dishonest people. That paradox lingered in the back of my mind, and a few years later, I found myself using some sideways logic to justify learning the mechanics of lock picking.

I ordered my first set of lock picks (with instruction booklet) for around $10 online. When the package arrived, I scrambled to unwrap it like Ralphie unwrapped the “Red Ryder” BB gun in “A Christmas Story,” and I set out to find my first lock to pick. After a few unsuccessful attempts, I turned to the previously discarded instruction booklet, and I sat down to actually learn what I was supposed to be doing. That bit of study wound up being useful; with that knowledge, I managed to pick my first lock.

I tend to collect hobbies. I also tend to shift every spare thought towards my newest obsession until whatever goal I set is accomplished. To this end, I put together a mobile lock-picking training device — the cylinder/tumbler from a dead bolt, my torq wrench wrapped with electrical tape to prevent the recurrence of blisters, and my favorite snake rake. I took this device with me everywhere, unconsciously unlocking and resetting the lock as I went about my shopping, sat in a doctor’s office or walked around the block. In my mind, I was honing my skills on a mechanical challenge, but as one of my friends let me know, people who saw me playing with the lock in public would stare at me like I was a budding burglar audaciously flaunting his trade.

I spent less money on a lock picking set than I would have on a lock, and I felt like had a key to open any door. The only thing between me and the other side of a locked door in front of me was my honesty. What about the dishonest people in the world, though? They have the same access to cheap tools, and while they probably don’t practice their burgling in public, can spend just as much time sharpening their skills in private. From then on, I was much more aware of the kinds of locks I bought and used to secure my valuables.

When I started getting involved in technology, I immediately noticed the similarities between physical security and digital security. When I was growing up, NBC public service announcements taught me, “Knowledge is Power,” and that’s even truer now than it was then. We trust technology with our information, and if someone else gets access to that information, the results can be catastrophic.

Online, the most common “hacks” and security exploits are usually easily avoidable. They’re the IRL equivalent of leaving valuables on a table by an unlocked window with the thought, “The window is closed … My stuff is secure.” Some of those windows may be hard to reach, but some of them are street-level in high-traffic pedestrian areas. The most vulnerable and visible of access points: Passwords.

You’ve heard people tell you not to do silly things like making “1 2 3 4 5″ your combination lock, and your IT team has probably gotten onto you about using “password” to log onto your company’s domain, but our tendency to create simpler passwords is a response to the inherent problem that a secure password is, by its nature, hard to remember. The average Internet user probably isn’t going to use pwgen or a password lockbox … If you had a list of passwords from a given site, my guess is that you’d wind up seeing a lot more pets’ names and birth years than passwords like S0L@Y#Rpr!Vcl0udN)3mblyR#Q. What people need to understand is that the “secure” password can be just as easy to remember as “Fluffy1982.”

Making a *Usable* Secure Password

The process of creating a unique, usable and secure password is pretty straightforward:

1. Start with a series of words or phrases which have a meaning to you: A quote in a movie, song lyric, title of your favorite book series, etc. For our example, let’s use “SoftLayer Private Clouds, no assembly required.”

2. l33t up your phrase. To do this, you’d remove punctuation and spaces, and you’d replace a letter in the phrase with a special character. You predetermining these conversions to create a template of alterations to any string which only take minimal thought from you. In the simplest of cyphers, letters become a numbers or characters that resemble the letter: An “o” becomes a “0,” “e” becomes a “3,” an “a” becomes an “@,” etc. In more complicated structures, a character can be different based on where it lies in the string or what less-commmon substitutions you choose to use. Our example at this point would look like this: “S0ftL@y3rPr1v@t3Cl0udsn0@ss3mblyr3qu1r3d”
3. Right now, we have a password that would make any brute-forcing script-kiddie yearn for the Schwarts, but we’re not done yet. If someone were to find our cypher and personal phrase, they may be able to figure out our password. Also, this password is too long for use in many sites with password restrictions that cap you a 16 characters. Our goal is to create a password between 15-25 characters and be prepared to make cuts when necessary.
4. A good practice is to cut out the beginning or ending of a word. In our example (taking out the l33t substitutions for simplicity here), our phrase might look like this: “so-layer-priv-cloud-no-embly-req”
5. When we combine the shortened password with l33t substitutions, the last trick we want to incorporate is using our Shift key. An “e” might be a “3″ in a simple l33t cypher, but if we use the Shift key, the “e” becomes a “#” (Shift+”3″): “S0L@Y#Rpr!Vcl0udN)#mblyR#Q”

The main idea is that when you’re “locking” your accounts with a password, you don’t need the most complicated lock ever created … You just need one that can’t be picked easily. Establish a pattern of uncommon substitutions that you can use consistently across all of your sites, and you’ll be able to use seemingly common phrases like “Fluffy is my dog’s name” or “Neil Armstrong was an astronaut” without worrying about anyone being able to “open your window.”

-Phil (@SoftLayerDevs)

Last month, I posted a blog about dynamically resizing divs with jQuery, and we received a lot of positive feedback about it. My quest to avoid iframes proved to be helpful, so I thought I’d share a few more esoteric jQuery tips and tricks that may be of use to the developers and designers in the audience. As I thought back about other challenges I’ve faced as a coder, a great example came to mind: Making divs equal height, regardless of the amount of content inside.

I haven’t seen many elegant div-based solutions for that relatively simple (and common) task, so I’ve noticed that many people struggle with it. Often, developers will turn back to the “Dark Side” of using tables to format the content since all columns would have the same height as the tallest column by default:

It was easy theme table columns and to achieve the coveted 100% height that many designers seek, but emulating that functionality with divs proves to be much more difficult. A div is like the Superman of HTML elements (faster-loading, more flexible, more dynamic, etc.), and while it has super powers, it also has its own Kryptonite-like weaknesses … The one relevant to this blog post being that floating three div elements next to each other isn’t going to give you the look of a table:

Each of the three divs has its own height, so if you’re doing something as simple as applying background colors, you’re going to wind up with an aesthetically unpleasing result: It’s going to look funky.

You could get into some nifty HTML/CSS workarounds, but many frustrated theme creators and designers will tell you that if your parent elements don’t have a height of a 100%, you’re just wasting coding lines. Some complex solutions create the illusion of all three divs being the same height (which is arguably better than setting fixed heights), but that complexity can be difficult to scale and repeat if you need to perform similar tasks throughout your site or your application. The easiest way to get the functionality you want and the simplicity you need: The jQuery equalHeights plugin!

With a few class declarations in your existing HTML, you get the results you want, and with equalHeights, you can also specify the minimum and maximum parameters so it will create scrollable divs if the tallest element happens to be higher than your specified maximum.

How to Use jQuery equalHeights

First and foremost, include your JQuery lirbraries in the <HEAD> of your document:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>

The equalHeights plugin is not a hosted library, so you have to host the file on your server (here’s the link again).

With the required libraries called in our document, it’s time to make the magic happen in your HTML.

Create Your Divs

<div class="divHeight">This DIV is medium sized, not too big and not too small, but just right.</div>
<div class="divHeight">This DIV has a lot of useful content and media that the user can interact with, thus it's very tall.</div>
<div class="divHeight">This DIV is tiny. Period.</div>

To have them line up next to each other, you’d have them float:left; in your CSS, and now you need to apply the equalHeights function.

Call the equalHeights Plugin
In order for the script to recognize the height of the tallest element, you’d need to call $(document).ready just before the </body> tag on your page. This will ensure that the page loads before the function runs.

The call looks like this:

<script type="text/javascript">$(document).ready(function() {
	$(".divHeight").equalHeights();
});</script>

If you want to specify a minimum and maximum (i.e. The div should be at least this tall and should be no taller than [adds scrollbar if the div size exceeds] the maximum), just add the parameters:

<script type="text/javascript">$(document).ready(function() {
	$(".divHeight").equalHeights(300, 600);
});</script>

The initial call does not change the appearance of the divs, but the time it takes to do the resizing is so miniscule that users will never notice. After that call is made and the height is returned, each div with the class of divHeight will inherit the the same height, and your divs will be nice and pretty:

This trick saved me a lot of headache and frustration, so hopefully it will do the same for you too!

-Cassandra

A few weeks back, Kevin handed me The Thank You Economy by Gary Vaynerchuk and said we should give it a read. I’m only halfway through it, but I thought I should share some of Vaynerchuk’s insights on social media with the SoftLayer blog audience while they are still fresh in my mind.

The best summary of The Thank You Economy comes straight from its pages:

“The Thank You Economy explains how businesses must learn to adapt their marketing strategies to take advantage of platforms that have completely transformed consumer culture and society as a whole.”

The book looks at how human nature hasn’t changed, but everything else has. The rise of social media is as game-changing as the radio and the television were, and that presents a combination of challenge and opportunity for businesses. In Vaynerchuk’s words, “What we call social media is not media, nor is it even a platform. It is a massive cultural shift that has profoundly affected the way society uses the greatest platform ever invented, the Internet.”

I’ve been “in the trenches” with SoftLayer’s social media presences for over a year now, and I realized that I take advantage of the fundamental openness of the company. Vaynerchuk urges businesses to dive into social media, and he shares some of most common reasons companies aren’t getting involved — I could list all eleven reasons here, but you’d probably recognize them all as excuses you’ve heard.* The common theme: People (and companies) fear uncertainty, and while that fear is understandable, it shouldn’t be paralyzing. The opportunity and necessity of engagement outweigh the excuses.

When you clear all the hurdles preventing your entrance to the world of social media, you need to execute. Vaynerchuk explains how “Cultural Building Blocks” of a company dictate that company’s success in social media, and while they aren’t exactly an Easy Bake Oven recipe to viral success, they are profound in their simplicity:

1. Begin with Yourself
2. Commit Whole Hog
3. Set the Tone
4. Invest in Employees
5. Trust Your People
6. Be Authentic

The “trust your people” and “be authentic” building blocks resonated the most when I thought of how SoftLayer’s social media is managed. The level of trust my boss has in me is both refreshing and challenging, and I find myself working harder to prove I deserve it. A cynic might read that sentence and scoff at its over-the-top positivity, but I’m as honest as I can be … And that’s an example of the challenge of being authentic. SoftLayer employees are passionate about their responsibilities and the company culture, and that kind of enthusiasm is so rare that there’s a tendency to assume that it’s manufactured.

If I see someone talking to us via social media about a bad experience at SoftLayer, I’m more concerned about changing their experience than I am about what they share with their social network. Often, when I follow up with those customers, when the problem is resolved, it’s amazing how surprised people are that someone actually took the time to make things right. I want to hear if someone has a bad experience because I take pride in turning it around. Are we “in control” of what people say about SoftLayer on social media? No. We are in control of how SoftLayer responds to what people are saying about us, though.

Your business needs to be active in social media.

You don’t need a “social media team” or a budget or a strategy … You need to be passionate about your employees, customers and products, and you need to make time to reach out to your community — wherever they are.

What roadblocks have you run into when it comes to your business’s social media engagement? If you’ve been successful, what tips could you share with me (and the rest of the SoftLayer audience)?

-Rachel

*If you’re toying with the idea of social media engagement or you’re working for a company that hasn’t embraced it yet, it’s worth it for you to buy The Thank You Economy to read how @garyvee dismantles those excuses.