Tips And Tricks Posts

March 4, 2015

Docker: Containerization for Software

Before modern-day shipping, packing and transporting different shaped boxes and other oddly shaped items from ships to trucks to warehouses was difficult, inefficient, and cumbersome. That was until the modern day shipping container was introduced to the industry. These containers could easily be stacked and organized onto a cargo ship then easily transferred to a truck where it would be sent on to its final destination. Solomon Hykes, Docker founder and CTO, likens the Docker to the modern-day shipping industry’s solution for shipping goods. Docker utilizes containerization for shipping software.

Docker, an open platform for distributed applications used by developers and system administrators, leverages standard Linux container technologies and some git-inspired image management technology. Users can create containers that have everything they need to run an application just like a virtual server but are much lighter to deploy and manage. Each container has all the binaries it needs including library and middleware, configuration, and activation process. The containers can be moved around [like containers on ships] and executed in any Docker-enabled server.

Container images are built and maintained using deltas, which can be used by several other images. Sharing reduces the overall size and allows for easy image storage in Docker registries [like containers on ships]. Any user with access to the registry can download the image and activate it on any server with a couple of commands. Some organizations have development teams that build the images, which are run by their operations teams.

Docker & SoftLayer

The lightweight containers can be used on both virtual servers and bare metal servers, making Docker a nice fit with a SoftLayer offering. You get all the flexibility of a re-imaged server without the downtime. You can create red-black deployments, and mix hourly and monthly servers, both virtual and bare metal.

While many people share images on the public Docker registry, security-minded organizations will want to create a private registry by leveraging SoftLayer object storage. You can create Docker images for a private registry that will store all its information with object storage. Registries are then easy to create and move to new hosts or between data centers.

Creating a Private Docker Registry on SoftLayer

Use the following information to create a private registry that stores data with SoftLayer object storage. [All the commands below were executed on an Ubuntu 14.04 virtual server on SoftLayer.]

Optional setup step: Change Docker backend storage AuFS

Docker has several options for an image storage backend. The default backend is DeviceMapper. The option was not very stable during the test, failing to start and export images. This step may not be necessary in your specific build depending on updates of the operating system or Docker itself. The solution was to move to Another Union File System (AuFS).
  1. Install the following package to enable AuFS:
    apt-get install linux-image-extra-3.13.0-36-generic
  2. Edit /etc/init/docker.conf, and add the following line or argument:
    DOCKER_OPTS="--storage-driver=aufs"
  3. Restart Docker, and check if the backend was changed:
    service docker restart
    docker info

The command should indicate AuFS is being used. The output should look similar to the following:
Containers: 2
Images: 29
Storage Driver: aufs
Root Dir: /var/lib/docker/aufs
Dirs: 33
Execution Driver: native-0.2
Kernel Version: 3.13.0-36-generic
WARNING: No swap limit support

Step 1: Create image repo

  1. Create the directory registry-os in a work directory.
  2. Create a file named Dockerfile in the registry-os directory. It should contain the following code:
    # start from a registry release known to work
    FROM registry:0.7.3
    # get the swift driver for the registry
    RUN pip install docker-registry-driver-swift==0.0.1
    # SoftLayer uses v1 auth and the sample config doesn't have an option
    # for it so inject one
    RUN sed -i '91i\ swift_auth_version: _env:OS_AUTH_VERSION' /docker-registry/config/config_sample.yml
  3. Execute the following command from the directory that contains the registry-os directory to build the registry container:
    docker build -t registry-swift:0.7.3 registry-os

Step 2: Start it with your object storage credential

The credentials and container on the object storage must be provided in order to start the registry image. The standard Docker way of doing this is to pass the credentials as environment variables.

docker run -it -d -e SETTINGS_FLAVOR=swift -e
OS_AUTH_URL='https://dal05.objectstorage.service.network
layer.com/auth/v1.0
' -e OS_AUTH_VERSION=1 -e
OS_USERNAME='' -e
OS_PASSWORD='' -e
OS_CONTAINER='docker' -e GUNICORN_WORKERS=8 -p
127.0.0.1:5000:5000 registry-swift:0.7.3

This example assumes we are storing images in DAL05 on a container called docker. API_USER and API_KEY are the object storage credentials you can obtain from the portal.

Step 3: Push image

An image needs to be pushed to the registry to make sure everything works. The image push involves two steps: tagging an image and pushing it to the registry.
docker tag registry-swift:0.7.3 localhost:5000/registry-swift

docker push localhost:5000/registry-swift


You can ensure that it worked by inspecting the contents of the container in the object storage.

Step 4: Get image

The image can be downloaded once successfully pushed to object storage via the registry by issuing the following command:
docker pull localhost:5000/registry-swift

Images can be downloaded from other servers by replacing localhost with the IP address to the registry server.

Final Considerations

The Docker container can be pushed throughout your infrastructure once you have created your private registry. Failure of the machine that contains the registry can be quickly mitigated by restarting the image on another node. To restart the image, make sure it’s on more than one node in the registry allowing you to leverage the SoftLayer platform and the high durability of object storage.

If you haven’t explored Docker, visit their site, and review the use cases.

-Thomas

February 25, 2015

To Raise Capital You Need a Startup Roadshow

In the world of big finance, before a company IPOs, the CEO along with an investment banker(s) go on a global roadshow to pitch their business to potential investors, including hedge funds, major investment funds, and other portfolio managers. The purpose is simple: Drum up sales of the forthcoming stock issue. In the startup world, there are no big investment banks scheduling meetings. However, there are opportunities to do a roadshow for your startup, which is even more important than the IPO.

There were 275 IPOs in 2014, the largest number since 2000. By contrast, there are around 500,000 new businesses founded in the U.S. each year (not all of which are tech startups), approximately 225,000 angel investors in the U.S., and as of a year ago, there were 874 venture capital firms [read more]. In big finance, a few companies compete for the attention of a small, accessible group of investors. In the startup world, a large number of companies must seek capital from a huge pool of often-hard-to-find, geographically dispersed investors. Because of this, a roadshow is even more important for startups than it is for IPOs.

The SoftLayer Catalyst team works with startups in communities as big as San Francisco’s Silicon Valley to as small as Cedar Rapids, Iowa. The number one thing entrepreneurs outside of the major financing hubs ask about is how to access capital. My response is always the same: Your job isn't to bring more capital to your local community; it's to build a great company. You know where the capital is, so build something worth investing in, and then do a roadshow.

Practice Locally

Thankfully, as the startup world grows & matures, the number of outlets for pitching increases every month. There are opportunities in most cities to stand up and pitch your idea to your peers or investors. Start by getting out in front of your local community as often as possible. In the Boulder/Denver community, there are a few companies that I see pitch all the time, and those companies have fantastic pitches because they are constantly practicing, getting feedback, and refining.

Look for meetups that focus on pitching such as 1 Million Cups and House of Genius, or simply do a search for startup pitch meetup in your city. During startup weeks or similar events, search and sign up for pitch practices and competitions. If your co-working space is like SoftLayer partner Galvanize, they might have a big member pitch competition or a peer-to-peer practice event. Participate in as many local and regional pitch competitions as you can find. As long as the competitions don't take a piece of equity or require a significant payment to participate—either of which should be very carefully evaluated beforehand—sign up, and compete. This constant exposure to your local market will help spread the word about your company, provide feedback on your pitch, and maybe even score some prizes!

For more advice on your pitch, read my previous post, Advice from the Catalyst Team: Pitching Like George Lucas.

Maximizing Your Startup Roadshow

Now that you've refined your pitch and practiced in front of as many local audiences as possible, it's time to start planning your roadshow. Traveling on a limited budget means you must plan a highly focused trip with a specific goal in mind. Maybe you're traveling from New York City to Philadelphia for a competition, or from Portland to San Francisco for an investor meeting; no matter the reason, it's imperative to maximize your trip. A good roadshow involves getting the absolute most out of your travel budget, and this means booking meetings with potential investors or customers.

For example, while attending StartSLC, I visited with a friend from Colorado, Ryan Angilly from Ramen. Angilly traveled to Salt Lake City to participate in the pitch competition, but he made the most out of his trip by filling his calendar with investor meetings throughout the week. Before his trip, he reached out to his contacts in the startup community in Utah and asked for introductions. After following through with the contacts, he met with investors he would have otherwise never met.

Start by either allocating a budget for travel or identifying the most important pitch competitions in your region or industry. Once you have your trip scheduled, immediately start looking for connections within your network. It's far more effective to say, "I'll be in town the 12th to the 14th; what does your schedule look like?" than a non-specific request such as, “When are you available?” Look for connections with ties to your local community as they are more likely to be helpful and make intros on your behalf. And ask around locally about who has ties to your destination. Get your meetings lined up, and get ready for a whirlwind of pitches on your first ever startup roadshow.

I'll leave you with this final point: In 2014, venture capital firms raised nearly $33 billion, a 62 percent increase over 2013 levels. They'll spend the next few years investing that money in startups. The money is out there, and you need to do a roadshow to find it.

-Rich

February 20, 2015

Create and Deliver Marketing or Transactional Emails

The SoftLayer email delivery service is a highly scalable, cloud-based, email relay solution. In partnership with SendGrid, an email as a service provider, SoftLayer customers are able to create and deliver marketing or transactional emails via the customer portal or SendGrid APIs.

The SoftLayer email delivery service isn’t a full corporate email solution. It’s intended as a simplified method for delivering digital marketing (e.g., newsletters and coupons) and transactional content (e.g., order confirmation, shipping notice, and password reset) to customers.

Architecture

Traditionally, email is first sent through an outbound mail server that’s configured and maintained in-house, which is often costly and difficult to maintain.

With the SoftLayer email delivery service, the process is simplified; the only requirement is a connection to the Internet.

Package Comparison

The following table lists the service levels available to SoftLayer customers. The Free and Basic tiers are suitable for smaller applications with lower volume requirements. The Advanced and Enterprise levels are more suitable for larger applications and customers that require enhanced monitoring and other advanced features. Note that marketing emails are only available in the Advanced and Enterprise tiers.

Getting Started

Use the following steps to sign up for the SoftLayer email delivery service.

  1. Log on to the customer portal.
  2. Click Services, Email Delivery.
  3. Click the Order Email Delivery Service link at the top of the page.
  4. Choose your desired package, and fill out the required information. Remember for marketing emails, you must select either the Advanced or Enterprise packages.

Configuring a Marketing Email

Most of your interaction will be through the vendor portal provided by SendGrid. The following steps outline how to compose and deliver a marketing email to a list of subscribers.

  1. From the SoftLayer customer portal, navigate to Services, Email Delivery Service and click Actions, Access Vendor Portal for your desired account.
  2. Once in the SendGrid portal, click the Marketing Email link.

  1. You’ll be taken to the Marketing Email Dashboard. Click the Create a Sender Address button.
  2. Fill in the required information and click Save.
  3. Navigate back to the Marketing Email Dashboard, and click the Create Recipient List button.
  4. Enter a name for the list in the List Name field. Be sure that it’s something meaningful, such as Residential Customers.

  1. You can either Upload a list of contact emails or Add recipients manually. When adding the recipients manually, you’ll be asked verify the addresses that you enter. Click the Save button when done entering addresses.

  1. Navigate back to the Marketing Email Dashboard and click the Create Marketing Email button.
  2. Enter the title of the email in the Marketing Email Title field. Under Pick a Sender Address, select either a list or select recipients for the email. Choose your content type and how to send the email. Split Test my Marketing Email, under Choose how to send your Marketing Email, is an advanced feature that lets you send different recipients different versions of the same email—sending the different versions helps determine which version is most effective.

  1. Select the list of recipients to whom the email is to be sent and click Save.

  1. Next, select the template for the email. Options include Basic, Design, and My Saved Templates.

  1. Enter your email content. Make sure to provide a message subject.
  2. Review your email, and select when you would like it sent—Send Now, based on a Schedule, or Save As Draft. Click Finish when you’re done, or Save & Exit for a draft.

  1. You will then be brought back to the Marketing Email Dashboard where you can monitor the results of your email campaign.

Setting Up a Transactional Email

The following example shows how to integrate your app with SendGrid to send new users a welcome email. This example makes use of the SendGrid template engine, although it’s not required.

  1. From the SendGrid portal, click the Template Engine button.
  2. Click the Create Template button, enter the Template Name, and click Save.

  1. Design and modify your email and click Save when finished.

  1. Your new template should now be Active and ready to be used by the API.
  2. Click the Apps link in the top navigation bar.

  1. Click the Template Engine link on the right side of the screen.

  1. Take note of the ID of the template you just created.

  1. Use the curl utility to test your email via the SendGrid Web API.
  2. Execute the following to send a test email using your new template.


curl -d 'to=&subject="Test
subject"&text="Test Body"&from=&api_user=;api_key=
&x-smtpapi={"filters":{"templates":{"settings":{"enable":1,"template_id":
"6770c11f-97d5-4be9-8811-c86525799ec9"}}}}' https://api.sendgrid.com/api/mail.send.json

For more information on how the SoftLayer email delivery service can help you get back to your core business, check out this blog post.

-Sean

Worldwide Channel Solutions Architect for SoftLayer, an IBM Company

December 10, 2014

Password Managers: One Password To Rule Them All

From banking to social media to gaming, the amount of accounts we have today is growing out of control. Let’s be honest—it’s easy to use the same password or a variation of the same password for all online accounts, but if a hacker can break one of those passwords, they are one step closer to hacking every account.

Who really has the memory to store all those passwords anyway?

That’s where a password manager can help. It controls access by storing (online or locally) every password in an encrypted file that is only accessible by one strong master password.

When a user wants access to their SoftLayer account for example, the password manager will ask for the master password instead of the SoftLayer account password. It automatically populates the username and password fields and logs in.

Password managers are very convenient, but more importantly they enhance security because of the ability to use longer and harder passwords without worrying about forgetting or writing them down on sticky notes posted to a desktop screen.

Do I need a cross-platform password manager?
Today, most people access the same accounts on desktops, tablets, and mobile devices. If that’s you, then yes, you need a cross-platform solution. These Web-based options require yearly subscriptions upwards of $50 for a single user. The convenience of logging in anywhere might be steep, but the additional features might make it worth it. Password managers like Dashlane, LastPass, 1Password, and mSecure offer:

  • Secure storage of bank cards and any identity cards like driver licenses
  • Password generators
  • Keystroke logger protection
  • Automatic backup
  • Multifactor authentication like biometrics or a token
  • Access to pre-determined contacts in case of emergency or death
  • Team password sharing (the team lead controls the master password for a single account like a FedEx account and grants access via the users individual password manager)

Do I need a locally-based password manager?
If you’re not comfortable storing passwords online or you just use your desktop to access accounts, choose a password manager that encrypts and stores passwords on your PC. This option is the least convenient but most secure. All password managers listed above come in the locally-based option for free or at a fraction of the cross-platform price.

User Error
Although much more secure than not using one, password managers do have some downfalls (that stem from user error). Just like any password, you still need to change your master password regularly, never share passwords with anyone, and once installed, a user should update existing passwords with really hard forgettable passwords or use a password generator for each online account.

And always remember to lock your computer or mobile device when not in use. Although password managers make it harder for hackers to virtually access your accounts, they do not protect against someone physically opening the file.

It’s also a good idea to check settings to ensure that when booting or waking up your device, the password manager requires you to re-enter the password.

Pa$$word1 ain’t cutting it.
If you’re not ready to commit to a password manager, think about the consequences the next time you are prompted to update your password. Adding a “1” to the end of your current password isn’t safe or smart.

We’ve all been there, and committing to a password manager in some cases is expensive and setting one up can be time consuming depending on the amount of accounts, so I understand the hesitation. But it’s worth it for that added layer of protection and security.

-JRL

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

Subscribe to tips-and-tricks