Web Development: Firefox 16 and the developer toolbar

Tweet

A few days ago Mozilla has released the new Firefox 16.
There are a few interesting things we should consider in this new release:
1) the incremental garbage collection which improves the browser overall performance;
2) web app support;
3) better CSS3 animations;
4) reader mode for Android devices improves the reading experience;
5) VoiceOver, a text reader for OSX systems;
6) the new developer toolbar.

The last is what we are talking about here: the developer toolbar. Let's see what it can do.

Web Development: Adobe Brackets

Tweet

As I told you in my last post, I'm actually away from my beloved desk at work. I'm on vacation for a while, but to keep your attention high, here are some interesting news for those of us who like to explore new way of writing code.
We are talking about Brackets, a new code editor by Adobe. How is Brackets different from other editors? Well... as a start:

"[...] Brackets [is] a code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript."

Not bad eh?

Interested in more info?
Well, just follow the above link and read the "read me" section... There, you will find everything you need to know.
If you have already used Brackets, just use the comments section below to share your experience...

Web Design: the good use of white space

Tweet

White space in web design is, in my opinion very important. The correct use of it can really make a difference.
In this short article, I would like to share my ideas on the good use of white space in web design. What I write here is my personal opinion, and it comes from years of web design. I may have read the following things somewhere in the past, but I truly don't remember where and when. So, if you find something that you have already read somewhere, please remember the above.
Now, follow me, and don't forget to share your thoughts.

iPhone: web design and web development apps

Tweet

Do you like your iPhone so much that you take it everywhere and play with it every spare moment? Are you a web designer and/or developer? Well, here's a list of interesting iPhone apps that you should have.

Enjoy!

Web Design: a collection of progress bars

Tweet

In the past I've published a post about developing a progress bar/indicator for ASP pages. In that article we used a small rounded gif to make the user aware of the fact that something is going on and information is gathered.
Today, for your joy, I want to share my collection of animated gifs that can be used as progress bar. Some are simple, some are a little bit bizarre and some are a little bit intrusive.
You can choose the one you prefer, and use it on your pages. I believe they all are copyright free, but if you recognized your copyrighted work here, just drop a line and I will give credit to you or remove it, if you prefer.

Here we go... the great progress bar parade! (this post is some kind of a joke or not?)

Web Development: compress your code

Tweet

When developing web documents, we should always take a close look at the size of the resulting code. While it is very important to keep things minimised in terms of file size, sometimes it's not easy just applying the usual rules, tips and tricks.
It is well known that, for example, it is a good habit to compress jpgs, and images and photos in general. At the same time, it is advisable to use minimised JavaScript libraries, such as reduced versions of jQuery or jQuery tools and plugins.

But sometimes, following all those simple rules could be not enough.
In those cases I've found an online tool which might be used to compress and minimise our code: HTML compressor.

Web Development: optimise JavaScript and CSS

Tweet

Recently I've been asked to optimise an already developed web site. It's always a bit difficult to look into code written by someone else, and in this case it has been a pain in the neck: no comments, no code layout, strange and obscure variable names and so on. One thing however has caught my eye: external JavaScript files and CSS stylesheets were scattered all around, making the loading of the web pages not fluid.

I would like to share with you some considerations that we all should be very aware when we develop web pages. We will talk about external JavaScript files and CSS stylesheets, how to optimise them and how to reduce RTT (round-trip time).

Web Design: free images deposits

Tweet

When designing a new web site, images, icons and photos are important. A general theme for the site is strongly emphasised by graphic elements. Sometimes we can use original images, sometimes we need to search the net, but being sure that there's not copyright infringements when we use them on our web site (especially if it's a commercial one).
There are free images deposits that can be browsed and, provided we check the eventual license agreement, those pictures are freely usable in our own projects.
Here are some useful links to those kind of repositories:

• Flickr: Creative Commons
• MorgueFile: free photos
• FreePhotosBank
• FreeMediaGoo (audio, images, textures and flash)
• FreeDigitalPhotos
• InterfaceLift Icons

I hope the above list might be of some use for you.
In the meantime, happy coding!

Web Development: handheld device emulators

Tweet

In the past months I've made some researches about web development and design for handheld devices. The main problem, as we all know, is that we should have most of the devices sold, just to test how our web sites or applications are displayed on them. Does our newly created web site look just right on an iPad or a Galaxy Tab?

To be sure we are doing things properly, we need to test the web creation, and emulators can be of some help. In this post I gathered all the relevant tools, as a repository for future reference.

Web Design: develop an effective navigation menu

Tweet

When developing a web site, one thing we should concentrate on is the navigation menu. Considering that probably a menu is the most important part of our web development process, I would like to share some ideas about it, things to keep in mind while we start thinking about an effective navigation menu.

What kind of menu we need

The first thing we should consider - while our project is still a blank and white piece of paper - is: what kind of menu we really need? It seems a dumb question, but we need to focus on what is the true purpose of our - yet to be born - navigation menu.
Knowing what is the general purpose of our web site, lets us concentrate on the structure and content of the menu. For example: if our site is a marketplace, we need to focus on selling products, while if our site is just displaying our production range, we need to focus on products marketing.
The concept is quite clear if we compare two well-known web sites: Apple and Amazon.

Web Development: what I think about progressive enhancement

Tweet

Since the beginning of web development, programmers have had the duty to guarantee a correct and possibly full user experience to all the web site visitors, regardless the browser that they use.
If we stop for a second and think about the above statement, we can probably understand how that is a very big problem. Allow me a strange similarity: it is as if we need to design a new shoe that fits all sizes. It surely can be done. It involves a lot of work and it won't probably satisfy all the users.

Two methods to solve the problem
Web developers normally use two different approaches in order to face the issue: the first and older one is graceful degradation. A bit newer method is called progressive enhancement.
The two methods are easily confused, but they have a big difference: graceful degradation focuses on browsers capability, while progressive enhancement focuses on content.

Web Design: what to consider when re-designing a web site

Tweet

I've been recently asked to re-design a web site. I had to meet some people and talk about it. The company wanted a completely new web site, while the engine behind (SQL database) should have stayed.
As you may understand, that is a completely different situation compared to the development of a new web site. There are some things to be considered when approaching a totally new site that do not apply in a re-design. I'm talking about technical things like domain management, web site hosting and platform used; or marketing stuff like commercial targets, brand awareness program and other boring things.
In our case the story is different: many of the above questions have been already asked and settled. For this reason, I have created a list of matters that needed to be discussed and that I think might be useful to all those developers in the same situation.

So, here is my list of practical things to consider (and ask) when re-designing a web site.

Compatibility: do we need to consider IE7 support?

Tweet

I recently had a interesting conversation with a friend of mine. He develops web sites and we were talking about compatibility. Or, to better put it, how many situations a developer should consider when testing a new site. We started counting browser versions, and then we considered all the possible screen resolutions. After that, we added tablets and smartphones with related browser mobile versions.
We ended up with a long list and we were quite bewildered. If you stop for a moment and think about it, developing a new site, ensuring full compatibility, is a complete and utter madness.
I tried to shorten the long list of possible situation and the first thing that came to my mind was Internet Explorer, which, we know, is the most problematic browser. My friend said that we could remove IE7 from the list. I was not so sure. Then we made a bet: let's see how many 'major' web site do support IE7.

It has been a dirty job, but someone had to do it. And I did.
I tested a lot of corporate web sites using Internet Explorer 7 in a Windows Xp environment with a 1280x1024 screen resolution. However I would like to show only the following sites, that might be worth mentioning:

1. BBC;
2. Facebook;
3. Google;
4. HP;
5. Sony;
6. Nokia;
7. Twitter.

Would you like to see the results? Ok! Follow me.

ASP: why am I still using it?

Tweet

I have recently debated with a friend of mine about my stubborn belief in classic ASP. If you are reading The Web Thought, you already know that I mainly program in classic ASP, but you might not know why I still use it, and probably will go on using it.
Here I'll explain my ideas.

A little bit of history

First of all I would like to be clear on one thing: ASP is not a programming language, strictly speaking, but a scripting engine. VBScript is the main language used in ASP pages. In fact, my first steps into programming were made trying to understand VBA (Visual Basic for Applications). So, please be aware that in this article I will refer to ASP as a general term, not strictly to the scripting engine.

Web Design: what gurus think and what I think about it

Tweet

I've been reading a lot lately. I actually follow many blogs and sites where skilled writers share their ideas about web design and web development. Those writers usually give advices on how to think the web and specifically how to create sites with the best user experience.
The language used is a complete melting pot of technicalities, often difficult to follow, as if the writers were explaining their ideas to a very restricted circle of scholars. New terms (neologisms) are springing everywhere, sometimes creating confusion. A cryptic way of spreading new ideas, in my opinion.

Lately I've been thinking a lot about that, and I would like to humbly share my thoughts. I'm not a guru and, even though I'm a little bit experienced, I've always been outside the chorus. So here - if you are interested - I begin.

Web Development: The Cult of Done Manifesto

Tweet

You may already know something about The Cult of Done Manifesto. It was conceived in 2009 by two smart people, Bre Pettis and Kio Stark, and published in Bre Blog. When I first knew about it, I found it enlighting for every day tasks, from big working projects to small daily actions. Because of that, I think that it can be successfully applied  to Web Development and generally to programming.

I've recently read a message by Wil Wheaton on Google+, that reminded me about it, thus I thought I should share it with you. Try to apply your daily programming routine to it and see what comes out.

The Cult of Done Manifesto

1. There are three states of being. Not knowing, action and completion.
2. Accept that everything is a draft. It helps to get it done.
3. There is no editing stage.
4. Pretending you know what you're doing is almost the same as knowing what you are doing, so just accept that you know what you're doing even if you don't and do it.
5. Banish procrastination. If you wait more than a week to get an idea done, abandon it.
6. The point of being done is not to finish but to get other things done.
7. Once you're done you can throw it away.
8. Laugh at perfection. It's boring and keeps you from being done.
9. People without dirty hands are wrong. Doing something makes you right.
10. Failure counts as done. So do mistakes.
11. Destruction is a variant of done.
12. If you have an idea and publish it on the internet, that counts as a ghost of done.
13. Done is the engine of more.

Web Development: how to test IE compatibility

Tweet

Lately, we have seen an increasing interest in HTML5 and CSS3. The (not really recent) introduction of new features has been cautiously followed by web developers, and I don't know what's your feeling, however my impression is that the path to the new web is just full of pitfalls.

I recently had to develop a new web site and, because it was a very basic one, I decided to experiment a bit. I must say it has been quite satisfactory (coding-wise), however I had to spend quite some time to test it. I wanted to have almost a full compatibility and - as we have seen lately - the browser that gave me most troubles has been Internet Explorer.

In order to test a web site for compatibility issues, I usually publish it in a not-known sub-dir and then display it with different browsers. I test it with Safari, Opera, FireFox, Chrome and Internet Explorer. In addition, I use services like Browsershots and IE NetRenderer. However, they usually take a lot of time (especially the first) and because we know that time is money, I recently decided to look for something else.

Web site statistics: why are they important?

Tweet

I have recently published two articles in which we saw how to benefit from Google Analytics and which browser is the most popular, globally. The articles seem unrelated, but they are not. When we manage a web sites, statistics are fundamental and give us the right point of view in planning future developments. What I'm saying is that before changing something in our web site, or - more importantly - when we plan to change the whole web site, we do need to look closely at web statistics in order to plan our future work efficiently and effectively.

Recently, I have published other articles incidentally related to this one. For instance, I've been talking about the new mobile generation and handheld devices used to surf the net. That new way of surfing the web, is changing the way we develop web sites. There's - apparently -  the need to create handheld devices compatible designs, and target screen resolution becomes a nightmare for all of us.

That is all true, however I would like you to focus for a moment on the issue. We are basically assuming we need to change an old web site, or just add some features to it. Our web site statistics can really make a difference. And let me explain why.

Is the web a good resource for web developers?

Tweet

I know that the question has been raised in the past a lot of times. The number of web sites claiming to help web developers and designers is incredible. When we search for help for example with Google, we are undoubtedly easily misled and the answer we think will solve our initial issue, might end up being completely wrong. In fact, if the provided solution is not working at all, we can immediately understand it was wrong. However, if it works, we are utterly convinced that the wonderful snippet we have found is pure gold. We happily insert it in our web page and we think we have learnt something new. That's not always true.

Web Sites: how to keep things tidy (with style sheets)

Tweet

Almost three years ago, I have inherited a web site management. That web site was developed by a third party (a not-so-much-skilled web designer), using a mixture of different programming languages (JavaScript and VBScript) supported by CSS style sheets. In the past days, I've been asked to revamp the web site. Mainly, they asked for a change of colors... well, actually they wanted to obtain some sort of negative image of the web site. That means changing the black into white, and the whole grey color palette.
I am sure some of you will think that it's quite an easy task to do. And that's true... just when you (or your predecessor) have kept the things tidy!