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

Article Center Ray Villalobos Articles

Your source for news, insights, and inspiration at lynda.com. Come learn with us.

All articles

Featured articles

Article categories

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

By Ray Villalobos | Monday, July 15, 2013

Working With The Twitter API 1.1 Changes

Twitter API v1.1

Did your Twitter app stop working after the 1.1 version of their API was released? Twitter made recent changes to its API that affected a lot of users and applications connected to the service, so I wrote a small PHP script that duplicates much of the old Twitter API functionality. The video below demonstrates the steps you’ll need to take to use it in your web apps.

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 | 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, February 27, 2012

Using the jQuery UI library with Google’s CDN

The jQuery library gets a lot of coverage online at lynda.com. It’s a great way to build cross-platform interactivity into your websites with a minimum amount of effort. But you might not be familiar with its cousin, the jQuery UI library, which allows you to add tough-to-code widgets to your websites with just a few lines of code.

The JQuery UI  library screenshot

There are widgets in the jQuery UI library for all kinds of useful functionalities like drag and drop, buttons, dialogs, and progress bars. In fact, The jQuery UI library is so big it’s not even included in the normal jQuery library, and it comes as part of a separate download. In this week’s View Source tutorial, I will take a peek into the jQuery UI library to show you how to create a Datepicker you can use on your online projects.

Using the library is pretty simple. Let’s say you have this basic form:

1
2
3
<formaction="#"><label>When <inputid="datepicker"type="text"name="date"/></label></form>

First, you’ll need a copy of both the jQuery library and the jQuery UI library. If you don’t have the libraries already, Google and others keep copies of popular libraries online, so you can use a copy from Google’s CDN (Content Delivery Network). When you use a popular CDN like Google’s, it means that if someone visits a different site that uses the same library before coming to your page, it will be cached by your browser and available quicker to your users, which makes your page operate faster. Here’s two lines that will load up the libraries via Google’s CDN.

1
2
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

This usually goes in the <head> section of your HTML page. In WordPress, you can update the header.php template by going to your dashboard, finding the Appearance panel, and then selecting the Editor option.

Next, you’ll need to pick a style for the calendar pop-up. You can do this yourself by using the jQuery UI ThemeRoller, or by using jQuery UI’s library of predefined styles. Just go to the ThemeRoller page and choose the tab labeled Gallery.

Example of pre-built ThemeRoller jQuery themes

Once you pick the theme you want, you can download the theme to your desktop and install it, or you can simply link to Google’s copy of one of the themes from the Google CDN. Here’s the formula:

1
<linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/[JQueryUIVersion]/themes/[ThemeName]/jquery-ui.css"/>

So in our case, since we’re working with version 1.8.17 of the UI, and the pepper-grinder theme, so we’ll use:

1
<linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css"/>

The names of the other theme options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

Now that our setup is done, all we need to do is type in our jQuery code that links the form field to the widget. You should put this before the closing </body> tag in your document. In WordPress, that would be in your footer.php file.

1
2
3
4
5
<script>
$(function(){
	$("#datepicker").datepicker({});});</script>

The jQuery code looks for a form element with the ID of Datepicker and adds the functionality to that field. Here’s a full listing of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><title>DatePicker Sample</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script><linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css"/></head><body><formaction="#"><label>
		When
		<inputid="datepicker"type="text"name="date"/></label></form><script>
	$(function() {
		$( "#datepicker" ).datepicker({ });
	});
</script></body></html>

There are a lot of other options you can use, and when working offline you should definitely include a call to a local copy of the libraries. To find out how to do this and more, check out this week’s free View Source tutorial called Creating a Datepicker for your forms with jQuery on lynda.com. If you’re a lynda.com member and want to learn more about how to speed up your site with content delivery networks (CDNs), check out the member-exclusive video called Using a CDN to speed up your website.

Interested in more? • The full View Sourceseries • All developer courses 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 Interactive Video Gallery with jQueryCreate an Online Photo Gallery with jQuery and DreamweaverCreate an Interactive Map with jQuery and DreamweaverjQuery Essential TrainingSet a Marquee to Autoplay with jQuery and Dreamweaver

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.