Grow your CSS skills. Land your dream job.

Beta: New Snippets Area!

Published by Chris Coyier

Hey ya'll - I'll let you in on a little secret here, there is a design update coming out soon here on CSS-Tricks. As usual, just a little realign / refresh / spit shine kinda thing. There are several reasons for it. Number One - I have a new area of the site I've been working on that I wanted to get integrated into the main navigation, and there simply isn't room with this current setup. The new area? Code Snippets!

There are many like it, but this one is mine.

The goal being to create a large repository of useful code snippets in the areas that are most often talked about on this site: HTML, CSS, JavaScript (raw), JavaScript (jQuery), PHP, and WordPress. I'm sticking with these are first because I know the most about these and can moderate and test the code myself.

I've always fancied CSS-Tricks a "resource", so today I hope this becomes even more true. The snippets will be searchable, and the upcoming new design will have that integrated much better. Each snippet will have comments associated with it, just like any video screencast or article. Significant improvements or bug fixes in the comments will be adjusted in the snippet itself.

$1 Launch Idea

There is already some great useful stuff in there, but the larger this thing grows the more useful it becomes. I thought maybe a cool idea would be accept snippet submissions from ya'll, and pay out a dollar for each accepted snippet. I know that's just a pittance, but heck maybe it'll get you a free lunch.

Submit a Snippet

All the snippets are going to be moderated by me, so if you submit something and you don't see it go up, sorry, I promise it's nothing personal. It also might take me a while to sort through them all and do payouts, but it won't take any longer than a week or two (probably).

Comments

  1. Permalink to comment#

    Thanks a lot! This is an amazing new area. Your snippets aare very useful.

  2. banny
    Permalink to comment#

    good idea :D

  3. Permalink to comment#

    Wow! This is a fantastic idea, Chris.

    *madly makes snippets of code*

  4. Donny
    Permalink to comment#

    Ran across the snippets area the other day and looks pretty cool. Really great idea.

  5. Anne
    Permalink to comment#

    Thanks! This is fantabulous!

  6. Permalink to comment#

    I think this is a nice touch and in many ways, a natural progression for this site. Absolutely awesome, cheers Chris!

  7. Permalink to comment#

    Hey chris,

    Thanks for the $2 so far

    Sean :)

  8. Permalink to comment#

    This looks fantastic, the interface is very simple and user-friendly. Great idea, Chris!

  9. Permalink to comment#

    Nice idea, and I can’t wait to see the “realign / refresh / spit shine kinda thing” when it’s done.

  10. bangbang
    Permalink to comment#

    this will be awesome, cant wait.
    i just got a look at ur snipets, and already know i’ll use that feature.
    thanx a lot

  11. Natalie
    Permalink to comment#

    What a brilliant idea. Thanks so much for this. I learn more here than anyplace else.

  12. I noticed this a while ago… very cool idea Chris!

    How about a .htaccess section? an area often overlooked…

    I submitted one tonight to get things started if you like the idea

  13. Terrific! Very very nice idea! I will use it very often…

  14. Aziz Light
    Permalink to comment#

    Great idea, I love how you designed the language selection page.

    The only complaint would be the lack of syntax highlighting.

    Anyway good job!

  15. Permalink to comment#

    Great step :)

    we are waiting for more and more ..

  16. Federico Reinoso
    Permalink to comment#

    I have a petition :p
    A snippet in jquery for auto delete a div after a few seconds. Just like auto fade alert

  17. Permalink to comment#

    i submitted one

    :)

    Check Out my Site

  18. Permalink to comment#

    I was going to lunch a website dedicated to snippets, now I will stop it! Great work and thanks to share with community.
    It would be good to have rss feeds for snippets and yet better, individual rss feeds for each category…

  19. Dan P
    Permalink to comment#

    I’ve been looking for a great code snippet repository every since I won a free copy of Snippet.

    I’m already subscribed here, and completely the opposite of disappointed in what I read, so I guess I won’t have to go anywhere for quality snippets!

  20. +1 for the Full Metal Jacket reference.

  21. Matt
    Permalink to comment#

    I’ve never heard of anything like this, but I’m glad you’re doing it :)

  22. Dan
    Permalink to comment#

    Great idea! thanks!

    My only suggestion might be to include some additional information for each snippet which outlines best practices, browser support, css version etc.

    A little background info on each snippet I believe would go a long way, and boost interest in the snippet as it would gives the user the background information on the code so they can use it in the correct place at the correct time rather than trying to work it all out for themselves.

    That side, its great to see some readily and easily available!

    • Permalink to comment#

      I agree. Some of the snippets are hard to describe in a title. Having a quick paragraph detailing what the snippet does would be valuable.

  23. Matt
    Permalink to comment#

    Great idea, and I know will be very useful.

    Thanks and keep up the awesome work.

  24. You sir, are a squire and a gent.

  25. Awesome! This is just awesome! ^_^

  26. FJ
    Permalink to comment#

    Very cool. i i submitted some. i hope you enjoy it :-)

  27. Chris
    Permalink to comment#

    Great idea! It’s thanks to people like you that we can improve our knowledge ;)

  28. ComfortabllyNumb
    Permalink to comment#

    Great idea Chris. If ya missed a basic idea or concept ya usually screwed! So these snippets will be invaluable…

  29. Permalink to comment#

    I would appreciate rss feed for snippets as well. Good job!

  30. Yes RSS would be great !

  31. Permalink to comment#

    My snippet is in the area! Thanks a lot!

  32. Jamie
    Permalink to comment#

    Cool idea I like it and I’m sure to come back!

  33. Permalink to comment#

    Wuff!
    Awesome and cool idea!

    Kind regards
    Rata

  34. Permalink to comment#

    I am so excited about this new feature!

  35. Permalink to comment#

    Okay, so I guess I’m going to sound like a dork, but just PHP? What about us Microsoft noobs and our crazy .Net?

  36. Permalink to comment#

    I have a whole folder of PHP function snippets. Mwahahah. :P

  37. Permalink to comment#

    YES!!!! GO SNIPPETS, GO!!! GOOD!!! GOOD!!! GOOD!!! GOOD!!! GOOD!!! GOOD!!!

  38. Permalink to comment#

    Very nice. This site is getting better and better by the day! Good job :D

  39. Simply Awesome!

    I’m working in HTML5 whenever possible. Here’s the code to make IE recognize the header, footer, article, section and nav elements:

    Wouldn’t it be sweet if all the snippets were available pre-packaged for Coda?

  40. Permalink to comment#

    This is an awesome section of the site, a new fave! Great work Chris!

  41. Permalink to comment#

    CSS-Tricks just became my new destination website for streamlining my code. Snippets will make developing go much faster.

  42. Jermaine
    Permalink to comment#

    I just check out you snippets section, it greate

  43. I’d love to see a default template for creating websites, something like header/footer/sidebar/index.php just so people don’t have to go about creating websites and rewriting code when they could be focusing on more important aspects. I myself and writing my own basic template for websites/applications to speed up my work cycle. Great idea man.

  44. Permalink to comment#

    Yeah, great idea. Have you considered live previews?

  45. Permalink to comment#

    cool idea Chris !! those snipets are going to be a great resource no wonder !!!

  46. As always, thanks Chris. Making bank on ya’. lol.

  47. Outstanding! Love your work.

  48. Permalink to comment#

    YEA my snippets r up the site overlay (jquery)
    time ago (php) and sever-side image resizer (php) im glad i could be apart of it thanks chris…

    Check out my site

  49. Hi Chris,

    This is what we need for every day use :) small powerful “plug and play” snippets. I like it.

    Thanks man!

  50. Permalink to comment#

    Hey chris TY for the $4.00

  51. Niall
    Permalink to comment#

    Submitted one yesterday, hopefully it’ll get accepted (:

    By the way, Remove Dotted Focus Borders & Removing Dotted Outline are basically the same snippet.

  52. Permalink to comment#

    If possible, please make it live preview before download a snippet.. it make easy to test browser support also see in action…

    Regards…

  53. V1
    Permalink to comment#

    Thanks for the free beer

  54. Are you going to add your new site design to CSS-Tricks-Redesign

  55. Permalink to comment#

    Awesome idea, and a ton of useful snippets already!

    Also, just had to comment on the redesign, as I just refreshed and there it was! I like it, though it may take some getting used to the dark sidebar.

  56. Niall
    Permalink to comment#

    I haven’t seen one added for nearly 10 days now D:

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