Useful (and free!) Code Snippets
I reviewed Coda a few months ago and have been using it ever since. It’s an awesome all-in-one IDE with Transmit for FTP and great plugin support.
My favorite feature of Coda is Coda Clips, a similar feature was also introduced in Dreamweaver CS4. Coda Clips allows you to store snippets of code you use frequently in an attractive window and inserts the code into your open document with one click.
I thought I’d share my snippets with you, organized by type. Please feel free to share some of your in the comments!
General
Lorem Ipsum Paragraph Generator
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS
/****CSS Framework w/ Reset*******/ /*****CSS RESET*******/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body { line-height: 1; }ol, ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }:focus { outline: 0; }ins { text-decoration: none; }del { text-decoration: line-through; }table { border-collapse: collapse; border-spacing: 0; } /****BODY STYLES********/ body { font-family: Arial; font-size: 14px; color: #3A454F; }.home { background: url('images/bkgHome.jpg') repeat-x #FFF top; } p { line-height: 17px; } h1 { font-size: 30px; } #container { margin: 0 auto; }.home #container { width: 800px; } /****HEADER STYLES*******/ /*****NAV STYLES*******/ /*****FOOTER STYLES*******/ /*****HOME CONTENT STYLES*******/ /*****SUB CONTENT STYLES*******/
/****CSS3 Rounded Corners*******/ { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
Hacks & Validation
/****Browser Hacks (For emergencies only!)*******/ /*For Safari*/ html* #div { } /*For IE7*/ *+html #div { } /*For IE6*/ *html #div {}
<!--IE6 Conditional Stylesheet--> <!--[if IE 6]> <link href="ie6.css" mce_href="ie6.css" type="text/css" rel="stylesheet" media="screen" /> <![endif]-->
<!--Force IE8 to display as IE7--> <meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--XHTML 1.0 Strict Valid Flash Script--> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="data" value="flash.swf?path=flash.swf" /><param name="src" value="flash.swf?path=flash.swf" /><embed type="application/x-shockwave-flash" width="400" height="300" src="flash.swf?path=flash.swf" data="flash.swf?path=flash.swf"></embed></object>
jQuery
/*Automatic New Browser Window*/ $(document).ready( function(){ $("a[href^='http://'],a[href^='https://']").attr('target', '_blank'); });
PHP
//Template Index (Auto includes header & footer files) <?php require_once('tem/header.tem.php'); if ($_GET['p']) $p = $_GET['p']; else $p = "main"; require_once('tem/' . $p . '.tem.php'); require_once('tem/footer.tem.php'); ?>
//Automatically Updating Copyright Year © <?php echo date("Y") ?>
WordPress
// Loop Based on Custom Fields
<?php
$querydetails = "
SELECT wposts.*
FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta
WHERE wposts.ID = wpostmeta.post_id
AND wpostmeta.meta_key = 'readmoretext'
AND wpostmeta.meta_value = 'Go check this out'
AND wposts.post_status = 'publish'
AND wposts.post_type = 'post'
ORDER BY wposts.post_date DESC
";
$pageposts = $wpdb->get_results($querydetails, OBJECT)
?>
<?php if ($pageposts):
foreach ($pageposts as $post):
setup_postdata($post); ?>
// Make your loop here. For example :
<div <?php post_class(); ?>> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endforeach;
endif; ?>//Custom login/logout message <div id="user-details"> <?php if (is_user_logged_in()) { $user = wp_get_current_user(); echo ‘Welcome back <strong>’.$user->display_name.‘</strong> !’; } else { ?> Please <strong><?php wp_loginout(); ?></strong> or <a href="<?php echo get_option(’home’); ?>/wp-login.php?action=register"> <strong>Register</strong></a> <?php } ?> </div>
Your Turn
What are some of your snippets?
So you like sharing your code snippets?
Then I suggest you also head over to our secret project at codesnipp.it and sign up for a beta account 
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
Hi Amber. Liked your jquery new window clip, hadn’t thought to use jq for that. Big ups for coda too.
I think WP may have eaten some of your clips as they aren’t displaying properly. The lorem ipsum tip looks like it just got executed instead of displaying as code, and the php clips aren’t showing either.
ok thanks
Barry
Hmm you’re right on the PHP ones…the Loreum ipsum one is correct, I just keep a paragraph of it for one click content insertion.
it’s fixed
I see you fixed both the php & wp ones, o/\o awsm!
Looks great and big ups on the snippets! Very useful!
This one’s everywhere on the net anyway, but a good staple to just memorize, especially since WordPress uses Jquery now too. Stupidly easy show/hide div with Jquery
:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$(‘#slickbox’).hide();
// shows the slickbox on clicking the noted link
$(‘a#slick-show’).click(function() {
$(‘#slickbox’).show(‘slow’);
return false;
});
// hides the slickbox on clicking the noted link
$(‘a#slick-hide’).click(function() {
$(‘#slickbox’).hide(‘fast’);
return false;
});
// toggles the slickbox on clicking the noted link
$(‘a#slick-toggle’).click(function() {
$(‘#slickbox’).toggle(400);
return false;
});
});
click me
Lorum
ew, I forgot to put that in a
So helpful snippets.
But a query; Shouldn’t we use “1.5em” or “2em” for ‘h1′ tag ? You used ‘px’;pixels
No, not necessarily. I never use em units in a design, bc my clients want the mockups to be perfectly the same in every browser. Using ems means you have less control and more of a change to have bigger/smaller fonts render.
You’re producing so many quality blog articles, I am convinced you have a few “Amber Clones” working away in a back room writing these articles. Tell the truth… do you?
Good article, and some useful snippets there. I’m a DW coder… I have tried using various alternatives but I just find I can write stuff faster in it. Even simple things like auto-closing tags when you hit “/” is missed when I try other apps. I’m open minded though, and there are things about DW I don’t like… it’s overkill and isn’t the prettiest. And when I look at code in other windows the different colours can be confusing!
Lol Thanks and no, no clone, although I could use a few.
It took some time to get used to Coda, because I was also a Dreamweaver fan. But I got tired of it moving like molasses, locking up and the other several weird JS errors I got in the program itself which stopped allowing me to use keyboard shortcuts.
The only thing I miss from dreamweaver now though, is the auto close tag. Coda comes close by printing the whole close tag when you open one, but that can sometimes be annoying when you’re going back to something to add a div around it, or when you have to skip over that. But I think it’s a fair trade off, as it has a great multi site management interface and is really fast and zippy. Plus it only costs $99 and upgrades are free….CS5 is already coming out and dreamweaver is what, like $500 each time or something?
Yeah DW is a bit on the expensive side, and I don’t really even use any of the more advanced features. But when you try and fix something that isn’t broken… it often doesn’t work out too well.
Out of curiosity though I might try Coda to see what I think…
Are you missing the hack to force IE8 to display as IE7?
Sorry about that, it’s fixed
if (you.want(me)) {
for (i = 1; i<= 3; i++){
knock(ceiling);
}
} else {
for (i = 1; i<= 2; i++){
knock(pipe);
}
}
I love that. A lot.
Awesome resource.
I’m a fan of the .clearfix method (not everyone’s choice, I know). Here’s that code:
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Many moons ago I wrote a little jQuery Text Limitbox plugin, and have recently used it either myself on a couple of projects, or have had a few of the people that I deal with constantly ask me for it
Nonetheless, the code is up on GitHub (https://github.com/jcinteractive/jquery-limitbox) and a demo is on jsFiddle (http://jsfiddle.net/jcinteractive/pxjM9/embedded/result/)
Pretty basic to setup/install, so have fun with it
Amber,
For you PHP Template Index, use this for the $_GET['p'] variable, just in case somebody uses it, otherwise a XSS attack could be utilized.
[PHP]
$p = filter_var($_GET['p'], FILTER_SANITIZE_URL);
[PHP]