Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Ray Villalobos | Wednesday, August 13, 2014

Getting Started with Node.js


There was a time when JavaScript was mocked and ridiculed as the language of pop-up and alert messages.

But the language has matured and found a few killer libraries that have earned the respect and love of the development community in not just the browser—but also on the server.

It all started with jQuery, the “write more, do less” library that standardized compatibility across browsers and gave us the power to reliably select and animate elements of a web page or app. We also got the ability to send and receive messages with AJAX (Asynchronous JavaScript and XML), a technology that powered the Web 2.0 movement.

Now there’s a new sheriff in town called Node.js, and it’s leading the way for a new class of web applications.

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 | Thursday, December 27, 2012

Introduction to JavaScript templating using mustache.js

Recently I built a small website for an event in my area. This type of project required me to manage small amounts of data—information about speakers, bios, titles, and a description of the talks. I wanted to have a speakers page, but I also wanted a rotating promo built as a component I could use on the homepage, and on other pages to highlight the event’s speakers. That meant two different views for the same data.

This was the kind of problem I used to throw a quick SQL database at, but it really wasn’t worth the pain for this project as the amount of data was so minimal.  However, I didn’t want to resort to HTML because I knew the information would change often and be a pain to update. To solve the problem, I used a library called mustache.js. It’s pretty easy to use, and solves the problem with just a few lines of code.

Why mustache.js?

Mustache is a library that allows you to read in JSON formatted data and display it using templates you design with JavaScript. There are lots of similar libraries, such as underscore.js, handlebars.js, and dust.js. So why did I choose mustache?

By Ray Villalobos | Thursday, November 15, 2012

Getting started with Bootstrap customization and responsive design

Recently I’ve been using a really awesome framework called Bootstrap to put small websites together. In this article, I’m going to guide you through the basics of the Bootstrap installation process, and how the Bootstrap framework can be customized for a responsive web design.

The end result of this tutorial will be a custom Bootstrap website (you can see the final website here). If you prefer to skip the basics and get right to the Bootstrap code, you can download the code directly from GitHub.

Why Bootstrap?

Bootstrap is a framework that provides an easy-to-use 12-column grid system for a 940 pixel wide container as well as a fluid layout grid that adjusts to the size of a browser. Included in the framework are customizable, well documented features—such as dropdown menus, buttons, tabs, breadcrumbs, modals, tooltips, and carousels—that can be implemented without any handwritten JavaScript.

Our finished website

By Ray Villalobos | Sunday, October 21, 2012

Lessons learned from organizing a local BarCamp event

Photo of Downtownd Deland

A few months ago I decided to organize a local BarCamp in the Deland, FL area. It’s a small town with an old fashioned downtown district between Orlando and Daytona Beach. As the event came and went in early October 2012, we saw 163 registered people attend and over 20 speakers present. For a small town in Florida, it was a very successful first event.

If you’ve never been to a BarCamp, it is a fun and informal gathering of tech-minded people. Attendees are encouraged to present or help out in organizing the conference. I had never organized an event before, so I learned a lot from the experience. In this article, I share some of the lessons I learned, including a few of the online tools and choices I made when creating the website and mobile app for BarCamp Deland.

Lesson one: Asking for volunteer support

Putting together a tech event involves a lot more than can be handled by one person, so my first step was to gauge interest and potentially recruit some local volunteers to help coordinate the event. I casually brought the event up in conversation with people who I knew would be great speakers, helpers, and organizers, and who had the experience, resources, and access to others that could make or break the event. If some of these people were in my corner, I felt it would be much easier to get things done.

When asking for support, it helps to have a direct way to reach your event volunteers. Facebook was one way that worked surprisingly better than email for me. Your Facebook community usually consists of close friends and family, it provides a quick list of your immediate contacts, and people tend to respond quicker to Facebook Direct Messages than email. Facebook is also a helpful promotional tool as your event volunteers can help spread the word by sharing and liking the event on their personal Facebook pages.

Lesson two: Asking for sponsorship support

Since I had no prior event planning experience, I talked to some of my friends who had put together tech events in the past and asked for advice on how to organize sponsorships. There’s nothing like experience to show you how to do something, and these people gave me some amazing tips and contacts.

When asked about sponsorship, Jose Caballer from This Week in Web Design suggested I target potential sponsors who I had reasonable access to, and then supply them with a list of the following questions:

  1. What is the event (workshop, conference, seminar)?
  2. Who will attend this event? (List your demographic, their needs, and how many people you expect to attend.)
  3. What will your audience get out of this event?
  4. What will the sponsors get out of this event? (The best benefit is probably product awareness because sponsors want access to your attendees who are potential consumers of their products.)

Another friend, Dee Sadler of A Box of Pixels, told me to create a list of companies I love and ask them for support. I cold-called or emailed several companies, and while I never heard back from some, I was able to get a lot of giveaways, some software, and even money to help with the event. About half the sponsors I signed on for the event came from this list.

Lesson three: Building a responsive event website

The website for BarCamp Deland

To get started on the BarCamp Deland website, I first purchased the domain name barcampdeland.org. From there it was a matter of deciding what I needed my website to do so I could choose the necessary tools to build it. I knew the site would only have a few pages, and it was important to build a responsive site that didn’t take too long to put together. Considering my needs, I chose Bootstrap using LESS to build the CSS files.

I was surprised at how quickly I was able to build the BarCamp Deland website with Bootstrap. Instead of taking days to build the framework and scaffold the responsive template, Bootstrap gave me a great framework that allowed me to put the site together in just a few hours with virtually no JavaScript. Bootstrap is built with LESS, so that also made writing the CSS easier.

I managed the site build in GitHub, and I also placed my project in Dropbox as a secondary backup. While GitHub is superior for project management, one of the great features of Dropbox is its ability to perform incremental backups, which archive every saved version in a Dropbox folder. If you ever delete a file and want access to an earlier version, the incremental saving makes it super easy. This feature alone has saved my bacon more than once.

Certain information, like the list of speakers and sponsors, needed to be reused in different places but the site really didn’t warrant building a database, so I used mustache.js to build templates that pulled in a JSON file. Editing the JSON file, allowed me to quickly update the information on multiple pages and widgets.

I only needed to write a small bit of JavaScript to ensure the Bootstrap templates adjust and hide the third column when the users viewed the site on a smaller screen, and also used the jQuery Cycle plugin to handle fading and sliding some graphics, and the speaker’s promo on the homepage.

I used PHP, but just minimally, to divide my pages into small modules and to use the include() method to pull files in as needed. This allowed me to reuse modules on different pages and easily swap out content.

Online tools

Of course, organizing a BarCamp means having an event website, but it also means dealing with registration and emails.

For registrations, I used Eventbrite, which offers free events a complimentary account option that lets you build surveys, view metric reports, and email your registration list with event updates. Eventbrite also offers an Entry app, which is an easy way to check in people on the day of the event.

Eventbrite has many tools, including the ability to see metric reporting charts

Eventbrite also has a strong API and tools to integrate extras like a countdown and a registration form. Unfortunately, all the pages aren’t optimized for mobile devices so some elements (like the registration form) can be a little hard to navigate from a smartphone.

Mobile web app

The two parts of the jQuery Mobile app Unlike most conferences, BarCamp speakers aren’t prescheduled, which means most BarCamps have a dynamic schedule on a physical bulletin board that is adjusted in real time as speakers arrive and sign up for time slots and venue locations. Since our venues were very far apart, I wanted a schedule that attendees could check on their phones so they wouldn’t have to walk over to the bulletin board to see the speaker list.

I used jQuery Mobile to build the web app, which came in two parts. The first part of the app displays the dynamic schedule, as well as a list of venues and general information about the event. The second part is what allows organizers to enter the info about speaker time and location onto the schedule. Since all this info had to be stored and updated, I created a MySQL database and used PHP for MySQL access.


Overall, making the connections, planning the event, and working with an awesome team to bring BarCamp Deland together was really fun, and building the website was actually the easiest part. If you’re interested in using any of the code I mentioned for your own event, you can download it through GitHub.

By Ray Villalobos | Saturday, October 6, 2012

Exploring browser animation options: Part three, Canvas

By Ray Villalobos | Friday, September 21, 2012

Exploring browser animation options: Part two, jQuery

Animation can be accomplished in many ways with modern browsers. I’m currently working on a series of blog articles that explore some of the browser animation options available. In my last article, I looked at creating animations with CSS3 using keyframes and transitions. In this article, I’ll look at how to use jQuery to animate objects.

jQuery is a JavaScript library for building interactivity into web applications. One feature of jQuery is its ability to animate elements in HTML. This is quite powerful and useful because another feature of jQuery is its focus on remaining as backward compatible with older browsers as possible. This is significant because these two elements together make jQuery one of the most compatible of the animation options.

A good example of how to use jQuery animations can be found on my MexSantos MexSantos project, which is part of a creating Adaptive Website for Multiple Screens course I prepared for lynda.com.

The MexSantos website

If you click on one of the small thumbnails on the MexSantos website, you’ll see an overlay appear into view and then a copy of the photo in a larger view. The overlay animates subtly, but this is typical of the type of animation that jQuery is ideal for. Interface animations are its specialty and it handles them better than many other methods. jQuery uses JavaScript but one of its goals is to write JavaScript that is compatible with older browsers, so compatibility isn’t the problem with jQuery animations. The main issue is that jQuery animations require JavaScript, so unlike CSS they’re useless if the user has turned JavaScript off. This caveat can sometimes create usability concerns.

jQuery performs animations by modifying aspects of items on the page. For example, it can change the opacity of an image over time to make it look like it’s animated. Let’s take a look at the line of JavaScript code that adds the overlay in the MexSantos website:

#overlay {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

One of the great things about jQuery is how commands can be chained together to create a sequence of events. In the JavaScript code above, we’ve managed to quickly create a div then assign it an ID of ‘overlay’ and append it to our body tag. To write the code that actually performs the animation, first we hide the element (otherwise animations show up immediately), and then we add a fadein() command. The fadein() method takes whatever the object is normally supposed to look like (based on CSS style sheets) and performs an opacity fade-in.

The CSS for the overlay ID is pretty simple: A black background with a fixed position that takes on the width and height of the entire window.

#overlay { background: #000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; } 

To really understand what jQuery is doing, you need to look at the code as it animates. If you’re using a browser like Google Chrome with a dynamic code view, you should be able to right click on the background of the page and choose inspect element. Once you have inspect element open, make sure you’re in the elements tab and click on one of the thumbnails. Quickly look at the line before the closing tag. It should show the div being added dynamically and an opacity attribute with rapidly changing values.

jQuery rapidly animates the opacity value of our overflow element

The animate() method

There are a lot of other animation methods that can be used in addition to fadeIn(). Of course, where there is a fadeIn(), there logically is a fadeOut() method, but there are also others like slideDown(), and slideToggle(). Once you learn how to use one, the rest are pretty easy to pick up. There is also a generic method called animate() that allows more granular control over how animations are performed. These animation methods usually take parameters and callbacks as well. I’ve created an example that extracts the overlay functionality of the MexSantos website and shows how the generic animate() method can be used to control the CSS in objects.

jQuery Overlay

Here, we start off with an image that has a click event bound to it:


When someone clicks on the image, the fun starts. First, animate this element out of view with the animate() method, which allows you to change any CSS properties you want. For example, rather than just changing the fade, you can change the opacity as well as the position of the object.

//default animation for element
opacity: 0,
top: '+=200'
}, 500);

As part of the process, the animate() method takes in a JSON object that lets you modify CSS settings like the opacity and position of the element. You can also set the amount of time (for example, 500) you’d like the animation to take. jQuery has some predefined constants for animations such as fast and slow. Just like with the MexSantos example, we can add the overlay:

$('<div></div>').attr('id', 'overlay').appendTo('body').delay(300).hide().fadeIn(500);

We’re adding some delays because we want the animation of the image moving out of view to play before our overlay starts showing up. Now we can load the large version of the image:

$('<img>').attr('src',largeimage).attr('id', 'overlayimg').appendTo('#overlay').load();

With the large version of the image added, we need to know what to do once someone has finished looking at the overlay and clicks to return to the menu. We need to bind a click event to the overlay just like we did with the image, use the fadeOut() method to hide the overlay, and remove it from the page:

    $('#overlay').fadeOut('slow', function() {
    }); //fadeOut
}); //overlayclick

Finally, we’ll animate the image back into its original position.

    opacity: 1,
    top: '0'
}, 500);


Animating with jQuery is like buying a car that is a “mechanic’s dream.” You really need to know your way around JavaScript, but there’s a real benefit in the backward compatibility with older browsers you gain. Using jQuery for browser animations is a strong route to take when working with complex interface interaction. Once you learn a few key concepts like binding methods and chaining commands, this type of animation actually becomes quite fun.

If you’re interested in writing code with jQuery, make sure you check out some of our offerings on jQuery animation in the lynda.com training library.

By Ray Villalobos | Friday, September 7, 2012

Exploring browser animation options: Part one, CSS3

There are lots of ways to get animations to play in modern browsers. With so many options, it can be tough to determine the best way to tackle a specific project. Should you use CSS3? Is it better to use jQuery? What about Canvas or Canvas based libraries like Easel.js? In this series of articles, I’ll compare and contrast some of the different technologies behind web animations, show how to code sample animations, and note advantages and disadvantages behind each. We’ll get started with CSS3 animations.

CSS3 Animations

First and by far the easiest way to move things in a browser is to animate DOM (Document Object Model) elements using CSS3. On some platforms the animations are GPU (Graphics Processing Unit) accelerated, which makes then faster, especially when animating 3D transitions on mobile devices. Because the animations are done with CSS, no JavaScript is required, although you can still use it to add interactivity to your animations.


CSS3 Animation Example

Note: I added a button and a bit of jQuery to the example above so you can start and stop the animation in the JSBin example above. I’m just discussing the essentials of the animation without those elements below. I’m using -webkit prefixes here for brevity, so this example is only going to work in WebKit browsers like Safari or Chrome. . If you want to be compatible with more browsers, make sure you add the other prefixes. Check out CSS3 Please for more info.

Let’s take a look at how these are done. We’ll start off by creating an IMG tag and pointing that to a small photo. We’ll add the startspin class so we can target it with CSS later.

<img id="startspin" src="http://i.imgur.com/n3Uvf.png" />

Then, it’s time to add some CSS to animate this. CSS animations are done in two parts, first of which is creating a series of keyframes, much like what you would do with any timeline-based program like Adobe Edge or After Effects. Let’s create the keyframes:

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(-360deg) scale(1.5);
        opacity: 0;
    50% {
        -webkit-transform: rotate(30deg) scale(.8);

We can use a percentage with different values to indicate at what point in the time our elements (in this case the IMG) should transform (0% and 50%). Inside curly brackets, we then we can use transform attributes to modify our element. In the example above, I rotate the object and scale it. I’m also adjusting the opacity as a separate property/value pair. You can use different transformations like this.

Notice that you don’t need to include a keyframe for 100%. The object will animate from the transformation at 50% to whatever the image is supposed to look like when it has no transformations.

Once you have a series of keyframes, it’s time to assign these to a CSS class or an ID. So you can attach the animation to an element in the DOM (in our case, an image), plus control how the animation plays.

.startspin {
        -webkit-animation: spin 2000ms ease-in-out;

This adds the animation to the startspin class, which we attached to the image tag already, so the animation will execute when the image loads.

The animation property is a shorthand for six of CSS3′s animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. You can pass a number of options to the property, and in my example, I’ve specified that this animation will be using our spin keyframes, that the animation will last 2000 milliseconds (you can use s instead if you want to specify seconds) and that it will be using an easing function called ease-in-out that will make it animate slowly at the beginning and at the end. If you’ve worked with animation in other software, these should be pretty easy to pick up. Otherwise, check the CSS3 animation documentation.

Another example

CSS3 Animation Example

In this example, I’m using JavaScript to control what happens when someone clicks on the image, which causes a second set of keyframes named pulse to take over the animation. You can use the keyword infinite to have an animation play repeatedly forever (which might get obnoxious quickly, so use with caution), or simply specify a number of times you want the animation to play.

Limited primitives

Unfortunately for CSS3, there are very few graphic primitives (native ways to draw shapes) in the language. You can create a box, or if you make a box have 50% borders a simple ellipse, but that’s pretty much it, so you wouldn’t want to build a game with CSS animations. However, you can bring in any type of graphic your browser will accept like SVG, JPG, and PNG files and they will animate fine with CSS.

Vendor prefixes

One of the huge disadvantages, and, frankly, the Achilles heel to working with CSS3 animations, is that in order to get CSS to work with as many browsers as possible, we should include vendor prefixes like -webkit (safari and chrome), -moz (Firefox), -o (Opera) and of course the property without the prefix. This is a huge problem because animations use a large number of property combinations that all need prefixes. If you take a look at just transforming an object by 30 degrees, here’s the code you’d need for that.

-webkit-transform: rotate(30deg);  /* Safari 3.1+, Chrome 
-moz-transform: rotate(30deg);  /* Firefox 3.5-15 
-ms-transform: rotate(30deg);  /* IE9+ 
-o-transform: rotate(30deg);  /* Opera 10.5-12.00 
transform: rotate(30deg);  /* Firefox 16+, Opera 12.50+

And that’s just one property. Not taking into account what you have to do to create your keyfames, which for a simple fade would look something like this:

@-webkit-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
@-moz-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
@-o-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
@keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }

To expect someone to do a complex animation using all of the prefixes is unreasonable, and that’s why most of the examples you’ll see online use -webkit prefixes, target a specific browser or are done by super hardcore coders. There are some JavaScript frameworks Like Lea Verou’s Prefix Free that can help with this, but I don’t foresee a lot of people using CSS3 animations as their primary animation method until years from now—if ever. There are just easier and better ways.

Progressive Degradation & Compatibility

Whenever you work with any CSS3 properties, you should check browser compatibility and make sure that whatever code you end up using isn’t essential to the functionality of your website. Users with older browsers shouldn’t still be able to use and view your site even though they might not get all of the animation sugar.

Here’s a compatibility table from Can I Use:

If you want to learn more about CSS animations, I’d suggest watching my course IOS Web Applications with HTML5 and CSS3.

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 our subscription library courses
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
Start your free trial

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.