This content originally appeared on @mdo and was authored by Mark Otto
The other day I quickly coded a new design for this here website. The idea behind it is simple: provide some base structure, but ultimately let the content drive the design of the site. To share what’s under the hood, I wanted to share a little more about that idea and what’s powering this site.
Form Before Function
That phrase feels like a cop-out, but it sums things up nicely. So far, photos and a few text and code heavy posts are all that’s here. That could easily change and I wanted to remain flexible as to not feel constrained by whatever elaborate design I could come up with.
I don’t know exactly what I want out of this site yet, only that I want to blog, share photos, talk about some code, and share thoughts on links.
Under the Hood
Because it’s what I’m familiar with, I opted to use WordPress once again. Coupled with the awesome plugin support and flexibility of WordPress as a CMS, it was a no-brainer for me. Here’s a look at what I’m using with WordPress to power this site.
Categories, Not Custom Posts
Just a quick note to begin here: WordPress 3.x allows for custom post types. I’ve used them before, but decided to avoid them this time around and instead keep things simple to start. As I said, I want the form of this blog to come as naturally as possible.
To customize how each category’s post shows up, I threw in some conditionals for the loop:
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php if (in_category('photos')) { ?>
<figure>
<?php the_content(); ?>
<figcaption>
**<?php the_title(); ?>**
<?php echo get_post_meta($post->ID, 'caption', true) ?>
</figcaption>
</figure>
<?php } elseif (in_category('quotes')) { ?>
<blockquote>
<?php the_concept(); ?>
<cite><?php the_excerpt(); ?></cite>
</blockquote>
<?php } else { ?>
<?php echo tweetbutton(); ?>
<h1><?php the_title(); ?>;</h1>
<span class="date"><?php the_time('l, F jS, Y') ?></span>
<?php the_content(); ?>
<?php } ?>
<hr />
<?php endwhile; ?>
Plugin: WP Tweet Button
To encourage sharing of the articles I (will) write, I’ve added the Twitter Tweet button via this handy plugin. It gives you a few options, including: automagically adding it to posts, custom recommendations per post, and more.
Check it out if you haven’t yet. I did try some other plugins but they all sucked. This one seemed best.
Plugin: Disable WPAutoP
I can’t begin to tell you just how frustrating WordPress’s automatic p tags are. They wrap anything and everything, which makes for some funky styling if you’re not careful enough (e.g., images get wrapped and can leave funky spacing if floated). Install this bad boy and kiss those rogue p tags good-bye.
CSS with Less.js
I talked about this before, but I’ll mention it here again. Less.js, a Javascript implementation of Less CSS (previously done via Ruby) that gives you powerful add-ons to CSS. Use it to add variables, create mixins for shorthanding long or complicated pieces of code, perform math, and more. It’s really handy.
Plus, even though it compiles the CSS in the head of your page, it stores it in a HTML5 local database. Hot.
Chili: A jQuery Syntax Highlighter
Not sure if there is a better one out there, but it seemed solid to me after a quick tour around Google. I’ve love some suggestions for alternatives; my only complaint is it’s ugly default styling. Will definitely need to dive in and change that up more in the future.
PaintbrushJS: Javascript Image Modification
I use PaintbrushJS to modify that beautiful mug of mine on your left. It’s damned awesome; you can modify images with sepia, noise, tint, and even blur filters. All on the fly with javascript and some awesome use of canvas. It’s developed by Dave Shea (@mezzoblue) and is just getting started. Not practical in my implementation, no, but still cool :).
Beanstalk for Low Maintenance SVN
I’m a fan of version control—if by version control you mean just one master branch of all my code so that I can quickly revert my mistakes and checkout new copies should my server get hacked or otherwise fubared. Nice to have and these guys do all the leg work; I just import my base files and they take it from there.
Also, an added bonus of using SVN was the need for using SSH to checkout my code on my server. Handle to know; I need to pick up more stuff like this.
And that’s it! I’ll keep adding features and posting about them as I go though.
This content originally appeared on @mdo and was authored by Mark Otto
Mark Otto | Sciencx (2010-08-25T00:00:00+00:00) About the new design. Retrieved from https://www.scien.cx/2010/08/25/about-the-new-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.