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).
this is really great stuff!
thx for share – always wanted smth like this
Your button maker has been helpful to me many times! Thanks!
Just wanted to point out that the button maker uses the old syntax for WebKit for the gradients, which does work even in new versions of WebKit, but should probably be updated to include the new syntax as well. And you might want to include a standard syntax listed last of all, for future-proofing.
But definitely a great list, and even greater with the comments. Who knew Chris Coyier would turn into a list-post-monger? :)
I can’t believe you’re not using any of the “mothereffing” tools on a regular basis!
</sarcasm>
mothereffing text-shadow
mothereffing HSLA
mothereffing unquoted attributes
mothereffing CSS escapes
Seriously though, when you do need them, they’re pretty effin’ useful.
WTF!? thats so MOTHEREFFIN AWESOMENESSESS! :DD
Super helpful! Thanks Chris.
Thanks, very useful post. This is one of my favorite one page apps: http://0to255.com/
Love that site. Another one is colorto.me
oh this is wonderful <3
Wow, that’s a fantastic tool! There have been so many time in the past that I’ve wanted something like this.
That is an amazing site, use it on the reg.
This or kuler ?
Def. bookmarking :) The one I use is Color Scheme Designer – http://colorschemedesigner.com/.. LOVE IT!
Awesome, thanks!
The image for Border-Radius.com is too big. It goes all the way behind the ads and the poll. Using FF5 if it matters.
As to the actual article, since you posted it the other day I’ve used the ever-loving hell out of SpriteCow.
Fixed that image, thanks! And yeah SpriteCow is awesome, just not one I use kinda “all the time.” I hope to give it a real production try soon.
speaking of SpriteCow – when you do try it out, can you post about it please? i took a look at the site and just can’t figure out how to use it!
http://dummyimage.com for filler images on demand. There are tons of these out there.
I like me some http://placekitten.com/ for that
There are a whole bunch of filler images to choose from http://www.russellheimlich.com/blog/list-of-dummy-image-generators/
Isn’t the Borderradius Page completely useless since you can use border-radius shorthands?
I mean, border-radius:2px 3px 1px 4px; is kinda more efficient than writing down 4 lines just for one browser.
That is what I was thinking when I saw it too.
If I remember correctly it was created before Webkit started to use the prefix-less version, and the webkit-prefixed shorthand didn’t really work, so you had to use the single declarations.
Now it’s become kind of useless (unless you need to support Safari 4 or very old Chrome versions.)
Using TextMate I’ve set a tab snippet, so I write “br” and press tab. Then I write shorthand or just a single value, and it is copied to the browser specific css declarations.
In the bundle editor, just add this:
-moz-border-radius:$1;-webkit-border-radius:$1;border-radius:$1;
Helpful, thanks. Some I already use, some I will now.
Love the site! Just thought I’d plug two of my favorites:
-CSS Prefixer for automatic vendor prefix insertion – http://cssprefixer.appspot.com/
ProCSSor for general CSS cleanup – http://procssor.com/
I just want to say that you are totally awesome. I don’t know how else to put it. Thank you so much.
I’m glad you find our little site useful! Thanks for the mention!
http://scriptsrc.net/
Thanks for this great list! I hope you won’t mind if I add my own one-page app, Patternify:
http://www.patternify.com
It’s an app to generate patterns and export them as CSS base64 code.
This is brillant. Hats to you. The Base64 Code is not widely known or used, but I know about it, I’ve seen it in action and it is awesome in terms of performance and speed.
How does this work using only the Base64 code? I tried including only that but the div would not display unless I added a path to the PNG.
Is there something I’m missing here?
Ok. Not sure what it was but I got it working.
This is one I use a lot when working on Javascript (specifically dealing with regex): http://www.ftrain.com/unicode/
i use this whenever i have to write gradients
http://www.colorzilla.com/gradient-editor/
Perfect! :D
In my opinion, a much nicer, cleaner implementation of the character copy and paste:
http://www.symbolicode.com/
Interesting…I couldn’t figure out how to copy a copyright symbol. In the other app, I just clicked on it.
It’s just slightly confusing design. The blue © symbol in the footer is just decoration. If you change the ‘Pick a Flavour’ drop-down to ‘Symbols & Punctuation’ you’ll find a clickable copyright.
Symbolicode is pretty nice if you want a wider range of characters as HTML entities, but CopyPasteCharacter lets you have them as unicode as well so that you can use them in tweets, emails and the like.
Yeah, speaking of Regex, I really like RegExr (http://gskinner.com/RegExr/) to test the syntax and all
Seconded. I just wish it could produce specific regex for PHP, JS, TextMate etc. Though the differences are minute, that improvement would allow me to save time.
http://txt2re.com/ rocks the regex world.
Great list, but I have a bone to pick with the folks who offer CopyPasteCharacter.com. Spanish is not the only language that uses the tilde ~. But in Portuguese, the tilde is used not over the letter N but over the letter A (as in São Paulo). Too bad they didn’t have room for that. (I’m sure they had to leave out lots of special characters, so I shouldn’t whine.)
Just got this email back from the site’s author:
“Hi, we are working on the new version of the site with many new characters, to be released in a very near future. Keep an eye on our twitter (@copypastechar) to see when it’s released. ”
Never hurts to ask.
Lorem pixum rocks for generating a random photograph for quick code examples: http://www.lorempixum.com/
That strftime site would be more useful if you could switch between PHP and MySQL. The PHP manual page – http://php.net/manual/en/function.strftime.php – has the table of codes in plain sight so you don’t gain a huge amount here.
All those character copy sites break horribly with Flashblock, even *after* you activate the Flash.
I built myself an uber simple entity finder a while back, that just looped from 1 to around 20,000 and displayed every character via HTML entity. Worked for me!
I don’t think they’re using flash to copy on that site, so Flashblock shouldn’t break anything.
I don’t find an opportunity to send a feature request for strftime.net, so I’ll post it here, since i found it here :)
It would be nice, if it would output the current/any time with the code one has picked so far. You sould also integrate inserting the symbols at the cursor and not at the end.
great list! :)
greetz
Second that one – was just about to post this suggestion myself.
I came here to make the same suggestion, would be awesome to have a live preview going on there.
Great list, thanks for the tips…. CSS3Please.com should be useful to tame those ever-growing style-sheets…
Another one – http://boxjs.com :)
Some cool ones in here… real timesavers, thanks for posting.
Cheers
I
great list, but i’d add procssor.com and 0to255
Hi Chris, have you seen CDN Catalog? It has a few more options than ScriptSrc.net, but is still simple enough to quickly go grab those long script tags.
Wow, Chris. Super stuff. Thanks!
Oh gosh… Great stuff there… Loving the jscript includes and the border radius site… Very handsome tools! Thanks for sharing!
Thanks a lot Sir…Its all in one store sources page.
That’s my app -> http://cssnapkin.com
Still in alpha (very buggy), but you’ll get the idea. It’s for drawing complex graphics only with CSS. When you are done you just copy the HTML and CSS and you’re all set.
Enjoy!
It is very good.. keep improving it :)
Glad you like it :)
Yes, that’s a really cool app!
I like the idea of the app, so i guess I’ll follow it for a while and see how things go. Theres just one thing, since so many people already use photoshop and other programs to create their images, could there not be a way to take those images and convert them straight to code and would that not be a better idea since this app will always be behind what those programs can be used to create in terms of functionality (effects and such). Ofcourse, I know nothing about the subject which is why I’m asking you. Totally love the idea though!
Very useful list. Thanks for share
This is truly the best list of webapps for dev/design I’ve ever seen. Honest. I bookmarked nearly every single one (that I didn’t already use) plus a few from the comments. If only I could get away using the mother effing tools or place kittens at work…
Thanks for sharing this great list especially copypastecharatcter.com.
I’m a fan of http://lorizzle.nl, which is a whigger-lipsum-generator :-) You can’t help smiling, when looking over that kind of dummy text.
Lorizzle owned doggy pizzle amizzle, its fo rizzle shizzlin dizzle elit.
What would be great is if someone rolled the functionality of all these separate apps into one, a bit like CSS3 Machine for the iPad but with knobs on and available on the web…
I love this one too http://initializr.com/ Great to start a new project.
Do you use Notepad on every day basis that you need to use all these sites? :D
Thanks for the list.. HTML-Ipsum.com is a huge time saver.
Great post! I use a couple of the sites now! Thanks for the rest!
Thanks Chris, until I read today’s post, I did not realize how much I use your lipsum page & the button maker. Great post and great responses. Some of them were already mentioned, but here are some other ones I use.
For colors: http://0to255.com/
Quick preloader: http://www.ajaxload.info/
Gradients: http://www.colorzilla.com/gradient-editor/
CSS3 let’s have some fun: http://cssprefixer.appspot.com/
hey chris,
thanks a lot for the great post!
Thanks for the list! I especially like the characters and buttons suggestions. Thanks again.
Thank you so much the list is really helpful. I also recommend http://www.favicon.cc/ for making those nice icons on the address bar. :)
How could someone not mention this awesome site:
http://css3generator.com
It has so much features, is light, fast and simply brilliant.
second that, I find myself using css3generator in addition to css3please, it has more properties like @font-face & generating rgba colors.
*it’s important to note the css3please markup is more complete in a cross browser way so I often use it as reference.
Agreed. CSS3generator surely makes some of the other mentioned apps pointless?
I’m glad you find our little site useful! …… Be more Creative
http://www.creativesms.co.in
Great stuff! Thanks for sharing! Loving the comments and added sites as well.
I`m with Dee on this one. Thanks Chris, thanks guys!
I use this: leftlogic.com/projects/entity-lookup , instead of CopyPasteCharacter.com
There is *are* a zillion one-page apps
What a great post by Chris and all of extras everyone has added. It’s like a 4th of July present to me. :-)
A very valuable resource! This site is also one of the most navigable and aesthetically pleasing places to come learn.
Thank you, this is a great list!
Some good additions here for my list of apps! Thank you!
This one I probably use the most.
http://cssfontstack.com
Thanks Chris, great list
Hey, This is an awesome list. I am a beginner and it had helped me out a lot to understand what i was looking at. Will certainly share it. Thanks!
Thank you for all the helpful apps to look at, use, and learn from. Are there any out there that are used for javascript, like easily minifying?
http://colorschemedesigner.com/
Thanks a lot for these easey and productive tools.
Great sharing!!! I like Button Maker…
JSON parser http://json.parser.online.fr/
handy article , I like the copypaste character thing.
Great Article! Another web app I use often is “What The Font!” (http://new.myfonts.com/WhatTheFont/)
I find it a pain trying to figure out a certain font on a piece of art work that I like. This tool is very helpful!
http://procssor.com/
If you like CopyPasteCharacter.com, you might also enjoy SymbolAssist (A Categorized Unicode Character Map) @ http://plasticmind.com/labs/symbolassist/.
Great article! Just bookmarked it.
My suggestion is also http://www.ipdetails.net
Awesome Collections Man!! These are really gonna save a lot of time!!
One thing that I love the most about this site is the comments section , you know, you named some of the amazing apps you used and thanks to all the other guys who posted their own apps(the apps they use) in their comments and they are really cool!!
sharing is lovin. I admire this community :)
Thanks for sharing these tools Chris. Such a generous move. I’ve been really wondering for quite sometime if what are the tools that most of the professional in web designing are using when they start to implement beautifully crafted website’s interface.
One question: what framework are you using in building themes? Could you recommend one for an average wp geek?
Thanks!
Dont forget about http://www.iconfinder.com/ :-) Great tool for finding icons for your GUI/design, and alot of them are free for commercial use.
Nice list by the way, and I really enjoy your site.
Great list… I have been using your button maker a lot! :)
I also created a small one page tool which helps in converting looong list of raw text into html lists or select options. May be this could be helpful too :)
http://code-pal.com/listify
Useful article and there are some useful suggestions in the comments too. I hope you won’t mind if I plug my own app too, I’m learning so any feedback is welcome… http:/www.randomtext.me
Oops, that URL should be http://www.randomtext.me :)
Thanks for the comment, bookmarked!
Here is a very hand tool that has come in handy lately for me..
http://layerstyles.org/
Enjoy
An easy way to create repeat background stripe patterns…See link
http://www.stripegenerator.com/
Enjoy :)
I want to make 2 new suggestions:
http://LaunchSoon.com
http://ShareSidebar.com
this is really usefull!!
For us that have a teflon brain, this is godsend.
Hello Chris!
There is also on my mind that is
http://www.colorzilla.com/gradient-editor/
80% of these should be in your IDE of choice. If not, they should be implemented/able as plugins. Why would I remember a url or a bookmark better than a syntax, and have to leave my IDE for this ?
Of course, such an “app” provides more ego-boosting than a much more anonymous than an IDE plugin. But which is really more productive ?
love the CSS3Please.com … thanks
I like the list. There is another one similar @ http://www.whatisthatsong.net