A Web Design Community curated by Chris Coyier

Beta: New Snippets Area!

By: Chris Coyier on 9/3/2009

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

66 Responses

  1. Simon says:

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

  2. banny says:

    good idea :D

  3. Rich says:

    Wow! This is a fantastic idea, Chris.

    *madly makes snippets of code*

  4. Donny says:

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

  5. Anne says:

    Thanks! This is fantabulous!

  6. Conor says:

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

  7. Sean Hood says:

    Hey chris,

    Thanks for the $2 so far

    Sean :)

  8. Gaston says:

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

  9. Matt Adams says:

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

  10. bangbang says:

    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 says:

    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 says:

    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. Yasser says:

    Great step :)

    we are waiting for more and more ..

  16. Federico Reinoso says:

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

  17. Hassan says:

    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…

  18. Dan P says:

    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!

  19. +1 for the Full Metal Jacket reference.

  20. Matt says:

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

  21. Dan says:

    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!

    • Jon Piehl says:

      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.

  22. Matt says:

    Great idea, and I know will be very useful.

    Thanks and keep up the awesome work.

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

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

  25. FJ says:

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

  26. Chris says:

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

  27. ComfortabllyNumb says:

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

  28. stej says:

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

  29. Yes RSS would be great !

  30. Simon says:

    My snippet is in the area! Thanks a lot!

  31. Jamie says:

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

  32. Rata says:

    Wuff!
    Awesome and cool idea!

    Kind regards
    Rata

  33. Angelique says:

    I am so excited about this new feature!

  34. David says:

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

  35. Vasili says:

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

  36. Walter says:

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

  37. Dor says:

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

  38. 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?

  39. Matthew says:

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

  40. Jon Piehl says:

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

  41. Jermaine says:

    I just check out you snippets section, it greate

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

  43. Cory says:

    Yeah, great idea. Have you considered live previews?

  44. Sefat says:

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

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

  46. Outstanding! Love your work.

  47. Kenrick says:

    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

  48. Hi Chris,

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

    Thanks man!

  49. Kenrick says:

    Hey chris TY for the $4.00

  50. Niall says:

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

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

  51. manS says:

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

    Regards…

  52. V1 says:

    Thanks for the free beer

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

  54. Josh says:

    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.

  55. Niall says:

    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.

* This website may or may not contain any actual CSS or Tricks.