Posted by John on July 17th, 2008
Over the past couple of months I’ve been working on a little library for a client that allows us to create Facebook-like popup windows with ease. It’s called popup.js. The library depends on Dan Webb’s excellent Low Pro and comes complete with it’s own behavior for easy unobtrusive use.
So how does it work? Well, once you have the proper plumbing in place you can declare a simple popup window like this:
<div class="popup" id="test" style="display: none">
<h3 class="title">Popup Window</h3>
<div class="popup_content">
<p>Hello world!</p>
<p><a href="javascript: Element.closePopup('test')">Close</a>
</div>
</div>
This markup assumes that you are using the included facebook.css stylesheet, but the only thing that is necessary to have a functioning popup window is a div with an ID attribute. You should also set style=”display: none” to ensure that the div is not visible when the page loads.
Popping up the window is as simple as linking to it:
<a href="#test" class="popup">Popup</a>
Links with the class of “popup” get the Popup.TriggerBehavior which will trigger the popup when clicked. Note that the href should be set to the ID of the element to popup. If you prefer you can set the href to a URL that returns the HTML for the popup and an AJAX call will be made to that URL.
For more information about this little lib, see the README in the GitHub project:
http://github.com/jlong/popupjs/tree/master/README
And investigate the test project:
http://github.com/jlong/popupjs/tree/master/test
Special thanks to Five Points Solutions for their help with debugging this library. They have contributed several Internet Explorer bug fixes in addition to funding much of the initial development.
Posted by John on October 26th, 2007
This may be old news for some of you, but the Pragmatic Web Site got a face lift a couple of weeks ago. I was thrilled to have the opportunity to work on the site with Mike, Dave, and Andy. Most of the design work was done this summer, while the finishing touches on programming and the data import pushed the launch date back to the beginning of October. (Site credits here.)
If you haven’t seen it yet, I’d encourage you to head on over to the site and buy a book or something!
Posted by John on September 25th, 2007
Based on my HAML Server for Web Designers article, I’ve created a small gem “serve” which makes it extremely easy for a Web Designer to get up and running with Haml and Sass:
$ sudo gem install haml redcloth bluecloth serve
$ cd ~/Workspaces/prototype
$ ls . *
.:
index.haml
images:
logo.gif
javascripts:
prototype.js dialogs.js tabset.js
stylesheets:
application.sass dialogs.sass
$ serve
[2007-09-25 02:11:42] INFO WEBrick 1.3.1
[2007-09-25 02:11:42] INFO ruby 1.8.5 (2006-12-25)
[2007-09-25 02:11:42] INFO Serve::Server#start: pid=1626 port=3000
...
And voila! I can now access the files in ~/Workspaces/prototype at:
http://localhost:3000
Serve isn’t just a HAML or SASS server. With the proper gems it can also handle Textile and Markdown (not to mention plain Jane HTML!).
Serve also plays nicely with Rails. If you have a file named “script/server” in the current directory, Serve will execute that script instead of launching the normal WEBrick server.
Complete usage information is available with:
$ serve --help
Learn more about the project over at Ruby Forge…
Posted by John on September 3rd, 2007
I have a script named serve in my bin directory that let’s me quickly startup a Webrick server in any directory. This is handy for serving HTML mockups or other files. Today, updated it to work with HAML:
#!/usr/bin/env ruby
require 'webrick'
require 'rubygems'
require 'haml'
class HamlHandler < WEBrick::HTTPServlet::AbstractServlet
def initialize(server, name)
super
@script_filename = name
end
def do_GET(req, res)
begin
data = open(@script_filename){|io| io.read }
res.body = parse_haml(data)
res['content-type'] = 'text/html'
rescue StandardError => ex
raise
rescue Exception => ex
@logger.error(ex)
raise HTTPStatus::InternalServerError, ex.message
end
end
alias do_POST do_GET
private
def parse_haml(string)
engine = Haml::Engine.new(string,
:attr_wrapper => '"',
:filename => @script_filename
)
engine.render
end
end
WEBrick::HTTPServlet::FileHandler.add_handler("haml", HamlHandler)
args = ARGV.join(' ')
args.gsub!(%r{^http://}, '')
args = args.split(/[ :]/).compact
server = WEBrick::HTTPServer.new(
:Port => args.pop || 3000,
:BindAddress => args.pop || '0.0.0.0',
:DocumentRoot => Dir.pwd
)
trap("INT") { server.shutdown }
server.start
Posted by John on August 25th, 2007
OK, this has nothing to do with what I’m working on in Adam’s basement, but here’s a starfield simulation I’ve been working on for a small game in Javascript. It’s an interesting example of what is possible in Javascript on a modern Web browser (tested on Safari 3 and Firefox 2). Be sure to check out the source. Prototype makes this type of thing extremely easy.
