June 2011
2 posts
5 tags
respond.js - css3 media query polyfill →
polyfills are slick. they might not be the sexiest of javascript libraries, but they allow you to keep moving forward, adopting new APIs and web standards as they emerge without having to come up with the ‘for dummies’ version for internet explorer 6-8.
with the increasing spread of device screen sizes and layouts, the practice of responsive web design through the use of css3 media...
3 tags
github for mac →
booooooooooiiiiiing
April 2011
2 posts
6 tags
powder for pow →
like the olsen twins, sometimes good things come in pairs.
first, i discovered pow - the zero-configuration rack sever for OSX from the nerd heros at 37signals. symlink a project directory once to your ~/.pow directory, and it will take care of everything for you. no need to fuddle with /etc/hosts or anything else, all apps on your machine will be runnable simultaneously through a url structure...
3 tags
placehold.it →
placehold.it is a quick and simple image placeholder service for you lightning fast wireframing & prototyping. simply add the dimensions, color, text and formatting into an image tag’s src attribute, i.e. =>
or if you are looking for something a little more ‘cat’ you can also try placekitten.
March 2011
3 posts
3 tags
data science toolkit →
a very exciting project - data science toolkit is a collection of open services for the budding data scientist. currently there are 9 APIs with tools for locating/localizing and extracting/converting data. the API for /file2text, for example, will extract the plain text from an uploaded pdf, word doc, or excel file, and scanned image files.
best of all the source for setting up your own copy of...
1 tag
javascript string score →
just a tiny method for scoring matches of javascript string objects. here are some examples to demonstrate its simplicity =>
"hello world".score("e") //=>0.1090909090909091 (single letter match)
"hello world".score("h") //=>0.5363636363636364 (single letter match plus bonuses for beginning of word and beginning of phrase)
"hello world".score("hello") ...
2 tags
git dropbox →
after stumbling upon a very useful suggestion on how to use dropbox as the center for your git projects, i stumbled upon this simple shell script that compacts the general idea into one solitary =>
git dropbox
this will create a bare repository in your dropbox if it doesn’t exist, and mirror your current git project to it. its probably not the best solution for groups as it seems there...
February 2011
6 posts
4 tags
noisy →
one of the best cheap tricks for adding texture to a plain color can now be done in 2.3kb of javascript instead of opening photoshop. noisy is a jquery plugin lets you generate random noise to a given element. even comes with a cool set of options =>
$('body').noisy({
noiseParticles: 0.9,
tileSize: 200,
backgroundColor: '#EDEBDE',
maxNoiseOpacity: 0.078,
fallbackImage:...
1 tag
how to see all ports in use in osx
hot tip for a warm friday - just pop open terminal and type =>
lsof -i -n -P
for a nice table view of all ports currently in use with their relevant details
2 tags
MTStatusBarOverlay →
a status bar overlay for iphone and ipad apps that supports touch-handling, message queuing, and animations. implementation is about as it gets for objective c =>
MTStatusBarOverlay *overlay = [MTStatusBarOverlay sharedInstance];
overlay.animation = MTStatusBarOverlayAnimationFallDown;
overlay.detailViewMode = MTDetailViewModeHistory;
overlay.delegate = self;
[overlay postMessage:@"Following...
2 tags
less framework 3 →
not to be confused with the extremely badass less css, the less framework is an interesting css grid solution that uses inline media queries to determine the devices available resolution and re-distribute the number of columns accordingly. the number of columns per layout increment according to the fibonacci sequence for a naturally harmonious scaling pattern. resize the demo page for an example...
3 tags
jquery file upload →
finally - a flash-less jquery file upload plugin that doesn’t suck. check out this comprehensive list of features:
* multiple file uploads * progress upload bar * server-side technology agnosticism * graceful XMLHttpRequests fallback for lame browsers * drag and drop support * very customizable and totally style-able
i’ll definitely be trying this one out next when the time...
1 tag
nsdate helper →
coming from a ruby background i’ve found objective c to be painfully verbose for most things, unsurprisingly including working with date objects. this helper class i found on github helps simplify many common tasks when dealing with NSDate conversion, formatting, and rounding (i.e. beginningOfDay). here is the full list of methods that it offers.
January 2011
1 post
3 tags
activity indicator →
a jquery plugin for rendering an activity indicator as SVG or VML. very cool alternative to the standard ajax GIF image. its highly configurable and can scale without pixelation due to being resolution independent.
December 2010
4 posts
3 tags
ajax history state →
i do not mention ryan bates’ railscasts enough here, but i’m assuming anyone worth their weight in ruby on rails googling is a devout subscriber. his latest episode explains how he discovered a way through github’s blog post on their new tree slider to load new page content dynamically through ajax, while cleanly updating the browser’s page title and location bar using...
4 tags
wirify →
wirify is a javascript bookmarklet that lets you turn any web page into a wireframe of blocks and lines in grey and white. at first, it might seem like a backwards step in development, but i think it could have some pretty interesting uses. for example, it could be a great step #1 in a redesign process - a way to abstract away all design and let you move around the core components of a page.
1 tag
head js →
self-toted as the only script needed in your <head>, head.js is a pretty exciting project that does lots of things:
* it loads scripts in parallel for maximum script loading performance, while still executing them in order. * like modernizr, it detects support for css3 attributes and slaps classes on the <html> element, so you can target any scenario of support. * graceful detection...
3 tags
iOS fonts →
simply and usefully, a list of all fonts available natively to iOS.
November 2010
6 posts
2 tags
rubydrop →
an ambitious but very exciting project, rubydrop is aiming to be a dropbox clone built in ruby and git. i’m looking forward to finding an excuse to try this out.
3 tags
designing for iphone 4 retina display techniques... →
handy article for the casual photoshop user on how to easily support iphone 4’s retina display in their icon design. basically, use strictly vector masks and shapes at 163 ppi for the original iphone resolution, then save a copy at double the resolution. marc is cool enough to supply automator workflows for batch creating these alternate versions too.
2 tags
css shadow experiments →
very creative examples of how to use css3 box-shadow, text-shadow, and animations together. the periodic table effect coule be an interesting sidekick to my jquery plugin swoosh.
{via}
2 tags
aviglitch →
so very cool. a ruby library for easily tearing your avi files into datamosh-ed monstrosities. check out this wild example.
1 tag
css lightbox →
that classic lightbox style effect for viewing images, but done entirely in css and no javascript.
5 tags
◊ swoosh 0.3 →
this weekend i rewrote swoosh, my jquery plugin for easily defining color-based animations through css selectors. in addition to fixing some bugs and smoothing out RGBA support, i also added support for box-shadow animations in addition to text-shadow animations. the minified version clocks in at 8kb.
check out the live demo page.
October 2010
5 posts
1 tag
chronic →
tom preston-werner’s chronic is a natural language date and time parser in ruby. with it, you can turn plain english from all those non-programmer humans using web applications and conveniently turn them into datetime objects =>
Time.now #=> Sun Aug 27 23:18:25 PDT 2006
Chronic.parse('tomorrow')
#=> Mon Aug 28 12:00:00 PDT 2006
Chronic.parse('monday', :context => :past)
...
3 tags
css3 glass text →
a refractive index effect using css3 that makes letters look like big slabs of glass that slightly magnify whatever is behind. could an interesting way to add some depth to a design.
1 tag
using a protocol-independent path →
the more you know =>
<img src="//domain.com/img/logo.png"/>
with the double-slash in the front of the src attribute, you can specify the domain name whilst letting https requests stay in SSL and letting html requests roam free.
{via}
2 tags
mother effing text-shadow →
for all y’all dumb mother effers like myself that didn’t know you could use multiple text-shadow declarations for a single element, check out this whacky css3 text-shadow code generator.
3 tags
eco →
eco is an embedded coffeescript templating system that looks a whole lot like erb. the coffeescript syntax has that same, smooth ruby taste =>
<% if @projects.length: %>
<% for project in @projects: %>
<a href="<%= project.url %>"><%= project.name %></a>
<p><%= project.description %></p>
<% end %>
<% else: %>
No...
September 2010
6 posts
3 tags
html5 forms backwards compatibility →
as a companion to his excellent a list apart article: “forward thinking form validation”, ryan seddon offers this javascript for patching html5 form support for non-supporting browsers. sounds like the right idea to me.
3 tags
$.getImageData →
very interesting jquery plug-in that allows you to grab remote images as a JSON object, for loading into <canvas> tags for manipulation. has some pretty groovy possibilities.
2 tags
snoopy →
very nice little bookmarklet for viewing the source of pages in mobile browsers like mobile safari.
2 tags
cheat.el →
if the 3 days i’ve been trying this emacs lisp for cheat, the rubygem for referencing random bits of info, i’ve found it really helpful. no longer are the days of diving into google or document searching for annoying things like imagemagick gemeometry, strftime, or ffmpeg commands.
2 tags
◊ hemacs →
as the budding emacs evangelist i’ve become, i decided to put my custom emacs set-up up on github for idea perusing/scoffing at. lots of ideas were taken from defunkt, al3x, and the emac’s wiki. it’s also been a great exercise in getting accustomed with magit, a great emacs mode for git.
my set-up is mainly tailored for ruby, javascript, css, git, and html. i’m on osx,...
2 tags
cached commons →
a collection of cached and optimized popular javascript libraries and stylesheets, hosted on github’s fast CDN. think of it as a more extensive, user-contribute-able alternative to google’s libraries API. an excellent resource for the cloud-minded developer.
August 2010
4 posts
3 tags
css gradient editor →
as a general rule: the fancier the css3 property, the more verbose the syntax. this is double true when rgba color values are thrown in. here’s a convenient gradient editor that auto-generates the necessary css.
{via}
2 tags
less.js →
i have been a heavy user of less, the dynamic css processor, for sometime now. it has been an invaluable time-saving and creatively-inspiring tool in my front-end workflow. with less.js, it is easier than ever to get rolling. since less has now been ported to javascript, it can be rendered in the browser - no need to install the gem and watch/render the css file. just include the script and point...
2 tags
padrino →
since discovering sinatra, the ruby DSL that feels like rails’ elegant little brother, i’ve been trying to find a use for it in my typical projects. hence, padrino has me really excited. it seems to have almost all the features i could think of needing =>
* agnostic support for orm’s (for me, activerecord or mongomapper) * support for less, sass, haml, and erb * typical...
2 tags
webfont loader →
and so continues the track of making it faster and more convenient to use the fonts you want to use. with this javascript from typekit, you can use any of the fonts in google’s free and extensive font api very easily =>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
...
July 2010
7 posts
3 tags
html5 audio with flash fallback →
a nice explanation of how to support html5 audio and flash in the same markup. embedding <object> within <audio> doesn’t work as hoped, due to firefox complaining about MP3 being patent-encumbered. the solution? swap the nesting of the <object> and <audio> tags =>
<object data="/swf/flashplayer.swf?audio=file.mp3">
<param name="movie"...
2 tags
fontfonter →
a neat tool from the fontshop for dynamically test-driving different fonts on live sites.
3 tags
css3 for internet explorer →
PIE is a very clever and simple way of bringing some tasty treats of css3 to internet explorer 6-8. here’s an example usage =>
#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(/ie/PIE.htc);
}
IE will read the non-standards ‘behavior’ attribute, serve up the PIE, and...
3 tags
mailtrap →
personal rails development rule #342: don’t check your email while coding.
mailtrap is a super simple mock SMTP server for rails development. it also comes with a mock pop3 server if you want to use it with a GUI like apple mail, but i prefer to just tail the log file in a terminal window. getting up and running with mailtrap is super easy: =>
# install the gem
gem install mailtrap
#...
1 tag
drop shadows with css3 →
i’m a big fan of css3 replacing common png tricks. here’s an interesting way to make that ‘popping off the page’ drop shadow effect =>
article:before, article:after {
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 15px;
z-index:...
3 tags
rvm in emacs →
want your emacs’ rinari rails minor mode to use your rvm’s default ruby version? (answer: probably). it’s as easy as slapping this lisp in your emacs set-up.
4 tags
sharekit →
a framework for adding the ability to share of various types of content to any number of web services like email, twitter, delicious, facebook, and google reader to your iOS app.
its totally customizable, fully documented, and adding it to your project starts with just 3 lines of code.
{via}
June 2010
1 post
2 tags
smokescreen →
a flash player written in javascript. hopefully this will silence all the whiners that want flash on their iphones.
May 2010
5 posts
2 tags
pictaculous →
pictaculous is a web app that extracts the hexadecimal values of the color scheme from an uploaded image. you can download the adobe swatch file or compare it to similar kuler and colourlovers schemes. you can even use it on your mobile phone by taking a picture and emailing it to colors@mailchimp.com.
3 tags
cloud zoom →
cloud zoom is a snazzy image zoom jquery plugin. a bunch of options are available and the animations are very smooth. works all the way down to ie6 and minified its only 6kb.
{via}
3 tags
the all-in-one almost-alphabetical no-bullshit... →
appendix a of mark pilgrim’s dive into html5. no hanky-panky here, just quick javascript bits to test if the browser you’re working in can handle a certain html5 element or attribute.