<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SoftLayer Blog &#187; guide</title>
	<atom:link href="http://blog.softlayer.com/tag/guide/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.softlayer.com</link>
	<description>A Behind the Scenes Look at the Best Hosting Provider in the World</description>
	<lastBuildDate>Wed, 15 May 2013 15:33:34 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>iptables Tips and Tricks: APF (Advanced Policy Firewall) Configuration</title>
		<link>http://blog.softlayer.com/2013/iptables-tips-and-tricks-apf-advanced-policy-firewall-configuration/</link>
		<comments>http://blog.softlayer.com/2013/iptables-tips-and-tricks-apf-advanced-policy-firewall-configuration/#comments</comments>
		<pubDate>Tue, 29 Jan 2013 22:40:14 +0000</pubDate>
		<dc:creator>Mark Ridlen</dc:creator>
				<category><![CDATA[SoftLayer]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[administration]]></category>
		<category><![CDATA[allow]]></category>
		<category><![CDATA[APF]]></category>
		<category><![CDATA[configuration]]></category>
		<category><![CDATA[deny]]></category>
		<category><![CDATA[firewall]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[iptables]]></category>
		<category><![CDATA[management]]></category>
		<category><![CDATA[policy]]></category>
		<category><![CDATA[ports]]></category>
		<category><![CDATA[rules]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[traffic]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=10543</guid>
		<description><![CDATA[Let&#8217;s talk about APF. APF &#8212; Advanced Policy Firewall &#8212; is a policy-based iptables firewall system that provides simple, powerful control over your day-to-day server security. It might seem intimidating to be faced with all of the features and configuration tools in APF, but this blog should put your fears to rest. APF is an [...]]]></description>
			<content:encoded><![CDATA[<p>Let&#8217;s talk about APF. APF &mdash; <a href="http://www.rfxn.com/projects/advanced-policy-firewall/">Advanced Policy Firewall</a> &mdash; is a policy-based iptables firewall system that provides simple, powerful control over your day-to-day server security. It might seem intimidating to be faced with all of the features and configuration tools in APF, but this blog should put your fears to rest. </p>
<p>APF is an iptables wrapper that works alongside iptables and extends its functionality. I personally don&#8217;t use iptables wrappers, but I have a lot of experience with them, and I&#8217;ve seen that they <em>do</em> offer some additional features that streamline policy management. For example, by employing APF, you&#8217;ll get several simple on/off toggles (set via configuration files) that make some complex iptables configurations available without extensive coding requirements. The flip-side of a wrapper&#8217;s simplicity is that you aren&#8217;t directly in control of the iptables commands, so if something breaks it might take longer to diagnose and repair. Before you add a wrapper like APF, be sure that you know what you are getting into. Here are a few points to consider:</p>
<ul>
<li>Make sure that what you&#8217;re looking to use adds a feature you need but cannot easily incorporate with iptables on its own.</li>
<li>You need to know how to effectively enable and disable the iptables wrapper (the correct way &#8230; read the manual!), and you should always have a trusted failsafe iptables ruleset handy in the unfortunate event that something goes horribly wrong and you need to disable the wrapper.
<li>Learn about the basic configurations and rule changes you can apply via the command line. You&#8217;ll need to understand the way your wrapper takes rules because it may differ from the way iptables handles rules.</li>
<li>You can&#8217;t manually configure your iptables rules once you have your wrapper in place (or at least you <em>shouldn&#8217;t</em>).</li>
<li>Be sure to know how to access your server via the IPMI management console so that if you completely lock yourself out beyond repair, you can get back in. You might even go so far as to have a script or set of instructions ready for tech support to run, in the event that you can&#8217;t get in via the management console.</li>
</ul>
<p><strong>TL;DR: Have a Band-Aid ready!</strong></p>
<h3>APF Configuration</h3>
<p>Now that you have been sufficiently advised about the potential challenges of using a wrapper (and you&#8217;ve got your Band-Aid ready), we can check out some of the useful APF rules that make iptables administration a lot easier. Most of the configuration for APF is in <code>conf.apf</code>. This file handles the default behavior, but not necessarily the specific blocking rules, and when we make any changes to the configuration, we&#8217;ll need to restart the APF service for the changes to take effect.</p>
<p>Let&#8217;s jump into <code>conf.apf</code> and break down what we see. The first code snippit is fairly self-explanatory. It&#8217;s another way to make sure you <a href="http://blog.softlayer.com/2012/iptables-tips-and-tricks-not-locking-yourself-out/">don&#8217;t lock yourself out</a> of your server as you are making configuration changes and testing them:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># !!! Do not leave set to (1) !!!</span>
<span style="color: #666666; font-style: italic;"># When set to enabled; 5 minute cronjob is set to stop the firewall. Set</span>
<span style="color: #666666; font-style: italic;"># this off (0) when firewall is determined to be operating as desired.</span>
<span style="color: #007800;">DEVEL_MODE</span>=<span style="color: #ff0000;">&quot;1&quot;</span></pre></div></div>

<p>The next configuration options we&#8217;ll look at are where you can make quick high-level changes if you find that legitimate traffic is being blocked and you want to make APF a little more lenient:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># This controls the amount of violation hits an address must have before it</span>
<span style="color: #666666; font-style: italic;"># is blocked. It is a good idea to keep this very low to prevent evasive</span>
<span style="color: #666666; font-style: italic;"># measures. The default is 0 or 1, meaning instant block on first violation.</span>
<span style="color: #007800;">RAB_HITCOUNT</span>=<span style="color: #ff0000;">&quot;1&quot;</span>
&nbsp;
<span style="color: #666666; font-style: italic;"># This is the amount of time (in seconds) that an address gets blocked for if</span>
<span style="color: #666666; font-style: italic;"># a violation is triggered, the default is 300s (5 minutes).</span>
<span style="color: #007800;">RAB_TIMER</span>=<span style="color: #ff0000;">&quot;300&quot;</span>
<span style="color: #666666; font-style: italic;"># This allows RAB to 'trip' the block timer back to 0 seconds if an address</span>
<span style="color: #666666; font-style: italic;"># attempts ANY subsiquent communication while still on the inital block period.</span>
<span style="color: #007800;">RAB_TRIP</span>=<span style="color: #ff0000;">&quot;1&quot;</span>
&nbsp;
<span style="color: #666666; font-style: italic;"># This controls if the firewall should log all violation hits from an address.</span>
<span style="color: #666666; font-style: italic;"># The use of LOG_DROP variable set to 1 will override this to force logging.</span>
<span style="color: #007800;">RAB_LOG_HIT</span>=<span style="color: #ff0000;">&quot;1&quot;</span>
&nbsp;
<span style="color: #666666; font-style: italic;"># This controls if the firewall should log all subsiqent traffic from an address</span>
<span style="color: #666666; font-style: italic;"># that is already blocked for a violation hit, this can generate allot of logs.</span>
<span style="color: #666666; font-style: italic;"># The use of LOG_DROP variable set to 1 will override this to force logging.</span>
<span style="color: #007800;">RAB_LOG_TRIP</span>=<span style="color: #ff0000;">&quot;0&quot;</span></pre></div></div>

<p>Next, we have an option to adjust ICMP flood protection. This protection should be useful against some forms of DoS attacks, and the associated rules show up in your INPUT chain:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># Set a reasonable packet/time ratio for ICMP packets, exceeding this flow</span>
<span style="color: #666666; font-style: italic;"># will result in dropped ICMP packets. Supported values are in the form of:</span>
<span style="color: #666666; font-style: italic;"># pkt/s (packets/seconds), pkt/m (packets/minutes)</span>
<span style="color: #666666; font-style: italic;"># Set value to 0 for unlimited, anything above is enabled.</span>
<span style="color: #007800;">ICMP_LIM</span>=<span style="color: #ff0000;">&quot;30/s&quot;</span></pre></div></div>

<p>If you wanted to add more ports to block for p2p traffic (which will show up in the P2P chain), you&#8217;ll update this code:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># A common set of known Peer-To-Peer (p2p) protocol ports that are often</span>
<span style="color: #666666; font-style: italic;"># considered undesirable traffic on public Internet servers. These ports</span>
<span style="color: #666666; font-style: italic;"># are also often abused on web hosting servers where clients upload p2p</span>
<span style="color: #666666; font-style: italic;"># client agents for the purpose of distributing or downloading pirated media.</span>
<span style="color: #666666; font-style: italic;"># Format is comma separated for single ports and an underscore separator for</span>
<span style="color: #666666; font-style: italic;"># ranges (4660_4678).</span>
<span style="color: #007800;">BLK_P2P_PORTS</span>=<span style="color: #ff0000;">&quot;1214,2323,4660_4678,6257,6699,6346,6347,6881_6889,6346,7778&quot;</span></pre></div></div>

<p>The next few lines let you designate the ports that you want to have closed at all times. They will be blocked for INPUT and OUTPUT chains:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># These are common Internet service ports that are understood in the wild</span>
<span style="color: #666666; font-style: italic;"># services you would not want logged under normal circumstances. All ports</span>
<span style="color: #666666; font-style: italic;"># that are defined here will be implicitly dropped with no logging for</span>
<span style="color: #666666; font-style: italic;"># TCP/UDP traffic inbound or outbound. Format is comma separated for single</span>
<span style="color: #666666; font-style: italic;"># ports and an underscore separator for ranges (135_139).</span>
<span style="color: #007800;">BLK_PORTS</span>=<span style="color: #ff0000;">&quot;135_139,111,513,520,445,1433,1434,1234,1524,3127&quot;</span></pre></div></div>

<p>The next important section to look at deals with conntrack. If you get &#8220;conntrack full&#8221; errors, this is where you&#8217;d increase the allowed connections. It&#8217;s not uncommon to need more connections than the default, so if you need to adjust that value, you&#8217;d do it here:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># This is the maximum number of &quot;sessions&quot; (connection tracking entries) that</span>
<span style="color: #666666; font-style: italic;"># can be handled simultaneously by the firewall in kernel memory. Increasing</span>
<span style="color: #666666; font-style: italic;"># this value too high will simply waste memory - setting it too low may result</span>
<span style="color: #666666; font-style: italic;"># in some or all connections being refused, in particular during denial of</span>
<span style="color: #666666; font-style: italic;"># service attacks.</span>
<span style="color: #007800;">SYSCTL_CONNTRACK</span>=<span style="color: #ff0000;">&quot;65536&quot;</span></pre></div></div>

<p>We&#8217;ve talked about the ports we want closed at all times, so it only makes sense that we&#8217;d specify which ports we want open for all interfaces:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># Common inbound (ingress) TCP ports</span>
<span style="color: #007800;">IG_TCP_CPORTS</span>=<span style="color: #ff0000;">&quot;22&quot;</span>
<span style="color: #666666; font-style: italic;"># Common inbound (ingress) UDP ports</span>
<span style="color: #007800;">IG_UDP_CPORTS</span>=<span style="color: #ff0000;">&quot;&quot;</span>
<span style="color: #666666; font-style: italic;"># Common outbound (egress) TCP ports</span>
<span style="color: #007800;">EG_TCP_CPORTS</span>=<span style="color: #ff0000;">&quot;21,25,80,443,43&quot;</span>
<span style="color: #666666; font-style: italic;"># Common outbound (egress) UDP ports</span>
<span style="color: #007800;">EG_UDP_CPORTS</span>=<span style="color: #ff0000;">&quot;20,21,53&quot;</span></pre></div></div>

<p>And when we want a special port allowance for specific users, we can declare it easily. For example, if we want port 22 open for user ID 0, we&#8217;d use this code:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># Allow outbound access to destination port 22 for uid 0</span>
<span style="color: #007800;">EG_TCP_UID</span>=<span style="color: #ff0000;">&quot;0:22&quot;</span></pre></div></div>

<p>The next few sections on <code>Remote Rule Imports</code> and <code>Global Trust</code> are a little more specialized, and I encourage you to read a little more about them (since there&#8217;s so much to them and not enough space to cover them here on the blog). An important feature of APF is that it imports block lists from outside sources to keep you safe from some attackers, so the <code>Remote Rule Imports</code> can prove to be very useful. The <code>Global Trust</code> section is incredibly useful for multi-server deployments of APF. Here, you can set up your global allow/block lists and have them all pull from a central location so that you can make a single update to the source and have the update propogated to all servers in your configuration. These changes are synced to the <code>glob_allow/deny.rules</code> files, and they will be downloaded (and overwritten) on a regular basis from your specified source, so don&#8217;t make any manual edits in <code>glob_allow/deny.rules</code>.</p>
<p>As you can see, <code>apf.conf</code> is no joke. It has a lot of stuff going on, but it&#8217;s very straightforward and documented well. Once we&#8217;ve set up apf.conf with the configurations we need, it&#8217;s time to look at the more focused <code>allow_hosts.rules</code> and <code>deny_hosts.rules</code> files. These <code>.rules</code> files are where where you put your typical firewall rules in place. If there&#8217;s one piece of advice I can give you about these configurations, it would be to check if your traffic is already allowed or blocked. Having multiple rules that do the same thing (possibly in different places) is confusing and potentially dangerous. </p>
<p>The <code>deny_hosts.rules</code> configuration will look just like <code>allow_hosts.rules</code>, but it&#8217;s performing the opposite function. Let&#8217;s check out an <code>allow_hosts.rules</code> configuration that will allow the Nimsoft service to function:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">tcp:<span style="color: #000000; font-weight: bold;">in</span>:<span style="color: #007800;">d</span>=<span style="color: #000000;">48000</span>_48020:<span style="color: #007800;">s</span>=10.0.0.0<span style="color: #000000; font-weight: bold;">/</span><span style="color: #000000;">8</span>
tcp:out:<span style="color: #007800;">d</span>=<span style="color: #000000;">48000</span>_48020:<span style="color: #007800;">d</span>=10.0.0.0<span style="color: #000000; font-weight: bold;">/</span><span style="color: #000000;">8</span></pre></div></div>

<p>The format is somewhat simplistic, but the file gives a little more context in the comments:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># The trust rules can be made in advanced format with 4 options</span>
<span style="color: #666666; font-style: italic;"># (proto:flow:port:ip);</span>
<span style="color: #666666; font-style: italic;"># 1) protocol: [packet protocol tcp/udp]</span>
<span style="color: #666666; font-style: italic;"># 2) flow in/out: [packet direction, inbound or outbound]</span>
<span style="color: #666666; font-style: italic;"># 3) s/d=port: [packet source or destination port]</span>
<span style="color: #666666; font-style: italic;"># 4) s/d=ip(/xx) [packet source or destination address, masking supported]</span>
<span style="color: #666666; font-style: italic;"># Syntax:</span>
<span style="color: #666666; font-style: italic;"># proto:flow:[s/d]=port:[s/d]=ip(/mask)</span></pre></div></div>

<p>APF also uses <code>ds_hosts.rules</code> to load the DShield.org blocklist, and I assume the <code>ecnshame_hosts.rules</code> does something similar (can&#8217;t find much information about it), so you won&#8217;t need to edit these files manually. Additionally, you probably don&#8217;t need to make any changes to <code>log.rules</code>, unless you want to make changes to what exactly you log. As it stands, it logs certain dropped connections, which should be enough. Also, it might be worth noting that this file is a script, not a configuration file.</p>
<p>The last two configuration files are the <code>preroute.rules</code> and <code>postroute.rules</code> that (unsurprisingly) are used to make routing changes. If you have been following my articles, this corresponds to the <a href="http://blog.softlayer.com/2011/iptables-tips-and-tricks-port-redirection/">iptables chains for PREROUTING and POSTROUTING</a> where you would do things like port forwarding and other advanced configuration that you probably don&#8217;t want to do in most cases.</p>
<h3>APF Command Line Management</h3>
<p>As I mentioned in the &#8220;points to consider&#8221; at the top of this post, it&#8217;s important to learn the changes you can perform from the command line, and APF has some very useful command line tools:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #7a0874; font-weight: bold;">&#91;</span>root<span style="color: #000000; font-weight: bold;">@</span>server<span style="color: #7a0874; font-weight: bold;">&#93;</span><span style="color: #666666; font-style: italic;"># apf --help</span>
APF version <span style="color: #000000;">9.7</span> <span style="color: #000000; font-weight: bold;">&lt;</span>apf<span style="color: #000000; font-weight: bold;">@</span>r-fx.org<span style="color: #000000; font-weight: bold;">&gt;</span>
Copyright <span style="color: #7a0874; font-weight: bold;">&#40;</span>C<span style="color: #7a0874; font-weight: bold;">&#41;</span> <span style="color: #000000;">2002</span>-<span style="color: #000000;">2011</span>, R-fx Networks <span style="color: #000000; font-weight: bold;">&lt;</span>proj<span style="color: #000000; font-weight: bold;">@</span>r-fx.org<span style="color: #000000; font-weight: bold;">&gt;</span>
Copyright <span style="color: #7a0874; font-weight: bold;">&#40;</span>C<span style="color: #7a0874; font-weight: bold;">&#41;</span> <span style="color: #000000;">2011</span>, Ryan MacDonald <span style="color: #000000; font-weight: bold;">&lt;</span>ryan<span style="color: #000000; font-weight: bold;">@</span>r-fx.org<span style="color: #000000; font-weight: bold;">&gt;</span>
This program may be freely redistributed under the terms of the GNU GPL
&nbsp;
usage <span style="color: #000000; font-weight: bold;">/</span>usr<span style="color: #000000; font-weight: bold;">/</span>local<span style="color: #000000; font-weight: bold;">/</span>sbin<span style="color: #000000; font-weight: bold;">/</span>apf <span style="color: #7a0874; font-weight: bold;">&#91;</span>OPTION<span style="color: #7a0874; font-weight: bold;">&#93;</span>
<span style="color: #660033;">-s</span><span style="color: #000000; font-weight: bold;">|</span>--start ......................... load all firewall rules
<span style="color: #660033;">-r</span><span style="color: #000000; font-weight: bold;">|</span>--restart ....................... stop <span style="color: #7a0874; font-weight: bold;">&#40;</span>flush<span style="color: #7a0874; font-weight: bold;">&#41;</span> <span style="color: #000000; font-weight: bold;">&amp;</span> reload firewall rules
<span style="color: #660033;">-f</span><span style="color: #000000; font-weight: bold;">|</span>--stop........ .................. stop <span style="color: #7a0874; font-weight: bold;">&#40;</span>flush<span style="color: #7a0874; font-weight: bold;">&#41;</span> all firewall rules
<span style="color: #660033;">-l</span><span style="color: #000000; font-weight: bold;">|</span>--list .......................... list all firewall rules
<span style="color: #660033;">-t</span><span style="color: #000000; font-weight: bold;">|</span>--status ........................ output firewall status log
<span style="color: #660033;">-e</span><span style="color: #000000; font-weight: bold;">|</span>--refresh ....................... refresh <span style="color: #000000; font-weight: bold;">&amp;</span> resolve dns names <span style="color: #000000; font-weight: bold;">in</span> trust rules
<span style="color: #660033;">-a</span> HOST CMT<span style="color: #000000; font-weight: bold;">|</span>--allow HOST COMMENT ... add host <span style="color: #7a0874; font-weight: bold;">&#40;</span>IP<span style="color: #000000; font-weight: bold;">/</span>FQDN<span style="color: #7a0874; font-weight: bold;">&#41;</span> to allow_hosts.rules and
                                     immediately load new rule into firewall
<span style="color: #660033;">-d</span> HOST CMT<span style="color: #000000; font-weight: bold;">|</span>--deny HOST COMMENT .... add host <span style="color: #7a0874; font-weight: bold;">&#40;</span>IP<span style="color: #000000; font-weight: bold;">/</span>FQDN<span style="color: #7a0874; font-weight: bold;">&#41;</span> to deny_hosts.rules and
                                     immediately load new rule into firewall
<span style="color: #660033;">-u</span><span style="color: #000000; font-weight: bold;">|</span>--remove HOST ................... remove host from <span style="color: #7a0874; font-weight: bold;">&#91;</span>glob<span style="color: #7a0874; font-weight: bold;">&#93;</span><span style="color: #000000; font-weight: bold;">*</span>_hosts.rules
                                     and immediately remove rule from firewall
<span style="color: #660033;">-o</span><span style="color: #000000; font-weight: bold;">|</span>--ovars ......................... output all configuration options</pre></div></div>

<p>You can use these command line tools to turn your firewall on and off, add allowed or blocked hosts and display troubleshooting information. These commands are very easy to use, but if you want more fine-tuned control, you&#8217;ll need to edit the configuration files directly (as we looked at above).</p>
<p>I know it seems like a lot of information, but to a large extent, that&#8217;s all you need to know to get started with APF. Take each section slowly and understand what each configuration file is doing, and you&#8217;ll master APF in no time at all.</p>
<p>-Mark</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2013/iptables-tips-and-tricks-apf-advanced-policy-firewall-configuration/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Tips and Tricks &#8211; jQuery equalHeights Plugin</title>
		<link>http://blog.softlayer.com/2012/tips-and-tricks-jquery-equalheights-plugin/</link>
		<comments>http://blog.softlayer.com/2012/tips-and-tricks-jquery-equalheights-plugin/#comments</comments>
		<pubDate>Thu, 06 Sep 2012 20:05:31 +0000</pubDate>
		<dc:creator>Cassandra Wolff</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[developers]]></category>
		<category><![CDATA[divs]]></category>
		<category><![CDATA[equalHeights]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[height]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[tip]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=9190</guid>
		<description><![CDATA[Last month, I posted a blog about dynamically resizing divs with jQuery, and we received a lot of positive feedback about it. My quest to avoid iframes proved to be helpful, so I thought I&#8217;d share a few more esoteric jQuery tips and tricks that may be of use to the developers and designers in [...]]]></description>
			<content:encoded><![CDATA[<p>Last month, I posted a blog about <a href="http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/">dynamically resizing divs with jQuery</a>, and we received a lot of positive feedback about it. My quest to avoid iframes proved to be helpful, so I thought I&#8217;d share a few more esoteric jQuery tips and tricks that may be of use to the developers and designers in the audience. As I thought back about other challenges I&#8217;ve faced as a coder, a great example came to mind: Making divs equal height, regardless of the amount of content inside.</p>
<p>I haven&#8217;t seen many elegant div-based solutions for that relatively simple (and common) task, so I&#8217;ve noticed that many people struggle with it. Often, developers will turn back to the &#8220;Dark Side&#8221; of using tables to format the content since all columns would have the same height as the tallest column by default:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/jquery1.png" alt="JQuery Tutorial"/></p>
<p>It was easy theme table columns and to achieve the coveted 100% height that many designers seek, but emulating that functionality with divs proves to be much more difficult. A div is like the Superman of HTML elements (faster-loading, more flexible, more dynamic, etc.), and while it has super powers, it also has its own Kryptonite-like weaknesses &#8230; The one relevant to this blog post being that floating three div elements next to each other isn&#8217;t going to give you the look of a table:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/jquery2.png" alt="JQuery Tutorial"/></p>
<p>Each of the three divs has its own height, so if you&#8217;re doing something as simple as applying background colors, you&#8217;re going to wind up with an aesthetically unpleasing result: It&#8217;s going to look funky.</p>
<p>You could get into some nifty HTML/CSS workarounds, but many frustrated theme creators and designers will tell you that if your parent elements don&#8217;t have a height of a 100%, you&#8217;re just wasting coding lines. Some complex solutions create the illusion of all three divs being the same height (which is arguably better than setting fixed heights), but that complexity can be difficult to scale and repeat if you need to perform similar tasks throughout your site or your application. The easiest way to get the functionality you want and the simplicity you need: The <a href="http://www.cssnewbie.com/download/jquery.equalheights.js">jQuery equalHeights</a> plugin!</p>
<p>With a few class declarations in your existing HTML, you get the results you want, and with equalHeights, you can also specify the minimum and maximum parameters so it will create scrollable divs if the tallest element happens to be higher than your specified maximum.</p>
<h3>How to Use jQuery equalHeights</h3>
<p>First and foremost, include your JQuery lirbraries in the <code>&lt;HEAD&gt;</code> of your document:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;script language</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;javascript&quot;</span> type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;jquery.equalheights.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>The equalHeights plugin is not a hosted library, so you have to host the file on your server (<a href="http://www.cssnewbie.com/download/jquery.equalheights.js">here&#8217;s the link again</a>).</p>
<p>With the required libraries called in our document, it&#8217;s time to make the magic happen in your HTML.</p>
<p><strong>Create Your Divs</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;divHeight&quot;</span>&gt;</span>This DIV is medium sized, not too big and not too small, but just right.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;divHeight&quot;</span>&gt;</span>This DIV has a lot of useful content and media that the user can interact with, thus it's very tall.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;divHeight&quot;</span>&gt;</span>This DIV is tiny. Period.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<p>To have them line up next to each other, you&#8217;d have them <code>float:left;</code> in your CSS, and now you need to apply the equalHeights function.</p>
<p><strong>Call the equalHeights Plugin</strong><br />
In order for the script to recognize the height of the tallest element, you&#8217;d need to call <code>$(document).ready</code> just before the <code>&lt;/body&gt;</code> tag on your page. This will ensure that the page loads before the function runs. </p>
<p>The call looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.divHeight&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">equalHeights</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

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

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.divHeight&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">equalHeights</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">300</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">600</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>The initial call does not change the appearance of the divs, but the time it takes to do the resizing is so miniscule that users will never notice. After that call is made and the height is returned, each div with the class of <code>divHeight</code> will inherit the the same height, and your divs will be nice and pretty:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/jquery3.png" alt="JQuery Tutorial"/></p>
<p>This trick saved me a lot of headache and frustration, so hopefully it will do the same for you too!</p>
<p>-Cassandra</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/tips-and-tricks-jquery-equalheights-plugin/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>No iFrames! Dynamically Resize Divs with jQuery.</title>
		<link>http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/</link>
		<comments>http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/#comments</comments>
		<pubDate>Wed, 08 Aug 2012 20:30:20 +0000</pubDate>
		<dc:creator>Cassandra Wolff</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[coder]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[developers]]></category>
		<category><![CDATA[divs]]></category>
		<category><![CDATA[dynamic]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[resize]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tricks]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[update]]></category>
		<category><![CDATA[walkthrough]]></category>
		<category><![CDATA[width]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=8988</guid>
		<description><![CDATA[It&#8217;s no secret that iframes are one of the most hated methods of web page layouts in the web development world &#8212; they are horrible for SEO, user experience and (usually) design. I was recently charged with creating a page that needed functionality similar to what iframes would normally provide, and I thought I&#8217;d share [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s no secret that iframes are one of the most hated methods of web page layouts in the web development world &mdash; they are horrible for SEO, user experience and (usually) design. I was recently charged with creating a page that needed functionality similar to what iframes would normally provide, and I thought I&#8217;d share the non-iframe way I went about completing that project. </p>
<p>Before I get into the nitty-gritty of the project, I should probably unpack a few of the reasons <em>why</em> iframes are shunned. When a search engine indexes a page with iframes, each iframe is accurately recorded as a separate page &mdash; iframes embed the content of one we page inside of another, so it makes sense. Because each of those &#8220;pages&#8221; is represented in a single layout, if a user wanted to bookmark your site, they&#8217;d probably have a frustrating experience when they try to return to your site, only to find that they are sent directly to the content in one of the frames instead of seeing the entire layout. Most often, I see when when someone has a navigation bar in one frame and the main content in the other &#8230; The user will bookmark the content frame, and when they return to the site, they have no way to navigate the pages. So what&#8217;s a developer to do?</p>
<p>The project I was tasked with required the ability to resize only certain sections of a page, while asynchronously shrinking another section so that the entire page would always stay the same size, with only the two sections inside changing size. </p>
<p>Let&#8217;s look at an example with two divs, side by side on a web page:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/iframetutorial.png" alt="iFrame Tutorial"/></p>
<p>One div will contain a navigation menu to jump to different pages of the website (<code>#sidebar</code>), and the second div will contain all the content for that page (<code>#content</code>). If some of the elements in #sidebar are too long to read with the default width of the div, we want to let the user freely resize the two divs without changing the width of the page.</p>
<p>Our task is straightforward: When <code>#sidebar</code> expands in width, also expand the navigation and shrink <code>#content</code> along with the main content inside <code>#content</code>. If <code>#sidebar</code> shrinks, the navigation, <code>#content</code> and main content would respond accordingly as well:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/iframetutorial2.png" alt="iFrame Tutorial"/></p>
<p>It&#8217;s a relatively easy concept to do with iFrames &#8230; But then you remember that iframes are no longer cool (yes, there was a time long ago when iframes were cool). I decided to turn to my favorite alternative &mdash; jQuery &mdash; and the fix was actually a lot easier than I expected, and it worked beautifully. Let&#8217;s run through a step-by-step tutorial.</p>
<h3>1. HTML</h3>
<p>Lay out your two divs:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;sidebar&quot;</span><span style="color: #339933;">&gt;</span> 
	<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;sidebar-menu&quot;</span><span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;!--</span> all your sidebar<span style="color: #339933;">/</span>navigational items go here <span style="color: #339933;">--&gt;</span>
	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;content&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;!--</span> all your main content goes here <span style="color: #339933;">--&gt;</span>
<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></div></div>

<h3>2. CSS</h3>
<p>Style your divs:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#sidebar {
</span>       width<span style="color: #339933;">:</span> <span style="color: #cc66cc;">49</span><span style="color: #339933;">%;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #666666; font-style: italic;">#content {
</span>	width<span style="color: #339933;">:</span> <span style="color: #cc66cc;">49</span><span style="color: #339933;">%;</span>
        float<span style="color: #339933;">:</span> left<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<h3>3. jQuery</h3>
<p>Now that we have our two divs side by side, let&#8217;s apply some jQuery magic. To do that, Let&#8217;s include our jQuery files in the <code>&lt;HEAD&gt;</code> of our document:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>link href<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot;</span> rel<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;stylesheet&quot;</span> type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/css&quot;</span><span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>Now that we have the necessary scripts, we can write our function:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
  $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;#sidebar&quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">resizable</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>      
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#sidebar &quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;resize&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> ui<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> setWidth <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#sidebar&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content).width(1224-setWidth);
            $('</span>.<span style="color: #660066;">menu</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span>setWidth<span style="color: #339933;">-</span><span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>I know that might seem like an intimidating amount of information, so let&#8217;s break it down:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">   $<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;#sidebar&quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">resizable</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>      
   <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This portion simply makes the div with the ID of &#8220;sidebar&#8221; resizable (which accomplishes 33% of what we want it to do).</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#sidebar &quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;resize&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> ui<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span></pre></div></div>

<p>By using the <code>.bind</code>, we are able to trigger other events when <code>#sidebar</code> is called.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">            <span style="color: #003366; font-weight: bold;">var</span> setWidth <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#sidebar&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content).width(1224-setWidth);</span></pre></div></div>

<p>This is where the magic happens. We&#8217;re grabbing the current width of <code>#sidebar</code> and subtracting it from the width you want your site to be. This code is what keeps your page stays the same width with only the divs changing sizes.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.menu).width(setWidth-6);</span></pre></div></div>

<p>This part of the code that expands the contents in the navigation along with <code>#sidebar</code>.</p>
<p>You can see a working example of iframe-like functionality with jQuery here: <a href="http://jqueryui.com/demos/resizable/">http://jqueryui.com/demos/resizable/</a></p>
<p>The only part you <em>won&#8217;t</em> find there is the trick to adjust a corresponding div&#8217;s size to make it grow/shrink with the first &#8230; I had a heck of a time searching that on the web, so hopefully this quick tutorial will help other developers who might be searching for this kind of functionality!</p>
<p>- Cassandra</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Web Development &#8211; JavaScript &#8211; Creating a Sticky Menu</title>
		<link>http://blog.softlayer.com/2012/web-development-javascript-creating-a-sticky-menu/</link>
		<comments>http://blog.softlayer.com/2012/web-development-javascript-creating-a-sticky-menu/#comments</comments>
		<pubDate>Wed, 23 May 2012 15:50:10 +0000</pubDate>
		<dc:creator>Philip Thompson</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[SoftLayer]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[display]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[sticky menu]]></category>
		<category><![CDATA[style]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tricks]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=8193</guid>
		<description><![CDATA[When designing websites, I like to focus on ease of use and accessibility for the end user. While creating your site to be friendly to screen readers and text-based browsers is a must, the accessibility I&#8217;m referring to is making it easy for your audience to navigate your site and perform certain common actions. By [...]]]></description>
			<content:encoded><![CDATA[<p>When designing websites, I like to focus on ease of use and accessibility for the end user. While creating your site to be friendly to screen readers and text-based browsers is a must, the accessibility I&#8217;m referring to is making it easy for your audience to navigate your site and perform certain common actions. By providing an easy interface for your users, you are immediately increasing your chances that they&#8217;ll return for more of your site&#8217;s goodness.</p>
<p>Thus far in our &#8220;Web Development&#8221; blog series, we&#8217;ve looked at <a href="http://blog.softlayer.com/2011/html5-javascript-web-development-part-i/">JavaScript Optimization</a>, <a href="http://blog.softlayer.com/2012/web-development-html5-custom-data-attributes/">HTML5 Custom Data Attributes</a>, <a href="http://blog.softlayer.com/2012/web-development-html5-web-fonts/">HTML5 Web Fonts</a> and using CSS to style the <a href="http://blog.softlayer.com/2012/web-development-css-highlight-selection/">Highlight Selection</a>. In this post, we&#8217;re going to create a &#8220;sticky&#8221; menu at the top of a page. As a user scrolls down, the menu will &#8220;stick&#8221; to the top and always be visible (think of Facebook&#8217;s Timeline view), allowing the user quicker access to clicking common links. With some simple HTML, CSS and JavaScript, you can have a sticky menu in no time.</p>
<style type="text/css">
code{color:blue;}
</style>
<p>Let&#8217;s start with our HTML. We&#8217;re going to have a simple header, menu and content section that we&#8217;ll throw in our <code>&lt;body&gt;</code> tag.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>header<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>h1<span style="color: #339933;">&gt;</span>My Header<span style="color: #339933;">&lt;/</span>h1<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>header<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>nav id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;menu&quot;</span><span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>ul id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;menu-list&quot;</span><span style="color: #339933;">&gt;</span>
        <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Items<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>nav<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;content&quot;</span><span style="color: #339933;">&gt;</span>
    Some content
<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></div></div>

<p>For brevity, I&#8217;ve shortened the content I show here, but the working example will have all the information. Now we can throw in some CSS to style our elements. The important part here is how the <code>&lt;nav&gt;</code> is styled.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">nav<span style="color: #666666; font-style: italic;">#menu {
</span>    background<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#FFF;
</span>    clear<span style="color: #339933;">:</span> both<span style="color: #339933;">;</span>
    margin<span style="color: #339933;">:</span> 40px <span style="color: #cc66cc;">0</span> 80px <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
    width<span style="color: #339933;">:</span> <span style="color:#800080;">99.8</span><span style="color: #339933;">%;</span>
    z<span style="color: #339933;">-</span>index<span style="color: #339933;">:</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
ul<span style="color: #666666; font-style: italic;">#menu-list li {
</span>    border<span style="color: #339933;">:</span> solid 1px blue<span style="color: #339933;">;</span>
    list<span style="color: #339933;">-</span>style<span style="color: #339933;">-</span>type<span style="color: #339933;">:</span> none<span style="color: #339933;">;</span>
    display<span style="color: #339933;">:</span> inline<span style="color: #339933;">-</span>block<span style="color: #339933;">;</span>
    margin<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #339933;">-</span>3px<span style="color: #339933;">;</span>
    padding<span style="color: #339933;">:</span> 4px 10px<span style="color: #339933;">;</span>
    width<span style="color: #339933;">:</span> auto<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>We have set the menu&#8217;s <code>background</code> to white (<code>#FFF</code>) and given it a <code>z-index</code> of <code>2</code> so that when the user scrolls, the menu will stay on top and not be see-through. We&#8217;ve also set the list items to be styled <code>inline-block</code>, but you can style your items however you desire.</p>
<p>Now we get to the fun part – the JavaScript. I&#8217;ve created a class using <a href="http://mootools.net/">Mootools</a>, but similar functionality could be achieved using your favorite JavaScript framework. Let&#8217;s examine our <code>initialize</code> method (our constructor) in our <code>Stickit</code> class.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Stickit <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">Stickit</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    initialize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// 'item' is our nav#menu in this case</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">=</span> document.<span style="color: #660066;">id</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// The element we're scrolling will be the window</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">scrollTarget</span> <span style="color: #339933;">=</span> document.<span style="color: #660066;">id</span><span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">scrollTarget</span> <span style="color: #339933;">||</span> document.<span style="color: #660066;">window</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// The 'anchor' is an empty element that will always keep the same location</span>
        <span style="color: #006600; font-style: italic;">// when the user scrolls. This is needed because this.item will change and</span>
        <span style="color: #006600; font-style: italic;">// we cannot rely on it for accurate calculations.</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">anchor</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">inject</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'top'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// The 'filler' is an empty element that we'll use as a space filler for when</span>
        <span style="color: #006600; font-style: italic;">// the 'item' is being manipulated - this will prevent the content below from</span>
        <span style="color: #006600; font-style: italic;">// jumping around when we scroll.</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">filler</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">inject</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'after'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// Set the styles of our 'filler' to match the styles of the 'item'</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setFillerStyles</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// Initialize our scroll events – see the next code section for details</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">initEvents</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>What we&#8217;re doing here is grabbing our element to stick to the top – in this case, <code>nav#menu</code> – and initializing our other important elements. I&#8217;ll review these in the next code section.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Stickit <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">Stickit</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    ...
    <span style="color: #660066;">initEvents</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> that <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span>
            <span style="color: #006600; font-style: italic;">// Grab the position of the anchor to be used for comparison during vertical scroll</span>
            anchorOffsetY <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">anchor</span>.<span style="color: #660066;">getPosition</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">y</span><span style="color: #339933;">,</span>
            <span style="color: #006600; font-style: italic;">// Grab our original styles of our 'item' so that we can reset them later</span>
            originalStyles <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">getStyles</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'margin-top'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'position'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'top'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// This is the function we'll provide as our scroll event handler</span>
        <span style="color: #003366; font-weight: bold;">var</span> stickit <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// Determine if we have scrolled beyond our threshold - in this case, our</span>
            <span style="color: #006600; font-style: italic;">// anchor which is located as the first element of our 'item'</span>
            <span style="color: #003366; font-weight: bold;">var</span> targetScrollY <span style="color: #339933;">=</span> that.<span style="color: #660066;">scrollTarget</span>.<span style="color: #660066;">getScroll</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">y</span><span style="color: #339933;">,</span>
                fixit <span style="color: #339933;">=</span> targetScrollY <span style="color: #339933;">&gt;</span> anchorOffsetY<span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>fixit <span style="color: #339933;">&amp;&amp;</span> that.<span style="color: #660066;">cache</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'fixed'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// If we have scrolled beyond the threshold, fix the 'item' to the top</span>
                <span style="color: #006600; font-style: italic;">// of the window with the following styles: margin-top, position and top</span>
                that.<span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">setStyles</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                    <span style="color: #3366CC;">'margin-top'</span><span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
                    position<span style="color: #339933;">:</span> <span style="color: #3366CC;">'fixed'</span><span style="color: #339933;">,</span>
                    top<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span>
                <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #006600; font-style: italic;">// Show our (empty) filler so that the content below the 'item' does not</span>
                <span style="color: #006600; font-style: italic;">// jump - this would otherwise be distracting to the user</span>
                that.<span style="color: #660066;">filler</span>.<span style="color: #660066;">setStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'block'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #006600; font-style: italic;">// Cache our value so that we only set the styles when we need to</span>
                that.<span style="color: #660066;">cache</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'fixed'</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>fixit <span style="color: #339933;">&amp;&amp;</span> that.<span style="color: #660066;">cache</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'default'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// We have not scrolled beyond the threshold.</span>
                <span style="color: #006600; font-style: italic;">// Hide our filler</span>
                that.<span style="color: #660066;">filler</span>.<span style="color: #660066;">setStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'none'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #006600; font-style: italic;">// Reset the styles to our 'item'</span>
                that.<span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">setStyles</span><span style="color: #009900;">&#40;</span>originalStyles<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #006600; font-style: italic;">// Cache our values so we don't keep resetting the styles</span>
                that.<span style="color: #660066;">cache</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'default'</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// Add our scroll event to the target - the 'window' in this case</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">scrollTarget</span>.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'scroll'</span><span style="color: #339933;">,</span> stickit<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #006600; font-style: italic;">// Fire our scroll event so that all the elements and styles are initialized</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">scrollTarget</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'scroll'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This method contains the meat of our functionality. The logic includes that we test how far the user has scrolled down on the page. If s/he scrolls past the threshold – in this case, the anchor which is located at the very top of the &#8220;stuck&#8221; item – then we set the menu to be fixed to the top of the page by setting the CSS values for <code>margin-top</code>, <code>position</code> and <code>top</code>. We also display a filler so that the content below the menu doesn&#8217;t jump when we set the menu&#8217;s <code>position</code> to <code>fixed</code>. When the user scrolls back to the top, the styles are reset to their original values and the filler is hidden. </p>
<p>To see a full working example, check out this <a href="http://jsfiddle.net/MrA85/4/">fiddle</a>. The <code>Stickit</code> class I created is flexible enough so that you can &#8220;stick&#8221; any element to the top of the page, and you can specify a different <code>scrollTarget</code>, which will allow you to scroll another element (besides the <code>window</code>) and allow the item to stick to the top of that element instead of the <code>window</code>. If you want to give that a try, you can specify different options in <code>Stickit</code> and modify your CSS as needed to get it working as you&#8217;d like.</p>
<p>Happy coding,</p>
<p>-Philip</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/web-development-javascript-creating-a-sticky-menu/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Choosing a Cloud: Which Cloud Chooses You?</title>
		<link>http://blog.softlayer.com/2012/choosing-a-cloud-which-cloud-chooses-you/</link>
		<comments>http://blog.softlayer.com/2012/choosing-a-cloud-which-cloud-chooses-you/#comments</comments>
		<pubDate>Mon, 23 Apr 2012 19:01:26 +0000</pubDate>
		<dc:creator>Kevin Hazard</dc:creator>
				<category><![CDATA[Business]]></category>
		<category><![CDATA[Cloud]]></category>
		<category><![CDATA[SoftLayer]]></category>
		<category><![CDATA[choosing]]></category>
		<category><![CDATA[cloud servers]]></category>
		<category><![CDATA[comparison]]></category>
		<category><![CDATA[cost]]></category>
		<category><![CDATA[customer]]></category>
		<category><![CDATA[dedicated servers]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[hosting]]></category>
		<category><![CDATA[hosting research]]></category>
		<category><![CDATA[Infrastructure]]></category>
		<category><![CDATA[ordering]]></category>
		<category><![CDATA[provider]]></category>
		<category><![CDATA[research]]></category>
		<category><![CDATA[select]]></category>
		<category><![CDATA[servers]]></category>
		<category><![CDATA[Technology]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=7845</guid>
		<description><![CDATA[It&#8217;s not easy to choose a cloud hosting provider. In the first post of this series, we talked about the three key deciding factors every cloud customer has to consider, and we set up a Venn diagram to distinguish the surprisingly broad range of unique priorities customers can have: Because every customer will prioritize a [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s not easy to <a href="http://blog.softlayer.com/2012/choosing-a-cloud-cost-v-technology-v-hosting-provider/">choose a cloud hosting provider</a>.</p>
<p>In the <a href="http://blog.softlayer.com/2012/choosing-a-cloud-cost-v-technology-v-hosting-provider/">first post</a> of this series, we talked about the three key deciding factors every cloud customer has to consider, and we set up a Venn diagram to distinguish the surprisingly broad range of unique priorities customers can have:</p>
<p><a href="http://blog.softlayer.com/2012/choosing-a-cloud-cost-v-technology-v-hosting-provider/"><img class="centered" src="http://cdn.softlayer.com/innerlayer/customer_types.png" alt="Cloud Customer Zones"/></a></p>
<p>Because every customer will prioritize a cloud&#8217;s cost, technology and hosting provider a little differently (for completely valid reasons), we mapped out seven distinct &#8220;zones&#8221; to differentiate some of the basic market segments, or &#8220;personas,&#8221; of cloud hosting buyers. That post was intended to set the stage for a larger discussion on how customers choose their cloud providers and how cloud providers choose their customers, and we&#8217;re just scratching the surface. We&#8217;re tackling a pretty big topic here, so as Bill Cosby famously says, &#8220;I told you that story to tell you this one.&#8221;</p>
<p>As a hosting provider, SoftLayer can&#8217;t expect to be all things for all people. It&#8217;s impossible to offer a quad-core hex-proc dedicated server for a price that will appeal to a customer in the market for a $49/mo dedicated server.</p>
<p>To better illustrate SoftLayer&#8217;s vision in the cloud market, we need to take that generic cost v. technology v. hosting provider diagram and give it the &#8220;Three Bars&#8221; treatment:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/softlayer_diagram.png" alt="SoftLayer Venn Diagram"/></p>
<p>We&#8217;re much more interested in living and breathing the Zone 5 &#8220;Technology&#8221; space rather than the traditional Zone 2 &#8220;Hosting Provider&#8221; space. That&#8217;s why in the past two months, you&#8217;ve seen announcements about our launch of the latest Intel Processors, HPC computing with NVidia GPUs, searchable OpenStack Object Storage, and an innovative &#8220;Flex Image&#8221; approach to bluring the lines between physical and virtual servers. We choose to pursue the cloud customers who make their buying decisions in Zone 3.</p>
<p>That&#8217;s a challenging pursuit &#8230; It&#8217;s expensive to push the envelope in technology, customers primarily interested in technology/performance have demanding needs and expectations, and it&#8217;s easier to make mistakes when you&#8217;re breaking new ground. The majority of the hosting industry seems to have an eye on the buyer in Zone 1 because they believe the average hosting customer is <em>only</em> interested in the bottom line &#8230; That hosting is more or less a commodity, so the focus should be on some unverifiable qualitative measure of support or the next big special that&#8217;ll bring in new orders.</p>
<p>As you may have seen recently, GigaOm posted a lovely article that references several <a href="http://gigaom.com/cloud/meet-the-cloud-behind-your-favorite-apps-and-its-not-aws/">high-profile companies in our 25,000+ customer family</a>. We like to say that SoftLayer builds the platform on which our customers build the future, and that short post speaks volumes about the validity of that statement. Our goal is to provide the most powerful, scalable and seamlessly integrated IT infrastructure for the most innovative companies in the world. <strong>Innovate or Die</strong> isn&#8217;t just our company motto &#8230; It&#8217;s our hope for our customers, as well.</p>
<p>We might miss out on your business if you want a $49/mo dedicated server, but if you&#8217;re looking to change the world, we&#8217;ve got you covered. <img src='http://blog.softlayer.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>-<a href="http://twitter.com/khazard">@khazard</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/choosing-a-cloud-which-cloud-chooses-you/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Choosing a Cloud: Cost v. Technology v. Hosting Provider</title>
		<link>http://blog.softlayer.com/2012/choosing-a-cloud-cost-v-technology-v-hosting-provider/</link>
		<comments>http://blog.softlayer.com/2012/choosing-a-cloud-cost-v-technology-v-hosting-provider/#comments</comments>
		<pubDate>Fri, 20 Apr 2012 18:15:38 +0000</pubDate>
		<dc:creator>Kevin Hazard</dc:creator>
				<category><![CDATA[Business]]></category>
		<category><![CDATA[Cloud]]></category>
		<category><![CDATA[SoftLayer]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[choosing]]></category>
		<category><![CDATA[cloud servers]]></category>
		<category><![CDATA[comparison]]></category>
		<category><![CDATA[cost]]></category>
		<category><![CDATA[customer]]></category>
		<category><![CDATA[dedicated servers]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[hosting]]></category>
		<category><![CDATA[hosting research]]></category>
		<category><![CDATA[Infrastructure]]></category>
		<category><![CDATA[ordering]]></category>
		<category><![CDATA[provider]]></category>
		<category><![CDATA[research]]></category>
		<category><![CDATA[select]]></category>
		<category><![CDATA[servers]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/2011/</guid>
		<description><![CDATA[If you had to order a new cloud server right now, how would choose it? I&#8217;ve worked in the hosting industry for the better part of a decade, and I can safely say that I&#8217;ve either observed or been a part of the buying decision for a few thousand hosting customers &#8212; from small business [...]]]></description>
			<content:encoded><![CDATA[<p>If you had to order a new cloud server right now, how would choose it?</p>
<p>I&#8217;ve worked in the hosting industry for the better part of a decade, and I can safely say that I&#8217;ve either observed or been a part of the buying decision for a few thousand hosting customers &mdash; from small business owners getting a website online for the first time to established platforms that are now getting tens of millions of visits every day. While each of those purchasers had different requirements and priorities, I&#8217;ve noticed a few key deciding factors that are consistent in a all of those decisions:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/primary_focus.png" alt="The Hosting Decision"/></p>
<p>How much will the <a href="http://www.softlayer.com/dedicated">dedicated server</a> or <a href="http://www.softlayer.com/cloudlayer">cloud computing</a> instance cost? What configuration/technology do I need (or want)? Which hosting provider should I trust with my business?</p>
<p>Every website administrator of every site on the Internet has had to answer those three questions, and while they seem pretty straightforward, they end up overlapping, and the buying decision starts to get a little more complicated:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/focus_overlap.png" alt="The Hosting Decision"/></p>
<p>The natural assumption is that everyone will choose a dedicated server or cloud computing instance that falls in the &#8220;sweet spot&#8221; where the three circles overlap, right? While that makes sense on paper, hosting decisions are not made in a vacuum, so you&#8217;ll actually see completely valid hosting decisions targeting every spot on that graph.</p>
<p>Why would anyone choose an option that wouldn&#8217;t fit in the sweet spot?</p>
<p>That&#8217;s a great question, and it&#8217;s a tough one to answer in broad strokes. Let&#8217;s break the chart down into a few distinct zones to look at why a user would choose a server in each area:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/customer_types.png" alt="The Hosting Decision"/></p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Zone 1</strong></p>
<p style="margin-top:0; padding-top:0;">Buyers choosing a server in Zone 1 are easiest to understand: Their budget takes priority over everything else. They might want to host with a specific provider or have a certain kind of hardware, but their budget doesn&#8217;t allow for either. Maybe they don&#8217;t <em>need</em> their site to use the latest and greatest hardware or have it hosted anywhere in particular. Either way, they choose a cloud solely based on whether it fits their budget. After the initial buying decision, if another server needs to be ordered, they might become a Zone 4 buyer.</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Zone 2</strong></p>
<p style="margin-top:0; padding-top:0;">Just like Zone 1 buyers, Zone 2 buyers are a pretty simple bunch as well. If you&#8217;re an IT administrator at a huge enterprise that does all of your hosting in-house, your buying decision is more or less made for you. It doesn&#8217;t matter how much the solution costs, you have to choose an option in your data center, and while you might like a certain technology, you&#8217;re going to get what&#8217;s available. Enterprise users aren&#8217;t the only people deciding to order a server in Zone 2, though &#8230; It&#8217;s where you see a lot of loyal customers who have the ability to move to another provider but prefer not to &mdash; whether it&#8217;s because they want their next server to be in the same place as their current servers, they value the capabilities of a specific hosting provider (or they just like the witty, interesting blogs that hosting provider writes).</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Zone 3</strong></p>
<p style="margin-top:0; padding-top:0;">As with Zone 1 and Zone 2, when a zone doesn&#8217;t have any overlapping areas, the explanation is pretty easy. In Zone 3, the buying decision is being made with a priority on technology. Buyers in this area don&#8217;t care what it costs or where it&#8217;s hosted &#8230; They need the fastest, most powerful, most scalable infrastructure on the market. Similar to Zone 1 buyers, once Zone 3 buyers make their initial buying decision, they might shift to Zone 5 for their next server or cloud instance, but we&#8217;ll get to that in a minute.</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Zone 4</strong></p>
<p style="margin-top:0; padding-top:0;">Now we&#8217;re starting to overlap. In Zone 4, a customer will be loyal to a hosting provider as long as that loyalty doesn&#8217;t take them out of their budget. This is a relatively common customer &#8230; They&#8217;ll try to compare options apples-to-apples, and they&#8217;ll make their decision based on which hosting provider they like/trust most. As we mentioned above, if a Zone 1 buyer is adding another server to their initial server order, they&#8217;ll likely look to add to their environment in one place to make it easier to manage and to get the best performance between the two servers.</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Zone 5</strong></p>
<p style="margin-top:0; padding-top:0;">Just like the transitional Zone 1 buyers, when Zone 3 buyers look to build on their environment, they&#8217;ll probably become Zone 5 buyers. When your initial buying decision is based entirely on technology, it&#8217;s unusual to reinvent the wheel when it comes to your next buying decision. While there are customers that will reevaluate their environment and choose a Zone 3 option irrespective of where their current infrastructure is hosted, it&#8217;s less common. Zone 5 users love having he latest and greatest technology, and they value being able to manage it through one provider.</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Zone 6</strong></p>
<p style="margin-top:0; padding-top:0;">A Zone 6 buyer is usually a Zone 1 buyer that has specific technology needs. With all the options on the table, a Zone 6 buyer will choose the cloud environment that provides the latest technology or best performance for their budget, regardless of the hosting provider. As with Zone 1 and Zone 3 buyers, a Zone 6 buyer will probably become a Zone 7 buyer if they need to order another server.</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Zone 7</strong></p>
<p style="margin-top:0; padding-top:0;">Zone 7 buyers are in the sweet spot. They know the technology they want, they know the price they want to pay, and they know the host they want to use. They&#8217;re able to value all three of their priorities equally, and they can choose an environment that meets all of their needs. After Zone 6 buyers order their first server(s), they&#8217;re going to probably become Zone 7 buyers when it comes time for them to place their next order.</p>
<p>As you probably noticed, a lot of transitioning happens between an initial buying decision and a follow-up buying decision, so let&#8217;s look at that quickly:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/transition.png" alt="The Hosting Decision"/></p>
<p>Regardless of how you make your initial buying decision, when it&#8217;s time for your next server or cloud computing instance, you have a new factor to take into account: You already have a cloud infrastructure at a hosting provider, so when it comes time to grow, you&#8217;ll probably want to grow in the same place. Why? Moving between providers can be a pain, managing environments between several providers is more difficult, and if your servers have to work together, they&#8217;re generally doing so across the public Internet, so you&#8217;re not getting the best performance.</p>
<p>Where does SoftLayer fit in all of this? Well beyond being a <a href="http://www.softlayer.com/">hosting provider</a> that buyers are choosing, we have to understand buyers are making their buying decisions, and we have to position our business to appeal to the right people with the right priorities. It&#8217;s impossible to be all things for all people, so we have to choose where to invest our attention &#8230; I&#8217;ll leave that post for another day, though.</p>
<p>If you had to choose a zone that best describes how you made (or are currently making) your buying decision, which one would it be?</p>
<p>-<a href="http://twitter.com/khazard">@khazard</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/choosing-a-cloud-cost-v-technology-v-hosting-provider/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Tips and Tricks &#8211; How to Use SFTP</title>
		<link>http://blog.softlayer.com/2012/tips-and-tricks-how-to-use-sftp/</link>
		<comments>http://blog.softlayer.com/2012/tips-and-tricks-how-to-use-sftp/#comments</comments>
		<pubDate>Tue, 03 Apr 2012 19:38:08 +0000</pubDate>
		<dc:creator>Lyndell Rottmann</dc:creator>
				<category><![CDATA[Customer Service]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[access]]></category>
		<category><![CDATA[connection]]></category>
		<category><![CDATA[delete]]></category>
		<category><![CDATA[files]]></category>
		<category><![CDATA[FTP]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[help]]></category>
		<category><![CDATA[login]]></category>
		<category><![CDATA[manage]]></category>
		<category><![CDATA[management]]></category>
		<category><![CDATA[root]]></category>
		<category><![CDATA[server]]></category>
		<category><![CDATA[SFTP]]></category>
		<category><![CDATA[support]]></category>
		<category><![CDATA[technical]]></category>
		<category><![CDATA[tips and tricks]]></category>
		<category><![CDATA[upload]]></category>
		<category><![CDATA[walkthrough]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=7619</guid>
		<description><![CDATA[Too often, new customers can get overwhelmed by a small administrative task on a Linux server. One of the more common questions I see in technical support is when a drive partition runs out of space. The website appears offline, and on of my coworkers advises you to just free-up some space. &#8220;Just?! Where can [...]]]></description>
			<content:encoded><![CDATA[<p>Too often, new customers can get overwhelmed by a small administrative task on a Linux server. One of the more common questions I see in technical support is when a drive partition runs out of space. The website appears offline, and on of my coworkers advises you to just free-up some space. &#8220;Just?! Where can I find files that are deletable without affecting my website?&#8221;</p>
<p>Don&#8217;t worry &#8230; it&#8217;s really quit simple. If you can use FTP (File Transfer Protocol), you can handle this bit of server management. Depending on the exact problem, we might instruct you to free up space by removing files in one of the following directories:</p>
<ul>
<li><code>/var/log</code></li>
<li><code>/usr/local/cpanel</code></li>
<li><code>/usr/local/apache/logs</code></li>
<li><code>/usr/local/apache/domlogs</code></li>
</ul>
<p>The reason these directories are usually overlooked is because they are not accessible by normal FTP users &mdash; users who only upload website content. When you upload website content to the server via FTP, the FTP user is limited to the directory structure for that website. Directories starting with &#8220;<code>/var</code>&#8221; and &#8220;<code>/usr</code>&#8221; cannot be accessed by these non-root users (The &#8220;root&#8221; user can access anything). And while root is a powerful user, for the sake of security, it is not normally allowed to log in over FTP because FTP is not secure &#8230; That&#8217;s where SFTP (Secure File Transfer Protocol) comes in.</p>
<p>Most FTP clients support SFTP, so you don&#8217;t have to learn a new environment to securely access any file on the server. Every FTP client is different, but I&#8217;ll illustrate with <a href="http://filezilla-project.org/">FileZilla</a> because it&#8217;s free and available on Mac, Windows and Linux. If you don&#8217;t already have an FTP client, I highly recommend FileZilla. Because there are a few ways to use FileZilla to get an SFTP connection, I can share different options for you to try:</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Quick Connect</strong></p>
<p style="margin-top:0; padding-top:0;">The Quick Connect bar is the quickest way to connect to your server. Start FileZilla and look immediately under the toolbar for the Quick Connect bar:</p>
<p><a href="http://cdn.softlayer.com/innerlayer/fzquickconnect.png"><img class="centered" src="http://cdn.softlayer.com/innerlayer/fzquickconnect_sm.png" alt="SFTP Tutorial"/></a></p>
<p>Enter the hostname (IP address or domain name), “root” in the Username field, the root password in the Password field, and “22″ in the port field. Remember, port 22 is for SFTP, the same as SSH.  Click the Quickconnect button to connect.</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Using the Site Manager</strong></p>
<p style="margin-top:0; padding-top:0;">The Site Manager lets you save your login details. Start FileZilla and you&#8217;ll see the following:</p>
<p><a href="http://cdn.softlayer.com/innerlayer/fzsitemanager.png"><img class="centered" src="http://cdn.softlayer.com/innerlayer/fzsitemanager_s.png" alt="SFTP Tutorial"/></a></p>
<p>To open the Site Manager, click the left-most icon in tool bar or go to <code>File &gt;&gt; Site Manager</code> in the menu.</p>
<p><a href="http://cdn.softlayer.com/innerlayer/fznewsite.png"><img class="centered" src="http://cdn.softlayer.com/innerlayer/fznewsite_s.png" alt="SFTP Tutorial"/></a></p>
<p>Enter an IP address or domain name for your server in the Host field, and select &#8220;SFTP&#8221; as your protocol. You&#8217;ll enter the root user&#8217;s login information, and you&#8217;re ready to connect by clicking the &#8220;Connect&#8221; button or you can click the &#8220;OK&#8221; button to save and close the dialog box.</p>
<p>If you just saved your settings and the Site Manager is not open, click the Site Manager icon again. From there, you can select the site under the &#8220;Select Entry&#8221; box, and you just have to click &#8220;Connect&#8221; to initiate the SFTP connection with your saved settings.</p>
<p>If you see a pop-up that warns of an &#8220;Unknown host key,&#8221; clicking the &#8220;Always trust this host, add this key to the cache&#8221; option will prevent this interruption from showing in the future. Once you click &#8220;OK&#8221; to complete the connection, your FileZilla screen should look like this:</p>
<p><a href="http://cdn.softlayer.com/innerlayer/fzrootlogin.png"><img class="centered" src="http://cdn.softlayer.com/innerlayer/fzrootlogin_s.png" alt="SFTP Tutorial"/></a></p>
<p>Notice the &#8220;Remote site&#8221; section on the middle right of the FileZilla screen:</p>
<p><a href="http://cdn.softlayer.com/innerlayer/fzremotesite.png"><img class="centered" src="http://cdn.softlayer.com/innerlayer/fzremotesite_s.png" alt="SFTP Tutorial"/></a></p>
<p>This area in FileZilla is the directory and file listing of the server. Navigate the server&#8217;s file structure here, and click &#8220;<code>/</code>&#8221; to access the top of the folder structure. You should see the &#8220;<code>/usr</code>&#8221; and &#8220;<code>/var</code>&#8221; directories, and you can explore the filesystem to delete the files technical support recommended to create space!</p>
<p style="margin-bottom:0; padding-bottom:0;"><strong>Message Log</strong></p>
<p style="margin-top:0; padding-top:0;">If you have a problem connecting to your server by FTP or SFTP, the open area below the Quickconnect bar is the Message Log. If you can copy and paste this text into a ticket, you&#8217;ll help technical support troubleshoot your connection problems. Below is an example log of a successful FTP session:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">Status: Connecting to server.example.com...
Response:   fzSftp started
Command:    open <span style="color: #ff0000;">&quot;root@server.example.com&quot;</span> <span style="color: #000000;">22</span>
Command:    Trust new Hostkey: Once
Command:    Pass: <span style="color: #000000; font-weight: bold;">**********</span>
Status: Connected to server.example.com
Status: Retrieving directory listing...
Command:    <span style="color: #7a0874; font-weight: bold;">pwd</span>
Response:   Current directory is: <span style="color: #ff0000;">&quot;/root&quot;</span>
Command:    <span style="color: #c20cb9; font-weight: bold;">ls</span>
Status: Listing directory <span style="color: #000000; font-weight: bold;">/</span>root
Status: Calculating timezone offset of server...
Command:    mtime <span style="color: #ff0000;">&quot;.lesshst&quot;</span>
Response:   <span style="color: #000000;">1326387703</span>
Status: Timezone offsets: Server: <span style="color: #660033;">-21600</span> seconds. Local: <span style="color: #660033;">-21600</span> seconds. Difference: <span style="color: #000000;">0</span> seconds.
Status: Directory listing successful</pre></div></div>

<p>And here&#8217;s an example of a failed connection:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">Status: Resolving address of example.com
Status: Connecting to 192.0.43.10:<span style="color: #000000;">21</span>...
Error:  Connection timed out
Error:  Could not connect to server
Status: Waiting to retry...
Status: Resolving address of example.com
Status: Connecting to 192.0.43.10:<span style="color: #000000;">21</span>...
Error:  Connection attempt interrupted by user</pre></div></div>

<p>If you have any questions, leave them in a comment below. Enjoy your new-found SFTP powers!</p>
<p>-Lyndell</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/tips-and-tricks-how-to-use-sftp/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Planning Your Server Infrastructure = Buying a House</title>
		<link>http://blog.softlayer.com/2012/planning-your-server-infrastructure-buying-a-house/</link>
		<comments>http://blog.softlayer.com/2012/planning-your-server-infrastructure-buying-a-house/#comments</comments>
		<pubDate>Mon, 26 Mar 2012 19:41:58 +0000</pubDate>
		<dc:creator>Matthew Herring</dc:creator>
				<category><![CDATA[Infrastructure]]></category>
		<category><![CDATA[Sales]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[Backups]]></category>
		<category><![CDATA[consider]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[insurance]]></category>
		<category><![CDATA[investment]]></category>
		<category><![CDATA[order]]></category>
		<category><![CDATA[planning]]></category>
		<category><![CDATA[server]]></category>
		<category><![CDATA[shopping]]></category>
		<category><![CDATA[SoftLayer]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=7517</guid>
		<description><![CDATA[With a little one on the way, I&#8217;ve been spending a good amount of my free time starting to search for a new home for my growing family. While the search continues, I&#8217;ve learned a thing or two about what to look for and what should be done before taking the plunge, and as I&#8217;ve [...]]]></description>
			<content:encoded><![CDATA[<p>With a little one on the way, I&#8217;ve been spending a good amount of my free time starting to search for a new home for my growing family. While the search continues, I&#8217;ve learned a thing or two about what to look for and what should be done before taking the plunge, and as I&#8217;ve gone through the process, I can&#8217;t help but notice lot of parallels to what it&#8217;s like to purchase a new server:</p>
<ul>
<li>
<p style="margin-bottom:0; padding-bottom:0;"><strong>It&#8217;s an Investment</strong></p>
<p style="margin-top:0;  padding-top:0;">Just like purchasing a new home, deciding to purchase a server is a huge investment. As you start shopping around, the costs may seem staggering, and while most servers don&#8217;t cost as much as a small home, your new server will be your business&#8217;s new home online. When you consider the revenue your site will generate (and the potential cost of not being able to properly support demand), you won&#8217;t want to skimp on the details. The truth is that like any investment, you can reap great rewards with proper planning and execution.</p>
</li>
<li>
<p style="margin-bottom:0; padding-bottom:0;"><strong>You Have to Know What You Need</strong></p>
<p style="margin-top:0;  padding-top:0;">One of the best tips I&#8217;ve incorporated in my home-buying process is the need to differentiate what you <em>want</em>, what you <em>need</em>, and what <em>you can live without</em>. Unless you&#8217;re royalty, you&#8217;re likely living on a budget. As cool as it would be to live in a 10-bedroom mansion with an indoor Olympic size pool, there&#8217;s a lot there that I don&#8217;t need. That sort of <del>home</del> palace also falls way outside of my personal budget. The same could be said about a business. </p>
<p>I&#8217;ve heard plenty of stories about companies who slash their IT budgets in order to cut costs, and even the greatest IT departments have to live within their budgets. As you&#8217;re determining what your next server will be, you need to understand the purpose (and <em>needs</em>) of your workload: Will it be database server? An application server? Will it be an additional web head? Are you using it for mass storage? You need to plan accordingly. I&#8217;m sure you&#8217;d <em>want</em> a new <a href="http://www.softlayer.com/dedicated/dual-processor-multi-core/">Xeon E5-2600</a> server with all of the bells and whistles, but if you don&#8217;t <em>need</em> that kind of performance, you&#8217;re likely just going to burn through your budget quicker than you have to. Know your budget, know your needs and purchase your server accordingly.</p>
</li>
<li>
<p style="margin-bottom:0; padding-bottom:0;"><strong>You Should Get to Know the Neighborhood</strong></p>
<p style="margin-top:0;  padding-top:0;">I don&#8217;t intend on purchasing a home in a high-crime area, nor do I plan on moving into a neighborhood with exorbitant HOA dues for services I don&#8217;t intend to use. Your new server is going to have a &#8220;neighborhood&#8221; as well when it comes to the network it&#8217;s connected to, so if you plan on outsourcing your IT infrastructure, you should do the same research.</p>
<p>You want your critical environments in a safe place, and the easiest way to get them in the right &#8220;neighborhood&#8221; is to work with a well-established host who&#8217;s able to accommodate what you&#8217;re doing. A $20/mo shared hosting account is great for a personal blog site, but it probably wouldn&#8217;t be a good fit for a busy database server or front-end application servers for an application dependent on advertising for revenue. A mansion worth of furniture doesn&#8217;t fit very well in a studio apartment.</p>
</li>
<li>
<p style="margin-bottom:0; padding-bottom:0;"><strong>You&#8217;re Responsible for Maintenance</strong></p>
<p style="margin-top:0;  padding-top:0;">Ask any homeowner: Continuous improvements &mdash; as well as routine maintenance &#038;mdashl are a requirement. Failure to take care of your property can result in fines and much more costly repairs down the road. Likewise with any server, you have to do your maintenance. Keep your software up to date, practice good security protocols, and continue to monitor for problems. If you don&#8217;t, you could find yourself at the mercy of malicious activity or worse &mdash; catastrophic failure. Which leads me to &#8230;</p>
</li>
<li>
<p style="margin-bottom:0; padding-bottom:0;"><strong>You Need Insurance Against Disaster</strong></p>
<p style="margin-top:0;  padding-top:0;">Homeowner&#8217;s insurance protects you from disaster, and it provides indemnity in the event someone is hurt on your property. Sometimes additional insurance may be required. Many professionals recommend flood insurance to protect from flood damage not covered under a typical homeowner&#8217;s insurance policy. Ask any systems administrator, and they&#8217;ll tell you all about server insurance: BACKUPS. <strong>ALWAYS BACK UP YOUR DATA!!!</strong> The wrong time to figure out that your backups weren&#8217;t properly maintained is when you need them, more specifically in the event of a hardware failure. It&#8217;s a fact of life: Hardware can fail. <a href="http://en.wikipedia.org/wiki/Murphy%27s_law">Murphy&#8217;s Law</a> would suggest it will fail at the worst possible time. Maintain your backups!</p>
</li>
</ul>
<p>I can&#8217;t claim that this is <strong>the</strong> guide to buying a server, but seeing the parallels with buying a new home might be a catalyst for you to look at the server-buying process in a different light. You should consider your infrastructure an <strong>asset</strong> before you simply consider it a <strong>cost</strong>.</p>
<p>-Matthew</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/planning-your-server-infrastructure-buying-a-house/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web Development &#8211; CSS &#8211; Highlight Selection</title>
		<link>http://blog.softlayer.com/2012/web-development-css-highlight-selection/</link>
		<comments>http://blog.softlayer.com/2012/web-development-css-highlight-selection/#comments</comments>
		<pubDate>Tue, 13 Mar 2012 21:07:08 +0000</pubDate>
		<dc:creator>Philip Thompson</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[display]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[highlight]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[selector]]></category>
		<category><![CDATA[style]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tricks]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=7431</guid>
		<description><![CDATA[I immediately fell in love with CSS when we were introduced in late 2000. The ability to style a whole site outside the HTML was a fantastic concept and probably my first true introduction to separation of style and content. Put your words over here, and put how you display those words over there. So [...]]]></description>
			<content:encoded><![CDATA[<p>I immediately fell in love with CSS when we were introduced in late 2000. The ability to style a whole site outside the HTML was a fantastic concept and probably my first true introduction to separation of style and content. Put your words over here, and put how you display those words over there. So simple! Since then I have always been an advocate of cascading style sheets. Today&#8217;s tip will involve an effortless addition that will have your readers say, &#8220;Ooooh. That&#8217;s a clever little change.&#8221;</p>
<p>I find that when I read articles and blogs online, I not only read with my eyes, I scan the page with my mouse. Especially if it&#8217;s a wordy article or not styled in smaller columns, I highlight the text by clicking and dragging to help me maintain my focus. Up until recently, whenever you selected text that way in your browser, your operating system would choose the color of the background highlight. For Windows, this is generally blue. For OS X, this is whatever you&#8217;ve set your preferences to (which is light blue by default).</p>
<p>For those of you that use a newer version of Webkit (Chrome or Safari) or Gecko (Firefox), the site designer can determine what color to highlight your selection of text, and CSS has made it easy.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">/* Webkit */</span>
<span style="color: #339933;">::</span><span style="color: #004000;">selection</span> <span style="color: #009900;">&#123;</span>
    background<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#972F2C;
</span>    color<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#FFF;
</span><span style="color: #009900;">&#125;</span>
<span style="color: #666666; font-style: italic;">/* Gecko/Mozilla */</span>
<span style="color: #339933;">::-</span>moz<span style="color: #339933;">-</span>selection <span style="color: #009900;">&#123;</span>
    background<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#972F2C;
</span>    color<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#FFF;
</span><span style="color: #009900;">&#125;</span></pre></div></div>

<p>As of today, Webkit browsers are the only ones that support <code>::selection</code> without browser prefixing. Firefox requires the <code>-moz-</code> prefix. Here we have set the highlight background color to &#8220;SoftLayer Red&#8221; (<code>#972F2C</code>) and made the text color white (<code>#FFF</code>). It should be noted that earlier versions of Webkit and Gecko did not support anything but the <code>background</code> property. There is still limited support for which CSS properties are allowed during selection. You are unable to change <code>font-style</code>, <code>font-size</code>, <code>text-decoration</code> and many other properties, but we can hope support for most of the properties will be available in the future.</p>
<p>This is pretty cool so far, but we can take it one small step further. Just like other selectors, we can apply the <code>::selection</code> selector to other elements and style each one differently.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">h2<span style="color: #339933;">::</span><span style="color: #004000;">selection</span> <span style="color: #009900;">&#123;</span>
    background<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#B72E33;
</span>    color<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#FFF;
</span><span style="color: #009900;">&#125;</span>
p<span style="color: #339933;">::</span><span style="color: #004000;">selection</span> <span style="color: #009900;">&#123;</span>
    background<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#ACEFB2;
</span><span style="color: #009900;">&#125;</span>
div<span style="color: #339933;">::</span><span style="color: #004000;">selection</span> <span style="color: #009900;">&#123;</span>
    background<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#E4DB80;
</span><span style="color: #009900;">&#125;</span>
span<span style="color: #339933;">::</span><span style="color: #004000;">selection</span> <span style="color: #009900;">&#123;</span>
    background<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#C780E4;
</span>    color<span style="color: #339933;">:</span> <span style="color: #666666; font-style: italic;">#FFF;
</span><span style="color: #009900;">&#125;</span></pre></div></div>

<p>This produces the following:</p>
<p><img class="centered" src="http://cdn.softlayer.com/innerlayer/csshighlightingexample.png" alt="Highlighting Example"/></p>
<p>Surprise your readers and give them some highlight goodness.</p>
<p>Happy coding!</p>
<p>-Philip</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/web-development-css-highlight-selection/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>iptables Tips and Tricks &#8211; Not Locking Yourself Out</title>
		<link>http://blog.softlayer.com/2012/iptables-tips-and-tricks-not-locking-yourself-out/</link>
		<comments>http://blog.softlayer.com/2012/iptables-tips-and-tricks-not-locking-yourself-out/#comments</comments>
		<pubDate>Mon, 05 Mar 2012 16:41:30 +0000</pubDate>
		<dc:creator>Mark Ridlen</dc:creator>
				<category><![CDATA[SoftLayer]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[administration]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[configuration]]></category>
		<category><![CDATA[firewall]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[iptables]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[management]]></category>
		<category><![CDATA[policy]]></category>
		<category><![CDATA[ports]]></category>
		<category><![CDATA[protect]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tricks]]></category>
		<category><![CDATA[troubleshooting]]></category>

		<guid isPermaLink="false">http://blog.softlayer.com/?p=7401</guid>
		<description><![CDATA[The iptables tool is one of the simplest, most powerful tools you can use to protect your server. We&#8217;ve covered port redirection, rule processing and troubleshooting in previous installments to this &#8220;Tips and Tricks&#8221; series, but what happens when iptables turns against you and locks you out of your own system? Getting locked out of [...]]]></description>
			<content:encoded><![CDATA[<p>The <code>iptables</code> tool is one of the simplest, most powerful tools you can use to protect your server. We&#8217;ve covered <a href="http://blog.softlayer.com/2011/iptables-tips-and-tricks-port-redirection/">port redirection</a>, <a href="http://blog.softlayer.com/2012/iptables-tips-and-tricks-rule-processing/">rule processing</a> and <a href="http://blog.softlayer.com/2012/iptables-tips-and-tricks-rule-processing/">troubleshooting</a> in previous installments to this &#8220;Tips and Tricks&#8221; series, but what happens when iptables turns against you and locks you out of your own system? </p>
<p>Getting locked out of a production server can cost both time and money, so it&#8217;s worth your time to avoid this. If you follow the correct procedures, you can safeguard yourself from being firewalled off of your server. Here are seven helpful tips to help you keep your sanity and prevent you from locking yourself out.</p>
<p style="margin-bottom:0;padding-bottom:0;"><strong>Tip 1: Keep a safe ruleset handy.</strong></p>
<p style="margin-top:0;padding-top:0;">If you are starting with a working ruleset, or even if you are trying to troubleshoot an existing ruleset, take a backup of your iptables configuration before you ever start working on it.</p>
<p><code>iptables-save > /root/iptables-safe</code></p>
<p>Then if you do something that prevents your website from working, you can quickly restore it.</p>
<p><code>iptables-restore < /root/iptables-safe</code></p>
<p style="margin-bottom:0;padding-bottom:0;"><strong>Tip 2: Create a cron script that will reload to your safe ruleset every minute during testing.</strong></p>
<p style="margin-top:0;padding-top:0;">This was pointed out to my by a friend who swears by this method. Just write a quick bash script and set a cron entry that will reload it back to the safe set every minute. You'll have to test quickly, but it will keep you from getting locked out.</p>
<p style="margin-bottom:0;padding-bottom:0;"><strong>Tip 3: Have the IPMI KVM ready.</strong></p>
<p style="margin-top:0;padding-top:0;">SoftLayer-pod servers* are equipped with some sort of remote access device. Most of them have a KVM console. You will want to have your VPN connection set up, connected and the KVM window up. You can't paste to and from the KVM, so SSH is typically easier to work with, but it will definitely cut down on the downtime if something does go wrong.</p>
<p><em>*This may not apply to servers that were originally provisioned under another company name.</em></p>
<p style="margin-bottom:0;padding-bottom:0;"><strong>Tip 4: Try to avoid generic rules.</strong></p>
<p style="margin-top:0;padding-top:0;">The more criteria you specify in the rule, the less chance you will have of locking yourself out. I would liken this to a pie. A specific rule is a very thin slice of the pie.</p>
<p><code>iptables -A INPUT -p tcp --dport 22 -s 10.0.0.0/8 -d 123.123.123.123 -j DROP</code></p>
<p>But if you block port 22 from any to any, it's a very large slice.</p>
<p><code>iptables -A INPUT -p tcp --dport 22 -j DROP</code></p>
<p>There are plenty of ways that you can be more specific. For example, using "<code>-i eth0</code>" will limit the processing to a single NIC in your server. This way, it will not apply the rule to <code>eth1</code>.</p>
<p style="margin-bottom:0;padding-bottom:0;"><strong>Tip 5: Whitelist your IP address at the top of your ruleset.</strong></p>
<p style="margin-top:0;padding-top:0;">This may make testing more difficult unless you have a secondary offsite test server, but this is a very effective method of not getting locked out.</p>
<p><code>iptables -I INPUT -s &lt;your IP&gt; -j ACCEPT</code></p>
<p>You need to put this as the FIRST rule in order for it to work properly ("<code>-I</code>" inserts it as the first rule, whereas "<code>-A</code>" appends it to the end of the list).</p>
<p style="margin-bottom:0;padding-bottom:0;"><strong>Tip 6: Know and understand all of the rules in your current configuration.</strong></p>
<p style="margin-top:0;padding-top:0;">Not making the mistake in the first place is half the battle. If you understand the inner workings behind your iptables ruleset, it will make your life easier. Draw a flow chart if you must.</p>
<p style="margin-bottom:0;padding-bottom:0;"><strong>Tip 7: Understand the way that iptables processes rules.</strong></p>
<p style="margin-top:0;padding-top:0;">Remember, the rules start at the top of the chain and go down, unless specified otherwise. Crack open the <a href="http://linux.die.net/man/8/iptables">iptables man page</a> and learn about the options you are using.</p>
<p>-Mark</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.softlayer.com/2012/iptables-tips-and-tricks-not-locking-yourself-out/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
