Posts Tagged 'Implementation'

November 12, 2014

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

After a small throwback post of my original Tips and Tricks – jQuery Select2 blog for our #T4 series, and posting a CSS Blog about Mastering Multiple Backgrounds, it’s time I came back around and finished the HTML5 – Back to Basics with a Strong Foundation series with Part 2!

I highly recommend reading part one of the series. I outlined many HTML5 techniques that had never been possible with anything but Flash or jQuery before. In this blog I’ll continue with additional techniques that I couldn’t fit into the first blog.

I stand by my previous statement that if we forget what we’ve done and scripted for over two decades with previous versions of HTML and return to the basics with HTML5, we can re-learn a whole new foundation that is sure to make us stronger developers and smarter engineers.

IV. No More Declaring Types!

The sole purpose to develop better scripting and tagging languages is to improve efficiency. I think we can all agree that a smarter language should be able to detect certain attributes and tags automatically . . . well now, HTML5 has taken a huge step toward this.

Now <scripts> and <links> can be FREE of the type attribute!

  • Instead of:
  • <link type=”text/css” rel=”stylesheet” href=”css/stylesheet.css” />

    Or

    <script type=”text/javascript” src=”js/javascript.js”></script>

  • We can now just simply declare:
  • <link rel=”stylesheet” href=”css/stylesheet.css” />

    And

    <script src=”js/javascript.js”></script>

Something so little . . . yet so awesome!

V. SEMANTICS! Well . . . partial semantics anyway!

HTML5 supports some semantic tags—the most popular being the header and footers.

No longer do we have to write:

<div id=”header”>
    <h1>Header Content</h1>
</div>
<div id=”footer”>
    <h1>Footer Content</h1>
</div>

Now, with semantic Headers and Footers, we can simply do:

<header>
    <h1>Header Content</h1>
</header>
<footer>
    <h1>Footer Content</h1>
</footer>

Whoo! That’s an AWESOME change. Of course there could be a LOT more semantic changes, but we all know those will be coming soon! Until then, we can enjoy what we have.

VI. Video Support without Third-Party Plugins

Many browsers are jumping on board with providing support for the <video> tag, which allows native playback of videos. Gone are the days of having to use javascript/jQuery or *shudder* Flash to embed videos into your pages.

Check this out:

<video controls preload>
    <source src="myVideo.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="myVideo.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is way too old. <a href="myVideo.mp4">Download instead.</a> </p>
</video>

You’ll notice there are TWO <source> tags; this is because browsers like IE and Safari have already started supporting advanced video formats such as mp4. Firefox and Chrome are still in the process, but for now we still need to provide ogv/ogg videos. It’s only a matter of time before all the browsers will support mp4, but this is definitely a huge step forward from third-party plugins!

You should also notice there are two attributes listed in the <video> tag: controls and preload. Controls embed native video playback controls in the video player while preload allows the video to be preloaded, which is GREAT if you have a page just dedicated to viewing the video.

Thanks for tuning in, and let us know what YOUR favorite new features of HTML5 are! And if you’re interested in a gaming series with HTML5, holla at us, and I’ll get on it! I’ve been dying to write a blog series dedicated to teaching HTML5 gaming with the <canvas> tag!

-Cassandra

September 24, 2014

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

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

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

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

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

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

The old (4 and below) way:

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

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

The new HTML5 way:

<!DOCTYPE html>

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

II. Editable content WITHOUT JavaScript!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-Cassandra

January 13, 2011

API Basics: What is the API?

Over the past few years, there has been a dramatic increase in the use of APIs, or Application Programming Interfaces. An API allows a developer to create software that directly interfaces with another system. A simple example would be an online retail site that drop ships products from a distributor. Without an API, the retail site administrator might have to manually update stock availability and product information, but with an API, the retail site administrator can link directly to the distributor's database to display real-time stock and product changes.

SoftLayer has taken this concept to a whole new level. Most APIs are added to an existing system allowing the developer to interact with a small part of the overall architecture. SoftLayer took a different approach. We built our entire system on the API. This means anything you can do from our Portal, you can do via the API.

The breadth of the API can be seen in its current use cases. On one end of the usage spectrum, customers simply incorporate a few API calls to keep track of their hosting account details like bandwidth usage and invoice information. On the other end, users have built the API into complete management systems that allow control over all aspects of their SoftLayer experience - essentially a custom, personalized portal.

What gives an API its true power is its ability to automate. In a standard system, you can plans for any situation, but someone needs to see the situation and react to it. With the API, the system can automatically react. For example, an administrator could design a system that requires a minimum number of IP addresses for every X number of clients on a server. If a new client is added to the server and a new IP address is needed, the administrator's application can use the API to automatically request an additional block of IPs to be provisioned to the server.

This level of automation can be taken even further: A system is in place that needs to dynamically scale based on traffic. With the power of the API and the use of Cloud Instances, this can be achieved. By designing a system to monitor the current traffic trends, when certain thresholds are reached, the system can automatically request additional instances to be provisioned or excess instances to be removed from the pool and terminated. This system would function without any manual intervention to recognize the issue and react to it. Obviously, the real-time automation saves money because instances are turned up and turned down as they are needed, and it ensures your systems stay up and running. It might even let your systems administrator get a full night of sleep.

There is no limit to the potential applications of the SoftLayer API. Whether you are an individual just starting to program or have a team of developers with years of experience, the API has the tools that you will need to get started.

-Mathew

Subscribe to implementation