Simon Madine is leading the charge in the neglected world of CSS testing. This is the scoop so far as I understand it.

Types of Testing

There are four different categories of CSS testing:

Syntax

Did you literally make mistakes in your CSS?

Project

Does this CSS meet the standards you set?

Reference

Does the rendered page look as you expect it to? Cross-browser as well.

Regression

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.

Resources

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:

• Article: 4 tools for automatic CSS testing
• Website: csste.st
• Presentation: "automated testing and the tale of orangered."

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.

Pay with a Tweet

Download now

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.

I agree to receive exclusive deals from MightyDeals.com and monthly/weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented.

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

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.

Checking for Browser Support

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 HTML Templates

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.

Using HTML Templates

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

Final Thoughts

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.

Useful Links

• Can I use… Templates
• HTML’s New Template Tag
• W3C HTML Templates Specification
• Related: Working with Shadow DOM

The post Creating Reusable Markup with The HTML Template Element appeared first on Treehouse Blog.

A basic understanding of version control has become a necessity for everyone working with code, no matter if you’re a software developer, a web designer, or even a graphics designer who has to work with developers in a team.

Apart from the have-to-know aspect, however, there are also a number of reasons why you should want to use a version control system (VCS).

Why You Want to Use a Version Control System

Version control makes collaboration in a team easier. Without a version control system, everybody on the team is probably working on the same shared set of files. It’s only a matter of time until someone overwrites someone else’s changes.

Also, a VCS takes care of combining changes from different people into one common version. In version control nomenclature, this is called merging. As a result, working on the same files simultaneously becomes safe and easy.

But even when you’re working on your own, a VCS still has plenty of benefits.

For example, version control makes storing and restoring versions of your project a lot easier.

Without a VCS, you’re probably saving versions of your files and folders using your own adventurous naming scheme, resulting in a horrifically unmanageable number of files and folders with file names like website-relaunch-homepage_2013-10-11_v3_JenniferSmith.html.

With a VCS in place, you only have a single project folder on your disk. All other versions and variants are safely stored in your version control system’s database, neatly described, and ready to be restored any time you want them.

Last but not least, one of the best aspects about using a VCS is that it serves as documentation, and also helps promote the act of documentation.

Since each major change is wrapped in a commit (more about this term later), and each commit is described with a message, you can very easily follow along and understand the incremental changes in a project. This becomes even more useful when problems arise and you have to find out where they originated.

Why You Should Use Git

A ton of version control systems are available on the market, each with their own pros and cons.

However, there are many reasons why you should choose Git.

Git, for one, is arguably the most popular open source version control system out there right now.

As a decentralized version control system, Git offers:

• Incredible speed
• The ability to work offline
• The advantage of having a complete copy (including the project’s history) on your machine

Another big advantage of Git is its superior branching management. Although other version control systems also know the concept of branches, Git was really built around it, and thus it provides a super-fast and easy branching experience. Once understood, making use of this concept can really take code quality to another level.

Other concepts, like the Staging Area or the Stash, also contribute to making Git a very useful part of your coding tool belt.

When choosing any tool, you should also keep another factor in mind: Popularity. A tool without adoption in the market, without a community, is most often badly documented, can’t be integrated with other systems, and is not sure to survive in the long run.

Git has already arrived in the mainstream. With projects like the Linux kernel, Ruby on Rails, jQuery, and many other major open source projects, as well as big companies (such as Google, Facebook, and Twitter) using it, both of Git’s quality and its longevity are proven.

Install Git

Installing Git has become incredibly easy in recent times (lucky you!).

There are one-click installers for both Mac and Windows.

To follow along with this guide, please install Git on your computer first.

Also, having our free Git cheat sheet handy will be useful before we begin delving into Git.

With the Git cheat sheet, you don’t have to remember all the Git commands by heart, and it will allow you to deviate from this guide and explore Git on your own.

After completing the Git installation, it’s time to fire up your command line.

Two basic configurations should be made before you get started: Your name and your email.

To set your name and email, issue the two following Git commands, but modify them so that you’re using your own name and your own email address:

$ git config --global user.name "Your Name"

$ git config --global user.email "your@email.org" 

Start Using Git with Your First Repository

There are two ways to start working on a project with version control: cloning an existing repository and creating a new repository.

Cloning an Existing Repository

When you’re getting on board of a project that’s already running with a version control system, you were probably provided with a URL to the project’s repository on a remote server.

What’s a repository? A repository is just a fancy term for a project’s set of files and folders.

For example, check out jQuery’s repository on GitHub:

To get a copy of a project’s repository on your local computer, use the git clone command, like this:

$ git clone https://github.com/gittower/git-crash-course.git

The command above will download the respective repository located at https://github.com/gittower/git-crash-course.git to your computer.

Note: If you don’t have a repository, feel free to clone from the above Git command example and fiddle with the test repository that it contains. You can also browse through open source projects on GitHub, find a repository that’s interesting to you, and then clone it to your computer.

Creating a New Repository

The other possibility to getting started with version control is when you already have an existing project that is currently not under version control yet.

Navigate into the project’s root folder with the command line, and then use the git init command to start versioning this project:

$ git init

Verifying the Presence the .git Folder

You might be wondering where Git stores all the data about your repository.

In both scenarios that I talked about — cloning an existing repository or creating a new repository — you should now have a hidden folder inside your project’s root folder. That folder is your local Git repository, and that folder’s name is .git.

You can verify this by issuing the ls Unix command like this:

ls -la

Knowing that this folder exists is more than enough. You should not touch anything inside this magical folder.

Working on Your Files

When working on your project’s files, you’ll have a great deal of peace of mind, and it will help liberate your creative and experimental thinking.

You don’t have to be fearful any longer about making changes to your files: modify, delete, add, copy, rename, or move them using whatever application you prefer (such as your favorite editor, a file browser, etc.).

Git will allow you to undo changes when necessary, and it won’t affect anyone else working on the same file.

Making Commits

It’s only when you feel you’ve reached a noteworthy state that you have to mind version control again.

At this point, when you have reached a good stage in your work, it’s time to wrap up your changes in a commit.

A commit just means submitting the changes you’ve made to your files, to your repository.

Get an Overview of the Changes You’ve Made

My recommendation and a good practice: As the first step to making a commit, give yourself an overview of what you’ve changed.

You can easily see an overview of your changes with the git status command:

$ git status

After issuing a git status command, Git will list all changes since you last committed, grouped into various categories.

Here’s our working example output after issuing the git status command:

You might be unfamiliar with a couple of terms in the working example output above: 

• Untracked files: Git calls files untracked when they aren’t yet under version control. In most cases, these are simply the new files you’ve created before committing to your repository.
• Staged/Unstaged files: Just because a file was modified doesn’t mean it’s automatically included in the next commit. To include changes in a commit, you explicitly need to tell Git to include them. This is a major difference that Git has compared to other version control systems; and a major advantage, at the same time, because it allows you to compose a commit very precisely with only related changes. Changes that were marked for the next commit are called staged, while changes that should simply be left as local modifications are called unstaged.

Preparing to Commit

Now is the time to mark the changes you want to wrap up in the next commit. In Git lingo, this process means you’re staging your changes.

How do you stage your changes?

• Use the git add command for modified and untracked files.
• Use the git rm to confirm the deletion of a file.
• In cases where you want to stage all of your changes you can use the git add -A command.

From our working example above, here’s how you would stage the index.html file (which was modified), the new-page.html file (which is untracked), and the two modified files in the css folder:

$ git add index.html new-page.html css/*

Here’s the command confirming that you’d like to delete the error.html file:

$ git rm error.html

If you look at the output of the git status command from our working example above, you’ll see that, additionally, the imprint.html file was modified. I deliberately didn’t stage it with the git add command, because I want to leave it for a later commit.

Review Before the Commit

Again, I suggest taking a look at what git status tells you before finally making the commit.

Here’s the output of our working example now, after I’ve staged the files I want to commit:

The Changes to be committed paragraph informs you about what you just staged.

Make the Commit

To save this set of changes in a commit, you only have to use the git commit command with a good, descriptive message that tells you and others what the commit is about, right after the -m option, like this:

$ git commit -m "Implement the new login box"

Inspecting the Commit History

If you want to see what happened in the project so far, you can get an overview with the git log command:

$ git log

This Git command lists all recorded commits in chronological order.

Your Next Steps to Git Mastery

Congratulations! By now, you’ve already grasped the most important concepts of version control and Git.

To get your Git knowledge to the next level, I suggest the following steps.

Try a Git GUI

A lot of tasks can be performed easier and more comfortably using a desktop client application, let alone not having to memorize all of the commands and parameters.

Windows users might want to have a look at Tortoise Git, while Mac OS users can give Tower a try, the Git desktop client my team and I have created to make Git easier to use.

Git Learning Resources

In recent years, the amount of documentation, tutorials, and articles on Git has increased a ton.

Read these resources to become better at using Git:

• Compilation of Git learning resources (books, articles, tutorials)
• Git – the Simple Guide
• Pro Git e-book (free)
• Version Control with Git: Powerful tools and techniques for collaborative software development (Amazon.com)
• Git Pocket Guide (Amazon.com)

Conclusion

Version control has become an integral part in the modern developer’s workflow.

While version control used to be a chore in the past, systems like Git not only makes version control dead-simple, but also provides a lot of other workflow benefits.

Related Content

• Top 10 Git Tutorials for Beginners
• The Ultimate Guide to Version Control for Designers
• Hacking Google Analytics: Ideas, Tips and Tricks
• Related categories: Web Development and Project Management

About the Author

Tobias Günther is CEO and founder of fournova. In 2010, he set out to make Git easier to use: Together with his team, he develops the Git desktop client, Tower for Mac.

The post How to Quickly Get Started with Git appeared first on Six Revisions.

Do you cringe at the mention of a “brief”? It’s just a document for clients and “suits,” right? Wrong!

A brief has the potential to be the single biggest factor to determine your profit margin, which means you should care about them.

Creating a great design brief takes extra effort and time, yet a tight brief can save a designer up to 20% of the project’s timeline. If you’re working on a fixed-fee project, then that adds up to hundreds, if not thousands, of dollars saved.

If you’re being paid for time and materials, then you won’t necessarily be losing money, but we all know how soul-destroying getting negative feedback and constant requests for changes can be, all because of a poor brief. It causes frustration for both the designer and the client.

How to develop a top design brief

Ask questions

Don’t be afraid to ask questions. Ask as many as possible, and keep asking until you are satisfied that you understand what your client’s brief is. A great way to do this is by using a briefing template that you know and trust and that you feel has all of the necessary questions (so that you don’t forget to ask certain ones). Don’t just email the template to your client. Go through it with them. Discuss each question and even fill it in for them.

Communicate with your clients

Explain to the client the importance of the brief. Your clients are probably busy people, too, and so they might not appreciate the importance of spending extra time creating a brief.

Collaborate with your clients and colleagues

Collaborate. The more people involved in a design project (this could include more than one person on the client’s side, as well as the designer, the account manager, the creative director), the more important the brief becomes. Make sure that you all collaborate on the brief, so that by the time it is approved, everyone who is involved will understand what is required and what the brief is.

Use a written document

Always put the brief in writing. If you’re a freelancer, then you might not like this one. Just taking a verbal brief from the client is often quicker and easier. While discussing the brief is important, a written document gives you more cover and helps to protect your profit margin. If you’ve ever heard a client say, “I think you misunderstood what I meant” or “I don’t recall saying that,” then you’d know that having the brief in writing is the only option.

Use a single document

Have one brief, in one place. The best way to explain this is with a scenario. I’m sure many of you have experienced this: the client provides a written brief, and you meet (or Skype) to discuss it. Cool — you know what they want. A few days later, you receive an email with a few updates. Then the client calls to change something else. You’re now a week into the project, and the written brief you received is out of date, and keeping track of the phone calls and email conversations is getting confusing. What was the brief that the client approved? Keeping the brief in one place where all communication is documented will help to keep the project on track and keep disputes to a minimum.

Use the cloud

Put your brief in the cloud. Annotating a PDF or tracking changes in Microsoft Word gets messy. Long email trails and forgotten conversations are even messier. You’re a web designer, so use the web for your briefs. It will increase your productivity, your client’s productivity and your bottom line.

The final word

Briefs are never going to be the “exciting” part of web design, or any creative process. However, spending time developing a brief properly and giving it the care it requires, all the way to its final approval, leads to several things:

• higher profit margins;
• happier clients;
• happier designers;
• more productive freelancers and studios.

Sounds simple, right? Take a few moments to think about your briefing process. Could it be improved? Are you wasting time and money because of poor or lazy briefs? The time to improve your briefing process is now.

How do you manage your briefs? Do you use formal documents? Let us know in the comments.

Featured image/thumbnail, briefing image via Shutterstock.

8 Downloadable Web Design Courses – 90% off!