Grow your CSS skills. Land your dream job.

One Page Apps I Actually Use

Published by Chris Coyier

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).

Comments

  1. AucT
    Permalink to comment#

    this is really great stuff!

    thx for share – always wanted smth like this

  2. 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? :)

  3. 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.

  4. Super helpful! Thanks Chris.

  5. Carlos
    Permalink to comment#

    Awesome, thanks!

  6. Bradley
    Permalink to comment#

    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!

  7. http://dummyimage.com for filler images on demand. There are tons of these out there.

  8. 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.

    • Francesco
      Permalink to comment#

      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.)

    • Rasmus
      Permalink to comment#

      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;

  9. Helpful, thanks. Some I already use, some I will now.

  10. 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/

  11. John
    Permalink to comment#

    I just want to say that you are totally awesome. I don’t know how else to put it. Thank you so much.

  12. I’m glad you find our little site useful! Thanks for the mention!

    http://scriptsrc.net/

  13. Ryan King
    Permalink to comment#

    This is one I use a lot when working on Javascript (specifically dealing with regex): http://www.ftrain.com/unicode/

  14. thomas
    Permalink to comment#

    i use this whenever i have to write gradients

    http://www.colorzilla.com/gradient-editor/

  15. Cris
    Permalink to comment#

    In my opinion, a much nicer, cleaner implementation of the character copy and paste:

    http://www.symbolicode.com/

    • Chipp
      Permalink to comment#

      Interesting…I couldn’t figure out how to copy a copyright symbol. In the other app, I just clicked on it.

    • Kriss Watt
      Permalink to comment#

      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.

  16. Martin
    Permalink to comment#

    Yeah, speaking of Regex, I really like RegExr (http://gskinner.com/RegExr/) to test the syntax and all

  17. Philip Jones
    Permalink to comment#

    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.)

    • Philip Jones
      Permalink to comment#

      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.

  18. Lorem pixum rocks for generating a random photograph for quick code examples: http://www.lorempixum.com/

  19. Scott
    Permalink to comment#

    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!

  20. Jonny007-MKD
    Permalink to comment#

    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

  21. Great list, thanks for the tips…. CSS3Please.com should be useful to tame those ever-growing style-sheets…

  22. Another one – http://boxjs.com :)

  23. Some cool ones in here… real timesavers, thanks for posting.

    Cheers
    I

  24. rakeshjha
    Permalink to comment#

    great list, but i’d add procssor.com and 0to255

  25. 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.

  26. Chipp
    Permalink to comment#

    Wow, Chris. Super stuff. Thanks!

  27. Permalink to comment#

    Oh gosh… Great stuff there… Loving the jscript includes and the border radius site… Very handsome tools! Thanks for sharing!

  28. Thanks a lot Sir…Its all in one store sources page.

  29. 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 :)

    • Helge

      Yes, that’s a really cool app!

    • Ruben/ furrball1383

      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!

  30. Very useful list. Thanks for share

  31. 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…

  32. Thanks for sharing this great list especially copypastecharatcter.com.

  33. Rasmus
    Permalink to comment#

    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.

  34. 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…

  35. Raymond Torres
    Permalink to comment#

    I love this one too http://initializr.com/ Great to start a new project.

  36. marines
    Permalink to comment#

    Do you use Notepad on every day basis that you need to use all these sites? :D

  37. Permalink to comment#

    Thanks for the list.. HTML-Ipsum.com is a huge time saver.

  38. Great post! I use a couple of the sites now! Thanks for the rest!

  39. 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/

  40. hey chris,

    thanks a lot for the great post!

  41. Thanks for the list! I especially like the characters and buttons suggestions. Thanks again.

  42. Permalink to comment#

    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. :)

  43. How could someone not mention this awesome site:

    http://css3generator.com

    It has so much features, is light, fast and simply brilliant.

    • Hlight
      Permalink to comment#

      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?

  44. Ann
    Permalink to comment#

    I’m glad you find our little site useful! …… Be more Creative

    http://www.creativesms.co.in

  45. Permalink to comment#

    Great stuff! Thanks for sharing! Loving the comments and added sites as well.

  46. Some guy

    I use this: leftlogic.com/projects/entity-lookup , instead of CopyPasteCharacter.com

  47. Mnesikles

    There is *are* a zillion one-page apps

  48. What a great post by Chris and all of extras everyone has added. It’s like a 4th of July present to me. :-)

  49. A very valuable resource! This site is also one of the most navigable and aesthetically pleasing places to come learn.

  50. Michelle

    Thank you, this is a great list!

  51. Helge

    Some good additions here for my list of apps! Thank you!

  52. This one I probably use the most.

    http://cssfontstack.com

  53. Thanks Chris, great list

  54. 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!

  55. Pertrai1

    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?

  56. Mohamed Fiteh

    Thanks a lot for these easey and productive tools.

  57. Great sharing!!! I like Button Maker…

  58. handy article , I like the copypaste character thing.

  59. 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!

  60. If you like CopyPasteCharacter.com, you might also enjoy SymbolAssist (A Categorized Unicode Character Map) @ http://plasticmind.com/labs/symbolassist/.

  61. Great article! Just bookmarked it.

    My suggestion is also http://www.ipdetails.net

  62. 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!!

  63. 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!

  64. 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.

  65. 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

  66. 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

  67. Thanks for the comment, bookmarked!

  68. Here is a very hand tool that has come in handy lately for me..

    http://layerstyles.org/

    Enjoy

  69. arnold
    Permalink to comment#

    An easy way to create repeat background stripe patterns…See link

    http://www.stripegenerator.com/

    Enjoy :)

  70. Permalink to comment#

    I want to make 2 new suggestions:

    http://LaunchSoon.com

    http://ShareSidebar.com

  71. this is really usefull!!

  72. fredM
    Permalink to comment#

    For us that have a teflon brain, this is godsend.

  73. Hello Chris!
    There is also on my mind that is

    http://www.colorzilla.com/gradient-editor/

  74. greg
    Permalink to comment#

    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 ?

  75. love the CSS3Please.com … thanks

  76. Skip
    Permalink to comment#

    I like the list. There is another one similar @ http://www.whatisthatsong.net

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".