Category Archives: Web Design

100 Breathtaking Photoshop Tutorials (1st Part)

100-photoshop-tutorials-header

This is the first part of my 100 favorite Photoshop tutorials on the Internet. These tutorials are of interest for web designer, graphics designers,  beginners  and Photoshop freaks.

In these tutorials you can learn a lot about different techniques and styles. Amazing things you can do with Photoshop, try it and love it.

Tutorials 1 – 10:

1. Photorealistic Burning Text
fire-tutorial

2. Spectacular Grass Text Effect
earth-tutorial

3. Neon Effect
neon-tutorial

4. Speedy Shatter Effect
scatter-tutorial

5. Logo On Fire
fire-logo-tutorial

6. 3D Pixel Stretch
3d-pixel-strech-tutorial

7. Waterbody
fluid-tutorial

8. Vector Composite Effect from a Photo
vector-tutorial

9. Energy Spheres
energy-spheres-tutorial

10. Eery Eye
eery-eye-tutorial


Make sure to check back for the next episode.

Let’s make the Web faster – Google’s new Code Section “Speed”

google-speed-code-header

I can still remember the first days of the web when I we were using Mosaic and later Netscape as browsers. Although websites consisted mostly of simple  text and a sometimes even some images, the speed was terrible. Sometimes it took minutes to load entire pages. Nowadays we have tons of images on every single page plus animations, flash and other media types. The web got way faster in the last 10 years. Big companies started to invest money into infrastructure and ISPs evolved with their services.

Let’s take Google as an example. They can provide search results within a fraction of a second though there are quadrillions of data to be parsed an processed. Google can do that trick only because of their enormous server farms and highly streamlined websites. But Google wants to go to the next level: surfing the web should be as instantaneous as “flipping through the pages of a glossy magazine”.

Let’s make the Web faster

Google introduced a new Code section called Speed. You can find there many useful articles on how to optimize the performance of your website and web server. And if you have some ideas about improving the speed of the web you can post it there too. It’s definitely a good resource for beginners and professionals.

Here is a short introduction video made by some guys at Google:

[youtube]IWWBnJEsUtU[/youtube]


Reloading an IFrame via Ajax Request in Firefox and IE

iframe-ajax-reload-header

Recently I was working on a web project where I needed to show a preview window which was basically an IFrame. As the whole page navigation was based on Ajax calls I was looking for a bulletproof method for reloading an IFrame.

The first solution (only Firefox)

IFrame code:

1
<iframe id="preview_content" src="preview.php"></iframe>

Ajax code:

1
2
var iframe = document.getElementById("preview_content");
iframe.contentDocument.location.reload(true);

Well, this solution was working quite nice with Firefox but IE wouldn’t reload the page at all.


The proper solution

Ajax code:

1
2
var iframe = document.getElementById("preview_content");
iframe.src = "preview.php?x="+Math.round(Math.random());

The additional parameter x (a random number) will cause IE to reload the IFrame properly without using the cache.


Top 10 Firefox plugins for web developers & designers

firefox-plugins-header

Firefox is my favorite browser for creating and testing website design and functionality. On the one hand you have big share of visitors using Firefox (Wiki: Usage share of web browser)  and a rapidly growing user base. The reasons for the success of Firefox are speed, stability and a strong open source community behind it.

And then you have IMHO the most important part: an endless range of great plugins

Although there exist hundreds of absolutely great plugins I’d like to share with you today only these plugins that helped me best while working on web projects in the past:

1. Web Developer

web-developerA must-have plugin for any web developer. It will add a new toolbar to Firefox with a lot of great tools for displaying page information, request headers, CSS element information, disabling/enabling Javascript, Cookies, Images and CSS, validation and displaying Javascript generated content. I just named some of the features but there is a lot more inside this tool. So make sure to have it.


2. SearchStatus

seachstatusThis one is great helper for SEO work. It includes a better PageRank information (forget the original – problems with cached values), Alexa Rank and the essential NoFollow link highlighter.


3. HTML Validator

html-validatorI would say 20% of SEO work is On-Site optimization. This tool will help you in locating every validation problem of your HTML code. And I guess most of you will agree: Google loves valid content.


4. Javascript Debugger

javascript-debuggerWorking with Javascript can get very tricky, especially when you are loading dynamic content via Ajax requests. Just looking into the code won’t help you a lot. The Javascript Debugger allows you to set breakpoints in your script and inspect variables and objects.


5. Live Http Headers

live-http-headersAs the name already says this plugin will show you all Http headers while browsing a website. Sometimes a valuable source to understand the redirection mechanism of a website and how data is sent across.


6. Leet Key

leet-keyA very useful tool for quick transforming encoded data. Sometimes when I need to check if a Base64 encoded parameter was transferred correctly I can decode it with this plugin to plain text. Apart of the transforming for Base64, Bin, Hex, Morse and others, there is even a functionality for encrypted contents in AES and DES.


7. JS View

js-viewWhen you want to have a quick look on a JS or CSS file from some other website you need to view the page source and copy the file path. But it can be so much simpler. JS View provides you any given JS/CSS file of a website with the easiness of a mouse click.


8. Duplicate Tab

duplicate-tabSometimes you need the currently open page in a second tab. But if it’s javascript generated content you cannot just copy and paste the URL in another tab. But Duplicate Tab can.


9. Add N Edit Cookies

add-n-edit-cookiesThis tool allows you to manipulate and add cookies and can help you to test the security of your website.


10. Clear Cache

clear-cacheVery simple and useful. While you are changing elements on your website you want to make sure to see the changes and not a cached version. Things like that can end up in frustration.


As mentioned before, these plugins helped me a lot. I know there are a lot more useful plugins out there, so feel free to share your list with us.


Update 2009-06-10:

Firebug

firebugAnother essential tool for web developers that allows you live editing of CSS, HTML and JS on any website.