The Web Applications (WebApps) Working Group and the Web Application Security (WebAppSec) Working Group have published today a Recommendation of Cross-Origin Resource Sharing (CORS). This document defines a mechanism to enable client-side cross-origin requests. Specifications that enable an API to make cross-origin requests to resources can use the algorithms defined by this specification. If such an API is used on http://example.org resources, a resource on http://hello-world.example can opt in using the mechanism described by this specification (e.g., specifying Access-Control-Allow-Origin: http://example.org as response header), which would allow that resource to be fetched cross-origin from http://example.org. Learn more about the Rich Web Client Activity and the Security Activity.

Unobtrusive JavaScript is a best practice methodology for attaching JavaScript to the front-end of a website. It’s an ideal to strive toward and something we should bear in mind whenever we’re adding JavaScript to a site.

It is the separation of behaviour from markup or structure. Just like the CSS gurus of old taught us there should be a separation of layout from markup, there should be a separation of behaviour from markup. That’s HTML for the content and structure of the document, CSS for the layout and style, and Unobtrusive JavaScript for behaviour and interactivity. Simple.

What?

It boils down to this: your site, and it’s content, should still be accessible when JavaScript is unavailable – the only way to guarantee this is by employing Unobtrusive JavaScript techniques.

Adding JavaScript to your site should be an additive process, bringing better experiences to those who have the capabilities of running your code, not a destructive one for those who for whatever reason have JavaScript disabled or blocked or not fully implemented. This is known as Progressive Enhancement.

How?

Let’s look at an example where you want to open a popup window for external links on your site.

The Downright Hackish Way

The first way is the downright hackish way &emdash; a technique that early on gave JavaScript a bad reputation &emdash; of hijacking the href attribute on all anchor elements on the site.

<a href="javascript:window.open('http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript')">W3C Article</a> 
    

This poses a big problem if JavaScript is unavailable. The link won’t work! It’s not a very maintainable technique either, since changing your linking technique would require you to change every external link.

The Less Obtrusive Way

The less obtrusive way would be to add the JavaScript to the onclick handler for every link.

<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript" onclick="window.open('http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript');return false;">W3C Article</a> 
    

While this is still a maintenance nightmare, it does work if the browser’s JavaScript is disabled. Without JavaScript the user won’t follow the link in a new window, but will be able to follow the link through the default link behavior.

The Unobtrusive Way

Now to the best way, the unobtrusive way. We’ll add a class attribute to all links that are to open in a new window. This is just like how we’d add a class to style similar elements. However, in this case we’ll add a class to add behavior to similar elements. Let’s add a class of new_window to our links.

<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript" class="new_window">W3C Article</a>
    
    <a href="https://en.wikipedia.org/wiki/Unobtrusive_JavaScript" class="new_window">Wikipedia Article</a>
    

Now we have two links, both with the class new_window, but with no JavaScript. As a bonus we could style new_window links differently too, but that’s not what we’re doing right now, we’re adding behaviour.

Next, create a separate JavaScript file called app.js. Let’s use JavaScript to get all the elements with the class of new_window. We do this with the following code:

    var anchors = document.getElementsByClassName("new_window");
    

Now we have a variable anchors with all anchors on the document with the class of new_window. Now we can iterate over all the anchors and add a function to the onclick attribute.

for (var i=0; i < anchors.length; i++) {
        anchors[i].onclick = function() { };
    };
    

We can also add a little bit of code to open the link in new window.

for (var i=0; i < anchors.length; i++) {
        anchors[i].onclick = function() {
            window.open(this.href);
            return false;
        };
    };
    

We’re using this.href instead of typing out the URL string (like "http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript") because now the same code is being used on multiple links. Since we’re binding a function to onclick we have the this object to play with. In the on click handler, the this object is the given anchor that the onclick function is bound to. So this.href is the href of the link that has been clicked.

Why?

There are a number of reasons why you’d want to use Unobtrusive JavaScript. From the how-to above you can see that maintenance and updating functionality is a lot easier. But the benefits of being unobtrusive aren’t purely selfish. It’s about the user.

When a user comes to your site you can’t guarantee the device, browser or connection they have to your site. For example, older browsers wouldn’t be able to execute the above code since they don’t support the getElementsByClassName method. This would stop the script from being executed. Still they will be able to go to the site and follow the link in spite of getting a JavaScript warning in the status bar of their browser. Ideally, to be truly unobtrusive, you’d write some more code to fall back on to with older browsers, or alternatively use something like jQuery.

In the case of connectivity, JavaScript files should be included at the bottom of the page, giving more weighting to the HTML document and stylesheets to be downloaded first. Say your user is connecting via a mobile device with flaky connectivity. The HTML and CSS may get downloaded before the connection disconnects and fails to download the JavaScript files. You don’t want this mobile user to have a poorer experience than they’re already having. Imagine someone accessing your site from work and their somewhat paranoid system administrators strip out all JavaScript tags through their proxy or disable JavaScript on all their computers. The user is totally out of control in this case and they shouldn’t be penalised by not having their experience hindered by your inability to provide content or functionality that would work in their scenario.

Finally there are cases where screen-readers for visually impaired users disable or don’t fully implement JavaScript, so it’s important to make your content accessible. An accessible site is also a search engine optimised site. Having your content there-and-then on your site, behind working links, will guarantee the even the least sophisticated search engine spiders will be able to index your site and it’s contents. An indexed site is a visited site.

Conclusion

The astute readers will have noticed that even the less selfish reasons will ultimately pay off in your favor. Being unobtrusive on your own, your employer’s, or your client’s projects will ultimately bring more users and paying customers to your site. It’s win-win.

In your next project, when adding interactive behavior, why not try to employ unobtrusive techniques to your JavaScript code?

You can check out the sample code on github or download the source files in a zip file.

The post What is Unobtrusive JavaScript and Why it’s Important? appeared first on Treehouse Blog.

Three Recommendations were published today to enhance data interoperability, especially in government data. Each one specifies an RDF vocabulary (a set of properties and classes) for conveying a particular kind of information:

• The Data Catalog (DCAT) Vocabulary is used to provide information about available data sources. When data sources are described using DCAT, it becomes much easier to create high-quality integrated and customized catalogs including entries from many different providers. Many national data portals are already using DCAT.
• The Data Cube Vocabulary brings the cube model underlying SDMX (Statistical Data and Metadata eXchange, a popular ISO standard) to Linked Data. This vocabulary enables statistical and other regular data, such as measurements, to be published and then integrated and analyzed with RDF-based tools.
• The Organization Ontology provides a powerful and flexible vocabulary for expressing the official relationships and roles within an organization. This allows for interoperation of personnel tools and will support emerging socially-aware software.

All three vocabularies have been developed by the Government Linked Data Working Group, but they are applicable beyond just government data. For a list of data sources or software known to be using these vocabularies, see the “Implementation Report” linked from each document. Learn more about the Data Activity.

The following is a guest post by Zach Saucier. Zach cooks up some pretty inspiring animations over on CodePen. I couldn't be happier that he wanted to share some of the tricks he uses to create them, especially because they are things we all strive for: efficiency, reusability, practicality, and speed.

I've fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I've found some tricks to make CSS do things you might not know it could do. I'd like to share them with you.

#1) Jump to another state mid-animation

CSS animation makes it easy to transition properties to a new value over time. They also have the ability to jump properties to a new value virtually instantly. The trick is to use two keyframes with a very small difference, around .001% works well.

@keyframes toggleOpacity {
      50% { opacity: 1; } /* Turn off */
      50.001% { opacity: 0.4; }
    
      /* Keep off state for a short period */
    
      52.999% { opacity: 0.4; } /* Turn back on */
      53% { opacity: 1; }
    }

The following is an extreme example of this, toggling opacity and a text-shadow to mimic a flickering billboard light.

See the Pen No Vacancy 404 CSS Only by Zach Saucier (@Zeaklous) on CodePen.

#2) Negative animation delays

A positive animation delay is where the animation waits a certain amount of time to begin. A negative animation delay starts the animation immediately, as if that amount of time has already gone by. In other words, start the animation at a state further into the animation cycle. This allows animations to be reused across several elements, given all that needs changing is the timing.

Here is an example of that where each circle begins immediately at a different state in the animation cycle:

See the Pen Circle Snake by Zach Saucier (@Zeaklous) on CodePen

#3) Proportional animations

I try to make everything that I put into production be as responsive as possible, including my animations. Responsiveness for CSS animations is not possible for all animations I have created, but sometimes it is, using percentages and other relative units.

In many of my animations, I use elements like circles and squares which need the a proportional width and height. You might think I need to use fixed width & height values to keep them that way, but that's not the case! I am able to create them using a percentage width, zero height, and percentage padding. The padding-bottom is the trick to keep it proportional to the width, like this:

.container {
      position: relative;
      display: block;
      width: 100%;
      height: 0;
      padding-bottom: 100%;
    }

You can see this in practice on the following demo by changing the size of the window it is in. The demo also makes use of negative animation delays.

See the Pen Responsive CSS bars by Zach Saucier (@Zeaklous) on CodePen.

#4) Changing transform-origin mid-animation

While working on one of my animations, I was surprised to find out that not only can transformation-origin be changed mid-animation, it is also animatable! In the example below, this allows us to create one animation using rotations on different axes instead of using four separate animations.

See the Pen Change transformation-origin mid animation by Zach Saucier (@Zeaklous) on CodePen

The downside to this trick is that you can't use animation-mode: forwards; for only a part of an animation. This means that we have to re-position the element to an equivalent of its state before applying the change in transformation-origin. In the above example, this is done by using translates to mimic the rotation's effects. However, this technique can get tedious on more complex examples, as seen here.

#5) Negative transform-origins

You are able to set a negative transform-origin, which is useful for things like creating circular movement paths. Instead of specifying specific translate and rotation values using one element to create circular animations as Lea Verou describes, we can do it much more simply by using negative transform-origin values in addition to a second element or pseudo-element (one element if we want the element to rotate as well as move in a circular path). By using varying values of a negative transform origin, we can reuse the same animation for multiple elements while still retaining circular motion for each.

See the Pen CSS Circular Motion Technique by Zach Saucier (@Zeaklous) on CodePen.

#6) Box shadow magic

For animations of simple no-content shapes, box-shadow is quite useful. The box-shadow property can create multiple borders around elements. That idea, combined with some displacement, can create new animatable "elements" out of no additional HTML elements. This enables us to create the following animation, which appears to be six circular elements rotating circularly, but is in fact one element with some offset box-shadow shapes.

See the Pen Single element color loader by Zach Saucier (@Zeaklous) on CodePen

Sadly, percents are not supported by any box-shadow properties so they are not as easily responsive as a native HTML element. However they can still be changed manually in an animation or by using transform:scale(n) on the actual HTML element which they are a part of.

#7) Using pseudo-elements

Similarly with box-shadows, pseudo elements can be used to add more content to the appearance of a single element. They can have separate animations from their parent, their own box-shadows, and are very similar to being child elements of without the HTML markup. This let's us create amazing single element creations like the one below.

See the Pen Single Element gif Recreation by Zach Saucier (@Zeaklous) on CodePen

In the example, all of the large circles around the middle flashing circle, as well as two of the smaller circles on the rim (opposite from each other) are box-shadows on the main element. The other two small circles are part of a pseudo-element's box-shadow and the ring made of dashes is an SVG applied as a background on the other pseudo element.

Some other things to note

Use transforms when you can

Transforms perform better than their non-transform counterparts as Paul Irish has shown (also). Primarily this means using scale and translate over changing the dimensions or top/left values.

Transforms also allow for more responsive design, allowing things such as scale to be used relative to their original size, as is shown in this animation by Amos.

Not using transforms can also cause problems that are hard to catch. For example, in this animation of mine the elements were being colored incorrectly in Chrome although the values themselves were correct. After switching it to use transforms all my problems were solved.

z-index can cause problems

I probably spend more time fixing z-index issues with my animations more than any other issue. Z-indexes are handled differently from vendor to vendor. In animations, the primary difference is that Mozilla does not animate z-index values, they have elements jump from one z-index to the next, whereas vendors like webkit do animate the z-index value.

Another thing to note is that if one wants their pseudo elements to appear behind their parent element, the pseudo element must have a negative z-index and the parent cannot have a stacking other than the default, which means you can't apply a z-index or anything else that takes the parent out of its natural stacking context.

One last trick dealing with z-index is one that deals with opacity. Whenever an element is given an opacity other than the default "1", it gains its own stacking context. For more information on this, check out Philip Walton's post

Get inspired

Whether it's something you see in the real world, an interesting web page that you find online, part of a video intro, a gif, or something else entirely, find things that you think may be possible to create and try to do so!

I have found that not looking at how the original author created it enables me to learn, to create it in a unique style, and sometimes even do it in a more efficient manor. Even if I end up failing at my original intention, I always become more comfortable with or learn more about the language I'm using. Often times I have something to show for it, even if it's not as grand as I would had originally hoped. Other times I'm completely surprised by how awesome my creation is when I didn't even mean for it to be!

I hope that this article helps you construct more awesome creations, even if you learned nothing from the specific techniques!

CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More is a post from CSS-Tricks

The RDF Working Group has published two Recommendations today:

• JSON-LD 1.0. JSON is a useful data serialization and messaging format. This specification defines JSON-LD, a JSON-based format to serialize Linked Data. The syntax is designed to easily integrate into deployed systems that already use JSON, and provides a smooth upgrade path from JSON to JSON-LD. It is primarily intended to be a way to use Linked Data in Web-based programming environments, to build interoperable Web services, and to store Linked Data in JSON-based storage engines.
• JSON-LD 1.0 Processing Algorithms and API. This specification defines a set of algorithms for programmatic transformations of JSON-LD documents. Restructuring data according to the defined transformations often dramatically simplifies its usage. Furthermore, this document proposes an Application Programming Interface (API) for developers implementing the specified algorithms.

Learn more about the Data Activity.