by on December 17th, 2010
We’re all familiar with sites or ads that somehow magically know where you are located, right down to the city. This is called GeoLocation. These applications use your IP address to figure out your location. In this video I’m going to show you how to perform this at a high-level. We will obtain a user’s IP address and find out what country they’re located in.
by on December 8th, 2010
Building a drop down menu for your site is pretty simple. Believe it or not doing so using only CSS is pretty easy as well. In this video tutorial I’ll walk you through building and styling a multi-leveled drop down menu using only HTML and CSS, absolutely no Javascript.
by on December 9th, 2009
The HTML standard allows for text input fields to have a parameter called value which constitutes the default value for that text input field. Using this parameter like so:
<input type="text" value="E-mail Address" />
creates this text field:
This has many uses. It can be used to give the user a hint at what they should write within the text field, pre-populate a user’s data so that they can save time, and much more.
In the case of hinting what should go in the text field, the user does have to delete the default text you’ve placed for them first and then proceed to writing their own.
There’s a technique that makes this process a bit more streamlined and behaves more intuitively. The way it works is the same as before, only that when the user selects the text input field to begin typing, the default text clears itself automatically without the user having to do so. See below for the same example from earlier with this new trick applied.
by on December 7th, 2009
There are times when you’ll want to purchase an item at a store but you’re not sure of the store’s exact location. Typically you’ll get online go to their website and visit the ‘Store Locations’ section. There they prompt for your zip code and they’re able to triangulate your coordinates and list all their closest locations within a given range of miles. This is real convenience if you run a store because you’re customers can save having to call and ask for locations nearby.
Services like Google Maps API, and Yahoo API, and others can provide you with this type of service for your site but they come with restrictions like limits on the number of daily queries, or even require purchase in the case of some pre-built applications. Here I’m going to teach you how to build your own version that is free and will allow your users to find nearby stores given their zip code and distance limit.
by on December 3rd, 2009
It’s become common that when you visit a website, the logo for the site or company is usually a link that directs you to the homepage of the website. This simple behavior can be easily achieved by merely wrapping your logo image tag with link anchor tags; like so:
<a href="index.htm"><img src="logo.jpg" /></a>
This is fine for most cases. It doesn’t require much extra markup. However it doesn’t speak much for your site as far as SEO is concerned. It’s not a secret that when search engines crawl your site’s content, they pay extra ‘attention’ to content nested within headings like H1 tags, this is especially true with Google.
Text marked as headings is given more emphasis because it’s likely to describe the content that follows, include keywords, and if the author wanted it to stand out to the reader then it must be important. Of course there are more reasons why H1 and other heading tags are given more weight by search engines compared to other content, but that’s a separate discussion all on its own.
by on December 2nd, 2009
One of the many things that makes Twitter a popular fast growing phenomena is its incredibly simple API. Its API makes it easy to manage and interact with your account away from the actual Twitter website.
Many CMS systems like WordPress, Drupal, etc. have plugins so that their users can just install a quick module and they’re on their way to easily updating their Twitter account from the CMS. Many people however have custom solutions in place and don’t have the luxury of a community backed plugin or module and must write their own from scratch.
Below is a small snippet that can be incorporated into any block of PHP code to send status updates to your Twitter account. This code can be placed inside a function or class.
by on November 25th, 2009
One of the most annoying things in my opinion when it comes to web design is when I’m creating a beautiful form, with nice images for buttons, clean text fields, but there is an eye sore of a file upload field. The reason this is an eyesore is because typically you can’t style file browse buttons and fields like you can with other buttons and text fields. They behave and style slightly different. After searching and fiddling for a while I was able to get something that works, like below for example.
There are several methods around this issue, many use javascript, some are CSS only, others use a combination of the two. The solution I used above is in pure in CSS. Actually that’s not entirely true. There is one ‘onChange‘ event on the file browse button, but it’s an extremely simple line of code, shouldn’t confuse anybody or make your code sloppy at all.
by on November 23rd, 2009
In order to install a virtual machine you’ll need a copy of vmWare Workstation to create an empty virtual
machine image. However I have a already set up two empty 20 GB virtual machine images, which will save you having to buy vmWare Workstation. One is ready to install a Windows OS onto it, the other is setup for a Linux OS. The “virtual” hard drive types and some other minor configuration differences are what distinguish the two, just in case you’re wondering.
by on November 21st, 2009
As commonly as it is used, the rounded corner technique for boxes and divs is still one of the most asked how-to questions when it comes to html and css. I’m going to share with you my favorite method which I use whenever I wish to achieve this effect.
Not much is needed for this effect to work. Simply use your favorite graphic editor (Photoshop, GIMP, etc) and create a rounded square or rectangle, like below:
by on November 18th, 2009
Xdebug is a slick little tool that lets you debug you PHP code more efficiently. It provides more detailed error messages, call stack information, and much more. Normally you would have to get some type of third party application to analize the data output by Xdebug, however Netbeans, a popular PHP IDE, has a plugin built right in so that you can debug you PHP projects real-time. Read More »