html 5 experiment
This is super cool!!!!
9Elements created a completely html page containing nothing more then Javascript and some of the tags that are created in the new HTML version.
This is really amazing as it is really the first time that I see a website that does some things I thought could only be done with Flash. I m overwhelmed with it an I suggest you take a look at it!! Be sure to look at it in an advanced browser ( Google Chrome 3.0, Safari 4 or the latest Firefox 3.5 version).
an infinite image carousel
One of my favorite blogs is that of jQuery 4 Designers and this time he created a cool tutorial on how to create one with jQuery.
It has always been a struggle to create a nice carousel but i think this guy managed to create a real cool one. Also one of the most interesting things about this website is that all the code he writes in jQuery also works after disabling JavaScript. Try it!
for more information and other cool tutorials you can visit his website: jQuery4Designers
the future of web development
It is always hard to tell what the future will bring, especially in a world where everything is evolving so quickly. But it's always good to know what libraries, languages or applications will influence the way we work or the language we code in. There for I took the time to create an overview of what could be interesting in the near and far future. If you have any remarks or other ideas, I would be happy to hear them in the comments.
HTML 5
Jon Von Tetzchner (director of Opera) recently announced that HTML 5 will replace Flash almost completely. Will it go that far? I don't think so, but what we will be able to do with it is quite impressive!
- Extension of the DOM with new elements like: section, audio, video, canvas, etc...
- New attributes like: ping, charset, async
- Id, tabindex and repeat for every element
As you can see the HTML 5 will be an expansion of HTML 4 but with rather important differences. We can expect HTML 5 to get its W3C Candidate Recommendation in 2012 but it will be able to use some of the features sooner. One of those is canvas that is already a widely implemented element.
Serge Jespers wrote a post on his weblog as a reaction on what Jon Von Tetzchner said and you can read about it here http://www.webkitchen.be/2009/05/27/adobe-versus-the-open-web/ He is an Adobe platform evangelist and Adobe pays his payckeck every month, but I do think the guy has a point.
JavaScript 2.0
With JavaScript being more popular than ever this is certainly worth taking a look at. John Resig created a slideshow on what will be changed in the 2.0 version and I must say that it looks promising.
PHP 6
A lot of people swear by the use of PHP over other language (like me 
) and a lot of other people say that PHP just isn’t sufficient enough. They are probably right because there are some insufficiencies in PHP, but in version 6 a few of those will be reviewed and adjusted. For now v6 is available as a developer snapshot so if you want you can already try it out.
Improved Unicode support.
This was a really necessary to keep up with other languages like JAVA that have a better i18n (internationalization) support, in this way PHP will close up the gap it had and support you with a much broader set of characters.
Namespaces
Namespaces are a way of avoiding name collisions between functions and classes without using prefixes in naming conventions that make the names of your methods and classes unreadable. By using namespaces we can never have the problem that 2 classes with the same name interfere with each other. I’m still wondering if this is the best solution but we’ll have to find out in the future. I’m only struggling with the idea that this only moves the problem to a higher level, as you now have to make sure your namespaces aren’t the same.
XML
XMLReader and XMLWriter will become part of the PHP core, which will make it easier to work with XML in PHP.
Magic_quotes and register_globals will be removed from PHP as they are a huge problem in PHP security.
It is from version 6 required to use tags as the ASP-style tags are no longer supported (<% %>)
Those are the biggest changes, again, just like in JavaScript some of these changes are already implemented in a PHP5.3
So in a nutshell, I do believe that PHP has a superb future in front of it, but that is also because of frameworks like Symfony, CakePhp, Zend, etc.
What browser should you use?
Over the years we have tried to create websites that are displayed correctly on every browser, and sometimes we did manage to get it correct. But it isn't that easy to get your application configured and coded so that all browsers react in the same way. Basically it comes down to one thing: Create an application for IE and Firefox and then you'll probably cover 90% of all users.
Off course all Mac users will feel left out, but, in my opinion, those are the 2 major browsers, and if they work correctly it will probably work in Opera and Safari to. Maybe you need to do some minor adjustments, but you will be finished quite fast. My point is to start off with IE and Firefox because the other way around will give you huge headaches.
I saw a good slide show on this topic by John Resig and it is displayed below. You might want to take a look at it, it's really interesting.
enhance your css
Writing css code isn't that hard, it's easy, clean but can be a pain in the ass to keep it readable when you have hundreds or maybe thousands of lines of code.
When sticking to specific rules it can all be made a bit more readable:
- always use a reset of some sort
- alphabetize
- write comment
- consistency
- start in the right place
- Understanding Class and ID
- Power of li
- CSS Debugging Tools
read the full text to enhance your css code
5 Ways to Instantly Write Better CSS (click here )
20 Useful CSS Tips (click here)
Security on websites
Sometimes it’s interesting to protect your web content from the world, and there are different ways (or a combination) to do this:
Create a robot.txt file
This file is uploaded into the root folder of a website and makes sure that specific folders shouldn’t be crawled and indexed by search engines. Most of the time this is for images, administration section, documents, etc…
Create the file using notepad and type this:
User-agent: *
Disallow: /images/
Disallow: /cgi-bin/
Disallow: /documents/
Disallow: /administration/
This means that for all search bots (*) these 4 folders will not be crawled. It‘s possible to set these folders for each individual search robot by replacing the * by the name of the robot (ex. Googlebot, MSNbot, …)
Encryption
When using a password, be sure to use encryption.
I guess it could be interesting to write a whole article on this issue, because it’s a bit complex, and I’ll try to do that in the next few days. But if this topic is interesting for you be sure to take a look at MD5
- Info: http://en.wikipedia.org/wiki/MD5
- PHP: http://be2.php.net/md5
- ASP: http://www.freevbcode.com/ShowCode.Asp?ID=2366
.htaccess
An image or document often gets a direct link, created by users and placed in their favorites. That isn’t a big problem when we are talking about an unimportant document or a small image. But when dozens of websites start linking to this document, it’s possible to reach the maximum of your bandwidth in no time. And it certainly may not happen when we are talking about confidential documents.
To restrict these documents from the outer world, we can use the .htaccess file.
This file affects only the directory where it has been placed in and all its subdirectories.
So if you have a directory
/security
and 2 folders in it
/security/docs
/security/images
In this case, put the .access file in the /security if you want all the directories to be secured, or only in the docs folder if this is the only one you want to be secure.
A good hint is to try to use the fewest number of .access file because redundancies can cause infinite loops.
Preventing hot linking is the most important event the .access file will prevent. Instead of getting the file they are hot linking they can get another image like an angry man or a message that this document is not available.
This is how an .htaccess file is build up:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ - [F]
The first two rules have to be kept as they are now; the third rule however needs to be adjusted so it indicates your specific URL.
The fourth line is set up to deny the use of types you like to be denied, you can add as many types as you like using the pipe (|) separator.
To show another file when they want to download a .gif or .jpg, change the fourth line to something like this:
RewriteRule \.(gif|jpg)$ http://www.mydomain.com/angryman.gif [R,L]
These adjustments should implement some security in to your website. Greets.
Green programming – contribution to the environment
Everybody seems to be talking about a green and environment-friendly job. Well I wondered how we, as IT guys can contribute to this phenomenon and came up with these answers (after a bit of research).
In our workspace we can do these things:
- Write correct and OO code, to save seconds of processing time
If you save 3 seconds in a code and this gets executed 1000 times a day for 1 month (30 days) you’ll get a total time of 3*1000*30 = 90000 seconds = 1,1 day per month of execution time saved.
That’s a huge difference isn’t it? And that’s only what 3 seconds does…. - Don’t print out everything but use digital copies. Share books, instead of buying two or more copies.
- Use servers that are hosted in green data centers (more info)
- Live close to your work and use public transport (if possible), ride a bike or walk.
- Be sure to shut down air-conditioning and heating at night.
- Switch off you system and monitors.
- And the best one: try to work as less as possible.
John Resig: the messy DOM
Take a look at this: a very interesting video of John Resig on the DOM.
Select element, return 2 values
I had a problem earlier today: I needed to have a select box that returns 2 or more values in stead of 1.
I got this far:
The value of the options gets the id of the item that is displayed in each option.
I do have an other value that should be linked on this option. Is there an easy way to do this?
<select id="category" name="data[cat]">
<option label="0" value="12">A</option>
<option label="0" value="7">B</option>
</select>
I tried to do this with entering the second value into a label attribute but then the problem is that i don't know the correct way to get the label value of the selected option. This is written in Jquery.
To get the selected option I use:
$("#category").livequery('change', function () {
var catId = ($(this)[0].value);
});
the solution seems to be quite simple:
The label attribute is used by some browsers to display the content of the option, so your list box might display two 0 options.
A better solution might be to do the following:
<select id="category" name="data[cat]">
<option value="12,0">A</option>
<option value="7,0">B</option>
</select>
and split the value in the event handler, e.g.
$("#category").livequery('change', function () {
var values = ($(this)[0].value).split(",");
var catId = values[0];
var otherId = values[1];
});
Wasn't that easy
jQuery API browser
When writing your code using jQuery, you visit their website quite often to get information on attributes, plug-ins, etc. Sometimes the website is slow and not easy to use. Well they recently launched an offline API browser that works super fast and easy to use. The API browser is created with Adobe Air and you can even create your own favorites so it becomes easy for you to get to your most used references.