Random Quotes

I created a page that will display random quotes. It also has a feed that you could include on your blog or website.

If you do include the feed on your blog, make sure the RSS widget looks like this:

Then, your RSS widget should look something like this:

You could title your widget “Featured Quote” like I did on this blog… of course, you can give it whatever title you want or leave the field blank… your choice.

Although the feed generates a random quote every time you directly load it, in my tests, a WordPress.com hosted blog usually updates the feed approximately every 5 minutes. If you have a self-hosted blog, be advised that WordPress will take longer (12 hours) to update the feed.

If you’d like to suggest a quote (or quotes), feel free to leave them in the comments section. Feedback is also welcomed.

CSS 101

I know there are hundreds, if not thousands, of introductory articles/tutorials to CSS… so this, albeit very basic, and hopefully succinct article, just adds one more to the list.

Before I begin, let me quote The404 who was one of the CSS experts who used to volunteer his expertise at the wp.com CSS forums:

“There is no trick. But doing CSS requires an understanding of the markup (xhtml). There is no way round that. The CSS applies styles to stuff. To what stuff depends on the markup. So number one read the source (View Source). Get used to it. Feel comfortable with it. Two. Understand what the heck selectors actually are. Different cats of selectors behave in different ways. SO: this is counter intuitive. To understand the CSS do not start in CSS. Start in the xhtml. Then see how they relate. Its all there. ”

Once you understand your markup, applying CSS to it will be a cinch.

If you have a basic understanding of HTML, continue reading; if not, I would strongly encourage you to read and HTML tutorial first. It will make it a lot easy to understand how CSS works.

Continue reading…

When A [fill in the blank] Has Been Hacked

Uhm… no, the [fill in the blank] has been cracked.

Unfortunately, there has always been a misconception of what a hacker is (blame the media for that?). The following is an excerpt of the guide on How To Become a Hacker by Eric Steven Raymond (emphasis mine):

What Is a Hacker?

The Jargon File contains a bunch of definitions of the term ‘hacker’, most having to do with technical adeptness and a delight in solving problems and overcoming limits. If you want to know how to become a hacker, though, only two are really relevant.

There is a community, a shared culture, of expert programmers and networking wizards that traces its history back through decades to the first time-sharing minicomputers and the earliest ARPAnet experiments. The members of this culture originated the term ‘hacker’. Hackers built the Internet. Hackers made the Unix operating system what it is today. Hackers run Usenet. Hackers make the World Wide Web work. If you are part of this culture, if you have contributed to it and other people in it know who you are and call you a hacker, you’re a hacker.

The hacker mind-set is not confined to this software-hacker culture. There are people who apply the hacker attitude to other things, like electronics or music — actually, you can find it at the highest levels of any science or art. Software hackers recognize these kindred spirits elsewhere and may call them ‘hackers’ too — and some claim that the hacker nature is really independent of the particular medium the hacker works in. But in the rest of this document we will focus on the skills and attitudes of software hackers, and the traditions of the shared culture that originated the term ‘hacker’.

There is another group of people who loudly call themselves hackers, but aren’t. These are people (mainly adolescent males) who get a kick out of breaking into computers and phreaking the phone system. Real hackers call these people ‘crackers’ and want nothing to do with them. Real hackers mostly think crackers are lazy, irresponsible, and not very bright, and object that being able to break security doesn’t make you a hacker any more than being able to hotwire cars makes you an automotive engineer. Unfortunately, many journalists and writers have been fooled into using the word ‘hacker’ to describe crackers; this irritates real hackers no end.

The basic difference is this: hackers build things, crackers break them.

Now you know that crackers are not hackers; and the next time you hear that some [fill in the blank] has been “hacked”, you’ll know that in fact it’s been cracked.

The more you know…

If you have the wp.com CSS Upgrade

Addendum (20110411): If you are new to CSS, you might want to read my CSS 101 article first.

The common mistake 98% of people who have the CSS upgrade make when modifying a theme is to paste the WHOLE theme’s CSS code in the CSS Editor. DO NOT DO THAT!

If you have the CSS Upgrade, put only your additions/modifications to the theme’s CSS in the editor; code other than that is just an overkill.

A few reasons why pasting the whole code is not a good idea are:

• You’re duplicating code that has already been written for you
• Relative paths to background images will be broken giving you undesired results
• The browser will download the same code twice which is inefficient.

Why will the browser download the code twice?
Because whenever your browser requests a page, the server (in this case wp.com) will send something like this:

(default .css file)
body {background: #fff; color: #339;}
...
...
...
[more css code]
...
...

(your code in the CSS editor)
body {background: #fff; color: #339;}
...
...
...

That’s an overkill because your code will ALWAYS be appended at the end to override whatever definitions were defined in the default .css file. By copying the entire CSS in the editor, you’re telling the browser to do the same thing twice… hence, overkill.

Now, let’s say you just want to change the color of your font from dark blue (#339) to black (#000); since the default body definition looks already like this:

body {
     background: #fff;
     color: #339;
     font: normal 1em Arial, Verdana, Sans;
}

The ONLY thing you need to write in your CSS editor is this:

body {color: #000;}

The server will send the code like this:

(default .css file)
body {
     background: #fff;
     color: #339;
     font: normal 1em Arial, Verdana, Sans;
}
...
...
[more css code]
...
...

(your code in the CSS editor)
body {color: #000;}
...
...

The first definition (default .css file) will set the background to white, the font to Arial and the color to dark blue (#330), but when the browser gets to YOUR definition, it will say: “oh, so the text color is not dark blue anymore but black… okay!”

That’s how CSS works, the definitions that are at the “bottom” are the ones that will take priority.

If you wanted to ADD to an existing definition, say a padding of 10px to the 4 sides of the page, then you’d write it like this:

body{padding: 10px;}

Then the browser will combine the default definition with yours… it would be as though your theme had this CSS code:

body {
     background: #fff;
     color: #339;
     font: normal 1em Arial, Verdana, Sans;
     padding: 10px;
}

By not putting the entire CSS code in the CSS Editor, you’ll help yourself to keep track of your changes, and when you mess something up, it will help those who may be able to help you to fix whatever may be borked.

I hope this helps. I’ll come with more tips/recommendations soon (I hope).

Cheers!

Feed Your Cats and Tags

After a long hiatus, here’s a new tip. It’s not about CSS, but I hope someone will find it useful.

Just in case you didn’t know (I sure didn’t and found out because we needed to do this for a blog at my job) you can serve feeds of a specific category/tag to your readership.

Say you have readers that have subscribed to your blog; obviously they will know every time you post a new article but sometimes, I will dare to assume, such article will not be of interest to some of them because they’re interested only in whatever you post under “CSS Tips.” To make things more convenient for them, you could serve RSS feeds only of those categories/tags they may be interested in. Example:

The following code:

<a href="http://csswiz.wordpress.com/category/css-tips/feed/">CSS Tips RSS</a>

will produce:

CSS Tips RSS

Neat, huh?

What if you wanna serve RSS feeds for a specific tag? Then the URL would look something like this:

<a href="http://YOURBLOG.wordpress.com/tag/YOUR-TAG-NAME/feed/">Your Tag RSS</a>

That’s it. Hope you find this helpful.