Web Development
I've been involved in the world of web design and development for 8 years now, and still very much enjoy it. Below you will find tutorials, code snippets, ideas, links and anything else that is HTML, CSS, PHP, jQuery and everything in between.
Although not officially part of the HTML5 specification, Geolocation has become one of a number of new technologies that have recently come to light with advent of HTML5. Remy Sharp and Bruce Lawson also felt it important enough to write a whole chapter about in their brilliant book, Introducing HTML5.
The Geolocation API is used to find the location of your users. You've probably noticed a similar technology on many apps used on smartphones — checking into places through Facebook or Foursquare, for example. The same can be done with most modern web browsers. When used in conjunction with the Google Maps API, you can get some pretty cool results and add some great features to your website or web apps.
It would help if you had a basic understanding of Javascript, jQuery and PHP for this article, but I try to explain everything, so it isn’t essential.
I have always found that there has never been a really simple way of swapping one image for another when you rollover it. We could use CSS and replace our img tags with elements with background images, and use the :hover pseudo-class to switch them round. But then we lose the semantic value of the image — it wouldn't actually appear in our document's hypertext, couldn't be saved, hyperlinked, etc.
Therefore we generally always have to rely on Javascript for this. However, a lot of methods that implement this just seem messy — especially the awful Javascript code (MM_swapImage) that Adobe Dreamweaver generates. My proposed solution is to use jQuery, a clean Javascript code library, as well as using the relatively new HTML5 data-* attributes.
If you regularly post blog or news articles, and you have a Twitter account, you may tweet about each article once it's posted, but it would be much easier if a tweet was posted automatically once you post the article. Using the Twitter API with OAuth, and using shortened links using the bit.ly API, this can be achieved with PHP.
I'm sure many people have wanted to be able to customise the bullet icons used in a standard unordered list — I know I have in the past, and had to once again recently, so I've found a solution.
The default solid bullet point can be changed to a number of things using the CSS property list-style-type, such a a circle or square. But with this, you are limited to a few options, and you can't really customise the list style much; for example, if you change the colour of your list item text (by styling the <li>), the bullets inherit this colour too.
So I'm not actually going to write an article here, but instead link to two articles that a good friend of mine, @MrFoggEsq, has written over the last couple of months. I promised him I would re-post them on here once I got my website up and running.
They both make for very interesting reads, so I encourage you to give them a go.
If you have ever wanted to printed out the alphabet without having to manually write out 26 of the same link, button, etc. use this handy PHP script.
The company I work for have numerous Twitter accounts for the various parts of the business, and wanted these feeds to show on the respective websites. I had done something similar to this in the past but had faced problems then with Twitter's request limit (which I believe is around 150 requests an hour). This caused the feed to disappear until the limit reset. I decided to look into writing a reliable solution for this.