    
|
|
|
A roundup of the most interesting stories from other sites, collected by the staff at MIT Technology Review.
High-Tech, High-Risk Forensics
The idea here seems pretty important: how the DNA of an innocent person can end up on a murder victim’s body.
Another chance to catch the most interesting, and important, articles from the previous week on MIT Technology Review.
]]>Simon Madine is leading the charge in the neglected world of CSS testing. This is the scoop so far as I understand it.
There are four different categories of CSS testing:
Did you literally make mistakes in your CSS?
Does this CSS meet the standards you set?
Does the rendered page look as you expect it to? Cross-browser as well.
After actions are performed, does the page look as you expect it to?
I'm personally most interested in regression testing. Example: I've pushed production code where I changed the z-index of a header. I manually tested a few things and it seemed fine. But there was one type of alert message that could show, that I forgot to test, that ended up having a lower z-index and was completely hidden by the header. Wheels were spun trying to figure out why the message wasn't showing. Through regression testing, it may be possible to declare actions to be performed on a page, then test that the things are showing as you intend.
Simon is the man, so learn more and find out what tools are out there that can help you with the different types from his work:
Automatic CSS Testing is a post from CSS-Tricks
]]>
Button states saved as images and toggled by CSS are so out of date it’s painful. We should all be using CSS3 to create buttons. We all know why: they’re easily editable, cross-platform, lightweight, accessible; the list of benefits is endless.
What’s not always so easy is coding them up. Sure you can use a framework, but for most projects that’s just too big of an overhead. Maybe you want to stick to flat design; just add a background color and make sure the default border is removed. Anyone else will be delighted that Irina Petculescu, a self proclaimed CSS3 junky and founder of prowebdesign.ro has put together these free CSS3 buttons. See her site for more freebies.
They come in two styles: flat, which maintains a small bevel; and glossy, with nicely rendered gradients. There’s even some basic transitions to make the rollovers nice and smooth.
What’s even better is that the team made sure they used rgba formatting for the styling, leaving the background colors in hex format. That means you’re free to change any of the hex colors you see in the CSS and the button background color will change instantly.
The buttons are free for personal and commercial use, so download them now and start tweaking them for your brand.
How do you code buttons? Is there ever a case for image states any longer? Let us know your thoughts in the comments.
Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.
| 8 Downloadable Web Design Courses – 90% off! |  |
|
|
|
|
Templates are one of the key tools at any developers disposable. They make it easier for us to build complex websites that are maintainable and easy for other developers to understand. With the exception of a few JavaScript frameworks, most templating is done on the server. When a request comes in to the server the templating engine pieces together the relevant templates and sends the constructed page down to the browser. This is great for a lot of use cases but with the increasing popularity of applications that run solely on the client-side we need a robust solution for handling templates in the browser. Enter the new HTML <template> element.
The <template> element allows developers to create client-side templates made up of chunks of reusable DOM. The key thing about HTML templates is that they are inert. Your templates are not rendered by the browser until you activate them using JavaScript. This also means that any content they contain (images, video, audio) will not be loaded or played until the template is put to use.
It’s also worth noting that content within a template is not considered part of the main document. Trying to select an element within a template from the main document object will not work. Instead you first have to select the template and then use querySelector() to access the element you want to target. You will see an example of this later.
The <template> element is currently supported in Chrome, Firefox and Opera (15+).
You can detect support for HTML templates by checking to see if the content property is present on a <template> element. Here is an example:
if (‘content’ in document.createElement(‘template’)) {
// Templates are supported.
} else {
// Templates are not supported.
}
Creating a template is pretty straight-forward. All you need to do is create a <template> element and give it an appropriate ID.
Lets take a look at an example template that could be used for a blog comment.
<template id="comment-template">
<li class="comment">
<div class="comment-author"></div>
<div class="comment-body"></div>
<div class="comment-actions">
<a href="#reply" class="reply">Reply</a>
</div>
</li>
</template>
Here we create a template with the ID comment-template. Our template’s content consists of a list item (<li>) with a number of <div>s that contain the comment author, body and a link for users to write a reply.
You can also include CSS and JavaScript within your templates using the <style> and <script> elements.
In order to use your template you will need to write a little JavaScript. Lets take a look at an example.
var tmpl = document.getElementById('comment-template');
document.body.appendChild(tmpl.content.cloneNode(true));
Here we start by getting a reference to our <template> element using it’s ID and store this in a variable named tmpl. In this example we are not manipulating anything within the template so we just create a copy of the it’s content (tmpl.content.cloneNode(true)) and add this to the document.body.
Now that we’ve covered the basics I think you’re ready to move onto something a little more complex.
In this next example we are going to render a series of blog comments using a template. Lets assume that there is an unordered list (<ul>) element in the main document that we want to add our comments to.
Note: I’ve created a variable named comments that contains an array of comment objects for us to play around with. In reality you would probably be loading this data via AJAX.
// An array of comments.
var comments = [
{'author': 'Joe', 'body': 'I love this product.'},
{'author': 'Mary', 'body': 'Great idea. I have got to get me one of these!'},
{'author': 'Eric', 'body': 'These things are fantastic. I bought three.'}
];
// Get a reference to the comments list in the main DOM.
var commentsList = document.getElementById('comments');
// Loop through each of the comments and add them to the comments list.
for (var i = 0; i < comments.length; i++) {
var comment = comments[i];
var tmpl = document.getElementById('comment-template').content.cloneNode(true);
tmpl.querySelector('.comment-author').innerText = comment.author;
tmpl.querySelector('.comment-body').innerText = comment.body;
commentsList.appendChild(tmpl);
}
Here we start by getting a reference to the comments list in the main DOM.
We then loop through the items in the comments array. Each time we create a new variable called comment and initialize it with the appropriate comment in the array. This just makes the code a little more readable.
We then select our <template> element and make a clone of the content using content.cloneNode(). This just means that we can add our text without changing the original template.
Next we find the <div> elements that should contain the comment author and body by calling the querySelector on our tmpl variable. Then we update the innerText properties of these elements so that they contain the author and body content.
Finally we add our cloned template content to the commentsList using the appendChild method.
Comments Rendered Using HTML Templates
In this blog post you have learned how to use the new HTML <template> element to define chunks of DOM that can be reused by your applications. Although browser support is currently confined to Chrome, Firefox and the latest release of Opera I’m optimistic that we will see support emerging in other browsers too.
It’s worth remembering that as HTML templates rely on the use of JavaScript, user’s with browsers that have JavaScript disabled will not be able to see the content rendered using templates. This problem also affects some older screen-readers. It’s important to think this through and provide fallbacks for assistive technologies where appropriate.
The post Creating Reusable Markup with The HTML Template Element appeared first on Treehouse Blog.
]]>