Posted: September 13th, 2009 | Author: Kurt | Filed under: Programming | 14 Comments »
This is the first part of a series of jQuery tutorials for designers and web developers. You can automatically receive future additions to the tutorial series by subscribing to the RSS feed, or by following me on Twitter.
jQuery is a javascript framework that makes it easy to edit markup and styles on a page, build advanced user interfaces, and update data sources with AJAX (that is, Asynchronous Javascript and XML). In the words of the jQuery developer site:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Today, we’ll go over the first steps and the one major benefit of using jQuery: selecting and manipulating markup and CSS. First, you’ll need to include jQuery in your page:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// this is where our jQuery commands will soon go
</script>
...
For the course of this tutorial, I’m going to refer to a sample unordered list with two text spans. It looks like this:
<ul id="list">
<li class="listitem" id="listitem-1"><span class="smallcaps">Hello</span> and thank you for reading.</li>
<li class="listitem" id="listitem-2">I hope you like this tutorial.</li>
</ul>
Notice that I adorned the markup with the id and class attributes. That’s so I can select portions of the markup with jQuery. Remember, the id attribute should be unique, but the class attribute will be repeated on multiple elements, usually in line with an attached stylesheet. For this tutorial, though, assume that there is no CSS modifying the basic behavior with the markup.
Now, you can use jQuery to apply a style to the entire list. First, we’ll create a function that is loaded when the page is opened, we’ll select the entire list with jQuery, and apply a CSS style to make the text blue via the color attribute.
$(document).ready(function() {
// anything in here will be loaded when the page is ready
$("#list").css("color", "blue");
});
Here’s the rundown: the $() command is used to select markup or series of markup from the page. You can select elements by id, class, or element name. To select by id, add a # to the front of the id name inside the parenthesis. For instance, to select the first li in the example above, use $("#listitem-1"). Classes are selected by putting a . before the class name, and element names are selected without adding any modification.
You can use hierarchies to drill down through the markup and select specific portions of the page. The syntax is similar to XPath, where you place a > in between the names discussed above. Here’s a quick snippet partially based on the sample above:
$("#list > li") // all list items in the list with an id of list
$("div > .nav > a") // all links underneath the div elements that belong to an element with a class of nav
Once you select an element, you can apply a CSS style to them with the css(attribute, value) command. Attributes are things like color, font-weight, and display, and values are things like #cccccc, 1.2em, and inline. So, you can make the span in the section above render in small-caps with the following:
$(".smallcaps").css("font-variant", "small-caps");
Next time, we’ll walk through some of the more advanced selectors. Also, expect tutorials on AJAX and jQuery UI.
Posted: July 20th, 2009 | Author: Kurt | Filed under: Programming | 10 Comments »
Lately, I’ve had a tendency to make fun of the mainstream applications people use to develop websites, asserting my nerd supremacy my touting my love for superior applications. Nothing good comes out of applications like Dreamweaver and FrontPage, I say, except for buggy and ugly websites. I would post snide little comments on Reddit, making fun of bad design and telling people to use Textmate. Then, a more elite nerd than I came along and ruined it for me by suggesting I wasn’t good enough because I didn’t use Emacs.
Emacs? Surely Emacs, the silly little console program, can’t stand up to the almighty Textmate? Actually, it can. Emacs is an absolutely wonderful text editor for programmers, and it can speed up development time with a series of helpful shortcuts, even for a Textmate diehard. Unfortunately, Emacs can have a steep learning curve, so I figured I would provide a basic introduction for using Emacs as a web development environment. Of course, there’s much, much more to Emacs than what I listed here, but hopefully this will help you get your feet wet.
What is Emacs?
Emacs is a superbly portable and extensible text editor. It can run on almost any operating system, and users can customize and add to it far beyond the wildest dreams of the original programmer. Emacs understands what language you are coding in, and can provide indentation, syntax awareness and highlighting, and validation for you right within the interface. While Emacs can run in a variety of graphical environments, I prefer to run Emacs in the console. It functions via a series of commands triggered by the keyboard. Every character from A-Z is a command to print that character, and you can build new commands with the Ctrl or the Meta key, much like standard hotkeys. The Meta key varies per system: on my Mac, it’s the Option key.
Emacs has some terminology that makes things a bit easier to understand. A buffer is the text that you are actually editing. You can have multiple buffers open, and save buffers to a file. Think of them like documents in a word processor: you edit them in memory, and save them to a file when you are done. A window is the view of a buffer. Your screen space is limited, so you can’t see all the buffers at the same time. You switch buffers by manipulating the window.
Basic Emacs Commands
The best way to understand Emacs is to try it out after you get some background. So, here’s a quick walkthrough of the basic commands you can use. To start Emacs, type emacs into your console, and you should be ready to go.
File and Cursor Commands
There are a lot more movement commands than this, but this will get you started for the time being. You can also move to the beginning and to the end of the buffer, to the end of the line, and move by paragraph. Another nice feature for developers is the ability to move by function (Ctrl-Meta-a and Ctrl-Meta-e) and by parenthesis (Ctrl-Meta-b and Ctrl-Meta-f).
Killing, Deleting, and Yanking
Killing and Yanking are the equivalent of the copy and paste function found in most text editors. Emacs allows you to kill, or cut, a word with the Meta-d command. This saves the word and removes it from the display. You can kill much larger pieces of text: Ctrl-k will kill the rest of the line, and M-k will kill the rest of the sentence. You can yank, or paste it back to where your cursor is with the Ctrl-Y key.
Web Developer Add-ons for Emacs
These packages make it much easier to code in Emacs by adding in code completion, text highlighting, and error checking.
Rails On Emacs
I absolutely love Rails, and I’m quite happy to find this package that makes it easy to write models and controllers in Emacs. You can quickly run Rake with the command Ctrl-c Ctrl-c r, and looking up API documentation is as easy as pressing F1. You can easily start and stop the server with Ctrl-c Ctrl-c w s, which is nice when you are working with Routes and need to restart the server. There are also a whole slew of hotkeys for jumping to the model and controller files. You can get all of the details over at the developer website.
HTML, CSS, and PHP
Nxhtml is an Emacs mode for web development that allows you to easily work with markup, stylesheets, and web langauges. It has code completion and syntax highlighting, and can automatically handle indenting code, even if it is embedded in a different language (such as PHP in an HTML file). There’s the ability to upload files, make a backup, and handle links, plus much, much more. There’s a lot to this mode, so I would start with the tutorials.
I’m definitely new to Emacs, but I hope this was a helpful introduction. Please, if you have any helpful Emacs commands for coding for the web, leave them in the comments. And, as always, be sure to subscribe to the RSS feed and vote for this post on Reddit if you find it helpful.
