Tips And Tricks Posts

November 12, 2014

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

After a small throwback post of my original Tips and Tricks – jQuery Select2 blog for our #T4 series, and posting a CSS Blog about Mastering Multiple Backgrounds, it’s time I came back around and finished the HTML5 – Back to Basics with a Strong Foundation series with Part 2!

I highly recommend reading part one of the series. I outlined many HTML5 techniques that had never been possible with anything but Flash or jQuery before. In this blog I’ll continue with additional techniques that I couldn’t fit into the first blog.

I stand by my previous statement that if we forget what we’ve done and scripted for over two decades with previous versions of HTML and return to the basics with HTML5, we can re-learn a whole new foundation that is sure to make us stronger developers and smarter engineers.

IV. No More Declaring Types!

The sole purpose to develop better scripting and tagging languages is to improve efficiency. I think we can all agree that a smarter language should be able to detect certain attributes and tags automatically . . . well now, HTML5 has taken a huge step toward this.

Now <scripts> and <links> can be FREE of the type attribute!

  • Instead of:
  • <link type=”text/css” rel=”stylesheet” href=”css/stylesheet.css” />

    Or

    <script type=”text/javascript” src=”js/javascript.js”></script>

  • We can now just simply declare:
  • <link rel=”stylesheet” href=”css/stylesheet.css” />

    And

    <script src=”js/javascript.js”></script>

Something so little . . . yet so awesome!

V. SEMANTICS! Well . . . partial semantics anyway!

HTML5 supports some semantic tags—the most popular being the header and footers.

No longer do we have to write:

<div id=”header”>
    <h1>Header Content</h1>
</div>
<div id=”footer”>
    <h1>Footer Content</h1>
</div>

Now, with semantic Headers and Footers, we can simply do:

<header>
    <h1>Header Content</h1>
</header>
<footer>
    <h1>Footer Content</h1>
</footer>

Whoo! That’s an AWESOME change. Of course there could be a LOT more semantic changes, but we all know those will be coming soon! Until then, we can enjoy what we have.

VI. Video Support without Third-Party Plugins

Many browsers are jumping on board with providing support for the <video> tag, which allows native playback of videos. Gone are the days of having to use javascript/jQuery or *shudder* Flash to embed videos into your pages.

Check this out:

<video controls preload>
    <source src="myVideo.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="myVideo.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is way too old. <a href="myVideo.mp4">Download instead.</a> </p>
</video>

You’ll notice there are TWO <source> tags; this is because browsers like IE and Safari have already started supporting advanced video formats such as mp4. Firefox and Chrome are still in the process, but for now we still need to provide ogv/ogg videos. It’s only a matter of time before all the browsers will support mp4, but this is definitely a huge step forward from third-party plugins!

You should also notice there are two attributes listed in the <video> tag: controls and preload. Controls embed native video playback controls in the video player while preload allows the video to be preloaded, which is GREAT if you have a page just dedicated to viewing the video.

Thanks for tuning in, and let us know what YOUR favorite new features of HTML5 are! And if you’re interested in a gaming series with HTML5, holla at us, and I’ll get on it! I’ve been dying to write a blog series dedicated to teaching HTML5 gaming with the <canvas> tag!

-Cassandra

November 11, 2014

Which storage solution is best for your project?

Before building applications around our network storage, here’s a refresher on what network storage is, how it is used, the different types available, and the best uses for each.

What is network storage? Why would you use it?

Appropriately named, network storage is storage attached to a server over our network; not to be confused with directly attached storage (DAS), which is a hard drive located in the server (or connected with a device like a SCSI or USB cable). Although DAS transfers data to a server faster than network storage due to network latency and system caching, there is still a strong place for network storage.

Many different servers can access network storage, and with some network storage solutions, more than one server can get data from the same shared storage volume simultaneously. This comes in handy if one server dies, because another can pick up a storage device and start where the first left off.

With DAS, planned downtime for server upgrades, potential data loss, and provisioning larger or more servers can slow down productivity. The physical constraints of internal drives and costs associated with servers do not affect network storage.

Because SoftLayer manages the disk space of our network storage products, there’s no need to worry about rebuilding a redundant array of inexpensive disks (RAIDs) or failed disks. If a disk fails, SoftLayer automatically replaces it and rebuilds the RAID—in most cases you would be unaware that the changes occurred.

Select network storage solutions are available with tools for your important data. Schedule snapshots of your data, promote snapshots to full volumes, or reset your data to the snapshot point.

And with network storage, downtime is minimal. Disaster recovery tools available on select storage solutions let you send a command to quickly fail over to a different data center so you can access your data if our network is ever down in a data center.

Types of Network Storage And How They Are Different

Storage Area Network (SAN) or Block Storage

Block storage works like DAS, just remotely—only a single server can access a block storage volume at a time. Using an Internet small computer system interface (iSCSI) protocol over a secure transmission control protocol/Internet protocol (TCP/IP) connection, SoftLayer's block storage has excellent features for backup and disaster recovery, and adding snapshot schedules and failover redundancy make it a powerful enterprise solution.

Network Attached Storage (NAS) or File Storage

File storage acts like a remote file system. It has a slim operating system that allows servers to treat it like a remote directory structure. Multiple servers can share files on the same storage simultaneously. Our new consistent performance storage lets you share files quickly and easily using a network file system (NFS) with your choice of performance level and secure connections.

We also have a common Internet file system (CIFS) (Windows), which requires a credential that grants access to any server on our private network. File storage can only be accessed by SoftLayer servers.

Object Storage

Object storage is a standalone storage entity with its own representational state transfer (REST) API that grants applications (not operating systems) access to the files stored there. Located on a public network, servers in any of our data centers can directly access files stored there. Object storage is different in the way those files are stored as well. In object storage there is not a directory structure, but instead metadata tags are used to categorize and search for files. In conjunction with a content delivery network (CDN), you can quickly serve files to your users or to a mobile device in close proximity.

With pay-as-you-go pricing, you don’t have to worry about running out of space. We only charge based on the greatest usage in any given day. That means you can get started right now for free!

Which storage solution is best for your project?

If you are still confused about which network storage option you should build your applications around, take this eight-question quiz to find out if object, file or block storage will work best for you:

-Kevin

November 6, 2014

#T4 -Tips and Tricks - Pure CSS Sticky Footers

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

Sticky footers are still landing developers in, well, sticky situations. Don’t fret—we’ve all been there. We’re bumping our popular Tips and Tricks – Pure CSS Sticky Footers blog post that was originally posted two years ago today!

Our objective is simple: Make the footer of our web page stay at the bottom even if the page's content area is shorter than the user's browser window. We got a LOT of feedback the first time this blog was posted, a lot of you loved it, and some of you brought to my attention that some browser environments didn’t support this method.

For this throwback, I have modified the code (the HTML and the CSS), but as you can see, not by too much, only a few things have changed. This method uses the: after attribute, which in my opinion is a LOT cooler. This should help those of you who could not get the previous method to work as this utilizes more of a modern technique and has a lot more universal compatibility!

So enjoy!

Go from this:

CSS Footer

To this:

CSS Footer

  1. Start by getting the HTML structure in place first:
    <div id="page">
     
          <div id="header"> </div>
     
          <div id="main"> </div>
    </div> <!-- /page -->
     
    <div id="footer"> </div>
  2. Then code the CSS for the full page:
    * {
          margin: 0;
     
    html, body {
     
          height: 100%;
    }
  3. Code the rest as:
    #page {
          min-height: 100%;
          margin-bottom: -100px; /* equal to the fixed height of your footer */
    }
     
    #page:after {
          content: “”;
          display:block;
    }
     
     
    #footer, #page:after {
          height: 100px;
    }
  4. For Internet Explorer to not throw a fit, we need concede that IE doesn't recognize min-height as a valid property, so we have to add Height: 100%; to #page:
    #page {
          Min-height: 100%;  /* for all other browsers */
          height: 100%;  /* for IE */
          position:relative;
    }

To read my FAVORITE perk of this trick: check out the original post here.

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

-Cassandra

October 23, 2014

CSS3 Tips and Tricks – Mastering Multiple Backgrounds

I’ve written a lot of blog posts, some on our very own SoftLayer Development Network, but most of them have been posted right here on SoftLayer’s main blog. One of the most popular is a tutorial I wrote on being able to create a customized background depending on the user’s location. For example: A person visiting a website from the United States during the daytime may see a beautiful yellow background with an orange glow and a bright yellow sun just above the horizon, while a surfer from China may see the same website, but with a dark purple background with subtle white stars and a shimmering moon because it is night. The example I wrote customized the CSS to the time zone based on locale tailoring the site with a more personal touch.

The demand for sites to serve a more interactive experience has always been large in volume, but few websites actually deliver.

Luckily, our Web languages are evolving all of the time, and since I’ve written the “What time is it for you?” blog on our SLDN, more advancements have been made to the background functionality and browser compatibility. This means MORE browsers support these new features, and it’s compliant across the board!

Let’s start off with our usual HTML document (with an addition of an empty div for now, this is where we’re going to master our background techniques).

<html>
<head>
    <title>CSS3 Tips and Tricks – Mastering Multiple Backgrounds</title>
</head>
<body>
    <div class=”slBackgrounds”></div>
</body>
</html>

With CSS3, we can define multiple backgrounds in one declaration, like this:

background: url('earth.png') no-repeat top 30px center, url('star_bg.png') repeat-y center;

By separating each background with just a comma, we’re able to declare many backgrounds for one div. Let’s go ahead and add our multi-background CSS in the <head> of our document:

<style>
    .slBackgrounds {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        background: url('earth.png') no-repeat top 30px center, url('star_bg.png') repeat-y center;
        transition:background-position 600s;
    }
 
    .slBackgrounds:hover {
        background-position: top 30px center, 0px 60000px;
    }
</style>

After adding the CSS styling, you should have something that looks similar to the following:

You’ll notice I added a transition property to the .slBackgrounds class, and I bet you’re wondering why? Everybody has their own learning technique that helps them absorb concepts better and faster than other methods. My learning method (and probably 75 percent of other developers) happens to be the challenge technique: When I learn something new, I think about something extremely fun and challenging that I would like to do with this newfound knowledge beyond just the base use. For instance, why learn how to use multiple backgrounds with CSS3 and just have a five-line blog when we can learn to use multiple backgrounds, AND create an awesome animation sequence that can jazz up the old and boring background system?

Not only does this jazz it up, but by using additions such as the transition and :hover properties, we’re able to open new doors to possibilities with interactivity.

If you haven’t guessed already, the .slBackgrounds:hover section covers what should happen to the .slBackgrounds div when the user hovers over it; in this case, there’s a background-position declaration. The ‘top 30px center’ applies to the first background image, and the ‘0px 60000px’ applies to the second (gotta love multiple backgrounds!).

Go ahead and hover over our images! You should see something like this:

Something pretty simple, but I bet you can already think of a hundred things you can do with the CSS3 multiple background ability, huh? The great news is that the cross-browser compatibility is awesome and supports all newer browsers and most reasonably older ones too! And to think . . . barely five or six years ago it took MUCH more innovative coding and workarounds to achieve results like this without just embedding a flash file or an animated gif!

We’d love to hear how YOU’RE using multiple backgrounds!

- Cassandra

October 20, 2014

Clean Your Virtual Desktop Day

“A national holiday specifically for cleaning! Be still my heart,” said the neat freak.

So, I didn’t really know how to start this blog post because my virtual desktop is pretty clean. I adhere to the school of thought, “a place for everything and everything in its place.” Does this make me a neat freak void of any creativity? More on that later.

With that being said, I started with a quick Google search for “de-cluttering your desktop.” I didn’t realize there would be so many articles on the subject. No surprise, Martha Stewart even posted an article about the topic full of words like “tidy,” “unholy mess,” and “. . . makes people cranky.”

Wait.

Come back.

We’re not going to talk about Martha’s how-to guide here. [This is SoftLayer—the only how-to guides posted here are about CSS.] I actually found some pretty cool ideas that I’d like to pass on to our readers in honor of the day.

I came across a tutorial on how to create a wallpaper for your desktop in which you “drop” your desktop icons into appropriate sections. The tutorial used Adobe Photoshop, but if you’re like me, Photoshop-illiterate, you can use PowerPoint (I find it so much easier, albeit limiting). Here’s a screen shot of my desktop.

For our more tech-savvy readers . . . download Fences®. It’s basically the same thing as the DIY version I described above, but it allows you to place your icons into resizable shaded areas on your desktop. Pretty cool!

Most people store files on their desktops because they think it makes it easier to find them, but sooner or later, your desktop gets overrun by these once easy-to-find files. If you want something that will keep your desktop free from any documents, install a launcher program. There are lots to choose from, including LaunchBar, Quicksilver, Launchy, or AutoHotkey. Once installed, the program is activated by a keystroke combination. When it opens, start typing the program, folder name, or file you want open. According to users, it’s faster than locating the icon on your desktop and double-clicking. Many users claim they don’t know how they lived without it for so long.

My last tip is similar to when your mom asks you to clean your room, and all you do is shove everything under your bed. Same thing here. Just hide all those icons.

  1. Right click on your desktop
  2. Select View
  3. Unselect Show your desktop icons

That’s right. Out of sight. Out of mind.

“If a cluttered desk is a sign of a cluttered mind, of what, then, is an empty desk a sign?”

I don’t know what Albert Einstein was implying when he said that, but I do know personally that a messy desk lowers my productivity. Does this lower my creativity too?

After reviewing a few different studies on whether or not clutter produces creativity or chaos, I have come to the conclusion that if you need to accomplish practical chores like paying bills or replying to emails, you need a clutter-free workspace to focus. If you need to be creative, clutter can distract you and let you think outside of the box.

Personally, I don’t think that a clean slate lowers my creativity because I can’t even begin to work if it is messy. But, some people thrive in chaos. Hey, whatever works.

Happy Cleaning/Cluttering!

-JRL

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

September 9, 2014

Building a Secure Cloud-based Solution: Part I

When you begin a household project, you must first understand what you will need to complete the task. Before you begin, you check your basement or garage to make sure you have the tools to do the work. Building a secure cloud-based solution requires similar planning. You’re in luck—SoftLayer has all the tools needed, including a rapidly maturing set of security products and services to help you build, deploy, and manage your cloud solution. Over the next couple of months, we will take a look at how businesses leverage cloud technologies to deliver new value to their employees and customers, and we’ll discuss how SoftLayer provides the tools necessary to deliver your solutions securely.

Hurricane plan of action: Water: Check. Food: Check. Cloud: Check?

Let’s set the scene here: A hurricane is set to make landfall on the United States’ Gulf Coast, and the IT team at an insurance company must elastically scale its new claim application to accommodate the customers and field agents who will need it in the storm’s aftermath. The team needs to fulfill short-term computing needs and long-term hosting of additional images from the claims application, thereby creating a hybrid cloud environment. The insurance company’s IT staff meet to discuss their security requirements, and together, they identify several high-level needs:

  1. Provide secure connectivity, authentication, access control, and audit capabilities for IT administrators and users.

    SoftLayer provides VPNs, multifactor authentication, audit control logs, API keys, and fine-grained access control. This allows insurance agents to securely access claim forms and supporting documentation and connect to the application via https, using the wide range of SSL certificates (Symantec, Geotrust, and more). Plus, agents can authenticate using identity and access management solutions such as IWS Go Cloud ID and IBM Security Access Manager.
  2. Ensure that stringent data security measures are enforced.

    Data cannot be shifted across borders, and data at rest or in use must be encrypted. SoftLayer leaves data where customers place it, and will never transfer customers’ data. IBM Cloud Marketplace partners like Vormetric offer encryption solutions to ensure sensitive data-at-rest is not stored in clear text, and that customers maintain complete control of the encryption keys. Additionally, the IT team in our example would have the ability to encrypt all sensitive PHI data in database using data-in-use solutions from Eperi.
  3. Ensure multi-layered security for network zone segmentation.

    Users and administrators in the confidential area of insurance need confidence that their network is securely partitioned. SoftLayer native and vendor solutions such as SoftLayer VLANs, Vyatta Gateway, Fortigate firewall, and Citrix Netscaler allow administrators to securely partition a network, creating segmentation according to organizational needs, and providing the routing and filtering needed to isolate users, workloads, and domains.
  4. Enforce host security using anti-virus software, host intrusion prevention systems, and other solutions.

    The IT team can apply best-of-breed third-party solutions, such as Nessus Vulnerability Scanner, McAfee Antivirus, and McAfee Host Intrusion Protection. These capabilities give administrators the means to ensure that infrastructure is protected from malware and other host attacks, enhancing both system availability and performance.
  5. Define and enforce security policies for the hybrid cloud environment, and audit any policy changes.

    Administrators can manage overall policies for the combined public-private environment using IBM solutions like QRadar, Hosted Security Event and Log Management Service, and xForce Threat Analysis Service. Admins can use solutions from vendors like CloudPassage, Sumo Logic, and ObserveIT to automatically define policies around firewall rules, file integrity, security configuration, and access control, and to audit adherence to such policies.

The insurance company’s IT department already knew from SoftLayer’s reputation that it is one of the highest performing cloud infrastructures available, with a wide range of integrated and automated cloud computing options, all through a private network and advanced management system, but now it knows from experience that SoftLayer offers the security solutions needed to get the job done.

When business needs spike and companies need additional capacity, SoftLayer delivers quickly and securely. Stay tuned for Part 2 where we will talk secure development and test activities.

- Rick Hamilton, IBM Cloud Offering Evangelist

September 4, 2014

Keeping your private parts private.

Even with the knowledge that images can live on forever to haunt you, people continue to snap self-portraits in compromising positions (it’s your prerogative). Heck, before smart phones came along, people were using Polaroids to capture the moment. And, if history teaches us anything, people will continue the trend—instead of a smart phone, it’ll be a holodeck (a la Star Trek). Ugh, can you imagine that?

The recent high-profile hack of nude celebrity photos came from private phones. They weren’t posted to Facebook or Instagram. These celebrities didn’t hashtag.

#birthdaysuit #emperorsnewclothes #whoneedsdesignerthreads #shegotitfromhermama

Their sensitive data was compromised.

After speculation the hack stemmed from an iCloud® security vulnerability, Apple released a statement saying, “We have discovered that certain celebrity accounts were compromised by a very targeted attack on user names, passwords and security questions, a practice that has become all too common on the Internet.” The cloud platform was secure. The users’ security credentials weren’t.

These were private photos intended for private use, so how did they get out there? How can you protect your data; your images; your privacy?

You’ve heard it once; twice; probably every time you create a new account online (and in this day in age, we all have dozens of user accounts online):

  1. Use a strong password. This SoftLayer Blog is an oldie but a goodie where the author gives the top three ways to make a password: 1) use a random generator like random.org; 2) use numbers in place of letters—for example, “minivan” becomes “m1n1v4n”; 3) write your passwords down in plain sight using “Hippocampy Encryption” (named in honor of the part of the brain that does memory type activities). Or take the XKCD approach to password security.
  2. And for heaven’s sake, don’t use the same password for every account. If you duplicate usernames and passwords across sites, a hacker just needs to access one account, and he or she will be able to get into all of your accounts!
  3. Craft little-known answers to security questions. Don’t post a childhood photo of you and your dog on Facebook with the description, “Max, the best pup ever” and then use Max as a security validation answer for “What’s the name of your favorite pet?” It’s like you’re giving the hackers the biggest hint ever.
  4. If available, use a two-factor authentication security enhancement. The government (FISMA), banks (PCI) and the healthcare industry are huge proponents of two-factor authentication—a security measure that requires two different kinds of evidence to prove that you are who you say you are and that you should have access to what you're trying to access. Read our blog or KnowledgeLayer Article for more details.
  5. Remember passwords are like underwear—don’t share them with friends and change them often. When it comes to passwords, at least once a year should suffice. For underwear, we recommend changing more regularly.

We won’t tell you what to do with your sensitive selfies. But do yourself a favor, and be smart about protecting them.

-JRL

Subscribe to tips-and-tricks