This article is not about learning CSS. It’s about having a set architecture in a project when moving forward. One of the first things in beginning development is setting in place a best practice procedure when moving forward – it’s not saying “there is only one way”, it’s saying “for this project, this is how we are moving forward.”

Rule: Choose a Browser Reset Style Sheet

Choose one, or don’t use one.

This helps you on your cross-browser journey. If we reset all browsers to zero, it allows you to spend less time figuring out why margins are inconsistent amongst your unordered list elements (<ul>). This also sets you up to have a default font-family and consistent font-sizes, line-heights, etc. This is most important when cross-browser similarity is a high-concern.

CSS Resets are Bad, M’Kay?

Jonathan Snook stated that he “…okay if the various browsers show things slightly differently.” Jens Meiert also states CSS Resets are bad because they essentially add up to a defined style being overwritten repeatedly, adding to network latency due to the multiple requests for CSS. Then follows up with the comment of using * { margin: 0; padding: 0; } which itself is a bit of a hack and causes performance issues.

To be honest, the argument that CSS Resets/the * hack are a bit of a red-herring. For the majority of clients/sites I’ve worked on, this has been an incredibly minor concern. We’re talking milliseconds. Not even on the radar type performance hits. If you want to squeeze every millisecond (and I do) this is kind of an extreme (even for me) case.

Unfortunately, not all of us are as lucky as Snook and we work with clients/creatives that are not okay with things being a few pixels off sometimes. Personally, I’m with Snook.

Should You Choose To Reset

You have several to choose from:

• Toby Miller’s Equalizer
• Eric Meyer’s Reset
• YUI’s Reset

Rule: Link States

This is referred to as the “LoVe HaTe” rule. :link :visited :hover :active
This relates to CSS specificity, below.

Rule: CSS Specificity

Eric Meyer has a great article on CSS specificity in general that I find lame when sites try to duplicate his article with their own “twist.”
I fully admit, I suffer from over specificity. For good measure, you can read Google’s article about CSS specifity and the increase in performance by using effective CSS selectors.

To reiterate certain aspects, DON’T put a class and ID on everything.

div.imageHolder img#imageHolderImage /* this is BAD */
div.imageHolder img /* this is BETTER */
.imageholder img /* ding ding ding! we have a winner! */

As well, don’t code things inappropriately, i.e. use nested divs/p to generate what is essentially an unordered list.

Test
Test




Target the first item
General list item
Target the last item

Rule: Naming Convention

We won’t dwell on this. BE GENERIC. It’s better to have “.active” or “.select” and NOT “.greenActiveText” – what happens when green active text becomes orange? Now you have a poorly named class.
Also, pick a naming structure and STICK TO IT. camelCase? Dashes-instead? Hell_underscores_are_okay, AS LONG AS YOU ARE CONSISTENT. Do not change it up. This is extremely important walking on to a project. If you walk in and the prior developer is doing it different than you are used to, ADOPT THEIR STYLE, DO NOT REWRITE IT, ADD TO IT, OR MAKE IT MORE COMPLEX THAN NEED BE.

Rule: Shorthand

Use it. Know it. Love it.

div {
	background-image: url("to/some/image");
	background-repeat: repeat-x;
	border-width: unit;
	border-style: (solid dashed dotted double);
	border-color: color || #hex || (rgb / % || 0-255);
	color: #669900;
	margin-top: 10px;
	margin-right: 9px;
	margin-bottom: 8px;
	margin-left: 7px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 0px;
}
div {
	background: url(to/some/image) repeat-x;
	border:border-width border-style border-color;
	color: #690;
	margin: 10px 9px 8px 7px;
	padding: 10px 5px 10px 0;
}

Notice the “0″ has no identifier. It doesn’t need one. Notice 13 lines became 5. Love that. We also dropped the quotes to prevent any possible browser errors. Get to know your CSS shorthand.

Rule: Browser Targeting

For the love of God, they’re called hacks for a reason. They are hacky. They shouldn’t work, but do. You could fuck another browser down the line. You could introduce errors. DO NOT USE BROWSER HACKS This is a bigger sign that *you* are a hack and a not a proper developer. These are the “once in a lifetime” things that come up.

Except for IE.

Fortunately, IE has a nice, clean targeting system. Conditonal comments. If you target IE, use Conditional Comments.

Rule: CSS Behaviors Require JavaScript

If you’re writing CSS Behaviors, move it into JavaScript. Plain and simple. There is no reason to have CSS behaviors. At all.

Rule: Organize Your CSS

I know this one can be a bitch. The project can change. Your initial strucutre may not make sense. But try to organize it to prevent redundancy.

Alphabetize Yo’ Self

I alphabetize my CSS because I find it easy to read, search, and peruse. I also use a code highlighter in jEdit. Others group it by property (font styling, positioning, dimensions). I prefer my way, but that doesn’t make it right. Just when I’m leading the project.

Rule: Comment, Comment, Comment!

Comment the shit out of anything you are handing off. Eat the bytes. But don’t go crazy. /* this is a comment */ not /*——————– (several lines of this) CODE COMMENT (repeat several lines) ———-*/ Keep it simple. Keep it common sense. Break it up by section (however you organize your CSS).

Rule: The DO NOT Do List:

Don’t do these.

Don’t Use Inline Styles. Period.

Inline styles defeat the whole “separation of content and design.” Maintenance becomes a bitch, frankly. You also add to page weight, and can cause issues when a developer doesn’t realize you’ve done things inline and their properly coded external styles are not working properly.

But Keif, I do this all the time in development… – that’s fine, Timmy, but if you “accidentally” leave one in to production, or check it into SVN/CVS/Git and try to act like it’s not your fault, you’ve proven the point why you shouldn’t do this.

Reuse a “Standard” Set of Specific Styles

I don’t mean reset. I don’t mean element specific/font styling type items. I mean don’t use classes that are specific. #width100 .marginLeft25. This is representative of bad coding in general.

Now, this is a brief overview of many “best practices” I try to run with and improve upon. Google CSS Best Practices and you’ll find a slew of additional resources. Not all of them will agree with me – but that’s not the point. The point is understanding them, and recognizing that someone else’s preference may override your own, and my not be technically wrong. If you fail to recognize this, you need to reconsider your role and what you’re doing – you need to be both a team player that can adapt and evolve, and an innovator should you be charged with leading the effort.

What do you have? Send me your best (or worst you’ve seen!)

Posted via web from keif’s posterous

I'm mainly testing cross-posting, and to see how damn easy it is to post on posterous. It may become my main source of "random thoughts" and let ikeif.net represent my main blogging articles. Debates of debates!

Posted via email from keif’s posterous

A constant debate is always “why support IE6? It’s expensive, it’s annoying.”

Now, I’m not disagreeing with that. I don’t like IE6. It’s old. It’s broken. I’d prefer it went away. Unfortunately, IE6 represents over 30% of all IE traffic (which represents roughly 64% of all internet browsers).

It’s not representative of my site.

If you pay attention to your browser metrics, you can see that IE6 is not representative of your site. At all. You can see this as a green light to ignore IE6 (particularly if it’s an intranet or members-only site, as you can dictate browser requirements as a “bare-minimum”). If you’re a blog, I’m all for ignoring IE6. I encourage more sites to do it.

Now there is one slight flaw with that argument. What if your site gets dugg? Slashdotted? Attached to a virus and spread? Date Is ay it – maybe an article you write goes viral?

Some Microsoft This Way Comes

Outside of a sudden surge in popularity, the other *very realistic* look is e-commerce sites. I don’t care who you are, a dollar is a dollar, and as such your e-commerce site better accommodate every visitor. No flash reliance, no JavaScript reliance. Period. I don’t care about it looking the same, but I better be able to make a purchase via Lynx. More importantly, any handicap should be accounted for (blind is the most often thought of). This is what we call Web Accessibility. All angles should be covered, within reason. And IE6, regardless of your metrics, is within reason.

AlphaImageLoader – Ye Olde Standard

I think anyone who is “in the biz” knows about AlphaImageLoader. We’ve all done the CSS replacement. I helped adjust and edit a MooTools Class that utilized it to account for all sorts of PNG situations. It was our “standard” because it was able to account for IE6 with a minimal amount of effort. Except…
AlphaImageLoader does not support background-repeat, or background-position. It requires set heights and widths. It requires one-off styling for images that are cropped. Plain and simple, it still sucked.

VML – The New Contender

I stumbled on a VML solution after researching a site to see how they were handling PNGs. It turns out they were utilizing DD_belatedPNG. I dug into VML vs. AlphaImageLoader and came across this article explaining the same thing – AlphaImageLoader or VML.

The obvious is pointed out: AlphaImageLoader eats memory. VML adds bad markup to a page. IE6 does *not* cache the image (according to the article, at least).

So, we’re stuck with a memory hog or a lot of image requests against a server, which can add to a lot of bandwidth costs if your traffic spikes (it happens).

Will The Real Slim Code Please Stand Up?

After reviewing DD_belatedPNG a second time, he claims to “mostly” have fixed the caching issue. To be honest, with as much grief I’ve had from AlphaImageLoader and changes in creative layouts that require PNG transparency, it seems like a real replacement for AlphaImageLoader, loaded using JavaScript and conditional comments so ONLY IE6 takes the hit.

The downfalls? No opacity on the VML. I haven’t looked into creating a container to wrap the VML and fading that, but call me crazy, it may not work. This means we may have to keep AlphaImageLoader around for a little while longer. I’m not sold that either solution will replace the other, but they both are going to be invaluable until IE6 goes the way of the dinosaur.

Performance Concerns? Not with VML.

Thank God someone else ran the numbers. Tests have been ran, and also Yahoo! provided some additional numbers to help showcase that VML is not the memory hog AlphaImageLoader is. Bonus!

There is the argument that a PNG 8-bit image is a better solution. No CSS hackery, no JavaScript intervention. However, it requires whomever the developer is, and also whomever the designer is cutting up your graphics to be familiar with proper image optimization techniques to insure an efficient, optimized experience.

The REAL Solution
The priority of the solutions seems evident. PNG 8-bits for most cases. VML through most others. AlphaImageLoader only as absolutely necessary. I do believe that a JavaScript solution is the best solution for IE6 AFTER 8-bit PNG images (ran through a PNG optimizer (like PNGCrush).

Unfortunately, such optimal solutions require trained developers and trained designers. Who has time for that? You should make time to insure success.

Enjoy.

Holy hell, has it been a year all ready?

That’s right – Plaid, the folks behind Brandflakes for Breakfast, are starting Plaid Nation in a mere ten days!

What is Plaid Nation?

Why, an excellent question to ask – Plaid Nation is a “rolling celebration of creativity and a demonstration of social media in action.”

Or – social media in motion. We’re talking live streaming video, interviews with some of the Internet 1337 –

In their venture, they managed to interview Robert Scoble, Cathy Brooks from Seesmic and Biz Stone (of his many involvements – Twitter being the one you probably know).

Awesome People, Awesome Concept, Awesome Execution.

Cool schwag for Plaid Nation!

As last year I caught wind after the fact, this year they won’t be too far from home base – they’re hitting Chicago on July 22, and Indianapolis on July 23 – I’m debating making the road trip to catch the ride from Columbus (why aren’t they coming here?)

If you haven’t gotten your fill of Plaid yet – they’ve got some new digital freebies up for this year, complete with theme song :) and a twitter stream to help the normals check in on the fun. So Darryl, you may be getting an email from me if I can pry myself away from work for a day or two and make my own road trip (without a live stream of the trip, but I can tweet away) to see how much of the Plaid fever I can catch.

Let me break down twitter for you. It’s been abused by Oprah and Ashton Kutcher, it’s been used in by stars to flaunt their nudity (NSFW? I guess…). It’s all the rage and no one knows why.

I use twitter quite prolifically – mostly to vent, sometimes to ask questions. I don’t use auto-follow, I don’t use any “tips or tricks” to gather “hundreds of followers in a day.” I simply use the service, blog, and tweet. Somehow, I keep getting followers – possibly because of my associations of people I talk to (tweet with) or my hash tag usage (possibly again, through people’s auto-follow based on the hash tag usage from people). I’ve played with the twitter API on an as-yet-unreleased twitter project (I’m trying to make sure I “follow the rules” and get OAUTH working). Has that got me followers? Possibly.

Twitter – It’s Your NICHE, Not Your Numbers.

The very simple key to twitter – it’s not popularity, it’s not mass following, it’s not having the most followers.

The inherent problem with twitter, is, as since the myspace days everyone felt that the more people you had “friended” the cooler you had to be. I guess this herald’s to people’s high-school days where higher numbers of friends translated into something that mattered – perhaps the inherent psychological need is filled (yes, wikipedia link, deal with it).

The problem is that people still associate greater numbers with some sort of correlation to their skill level, reputation, or validation of “social media mastering.”

Again – It’s Your NICHE

If you have 50,000 people following you, and you’re following 50,000, and twitter is averaging 221 tweets per second, how are you really reading all your beloved followers? By automated scripts, or because you aren’t a master of anything except collecting followers. This is not a reflection of “social media savvy” nor a reflection of how effective they are at whatever it is they claim they do – be it real estate, loan sharking, web development, or ESPECIALLY SEO, SEM, or Social Media in general – if you compare some of the “top ten” or “top 25″ “experts” in various blogs you’ll see one of two things – they’re either the same list with the “obvious” experts (like my list) or full of self-claimed experts that tend to have a lot of seminars/webinars to show *you* how you can have google paying you fat checks for a measly $150!

Quality is What Counts – NOT Quantity

I’m really reinforcing that quantity issue – it’s the quality of who you follow that benefits you the most, as well as the quality of your tweets. Tweeting is the new blogging – and just as people blog about their cats, their daily lives, their secrets, people twitter the same things, so you WILL see mundane tweets, from even those that tweet about subject matter you’re interested in. People you find/follow on twitter that either speak of the subject you’re interested in, answer your questions, will post links to their blogs as well as remarkable links worthy of reading. What people post is important – after all, if they share every mundane article/image/digg/Retweet it waters down their quality as well.

The First Rule of Tweet Club

You have to tweet to play (okay, not really). By no means do I consider myself a twitter master, as I still tweet fairly mundanely – it’s my way of letting off steam, 140 characters at a time. But I also follow some pretty cool people, and have found some articles worth saving, some tips worth knowing, and some people worth finding. Won’t you be my twitter neighbor?

I’ve been on twitter since sometime in 2008 (I assume, this is as far back as twitter is showing me).

In that time, I’ve added a ton of followers, and constantly sorting through the requests I’ve received. I don’t follow everyone. Particularly “Gurus” with thousands of following/followers. I don’t follow people who primarily use Twitterfeed so it’s just a stream of RSS posts. I don’t follow spammers (naturally) or people that do nothing except hock their site, their product(s) or their friend(s) similar products, and I especially do not follow self-claimed gurus, be it social media, seo, sem, etc.

The people I follow on twitter fall into a few categories:

• I know them personally.
• I know them professionally.
• They are an understood expert in their field(s) like:
  • Web Development (Particularly Javascript Framework Developers)
  • SEO
  • SEM
  • Analytics
  • Social Media

Particular niches I subscribe to, and I have developed a small list of experts that I’d trust what they say (and occasionally toss questions to them). I consider this list to be “obvious” experts – they’ve proven themselves professionally, or have written at length in blogs about the topic.

My Obvious SEO Experts on Twitter

1. Matt Cutts (from Google)
2. Rand Fishkin (from SEO Moz)
3. Aaron Wall (from SEOBook)
4. SearchEngineLand (from itself)
5. Jennifer Laycock (from Search Engine Guide)
6. Mark Scholl (from EnginePoint Marketing)

I’ve limited the list to six – because I feel they cover a breadth of knowledge that you could gain, mainly from their blog postings – sometimes, 140 characters isn’t enough (some times it is).

I’ll work out additional “Obvious Twitter People to follow” in the future.

Reading on SlashDot about buying a domain name from a cyber-squatter it made me think of the constant issues people/new businesses have before they’re really even on the web.

What Domain Name Defines Me, as a Person?

I Am Jack

A Doubel Edged Sword – SEO Domain, Generic Notability

The “cool” factor comes with the right domain. For example, ILoveJackDaniels.com was a cheat sheet repository for web developers (ignoring the fact that it’s changed domains since Jack Daniels doesn’t like nerds). No one in their right mind would associate “web development cheat sheets” with “I love Jack Daniels” (or ilovejackdaniels, if we want to go into semantics of how search engines see domains). What if it was simply, web-cheat-sheets.com (or webcheatsheets.com)? Certainly, we may stumble on it, and it makes sense – but it’s not notable as ILoveJackDaniels.com or something equally creative.

Balance the “Cool Factor” with “Smart Business Move”

If you feel your business depends on your domain, you’ve all ready failed. Your domain does not define you – ever. No one finds my site by researching me – they turn up searching on terms for jquery, mootools, seo, and various other topics I’ve written about. They’ve come here by clicking on my (hopefully) insightful comments on another person’s blog post. Will they remember to come back? Maybe. Maybe they’ll remember the simplicity that is ikeif.net or maybe they’ll think:

What was it? Some site with mootools, jquery, social media, seo… I’ll just throw a few terms in and see what comes up

Hey, maybe I’m not in the first page of results, but then again, until my digital life needs to be on the front page, I don’t need to be.

When you start developing in any JavaScript framework, you’re stuck wondering where to begin. Everyone’s got a tutorial, and an opinion, but when you’ve got “an idea” and just need to delve into the code to make it happen (say… porting functions? Figuring out the basics?) then sometimes wandering through the API isn’t the best thing you could do.

Suggested Dojo Reading

Sitepen has provided a nice primer on the basic functionality most people start off with in their library investigations, but where to go from here?

Is like a more detailed view into the Dojo API. I’d start here if I wanted to peruse the API in a more logical way then in their API docs.

I suggest reading the Dojo Basics from Dojo Campus to get in deep with querying elements and Dojo Quickstart Events to figure out attaching events.

Understanding Dojo Toolkit

The more I use Dojo, the more I see correlations with Java – and that’s not a good thing. In Java, you have JavaDocs telling you about the thousands of Java functions, parameters, returns you can have. VERY powerful. VERY difficult to learn. Most of the JavaScript frameworks took a different approach – they made what they did powerful, but kept it simple. Easy to read, easy to peruse – like the PHP docs (in my opinion). the function names and organization make total sense.

In Dojo, it doesn’t feel as quite intuitive – for me – and that’s it’s biggest downfall. It has a high barrier of entry, and a large, robust, sophisticated toolkit that you aren’t really expected to know every inch of (like Java), but understand the basics and have an API to refer to when you want to do the more powerful functionality.

Unfortunately, Dojo still feels like it’s in the infancy of this aspect, as navigating to the more complex aspects is a pain. Should my Dojo work increase in the near future, I may invest in a book to try and become more acquainted with the more difficult aspects.

Accessibility in the Framework

I’m seeing inklings in their code with reference to WAI, but I haven’t even *attempted* to fool with that in any accessibility sense. As my current projects haven’t adequately been in need of WAI guidelines, I’d love to see a more thorough analysis.

I am a MooTools JavaScript developer. I love the framework, and in writing MooTools code, I’ve become a better Object-Oriented-Programmer, and a better JavaScript developer. If you follow technology, you know there’s multiple JavaScript frameworks – jQuery being the most popular (IMO), with Dojo Toolkit being the most used in enterprise applications.

After having used JavaScript libraries (originally prototype/scriptaculous, some Moo.FX, then jQuery, then MooTools, and currently a project using Dojo) you come to expect a certain amount of consistency in general concepts, and in that expectation, the libraries have delivered.

$, $$, dojo.query, dojo.byId, document.getElementById – give me my element nodes!

So, basic JavaScript, people have developed a few different ways to get the elements they want, including custom functions – like Robert Nyman’s getElementsByClassname – which take advantage of local browser support, but you’re still forced to account for those without it. *cough*IE*cough*

MooTools uses the $ or $$:
[code lang="javascript"]
var idEx = $('someId'); //get element by ID
var arrayEx1 = $(document.body).getElement('someElement'); // return first matching 'someElement
inside of 'someContainer', or document.body in this example
var arrayEx1 = $(document.body).getElements('someElement'); // return array of 'someElement' (or class name, if you have the right components downloaded) that are contained inside of 'some container', or in our example, document.body.
var arrayEx2 = $$('someElement'); // return array of all found 'someElement'
[/code]

Pretty powerful stuff, for so basic an idea.

jQuery is kind of similar:
[code lang="javascript"]
var someArray = $('someElement'); // return an array of those elements/that ID/etc.
[/code]
Very powerful for a single selector – but it has the added bonus that they’ve allowed it to be overwritten, so you can use jQuery with another library (say, MooTools) that also uses the $ selector. It took me a little bit to get used to the return of an array outside of a single element.

Dojo does things a little differently
[code lang="javascript"]
var someArray = dojo.query('someElement'); // return an array of elements
[/code]

The get(’selector’).get(’selector’) (like mootools $(some).getElements(’someElse’)) can be pulled off in dojo/jQuery, but perhaps not as intuitive, in my opinion (again, I’m biased as a long-time MooTools fan/developer).

Which is better?

I can’t say which JavaScript library is better. Perhaps more-so, I don’t want to. It’s moot. You pick the library you’re most comfortable with, and most importantly, for your Clients – you pick the one that they’re development team can run with for the long-term.

How to choose a JavaScript Library – the condensed version

I’m a life-long student, and a professional developer – I’ve coded many languages, and I’m learning others, so it’s easy to see certain correlations that have started popping up.

MooTools… is definitely for the JavaScript Developer, and if you’re Object-Oriented as well, it’s even better.

jQuery… is for the designers out there who know some xhtml and want to get some JavaScript without dealing with the headaches it can bring. It’s go ta low barrier of entry, but I’ve thought of this Thomas Jefferson quote:

That which is Popular is not always Right, what is Right is not always popular

Don’t read too much into that. I just infer that people that say it’s “the way” have some additional education to do in general.

Dojo… is for the Java Developer crowd. As I’m delving more into Java, I see the strong similarities, and see why it’s involved in a lot of Java-based enterprise solutions – you could jump back and forth between Dojo and Java and feel pretty comfortable.

Coding Syntax, Preference, What’s Left? DOCUMENTATION!

This is the area most things suffer in – either too much or too little documentation. I’ve grown fond of MooTools docs structure. It’s easy to find what I need with it’s break down of how the functions are applied – string, array, elements… Easy!

jQuery docs are along the same lines, but I have difficultly in navigating them. I blame myself because of my long-term familiarity with MooTools, it’s become second nature, so jQuery is still slightly foreign.

Dojo docs, in my opinion, are the WORST of the docs. They’re broken down into their three main components (dojo, dijit, dojox), but beyond that it’s a guessing game to get to the API reference you want/need. I was finding myself hitting the wrong sections because the search led me there, but it was not representing what I was searching for.

I really feel their Dojo Campus is a much better doc representation than their dojo book, or their API docs. Their book is incomplete, and if you search and find references to the book, you’ll find items incomplete, moved, referencing different version of the book, to the point you’re better off not even reading it. Along with the occasional example randomly not loading, then working, then not. It was a nightmare!

The problem – perhaps the only problem – with Dojo Campus, is the search functionality. It defaults to “title search” which failed for me 99% of the time (because I needed something in the content, and was searching for the wrong titles). Even worse, the search isn’t even featured on the home page! I had to go four clicks in until I stumbled upon it for this post. (It’s accessible in two: Click on Tutorials and one of the options)

To my understanding, the Dojo Campus is going to become the “new” face of Dojo. And with their continued improvements in coding it’s becoming a stronger contender, and more importantly, more user friendly.

Examples from the frameworks

Every framework suffers from this. Outdated examples, drastic version differences that break code, or multiple version examples. MooTools and jQuery, for the most part, are pretty solid. Dojo, I hate to pick on you, but this is where you hurt the most. I googled – a lot – and the demos – official, sitepoint, others – are all over the place. Version 0.4, 0.9, 1.2.3, 1.3… and what’s worse, no one indicates what version the demo is in, so when I started looking at Sortable Tables, I find out it was made obsolete in another version. Links to non-existent pages in the dojo book… a mess!

In my own projects, it lead me to re-write a lot of items that existed in Dojo, but for a beginner with their library I ran into way too many issues to make it feasible to spend any more time playing with the code.

Overall, my impressions have not changed

MooTools is my favorite, jQuery is a recommended secondary, and Dojo is reserved as a “use it if you have to.” They pretty much throw the W3C to the wind with their coding structures – those dijits generate a mess of divs and classes as a default, to the point that I see the benefit in their examples, but in most of my scenarios, it was overkill (and my fellow devs would kill me if I ever coded something in that spaghetti menner).

It really showcases a difference between people that code for the front-end, and those that work with the front-end but primary experience is the back-end. the code makes sense to the extent in relation to Java code – but in comparing it to the majority of front-end applications, it’s a nightmare.

I’m a fan of Yongfook’s work, particularly Sweetcron.

What is Sweetcron?

To quote Wikipedia:

Sweetcron is an open source lifestreaming blog software created by Jon “Yongfook” Cockle based on the CodeIgniter framework. It was originally released on 3 September 2008 and the latest version following on 22 September. Sweetcron is similar to other web applications such as Tumblr and Friendfeed, but users are able to host their own lifestream on their own server and customize it in any way they want with the Sweetcron API.

Users can add RSS feeds from multiple social networks and sites, such as Twitter, LastFM, Flickr and many more.

Basically, if it has an RSS feed, you can utilize it to create your own personal lifestream.

How can I make those @Usernames clickable?

Sometimes, the code can get lost in translation. Maybe it’s your RSS feed, maybe it’s the provider, hell, mabe it’s Sweetcron. But Sweetcron gives you two handy methods to manipulate your data in two handy “plug-in functions“:

• function pre_db: before you store the information in the database.
• function pre_display: after it’s been saved to the database, but before it’s rendered.

Thanks to regular expressions, we can loop through information before we save it to our database, or afterwards, depending on your preference. All you need is:
[code lang="php"]
// change @names into clickable links
$item->item_title = preg_replace('/(^|[^\w])(@[\d\w\-]+)/', '<a href="http://twitter.com/$2">$2</a>' ,$item->item_title);
[/code]

$item represents your sweetcron’d “post” which consists of the object – code, text, images, links, etc. We’re basically saying “in this object, there is an item_title, if it has @something, make it a link that points to user @something” – simple enough, eh?

This is just the basic code you’ll find EVERYWHERE on the net. In an effort to be more like Scoble I want to start posting in regards to stuff I’m using/finding/reading to make future efforts in reuse easier – delicious only goes so far, in regards to remembering “what did I tag that with?”

The PHP Function to Update Your Twitter Status

[code lang="php"]
<?php
/**
* A simple function using Curl to post (GET) to Twitter
* Kosso : March 14 2007
*
* Feel free to do what you like with this.
* It's pretty easy. But I thought I'd just put it out there.
* Curl is your friend.
*
* usage : postToTwitter("myusername","mypassword","hello twitterati! I'm posting this from a PHP script! woo!");
*/
function postToTwitter($username,$password,$message)
{
// GET the API url via web authentication
// add 'status' param to send a message to Twitter

$host = "http://twitter.com/statuses/update.xml?status=".urlencode(stripslashes(urldecode($message)));

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $host);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));

curl_setopt($ch, CURLOPT_USERPWD, "$username:$password");
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_POST, 1);

// Go for it!!!
$result = curl_exec($ch);
// Look at the returned header
$resultArray = curl_getinfo($ch);

// close curl
curl_close($ch);

//echo "http code: ".$resultArray['http_code']."<br />";

if($resultArray['http_code'] == "200")
{
echo "<br />OK! posted to http://twitter.com/".$username."/<br />";
} else
{
echo "eek! yegads! error posting to Twitter";
}

// debug the result
// echo "<pre>";
// print_r($resultArray);
// echo "</pre><hr>";
// $sResult = htmlentities($result);
// $sResult = str_replace("&gt;&lt;","&gt;<br />&lt;",$sResult);
// echo "<pre>";
// print $sResult;
// echo "</pre>";
}?>
[/code]

I credit Kosso with the PHP function – it’s basically a slightly more blown out version of the code flaoting around.

In PHP you have the time() function to pull the UNIX Timestamp:
[code lang="php"]
$unix_time = time();
echo $unix_time;
[/code]

We don’t have an easy-as-pie solution for JavaScript however – instead, we have this function we can use:
[code lang="javascript"]
function unix_time()
{
// tada!
return parseInt(new Date().getTime().toString().substring(0, 10));
}
[/code]

It’s weird that I swear David Walsh follows me around – everytime I have a conversation with someone about something, he writes an article about it – like preventing your css and javascript from being cached.

I had come to the same conclusion (from by conversation with Toby) that random querystrings being appended didn’t make much sense – that prevents caching, but why stop caching – unless the file gets updated?

I wrote a little php function that works with filemtime, albeit it requires the absolute path of the file.

[code lang="php"]

function autoVer($url){
$path = pathinfo($url);
$ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url);
echo $path['dirname'].'/'.$path['basename'].'?'.$ver;
}

[/code]

What this means, is when we call our files like so:

[code lang="php"]

It renders like so:

[code lang="php"]

[/code]

So only when your file gets updated, does the query update, forcing the cache invalid!

It’s a simple function – and by no means perfect. Would you refactor it, or do you have a better way?

Shawn Morton may have beat me to the punch – both in writing about it – and a quick iframe demo of the Skittles idea.

The general point (in terms of Web Development) is that this is an insanely simple thing to accomplish – 15 minutes and Shawn had a working iframe demo.

I wanted to grab some of the effects and colors of the original, just to see if I could do it and “make it fancy” – I mean, there’s still a half-dozen effects that can be applied to it – fades, transitions, all those whizz-bang-pow stuff people love, but I had to pull myself back a test was important.

Skittles.com Initial Test

I decided to focus on Firefox 3 so I could use rounded corners in CSS (there’s a JS library for everyone else, sans Webkit, but hell, remember, this is a test. No one’s paying, so I’m not worried about IE.

It took me a couple hours, but here’s skittles.com, reproduced without flash.

I’m too tired to write more, so – here ya go.