Archive for 'Web Design'
Web Developer Tools Round Up
Posted on September 24, 2007, under Browsers, Development, Tools and Services, Web Design, WordPress.
I recently had to wipe a computer and get it up from scratch. In the process I realized that there are a series of tools I can not live without. This process also helped me realize how many tools I rely on and make a web developer’s life so much easier. Here is the run down of my “must have” tools.
- Firebug
- YSlow for Firebug
- Litmus
- Live HTTP Headers
- Screengrab!
- User Agent Switch
- Web Developer
- DOM Inspector
- Aardvark
- UltraEdit
- UltraCompare
Have any “must have tools” not on my list.
Popularity: 17% [?]
4 Comments
Stemplate, Free Web Template Elements
Posted on August 30, 2007, under Tools and Services, Web Design.
I usually do not write about services that people contact me about, as it’s hard to weed through the “spammers” that are just randomly submitting new services to blogs. A little while ago I got an email from someone over at Stemplate, which is a web design template website. The difference between this server and others, for one is they have all free templates. The second major difference is that they do not give you entire website templates, but instead portions of websites for example navigation banners, buttons, etc.
The reason I like Stemplate over other template sites is because it gives me stuff to build off of, or integrate into my own design. I can do some design work, but I am not nearly as good as those that can crank out templates one after another. I am more of a designer that can piece things together, and build off of things. Stemplate also serves as a good resource for learning how to do certain things. The service is new, so it is a little thin in content but I am sure there is more to come soon.
Popularity: 12% [?]
2 Comments
Stock Art for Your Website or Product
Posted on July 30, 2007, under Development, Tools and Services, Web Design.
I have seen this a couple times before, and I just saw it this weekend on a new service. Where a company will use stock art with the water marks still on the image. It bothers me for several reasons: 1) Photographers and painters spend countless hours on their work, and it’s a challenge to display sample work without it being stolen. 2) Stock art is not all that expensive, especially when you get into the royalty free work. So why not support good work and purchase it?
So instead of just “complaining” about the people I see ripping off work, I thought why not share some of my stock art resources that I use.The sites below have top quality work, most royalty free and at good prices.
Enjoy and support your artist!
Popularity: 12% [?]
1 Comment
How to Make a Password Strength Meter Like Google v2.0
Posted on July 16, 2007, under Code Snippets, Development, How To, Security, Web Design.
Previously, in Part 1 of How to Make a Password Strength Meter Like Google I went over the basics on how to get a password strength meter up and running on your site. I got a lot of feedback on this article, mostly commenting on needing a better algorithm to determine if a password is secure or not. The algorithm I implemented in part 1 was mostly just for show. I did not further build out the algorithm because I wanted to leave it up the end user to determine what they considered a secure password or not. Furthermore, I did not want to make a scenario where a flaw in my code would be present in any sites out there that implement this.
After further research in the area of secure passwords, I am further building out the original code base to better determine a secure password from an insecure password. Here are the parameters used for measuring a secure password in version 2.0:
Password Length:
5 Points: Less than 4 characters
10 Points: 5 to 7 characters
25 Points: 8 or more
Letters:
0 Points: No letters
10 Points: Letters are all lower case
20 Points: Letters are upper case and lower case
Numbers:
0 Points: No numbers
10 Points: 1 number
20 Points: 3 or more numbers
Characters:
0 Points: No characters
10 Points: 1 character
25 Points: More than 1 character
Bonus:
2 Points: Letters and numbers
3 Points: Letters, numbers, and characters
5 Points: Mixed case letters, numbers, and characters
Password strength is measure by the percent of the above:
>= 90: Very Secure
>= 80: Secure
>= 70: Very Strong
>= 60: Strong
>= 50: Average
>= 25: Weak
>= 0: Very Weak
Implementation of the code should be the same as version 1.0. The next version will have the ability to blacklist common dictionary words. Hope this works out better than version 1.0.
Code: Version 2.0
Popularity: 35% [?]
20 Comments
Google Makes FeedBurner Free
Posted on July 3, 2007, under Blogging, Development, Search, Tools and Services, Web Design.
You have to love Google…. with the recent acquisition of FeedBurner Google has now opened up the pay services to all for free. Before, FeedBurner Pro and FeedBurner MyBrand were both pay services, but Google has made them free.
If you have a FeedBurner account go in and enable pro stats. You can also get up an running with MyBrand feed domains in minutes. It will be interesting where Google will go to not only monetize FeedBurner along with Google Analytics but additionally what will be the future of the “monetize” portion of FeedBurner where they let you put ads in your feed.
Popularity: 14% [?]
2 Comments
How to Make a Password Strength Meter Like Google
Posted on June 27, 2007, under Code Snippets, Development, How To, Security, Tools and Services, Web Design.
Password strength meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. One can argue how useful these meters really are, but non-the-less they are fairly cool for users. So how does one go about making one of these meters? Well it’s fairly straight forward.
The basic break down is we add an event handler on your password field that will check the password for every key input the user types. This allows for an updated meter as the user types the password. When you get into the algorithm that actually checks how secure a password is, there are many routes you can go. When researching for this project, I chose to base my code off of the kind folks over at Intelligent Web. There theory is to calculate how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that we then in turn convert to a nice GUI for the end user to see. So let’s take a look at the code:
The JavaScript is fairly straight forward. There are settings at the top for different checks to enable or disable. Here is the JavaScript:
[ftf]
// Password strength meter v1.0
// Matthew R. Miller - 2007
// www.codeandcoffee.com
// Based off of code from http://www.intelligent-web.co.uk
// Settings
// — Toggle to true or false, if you want to change what is checked in the password
var bCheckNumbers = true;
var bCheckUpperCase = true;
var bCheckLowerCase = true;
var bCheckPunctuation = true;
var nPasswordLifetime = 365;
// Check password
function checkPassword(strPassword)
{
// Reset combination count
nCombinations = 0;
// Check numbers
if (bCheckNumbers)
{
strCheck = “0123456789″;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check upper case
if (bCheckUpperCase)
{
strCheck = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check lower case
if (bCheckLowerCase)
{
strCheck = “abcdefghijklmnopqrstuvwxyz”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check punctuation
if (bCheckPunctuation)
{
strCheck = “;:-_=+\|//?^&!.@$£#*()%~<>{}[]“;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Calculate
// — 500 tries per second => minutes
var nDays = ((Math.pow(nCombinations, strPassword.length) / 500) / 2) / 86400;
// Number of days out of password lifetime setting
var nPerc = nDays / nPasswordLifetime;
return nPerc;
}
// Runs password through check and then updates GUI
function runPassword(strPassword, strFieldID)
{
// Check password
nPerc = checkPassword(strPassword);
// Get controls
var ctlBar = document.getElementById(strFieldID + “_bar”);
var ctlText = document.getElementById(strFieldID + “_text”);
if (!ctlBar || !ctlText)
return;
// Set new width
var nRound = Math.round(nPerc * 100);
if (nRound < (strPassword.length * 5))
{
nRound += strPassword.length * 5;
}
if (nRound > 100)
nRound = 100;
ctlBar.style.width = nRound + “%”;
// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
ctlBar.style.backgroundColor = strColor;
ctlText.innerHTML = “” + strText + ““;
}
// Checks a string for a list of characters
function doesContain(strPassword, strCheck)
{
nCount = 0;
for (i = 0; i < strPassword.length; i++)
{
if (strCheck.indexOf(strPassword.charAt(i)) > -1)
{
nCount++;
}
}
return nCount;
}
[/ftf]
On the HTML side, I have setup a simple form to display the interaction the user will receive.
[ftf]
[/ftf]
The magic lies inside the event handler I spoke about above. The “onkeyup” event passes the current password, and the ID for this input item. The ID is used to reference the below div tags that show the strength meter and text. The ID allows for you to have more than one password meter per form, per page.
[ftf]
[/ftf]The algorithm can be enhanced if you wish to get more complicated with the strength checking. One can also adjust the colors and text for the various strength levels displayed to the user.[ftf]
// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
[/ftf]
Further features could be displaying when a user has not entered a valid password, for example not a long enough length.
Here is a demo of the above code, and download links so you can implement this into your sign up pages. Enjoy!
Right Click to Download:
Popularity: 100% [?]
73 Comments
Free Stock Icons for Your Next Application
Posted on June 26, 2007, under Development, Tools and Services, Web Design.
There are plenty of stock icons out there that one can buy, and for your purchase you will get a very large set of stock icons in many different sizes and formats. However, if you need to do icons on the cheap there are a good amount of free icon sets out there that you can use. Below are a couple of my favorite icon sets.
Popularity: 33% [?]
6 Comments
The Best WordPress Theme Resource Website
Posted on June 18, 2007, under Blogging, Tools and Services, Web Design, WordPress.
I have been asked many of times where the best place to find WordPress themes is. Over time the answer to this question has varied, but recently I have been hooked on once source: WP Themes Free. This site is very well designed and easy to navigate. It includes the standard features of a Theme community website, including: voting, new themes, popular themes, categories, thumbnail previews, testing themes, etc. However, the coolest feature that helps them stand apart from other WordPress theme websites is the individual statistics for each theme. Each theme page has neat statistical graphs for the number of times a theme was viewed, tested, and downloaded. This gives great feedback on how popular that theme is, and is a good way to feel out how many blogs might be using this theme.
Popularity: 13% [?]
No Comments
