Useful links from May 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.
Links to my best jQuery plugins. by Marc Grabanski.
First interesting thing about this post, it has been written by Marc Grabanski, the famous web developer. Marc writes about web coding, including jQuery based topics on his site marcgrabanski.com. Second interesting thing, here he talks about his favourite jQuery plugins, the ones he loves, the ones he uses the most. I have to say it's quite nice to see what a developer of his standing tend to use. It's quite a big list really, with various plugins to allow you to work with many different things such as forms, pickers, modal windows, content sliders and so on. An overall very good plugin resource.
Facebook Like Button
Since its recent introduction, we've seen the integration of the facebook like button spreading insanely on websites. This little button allows users to share the fact that they like your site on facebook in one simple click, which is quite good for site owners. So if you have been thinking about adding this social feature on your site, this post can help you. It features samples of code that you can copy and paste, or a few links to already made plugins, (such as a WordPress one for example). But most importantly, there's a 7mn long screencast that will teach you anything you need to know to integrate the like button.
Beautiful Background Image Navigation with jQuery
Very good tutorial from Codrops on creating an absolutely lovely navigation, based on a rich background animation. The different items of your navigation have a background image that nicely slides into position when hovered. The background image sliding direction depends on which item the user was before: coming from the right, it will slide from the left and vice versa. On top of that you can also add sub-menus that appear with their semi-transparent background sliding in. An overall very nice effect.
New Tuts + website, mobile.tutsplus.com/
Mobiletuts+ is Envato's newest Tuts+ Network site. It's all about quality tutorials for mobile developers for all mobile developers. Topics will include native development with the iPhone, Android, Windows and Blackberry platforms, cross-platform development with tools like Appcelerator and Phone Gap, and techniques for building mobile accessible web sites with HTML 5.
Awesome Bubble Navigation with jQuery
More complex, but also more beautiful, the bubble navigation from Codrops leaves a stunning impression. To begin with, you are presented with a set of bold icons representing top level pages such as home, shop, contact etc. Then, when you hover one of the navigation item, a bubble expands around it, revealing the item's sub categories. The jQuery easing plugin is used for an even better looking result. Very nice
A Detailed Look Into WordPress Database Optimization
WordPress is a system that relies entirely on PHP and Mysql to power your site. For any requested page, the mysql database is always queried for relevant information. As your site traffic and content increases, you'll store more and more information into the database, and you'll generate more queries (be it insert, update, or delete). A correct database maintenance and optimisation is key to ensure you site will not slow down over time. This article from onextrapixel features some tips, snippets, plugins, and useful queries to allow you to take care of your beloved WordPres database. Definitely worth a look.
Font Preview - Google Font Directory
Integrating a non web safe font in a website has always been a bit of an issue in the past. Recently, modern techniques such as the @font-face property, or dynamic text replacement with javascript helped make things a bit easier though. Then, suddenly, Google turns out with a new cool service and API, the font directory. To realise the potential of this, have a look at this page. It allows to choose a font among the supported ones. You can then edit its size, change its shadow, letter or word spacing, its text-transform and text-decoration property, and so on. Once you are happy with the way your font looks, Google gives a script and a style to copy paste into your website. As simple as this.
Sliding Panel Photo Wall Gallery with jQuery
This tutorial will show you how to make a brilliant full page photo wall, that could look very good for any photo based site. The idea is to present a wall of photo thumbnails to the user when he comes in. Each thumbnail has a light but smart hover effect, and when clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. Very neat, very smart.
Chris Coyier's Button Maker
Every time I see a tweet from Chris Coyier starting with 'tinker tinker', I know it means he was experimenting something with CSS or jQuery, and that we should expect something great in the end. This time was no exception, and here comes the button maker, a little button wysiwyg editor packed with jQuery and CSS greatness, allowing you to play with different properties in order to create lovely buttons. Change the font, the size, the border-radius, the gradient colors and so on thanks to some pretty sliders and color pickers. Very good interface implementation indeed.
25 Very Detailed jQuery Image and Content Slider Tutorials
Following the rise of javascript libraries, it has become more accessible for developers and designers to implement image galleries without the need of some mad programming skills. There are now dozens of different solutions that are ready for integration, and that you can more or less customize. Some of them are easier to implement than others though, so here's a nice post presenting a list of useful images and content slider tutorials that you light find useful when implementing one of those solution.
jQuery Template Markup Language (JTML) AJAX Demo
The jQuery Template Markup Language, or JTML, is a jQuery-powered rendering engine that allows you to write templates with specific placeholders, that you can populate easily later on. That system is gives you the possibility to write in JTML, a template that is going to render some html if you give him a structure of data. It is very nice when working with Ajax for example. Let's say you load a JSON object via Ajax, then you just pass it to your template, and it will returned some nicely formatted html. A good technique to check out, and very good examples from Ben Nadel.
Twitter API Explorer
If you will ever going to be working with the Twitter API in the future, do not miss out this nice tool. The Twitter API explorer, as its name implies, is an interface allowing you to explore the possibilities of the API in a different way than the official documentation. Maybe it will make you discover some methods you didn't know about before, maybe you'll find some more information about how to expand a method, how it actually works, thanks to a few nice examples... It is well sorted in categories such as timeline methods, user methods, search methods and so on. A very good tool in the end for Twitter developers.
Why you Should be using PHP's PDO for Database Access
When I think about connecting a website to a database in PHP, I tend to use the mysql_connect method. You pass the host, the username and the password, and it connects your application to the database. There is a rather less known alternative, that is to use PHP Data Objects (PDO) for database connection instead. PHP Data Objects are a database access layer providing a uniform method of access to multiple databases. It doesn't account for database-specific syntax, and can allow switching between databases and platforms easily, simply by switching the connection string in many instances. This tutorial is written primarily for people currently using the mysql or mysqli extension to help them make the jump to the more portable and powerful PDO.
Cloud Zoom
If you are looking for a very good looking zoom plugin, that one from Professor Cloud is definitely very nice. It's rather small, but packed with plenty of features and options. With this plugin, you can magnify some particular areas of an image, thanks to different effects. You can for example show the zoomed area outside the original picture, or inside. You can also add an overlay on the original photo. It supports multiple images within a gallery as well. As it is rather beautiful visually, I suggest you should take a look at the demonstration.
Best Practices For Coding HTML Emails
Even if you are a great web developer, coding an html is a very difficult exercise, that can't be compared with a website building routine. In order to get a consistent result across the huge variety of email platforms, there are strict rules and practices to follow. There really are quite a few things to take into consideration. This article from Cats who code reviews 8 concepts that you'll probably have to follow in order to get your emails right, such as for example, how to get back to old techniques like using tables or inline styling, how to keep emails lightweight, or how to format them properly.
