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

By Chris Converse | Thursday, August 14, 2014

Improve Website Performance on Mobile Devices

2014_08_14_slashHTTPone

When considering user experience for mobile, speed of download is a huge factor. People are typically using a cellular data plan when browsing on phones, and website performance is rarely optimal under these circumstances.

One factor in a web page’s download speed is the number of external file requests the HTML page needs. This includes CSS files (style sheets), JavaScripts, images, audio and video, applets, online feeds and services, and well … you get the idea.

Here are some techniques for reducing the number of times your web page needs to go back to the server to “ask for more” files.

By Ray Villalobos | Wednesday, August 13, 2014

Getting Started with Node.js

2014_08_13_Nodejs1

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 Chris Converse | Wednesday, June 25, 2014

Create a jQuery Carousel for Images

Displaying a series of photographs and images within a small area of a site can be challenging. The goal is to give folks a sense of the image while providing a navigation scheme to get a sense of the other images. Though this technique may be referred to as a carousel, or slider, the effect is the same.

A more literal navigation system for an image carousel is to align a series of images in a circle. This gives the user an interesting navigation experience in addition to getting a glimpse of the total number of images available.

figure_1_carousel-WEB

By Chris Converse | Wednesday, May 07, 2014

Planning a Responsive Web Design

figure_2_alternate_content

As mobile web usage continues to rise, it’s increasingly important that your website functions across all types of devices and screen sizes. The smartest way to provide the best user experience (UX) for today’s technology is to create a website with a responsive design.

By Chris Converse | Friday, May 02, 2014

Build Interactive Websites with jQuery

Building Interactive Sites with jQuery

If you want to capture your audience’s attention, you have to provide a great user experience. An interactive website is one of the best ways to keep your users engaged and returning to your site. While interactive websites may look impressive, they don’t have to be difficult to create. With jQuery, you can achieve an interactive web experience rather easily.

Designed to simplify JavaScript scripting, jQuery is the most widely used JavaScript library in use today. You can quickly incorporate dynamic and interactive content into a webpage with just a few lines of code. jQuery simplifies JavaScript by providing shorthand commands for more complex functionality. In other words, you can get more functionality with less coding.

By Scott Fegette | Monday, March 24, 2014

Use jQuery Ajax to Load Remote Web Content

Use jQuery Ajax to load remote web content

What is Ajax?

Ajax stands for “Asynchronous JavaScript and XML,” a friendly term for when a webpage or application asks a server for new content, then displays it in the current page without having to reload. Although the X in Ajax originally stood for XML, the content being delivered often comes in a variety of forms today, including XML, HTML, JSON (JavaScript Object Notation), or just plain old text. Ajax content has become commonplace in modern web experiences, but writing the JavaScript required to actually load and display Ajax content by hand can still be a tedious process. And that’s where jQuery Ajax can step in to make your job easier.

How can jQuery help with Ajax content?

jQuery is a JavaScript library, which simplifies many tasks in JavaScript. It’s very popular with web designers and developers for dynamically updating a webpage’s Document Object Model (DOM), and changing its structure and content as needed.

Let’s dig into the basics of using jQuery to load Ajax content using a very simple example.

By Chris Converse | Wednesday, December 18, 2013

Creating a Responsive Web Experience

Simply rearranging your web design across screen sizes isn’t enough to assure a smooth, natural experience for all the devices that will view it. In order to truly optimize the user experience, we must alter the content and behavior as well. This means loading alternate HTML content, suppressing animations, and collapsing navigation for small screens.

FIgure 1Navigation on small screens is collapsed into a single button, which expands into the global navigation when clicked or tapped, providing an optimal experience for small screens.

In this course, we’ll explore altering the user experience based on screen size. This approach will allow us to increase the user experience and download speed for larger screens, while delivering smaller-sized files and targeted experiences for smaller screens. Learn how to combine jQuery with your HTML and CSS to alter experiences across screen sizes.

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?

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.