The Stupidest Article About Social Media Ever
http://www.scribd.com/doc/20123349/The-Stupidest-Article-About-Social-Media-Ever
High Performance Web Sites: 14 Rules for Faster Pages by YUI
I just came across this great video on front-end optimization (FEO, you heard it here first).
The 14 rules:
- Make fewer HTTP requests
- Use a CDN
- Add an Expires Header
- Gzip Components
- Put stylesheets at the top
- Move Scripts to the bottom
- Avoid CSS Expressions
- Make JS and CSS external
- Reduce DNS Lookups
- Minify JS
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ET Tags
- Make AJAX Cachable
Check out the video if you feel like it. If you don’t wanna watch the whole thing, don’t worry, I’ll do a post on a few of these rules shortly. Starting with making fewer HTTP requests with CSS Sprites. Enjoy.
Scrum it up, man. Scrum it up: Agile Development Procedures just make more sense.
When I first began studying Design Patterns, I realized that simply programming and trying to come up with more efficient ways to do things had already lead me to a process that was very similar to things like MVC, Singleton, and Factory Methods. Learning the rules and structures has helped my processes tremendously (mainly because it cuts out a huge amount of repetitive trial and error), but the reason they are accessible, for the most part, are because they simply make sense.
When I recently picked up Agile Software Development with SCRUM, I had the same type of experience. It just makes sense. Since we’re all family here, I’ll be vulnerable here and tell you what I thought when I began hearing the ‘buzz’ words like Extreme Programming (XP), and Agile Development.
- They’re specific to a programming language / environment (WRONG)
- They are terms relating to a coding style or set of coding methods (WRONG)
- They are really only necessary / effective for larger-scale, low-level development (WRONG).
Wow, 3 strikes, and I was out… without ever having actually studied the subject. Here are the basic tenants of SCRUM.
(Which, alas, is NOT an acronym. Lame, I know. I was totally hoping it meant something like “Super Crazy Radical Underground Methodologies” or “Software Creation Relating to User Management”. Nope. It’s just some word. Basically. It actually comes from a term in Rugby. Go figure.)
Read more »
CSS Sprites: why 8-bit game design still kicks ass
In keeping in line with Yahoo!’s “14 rules”, I’ve decided to convert a few projects that I’m working on have them use CSS Sprites instead of icons. This speeds up the user experience in several ways, so let’s address the WHY first.
- Size: This is the first argument that is usually made, so let’s get this out of the way. Run an experiment. Grab a set of, say, 10 icons. Calculate the sum of their file sizes. Then open up photoshop, throw each of those icons into an image (on a grid, so you can still see them), and save as a flat file (whatever format the icons are in). Compare the size total. The reason the new grid of icons (aka ’sprite’) is smaller, is because the extra data stored in the image (information about the colors, compression type, etc…) takes up space. Whereas in the sprite, all that data still exists, but only once.
- Speed: The single HTTP request will make your page load faster. Think of it this way, if you have a meal planned, and you have to bring catsup, mustard, mayo, pickles, onions, tomatoes, and lettuce to the table from the fridge, you have a choice. Since you only have 2 hands (browsers can handle 2 http requests at a time), you can bring them two at a time. Or, you can put them all on a tray, and bring them all at once. That, essentially, is what you’re doing with a CSS sprite.
- Better Code: A sort of hidden advantage to the CSS sprite for me is the fact that it almost ensures that you write your image handling in an external CSS doc. That means you’ll have to actually think about how to handle each image, instead of throwing them into an image tag, and letting the browser do the work. Remember, the more work you do, the less your users’ browser will have to.
Now, let’s talk about how to do this…
Phoogle – a quick and easy PHP Google Maps API app
In my recent search for the easiest, cleanest, php API plugins, I found Phoogle. It's a PHP / Google Maps class that is very cleanly written, and absolutely painless to implement. Though you will still need to apply for your free Google Developer API Key, it's about as quick and easy as it gets for such a powerful functionality. Also, if you use CakePHP, you can install a Phoogle Helper! Here's the basic code to make it work:
-
require_once 'phoogle.php';
-
$map = new PhoogleMap();
-
$map->setAPIKey("<strong><em>YOUR API KEY GOES HERE</em></strong>");
-
printGoogleJS();
-
-
$map->addAddress('208 Dingler Ave, Mooresville, NC 28115');
-
$map->addAddress('210 Doster Ave, Mooresville, NC 28115');
-
$map->addAddress('300 Dingler Ave, Mooresville, NC 28115');
-
$map->showMap();
Singleton Pattern in PHP
First, let's talk just for a second about what a Singleton is and does. The Singleton pattern applies to situations in which there needs to be a single instance of a class. If it is requested after it has been instantiated, it should either return an error, or simply return the same values / parameters / data that was already set. In other words, an instance of itself.
The most common example of this is a database connection. Implementing this pattern allows a programmer to make this single instance easily accessible by many other objects.
-
class Example {
-
private static $instance;
How to make a full screen grid in ActionScript 3
For the purposes of this discussion, I've created a file named "Grid.as", and added "Grid" as the document class in my "Grid.fla" file. This means it'll automatically run when the .swf runs. The Grid.as code is listed at the end of this post in completion. Here's what the code does.
-
package {
-
import flash.display.*;
Since we'll need several aspects of the display package, we'll just include the whole thing with wild card.
-
public class Grid extends Sprite {
-
private var size:uint = 80;
-
private var bgColor:uint = 0xFFCC00;
-
private var borderColor:uint = 0x666666;
-
private var borderSize:uint = 0;
-
private var rows:Number;
-
private var cols:Number;
Simple Javascript Form Field Validation
Quick Regex form validation to check if a field contains numbers only...
-
function isNumeric(elem, msg){
-
var alphaExp = /^<strong>[0-9]</strong>+$/;
-
if(elem.value.match(alphaExp)){
-
return true;
-
}else{
-
alert(msg);
-
elem.focus();
-
return false;
-
}
-
}
Simple Javascript Delete Confirmation
Put this in between the tags...
-
function confirmDelete(delUrl) {
-
if (confirm("Are you sure you want to delete this item?")) {
-
document.location = delUrl;
-
}
-
}
Simple YouTube API Class in PHP: Redeaux — Revision 2 (update)
Just a note: It's not 100% done yet, still have a few minor tweaks. I'm going to be uploading the final version this Friday. I think there will be one more revision after this one, then we will launch the official first version. Thank you for all of your patient and feedback as we strive to make this the most popular PHP4/5 YouTube API on the internet.
A lot of you have read our post including our YouTube API. I know because it almost gets as much traffic as the post on how to hide everything on your myspace profile.
Now because of it's popularity you guys have requested a lot of bug fixes and a new release -- revision 2. On top of that a lot of you are still using PHP4, I have no idea why, but you are.
I decided to address every individual bug that you guys commented on the post, and address issues that I thought were relevant on top of your findings (which have been extremely helpful.)
This brings me to the NEW and IMPROVED YouTube API Class.
Read more »
The best Firefox Add-ons…
Firefox has about 2,340,945,583,492,044,372,847 advantages over every other browser out there. Not the least of which is the ability to create add-ons and extensions for highly specific functionality. Here's my list of add-ons that I find myself using frequently.
- Reload Every - This one is incredibly simple, and useful. Install it, and you'll have the option of right clicking any page, and setting the timer for refresh intervals. Let's say you've got a script that crawls your database to grab records touching multiple tabls, and cleans them up, reporting on the outcome. If you want to see the report at every interval, but want the option of letting this script "run" in the background, you could set it to LIMIT 1 in your SQL query, and then reload every 5 seconds. Admittedly, this would be a bit more elegant with an AJAX functionality that does the same, but why overwork on a cleanup script when you can install this, and spend your real energy working on the front end? Just install it, and you'll start to see my point. (PS. you could also start using scripts like this to build up page loads on site that "rank" such activity... say, myspace?)
- Web Developer - If you're not using this plugin, your life is far too hard. I guarantee it.
- Stumble Upon - I have no particular reason to endorse this company, but I do... strongly. I just really like the way they've done things so far, and releasing a firefox extension that simply helps the experience of using their site without actually offering them more page views is a great example of why.
- FaviconizeTab - Adds the benefit of optimizing your tab bar with tiny icons instead of full-sized tabs. Very useful.
- Firebug - A 'must-have' for JavaScript / AJAX development.
... and the extensions I wish weren't so buggy.
- PermaTabs - This is a great idea, but when you use gmail as a permatab, for example, you constantly have new tabs opening with the same content. It's annoying. So much so that I didn't want to frustrate myself with duplicating it to describe it better here.
- Fasterfox - A WaxJelly reader commented about Fasterfox and I've been using it ever since. It allows you to prefetch links and store them as cache, and enhance the already existing cache system Firefox uses. Very quick, however CSS/XHTML developers might not enjoy it as much seeing as CSS gets cached.