One Page Apps I Actually Use

Avatar of Chris Coyier
Chris Coyier on

There is a zillion one-page apps focused on making some little aspect of front end development easier. I think they are great. They exemplify the wonderful culture of sharing and ingenuity that our industry is known for. Each of us has slightly different jobs and slightly different skill sets. That means a little helper app that is useful to you might not be to me and vice versa. So of the probably-hundreds of these one-page apps that I’ve seen over the years, there are only a handful that find myself using on a regular basis. I thought I’d share those, and maybe you can share yours in the comments.

CSS3Please.com

Why type out all five property/value pairs for a transition when you could just come here and copy it quick in nice formatting with comments. Even if you have it memorized, coming here will ensure you have the latest and greatest syntax as browsers evolve.

Border-Radius.com

Every time I need to round some of the corners of an element but not all of them I end up here. I start at the first box, enter the value, and tab around to the other four entering values. The vendor prefixes between moz and webkit are different for specific corners (e.g. radius-topleft vs. top-left-radius) and I can never remember.

HTML-Ipsum.com

I created this one for myself. Just really common bits of HTML markup filled with “lorem ipsum” filler text. Sometimes I need a couple of average length paragraphs of text or a quick unordered-list navigation. Those things are now just a click-to-copy-to-clipboard away.

ScriptSrc.net

I gotta drop jQuery on this page… what’s that long funky URL of where it’s hosted on Google’s CDN again? It’s impossible to remember but through this site, you can just click on the library you need and get the script tag copied to your clipboard.

CopyPasteCharacter.com

Ever need a really common symbol for a tweet or an email or website? Just come here and click to copy them. Hold alt to get multiple. Click the link at the top to toggle between encoded and unencoded.

Button Maker

If I just need some quick CSS3 to make a button I usually use this (another one by me). The style doesn’t fit every scenario, but I think it’s a pretty nice generic customizable style.

One of the sparks that inspired this post was that I just helped a friend slap a design on STRFTIME, a one-page app for getting those placeholder symbols for date formatting (e.g. %Y = 2011).