Element Design » Quick Tips

Debugging Javascript using the Browser’s Console

chad — Mon, 20 Feb 2012 19:59:10 +0000

Avoid using alert() to debug your Javascript, and instead use the browser’s built in console. It is an unobtrusive way to view the status of variables and events throughout your code. For example:

console.log("Hello!");

Please visit “How to debug Javascript” for more information

Generate Random 10 Digit Number in PHP

chad — Thu, 23 Jun 2011 13:43:13 +0000

The application I’m developing requires a random 10 digit number as a bar code on season pass. A simple way to create a unique number is to use the following code:

$random = substr(number_format(time() * rand(),0,'',''),0,10);

Here’s whats happening with the code:

The outer portion “substr” is used to chop down the random number we create to 10 characters. You will notice the number 10 at the end of the snippet, which can be changed to any number you want.

The “number_format” function helps get rid of the scientific notation that will arise from generating the random number. In the middle, “time()” and “rand()” are multiplied. Time() is the number of seconds from January 1 1970, and rand() is a uniquely generated number through PHP.

Always remember that generating unique numbers is not fool proof. If your application requires each number to be unique, perform a collision check in the database before saving.

jQuery Performance and Coding Tips

chad — Thu, 18 Nov 2010 20:00:36 +0000

This is a great article that showcases 50 jQuery Snippets to help you program scripts for your website. It covers basic jQuery functionality and methods, all the way to how to fine-tune your code for increasing website performance.

50 jQuery Snippets That Will Help You Become A Better JavaScript Developer

Convert a PNG to ICO (favicon)

chad — Mon, 15 Nov 2010 15:04:36 +0000

A great tool for easily creating high quality favicon’s is ConvertICO.com. All you have to do is create a transparent PNG of your favicon (which is always 16 pixels by 16 pixels), then run it through the ConvertICO tool. Once you have the .ico version of your PNG, upload it to your website.

On your website, add the following code within the head tag:

For the change to take effect, you may need to hard-refresh your browser (Ctrl+F5 on PC’s). This clears the cache, then the new favicon should display!

Note: The “favicon” (or shortcut icon) is a small, 16×16 graphic that displays on the top of all modern browsers.

Facebook Page Requires Login

chad — Fri, 05 Nov 2010 18:13:52 +0000

If your company’s Facebook page is requiring users to login when viewing it, the issue is with the “Age Restriction” setting. To prevent kids from viewing age inappropriate content in groups, Facebook checks their profile whenever the “Age Restriction” setting is anything other than “Anyone”.

To fix this, go into the “Edit” area of your Facebook page. In there, click “Edit” underneath “Settings”, then look for the “Age Restriction” drop down. Set it to “Anyone”, and press Save!

Update 7/11/11: User “Chris” posted another solution in the comments:

My facebook page was requiring a login as well. The issue with my page was it had a county restriction of “United States” , look just above the age restriction box and see if any countries are listed. If so, remove them and save. You should be good to go!

Save Videos from Youtube

chad — Wed, 13 Oct 2010 13:30:02 +0000

Looking for an easy way to save your favorite videos from Youtube? Check out www.keepvid.com. Simply paste in the URL of the video you want, and it will generate links for you to download.

Best way to hide text: Go up

chad — Mon, 26 Apr 2010 13:37:28 +0000

With a larger monitor I’ve noticed many websites hiding text by sending it to the left or right. This works great on smaller monitors, but on higher resolution you all of a sudden see that text way off the side.

Simply send the text up instead. No matter how high of a screen resolution your user has, they will never be able to scroll above the top of your website.

.hideme {
   position:absolute;
   top:-1000;
}

The Square HTML Special Character

chad — Wed, 10 Mar 2010 15:23:17 +0000

Displaying a simple square in HTML can be done by using the code:

☐

Example: ☐

Pre-Selecting Form Elements

chad — Mon, 28 Dec 2009 18:34:19 +0000

Checkboxes:

Radio Buttons

Dropdowns (

Image ALT Tags

chad — Thu, 03 Dec 2009 16:30:52 +0000

Easily avoid one of the most common mistakes in website accessibilty and SEO optimization by including an ALT tag on all images.

Read more about ALT tags.