Jesse Newland

80 Posts tagged with web

The Art of Capacity Planning

The Art of Capacity Planning is written by John Allspaw, the manager of data operations for the world-famous photo-sharing site Flickr.com

WebKit now supports CSS Variables

ZOMG awesomeness

Yaws

Yaws is a HTTP high perfomance 1.1 webserver particularly well suited for dynamic-content web applications. Yaws is entirely written in Erlang.

Padded link targets for better mousing

Plz to be implementin this on ur site

Documenting the Open Web

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more

Freedom

Freedom disables networking on a Mac for up to three hours at a time. Designed to free you from the distractions of the internet, allowing you time to code, write, or create.

Mashery - Mashery: On-Demand API Infrastructure

Unleash and manage channels for your API responsibly with Mashery’s combination of security, usage, access management, tracking, metrics, commerce, performance optimization and developer community tools.

Calais

The Calais web service automatically attaches rich semantic metadata to the content you submit – in well under a second

Sinatra

Classy web-development dressed in a DSL

Nginxr

A ruby wrapper for nginx config files

Programming Collective Intelligence

This fascinating book demonstrates how you can build web applications to mine the enormous amount of data created by people on the Internet

Rack RESTful Dispatcher

Dead simple Ruby REST Services with Rack

YAWS (Erlang) frontend for rails apps

Fuzed is a project attempting to use YAWS and erlang distribution to replace the conventional many-parts mongrel revproxy solution. Ultimately, the goal of the Fuzed project is to make a system which can easily deploy a rails app onto EC2

UI-patterns.com

User Interface Design Pattern Library

Photoshop Template for Blueprint CSS Comps

PSD with vertical guides based on the 24 units provided by Blueprint

Acid3

Acid3 is primarily concerned with ECMAScript and the DOM though Selectors Level 3, Media Queries, and data: URIs are also tested.

Design

Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.

Amazon SimpleDB

I got word that this was being worked on at an Amazon event several months ago. Good to see it released!

Fluid - Free Site Specific Browser for Mac OS X Leopard

'Fluid is very similar in nature to Prism, but is based on Safari's WebKit rendering engine'

Facebox 1.0

Facebook-inspired lightbox plugin. It uses jQuery and works with images, divs, and ajaxes.

Premailer — preflight for HTML e-mail — dunae.ca

For the best HTML e-mail delivery results, CSS should be inline. This is a huge pain and a simple newsletter becomes un-managable very quickly. This script is my solution.

Text resize detection with Prototype

Detects changes to font sizes when user changes browser settings

ies4osx

The holy grail - multiple versions of IE, run via Wine, on OSX.

favikon

Creating favicons couldn't be easier

The Pragmatic Bookshelf | Prototype and script.aculo.us

Just bought this one

identity-matcher - Google Code

This code, extracted from the Rails codebase of dopplr.com, extends your User model with methods to pull in social network information from sites such as GMail, Twitter, Flickr, Facebook and any site supporting appropriate Microformats.

Surfin’ Safari - Blog Archive » Downloadable Fonts

@font-face implemented in Safari trunk. The future is now.

Multi-Safari

Self-contained installations of Safari that don't use the system's WebKit.

glider.js

tabs have *nothing* on gliders. this is sick!

polar bear lamps: Once again, more css drop downs.

CSS Drop Down menus meet web standards.

iui - Google Code

iPhone UI framework

Mobile Web Design ~ A Book by Cameron Moll

"A web standards approach for delivering content beyond the desktop"

HTTP/1.1: Status Code Definitions

Print this out. Memorize it. Now.

Using JSON with Yahoo! Web Services

How to correctly work with JSON resources.

Blueprint: A CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

MileMarker

A Ruby on Rails plugin for visually setting expectations throughout application development. MileMarker adds a helper for marking page elements with the milestone they are slated to be developed, and makes them unable to be interacted with.

Howto Dynamically Insert Javascript And CSS

a short and sweet little tutorial detailing how to dynamically load remote javascript and css files into an existing page

YSlow for Firebug

YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.

FeedBurner for the Paranoid

After all of the hubub this weekend about how FeedBurner is ‘trouble’ and ‘bad for us’, I wanted to make a quick note of a couple of ways to serve your feeds through FeedBurner in a way that makes it possible to easily and seamlessly bring your feeds back under your control at any time.

  1. Use FeedBurner’s MyBrand service (which is now free) to serve your feeds using a domain you own. This lets you serve your feeds with a URI of http://feeds.mysillyblog.com/mysillyfeed or the like. In the event Google ‘preferring’ Google Reader for feeds burned by FeedBurner (something I’m confident Google will never do), you’d just point feeds.mysillyblog.com back to a server you control, and in the blink of a TTL, your feeds are yours again. For details on implementing MyBrand, check out Danny Sullivan’s great guide: Stay Master of Your Feed Domain.
  2. Advertise your feed at a URL on your blog (http://mysillyblog.com/index.xml), then redirect users to FeedBurner with a 302 Found redirect. Straight from the HTTP specifications, this tells your browser or RSS reader:
    Since the redirection might be altered on occasion, the client SHOULD continue to use the Request-URI for future requests.
    Here’s a nice guide detailing how to properly redirect your feed to FeedBurner using a 302 Found response code. In this case, if Google / FeedBurner ever sins against you or your mother, your feeds can be instantly and seamlessly moved away from FeedBurner by removing this redirect.
  3. For the extra paranoid, combine methods 1 and 2!

I’m a huge fan of FeedBurner, and like Fred Wilson, don’t share the concerns of Dave Winer about FeedBurner’s future. At last count, I manage around 225 feeds in several FeedBurner accounts, and don’t ever plan on going back. But, if the need arises, I take comfort in knowing how easy is is to leave. To quote Fred’s post:

That gives me all the comfort in the world. I love it when services make it easy to leave. When they do that, I tend to stay.

OmniGraffle Wireframe Palette | urlgreyhot

"a very basic set of shapes for making wireframes". Thanks Greg!

A List Apart: Articles: Conflicting Absolute Positions

A beautifully simple technique for liquid layouts

Widon't for Movable Type

A plugin to prevent widows from appearing in titles and entry headers. Widows are single words, left on their lonesome on a line at the end of a paragraph, and generally look like poo.

Merb

Mongrel ERB = MERB. Ruby MVC goodness, minus the 'Rails Albatross' (TM)

FakeWeb

FakeWeb is a helper for faking web requests. This makes testing easier, because you can decouple your test environment from live services without modifying code.

Mike Davidson: How To Keep Widgets From Slowing Down Sites: WEDJE

A solution to the sidebar javascript widget slowdown problem

Handling Keyboard Shortcuts in JavaScript

Nice simple library to handle Keyboard Shortcuts in JavaScript

mod_gzip - serving compressed content by the Apache webserver

A detailed but ugly guide to mod_gzip

YUI: CSS Grid Builder

GUI grid builder from Yahoo. Guaranteed to work in A class browsers. I won't ever do an new XHTML/CSS layout without this again.

IE NetRenderer - Browser Compatibility Check

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany.

Camino. Mozilla Power, Mac Style

Camino 1.5 is out. Download, and enjoy.

A bunch of presentations on scaling websites: twitter, Flickr, Bloglines, Vox and more.

If you haven't seen any of these, take some time and take a look at them all. Great info about building scalable web services.

Stolen Content: How To Guide

What to do if your web content is stolen.

Textile : Control.TextArea : Projects : LivePipe™

Control.TextArea for Textile is an extension of the Control.TextArea library.

You think you know (JavaScript) but you have no idea

a series of excellent presentations by Douglas Crockford from Yahoo!

Examples from JavaScript: The Definitive Guide, Fifth Edition

The links below display the source code for the 124 numbered examples in the 5th edition of JavaScript: The Definitive Guide

Largest production memcached install?

Great thread with input from some of the heaviest memcached users out there

CSS Dock Menu

?Quite nifty css js dock effect.

fortuitous

Someday, I'd like to live in a remote place like this, screwing around on the web. All I need is a fast connection.

Joyent Slingshot - Trac

Slingshot is out. I'm not on a plane, but this still looks cool.

How to prevent HTML tables from becoming too wide | 456 Berea Street

The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing....

Panic - Coda - One-Window Web Development for Mac OS X

Text editor Transmit CSS editor Terminal Books More = Whoah.

Vitamin Features » Serving JavaScript Fast

Nice article covering some very useful techniques for forcing web clients to cache javascript, css, and image assets.

A Guide to CSS Support in Email: 2007 Edition - Campaign Monitor Blog

'No doubt the Outlook 2007 "incident" had the biggest impact on CSS support in email over the last year.'

RobotReplay - The Next Generation of Web Analytics

RobotReplay lets you record and watch your website visitors in action. View recorded sessions of every mouse movement, click and keystroke

BadgerFish

BadgerFish is a convention for translating an XML document into a JSON object.

polar bear lamps: PNG color mismatch on the web: an easy fix

Collection: Design Patterns

Random findings of consistent interfaces and design across the web.

24 ways: Compose to a Vertical Rhythm

"On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care...

960grid.png

Nice grid image tuned for 1024x768 monitor resolution

caboose Tongue in Cheek goes to 1.1

Give your in-development web application that 'no I'm really not finished yet' look.

Agile RSS Aggregator in Ruby - igvita.com

A liberal RSS aggregator in 26 lines of Ruby

Joyent Slingshot

Joyent Slingshot allows Rails developers to easily create a hybrid Web/desktop application with the experience a user expects from a normal desktop application. Drag in and out of the Rails application for files, email, iCal events, vCards, bookmarks (htm

Benchmarking with httperf | PeepCode Screencasts for Ruby on Rails Developers

This screencast shows how to use the very simple (but capable) httperf command-line tool. It also explains the basic statistics you need to know to compare separate benchmarking runs.

ReCSS: Reload your CSS

This little bookmarklet makes refreshing your CSS a breeze. Especially nice when test on browsers that like to aggressively cache CSS (I'm looking at you, Safari)

Active Reload—Your requests are safe with us

Nice rundown of preventing CSRF attacks in Rails apps

swfIR: swf Image Replacement

Nice standards based approach to processing images with Flash. If only they could get rid of that onLoad flicker.....

zeroflux.org :: Web Clustering with Amazon EC2

Very nice tutorial detailing a web clustering setup at Amazon's EC2

eXigo inCode | Expressing your design in XHTML/CSS code

PSD -> XHTML/CSS outsourcing. Looks better than xhtmlized.com, and cheaper.

How to Make a Screencast on Mac OS X

As my Firebug Screencast made it’s way around the web, I received quite a few comments and emails asking me how I made this screencast. I’ve put off responding to most of them, thinking that I’d make a screencast about making a screencast. The recursiveness of the meta-screecast is too much for me to handle, so I’ve given in. Here’s how I put my screencast together.

Tools

Spotlight Effect

To create the spotlight effect and highlight the mouse clicks and keypresses, I used Mouseposé from Boinx Software.

Screencast Software

To record the screen and voiceover, I used Snapz Pro X from Ambrosia Software.

Microphone

For this screencast, I used the internal mic on my Mac Book Pro in a quiet room. I initially planned on re-tracking the audio with an external mic I had laying around, but I was quite happy with how the sound turned out, and, frankly, was more interested in lunch than working on this screencast any longer. If you’re looking for pro sound, you’ll need an external mic. My buddy Ryan Irelan, who runs Podcast Free America, recommends these models:

  • Kustom KM4 Mic with Cable
  • Behringer XM8500 Microphone
  • Shure SM58 Mic
  • MXL MXL V63MBP Computer Desktop Recording Kit

If you go the re-tracking route, it might be worth your time to run your audio track through The Levelator. I’ve not used it personally, but I’ve heard great things.

Encoding

To re-encode the video produced by Snapz Pro X into H.264, I used Quicktime Pro. I chose Quickitme Pro for it’s ease of use and support of the Fast Start feature, which allows the movie to start playing before it’s been entirely downloaded. For those interested in the specific encoding parameters I used when exporting, here they are:

Process

  1. Write a script. The public firebug screencast was probably take fifteen or so – the first ten of which I tried to do without a script. Let’s just say those ten takes included a good bit of French (in the “pardon my French” sort of way) as a result of my frustration. After I wrote a script, printed it out in large type, and set it by my monitor, things went much smoother.
  2. Memorize the script. The next five tossed takes were the result of me not looking at the screen while I was recording the screencast, but rather looking at the script. Once the script is memorized, you’re free to focus on what’s happening on the screen.
  3. Enunciate. If you’ve never recorded your voice for any published work, take a look at Ryan’s Training Your Voice for Podcasting guide. His tips are right on the money, especially this one: “Overcompensate. You’ll probably think you sound weird, but that’s when you’re doing it correctly.”
  4. Go for it! Enable Mouseposé, invoke Snapz Pro X, and give it a whirl. Expect to repeat this step several times until you’re happy with the end result.
  5. Publish. Compress your final take using Quicktime Pro, upload it to your favorite (preferably un-metered) webhost, and blog about it.

If any of you have any corrections, clarification, or additions that you’d like me to post, please post a comment below. I’m not a professional by any means – I’ve published one and only one screencast. If you make a screencast using this tutorial, I’d love it if you posted a link to your screencast in the comments as well.

So, what are you waiting for? Start working on your screencast!

Disabling Snap Preview Popups

Oh thank God you can disable those hideous things
next page »
What is this?