Making it work

It’s very easy to make this work. If you’re working within WordPress, you’ll need to access the footer.php file. In that file you need to write your copyright line, such as: ‘Copyright © 2011 Your blog’. But instead of the just typing the year in we are going to replace that with a little php code. This is what the final result looks like:

It’s as easy as that. Now you never have to change one line of copyright code, ever.

Last but not least…

I want to wish you all a Merry Christmas and a Happy New Year! I hope you will have a great time with your family and friends.

 
If you have any ideas or improvements about this subject, leave a comment!

Do I really need an application that can type for me?

To me, the answer is yes. I use it quite a lot, when I’m coding websites. Before I used TextExpander I just copied or typed the standard HTML document, but that took time. Now it is typed for me. The only thing I have to do is typing an abbreviation. It’s also possible to click on a snippet from your menu bar.
You can decide for yourself if you need such an application. TextExpander costs $35, but you can download a free trial to test it out. There are also some free alternatives like Presto, yType or Kissphrase. If you’re running on a Windows system maybe PhraseExpress, Texter (both free) or Breevy ($35) is something for you.

TextExpander’s userinterface

TextExpander is very easy to use. In the application you can manage your snippets, group them in folders, set which abbreviation to type for the snippet etc.

You can also search for snippets and select in which applications the snippet must (or must not) expand. The preferences window is very extensive and has got a lot of options.

It is also possible to set a variable that you can define when expanding the snippet. So, for example, when you want to set the color of a gradient you can use the “fill in” command. In the snippet within TextExpander you have to add the following bit of code: %fill:name-of-variable%, in the following picture I choose “fallback”, “from” and “to” as variables.

As a little bonus feature in TextExpander, you can view statistics about how many snippets you have expanded and how many hours it saved you.

As you can see, I haven’t expanded that many snippets, but that’s because I was experiencing a bug a while ago that was deleting all of my snippets every time I started up my Mac. Luckily, that is fixed right now, so I started adding my old snippets yesterday. Tell me what you think of TextExpander in the comments. Also if you have other text expanding applications that you want to share with the world: tell it in the comments!

The books I’ve read to learn web development

This is a list of books I’ve read. Not all of them, but the ones that I think were really helpful.

1. The Web Designer’s Idea Book: The Ultimate Guide To Themes, Trends & Styles In Website Design
Buy it on Amazon.

2. MySQL Crash Course
Buy it on Amazon.

3. CSS Mastery
Visit website.
Buy it on Amazon.

4. PHP Cookbook
Buy it on their website.
Buy it on Amazon.

5. The A-Book-Apart book series

1. HTML5 For Web Designers. Buy it on their website.
2. CSS3 For Web Designers. Buy it on their website.
3. The Elements Of Content Strategy. Buy it on their website.
4. Responsive Web Design. Buy it on their website.
5. Designing for Emotion. Buy it on their website.
6. Mobile First. Buy it on their website.
7. On Web Typography (coming in 2012). Visit website.
Enjoy reading! It really improves your skills and thoughts on web development.

First things first

First of all, I didn’t make this buttons of a PSD file. I just made them by coding them. Also, this post actually shouldn’t be in the ‘Quick Tips’ category, but since this also isn’t a ‘Manual’ or a ‘Workflow’ article I decided to go with the ‘Quick Tips’ category.

The buttons

I made the buttons in the colors grey, yellow, orange, red, brown, black, blue, purple and green. When you hover over a button you notice a subtle change in shadow. Also I used textshadow for the text. I applied a minimum width of 75 pixels to the buttons, so when a very tiny bit of text is on the button, the button still looks awesome! The buttons look like this:

Demo and download

You can take a look at the demo if you want. In the demo I removed the biggest part of the margin to make sure the buttons will fit on your screen. Also you can download the buttons, the HTML and CSS are combined in just one HTML file, and that file is zipped. Have fun with the buttons and tell me what you think of them in the comments!

Option 1: Screenshots from your website

If you only need some screenshots from your website displayed in Internet Explorer (and other browsers) then you can best use one of the following websites that provide screenshots of your website.

• Browsershots, this website is great for screenshots of a long list of browsers on different operating systems. It works very simple, just enter your URL, select the operating systems and browsers you want, and click the Send button. The only con is that it can take up to an hour before all your screenshots are taken and send to your computer.
• Adobe Browserlab, this one is more consistent. After logging in with your Adobe ID (or after registering, if you haven’t already) you can view your website in approximately 10 browsers. Compared to browsershots there aren’t many browsers. But your website is loaded in a few seconds, and the screenshots are more consistent, as I said before.

If you would ask me, I would stick with Adobe Browserlab, because it’s quick, and consistent. But what if you have like moving elements on your website or some javascript elements you definitely have to test in IE. Then you’re not satisfied with only a few screenshots. As far as I know there are two options you can choose from to achieve this. Let’s take a look at them.

Option 2: Testing your website in IE on your Mac

But what if you really need to test your website in Internet Explorer, because there are moving elements for example. Or you want to test if some transitions are working. What I suggest you to do then is download an application that can handle a virtual machine. Based on the budget you have you can choose VMWare Fusion 4, which costs fifty bucks. There is also a good free program called VirtualBox. Both work on Mac and on Windows as well. If you have installed that you can install Windows on it (of course you need to buy that first). And finally you have two options for testing in Internet Explorer. Either you can install IE Collection, with that application you can run practically all versions of Internet Explorer, from version 1 to 9, but I suggest you to only install 6 and up, since versions below 6 are almost never used anymore.

Another option would be installing an application called IETester, with this application you could simply run versions of Internet Explorer side by side. Versions 5.5 and up are supported. I go with this application, because then I wouldn’t have 4 versions of IE on my virtual machine.

That’s it

Hopefully I helped you out if you needed Internet Explorer on your Mac. Thanks for reading and if you have any questions or anything else, tell me in the comments.

A quick look at the interface

jPlayer looks great. The interface is totally customizable to suit your needs. It’s very easy to get started, and the package is only 8 KB (the minified version). Let’s look at some pictures:

This is the audio player. As I said before, it’s totally customizable, so you can edit it how you want it.

This is how the audio playlist looks. Pretty awesome, eh?

This is the video player, which also looks kinda neat.

And finally, the video player with a playlist.

The installation of jPlayer

Follow the steps below to install your copy of jPlayer:

1. Download the files from the jPlayer website.
2. Install the files on your webhost. Make sure your .swf file is in a folder called ‘js’, that folder must be in the same directory as the page where you want your media on is.
3. Add the following code to the head of the webpage you want to display your media on:

1. Then, the following code is used to set up your media:

1. And finally, this code is used to display the actual player itself:

More information on installing this plugin can be found on the jPlayer Developer Guide.

Browserconsistency and media support

According to the jPlayer website the player will work on Google Chrome, Mozilla Firefox, Apple Safari, Opera and Internet Explorer 6 and up. It will also work on mobile Safari (iPhone, iPad and iPod), Android 2.3 and Blackberry Playbook. That is pretty much covering all browsers I know, so I won’t think there are any inconsistencies. The media types that you can use with HTML5 are MP3, MP4 (AAC or H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8) or wav. With Flash you can use MP3, MP4 (AAC or H.264) or FLV.

The MP3-jPlayer WordPress plugin

Wouldn’t it be much easier to have use a WordPress plugin for this (assuming your website is running on WordPress)? If you would like that, there actually is one. And it’s called the MP3-jPlayer. In the control panel of the plugin you could style your media player and you can add the player to your website using shortcodes, widgets or template tags. You can look at the demo if you want.
 
That was it for today, do you like this plugin or not? Or do you use your own awesome plugin for displaying media? Tell me in the comments.

1. 365psd.com

On 365psd.com you get a new .psd file everyday! There are lots of useful psd’s like iPhones, buttons, sliders, all kinds of stuff!

2. iconfinder.com

With iconfinder you could search for icons and icon sets. The site claims to have more than 150,000 icons and more than 800 icon sets. Remember to always check if you can use the icons for your website. Some icons are for the public domain, then you may use them. But others are for example for personal use, you may not use them on a website.

3. placehold.it

On placehold.it you can generate dummy images for your website, if it’s in developing state. Of course you can choose a width and height, but you can also choose which format the file should be. For example .png or .jpg. And you can set the text that must be in the image, as well as the color if the text. So it’s really useful!

4. premiumpixels.com

On premiumpixels.com you can find .psd files, just like 365psd.com. On the website are some really good graphics, so I recommend you to check it out yourself!

5. subtlepatterns.com

Subtlepatterns.com is a really cool website that hasn’t been around for so long. On this moment it has 74 ‘high quality design patterns’. They are indeed high quality. You can use the patterns in your website, just by downloading one of the patterns.

 
That were my main five graphic resources. It’s really handy to bookmark them, so you could get to them any minute you want. If you also know some great graphic resources, leave them in the comments!

The things that are important to look for

1. The amount of storage. This is one of the most important ones. Without enough storage, you can’s store your website! So make sure there is enough. There are some hosts that offer unlimited storage. This can be misleading, make sure you read the Terms of Service to make sure everything is OK.
2. The amount of bandwidth. Also bandwidth is very important. Bandwidth is the amount of data people could upload and download to/from your website. Make sure there is enough bandwidth, or else your website can’t be visited by a lot of people. Also bandwidth can be unlimited.
3. Support for databases. If your website does not support databases, you can’t install stuff like WordPress, Joomla or other CMS’es. Luckily, most hosts do have support for databases. But be certain there is support.
4. Amount of domains and subdomains. If you want to have more than one website, it’s not very handy if you have to make a hosting account for each website you make. So look if your webhost allows you to host multiple domains. Also, if Te want to have subdomains, like videos.example.com or images.example.com, you have to check if those are available.
5. Technical Support. If you have problems while installing your webhost, you’d like to have some information. Check if your webhost happens to have Technical Support, for example if you could call or email them.
6. Amount of e-mail accounts. Check if your host supports e-mail accounts and how many of them. It’s also important to check how you can receive your e-mail. For example, maybe they have a web mail. Maybe IMAP, or only POP mail.
7. Support for .htaccess files. These files are used to control a lot on your website. So make sure you can us them. Also WordPress makes use of the .htaccess files.
8. Back-ups of your website. It’s very handy if your host does automated back-ups for you, this way you can reverse everything you did on your website. This is not the most important thing to look for though, because you can make the back-ups yourself.
9. Up-time of your host. Last but not least; the up-time. Make sure your webhost has a great up-time, this way your website will be up for your visitors when they need it!

Thanks for reading and tell me what you think in the comments!

Cheatsheet nr 1: The basic WordPress help sheet

This one comes from WPCandy.com. As the titles mentions, the most basic WordPress stuff is on there, click on the image to go to the WPCandy website to download it. You can also find alternate languages there!

Cheatsheet nr 2: WordPress cheat sheet

The second one comes from ekinertac’s blog. There is info about the loop, the includes the template tags, the navigation, and more! Click on the image to find out more and to download the pdf.

Cheatsheet nr 3: WordPress cheatsheet

The last cheatsheet is made by TechKing. It’s a very long one (literally). The image below is just a very small portion of the actual cheatsheet. Click on the image to go to the page where you can download it.

That’s it for today. Tell me what you think in the comments!