CSSKarma

display your <style>

designing the web since 2002

Archive for September, 2008

|

This Week in Links 9/29

Monday, September 29th, 2008

article banner

jQuery Seek Attention Plugin

The jQuery seek plugin is very cool. It goes along with the css psuedo class "target". It’ll highlight an area on the page onClick and ca bring a great pop to a page. Give this one a try, I could see this being very useful for those long FAQ lists.

Google’s android vs the iPhone

With the release of Google’s android phone, there are already comparisons to the iPhone. This video lays it out real nice and tells you what you have to look forward to with Android.

Avoiding the Pownce Effect

There seems to be more and more twitter–killer sites out there and, for the most part, they all fail. This article takes a look at why Twitter is so powerful and some things to avoid.

3 CSS classes you should all have

Let me save you some time: .left, .right and .clear. This is something most are already including, but I always think it’s helpful to see what others are doing.

Tags: , , , , , , ,
Posted in News, Web Development | 3 Comments »

This Week in Links 9/24

Wednesday, September 24th, 2008

article banner

Opera Web Standards Curriculum

Ever since Opera accepted that no one uses their browser for general browsing they’ve been huge activists for the semantic web, and this yet another example of what they’re doing to help the web evolve and educate the masses. Kudos to Opera. This should be required reading for all new developer/designers and even clients.

jQuery How To’s

This is a great list of specific things and how to do them with jQuery.

Fluid

Fluid app is something I’ve been looking into for a little while now. I normally wouldn’t put this up here, because it’s a mac–only application; but it seems really neat. It creates desktop apps from web sites, like a bunch of little stand alone browsers in your doc. It does a similar thing to Google Chrome, by modularizing your web apps so if one crashes everything doesn’t fail.

Digital Web Magazine

I don’t know exactly how this site evaded my RSS reader for so long, but it’s a very informative ‘zine about the web. When I first saw it I read through a few articles and really liked what I saw.

Hngry

Hngry is the lunch time app we all wanted, but are too lazy to build. It’s very nice, but it needs a lot more data.

Tags: , , , , , , , ,
Posted in News, Web Development, Web Standards | 2 Comments »

A New Breed of Microformat

Monday, September 22nd, 2008

article banner

Because I’m a web dork (nice way to start a post, huh?), I was poking around YouTube last weekend and decided to crack it open in FireBug.

I was on YouTube’s MayerMusic channel fiddling around with the video info section and notice that some of the info was wrapped in a quasi familiar class “vfacets”. This appears to be some sort of Microformat; but none that I’ve ever seen.

mayermusic video info wrapped in div.vfacets

After seeing that, I decided to do a little digging (digging = 5 mins of Googling), and eventually found a pretty undetailed page about group examples of Microformats.

Generally, I find that Google’s front end development is a disgrace to the Internet (no offense…), but it seems like they’re buying into the concept of Microformats. With that in mind I thought I’d talk about how Microformat groups could be used.

Usage

Many of us are familiar with the most common types of Microformats (hCalendar, hCard, hReview, and XFN). There are also many that are still in draft form like hResume, geo, and rel-directory. However, it seems that a new type could be emerging for grouping information.

The link above listed out 4 examples of major sites using Microformat groups: YouTube, Magnolia, Linkedin and Flickr. I really like how Google (youtube) is marking it up though, so I’m going to get in to that.

YouTube vEntry markup
<div class="v120vEntry">
<div class="vstill">
<a href="/user/spoiledmilk"><img src="2.jpg" class="vimg"></a>
</div>
<div class="vtitle">
<a href="/profile?user=spoiledmilk">spoiledmilk</a>
</div>
<div class="vfacets">
<span class="grayText">Joined:</span> August 02, 2006<br>
<span class="grayText">Videos:</span> <a href="/profile_videos?user=spoiledmilk">21</a>
</div>
</div>

In marking up user information they are using:

  • ventry as a wrapper
  • vstill for the user image link
  • vimg for the image itself
  • vtitle for the user’s name
  • vfacets for, what seems to be, general information

I’m wondering why Google is going with this. In the past I think it’s safe to say that they don’t really do things like this unless they’re planning to use it in something they build. Not to take shots at Google, but they don’t really do things for the greater good of the web community (correct me if I’m wrong).

Consistent user tagging

The basis for using something like a vcard class is to let the browser, user, spambot, or software know that a page contains contact information (and your now beautifully marked up e–mail address). This same principle applies to Google’s vEntry.

Let’s consider that Google is building a large social networking platform; I know that the main complaint I have with all these new networking sites is that you have to constantly rebuild your contact list. Marking up a member’s information in a consistent way would aid in search and ease the pain of finding those Twitter followers (for example) we all love so much. Or even for building some sort of Internet phone book.

What are they scheming?

What’s Google planning? What else can be done with this new microformat? Did I completely miss a huge glaring detail here?

Maybe this isn’t even Google code, it could be left over from when they bought out YouTube. I guess we won’t know for sure until we can pick apart Google’s brain and find out what’s going on in there.

In the mean time, watch out for this new Microformat, I have a feeling they’ll be popping up in other Google sites as well.

Tags: , , ,
Posted in Web Development, Web Standards | 3 Comments »

This Week in Links 9/17

Wednesday, September 17th, 2008

article banner

How HTML5 is Already Changing the Web

Generally, I’m not a fan of all the hoop-la over HTML5 since it won’t be released and in use for a long time. But I was very interested in reading this article from webmonkey

FV Code Highlighter

A handy wordpress plugin for code hightlighting, very cool and useful, definitely check this out if you have time. This will be the next plugin I install.

Hacking JavaScript for Fun and Profit

SitePoint is always a great place to find good tutorials. This one especially caught my eye in the past week.

LiveBar

The concept of LiveBar is very interesting to me. It’s like portable social networking for your web site. It will display related social content in a small bar stuck to the bottom of the screen.

Paper background graphics

I’m usually against most design fads because they pass so quickly. But if you choose to venture into the grunge fad, this is a very good resource to find those large images of crumpled up paper.

Tags: , , , , , ,
Posted in News, Web Development | 1 Comment »

Securing your Development Space

Monday, September 15th, 2008

article banner

You can hide your development space from the public many ways, a weird URL no one will find, use a local testing server (localhost), or set up a development server. Up until my last redesign I was just using a directory called dev under csskarma.com. And that was fine, but my file paths would all have to be adjusted when I went live (not a huge deal, but annoying none-the-less).

If you’re a frequent reader, you might remember that in my last post I mentioned that I was coming out of laziness and cleaning up some stuff on my server. So I finally set up my dev server. It’s just a sub-domain, but seems to work well so far.

Not that I have anything on it. but I felt like I should use some best practice stuff and password protect it. In password protecting a directory, you use an .htaccess file coupled with an .htpasswd file (to store the usernames and passwords)

The first thing you need is a list of users you want to grant access to. Let’s say I want to set up a general account for people to access my directories. We’ll make the username guest and the password dontstaylong.

Next, we have to go to a site that will encrypt the password for us, I use htpasswd generator. After plugging in the username and password, you’ll come out with something like this:

Your full .htpasswd file
guest:ZGu8x2pjH62Pk

Take that code and place it in a file called .htpasswd (you’ll need to create this). You can put that file anywhere on your server, but it’s best to make sure it’s not web accessible (so no one can steal your password). So, if you have a public_html directory or a www, put the file one level higher than that.

Now that we have our .htpasswd file on our server, we can start cutting off access to various parts of our site using an .htaccess file. You can also add multiple users by following the same process as the first one, but put one user per line in the .htpasswd file.

Let’s say I have a directory at http://www.csskarma.com/articles/htpasswd/ that I want to password protect. To do that I would put an .htaccess file in that directory with this code in it:

Your full .htaccess file
AuthType basic
AuthName "This directory is protected"
AuthUserFile /full_server_path_to_file/.htpasswd
Require valid-user

Important: the AuthUserFile must be an absolute server path to the file, relative will not work (at least it didn’t for me).

Lastly, you visit your new password protected directory (username: guest – password: dontstaylong) and marvel at your greatness. This password should apply to all sub directories as well.

In my experience, this is the easiest way to secure an area of your site. However, if you’re passing sensitive information through, you may want something a little more secure than this. Yahoo! provides a good best practices security write-up you can use as a reference.

Anyone have any thoughts/suggestions for beefing up the .htpasswd file?

Tags: ,
Posted in Security, Web Development | 5 Comments »

Creating an .htaccess template

Thursday, September 11th, 2008

Recently I decided to finally sit down and organize some things on my site/server. I created dev server, and did some other things that I had been wanting to do for a while.

While I was putting together my usual .htaccess file I thought that maybe I could build it a little better and create a file template that I can use in the future when I’m doing something like this again (since, I know this will come up again). So I did a little research about things I knew I wanted to add in like the 404 error page rewrite rule (which many tutorials seem to omit) and denying a directory listing.

This is the file template I came up with:

For those who don’t know, you create a file called .htaccess with the below code in it, and stick it in the root directory of your site. It does all sorts of neat stuff. It can also be used to password protecting directories, but that’s for another day

DirectoryIndex index.php index.html index.htm

<IfModule mod_rewrite.c>
RewriteEngine On
ErrorDocument 404 /errors/404.php
ErrorDocument 403 /errors/403.php
ErrorDocument 500 /errors/500.php
</IfModule>

Options -Indexes
Options +FollowSymlinks

<Files .htaccess>
deny from all
</Files>

Breaking it down

This .htaccess file is in 4 basic parts: the directory index, the error documents, directory listing options and denying access to the .htaccess file itself.

DirectoryIndex
DirectoryIndex index.php index.html index.htm

DirectoryIndex is the first thing I learned in my .htaccess explorations, it’s very simple. It tells the server which pages to display by default and in what order. In my example, if I have index.html in a directory along with index.php, the index.php file will be displayed by default, so you have www.csskarma.com pointing to index.php and if you want to get to index.html you’d have to type it in like www.csskarma.com/index.html. Many servers get this right without the DirectoryIndex, but it’s like doing body{background-color:#fff;}, I put it in just in case.

ErrorDocument
<IfModule mod_rewrite.c>
RewriteEngine On
ErrorDocument 404 /errors/404.php
ErrorDocument 403 /errors/403.php
ErrorDocument 500 /errors/500.php
</IfModule>

This is the stuff that I dig. It gets the most press out of all the .htaccess elements; so I guess it’s the rock star of the .htaccess file. A List Apart did an article on it in 2004, and it was a big usability issue building a good 404 error page. Now we all have our fancy 404 pages.

The mod_rewrite module (as to my understanding of it) deals with rewriting the URL. In this cae, it’s the thing that lets you have a 404 error without exposing the URL of the actual error page. 403 Error is a permission denied error and 500 is an internal server error. You can check out all the error codes if you’d like, but you shouldn’t bog down your .htaccess file too much, so I keep it to these 3.

Index Options
Options -Indexes
Options +FollowSymlinks

Options -Indexes is what you use to deny a directory listing; inversely, you could use Options Indexes (no dash) to allow a directory listing. I use this for things like my images directory.

Options +FollowSymlinks tells the server to follow Symlinks (no kidding huh?). Some apache servers require this for mod_rewrite to work. So if your mod_rewrite is working fine, you may not need this, I include it just in case. In my experience Symlinks are generally abused and overused but it’s still good to know how to create them from the command line.

.htaccess Access
<Files .htaccess>
deny from all
</Files>

This is very simple and (I think) very necessary. It prevents people from viewing your .htaccess file. There’s really not any sensitive information in my .htaccess file, but it’s good practice to protect this file in case you do put things in it that you don’t want exposed.

Fin

So, that’s my .htaccess file starter template. I’d be interested to hear what others use in their files and if I missed anything in mine, I’m certainly no Apache expert.

Tags: , ,
Posted in Web Development | 6 Comments »

This Week in Links 9/10

Wednesday, September 10th, 2008

Evernote

Evernote is a program to help you remember things. Think of it like a post-it not that you wear on your forehead all day.

Microsoft CSS Vendor Extensions

It looks like Microsoft IS actually doing work on IE8, They just beefed up their CSS support. It actually looks pretty promising so far. Looks like their goal is for full CSS 2.1 support and then branching into CSS3.

Measuring SEO: why rankings are worthless

A pretty good read from Yoast about what you should really be focusing on with SEO.

A List Apart

New issue of A List Apart this week, always a must read.

10 Principles of the PHP Masters

Another on from NETTUTS about some tip and best practices while working in PHP

Tags: , , , , ,
Posted in Browsers, News, Web Development, Web Standards | 2 Comments »

This Week in Links – 9/4

Thursday, September 4th, 2008

I’d like to try and start sharing some links once a week with everyone since I’m settling into a new job and I don’t want my posts to become few and far between. Just to let you know that I am doing some interesting things right now, but have just run a little short on time. Here are some links that grabbed my attention:

Some sites to be aware of:

Script & Style

Script & Style is a new site by Chris Coyier and David Walsh. The best way I can describe it is like subscribing to the CSS/JS search term RSS feed on Digg, but a little more interesting. There are user-submitted articles, like Digg, but you don’t have to filter out all that Digg-esk junk like articles about hamburger grease and bicycle chains. You just get the stuff you want. I like it, at least subscribe to the RSS feed, it’s well worth the visit.

Google Chrome bugs – Alternate Style Sheets and Max/Min-width

The big news for the week seemed to be about Google’s web browser, Chrome. Everyone seems to love it (I couldn’t install it on my parallel, I’ll try on Vista later on), but there are some bugs reported with it. I guess that’s why Google leaves everything in Beta for a decade.

Animation Jump in JQuery

When I first saw this quick tip from JQuery for Designers I really didn’t see a major need for it. But as I kept seeing it in my news feed it actually grew on me. It creates a nice sliding effect for anchor links, worth poking around with. I really don’t like dumping a ton of JavaScript into my pages, but for a JS light page, or an FAQ, this might be a nice feature.

Using JQuery UI to Control Text Size

I love Nettuts, every week they come out with some really cool tricks. This is one of those things that is a really nice tool to have in your library just in case you need it. I could see this being very useful for reading documents online or just zooming in on an app.

Automatic Awesompersands

YAJQPI I guess, but I kind like this one. It searches through your content to find and restyle ampersands, giving them a hip designer/small coffee shop look by wrapping a span around them (sidenote: are we using spans too much with jQuery?).

JavaScript in Modern Web Design

Web Designer Wall is a pretty popular blog (more so than this one), so I’m sure most have seen this already, but it’s still worth mentioning just in case. Nick La lists out and describes virtually every JavaScript you will commonly find in web design today. If nothing, it’s a great reference list.

Today seemed to be a little JavaScript heavy, but I guess that’s what’s going on right now as we’re all in our JQuery phase.

Tags: , , ,
Posted in News | 1 Comment »

|

New from the blog

Are My Sites Up? authenticjobs.com