Got great news at work this week: a redesigned site that was supposed to launch on the 6th, is now getting pushed back to the 13th. Maybe I will have time in the coming week to take a few minutes to not feel stressed out and rushed. So in my limited free time this week, here are some things that I found interesting:
This was a great article going step-by-step designing a website. I am really finding these design articles interesting since I am in the process of working on the next redesign for my site. There was also a partnering article, Build a Sleek Portfolio Site from Scratch that discussing the slicing of the site. Nothing ground breaking, but a nice step-by-step guide for a beginner.
This is an interesting article discussing something that I have recently begun to see as well. Some people’s personal sites just have links to their accounts on the numerous social networking sites. The article even spurred an article from Six Apart: Hell no, personal sites aren’t dead!. I don’t believe that personal sites are dead, but I agree with Zeldman’s comment that they are vanishing.
This is a great resource for people just getting into web development. Veerle provides a bunch of links, recommended books, and strategies for fixing CSS bugs. Definitely will become a great starting point for a lot of people.
Man am I happy it’s the weekend. Have been working on a project at work that has a real short deadline, so I’ve been busy. I’m looking forward to Sunday because I’m running a 10 mile race and going to the Wizards playoff game. There were a lot of interesting things that I found this week:
I’ve heard a lot about Ruby on Rails, but I never really looked too much into it. After reading Creating More Using Less Effort with Ruby on Rails and Getting Started with Ruby on Rails, it really makes me want to learn more about it. Obviously, I don’t think I will become a hardcore programmer, but I would like be able to work with it in the future.
Nice set of guidelines and resources for working with type on the web.
This is definitely an issue at my company. Is it front-end developers or back-end developers who should be doing the JavaScript? Personally, I think that front-end developers should handle all “presentational” JavaScript, and back-end developers should handle any JavaScript that is interacting with any data. Although, that line I think is somewhat flexible, as I have shown how simple it is to create an AJAX form.
I love how Andy doesn’t hold back. He just says it how it is. This is definitely something I’m starting to understand more and more as I get more experience.
Some nice tips and resources here. These articles are really interesting to me right now as I am working on the next design for my site.
The latest version of WebKit has added some pretty cool CSS properties. If only all browser makers would continue to advance their browser as fast as WebKit does, it would be a much better world on the web.
Some nice minimalist strategies for achieving great designs.
Busy week, both freelance wise and work wise. The good news is that the NBA playoffs are starting, so let’s all cheer for the Wizards. This is what I found interesting this week:
So apparently Security Focus published a false report about a security hole in WordPress. It’s good to know how much WordPress stays on top of these security issues, as they become more and more prevalent. As Matt recommends, one of the most important things to do is to stay up to date with the WordPress updates.
This sparked an interesting discussing over on Eric Meyer’s blog. Personally, I do not use a CSS reset. I do zero out the margin and padding on all block level elements, but not by using the universal selector. In the end, I think Eric makes a great point:
So it’s no surprise that we, as a community, keep building and sharing solutions to problems we encounter. Discussions about the merits of those solutions in various situations are also no surprise. Indeed, they’re exactly the opposite: the surest and, to me, most hopeful sign that web design/development continues to mature as a profession, a discipline, and a craft. It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.
I wouldn’t have it any other way.
Nice collection of interesting forms. It is always nice to see people getting really creative with them. I especially like the one on Edward Pistachio’s site, although it is not very usable.
I think this is a huge issue with our society. Everyone’s mentality is to do what they can to get a job that will make them a lot of money, instead of what will make them happy. Thank god that I absolutely love working with the web.
A great article giving some guidelines on how to price a project. I really think that one good point that Andy makes is that sometimes, there are clients that you should just not accept projects from. The hard part is evaluating that early on.
I meant to post this a little while ago, but I participated in a CSS Off about 2 weeks ago.
The idea is: you get a PSD file, and you have 24 hours to slice it. This was my entry.
Looking back on it, I think there were some things I would have done differently, but I am pretty happy with my submission. I’m interested to see who wins.
I look forward to the next one and encourage others to participate. Even if you don’t win, it’s good practice.
";s:10:"bodyBlocks";a:0:{}}i:4;a:6:{s:5:"title";s:41:"Handling WordPress Trackbacks with jQuery";s:4:"slug";s:41:"handling-wordpress-trackbacks-with-jquery";s:2:"id";s:3:"222";s:10:"typeHandle";s:4:"blog";s:4:"body";s:4254:"So after having a ton of trackbacks in a recent article, The 6 Most Important CSS Techniques You Need To Know, I thought that it was kind of breaking up the flow of the comments.
I didn’t necessarily want to completely remove them because I thought that some people might be interested in them. These are the steps that I want to take:
In your comments.php theme file, find a line that looks like this:
<li id="comment-<?php comment_ID() ?>">
And replace it with this:
<li class="<?php if(get_comment_type() != 'comment') echo 'trackback'; ?>" id="comment-<?php comment_ID() ?>">
The get_comment_type function returns either comment, trackback, or pingback. Since I want to hide everything except comments, I filter out anything that does not equal comment, so I assign a class of trackback to that list item.
Ok, easy enough, just add the following to your stylesheet:
ol.commentlist li.trackback { display: none; }
That should be pretty self explanatory.
The logic of the JavaScript will be as follows:
First, let’s execute the JavaScript once the document is ready:
$(document).ready(function(){
});
Next, let’s check to see if there are any elements with a class of trackback:
$(document).ready(function(){
if($('.trackback').length > 0) {
}
});
Next, if there are trackbacks on the page, insert a link to show trackbacks:
$(document).ready(function(){
if($('.trackback').length > 0) {
$('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
}
});
I am adding the show/hide trackback link after the heading with an id of comments.
Finally, I want to add in the click event to the link, and toggle the text depending upon if the trackbacks are visible or not:
$(document).ready(function(){
if($('.trackback').length > 0) {
$('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
$('#toggleTrackbacks').click(function() {
$('.trackback').slideToggle('slow');
if($('#toggleTrackbacks').text() == '(Show Trackbacks)') {
$('#toggleTrackbacks').text('(Hide Trackbacks)');
} else {
$('#toggleTrackbacks').text('(Show Trackbacks)');
}
return false;
});
}
});
So basically, I am adding the jQuery slideToggle effect when the show/hide trackbacks link is clicked. Then, if the text in the show/hide trackbacks link is Show Trackbacks, I change it to Hide Trackbacks, and the opposite when the text is Hide Trackbacks.
I have grabbed some of the comments from The Ultimate PNG Guide so you can see a demo of this in action.
I love how simple jQuery is.
";s:10:"bodyBlocks";a:0:{}}i:5;a:6:{s:5:"title";s:24:"Weekly Link Round-Up #26";s:4:"slug";s:23:"weekly-link-round-up-26";s:2:"id";s:3:"223";s:10:"typeHandle";s:4:"blog";s:4:"body";s:2161:"It was a pretty busy week with regular work and freelance work, but here are a few things that I found interesting this week:
Apparently Joshua Porter’s blog was flooded with spam links, and his blog was dropped from the Google index. This was the result of a well-known WordPress hack. This example shows the importance of staying on top of upgrading when a new version is released. On the other hand, it is really sad the society we live in. Do these hackers really gain that much from this crap? It’s really annoying.
Easily the best thing I saw this week. I think Outlook 2007 is more of a problem than Gmail, but really it is just HTML emails in general.
Interesting issue this week from A List Apart. Two articles about adding some non-textual visualizations to your sites. First, in Accessible Data Visualization with Web Standards, “Wilson Miner demonstrates three techniques for incorporating data visualization into standards-based navigation patterns”. Next, in Take Control of Your Maps, Paul Smith shows that we do not have to only rely on the Google Maps UI to create awesome mapping solutions.
Pretty funny list, even thought I am really not a designer.
It is going to be very interesting to see how this changes some of the stuff indexed. Although they do note that only forms submitted with the GET method will be crawled, which makes sense.
Tomorrow is the third annual CSS Naked Day, and I will be participating, just as I did last year. Some people may wonder: why would you strip the design from your site for a whole day? Won’t you lose visitors?
Well, you may, but you are helping to promote web standards. I take the time and effort to write well structured XHTML, so my site is perfectly usable without the design.
I’ll be striping my design with the CSS Naked Day WordPress Plugin. I encourage everyone else to strip down and show off your body.
It was crazy to see the amount of traffic I got for The 6 Most Important CSS Techniques You Need To Know. Because of it, I stopped using sIFR because of how much it was slowing down the page loading. I think it’s great for a few instances on a page, but if you use it for every heading, then you begin to get into trouble. Only a few interesting things I found this week:
This article was very interesting considering I have a full-time job and do some freelancing on the side. I do have to get all of my freelance work cleared with my company though.
The final part of the IV part series. This was a great series, combining numerous excellent techniques.
Very nice PHP on-the-fly image resizing.
Great article discussing a few guidelines to follow when choosing type.
I thought I would give a quick tutorial, with examples, of the 6 most important CSS techniques that I think you need to know:
body { font-size: 62.5%; }
Until IE finally supports the resizing of text in pixels, this is the best technique to gain full control over your font sizes. By setting the body font-size to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.
Although I typically then set my container font-size to 1.2em, which in turn sets the font-size to 12 pixels. But still, then you know that 1em is equal to 12 pixels.
There are some great CSS resets out there, but I usually don’t need one that goes so far. I like to just remove the margin and padding from every element.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Then, you can set the margins that you want accordingly.
Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too. All you need to remember is: Set a Float to Clear a Float.
I have created a simple page with two floating columns next to each other. You will notice in the example that the grey background does not contain the floating columns. So, the easiest thing to do is to set the containing element to float. But now, you will see that the container background doesn’t contain the content area.
Since the container has margin: 0 auto, we do not want to float it because it will move it to whichever side we float it. So another way to clear the float, is to insert a clearing element. In this case, I just use an empty div set to clear: both. Now, there are other ways to clear a float without markup, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty div.
Sure, there are a lot of different image replacement techniques. But, I think that you get to most benefits from this technique. I also discussed this technique in a previous article, Improved Navigation Image Replacement
<h1 id="logo">Company Name<span></span></h1>
h1#logo {
height: 110px;
overflow: hidden;
position: relative;
width: 560px;
}
h1#logo span {
background: url(/images/content/2008/03/logo.gif) no-repeat;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Basically, all we are doing is absolutely positioning an image over top of the HTML text.
The reason that I like this technique is because even when images are disabled, the text is still visible. Of course this means that you cannot use a transparent image to lay over top of the text, so it will not work in all situations.
It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.
<div id="container">
<div id="primaryContent">
<h1>Primary Column</h1>
<p>…</p>
</div>
<div id="secondaryContent">
<h2>Secondary Column</h2>
<p>…</p>
</div>
<div class="clearing"></div>
</div>
div#container {
background: url(/images/content/2008/03/content-bg.gif) repeat-y top right;
padding: 10px 0;
width: 640px;
}
div#primaryContent { float: left; padding: 0 10px; width: 400px; }
div#secondaryContent { float: right; padding: 0 10px; width: 200px; }
Pretty simple: a containing element, 2 floating columns, and a clearing element so that the containing element will contain the floating columns (as noted in the Set a Float to Clear a Float technique above).
CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server. Then you just shift the position of the background image to view the correct part of the image. May sound complicated, but it just takes a little math. Note: In both of these examples, I am using the Image Replacement technique discussed above.
For this example, we are just going to have one download link that we want to replace with a nice graphic. Then, on hover, we want to change the image.
<a href="#" id="download">Download Now<span></span></a>
a#download {
display: block;
height: 75px;
overflow: hidden;
position: relative;
width: 150px;
}
a#download span {
background: url(/images/content/2008/03/download.gif) no-repeat;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
a#download:hover span { background-position: 0 -75px; }
As you can see from the code, on hover, we shift the position of the background image to view a different part of the image.
Oh, and also, IE6 and 7 suck, so here are the styles we are serving to them:
a#download { cursor: pointer; }
I realize that we could just put that in the regular stylesheet since it has no affect on other browsers, but I prefer to move stuff like that to the IE only stylesheets.
a#download:hover { background-position: 0 0; }
This is some weird bug where the images shift when you hover, but then when you mouse-out, the images don’t shift back.
For the second example, we are going to use the CSS sprites technique, but for the entire navigation. This way, only one call needs to be made to the server to load the navigation. We are basically creating a CSS sprites matrix.
<ul id="nav">
<li id="home"><a href="#">Home<span></span></a></li>
<li id="about"><a href="#">About<span></span></a></li>
<li id="work"><a href="#">Work<span></span></a></li>
<li id="play"><a href="#">Play<span></span></a></li>
<li id="contact"><a href="#">Contact<span></span></a></li>
</ul>
ul#nav { background: #91c6d5; float:left; list-style: none; width: 510px; }
ul#nav li { float: left; }
ul#nav a { color: #000; display: block; font-size: 1.5em; height: 38px; text-align: center; position: relative; }
ul#nav span { background: url(/images/content/2008/03/nav.gif) no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
ul#nav li#home a { width: 102px; }
ul#nav li#home a:hover span { background-position: 0 -38px; }
ul#nav li#about a { width: 106px; }
ul#nav li#about span { background-position: -102px 0; }
ul#nav li#about a:hover span { background-position: -102px -38px; }
ul#nav li#work a { width: 92px; }
ul#nav li#work span { background-position: -208px 0; }
ul#nav li#work a:hover span { background-position: -208px -38px; }
ul#nav li#play a { width: 79px; }
ul#nav li#play span { background-position: -300px 0; }
ul#nav li#play a:hover span { background-position: -300px -38px; }
ul#nav li#contact a { width: 131px; }
ul#nav li#contact span { background-position: -379px 0; }
ul#nav li#contact a:hover span { background-position: -379px -38px; }
That may seem crazy, but it all makes sense if you take the time to think about it.
Again, we have to serve some similar styles to IE6 and 7 from the previous example:
ul#nav a { cursor: pointer; }
ul#nav a:hover { background-position: 0 0; }
This list is definitely not exhaustive; they are just the 6 that I think are extremely important. What other techniques do you think are important to know?
";s:10:"bodyBlocks";a:0:{}}i:9;a:6:{s:5:"title";s:25:"Upgraded to WordPress 2.5";s:4:"slug";s:25:"upgraded-to-wordpress-2.5";s:2:"id";s:3:"227";s:10:"typeHandle";s:4:"blog";s:4:"body";s:488:"I just upgraded to WordPress 2.5 tonight, and I must say it’s pretty awesome.
The automatic upgrade of plugins is amazing, and I really like the new organization of the admin area.
Well, I’m sure I’ll have a lot more to say about it once I’ve used it more. Kudos to Happy Cog and Automattic for this release.
";s:10:"bodyBlocks";a:0:{}}}s:5:"total";i:270;}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.70573500 1736501960";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.67537500 1713205687";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.84529700 1741778847";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.36746500 1735923287";}s:8:"reusable";b:0;}}