Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Ray Villalobos | Monday, August 27, 2012

CSS pre-processors part two: Mixins and nesting

In my last article, An Introduction to LESS and Sass pre-processed CSS languages, I wrote about using variables with CSS pre-processors. Having the ability to use variables will save you enough time to justify learning pre-processors, but there are two other features in Sass and LESS that will save you even more time: nesting and mixins.

Sass versus LESS

Pre-processors allow you to code in a language that’s similar to CSS, but with additional features. Most people are on the fence about adding them to their repertoire because there are two competing high-profile standards: LESS and Sass.

I remember having a similar problem a few years ago trying to decide between jQuery mobile and other JavaScript libraries. Sass and LESS are so similar that it almost doesn’t really matter which one you learn. Switching in between them is pretty easy, so ultimately it’s learning about the concepts that matters. Yes, there are some features specific to each language like guarded mixins in LESS and conditionals in Sass, but I imagine that as the languages develop further, they will each keep up with the other.

Pick one

The important thing is what you plan to do with the languages. If you’re planning to use a framework like BootStrap, from Twitter, then it’s a good idea to go with LESS because Boostrap was written with LESS. If you want a nearly identical framework that uses Sass, check out Foundation. Although Sass requires you to install Ruby, you’ll want to use something like CodeKit to manage your pre-processors.

My advice: Pick one framework and get good with it.

Before we start coding, keep in mind that when I’m talking about Sass, I’m speaking of the newer version with an .scss extension. It’s easier to learn for CSS users because it lets you use CSS syntax and style you may already know.

Nesting

Besides variables, another awesome thing you can do with pre-processors is nesting. Let’s say you’ve developed a simple horizontal nav bar for your site.

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Info</a></li>
</ul>

Here’s a typical way to write CSS to make this into a nav bar:

ul {
   margin: 0;
   padding: 0;
   font: bold 1em/1.2em Helvetica, Arial;
}
ul li {
   list-style: none;
}
ul li a {
   float: left;
   background: #BA0436;
   text-decoration: none;
   color: white;
   display: block;
   padding: 10px;
}
ul li a:hover {
   background: #EEC25C;
   color: black;
}
A simple nav bar written with CSS

A simple nav bar written with CSS

As your CSS file gets bigger, the number of styles that are children of other styles increases. In either Sass or LESS, you can do the same thing, like this:

ul {
   margin: 0;
   padding: 0;
   font: bold 1em/1.2em Helvetica, Arial;
   li {
      list-style: none;
      }
   a {
      float: left;
      background: #BA0436;
      text-decoration: none;
      color: white;
      display: block;
      padding: 10px;
      }
   &:hover {
      background: #EEC25C;
      color: black;
      }
}

This way, the <li></li> selector is written inside the <ul></ul> selector and the a selector is inside the <li></li> selector as if they were another rule. Notice that because we are using a pseudo-class, I have to add the ampersand (&) before the :hover selector.

Nesting doesn’t necessarily save you a ton of time, but it makes your code cleaner. When coding CSS, designers can sometimes add new rules where they don’t belong: nesting helps you keep everything tidy.

Both Sass and LESS implement mixins the same way, so there’s no need to show you the difference between the two.

Mixins

If you liked variables, you’re going to love mixins. They are snippets of code you can reuse over and over in your CSS. You can use them with variables to make coding in CSS easier. Let’s take a look at how you would code a simple top-to-bottom gradient using regular CSS.

.mybox {
  background-color: #333745;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DAEDE2), to(#77C4D3));
  background-image: -webkit-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: -moz-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: -o-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image: linear-gradient(to bottom, #DAEDE2, #77C4D3);
}

To make sure the gradient displays in as many older browsers as possible, we have to include code for different versions of Safari, Google Chrome, Firefox and Opera. It almost makes you want to stop doing gradients in your CSS. We can use variables to simplify this. Let’s try that with a Sass example.

First, we’ll create two variables for the colors somewhere in our .scss file:

$from: #333745;
$to:   #77C4D3;
.mybox {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(to bottom, $from, $to);
}

Modifying the gradients to use variables works great and it will save you a lot of time. But what if you wanted to reuse this for other declarations? That’s where mixins come in. You can create snippets of code and reuse them. Let’s create a mixin for linear gradients using the code above as a base.

$from: #333745;
$to:   #77C4D3;
@mixin lgradient {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(to bottom, $from, $to);
}

This makes working with gradients more manageable, but it will only work with one set of from/to colors. We can easily improve on this by putting these variables within our mixin. If you know JavaScript, this is like writing a function. Here’s the syntax in Sass.

@mixin lgradient($from: #333745, $to: #77C4D3) {
background-color: $from;
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top, $from, $to);
background-image:  linear-gradient(to bottom, $from, $to);
}

Now, when we want to use our gradient in our box, we can just type the following:

.mybox {
   @include lgradient;
}

Adding this line of code will create the gradient with the default colors, but since they’re variables, you can create any top-to-bottom linear gradient and specify the colors in your .scss file.

.mybox {
   @include lgradient(#FCC,#FEE);
}

Now you have an easier way to create gradients. Let’s check out the code in LESS:

.lgradient(@from, @to) {
  background-color: @from;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@from),
  to(@to));
  background-image: -webkit-linear-gradient(top, @from, @to);
  background-image: -moz-linear-gradient(top, @from, @to);
  background-image: -o-linear-gradient(top, @from, @to);
  background-image: linear-gradient(to bottom, @from, @to);
}
.mybox {
  .lgradient(#CCC,#DDD);
}

Pretty similar, except that the dollar signs ($) are replaced by @ symbols and there is no mixin keyword. You can see how pre-processors will help you write CSS more efficiently. If you haven’t already taken the plunge, what are you waiting for?

Interested in more?

Suggested courses to watch next:

By Ray Villalobos | Thursday, August 23, 2012

Adobe Edge Animate Preview 7: What’s new?

A new version of one of my favorite projects from Adobe has just been released, and it has a new name: Adobe Edge is now Adobe Edge Animate. There’s a lot more under the hood than a name change. In this article, I’ll take a look at some of the changes from the previous version so you’ll be oriented when you install the new release.

What’s in a name?

Edge is now Edge Animate. The name clarifies one of the main features of the program. You could argue that it does a lot more than animation, but names like Photoshop, Illustrator, and InDesign clearly convey the focus of the software; Edge by itself didn’t. People who like to shorten things will still call it by its old moniker, but at least the new name makes things clearer in a branding sense.

UI beautification

Edge Animate is a little more colorful than before. There are subtle changes here you might not notice unless you pull up the Preview 6 and 7 side by side.

A little color can go a long way to liven things up. The application looks a lot better. The palette used in the panels looks brighter and some of the labels and icons have changed.

The redesigned interface of Adobe Edge Animate 7 is brighter with new options

Properties panel

One of the biggest changes is the redesign of the Properties panel. Everything is a little cleaner and less boxy than before with more subtle pop-ups. For example, the ability to choose whether an imported image is coded as a DIV or an IMG is now embedded within the name of the element and disappears when an item that doesn’t need it (like a rectangle) is selected.

Adobe Edge 7 features a new properties panel that allows you to choose whether an image is coded as a DIV or an IMG

An additional pop-up is next to the name of the element where you can type in a custom class for the item.

Additional pop-up class that lets you specify a custom class for your element in the Adobe Edge 7 Properties panel

There are now many more options for creating keyframes directly from the Properties panel, which can be quite useful and are a welcomed addition. Overall items have been moved and rearranged.

Visibility options

Visibility options are now grouped at the top of the Properties panel in Adobe Edge 7

Visibility/overflow, opacity, and transparency form a new grouping at the very top of the panel followed by position and size below.

Responsiveness

The web has moved toward a responsive design approach, more and more widths are now specified as percentages instead of pixels. Edge Animate is one of the first animation programs that provide for a way to align things to a responsive Grid. You can specify proportionate measurements to just about everything starting with the stage.

The Adobe Edge Animate responsive design Grid allows you to specify percentage sizes rather than pixels

If you create a new document, check out the Properties panel on the left of the workspace. Next to each of the two dimensions (width and height), you’ll see a switch to turn responsive dimensions on. Once you do that, you’ll notice the option to resize the stage on your rulers. In other words, the stage itself is now resizable and responsive. There is now also an option for setting up a minimum width and height.

Adobe Edge Animate design Grid lets you specify a relative dimension or position

If you have an element onscreen, you can specify either the position (x/y) or the size (width/height) in percentages. When you specify a position in percentages and resize the screen, your element will move as the size of the screen changes. If you specify a dimension, it will resize as the screen changes. A preset pop-up is also available, which makes this even easier for you (see above).

Options that control responsiveness are on top of the Position and Size section of the Properties panel

On top of the position and size measurements, you’ll see options for how these measurements are applied. On the left you’ll find a small rectangle that controls how an object is aligned to the stage. By default, when the stage is resized, objects will align to the top left of the stage. By clicking on these squares you can change the alignment to the top, right, bottom, or left.

Next are some tabs that let you see global versus local measurements. Normally these will stay the same, but if you apply transformations, the values will be different for global/local coordinates and sizes. For the most part, you don’t have to mess with these and they work as you’d expect.

Set defaults for how an object is placed on the stage with the Layout Presents pop-up menu.

You can also set the defaults for how an element is positioned onscreen by going to the Layout Presets pop-up on the right side of this section.

Minimum width and height controls

At the bottom of the Position and Size section of the panel, there’s a pop-up control that expands to let you add minimum and maximum values for the width.

If you’re confused about these options, you can watch the video on resizing that has been added to the list of tutorials when you first open Edge Animate.

Drop shadows

The new drop shadows option in Adobe Edge Preview 7

Preview 7 adds drop shadows to the list of object properties and there is a Shadow section in the Properties panel where you can set the parameters.

You’ll see traditional controls for the position and the shadow blur that you’d expect in a program with CSS underpinnings. At the top of the section there’s an option to use either regular or inset shadows.

Like the shadow controls, clipping is now activated by a toggle but works pretty much the same as before.

Accessibility

Accessibility options on the Properties panel of Adobe Edge Animate Preview 7

A new Accessibility section at the bottom of the Properties panel lets you set some accessibility options that allow you to add a title attribute to elements as well as set the tab-index. Nice to see that Adobe is thinking about accessibility in its applications.

View menu

The new view menu for rulers and guides in Adobe Edge Animate Preview 7

Some of the menus have changed, most notably the View menu with the addition of options for turning on rulers and guides, plus snapping or locking guides.

Modify menu

Grouping items using the Modify menu in Adobe Edge Animate Preview 7

Under the Modify menu, and by right-clicking on Stage objects, you can now group elements into a DIV, which places them inside a container in the Elements panel. Grouping items and DIVs will make it easier for you to move them around on the stage, but will not let you resize them as a unit. To do that, it’s easier to just convert them into symbols.

Timeline menu

New options in the timeline menu in Adobe Edge Animate Preview 7

There are a few new options under the Timeline menu. You can jump between keyframes quickly by choosing Go to Previous Keyframe or Go to Next Keyframe (or by using the menus). There are also a couple of options for removing transitions without removing the keyframes or adding transitions between existing empty keyframes.

Tools panel

The new options in the Tools panel in Adobe Edge Animate Preview 7

A welcomed addition is a brand-new drawing tool: the oval. You could create an oval before by using the rectangle and modifying the corners, but it’s nice to see another drawing tool since the list of what’s available is sparse.

Another new addition is a Layout Defaults pop-up for choosing some of the properties of new objects. You can find these in the Properties panel, too.

Timeline panel

Timeline panel improvements in Adobe Edge Animate Preview 7 let you turn on vertical gridlines

You can now turn on vertical gridlines in the timeline by clicking on an icon at the bottom of the timeline. The grid will help you align animation to different points in the timeline.

Also, the Instant Transition Mode icon is now different and has been renamed “Auto Transition Mode.” It lets you create immediate changes in transitions. Love the new icon.

Icons in Elements panel

Layers now have descriptive icons in Adobe Edge Animate Preview 7

Like in the new version of Freehand and other Adobe software, layers now have an icon next to them that shows you the type of element on this layer. Another small, but nice change.

Workspace bar

Adobe Edge Animate Preview 7 offers a couple new options for controlling the stage size and position on the left

There are some minor changes at the bottom of the workspace: an icon on the far left that centers the workspace, and next to it a scaling pop-up that lets you type in or click and drag a value to zoom in and out on the stage.

Notifications

Notifications now appear at the bottom right of the workspace in Adobe Edge Animate Preview 7

Edge has a brand-new notification system. When you make a coding error or experience a possible problem with one of your documents, a notification icon will appear at the bottom right of the stage. If you click on it, more information about the error or warning will appear.

Coding changes

There are some new events available: mouseenter, mouseleave, and focus events. You can add them to your elements and trigger whatever actions are appropriate for your project. Edge also allows you to better trap errors; you can catch them in your code with the Stage.onError event.

Notifications related to code errors will also appear in the code window.

Final thoughts

Edge Animate is looking more and more like a finished product. I’m really impressed with the responsive layout features. I wondered how layout programs would adjust to a responsive world and Edge has gotten it right. Way to go, Adobe.

Interested in more? • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:Edge First Look Preview 6Up and Running with Adobe Creative CloudCSS3 First LookManaging CSS in Dreamweaver

By Ray Villalobos | Saturday, August 11, 2012

How to build a list-based app with jQuery Mobile

In this tutorial, I’ll show you how easy it is to create a list-based app with the jQuery Mobile framework in just a few minutes, and hopefully encourage you to give it a try.

jQuery Mobile is an excellent way to create web applications for mobile devices, but it suffers from a bit of a PR problem. When I first learned about the framework, I put it on my list of technologies I should investigate, but I figured that because it’s based on jQuery, I’d have to be a jQuery expert before I could use jQuery Mobile. I found that nothing could be further from the truth.

All that is needed to use the framework is some basic HTML knowledge. In addition, because the framework is built on top of jQuery, you get all of the functionality of jQuery in a way that is easily accessible.

What is the jQuery Mobile Framework?

jQuery Mobile is a framework for developing web applications for touch-optimized devices. A framework gives you a structure or methodology for doing something—in this case, for developing web applications.

Although you can use HTML and JavaScript to develop mobile-optimized sites, you’ll quickly run into some serious problems: Different devices and browsers treat your code differently, so you have to write a bunch of JavaScript to overcome device orientation and other issues. You also have to create styles for different items like list views, dialogs, toolbars, and so on. jQuery Mobile does all of that for you. It creates a code base that handles differences between devices with support for a large range of devices.

A quick example: a list-based app

So let’s get started with a quick example. I’m going to build a list-based app that will show a selection of photos. I’ll start with some super basic starter code for a normal page:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ListApp</title>
  </head>
  <body>
  </body>
</html>

This is pretty standard HTML code. Let’s add a header section to our body:


<div id="header">
  <h1>My Photos</h1>
</div>

And of course, we’ll need a footer. I’m going to add a navigation with fake links to some other potential pages:


<footer>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Info</a></li>
    </ul>
  </nav>
</footer>

Now we need some content. To keep things short for this article, I’m going to add just two photos to the mix, but you can add as many as you like. Since this is a list-based app, I’ll put the photos inside a list.


<article>
  <ul>
    <li>
      <a href="#">
      <h1>Miniature Doberman Pincher</h1>
      <img src="images/doggie_tn.jpg" alt="Min Pin" />
      <p>This is what happens when a
      friend brings a dog to the studio.</p>
      </a>
    </li>
    <li>
      <a href="#">
      <h1>Gummy Bears</h1>
      <img src="images/gummies_tn.jpg" alt="Gummy Bears" />
      <p>Three different poster boards...mirror for reflection,
      black for background white for highlights</p>
      </a>
    </li>
  </ul>
</article>

We encased our list inside an <article> tag, and inside each list item we have a link, which will eventually take us to a large version of our image and then a headline, a thumbnail, and a short description.

HTML site before adding jQuery Mobile.

So far this is just a regular HTML page. Let's now add the jQuery library. Since the app is based on jQuery Mobile, we’ll need to add that library too, as well as some styles that the library needs. The easiest and recommended way to do this is to copy three lines of code from the jQuery Mobile Download page.


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

You can put this code in between the <head> tags in your document (not to be confused with the <header> tags). These three lines tie in the CSS, the jQuery Mobile library, and the jQuery library. If you preview the page now, you’ll be able to see some slight differences in the look of the page. The background will be gray, and the fonts will be different. Not too exciting, but it means the library is already working. Here comes the exciting part.

Formatting a list view

Modifying our list so that it gets mobile device functionality is super easy: we just need to modify our <ul> tag to read like this:


<ul data-role="listview">

Your page should look something like this:

Mobile page with a formatted list view made using jQuery Mobile.

From someone who has written the CSS necessary to make a list look like this photo, this library has already saved me a ton of time.

jQuery Mobile uses the data-role tag to assign roles to regular HTML elements on a page. The reason it can do this is because of a really cool feature in HTML5: the ability to add a data-whateverattribute to any tag and store information that you can use to style elements and create interactivity.

Making the list searchable

For an even more impressive example of what the library can do, try modifying your <ul> tag like this to make your list searchable:


<ul data-role="listview"  data-filter="true">
 

You should see a search box appear on top of your list. Start typing the word gummy into the search box and you’ll see that the list only displays one item (the one with the text gummy bears in the title). jQuery Mobile does all of that for you automatically.

jQuery Mobile list view screen with a searchable list field.

Formatting Headers and Footers

Let’s add some of the other tags that tell jQuery Mobile to format things in a more mobile-friendly fashion.

Content in jQuery Mobile is normally placed inside a data-role="content" section. We can add that to our <article> tag.


<article data-role="content">

Let’s also fix up the header. We’ll use data-role="header" in the <header> tag.


<header data-role="header">

Next, we'll fix the footer. Modify the <footer> tag like this:


<footer data-role="footer" data-position="fixed">

Not perfect yet, but this shows a big improvement. Our header looks like a mobile device header, our search bar and list are nicely formatted. Notice that I’ve added the data-position=“fixed” attribute to the footer. That places the footer at the bottom on mobile devices. Our footer looks good, but the links could look better. Let’s make them look like buttons on a mobile device.

Modify the <nav> tag in the footer to read like this:

  <nav data-role="navbar">

jQuery Mobile list view page with search field and formatted headers and footers.

Our application is looking great; however, we could really use some icons on the navbar links. jQuery Mobile lets us easily add icons by adding a data-icon attribute to links by modifying our list items like this:


<li><a href="home" data-icon="home">Home</a></li>
<li><a href="Photos" data-icon="grid">Photos</a></li>
<li><a href="Info" data-icon="info">Info</a></li>

jQuery Mobile list page with added icons on the header and footer.

With just a few attribute tags, we’ve added mobile functionality to a page that would have taken hours to write and style otherwise.

Multiple Pages

So far, we’ve built a single page app. If you want to create an app with multiple pages, you have to wrap each page with a tag, use the data-role=“page”, and add an id so that we can link to that page.

Before the <header> tag add the following line of code:


<div data-role="page" id="photos">

And don’t forget to close it underneath the <footer> tag:


</div><!-- Page Photos -->

I always add a comment because when working on a large jQuery Mobile project, I use a lot of <div> tags and it’s nice to know what the closing tags belong to.

Now that we have a page, let’s add a page for each of our photos:


<div data-role="page" id="dog">
  <header data-role="header">
    <h1>Min Pin</h1>
    <a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
  </header>
  <img src="images/doggie.jpg" class="fullscreen" alt="Min Pin" />
</div><!-- Page Dog -->

<div data-role="page" id="gummies">
  <header data-role="header">
    <h1>Gummy Bears</h1>
    <a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
  </header>
  <img src="images/gummies.jpg" class="fullscreen" alt="Gummy Bears" />
</div><!-- Page Gummy Bears --> 

The code is pretty similar to the photo list page with some important changes. First, there is no footer on these pages, since they will just display the photos. Second, we added a header with a link back to the home page—note the data-iconpos attribute on that link. You can control the position of the icons on buttons with this attribute, or you can turn the buttons off altogether using notext as a value. The button on the header is linked to our photos page.

I’ve also added a class of fullscreen to my photos. This is not a jQuery Mobile class, but something I’ve added manually because I want the photos to display full screen, so eventually I’ll add some CSS for that further down. First though, we need to link the items in our list view page to our new pages. Modify the list like this:


<li>
  <a href="#dog">
  <h1>Miniature Doberman Pincher</h1>
  <img src="images/doggie_tn.jpg" alt="Min Pin" />
  <p>This is what happens when a
  friend brings a dog to the studio.</p>
  </a>
</li>
<li>
  <a href="#gummies">
  <h1>Gummy Bears</h1>
  <img src="images/gummies_tn.jpg" alt="Gummy Bears" />
  <p>Three different poster boards...mirror for reflection,
  black for background white for highlights</p>
  </a>
</li>

Our app is almost done. Now, right before the closing </head> tag at the top of our document, let’s add the style to make sure our photos fit.


<style>
  img.fullscreen {
    max-height: 100%;
    max-width: 100%;
  }    
</style>

jQuery Mobile list app modified to show fullscreen images.

Our app is now ready. You can take a look at the finished jQuery Mobile app here.

Interested in more? • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• jQuery Mobile Web Applications• jQuery Mobile Essential Training• Mobile Web Design & Development Fundamentals• HTML5: Structure, Syntax, and Semantics

By Ray Villalobos | Friday, July 20, 2012

An introduction to LESS and Sass pre-processed CSS languages

Getting started on something new can be challenging, especially when the shear number of competing technologies that do similar things can make it tough to choose which one to give your attention to. One of the hot new trends in web design is CSS pre-processed languages and there’s two big ones vying for your attention—LESS and Sass. LESS and Sass are both ways of writing CSS code with a syntax that allows you to use features not yet available with Cascading Style Sheets (CSS), such as variables, nesting, conditionals, and more.

What are pre-processed CSS languages?

Pre-processed CSS languages add features to CSS that aren’t there yet—like variables, conditionals, and functions. They’re called pre-processed, because their final step is a processing, also called compiling, that converts the pre-processed language to regular CSS. In a nutshell, what you use on your site ends up being plain vanilla CSS, but comes as a result of processing the LESS, Sass, or other pre-processed language files you create.

Why use pre-processed CSS at all?

It’s hard enough becoming proficient with CSS, HTML, JavaScript, and jQuery, so if you can do the same thing with CSS, why would you want to submit yourself to learning an additonal language? Whether or not learning LESS or Sass is right for you comes down to whether or not the new languages will make you better, faster, or more efficient. Both LESS and Sass introduce variables into CSS, which I have found to be a very efficient detail that has made learning the new languages worthwhile for me.

For example, when you build a large web site, there’s usually a palette of colors you’re using throughout the site, and you might, for instance, be using one color for your article headlines that you also want to use on your links in the bottom navigation.

Example results of Less and SASS coding.

Example of web site design using the same color for article headlines and bottom navigation links.

Doing that with CSS is pretty easy:

<a href="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png"><img class="aligncenter size-full wp-image-14227" src="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png" alt="CSS code that alters the color text within a web design." width="506" height="55"></a>

While that works well, what if you wanted to use that same color in 20 or 30 selectors, or in gradients with a bunch of different browser prefixes? Both Sass and LESS will allow you to create variables which make global changes on elements a breeze. The code for this color application—with the assigned variable @myColor—looks like this in LESS:

LESS CSS pre-processed code that alters web design color. 

And—with the assigned variable $myColor—like this in Sass:

SASS CSS pre-processed code that alters web design color. 

Looks pretty much like CSS, right? Both LESS and Sass let you use the regular CSS code you already know so you really don’t have to learn a whole new way of doing things—just some additional rules. Even if the only thing you get out of pre-processed CSS is the ability to use variables, that alone will save you a lot of time, and it’s technology that saves you time that you need to spend your time investigating.

Using a Compiler application

Unfortunately, when you use pre-processed languages like SASS and LESS, you do need to compile the code into CSS. That can be done in a variety of ways. LESS, for example can be downloaded as a Javascript file that can be added to the project, or as a command-line tool for either your local machine or your server. Sass installation is also a command-line install. They try to make things easier by letting you define which folders should get automatically processed, but I still wouldn’t describe it as a user friendly experience for your average designer (which is why most graphic designers who use CSS have never tried using LESS or Sass).

Thankfully, there are some compiler applications that take care of processing files for you, and update things visually. My favorite application for compiling pre-processed languages is CodeKit. It handles LESS and Sass really well, and it also lets you process Haml, CoffeeScript, and even JavaScript.

A screenshot of the CodeKit compiler.

The CodeKit compiler.

You can also have CodeKit ‘mini-fy’ all of your files, not just your CSS. That means that it can spit out a different version of your code without comments, tabs, or extra spaces, which will make your files a lot smaller (something I recommend that you be doing regularly anyway).

If you use frameworks like BootStrap or jQuery Mobile, you can import them into your projects through CodeKit from a central location. When a new version of jQuery comes out, you can simply replace one copy and all of your projects will auto-update with the latest copy.

On a PC or Linux machine, things are a bit less rosy. There is a nice LESS compiler called SimpLESS which helps, but it’s not as feature-full as CodeKit.

Get Started

There are many more things you can do with LESS and Sass. If you’ve been on the fence about them, I recommend you give them a shot. Starting simply with variables is easy enough if you are already familiar with CSS, and if you’re like me, you’ll find using variables will make your life immediately easier. Even if you’re into command-line tools, I recommend you take a look at something like CodeKit or SimpLESS.

Should I use LESS or Sass?

Both LESS and Sass are pretty good, especially if you’re just getting started. For me, LESS has a bit of an edge since I’m currently digging into Twitter’s Bootstrap Framework, which makes it a breeze to scaffold and build web sites quickly (it is written in LESS). Sass takes the cake if you’re working with Ruby on Rails projects since it was written in Ruby. Ultimately, which pre-processed language you choose doesn’t really matter since they’re both tools that will make you more efficient, and that’s always worth an investment in time. Pick one and wedge it into the workflow for your next project. It may take you a bit longer to finish, but it will also change the way you code for the better.

Interested in more? • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:CSS: Core ConceptsCSS FundamentalsCSS3 First LookManaging CSS in Dreamweaver

By Ray Villalobos | Wednesday, July 04, 2012

Tips for approaching social networking

Facebook didn’t seem that big to me until a few years ago when I was running a network of web sites for a group of radio stations and I noticed that traffic was starting to wane suddenly without significant changes to the site. After some research, I found the problem—DJs had suddenly discovered social media. They were no longer promoting our station web site, but instead getting people involved in their own profiles on Facebook and Twitter. I found that the station listeners were also shifting their activities from participation on the station site to time on other social networks. Losing traffic to Facebook was scary at first, but eventually, we caught on and learned that we needed to treat shifts in the industry as opportunies to engage our audience, rather than a fight with the latest trend.

As Facebook fast approaches one billion users, it’s getting harder and harder to ignore social networking. If you’re new to social— it’s time to get ramped up! In this blog, I’ll share my thoughts on social media, and offer some quick tips for new brands just getting started with social.

Screenshot of the lynda.com Facebook page with 100 thousand likes.

Today the lynda.com Facebook page has 100,000 likes, but every brand page has to build their community up from zero.

Rethinking social, what it’s for, and how to use it

Ultimately the problem a lot of people have with social media properties like YouTube and Facebook is that we tend to think of them as time pits instead of resources. For web developers, designers, and anyone working freelance, it’s important to recognize that social media sites can be helpful tools that make reaching out to your clients quicker and easier. Every business has their own group of people they’re trying to reach and build relatonships with. Inherently, those people you’re trying to reach are your social network. Facebook, Twitter, and others give you the software you need to reach out to your social network, so it’s important to embrace these tools, become social, and work on discovering the best ways to serve your audience.

When you’re thinking about what to post on your social networks, consider what it is you’re trying to promote, what special thing about that promotion you’re trying to communicate, who your audience is, and what social communities your audiences are hanging out in—then you can work on deciding the most efficient ways to promote and share your message. Is enough of your audience on Twitter to justify opening up a new account for your business? Would your audience be responsive to a live uStream event? Where should you put photos of the event—Flickr, Facebook, PhotoBucket?

Instead of trying to spend your time chasing after the latest craze, be strategic. Really take some time to think about your target market, who they are, and where they socialize. Also, think about your own brand identity—what channels represent what you, and your brand, are all about? Are there some social venues that communicate what you do better than others? For example, if you have a lot of video content, but not a lot of news, you might find YouTube and Facebook to be better choices than a micro-blogging platform like Twitter. Try opening up accounts here and there, but limit the time you dedicate to them until you figure out what’s a good fit, what’s reasonable, and what gives you the most return.

Thinking beyond Facebook

As I mentioned before, it’s hard to ignore Facebook’s billion-user fan base, and you should definitely have a presence there, but what about the other social media channels like YouTube, and Twitter? I’d recommend trying to find ways to “mashup” the time you spend working with other services so your social media strategy is more manageable.

In my experience, I’ve found that Twitter is probably the best way to send quick updates on the go. You can update twitter through any phone (not just smart phones thanks to Twitter SMS) and it can be connected to your Facebook accounts so that a post in Twitter will feed to your Facebook page. Plus, I tend to think the 140-character limit helps you keep your messages focused.

YouTube is a much better venue if your focus is on video content and it, too, can be set to automatically update your Facebook and Twitter accounts any time a video is posted to your YouTube channel. Plus, you can record, edit, and post a video to YouTube directly from most smart phones, which makes account setup and maintenance easy.

If you’re considering going the Google+ route, one major benefit is Google hangouts. Google hangouts are a great way to hold meetings, and now with the addition of Hangouts on air, they’re also a compelling way to stream meetings. Aside from making yourself more accessible to a broader audience reach, having brand representation in multiple social networks also makes you more visible to search engines and can improve your ranking in search results.

Final thoughts and resources

If you’re feeling stuck, just remember to start by thinking of your audience—they are your own social network, after all— then use the tools the sites provides to engage with your followers and your business will naturally grow.

If you’re just getting started with social media, I recommend checking out Ann Marie Concepcion‘s course Social Media Marketing with Facebook and Twitterto learn more about dozens of ways to promote your brand, increase sales, engage customers, and drive site traffic using Facebook and Twitter.

Interested in more?• All business courses on lynda.com

Suggested courses to watch next:• Social Media Marketing with Facebook and Twitter• Google+ First Look• LinkedIn Essential TrainingYouTube Essential Training

By Ray Villalobos | Saturday, June 16, 2012

Adobe Edge Preview 6: New features, and why you’ll love the Pin tool

One of the new projects from Adobe Labs I’m really excited about is Adobe’s interactive Animation tool for the web, Adobe Edge. It’s already in it’s 6th Preview Release, which means that although it’s not a fully developed product, it is a solid tool for building web animations that are compatible will all devices.

Adobe Edge uses web standards like HTML5, JavaScript, and jQuery to allow you to build animations that can be controlled through JavaScript. If you’re familiar with CSS or Flash, then Edge will be extremely easy to pickup. As a matter of fact, it’s a great tool for visualizing how CSS works. When you create elements in Edge, they are automatically Document Object Model (DOM) elements with properties like position, background color, borders, etc.

Animating toward a resting point with the Pin tool

I had an opportunity to meet with the Edge engineers during the last Adobe Max Conference and I found out that one of the exciting things about Edge is the way it reimagines the workflow for building web animations, and makes animation work easier and quicker.

When I create animations, I start by visualizing a resting point for my animation. In other words, a point that my animation’s elements will move towards, rest at on-screen for a few seconds, and then animate out of.

It’s generally pretty easy to design an animation resting point, but using a software like Flash, it can be challenging to animate to that point and then away from that point. The Adobe Edge Pin tool changes this by letting you complete a layout, and then pin or lock down the position of the elements in that layout, which allows you to then easily animate towards or away from that pinned position. It’s one of those things that takes a bit of an adjustment in your thinking to understand, but once you’ve mastered it, using traditional un-pinned keyframes seems like an outdated process.

Adobe Edge interface with Pin tool in timeline highlighted.

The Pin tool can accessed in several ways. Here we see the Pin tool highlighted as an icon within the timeline.

Adobe Edge Pin tool entry and exit animation.

In this image, within the red highlight box, you can see the Pin tool in action with the teal timeline areas representing entry animation, and exit animation—both created using the Pin tool to establish a "resting place" in the center of the animation.

Five note-worthy new Adobe Edge features

There are many new and cool Adobe Edge features worth mentioning, but here are five that I find particularly note-worthy:

• With the release of Preview 6, Edge has included the addition of symbols that can be exported and imported into new documents through Edge’s new .eglib format and, accordingly, allow you to reuse elements in animations.

• Edge can now be scripted with JavaScript or jQuery so you don’t have to learn a new language to build interactivity.

• A new Edge code editor allows you to quickly access any code in the timeline or attached to elements.

• You can now easily bring in custom fonts from an external library like Google Web Fonts.

The Preloader stage makes it painless to create custom preloaders from animated Edge clip-art, image assets, and text to be displayed in browsers when a user is experiencing connection or download delays.

Ready to check out Edge?

If you’re ready to give Adobe Edge Preview 6 a try, make sure to check out my Edge First Look Preview 6course on lynda.com to learn more about how to use the Adobe Edge timeline-based interface to create and build interactivity into your motion content.

Interested in more? • The full Edge First Look Preview 6 course on lynda.com • All web + interactive courses on lynda.com • All Adobe Edge courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• Edge First LookCSS: Core Concepts• HTML5 First Look• jQuery Essential Training

By Ray Villalobos | Monday, June 04, 2012

Writing easier code using the jQuery JavaScript library

In a nutshell, jQuery is a JavaScript library that helps you get things done. It simplifies the process of accessing the DOM (Document Object Model) and supports older browsers. Let’s take a look at a simple example—say that you have an H2 in your page with an ID of ‘cathead’ and you’ve written it out like this.

 <h2 id="cathead">Consumer Widget</h2> 

If you wanted to modify the code to signify a color change when a person clicks on it, you could set up the code like this with JavaScript:


document.getElementById('cathead').onclick=function () {
  this.style.color='red';
} 

The first step the JavaScript takes is to search the DOM for an element with an ID of  ‘cathead’ and then bind an onclick event to it. It then uses the style property to change the color of the element to red. Pretty basic stuff. To do the same thing in jQuery, you’d write something like this:


$('#cathead').click(function() {
  $(this).css("color","red");
});

Other than this code being a lot shorter, the first thing that jQuery does is simplify the process of accessing the DOM. If you look at the two different code examples, you’ll see that jQuery uses the $() variable to gain quick access to elements. The great thing about jQuery is that you can use the $() to access any CSS property, not just IDs.

Let’s look at what happens if we make ‘cathead’ a class instead of an ID element because we have a bunch of headlines that we want to apply the color change to:


<h2 class="cathead">Consumer Widget</h2>
<h2 class="cathead">Another Widget</h2>

jQuery would do it like this:


$('.cathead').click(function() {
  $(this).css("color","red");
}); 

So, with jQuery, instead of selecting an ID, you pass along a class you want to select. You may be thinking that you could just as easily do the same thing by using JavaScript’s getElementByClassName—and you’d be right… sometimes. One main stumbling block is that the getElementsByClassName method is not available in a lot of versions of Internet Explorer, so—plain and simple—some browsers don’t support it. Plus, the getElementsByClassName method returns an array that you have to iterate through in order to modify each instance of the class, which means your code ends up being longer (a lot longer). jQuery on the other hand uses its own methods that are backwards compatible with older browsers and allows you to select the DOM in a variety of ways.

Here’s another example of why I prefer jQuery: While JavaScript has several methods for selecting elements, including the aforementioned getElementById(), getElementsByClassName(), getElementsByTagName() (you can find how well they’re supported in here: http://www.quirksmode.org/dom/w3c_core.html#gettingelements), jQuery only has one.

And that’s not where the magic ends. You can easily select every other element by doing something like this:


<h2 class="cathead">Consumer Widget</h2>
<h2 class="cathead">Another Widget</h2>
<h2 class="cathead">One More Widget</h2>
<h2 class="cathead">Last Widget</h2>
<script>
  $('.cathead:even').css("color","red");
</script>

or you can use its cousin…


$('.cathead:odd').css("color","red");

…which makes it trivial to do zebra striping table rows. Plus, jQuery has methods for animation, and easily building overlays, tabs, and other UI elements.

After you get started with JavaScript, jQuery is an excellent next library to learn. If you’re just getting started, I recommend you check out this week’s episode ofView Source where I show you how to use some basic jQuery to build a simple toggle tooltip.

Interested in more? • The full View Source weekly series on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• Create an HTML5 Video Gallery with jQueryCreate an Interactive Map with jQueryCreate an HTML5 Video Gallery with jQueryCreate a Rotating Carousel with jQuery

By Ray Villalobos | Saturday, May 19, 2012

Building your web development core skills, and adapting a cross-language approach

Mac Keyboard image.

One question I encounter a lot is whether it’s best for a developer to dabble in a lot of new technologies like SASS, Node, and Rails, or if it’s a better route to specialize in a smaller number of technologies to the point of perfection. Sometimes it feels like the vast number of front- and back-end technologies make it impossible to keep up. This feeling can be especially daunting when you’re looking for a job and it seems like potential employers only want to hire Web Sifus who, on top of having mastered both front-end and back-end technologies, also come with design, video editing, and page layout skills. (If you know that person, or if you’ve encountered a job description like this that only wants to hire Superman—comment below.)

Like all extremes, trying to learn too much, and focusing on too little, are both wrong approaches. Plain and simple, trying to keep up with every language and library is impossible. The goal is not to be miserable trying to learn everything, but to focus on your core and then cross train on skills rather than languages.

Building your Core

For a web developer, a good foundational group of skills to start with are: 1. Setting up and managing a server 2. Building a semantic page structure 3. Mastering page styles 4. Building interaction with the front end 5. Using databases to customize a visitor’s experience

It doesn’t matter whether you’re learning PHP, Python, Ruby, or any other  language you prefer. Learning that some problems are better solved by languages on the server and some on the client is essential. In the end, it’s more important to be proficient at solving problems than slightly more fluent in a specific development language.

After building on your core, it’s essential to make sure you approach projects with a cross-language attitude that stays focused on using the languages you’re comfortable with, and also learning to use different technologies when they make the most sense—not because you feel like you “have to.”

Cross-Language Cross-Training

Cross training in web development means that no one language is an island. You almost never use PHP by itself, or try to solve every problem on a page with JavaScript. Sometimes, the best solution is figuring out how you can combine languages together, and how to decide which language is right for the task at hand.

Recently while working on a Facebook application, I noticed that although there is an SDK (Software Development Kit) for PHP and JavaScript, trying to use just one SDK is silly. It’s better to use both since every language has strengths and weaknesses. For me, web development cross training means taking advantage of that balance and using the best tool for the job.

In the latest episode of View Source, I show you how to use HTML, PHP, and jQuery to upload images to a server and display them on a page as they are loaded. This is a good example of cross training, or, using a combination of skills to accomplish a task. In the video, I use HTML to allow people to upload files, then I use PHP to read the files uploaded to a directory, and jQuery to update the page as soon as a new photo is uploaded so the image uploader can see whether the upload was successful.

Remember, balance is critical to any job. Don’t spread yourself too thin, but also don’t limit your learning so you find yourself struggling with cross-language development. Build your core, then work on your cross-training. While this exercise routine won’t bring you any closer to having six-pack abs, it will make you a better problem solver, and a stronger developer, which will bring you two steps closer to landing your dream job.

Interested in more? • The full View Source weekly series on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• Create an HTML5 Video Gallery with jQueryPHP with MySQL Essential TrainingDreamweaver CS5 with PHP and MySQL

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.