Development Posts

Many of us remember when Flash was the “only” way to enhance user experience and create rich media interactivity. It was a bittersweet integration, though … Many users didn’t have the browser compatibility to use it, so some portion of your visitors were left in the dark. Until recently, that user base was relatively small — the purists who didn’t want Flash or the people whose hardware/software couldn’t support it. When Apple decided it wouldn’t enable Flash on the iPhone/iPad, web developers around the world groaned. A HUGE user base (that’s growing exponentially) couldn’t access the rich media and interactive content.

In the last year or so, Adobe released Flash Media Server to circumvent the Apple-imposed restrictions, but the larger web community has responded with a platform that will be both compatible and phenomenally functional: HTML5.

HTML5 allows us to do things we’ve never been able to do before (at least without the hassle of plugins, installations and frustration). Gone are the limitations that resigned HTML to serving as a simple framework for webpages … Now developers can push the limits of what they thought possible. As the platform has matured, some developers have even taken it upon themselves to prototype exactly where this generation of scripting is heading by creating Flash-free browser games.

Yes, you read that right: Games you can actually play on your browser, WITHOUT plugins.

From simple Pong clones that use browser windows as the paddles and ball to adventure-based Zelda-like massively multiplayer online role playing games (MMORPGs) like BrowserQuest, it’s pretty unbelievable to see the tip of the iceberg of possibilities enabled by HTML5 … Though it does seem a bit ironic to say that a Pong clone is such a great example of the potential of the HTML5 platform. Click on the screenshot below to check out BrowserQuest and tell me it doesn’t amaze you:

With an ingenious combination of CSS, JavaScript and HTML5, developers of BrowserQuest have been able to accomplish something that no one has ever seen (nor would ever even have thought possible). Developers are now able to generate dynamic content by injecting JavaScript into their HTML5 canvasses:

<code>
function handleKeyDown(evt){
	keys[evt.keyCode] = true;
}
 
function handleKeyUp(evt){
	keys[evt.keyCode] = false;
}
 
// disable vertical scrolling from arrows :)
document.onkeydown=function(){return event.keyCode!=38 && event.keyCode!=40}
</code>

Look familiar? The game-making process (not syntax!) appears eerily similar to that of any other popular language. The only difference: You don’t need to install this game … You just open your browser and enjoy.

Using a popular port of Box2D, a physics simulator, making pure browser-based games is as simple as “Make. Include. Create.” Here’s a snippit:

<code>
//Make your canvas
<canvas id="game" width="600" height="400"></canvas>  
 
//include your js physics files
 
// create your world
function createWorld() {
	// here we create our world settings for collisions
	var worldAABB = new b2AABB();
	worldAABB.minVertex.Set(-1000, -1000);
	worldAABB.maxVertex.Set(1000, 1000);
	// set gravity vector
	var gravity = new b2Vec2(0, 300);
	var doSleep = true;
	// init our world and return its value
	var world = new b2World(worldAABB, gravity, doSleep);
	return world;
}
</code>

We may be a few years away from building full-scale WoW-level MMORPGs with HTML5, but I think seeing this functionality in native HTML will be a sigh of relief to those that’ve missed out on so much Flash goodness. While developers are building out the next generation of games and apps that will use HTML5, you can keep yourself entertained (and waste hours of time) with the HTML5 port of Angry Birds!

HTML5 is not immune to some browser compatibility issues with older versions, but as it matures and becomes the standard platform for web development, we’re going to see what’s to come in our technology’s immediate future: Pure and simple compatibility for all.

-Cassandra

In the past couple of months we’ve added some really cool Windows Phone 7.1 (Mango) features to the Softlayer Mobile application, including Lives Tiles and Notifications. While a basic Live Tile implementation is relatively easy, there’s a fair amount of coding and architecture requirements to facilitate cooler Live Tile functionality and Notifications … And we’re all about doing things cooler.

Live Tiles is a such great feature of Windows Phone 7 largely because it gives the developer much more control over the device’s user experience when compared to other mobile OSes. Live Tile functionality in its simplest form can be just ‘Pinning’ the Tile to the Start Menu with a deep link to a specific location within the application so that when clicked the user is taken to that location within the app. This can save the user a lot of time in having to navigate deep into an app if they know where they want to go. More advanced features of Live Tiles include programmatically giving the Tile a custom background image and displaying a notification message on the background when the Tile flips.

Adding a Live Tile

To add a Live Tile, a user simply clicks and holds the module they’d like to pin to the start menu. When the context menu appears, the user can select ‘pin as tile,’ and he or she will be taken to the Start page where the new Tile is displayed:

The Magic Behind Sending Notifications

We really wanted to be able to notify a user when a notable event happens on his or her account (new ticket is created/updated, when a bill is overdue, etc.), and Windows Phone 7 provides some pretty phenomenal functionality in that area … I wouldn’t be surprised if other big mobile OSes copy Windows Phone 7′s notifications in the future. When it comes to implementing notifications in SoftLayer Mobile, we needed to handle a few things:

1. Get a Unique App+User Channel URI from Windows Push Notification Server
2. Register URI & Channel Name with the Softlayer Registration Service (WCF we created)
3. Store this URI, Channel Name and the user’s Account in a DB
4. Periodically poll for new tickets or updates (since we don’t have a mechanism yet that can ‘push’ this alert when any notification event is triggered)
5. Send Notification (whether it’s a Toast or Tile notification) to device via the unique URI & Channel name.

I was going to include the architecture diagram here showing this relationship and process, but the designer sitting next to me told that nobody wants to see that.

What do the Numbers on the Tiles Mean?

We wanted to make our Tiles show information that the user would find useful, so we send the account’s total unread ticket count to the main app’s Tile, and we display the account’s unread ticket update count on the “Ticket” Tile we pinned to the Start screen:

Why is the Tile Flipping?

We also have the ability to have the Tiles flip over and show an image or text on the TileBack, so we use that to explain the number shown on the Tile (so you don’t have to remember):

What is a Toast Notification?

A Toast Notification is a message that pops up on the screen for 10 seconds. If the user clicks on it, he or she is taken to the application, but if the notification is not clicked, it will disappear. Here is the Toast Notification that is sent to a user when a ticket is updated if they subscribe to Toast Notifications:

How do I Enable Notifications in SoftLayer Mobile?

To enable Live Tiles, all you have to do is turn on the ‘Use Push Notifications’ option on the Settings view.

You’ll be asked if you’d like to receive Toast Notifications, and if you click ‘OK,’ you’ll start getting them:

We Love Feedback and Requests!

Now that you have Live Tiles & Notifications in Softlayer Mobile for WP7 (and coming soon for iPhone & Android), what else would you like to see in the mobile clients?

-Erik

As a hobby, I dabble in WordPress, so I thought I’d share a few security features I use to secure my WordPress blogs as soon as they’re installed. Nothing in this blog will be earth-shattering, but because security is such a priority, I have no doubt that it will be useful to many of our customers. Often, the answer to the question, “How much security do I need on my site?” is simply, “More,” so even if you have a solid foundation of security, you might learn a new trick or two that you can incorporate into your next (or current) WordPress site.

Move wp-config.php

The first thing I do is change the location of my wp-config.php. By default, it’s installed in the WordPress parent directory. If the config file is in the parent directory, it can be viewed and accessed by Apache, so I move it out of web/root. Because you’re changing the default location of a pretty significant file, you need to tell WordPress how to find it in wp-load.php. Let’s say my WordPress runs out of /webroot on my host … I’d need to make a change around Line 26:

if ( file_exists( ABSPATH . 'wp-config.php') ) {
 
        /** The config file resides in ABSPATH */
        require_once( ABSPATH . 'wp-config.php' );
 
} elseif ( file_exists( dirname(ABSPATH) . '/wp-config.php' ) && ! file_exists( dirname(ABSPATH) . '/wp-settings.php' ) ) {
 
        /** The config file resides one level above ABSPATH but is not part of another install*/
        require_once( dirname(ABSPATH) . '/wp-config.php' );

The code above is the default setup, and the code below is the version with my subtle update incorporated.

if ( file_exists( ABSPATH . 'wp-config.php') ) {
 
        /** The config file resides in ABSPATH */
        require_once( ABSPATH . '../wp-config.php' );
 
} elseif ( file_exists( dirname(ABSPATH) . '..//wp-config.php' ) && ! file_exists( dirname(ABSPATH) . '/wp-settings.php' ) ) {
 
        /** The config file resides one level above ABSPATH but is not part of another install*/
        require_once( dirname(ABSPATH) . '../wp-config.php' );

All we’re doing is telling the application that the wp-config.php file is one directory higher. By making this simple change, you ensure that only the application can see your wp-config.php script.

Turn Down Access to /wp-admin

After I make that change, I want to turn down access to /wp-admin. I allow users to contribute on some of my blogs, but I don’t want them to do so from /wp-admin; only users with admin rights should be able to access that panel. To limit access to /wp-admin, I recommend the plugin uCan Post. This plugin creates a page that allows users to write posts and submit them within your theme.

But won’t a user just be able to navigate to http://site.com/wp-admin? Yes … Until we add a simple function to our theme’s functions.php file to limit that access. At the bottom of your functions.php file, add this:

############ Disable admin access for users ############

add_action('admin_init', 'no_more_dashboard');
function no_more_dashboard() {
  if (!current_user_can('manage_options') && $_SERVER['DOING_AJAX'] != '/wp-admin/admin-ajax.php') {
  wp_redirect(site_url()); exit;
  }
}
 
###########################################################

Log in as a non-admin user, and you’ll get redirected to the blog’s home page if you try to access the admin panel. Voila!

Start Securing the WordPress Database

Before you go any further, you need to look at WordPress database security. This is the most important piece in my opinion, and it’s not just because I’m a DBA. WordPress never needs all permissions. The only permissions WordPress needs to function are ALTER, CREATE, CREATE TEMPORARY TABLES, DELETE, DROP, INDEX, INSERT, LOCK TABLES, SELECT and UPDATE.

If you run WordPress and MySQL on the same server the permissions grant would look something like:

GRANT ALTER, CREATE, CREATE TEMPORARY TABLES, DELETE, DROP, INDEX, INSERT, LOCK TABLES, SELECT, UPDATE ON <DATABASE>.* TO <USER>@'localhost' IDENTIFIED BY '<PASSWORD>';

If you have a separate database server, make sure the host of the webserver is allowed to connect to the database server:

GRANT ALTER, CREATE, CREATE TEMPORARY TABLES, DELETE, DROP, INDEX, INSERT, LOCK TABLES, SELECT, UPDATE ON <DATABASE>.* TO <USER>@'<ip of web server' IDENTIFIED BY '<PASSWORD>';

The password you use should be random, and you should not need to change this. DO NOT USE THE SAME PASSWORD AS YOUR ADMIN ACCOUNT.

By taking those quick steps, we’re able to go a long way to securing a default WordPress installation. There are other plugins out there that are great tools to enhance your blog’s security, and once you’ve got the fundamental security updates in place, you might want to check some of them out. Login LockDown is designed to stop brute force login attempts, and Secure WordPress has some great additional features.

What else do you do to secure your WordPress sites?

-Lee

Last week, I spent a few days at GDC in San Francisco, getting a glimpse into the latest games hitting the market. Game developers are a unique bunch, and that uniqueness goes beyond the unbelievable volume of NOS Energy Drinks they consume … They like to test and push the IT envelope, making games more diverse, interactive and social.

The new crop of games showcased at GDC is more resource-intensive — it’s almost like watching an IT arms race; they’re upping the ante for all online gaming companies. The appetite from the public remains relentless, and the pay-off can be huge. Consider that gaming industry research firm DFC Intelligence predicts that worldwide market revenue generated solely from online games is set to reach $26.4 billion in 2015, more than double the $11.9 achieved in 2009.

That’s where SoftLayer comes in. We understand the high stakes in the gaming world and have tailored our IaaS offerings for an optimal end-user experience that stretches from initial release to everyday play. Take a look at what game developer OMGPOP (a SoftLayer customer) achieved with Draw Something: Almost overnight it became the #1 application in Apple’s App Store, tallying more than 26 million downloads in just a few weeks. To put the volume of gameplay into perspective, the game itself is generating more than 30 hours of drawings per second. That’s what what we refer to as “Internet Scale.” When YouTube hit one hour of video uploads per second, they came up with a pretty impressive presentation to talk about that scale … and that’s only one hour per second.

Gamers require a high-performance, always on, graphically attractive and quick-responding experience. If they don’t get that experience, they move on to the next game that can give it to them. With our core strengths of automation and extensive network reach, game developers come to us to easily enable that experience, and in return, they get a platform where they can develop, test, deploy and yes, play their latest games. True “Internet Scale” with easy consumptive billing … Get in and out quickly, and use only what you need.

Some of the most interesting and innovative use cases of how customers take advantage of our platform come from the gaming industry. Because we make it easy to rapidly provision resources (deploy dedicated servers in less than two hours and cloud servers in as few as five minutes) in an automated way (our API), many developers have started incorporating cloud-like functions into their games and applications that add dedicated resources to their infrastructure on-demand as you’d only expect to see in a virtual environment. Now that Flex Images are available, we’re expecting to see a lot more of that.

As I was speaking with a few customers on the show floor, I was amazed to hear how passionate they were about what one called the “secret ingredient” at SoftLayer: Our network. He talked about his trials and tribulations in delivering global reach and performance before he transitioned his infrastructure to SoftLayer, and hearing what our high-bandwidth and low-latency architecture has meant for his games was an affirmation for all of the work we’ve put into creating (and continuing to build) the network.

The rapid pace of innovation and change that keeps the gaming industry going is almost electric … When you walk into a room filled with game developers, their energy is contagious. We ended GDC with an opportunity to do just that. We were proud to sponsor a launch party for our friends at East Side Game Studios as the celebrated the release of two new games — Zombinis and Ruby Skies. Since their NomNom Combo puzzle game is one of the most addicting games on my iPhone, it was a no-brainer to hook up with them at GDC. If you want a peek into the party, check out our GDC photo album on Facebook.

To give you an idea of how much the gaming culture permeates the SoftLayer offices, I need only point out a graffiti mural on one of the walls in our HQ office in Dallas. Because we sometimes get nostalgic for the days of misspent youth in video arcades playing Pac Man, Donkey Kong and Super Mario, we incorporated those iconic games in a piece of artwork in our office:

If you are an aspiring game developer, we’d like to hear from you and help enable the next Internet gaming sensation … Having a good amount of experience with our existing customer base should assure you that we know what we’re talking about. For now, though, it’s my turn to go “Draw Something.”

-@gkdog

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’s tip will involve an effortless addition that will have your readers say, “Ooooh. That’s a clever little change.”

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’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’ve set your preferences to (which is light blue by default).

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.

/* Webkit */
::selection {
    background: #972F2C;
    color: #FFF;
}
/* Gecko/Mozilla */
::-moz-selection {
    background: #972F2C;
    color: #FFF;
}

As of today, Webkit browsers are the only ones that support ::selection without browser prefixing. Firefox requires the -moz- prefix. Here we have set the highlight background color to “SoftLayer Red” (#972F2C) and made the text color white (#FFF). It should be noted that earlier versions of Webkit and Gecko did not support anything but the background property. There is still limited support for which CSS properties are allowed during selection. You are unable to change font-style, font-size, text-decoration and many other properties, but we can hope support for most of the properties will be available in the future.

This is pretty cool so far, but we can take it one small step further. Just like other selectors, we can apply the ::selection selector to other elements and style each one differently.

h2::selection {
    background: #B72E33;
    color: #FFF;
}
p::selection {
    background: #ACEFB2;
}
div::selection {
    background: #E4DB80;
}
span::selection {
    background: #C780E4;
    color: #FFF;
}

This produces the following:

Surprise your readers and give them some highlight goodness.

Happy coding!

-Philip

This is a guest blog featuring Kontagent, one of this month’s addition to the SoftLayer Technology Partners Marketplace. Kontagent’s kSuite Analytics Platform is a leading enterprise analytics solution for social and mobile application developers. Its powerful dashboard and data science expertise provide organization-wide insights into how customers interact within applications and how to act on that data. Below the video, you’ll see an excerpt from a very interesting interview they facilitated with Gaia Online’s CEO with fantastic insight into mobile app metrics.

Important Mobile App Metrics to Track

At Kontagent, we’ve helped hundreds of social customers win by helping them gain better insights into their users’ behaviors. We’re always improving our already-powerful, best-in-class analytics platform, and we’ve been leveraging our knowledge and experience to help many of our social customers make a successful transition into the mobile space, too.

Whether you’re in the early stages of developing a mobile application, or you’ve already launched it and have a substantial user base, looking to social app developers for a history lesson on how to do it right can give you a huge head-start, and greater chance at success.

Gaia Online has “done it right” with Monster Galaxy — a hit on both Facebook and iOS. In the first installment of our Kontagent Konnect Executive Interview Series, we spoke with CEO Mike Sego on how the company is applying many of the lessons it learned in moving social-to-mobile, including:

• The metrics that are most important to succeeding on mobile
• How to monetize on the F2P model
• How to successfully split-test on iOS (yes, it is possible!)
• Other tactics used to keep players engaged and coming back for more

Q: What are the overarching fundamentals for developers who want to make the social to mobile transition? Do these fundamentals also apply to mobile developers in general?
A: Applying the knowledge you gained on Facebook to developing for mobile is the most effective way we’ve found to succeed in the mobile space.

When it comes to content, the mechanics are almost identical for what motivates user engagement, retention, and monetization between mobile and social. Appointment mechanics, energy mechanics, leaving players wanting more, designing specific goals that are just out of reach until multiple play sessions, etc.—the user experience is consistent.

When it comes to social and mobile game apps, we have found that free-to-play models are the most successful at attracting users. Beyond that, you should focus on a very tight conversion funnel; once a new user has installed your application, analyze every action she takes through the levels or stages of your app. When you start looking at cohorts of users, if there is a spike in drop-offs, you should start asking yourself, ‘What is it about this particular stage that could be turning off users? Did I make the level too difficult? Was it not difficult enough? What are some other incentives I can bake into this particular point of the app to get them to keep going?’

But, as you continue to develop your application, keep in mind that you should develop and release quickly, and test often. The trick is to test, fine-tune and iterate with user data. These insights will help you to improve conversion. Spending a disproportionate amount of time instrumenting and scrutinizing the new user experience will pay dividends down the line. This is true for both social and mobile games.

Q: What are the metrics you pay most attention to?
Just as it was in social, the two biggest levers in mobile are still minimizing customer acquisition costs (CAC), and maximizing lifetime value (LTV). The question boils down to this: How can we acquire as many users as possible, for as little money as possible? And, how can we generate as much revenue as possible from those users? Everything else is an input into those two major metrics because those two metrics are what will ultimately determine if you have a scalable hit or a game that just won’t pay for itself.

The full interview goes on a bit longer, and it has profound responses topics we alluded to earlier in the post. We don’t want to over-stay our generous welcome here on the SoftLayer blog, so if social and mobile application development are of interest to you, register here (for free) to learn more from the complete interview.

-Catherine Mylinh, Kontagent

This is a guest blog from Librato about Silverline. Silverline gives detailed information, presented in graphical form, on the actual usage of processor, memory and storage and network bandwidth at the application level. It also provides reliable estimates of application resource “demand,” which allows you to identify resource constraints as a potential source of performance issues and helps with capacity planning.

The Missing Link in Managing Cloud-Hosted Applications

Would you agree that one of the factors impacting the Quality of Service delivered by your applications is the availability of resources required for their execution? If you do, then you may wonder – as I do – why there aren’t more tools available to help you monitor and manage application resource consumption.

DevOps and operations teams use Cloud Resource Monitoring to keep track of the health and utilization of cloud resources, Real User Monitoring to ensure that their users experience the Quality of Service they expect, and Application Performance Management to find and fix performance issues in their applications.

What’s often missing is the ability to:

• Monitor and manage the use of resources at application level
• Ensure availability of resources
• Help in root cause analysis
• Improve resource utilization
• Do better capacity planning

Our Silverline Application Resource Management service fills this void by providing you detailed, application level data on the consumption of server resources (processor, memory, disk I/O and network I/O) and on the “demand” for these resources (i.e. how much of each resource an application would use if not restricted by resource availability). You can use this information to detect sudden changes and unusual patterns in resource consumption, identify situations in which applications are starved for resources, and to do capacity planning.

Silverline also allows you to guarantee availability of resources for individual applications or groups of applications, by setting resource quota. It guarantees that an application always receives resources up to its quota if it needs them but lets other applications use resources while it doesn’t need them. This makes it possible to run multiple applications on a server instance and guarantee that they will not interfere with each other, while at the same time improving the utilization of resources. It also allows you to make sure that critical applications (e.g. for collecting diagnostic data) are never starved for resources.

As a special case, you can use quota to let background workloads “harvest” spare resources: Simply set their resource quota to zero and they will only use resources not required by higher priority applications.

Silverline’s event handling feature allows you to set thresholds on resource consumption that can be used to send alarms or initiate automated actions. This allows you to receive early indications of problems like when an application’s resource consumption is exceeding normal levels or there is a significant gap between its resource use and resource demand. You can also take automated actions like killing rogue applications that consume too many resources.

If you’re looking for ways to improve the performance and availability of your SaaS or PaaS solution or to improve the utilization of your Softlayer cloud resources, give Silverline a try.

-Fred van den Bosch, Librato

All but gone are the days of plain, static webpages flowered with horrible repeating neon backgrounds and covered with nauseating animated GIFs created by amateur designers that would make your mother cry and induce seizures in your grandpa. Needless to say, we have come a long way since Al Gore first “created the intarwebs” in the early ’90′s. For those of you born in this century, that’s the 1990′s … Yes, the World Wide Web is still very new. Luckily for the seven billion people on this lovely planet, many advancements have been introduced into our web browsers that make our lives as designers and developers just a little bit more tolerable.

Welcome to the third installment in Web Development series. If you’re just joining us, the first posts in the series covered JavaScript Optimization and HTML5 Custom Data Attributes … If you haven’t read those yet, take a few minutes to catch up and head back to this blog where we’ll be looking at how custom web fonts can add a little spice to your already-fantastic website.

If you’re like me, you’ve probably used the same three or four fonts on most sites you’ve designed in the past: Arial, Courier New, Trebuchet MS and Verdana. You know that pretty much all browsers will have support for these “core” fonts, so you never ventured beyond them because you wanted the experience to remain the same for everyone, no matter what browser a user was using to surf. If you were adventurous and wanted to throw in a little typographical deviation, you might have created a custom image of the text in whatever font Photoshop would allow, but those days are in the past (or at least they should be).

Why is using an image instead of plain text unfriendly?

1. Lack of Flexibility – Creating an image is time-consuming. Even if you have really fast fingers and know your way around Photoshop, it will never be as fast as simply typing that text into your favorite editor. Also, you can’t change the styles (font-size, color, text-decoration, etc.) of an image using CSS like you can with text.
2. Lack of Accessibility – Not everyone is alike. Some of your readers or clients may have impairments that require screen readers or a really large font. Using an image – especially one that doesn’t contain a good long description – prevents those users from getting the full experience. Also, some people use text-only browsers that don’t display any images. Think about your whole audience!
3. More to Download – Plain text doesn’t require the same number of bytes as an image of that same text. By not having another image, you are saving on the amount of time it takes to load your page.

Now that we’re on the same page about the downsides of the “old way” of doing things, let’s look at some cool HTML5-powered methods for displaying custom fonts. Before we get started, we need to have some custom fonts to use. Google has a nice interface for downloading custom fonts (http://www.google.com/webfonts), and there are plenty of other sites that provide free and non-free fonts that can suit your taste/needs. You can pick and choose which ones you’d like to use (remembering to always follow copyright guidelines), and once you’ve created and downloaded your collection of fonts, you’ll need to setup your CSS to read them.

For simplicity, my file structure will be setup with the HTML and CSS files in the same root directory. I will have a fonts directory where I will keep all my custom fonts.

/fonts.html
/fonts.css
/styles.css
/fonts/MyCustomFont/MyCustomFont-Regular.ttf
/fonts/MyCustomFont/MyCustomFont-Bold.ttf
/fonts/...

My fonts.html file will include the two CSS files in the head section. The order in which you include the CSS files does not matter.

<link rel="stylesheet" type="text/css" href="fonts.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />

The fonts.css file will include the definitions for all of our custom fonts. The styles.css file will be our main CSS file for our website. Defining our custom fonts (in fonts.css) is really simple:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.ttf') format('truetype');
}

It’s almost too easy thanks to HTML5!

Let’s break this down into its components to better understand what’s going on here. The @font-face declaration will be ignored by older browsers that don’t understand it, so this standards-compliant definition degrades nicely. The font-family descriptor is the name that you’ll use to reference this font family in your other CSS file(s). The src descriptor contains the location of where your font is stored and the format of the font.

There are several things to note here. The quotes around MyCustomFont in the font-family descriptor are optional. If it were My Custom Font instead (in fonts.css and styles.css), it would still be successfully read. The quotes around the url portion are also optional. However, the quotes around the format portion are not optional. To keep things consistent, I have a habit of adding quotes around all of these items.

An alternative way to define the same font would be to leave off the format portion of the src descriptor. Browsers don’t need the format portion if it’s a standard font format (described below).

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.ttf');
}

Like standard url inclusions in other CSS definitions, the URL item is relative to the location of the definition file (fonts.css). The URL may also be an absolute location or point to a different website altogether. If using the Google web fonts site mentioned earlier (or similar site), you may simply point the URL to the location suggested instead of downloading the actual font.

If you’ve dealt with web fonts before, you may already be familiar with the multiple formats: WOFF (Web Open Font Format, .woff), TrueType (.ttf), OpenType (.ttf, .otf), Embedded Open Type (.eot) and SVG Font (.svg, .svgz). I won’t go into great detail here about these, but if you’re interested in learning more, Google and W3C are great resources.

It should be noted that all browsers are not alike (no shock there) and some may not render some font formats correctly or at all. You can get around this by including multiple src descriptors in your @font-face declaration to try and support all the browsers.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.eot'); /* Old IE */
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.ttf'); /* Cool browsers */
}

Now that we have our font definition setup, we have to include our new custom font in our styles.css. You’ve done this plenty of times:

h1, p {
    font-family: MyCustomFont, Arial;
}

There you go! For some reason if MyCustomFont is not understood, the browser will default to Arial. This degrades gracefully and is really simple to use. One thing to note is that even though your fonts.css file may define twenty custom fonts, only the fonts that are included and used in your styles.css file will be downloaded. This is very smart of the browser – it only downloads what it’s going to use.

So now you have one more tool to add to your development box. As more users adopt newer, standards-compliant browsers, it’s easier to give your site some spice without the headaches of creating unnecessary images. Go forth and impress your friends with your new web font knowledge!

Happy Coding!

-Philip

P.S. As a bonus, you can check out the in-line style declaration in the source of this post to see how “Happy Coding!” is coded to use the Monofett font family.

I recently worked on a project that involved creating promotion codes for our clients. I wanted to make this tool as simple as possible to use and because this involved dealing with thousands of our products in dozens of categories with custom pricing for each of these products, I had to find a generic way to deal with client-side form validation. I didn’t want to write custom JavaScript functions for each of the required inputs, so I decided to use custom data attributes.

Last month, we started a series focusing on web development tips and tricks with a post about JavaScript optimization. In this installment, we’re cover how to use HTML5 custom data attributes to assist you in validating forms.

Custom data attributes for elements are “[attributes] in no namespace whose name starts with the string ‘data-’, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).” Thanks W3C. That definition is bookish, so let’s break it down and look at some examples.

Valid:

<div data-name="Philip">Mr. Thompson is an okay guy.</div>
<a href="softlayer.com" data-company-name="SoftLayer" data-company-state="TX">SoftLayer</a>
<li data-color="blue">Smurfs</li>

Invalid:

// This attribute is not prefixed with 'data-'
    <h2 database-id="244">Food</h2>
 
// These 2 attributes contain capital letters in the attribute names
    <p data-firstName="Ashley" data-lastName="Thompson">...</p>
 
// This attribute does not have any valid characters following 'data-'
    <img src="/images/pizza.png" data-="Sausage" />

Now that you know what custom data attributes are, why would we use them? Custom attributes allow us to relate specific information to particular elements. This information is hidden to the end user, so we don’t have to worry about the data cluttering screen space and we don’t have to create separate hidden elements whose purpose is to hold custom data (which is just bad practice). This data can be used by a JavaScript programmer to many different ends. Among the most common use cases are to manipulate elements, provide custom styles (using CSS) and perform form validation. In this post, we’ll focus on form validation.

Click through for a detailed, step-by-step example. »

This is a guest blog from Librato about Metrics. Metrics brings all of your monitoring data together in a unified hosted environment, enabling you to detect signs of problems early, minimize their impact through automated actions, and quickly find and fix their root cause.

Measure Everything!

If you’re a SaaS or PaaS provider, making sure that you deliver the Quality of Service that your users expect is probably your highest priority. This means that you rely on continuously monitoring all aspects of your operation that can alert you to unusual events and help you find and fix the root cause of any service degradations. User complaints cannot be the first sign of trouble, and there is no time to hunt for data that has not already been collected.

This need for information is the main reason why “Measure Everything” is the new principle by which SaaS and PaaS clouds are managed and why many DevOps and Operations teams are using a variety of open source and commercial tools to monitor their infrastructure. In addition they often need to monitor data that is collected with custom tools because it is specific to their application environment. Since each tool comes with its own user interface, alerting mechanism and set-up requirements, the monitoring work-flow is disjointed, wastes time, and – most importantly – introduces problems when trying to correlate data from different tools for rapid root cause analysis.

Wouldn’t it be nice if – just as there are standard Database Management platforms – there were Time Series Data Management platforms that provide uniform visualization, correlation and alerting, and a scalable, redundant repository for your metrics? Ideally, that platform would be delivered as a service and could even be embedded by SaaS and PaaS vendors to allow users to monitor their services directly.

Librato Metrics is the platform we built to meet that critical need. Designed from the ground up with an “API first” approach, Metrics allows customers and partners to easily send it any time series data and understand how that data fits with other data they are collecting.

If you want to provide your users with monitoring capabilities, you can integrate and embed Metrics at whatever level best fits your needs: data repository, instruments for your own dashboards, or complete “white label” dashboards. By programmatically creating user accounts and transparently signing your users onto the Metrics platform, you can deliver a seamless experience.

We used “flexible,” “affordable” and “simple” as our key mottos in developing a business model for Metrics. Our goal was to make the platform easy to adopt and completely transparent, empowering every organization to take advantage of the “measure everything” philosophy. We charge a modest amount (in “micro-dollars” actually) per measurement, provide a 30-day free trial, and charge you monthly for what you have used … there are no minimum fees or lock-ins.

To make it easy to adopt Metrics, we provide connectors for a variety of popular collection agents such as StatsD, CollectD, and JMX. To help build a broad collection of useful collectors and connectors to existing tools, we’re building a community and ecosystem where Metrics users and tool developers can contribute. We hope you’ll try out the platform and help us grow our community!

-Fred van den Bosch, Librato