12 Principles For Keeping Your Code Clean

Beautiful HTML is the foundation of a beautiful website. When I teach people about CSS, I always begin by telling them that good CSS can only exist with equally good HTML markup. A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup.

read more | digg story

Most of the tips in here are definitely true, tabbing and doctype and semantics but others are not set in stone, for example sometimes javascript can be listed outside of the head section, and non external css can be okay at times. Moreover, I use php to write fresh js and inline styles for my version of the flickrRSS plugin

google reader css

Like many people I use Google Reader, and like many people I share stories that I find particularly interesting with my friends on reader. However when redesigning my blog I wanted a way to incorporate reader into it. I looked at various wordpress plug-ins that could get the job done, but none seemed to fit my needs precisely right.

I finally found what I was looking for at Google Reader itself, via their add a clip feature (you can find this link by clicking on in the left side navigation area). When you use google reader they give you everything you could ask for, title, color scheme, number of shared items to post and whether or not to post item sources. You can find google reader stylized for my site, in my sidebar (as of this writing).

All of this is wonderful except for one minor thing, google provides no assistance at all when it comes to the option of no color scheme. That means no xhtml source to examine or css source. You could get around that with firefox’s view selection source feature, however if you don’t have firefox this provides no help at all.

It is with that in mind that I am writing this post, below is sample xhtml source code, that I will explain after the code is posted.


<div id="readerpublishermodule0" class="reader-publisher-module">
<h3>robert’s shared items</h3>
<ul>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
</ul>
<div class="f">
<a href="#">Read more…</a>
</div>
</div>

The primary container for the shared items is a selector named “reader-publisher-module”, it contains everything provided by google reader. The header provided by google is contained in a h3 element inside of the main container. Each headline link and source link is contained inside of a list element inside of the main container as well. The headline link is held inside this list item in a selector with the name “i”. The source is held inside this list element in a container named “s”. The read more link is contained inside of a selector named “f” inside of the main container.

Listed below is the css used in my current theme to make google reader appear appropriately, hopefully it can help you if you need it.


/* google reader from section */
.reader-publisher-module .s {
text-indent: 5px;
}


/* from link */
.reader-publisher-module .s a {
color: #660505;
text-decoration: none;
}


/* headline link */
.reader-publisher-module .i {
font-size: 10pt;
font-weight: bold;
line-height: 10pt;
text-decoration: none;
display: block;
}


/* google reader read more section */
.reader-publisher-module .f {
display: none;
}


.reader-publisher-module .f a {
}

This information was hard for me to find, so hopefully listing it here will help someone, if you need any further assistance post a comment, and I will see what I do do.

fixing iLindsay’s tumblr

This post is going to be actually something I have never done before, and I don’t know if I will ever do again. It’s a post meant for one, as it’s code to fix their tumblr. If you don’t know what a tumblr is get one, it’s a wonderful service. This is basically just css, however I did slice out some code from the original page (page breaks for example) and replaced it with css where applicable.

I will try to provide some description so that if you want to read on it will be of some use to you, however I will be addressing Lindsay directly in this post, so don’t be mad at me if I call you Lindsay, I assure you it’s nothing personal.

Before continuing Lindsay I would highly recomend you somehow back up your code, as who knows I could make an error or you could make an error and I don’t want you to ruin what already is working just in case.

Anyways Lindsay the code snippet you will see below is css that should be able to be added at the end of your existing css without causing any issues for your existing page. The “twitter_div” id selector simply takes the enclosing div and adds that graphic to it as a background image, it also seperates it from the marquee above, as well as spacing it out the inner ul from the background image so your tweet does not cover up the background image in any way.

The “twitter_update_list” is listed with “header” before it to overwrite the inherited css from the previous “header ul” declaration. Chiefly this declaration affects the tweet’s appearance, however it also removes padding and margins from the previous declaration as well.

The “twitter_update_list a” id is simply used to take the time stamp link and place it on it’s own line below the tweet itself.


/* div that contains entire tweet */
#twitter_div {background-image: url(http://img71.imageshack.us/img71/4161/birdnu1.png); background-repeat: no-repeat; margin-top: 10px; padding-left: 35px;}


/* contains just tweet */
#header #twitter_update_list {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; letter-spacing: 0px; line-height: 110%; font-weight: normal; color: #000000; text-transform: none; margin: 0px; padding: 0px;}


/* timestamp link */
#twitter_update_list a {display: block;}

Lastly here is the code as I edited it, going from the closing marquee tag to the ending div for the header container. The only major change I made was removing the line breaks from the presenation as it was replaced with a margin declaration in the css.


</marquee>
<!-- Your Twitter code starts here -->
<div id="twitter_div">
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/9131132.json?callback=twitterCallback2&count=1"></script>
<!-- Your Twitter code ends here -->
</div>


<ul>
<li><a href="/mobile">Mobile</a></li>
<li><a href="/archive">Archive</a></li>
<li><a href="http://ilindsay.tumblr.com/rss">RSS</a></li>
<li><a href="/random">Random</a></li>
</ul>
</div>

I really hope this all went fine for you, if not you know where to find me.

Good Luck Lindsay.

everytime you think you know everything

Life can be a jerk sometimes, case in point my just now discovering what the clear property does in css.

Without getting bogged down in semantics, my old theme that I abandoned because I couldn’t make the sidebar and content pane work together…. it could have been saved, and my current theme could have been altered somewhat as well. While I prefer my current theme right now, it does bug me that something so tiny, would have fixed what I ended up throwing away.

Using the handy dandy, guide on the clear property from the w3schools the clear property can be summed up thusly:

Image and text elements that appear in another element are called floating elements.

The clear property sets the sides of an element where other floating elements are not allowed.

Or to put it another way, you basically create a page break at the bottom of an element, right, left, or both. This is one of the reasons I want to go into this line of work, it really excites me to have learned this, and everyday I find something like this that I did not know.