Development Posts

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

January 27, 2015

Hello, IBM Bluemix!

Developers, if you'd prefer to focus on building new applications instead of customizing your own unique cloud infrastructure, IBM Bluemix provides building blocks to rapidly develop and deploy applications on the Platform as a Service (PaaS) level to make life easier for you. It’s an ecosystem of services based on Cloud Foundry, an open source project designed to make deploying and scaling an application as simple as possible. Leveraging an existing project like this is a large part of what makes Bluemix so easy to use.

Bluemix integrates with Jazz, IBM’s DevOps service, to help manage code, plan versions and release, and actually push code to production. You can still use it with your github projects, so no worries there.

And as a SoftLayer customer (or potential customer), you can rest assured that Bluemix projects can run on SoftLayer’s hardware and network.

Core Ideas

The Application
This is your code. Bluemix comes with a number of predefined buildpacks to get your language of choice up and running quickly, but you will still need to actually develop your application. Bluemix hasn’t solved that problem yet.
Buildpacks
A buildpack is a collection of scripts designed to set up your container and all of the application dependencies. If Bluemix doesn’t have a buildpack that suits your needs, you can always create your own. Extending a buildpack is pretty easy. Simply clone an existing one to use as a base, make your changes, commit it to your github repo, and then tell Bluemix about it so it can build your application properly.
Services
Bluemix has a long list of services you can bind to your application. Instead of making a MySQL server yourself, you can just bind the MySQL service to your application and start coding. Along with many of the standard services expected from a CloudFoundry project, there are also some IBM specific ones, like Watson as a service. While I haven’t had the time to learn about Watson personally, everyone I talk to says it’s a rather neat thing to have on your application.

Getting Started

I recommend reading this tutorial which will get you to a nice “hello world” application. Overall I found that going from “I have no idea what Bluemix is” to “I’ve created my own Bluemix application!” to be a rather pleasant experience.

Creating your first Bluemix project is only a few clicks away. A Bluemix 30 day free trial should give you plenty of time to get an idea if Bluemix is the right fit for you.

Bluemix is absolutely worth checking out. So, what are you waiting for? Give it a go!

- Chris

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 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 16, 2014

#T4 – Tips and Tricks–jQuery Select2

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

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

Turn your drop-down menu from this:
Option Select

To this:

Pretty Option Select

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

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

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

-Cassandra

September 24, 2014

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

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

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

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

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

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

The old (4 and below) way:

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

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

The new HTML5 way:

<!DOCTYPE html>

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

II. Editable content WITHOUT JavaScript!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-Cassandra

September 16, 2014

CSS3 Tips and Tricks – Generated Content Without jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

Now you should have something that looks like this:

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

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

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

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

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

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

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

-Cassandra

June 5, 2014

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-Lee

June 3, 2014

My 5 Favorite Sublime Text 2 Plugins

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

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

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

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

1. BracketHighlighter

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

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

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

2. DocBlockr

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

By typing this:

/** (Press Enter)

The plugin automatically returns this:

/**
*
*/

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

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

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

And, it'll become:

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

function myFunction (var1, var2) { }

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

/** (Press Enter)
myVar = 10

The plugin will fill out the documentation block like this:

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

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

3. Emmet (previously known as Zen Coding)

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

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

div>ul>li

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

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

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

div>ul>li*3

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

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

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

4. SFTP

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

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

5. SideBarEnhancements

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

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

-Cassandra

Subscribe to development