Screencasts.org

Creating a Bookmarklet with Remote JavaScript Code

Tue, 02 Aug 2011 00:05:45 +0000

In our previous video in the bookmarklet series we showed you how to create a simple bookmarklet where all the code was contained wholly within the bookmarklet itself.

In this follow-up screencast we’re going to show you how to include source code from a JavaScript file stored on a remote server.

What you'll Learn

How to create a Bookmarklet with code stored in an external JavaScript file

Watch now →

Creating a Simple Bookmarklet

Mon, 04 Jul 2011 20:29:12 +0000

Watch now →

In this quick video tutorial we'll show you what a bookmarklet is, and how you'd go about to create one.

What you'll Learn

What a Bookmarklet is
How to create a simple Bookmarklet

Watch now →

Introduction to CoffeeScript

Mon, 27 Jun 2011 10:27:10 +0000

Watch now →

With the adoption of CoffeeScript by the Node.js community, the JavaScript community in general, and with CoffeeScript's inclusion in the upcoming Rails 3.1 release, it's probably a good idea to see what all the fuss is about.

In this free CoffeeScript screencast we'll cover all the basics and some neat features that will make the writing of complex JavaScript a thing of the past.

Links

CoffeeScript Documentation

What You'll Learn

How to install and use CoffeeScript How to use the standard types in CoffeeScript How to write functions in CoffeeScript How to write classes in CoffeeScript

Watch now →

Creating iPad Apps with JavaScript using Titanium

Sun, 17 Apr 2011 04:43:45 +0000

Watch now →

In a follow up to our popular Building iPhone Apps with JavaScript using Titanium screencast we show you how to create an iPad app without learning a line of Objective-C!

Given the screen real estate of the iPad we just don't want a blown up clone of the iPhone app. We want to take full advantage of the screen real estate and the specific UI elements that the iPad has to offer.

What You'll Learn

How to use the iPad's Split View in Titanium
How to use WebView in Titanium
How to detect if the iOS device is online and on Wi-Fi network with Titanium.Network
How to create animations

Update - 30 May 2011

Blip.tv have changed their API so we've pushed an update to the App Store.

To fix the code yourself, all you need to do is change:

...
function getVideoData(jsonData){
  return jsonData[0];
};
...

To:

...
function getVideoData(jsonData){
  return jsonData[0][0];
};
...

Update - 21 June 2011

Blip.tv have changed their API again. To fix use the following code:

...
function getVideoData(jsonData){
  return jsonData[0].Post;
};
...

Watch now →

How to Use RVM

Fri, 08 Apr 2011 01:32:44 +0000

Watch now →

In our Ruby developer career there may come a time when we have to deploy our app with other versions of Ruby. We may also take a fancy to implementations such as MacRuby, and want to try them out. However, installing many different versions of Ruby on the same box can be a real headache.

Even when we're not dealing with different versions of Ruby, there can be problems when you have conflicting gems from one project clashing with gems from another. This becomes more apparent when you have Rails 2 & Rails 3 projects in active development, and use gems that are only compatible with Rails 2 or 3.

In this screencast we'll show you deal with these issues in an elegant way by using the simple and powerful RVM: Ruby Version Manager.

What You'll Learn

How to install RVM
How to install and switch between Ruby implementations and versions
How to use the autoloading .rvmrc files for project specific Rubies and gemsets

Watch now →

How to Use Homebrew

Tue, 05 Apr 2011 21:47:36 +0000

Watch now →

Sick and tired of MacPorts and Fink taking an age to install UNIX packages on your Mac OS X box?

Want to install UNIX packages fast, and securely without using sudo?

In this screencast we'll show you how with Homebrew!

What you'll learn

How to install Homebrew on Snow Leopard
How to install UNIX packages on OS X
How to uninstall UNIX packages
How to search for possible UNIX packages to install
How to list installed UNIX packages
How to update Homebrew

Watch now →

Configuring ActiveRecord in Sinatra

Thu, 31 Mar 2011 04:51:49 +0000

Watch now →

In a previous episode, Using ActiveRecord with Sinatra, we showed you how to use ActiveRecord and Sinatra to build a URL shortener. We showed how to get ActiveRecord up and running in your Sinatra application, and now in this screencast, we'll show you the various ways on how to configure it.

Building iPhone Apps with JavaScript using Titanium

Sun, 27 Mar 2011 01:34:47 +0000

Watch now →

Wouldn't it be great to build an iPhone application without learning a line of Objective-C? Wouldn't it be great to put to use the skills you've already honed over the years as a web developer?

In this screencast we'll show you how to build an iPhone app using JavaScript. We'll be using Appcelerator's Titanium Mobile to show you how.

What You'll Learn

How to build a full featured native iPhone application in JavaScript
How to build a TabGroup with tabs
How to create a NavigationGroup and push new windows on the stack with TableViews
How to create regular and custom TableViewRows with images and labels
How to load JSON and JSONP data from the web using HTTPClient
How to play SD and HD videos on supported devices by in-code device detection

Update - 30 May 2011

Blip.tv have changed their API so we've pushed an update to the App Store.

To fix the code yourself, all you need to do is change:

...
function getVideoData(jsonData){
  return jsonData[0];
};
...

To:

...
function getVideoData(jsonData){
  return jsonData[0][0];
};
...

Update - 21 June 2011

Blip.tv have changed their API again. To fix use the following code:

...
function getVideoData(jsonData){
  return jsonData[0].Post;
};
...

Watch now →

Using ActiveRecord with Sinatra

Sun, 20 Mar 2011 20:33:25 +0000

Watch now →

In this screencast we'll create a URL shortener in Ruby with Sinatra. We're going to show you how to integrate ActiveRecord with a Sinatra application.

You'll need this regular expression to follow along:

/^\b((?:https?:\/\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))$/

What you'll learn

How to integrate ActiveRecord in to Sinatra with sinatra-activerecord
How to build a URL shortener and how to use Base 62 in order to keep your urls short

Links

Watch now →

Creating a Delicious Counter with jQuery

Wed, 16 Mar 2011 21:06:58 +0000

Watch now →

Sometimes it's nice to show how many times a page has been bookmarked on Delicious. In this screencast we'll show you how. We'll use HTML5 to help compliment the client side scripting to find out how many times each page has been bookmarked.

We'll be building on top of what we did in the Improving the Delicious Bookmark Button with jQuery screencast.

What you'll learn

How to build JavaScript Delicious Bookmark counter with jQuery
How to use the Delicious JSON API
How to MD5 links for the Delicious API in Ruby on Rails and PHP
How to use HTML5's Custom data-*Attributes

MD5 Hashes

Introduction to jQuery: 67077b082dd4a16d289b5e9b38c6f378

Using AJAX with jQuery: c2db344daf466f3880a063b0828d530c

Watch now →

Building a Simple AJAX Website with Sinatra & jQuery

Fri, 11 Mar 2011 19:39:49 +0000

Watch now →

To mark AJAX's birthday on 18th March, we've put together a screencast to show you how to create your very own AJAX-updating countdown website for the big day.

We're using Haml, Sinatra and jQuery to do this and recommend you look at our introduction videos if you're not familiar with any of these languages or frameworks.

What you'll learn

How to build your own updating "Is it" website
How to determine in Sinatra if a request is an XMLHttpRequest or not
How to disable layouts on XHR requests in Sinatra

Watch now →

Improving the Delicious Bookmark Button with jQuery

Wed, 09 Mar 2011 22:35:46 +0000

Watch now →

The default Delicious Bookmark Button is obtrusive and broken when you switch off JavaScript. We show you how to improve and build an unobtrusive one with jQuery.

What you'll learn

How to build an unobtrusive JavaScript Delicious Bookmark Button with jQuery
How to url encode your links and titles for Delicious in Ruby on Rails and PHP

Watch now →

Introduction to Sinatra

Sun, 06 Mar 2011 00:31:39 +0000

Watch now →

Welcome to the Introduction to Sinatra screencast. You may also be interested in our Introduction to Haml screencast, as we will be using some Haml in this video.

You might be surprised to find out that if you search on Google for “Sinatra”, the first result is not Ol’ Blue Eyes, but is instead a web application framework for rapidly building web applications in Ruby.

This screencast will show you how to get started!

What you'll learn

The basics of routing in Sinatra
How to use inline and file templates and views
How to use variables
How to use named parameters in your routes and code

Watch now →

Introduction to Sass: Part 2

Wed, 02 Mar 2011 03:45:08 +0000

Watch now →

Welcome to part two of our Introduction to Sass. If you’re new to Sass, start with our first Introduction to Sass screencast. We’ll be building on what we’ve learned there.

In this screencast we’re going to cover some more of what Sass has to offer, including the @import rule, partials, interpolation and more.

What you'll learn

How to use more of Sass' core features including:

Importing Partials
Referencing Parent Selectors
Interpolation
Comments

Watch now →

Using Haml with Rails 3

Sat, 26 Feb 2011 21:13:26 +0000

Watch now →

In this video tutorial we’ll cover how to use Haml in a new Rails project, how to integrate it into an existing project, and how to convert any pre-existing ERB templates into Haml.

If you’re new to Haml, we recommend you first watch our Introduction to Haml screencast.

What you'll learn

How to include haml and appropriate haml generators for Rails 3
How to recursively change all ERB files to Haml using a custom rake task

Watch now →

Introduction to Sass: Part 1

Tue, 22 Feb 2011 05:11:16 +0000

Watch now →

In this screencast we’re going to show how Sass can simplify, structure and speed up your styling workflow.

Like Haml, Sass is the brain child of Hampton Catlin and stands for Syntactically Awesome Stylesheets.

And it lives up to it’s name, Sass stylesheets are awesome! Watch this screencast to find out why!

What you'll learn

How to use Sass and it's core features including: variables, mixins, nesting and selector inheritance
The differences between Sass and SCSS (Sassy CSS)
How to convert pre-existing CSS into Sass

You may also be interested in our Introduction to Haml screencast.

Update: If you enjoyed Part 1, you should check out Part 2 where we go in to more detail on what Sass has to offer.

Watch now →

CSS3 in Internet Explorer 6, 7 and 8

Wed, 16 Feb 2011 23:04:28 +0000

Watch now →

With HTML5 and CSS3 on the rise, we’d like to use it more frequently in our projects. Just a few lines of CSS3 can now take the place of background images, sprites, and complex div structures which aren’t semantic. Unfortunately, Microsoft’s Internet Explorer 6, 7 and 8 do not have the new CSS3 standards out-of-the-box, which has prevented some people from adopting the new CSS level 3 rules.

In this screencast we’ll show you how you can start taking advantage of 3 of the new rules, in ALL browsers, including IE 6 through 8.

What you'll learn

You'll learn to use the following CSS level 3 rules in IE6, IE7 and IE8.

border-radius
box-shadow
linear-gradient

Links

Watch now →

Introduction to Haml

Mon, 14 Feb 2011 20:50:13 +0000

Watch now →

Haml is the brain child of Hampton Catlin. In this screencast we’re going to show how Haml can simplify your markup and speed up front-end development.

As developers we naturally gravitate towards products or languages that help keep our work clean and organized. Haml is just one of those things. Watch this screencast to see why!

Links

You may also be interested in our Introduction to Sass screencast.

Watch now →

Graceful Degradation with jQuery and Rails 3

Sat, 05 Feb 2011 05:17:12 +0000

Watch now →

Overview

Throughout your web development career you may be required to develop sites that can function when JavaScript is switched off. This may be required because of security or accessibility policies, or perhaps just plain old ideology.

Graceful Degradation is a term used to describe designing websites so that they still function as well as possible in older browsers, or browsers with less functionality.

In this video tutorial we’ll look at how to “gracefully degrade” the behavior of our Rails 3 app that uses jQuery, when it encounters an environment that has JavaScript switched off.

What You'll Learn:

How to make the destroy links degrade gracefully
Write jQuery to restore original Rails behaviour

Follow Along

rails new widget_manager -m http://screencasts.org/templates/graceful-degradation-template.rb

Links

Watch now →

Using AJAX with jQuery

Thu, 03 Feb 2011 04:42:09 +0000

Watch now →

Overview

jQuery has an arsenal of tools for you to include dynamic data in your web application. There are many different techniques which may suit one situation over another. In this screencast we'll show you several ways that jQuery can load information off the web, which you can start using to enhance your projects right away.

What You'll Learn:

How to load fragments of HTML into container elements using the .load() method
How to transverse XML and use JSON to load data dynamically into multiple parts of a page
Why JSON is preferred data format over XML
How to set global and local callbacks
Best practices for jQuery development

Links

Watch now →

Introduction to jQuery

Thu, 03 Feb 2011 04:41:53 +0000

Watch now →

Overview

This screencast will show you how to use some of jQuery’s core functionality, including accessing attributes, manipulating HTML, transversing the document, applying effects and handling events. We’ll show you how to setup a page with an article and two forms (sign in and sign up) that dynamically hides and reveals the forms, and compares the password and password confirmation fields, along with notifications for the user.

What You'll Learn:

How to access attributes
How to Manipulate HTML
How to Transverse the document
How to apply effects
How to handle events

Links

Watch now →