Web Development Blog

OK.. so this is something I need all the time and I thought that it might be cool to have it in a place where I can access it quickly, but also have the ability to update it as I see fit…

So here we go… my reference page for special HTML characters.

I hope you find it useful too

Special HTML Characters

OK, as from this point I’m calling it out of fashion to use “SEO” as a buzz-word. (I know it should have been called long ago, but hey, we all got distracted by “Web 2.0″) So can we please stop throwing it around like its.. well.. going out of fashion.

The reason that I’m bringing this up is because this is something I see quite often with clients who don’t have a clue about the Internet and doesn’t like new design trends and as a result keep the companies they represent in the dark ages.

Wait, let me give you some background information about myself. I started out in the industry as a SEO consultant for a online casino company. So for the 1st 6 months of my web career, I did everything in my power to rank high, and let me tell you the main thing I’ve learned:

Good content structured in a proper HTML document (which is W3C compliant) will do wonders in search engines.

We easily forget that even though we would like our sites to rank well in search engines, the visitors to our site is real people like you and me, and the chance of them returning is a lot better if the site contains good copy that wasn’t raped with bold and italics and id the site was esthetically pleasing… and this is something that gets dumped daily as a result of “SEO”.

I want to give you real world examples.. but I like my job I’m sure that if you have been in this industry for longer than a year you will have some examples of your own…

Unless you have a photographic memory (and I don’t believe any person with normal brain function does), you probably have a hard time remembering all the functions, options, tags, etc. that you need in everyday development.

The fact that documentation can be a total pain in the ass most of the times makes cheat sheets a favorite of mine.

You can print them out and paste them on the wall of your cubicle or office, or just keep them handy in your bookmarks for quick reference.

Here is a list of over thirty cheat sheets that you as a developer might find useful.

Web Development Cheat Sheets:

- JavaScript
- CSS
- CSS
- CSS
- Colour Hex Codes
- HTML
- HTML Entities
- XHTML / HTML
- XHTML

Databases / SQL Cheat Sheets:

- MySQL
- MySQL
- Oracle
- SQL
- Sybase
- PostgreSQL

Language Cheat Sheets:

- ColdFusion
- PHP
- Ruby
- Regular Expressions
- JSP
- Java 1.5
- Python

Version Control Cheat Sheets:

- CVS
- Subversion
- Subversion

Other:

- Google
- Windows
- Unix
- Unix
- Unix
- Vi
- Vim
- mod_rewrite
- ASCII Character Codes
- htaccess
- Debian
- Perl
- Perl

Do you have one in your bookmarks that’s not on the list? Feel free to post it under comments.

A question I get asked a lot by die IM posse is how to “get that little icon in the tab on Firefox” so after giving these instructions quite few times I have decided to put a post on here so that I can just direct the next person directly to a complete guide to installing a favicon (Yep, that’s what the little icon is called )

So, firstly we have to create this icon that we want to use, and the best way to do this would be with a graphical application like Photoshop or Paint Shop Pro and create an image with the dimension 32px x 32px. You can also have transparent parts in your favicon, just remember to save it in PNG8 format for that.

OK, so now you got your creative on and you have a favicon that you absolutely love! Now you just need to get it to the .ico format and for that I am going to direct you to a online converter at http://tools.dynamicdrive.com/favicon/

On there you basically browse for the file, say “convert” and tada! You have a favicon.ico file and even ‘n preview of what it will look like.

All that is left to do is to ad the file to your website and that is also a pretty easy thing to do. Firstly upload the favicon.ico file into your root folder of your site. (This is the same place where you can find you index file)

All you need to do now is to enter the following line into the head section of your site:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

There you go, that was pretty easy hey.. Your site can now boast with his/her own little piece of site bling!

When I started 3 years ago with HTML I never thought that I will any good at it, it was simply a job at that stage. My only “live” site was somewhere on Geocities and was a fan site for the band Slipknot. My code was a mess and only worked in Internet Explorer and looked like shit in Netscape. (Yeah people actually used to use Netscape)

A lot has changed from then, not just in my camp, but also on the rest of the Internet. Coding standards is more important these days as it’s more efficient and more compatible with the FOUR main browsers thats on the market.

Good reference sites, that I could use on a daily basis, was a must! Here are the main 5 sites that separate the men from the boys:

Web Design From Scratch
This site is a great starting block! If you are new to HTML and CSS and you want to learn quickly and learning the correct theory behind things, this is the site to do it on.

Meyerweb CSS2 References
I still use this site whenever I get stuck, Its easily the most comprehensive online reference for CSS coding that I know of!

Listamatic
I can almost guarantee that if you don’t use styled lists yet you will definitely start using it after going through the Listamatic site. Lists are great for accessibility

DHTMLSite
Every once in a while you will need a little trick to do something out of the ordinary or to please that one designer at work’s creative impulse. This site is almost like a library at this stage for code snippets and gimmicks you can use to do just that.

Smashing Magazine
When you work on deadline after deadline and you just code non-stop it’s easy to get tunnel vision, this site is nice to keep you up to date with daily progressions in the field of HTML/CSS/JS

I would love to see your sites in comments section!