Posts Tagged 'Developer'

November 19, 2015

SoftLayer and Koding join forces to power a Global Virtual Hackathon

This guest blog post is written by Cole Fox, director of partnerships at Koding.

Koding is excited to partner with SoftLayer on its upcoming Global Virtual Hackathon, happening December 12–13, 2015. The event builds on last year’s Hackathon, where more than 60,000 developers participated from all over the world. The winners took home over $35,000 in prizes! This year, we’ve upped the ante to make the event even larger than the last time: the winner will take home a $100,000 grand prize.

“We are working with Koding for this virtual hackathon as part of our commitment to promote open source technology and support the talented community of developers who are dispersed all over the globe,” said Sandy Carter, general manager of Cloud Ecosystem and Developers at IBM. “Cloud-based open source development platforms like Koding make it easier to get software projects started, and hackathons are a great place to show how these kinds of platforms make software development easier and more fun.”

Why a virtual hackathon?
Hackathons are awesome. They allow developers to solve problems in a very short amount of time. The challenge with traditional hackathons is that they require you to be physically present in a room. With more and more of our lives moving online, why be tied to a physical location to solve problems? Virtual hackathons allow talented individuals from all over the world to participate, collaborate, and showcase their skills, regardless of their physical location. Our Global Virtual Hackathon levels the playing field.

Who won last year?
Educational games, especially those that teach programming, were popular to build—and a few actually won! Want to see what the winners built? Click here to check out a fun yet effective game teaching students to program. Learn more about the team of developers and see their code here. Last year, nine winners across three categories took home a prize. To see a list of last year’s winners, see the blog post here.

Tips to be successful and win this year
Here’s some motivation for you: the grand prize is $100,000. (That’s seed capital for your startup idea!)

So how do you win? First and foremost, apply now! Then talk to some friends and maybe even team up. You can also use Koding to find teammates once you’re accepted. Teammates aren’t a requirement but can definitely make for a fun experience and improve your chances of making something amazing.

Once you’re in, get excited! And be sure to start thinking about what you want to build around this year’s themes.

And the 2015 themes are…
Ready to build something and take home $100,000? Here are this year’s themes:

  • Data Visualization
    Data is everywhere, but how can we make sense of it? Infographics and analytics can bring important information to light that wasn’t previously accessible when stuck in a spreadsheet or database. We challenge you to use some of the tools out there to help articulate some insights.
  • Enterprise Productivity
    The workplace can always be improved and companies are willing to pay a lot of money for great solutions. Build an application that helps employees do their jobs better and you could win big.
  • Educational Games
    Last year’s winning team, WunderBruders, created an educational game. But games aren’t just for children. Studies have shown that games not only improve motor skills, but they are also a great way to learn something new.

Wait a second. What is Koding anyway?
In short, Koding is a developer environment as a service. The Koding platform provides you with what you need to move your software development to the cloud. Koding’s cloud-based software development service provides businesses with the ability to formulate the most productive, collaborative, and efficient development workflows. Businesses, both small and large, face three common challenges: on-boarding new team members, workflow efficiency, and knowledge retention. These pain points impact companies across all industries, but for companies involved in software development, these are often the most expensive and critical problems that continue to remain unresolved. Koding was built to tackle these inefficiencies head on. Learn more about Koding for Teams.

Can I use my SoftLayer virtual servers with Koding?
Koding’s technical architecture is very flexible. If you have a SoftLayer virtual server, you can easily connect it to your Koding account. The feature is described in detail here.

Think you can hack it? APPLY NOW!

-Cole Fox

November 17, 2015

The SLayer Standard Vol. 1, No. 20

The week in review. All the IBM Cloud and SoftLayer headlines in one place.

More to know about big data
Our tech evangelist Justin Halsall sat down with Dataconomy to discuss our Big Data Academy, its benefits, and our partnership with Basho. When asked about the motivations behind BDA, he said, “We decided to create a platform that would address professionals from the big data space that are close to the infrastructure and develops that side of the business—taking them on a journey from beginners, through to enthusiast, and finally a practitioner level when it comes to deploying and implementing big data workloads on cloud.”

How can our Big Data Academy help you? Halsall explains that although everyone agrees using big data is necessary in the digital economy, the question of “How?” still lingers. “Our masterclasses, for example, are for those who seek an answer to how can I take advantage of the vast amount of data my organization aggregates? How to optimize that on the technological level? Why computational infrastructure is so important in turning the unstructured data into accurate decisions?”

Read the rest of Justin’s interview here.

Announcing developerWorks Premium
Last week, IBM introduced a new developerWorks subscription program that gives “an all-access pass to cloud-based offerings and services from IBM, allowing developers to go from prototype to production in minutes.” Another benefit of the new program is that it offers “member-only curated tools and resources for IBM Cloud.”

Why would you be interested in the offering? Sandy Carter, general manager of cloud ecosystem and developers at IBM, explained, “We have created a roadmap of premium resources for developers of all levels to grow their skills, build next-gen apps, and connect with the IBM ecosystem. We want to encourage developers and innovation at IBM.”

Find out what’s included in the offering and more here.

Ready? Set? IBM Relay 2015
At IBM Relay 2015, Forrester introduced new research about the growth of customer-centric workloads and the increase of private enterprise clouds. According to Forrester’s findings, “An average of 88 percent of organizations plan to increase the number of applications and systems in which they build or migrate to cloud platforms over the next two years, with customer-focused technology such as customer relationship management (CRM) systems and asset management services as the key drivers.”

John Rymer, vice president and principal analyst at Forrester said, “Technology and products aren't the problem. Culture, organizational structure, and managing that platform are now the biggest limitations." That is where IBM and Bluemix come in, with a goal “to initiate culture change and cloud migration for businesses, and then help companies manage the hybrid cloud architecture once it's there.”

Last week at IBM Relay, two new Bluemix services, Active Deploy and Event Hub, were announced. “The services also comprise parts of Relay, IBM's mechanism for connecting to cloud systems for pushing upgrades and monitoring applications across public, private, and hybrid clouds as well as middleware, mobile, and Internet of Things (IoT) applications.”

Get more details on IBM Relay and Forrester’s new research here.


February 19, 2015

Get Ready to Connect with SoftLayer – IBM InterConnect 2015

This year IBM is taking three amazing conferences and merging them into IBM InterConnect. With all the activity going on over the five days, the search for SoftLayer can be a serious undertaking. So spend more time enjoying the conference and less time flipping through your event guide. Here’s a rundown of everything you need to know to keep up with us.

SLayer Sessions at IBM InterConnect

SLayers are leading sessions all over InterConnect. We've cut out all the noise so it’s easy for you to slip our sessions into your conference agenda. What do you need to know? You’ll find it here.

DRD-5144A: Create an Auto-Scaling Server Deployment Using the SoftLayer API, Docker and SaltStack Lab
Phil Jackson, Lead Technology Evangelist (+ other speakers)
Monday, February 23 @ 1:00pm — MGM Grand, Room 304
CIS-5363A: SoftLayer 101 Plus: Understanding How to Build and Scale on the World’s Most Powerful IaaS Platform
Marc Jones, CTO
Monday, February 23 @ 2:00pm — Mandalay Bay, Breakers A
CIS-3427A: SoftLayer Storage Services Overview
Michael Fork, Product Manager, Strategy
Monday, February 23 @ 3:00pm — Mandalay Bay Cloud Infrastructure Engagement Center
SoftLayer’s Experts and Edibles Reception
Phil Jackson, Lead Technology Evangelist; Chris Gallo, Technology Evangelist; Jack Beech, VP of Business Development; Harold Smith, Director of Sales Engineering; Jerry Gutierrez, Sales Engineer
Monday, February 23 @ 4:30pm — Mandalay Bay Eco D Cafe, Booth 120, Solutions Center
CIS-5372A: Tips, Tricks and Planning for Building an Enterprise-Grade Cloud
Harold Hannon, Sr. Software Architect
Tuesday, February 24 @ 9:30am — Mandalay Bay, Breakers A
CIT-5983A: Meet the Experts on Hybrid Cloud with IBM Systems and SoftLayer
Michael Fork, Product Manager, Strategy & Frank Degilio, IBM
Tuesday, February 24 @ 5:00pm — Mandalay Bay, Meet the Experts Forum #3
CDP-3464A: SoftLayer Object Storage Deep-Dive
Michael Fork, Product Manager, Strategy & Ann Corrano, IBM
Wednesday, February 25 @ 8:00am — Mandalay Bay, Breakers I
CIS-5375A: Single Serving Servers: An In-Depth Look at Making Your Infrastructure Disposable
Christopher Gallo, Developer Advocate
Wednesday, February 25th @ 9:30am — Mandalay Bay, Breakers A
DRD-3765A: Using the SoftLayer API to Create and Manage Your Cloud Lab
Phil Jackson, Lead Technology Evangelist (+ other speakers)
Wednesday, February 25 @ 11:00am — MGM Grand, Room 304
CIS-5379A: Application Development on the Cloud: Picking the Right IaaS Platform
Phil Jackson, Lead Technology Evangelist
Wednesday, February 25th @ 2:00pm — Mandalay Bay, Breakers A
CGS-6100A: Day 3 General Session: A New Way Forward
Marc Jones, CTO (+ other speakers)
Wednesday, February 25th @ 3:30pm — Mandalay Bay Ballroom
CIS-5373A: How to Leverage Big Data Solutions on SoftLayer’s Infrastructure-as-a-Service Platform
Harold Hannon, Sr. Software Architect
Wednesday, February 25th @ 5:30pm — Mandalay Bay, Breakers A


If you’re looking for developer-focused topics within IBM Interconnect, we’ve got you covered. dev@InterConnect is a developer’s two-day dreamland—from a slate of developer-focused sessions to firsthand training, and even a Developer Playground where you’ll get to play with some of the hottest tech toys. As an added bonus, you will find the Server Challenge there too. Try your hand at re-racking the servers and plugging in the cables—fastest time wins a MacBook Air.

In between all of that, make a note to stop at these SLayer sessions:

DEV-6652A: Developing with Softlayer
Phil Jackson, Lead Technology Evangelist
Tuesday, February 24 @ 10:00am — MGM Grand, Room 319
DEV-6654A: Bring Agile to Deployments
Christopher Gallo, Developer Advocate
Tuesday, February 24 @ 10:45am — MGM Grand, Room 319
DEV-6653A: Software for the Cloud with the SoftLayer Cloud
Harold Hannon, Sr. Software Architect
Tuesday, February 24 @ 11:30am — MGM Grand, Room 319

End dev@InterConnect with a bang at the Gaming Bash we are sponsoring with Cloudant. Join us for bites, beverages, and be ready to game. Prizes and swag will be up for grabs; you just have to put your skills to the test.

Tuesday, February 24, 2015
05:30 PM - 07:30 PM
MGM Grand, Conference Center Premier Ballroom 312/317

IBM Cloud Experience Zone

If you find yourself with some free time at Mandalay Bay, swing into the Solution EXPO and make a b-line for the IBM Cloud Experience Zone. That’s where you’ll find your resource for all things SoftLayer. If you have questions about SoftLayer, our SLayers will be there to answer them. If you just want to see what we’re all about, we’ll be there running live demos.

Rock @ IBM InterConnect

After a packed conference, we hope you’ll be ready to rock! IBM InterConnect and Rocket are giving attendees a VIP worthy event with a performance from Aerosmith.

Go to the MGM Grand Garden Arena on Wednesday evening to party from 7:45–10:30pm. The event is included for InterConnect and dev@InterConnect attendees. Just don’t forget to bring your badge; it’s your ticket in!

We look forward to seeing you next week in Las Vegas!


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: “”;
    #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 */

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


June 3, 2014

My 5 Favorite Sublime Text 2 Plugins

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

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

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

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

1. BracketHighlighter

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

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

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

2. DocBlockr

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

By typing this:

/** (Press Enter)

The plugin automatically returns this:


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

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

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

And, it'll become:

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

function myFunction (var1, var2) { }

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

/** (Press Enter)
myVar = 10

The plugin will fill out the documentation block like this:

*[myVar description]
* @type {Number}

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

3. Emmet (previously known as Zen Coding)

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

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


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


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


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


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


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

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

5. SideBarEnhancements

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

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


November 14, 2013

Enhancing Usability by Building User Confidence

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

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

1. Keep the user in a familiar context.

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

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

2. Reassure the user with immediate feedback.

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

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

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

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

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

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

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

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

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

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


April 10, 2013

Plivo: Tech Partner Spotlight

We invite each of our featured SoftLayer Tech Marketplace Partners to contribute a guest post to the SoftLayer Blog, and this week, we're happy to welcome Mike Lauricella from Plivo. Plivo is an open communications and messaging platform with advanced features, simple APIs, easy management and volume pricing.

Company Website:
Tech Partners Marketplace:

Bridging the Gap Between the Web and Telephony

Businesses face a fundamental challenge in the worlds of telephony and messaging: Those worlds move too slowly, require too much telecom knowledge and take too long to adopt. As a result, developers often forgo phone and SMS functionality in their applications because the learning curves are so steep, and the dated architecture seems like a foreign language. Over the last twenty years, the web has evolved a lot faster than telephony, and that momentum only widens the gap between the "old" telecom world and the "new" Internet world. Plivo was created to bridge that gap and make telephony easy for developers to understand and incorporate into their applications with simple tools and APIs.

I could bore you to tears by describing the ins and outs of what we've learned about telephony and telecom since Plivo was founded, but I'd rather show off some of the noteworthy ways our customers have incorporated Plivo in their own businesses. After all, seeing those real-world applications is much more revealing about what Plivo does than any description of the nuts and bolts of our platform, right?

Conferencing Solution
The purest use-cases for Plivo are when our customers can simply leverage powerful telephony functionality. A perfect example is a conferencing solution one of our customers created to host large-scale conferences with up to 200 participants. The company integrated the solution into their product and CRM so that sales reps and customers could jump on conference calls quickly. With that integration, the executive management team can keep track of all kinds of information about the calls ... whether they're looking to find which calls resulted in closed sales or they just want to see the average duration of a conference call for a given time frame.

Call Tracking
Beyond facilitate conference calls quickly and seamlessly, many businesses have started using Plivo's integration to incorporate call tracking statistics in their environments. Call tracking is big business because information about who called what number, when they called, how long they talked and the result of the call (sale, no sale, follow up) can determine whether the appropriate interaction has taken place with prospects or customers.

Two Factor Authentication
With ever-increasing concerns about security online, we've seen a huge uptick in developers that come to Plivo for help with two factor authentication for web services. To ensure that a new site registrant is a real person who has provided a valid phone number (to help cut down on potential fraud), they use Plivo to send text messages with verification codes to those new registrant.

Mass Alert Messaging
Because emergencies can happen at any time, our customers have enlisted Plivo's functionality to send out mass alerts via phone calls and SMS messages when their customers are affected by an issue and need to be contacted. These voice and text messages can be sent quickly and easily with our automated tools, and while no one ever wants to deal with an emergency, having a solid communication lifeline provides some peace of mind.

An emerging new standard for communications is WebRTC — open project that enables web browsers with Real-Time Communications (RTC) capabilities. WebRTC make communications a feature of the Web without plugins or complex SIP clients. Plivo already supports WebRTC, and even though the project is relatively young, it's already being used in some amazing applications.

These use-cases are only the tip of the iceberg when it comes to how our customers are innovating on our platform, but I hope it helps paint a picture of the kinds of functionality Plivo enables simply and quickly. If you've been itching to incorporate telephony into your application, before you spending hours of your life poring over complex telecom architecture requirements, head over to to see how easy we can make your life. We offer free developer accounts where you can start to make calls to other Plivo users and other SIP endpoints immediately, and we'd love to chat with you about how you can leverage Plivo to make your applications communicate.

If you have any questions, feel free to drop us a note at, and we'll get back to you with answers.

-Mike Lauricella, Plivo

This guest blog series highlights companies in SoftLayer's Technology Partners Marketplace.
These Partners have built their businesses on the SoftLayer Platform, and we're excited for them to tell their stories. New Partners will be added to the Marketplace each month, so stay tuned for many more come.
November 6, 2012

Tips and Tricks - Pure CSS Sticky Footers

By now, if you've seen my other blog posts, you know that I'm fascinated with how much JavaScript has evolved and how much you can do with jQuery these days. I'm an advocate of working smarter, not harder, and that maxim knows no coding language limits. In this post, I want to share a pure CSS solution that allows for "sticky" footers on a web page. In comparing several different techniques to present this functionality, I found that all of the other routes were overkill when it came to processing time and resource usage.

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.

This, by far, is one of my *favorite* things to do. It makes the web layout so much more appealing and creates a very professional feel. I ended up kicking myself the very first time I tried to add this functionality to a project early in my career (ten years ago ... already!?) when I found out just how easy it was. I take solace in knowing that I'm not alone, though ... A quick search for "footer stick bottom" still yields quite a few results from fellow developers who are wrestling with the same frustrating experience I did. If you're in that boat, fear no more! We're going to your footers in shape in a snap.

Here's a diagram of the problem:

CSS Footer

Unfortunately, a lot of people try to handle it with setting a fixed height to the content which would push the footer down. This may work when YOU view it, but there are several different browser window heights, resolutions and variables that make this an *extremely* unreliable solution (notice the emphasis on the word "extremely" ... this basically means "don't do it").

We need a dynamic solution that is able to adapt on the fly to the height of a user's browser window regardless if the resize it, have Firebug open, use a unique resolution or just have a really, really weird browser!

Let's take a look at what the end results should look like:

CSS Footer

To make this happen, let's get our HTML structure in place first:

<div id="page">
      <div id="header"> </div>
      <div id="main"> </div>
      <div id="footer"> </div>

It's pretty simple so far ... Just a skeleton of a web page. The page div contains ALL elements and is immediately below the

tags in the page code hierarchy. The header div is going to be our top content, the main div will include all of our content, and the footer div is all of our copyrights and footer links.

Let's start by coding the CSS for the full page:

Html, body {
      Padding: 0;
      Margin: 0;
      Height: 100%;

Adding a 100% height allows us to set the height of the main div later. The height of a div can only be as tall as the parent element encasing it. Now let's see how the rest of our ids are styled:

#page {
      Min-height: 100%;
#main {
      Padding-bottom: 75px;   /* This value is the height of your footer */
#footer {
      Position: absolute;
      Width: 100%;
      Bottom: 0;
      Height: 75px;  /* This value is the height of your footer */

These rules position the footer "absolutely" at the bottom of the page, and because we set #page to min-height: 100%, it ensures that #main is exactly the height of the browser's viewing space. One of the best things about this little trick is that it's compliant with all major current browsers — including Firefox, Chrome, Safari *AND* Internet Explorer (after a little tweak). 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 */

If the user does not have a modern, popular browser, it's still okay! Though their old browser won't detect the magic we've done here, it'll fail gracefully, and the footer will be positioned directly under the content, as it would have been without our little CSS trick.

I can't finish this blog without mentioning my FAVORITE perk of this trick: Should you not have a specially designed mobile version of your site, this trick even works on smart phones!


September 26, 2012

Tips and Tricks - jQuery Lazy Load Plugin

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:

Lazy Load Illustration

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?


August 23, 2011

SOAP API Application Development 101

Simple Object Access Protocol (SOAP) is built on server-to-server remote procedure calls over HTTP. The data is formatted as XML; this means secure, well formatted data will be sent and received from SoftLayer's API. This may take a little more time to set up than the REST API but it can be more scalable as you programmatically interface with it. SOAP's ability to tunnel through existing protocols such as HTTP and innate ability to work in an object-oriented structure make it an excellent choice for interaction with the SoftLayer API.

This post gets pretty technical and detailed, so it might not appeal to our entire audience. If you've always wondered how to get started with SOAP API development, this post might be a good jumping-off point.

Before you start playing with the SoftLayer SOAP API, you will need to find your API authentication token. Go into your portal account, and click the "Manage API Access" link from the API page under the Support tab. At the bottom of the page you'll see a drop down menu for you to "Generate a new API access key" for a user. After you select a user and click the "Generate API Key" button, you will see your username and your API key. Copy this API key, as you'll need it to send commands to SoftLayer's API.

In PHP 5.0+ there are built in classes to deal with SOAP calls. This allows us to quickly create an object oriented, server side application for handling SOAP requests to SoftLayer's API. This tutorial is going to focus on PHP 5.1+ as the server side language for making SOAP function calls. If you haven’t already, you will need to install the soap client for php, here is a link with directions.

Model View Controller

Model-View-Controller or MVC is a software architecture commonly used in web development. This architecture simply provides separation between a data abstraction layer (model), the business logic (controller), and the resulting output and user interface (view). Below, I will describe each part of our MVC "hello world" web application and dissect the code so that you can understand each line.

To keep this entry a little smaller, the code snippits I reference will be posted on their own page: SOAP API Code Examples. Protip: Open the code snippit page in another window so you can seamlessly jump between this page and the code it's referencing.

The first entry on the API Code Examples page is "The Call Class," a custom class for making basic SOAP calls to SoftLayer's API. This class represents our model: The SOAP API Call. When building a model, you need to think about what properties that model has, for instance, a model of a person might have the properties: first name, height, weight, etc. Once you have properties, you need to create methods that use those properties.

Methods are verbs; they describe what a model can do. Our "person" model might have the methods: run, walk, stand, etc. Models need to be self-sustaining, that means we need to be able to set and get a property from multiple places without them getting jumbled up, so each model will have a "set" and "get" method for each of its properties. A model is a template for an object, and when you store a model in a variable you are instantiating an instance of that model, and the variable is the instantiated object.

  • Properties and Permissions
    Our model has these properties: username, password (apiKey), service, method, initialization parameters, the service's WSDL, SoftLayer's type namespace, the SOAP API client object, options for instantiating that client, and a response value. The SOAP API client object is built into php 5.1+ (take a look at the “PHP” section above), as such, our model will instantiate a SOAP API object and use it to communicate to SoftLayer's SOAP API.

    Each of our methods and properties are declared with certain permissions (protected, private, or public), these set whether or not outside functions or extended classes can have access to these properties or methods. I "set" things using the "$this" variable, $this represents the immediate class that the method belongs to. I also use the arrow operator (->), which accesses a property or method (to the right of the arrow) that belongs to $this (or anything to the left of the arrow). I gave as many of the properties default values as I could, this way when we instantiate our model we have a fully fleshed out object without much work, this comes in handy if you are instantiating many different objects at once.

  • Methods
    I like to separate my methods into 4 different groups: Constructors, Actions, Sets, and Gets:
    • Sets and Gets
      Sets and Gets simply provide a place within the model to set and get properties of that model. This is a standard of object oriented programing and provides the model with a good bit of scalability. Rather than accessing the property itself, always refer to the function that gets or sets the property. This can prevent you from accidentally changing value of the property when you are trying to access it. Lines 99 to the end of our call are where the sets and gets are located.

    • Constructors
      Constructors are methods dedicated to setting options in the model, lines 23-62 of the call model are our constructors. The beauty of these three functions is that they can be copied into any model to perform the same function, just make sure you keep to the Zend coding standards.

      First, let’s take a look at the __construct method on line 24. This is a special magic php method that always runs immediately when the model is instantiated. We don’t want to actually process anything in this method because if we want to use the default object we will not be passing any options to it, and unnecessary processing will slow response times. We pass the options in an array called Setup, notice that I am using type hinting and default parameters when declaring the function, this way I don’t have to pass anything to model when instantiating. If values were passed in the $Setup variable (which must be an array), then we will run the “setOptions” method.

      Now take a look at the setOptions method on line 31. This method will search the model for a set method which matches the option passed in the $setup variable using the built in get_class_methods function. It then passes the value and name of that option to another magic method, the __set method.

      Finally, let’s take a look at the __set and __get methods on lines 45 and 54. These methods are used to create a kind of shorthand access to properties within the model, this is called overloading. Overloading allows the controller to access properties quicker and more efficiently.

    • Actions
      Actions are the traditional verbs that I mentioned earlier; they are the “run”, “walk”, “jump”, and “climb” of our person model. We have 2 actions in our model, the response action and the createHeaders action.

      The createHeaders action creates the SOAP headers that we will pass to the SoftLayer API; this is the most complicated method in the model. Understanding how SOAP is formed and how to get the correct output from php is the key to access SoftLayer’s API. On line 77, you will see an array called Headers, this will store the headers that we are about to make so that we can easily pass them along to the API Client.

      First we will need to create the initial headers to communicate with SoftLayer’s API. This is what they should look like:

      <authenticate xsi:type="slt:authenticate" xmlns:slt="">
          <username xsi:type="xsd:string">MY_USERNAME</username>
          <apiKey xsi:type="xsd:string">MY_API_ACCESS_KEY</apiKey>
      <SoftLayer_API_METHODInitParameters xsi:type="v3:SoftLayer_API_METHODInitParameters" >
          <id xsi:type="xsd:int">INIT_PERAMETER</id>

      In order to build this we will need a few saved properties from our instantiated object: our api username, api key, the service, initialization parameters, and the SoftLayer API type namespace. The api username and key will need to be set by the controller, or you can add in yours to the model to use as a default. I will store mine in a separate file and include it in the controller, but on a production server you might want to store this info in a database and create a "user" model.

      First, we instantiate SoapVar objects for each authentication node that we need. Then we store the SoapVar objects in an array and create a new SoapVar object for the "authenticate" node. The data for the "authenticate" node is the array, and the encoding is type SOAP_ENC_OBJECT. Understanding how to nest SoapVar objects is the key to creating well formed SOAP in PHP. Finally, we instantiate a new SoapHeader object and append that to the Headers array. The second header we create and add to the Headers array is for initialization parameters. These are needed to run certain methods within SoftLayer’s API; they essentially identify objects within your account. The final command in this method (__setSoapHeaders) is the magical PHP method that saves the headers into our SoapClient object. Now take a look at how I access the method; because I have stored the SoapClient object as a property of the current class I can use the arrow operator to access methods of that class through the $_client property of our class, or the getClient() method of our class which returns the client.

      The Response method is the action which actually contacts SoftLayer’s API and sends our SOAP request. Take a look at how I tell PHP that the string stored in our $_method property is actually a method of our $_client property by adding parenthesis to the end of the $Method variable on line 71.

The view is what the user interprets, this is where we present our information and create a basic layout for the web page. Take a look at "The View" section on SOAP API Code Examples. Here I create a basic webpage layout, display output information from the controller, and create a form for sending requests to the controller. Notice that the View is a mixture of HTML and PHP, so make sure to name it view.php that way the server knows to process the php before sending it to the client.

The controller separates user interaction from business logic. It accepts information from the user and formats it for the model. It also receives information from the model and sends it to the view. Take a look at "The Controller" section on SOAP API Code Examples. I accept variables posted from the view and store them in an array to send to the model on lines 6-11. I then instantiate the $Call object with the parameters specified in the $Setup array, and store the response from the Response method as $Result in line 17 for use by the view.

Have Fun!
Although this tutorial seems to cover many different things, this just opens up the basic utilities of SoftLayer's API. You should now have a working View to enter information and see what kind of data you will receive. The first service and method you should try is the SoftLayer_Account service and the getObject method. This will return your account information. Then try the SoftLayer_Account service and the getHardware method; it will return all of the information for all of your servers. Take the IDs from those servers and try out the SoftLayer_Hardware_Server service and the getObject method with that id as the Init property.

More examples to try: SoftLayer Account, SoftLayer DNS Domain, SoftLayer Hardware Server. Once you get the hang of it, try adding Object Masks and Result Limits to your model.

Have Fun!


Subscribe to developer