Useful links from March 2010
If you are a writer yourself and post on your site some useful resources or tutorials, don't hesitate to send me a quick email with a link and a little description. I'll add the best ones to the list every month.
The links are stored every month, you can use the search bar in order to retrieve past links more easily.
10 jQuery Transition Effects: Moving Elements with Style
It's undeniable that the jQuery library is increasingly preferred to perform animations and transitions on a website nowadays. This privilege used to belong to Flash but it is now so easy to use javascript libraries that they are reclaiming more of it every day. Whatever content you have to present on your site, you can now do it in a more interactive & more responsive ways. In this article from the founder of noupe.com Noura Yehia, you will find 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website. I quite like the roundabout and the Slideck plugins.
Connect Twitter API with OAuth using PHP
I'm very interested in the Twitter API. I worked with it several times for both personal and professional projects, but I was always using information available publicly. If you want to create a professional Twitter web application, you'll have to allow the user to login to Twitter via your application. This is achieved by using OAuth. This resource is a very good tutorial on how you can implement a php application using OAuth to connect to Twitter, featuring pieces of coding, concepts, and links to other resources.
Introducing EnhanceJS: A smarter, safer way to apply progressive enhancement
Building with progressive enhancement is essential to ensuring a usable experience for all. But how do you determine which browsers should receive the enhanced experience and which should stick with the basic experience? EnhanceJS, is a JavaScript framework designed to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.
Who Is Online Widget With PHP, MySQL & jQuery
I bookmarked this page because it talks about two things that are becoming increasingly popular in community driven websites / social applications. The first one is, as its names implies, how to figure out who is currently 'online', meaning viewing your site, and the second one is geolocation, in other words, where do they come from? The article features a broken down approach to the problem, illustrated by big code snippets if you just want to rush through.
10+ useful code snippets to develop iPhone friendly websites
Two years ago, I joined the rapidly growing family of happy iPhone owners, and since then, I started to experience the 'joy' of mobile browsing. This is how you realise that most websites are not really optimised for such devices... But I can't really complain as even my own site isn't. Shame on me... As I intend to address this sooner than later, I saved this nice page from catswhocode.com focused on the subject.
Creating a Simple PHP Cache Script
When you start diving inside the backend of powerful cms or frameworks, you realise how complex they can be, and what the journey of a page is from its request to its final rendering. In order to save processing time along the way, you can save the results of every step involved. For example you can cache the result of a sql query, so the next time the page is called you don't have to hit the database again. Caching is an important notion when it comes to page optimisation, and this little class can definitely help.
Google Translation PHP wrapper
Translation is a very common feature on websites, it gives the ability to the user to read your site content in the language that suits him the most. To achieve this, Google translation is an interesting service. Not only can you do language translation, you can also detect the language of a particular text. As the translation API is only available for Java and Javascript, here is an implementation for PHP. In this post you will see how to translate text from one language to another in a simple and quick way using the created class.
Entering The Wonderful World of Geo Location
This very long article from smashing magazine covers different aspects of the geolocation concept. If you are thinking about entering this 'wonderful world', then you should definitely go through it. It will show you how to collect geolocation data from visitors, for example, what their IP is, and how to know where they are from. It also features sections on Latitude And Longitude, but most importantly, how to serve the user with location relevant content, by turning location names into geo-data and inserting maps into your application. A complete guide to geolocation!
Setting rather than Resetting Default Styling
What is the first thing you do when starting a new stylesheet? Do you get rid of every margin and padding with something like * {padding:0;margin:0;}? Do you have your very own custom css reset? This article from thinkvitamin.com discusses the advantages of improving a reset style sheet in order to make a base sheat instead. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few "common issues" as well.
Advance Level PHP Tutorials & Scripts
It's very common to see roundups of jQuery resources so for once, here's a list of advanced PHP tutorials instead. It's a nice post featuring very good PHP articles like the Who Is Online widget featured above. I quite like the one that shows you how to build your own twitter timeline, the cool effect of the fancyquotes, and the outstanding event timeline. But the bottom line is, even if you are not especially interested by the final results, you can still benefit from every piece of those tutorials.
HTML5 Rocks My Socks Off
Of course, everybody knows that html5 is out. There even seems to be some html5 guru out there already. Well, unfortunately I'm not on of them... I'm obviously aware that there are some brand new html tags that we can now use, but I'm not sure which ones, how to use them, nor what their purpose is. Thankfully, there have been some very good resources posted on the subject too. This article from three styles for example, is very nice. It starts with a clear list of the new tags, which is already helpful. Then, for each tag, it gives a brief explanation (even better), a definition, and some pieces of typical code implementation (awesome). My favourite html5 resource so far.
Image Resizing Made Easy with PHP
PHP is a powerful language that is very good to work with images. It features plenty of native functions and libraries allowing you to create, manipulate, and resize images. Another advantage of PHP is that that it is Object Oriented, therefore allowing you to create classes. This very good article from nettuts+, will help you to build a very nice class, with plenty of methods to work with images. The beauty of this is once your class is ready, it becomes so easy to resize, resample or crop your images, or even to create thumbnails.
jQuery, Ajax, PHP and MySQL Projects
9 lessons is a very good blog where you will find plenty of jQuery and PHP tutorials, mainly focused on facebook and twitter like functionalities. So for example, if you ever wondered how you could implement a voting system, collapsible comments, a wall system or a load more button, you'll find detailed answers here. This post in particular is not really a tutorial in itself but a list of tutorials that have been written on the subject so if you are considering integrating a feature that you have seen on facebook or twitter, this list probably features an article that will show you how you can do it.
The Ultimate Guide To JavaScript in Web Design
I think that this page is not really a guide, but a very well thought and sorted list of javascript resources. It takes several interface elements, such as for example the login area, a search input, the page header, the navigation and so on, and for each of those elements, it gives you 5 to 10 corresponding resources. So let's say you are redesigning your site, and you are looking for a nice navigation effect, you can go to this page and under the navigation section, you'll find some plugins only focused on navigation effects.
When can I use...
Html 5 and CSS 3 offer plenty of new possibilities. It's brand new and everyone is excited about what can be achieved with those new technologies. The problem is that they are a bit too new for the moment, and therefore not really supported by older browsers. While I think it is important to become familiar with them, I also think that we have to be careful not to fall into the early adoption, so let's be wise, and analyse what is the real compatibility state of those technologies at the moment. That is what this post does. It gives you clear results per technology and per browser to let you decide what you'll eventually use or not.
35 Really Useful PHP Tutorials And Development Techniques
This post is a PHP resources goldmine. Out of 35 tutorials, more than half of them are outstanding. It features some tutorials that I had never seen before such as charting live data, the facebook type image rotation, how to retrieve Google analytics data with PHP, some techniques to lock down your website, and even how to retrieve your google mail emails with PHP and imap. As you can see those tutorials are pretty advanced but there really are some very good things in there.
Facebook type image rotation and more using PHP and Javascript
A while ago, I was looking for a tutorial on how it would be possible to allow a user to rotate a picture, and to keep the result as a new image on the server, like the facebook image rotating feature. It turns out that this article was exactly what I was looking for. It shows you how the user can simply click a button to rotate an image and keep it as it is. It even investigates further and adds the possibility to have a slider to rotate your picture at the precise angle you want, not just adding 90 degrees.

































