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
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.
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.
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.
3 tips when using jQuery
AjaxForm or ajaxSubmit
This plug-in provides numerous options you can call to manage your form before and after submission and all this in AJAX. More info on http://malsup.com/jquery/form/
Live Query
When an element is loaded into a page, you will not be able to use the events on this element. But when the Live Query is used, this magically appears to work... This is because the Live Query binds events of elements together every few milliseconds and does a DOM (Document Object Model) update. A really cool plug-in that creates the possibility for web developers to execute events without reloading the page every time an element is clicked. The only disadvantage of live query is the fact that it appears to slow down the execution time a bit, but when you don't have to reload your page each time, I guess it's worth the usage. More info on http://brandonaaron.net/docs/livequery/
JSON (JavaScript Object Notation)
In our case we are using JSON as response-type from an AJAX request. This is a sort of XML but a lot easier to read, especially when you work with a lot of data. For more information on JSON visit http://json.org/ or http://borkweb.com/story/the-case-for-json-what-is-it-and-why-use-it
Symfony: How to refactor
Last year, my team and I, needed to create a new web application. We decided to make use of a well known PHP framework called Symfony. Not because some say this is the best framework, but because ...
- It is Enterprise Ready
- Has many plug-ins available
- It is Actively developed
- (most important) A great community and documentation
- Integrated Unit Testing
Although symfony has a good implemented MVC architecture with a lot of helpful functions, it is still very easy to make some design mistakes, like the DRY (Do not Repeat Yourself) principle. Fabien Potencier, lead developer of symfony, recently refactored an existing web project which he wrote down in the symfony blog.
If you work with symfony, you really should read this refactoring session because I’m pretty sure somewhere in your code you made the same mistake(s).
Call the expert: A refactoring story (Part 1, Part 2, Part 3, Part 4, Part 5)
Secrets of the JavaScript Ninja
John Resig is writing a new book that will be released in the fall of 2008 and we are waiting impatiently. It’s called Secrets of the JavaScript Ninja and will be 300 pages full of information for the advanced JavaScript developer. As he says the book will cover cross-browser compatibility issues, I’m already looking forward to the release of it. I’m quite sure that my colleagues and I are not the only ones breaking our heads over that issue. So if you’re interested in designing your own library, or want to know more about them, this is a book for you.
Let’s hope the next book will be as helpful in my learning process as the last one he wrote (Pro JavaScript Techniques). More info can be found here.