Saturday, May 2, 2009

More Powerful & Flexible Facebook-like TextboxList

It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. New TextboxList is now using Binary search for maximum performance. It supports new options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).



Facebook List Input



Requirements: Mootools 1.2.x

Demo: http://devthought.com/projects/mootools/textboxlist/

License: License Free



Read more...

How to Create Skype-like Buttons with jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you mouseover on it, the icon on the left “jumps” for a few times. The animation looks really attractive.


Janko is going to show you how to create the Skype-like Buttons using jQuery and some simple CSS. The code is tested in Firefox, Safari and IE7.



Skype Button



Requirements: jQuery Framework

Demo: http://www.jankoatwarpspeed.com/examples/skype_buttons/

License: License Free



Read more...

Coding Anytime and Anywhere with PHPanywhere

PHPanywhere is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online. It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.


PHPanywhere works in a browser, you can start coding right away, no need for installing anything. Best of all you can work from anywhere. You can also share your work and allow others to work on your projects on PHPanywhere easily.


PHP Anywhere



Requirements: -

Demo: http://phpanywhere.net/

License: License Free



Read more...

Resize Your Images Automatically with Fluid Images

Ethan Marcotte has raised an issue about Fluid Grids, that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?


He has wriiten a little script that makes Fluid Images. In short, it cycles through your document, swaps out the images for a transparent GIF, and applies the AlphaImageLoader property to each one. Then, whenever the window’s resized, the script automatically recalculates the proper, proportional height and width of the image, and resizes the spacer graphic accordingly. You can see it in action, and download the script.



Fluid Images



Requirements: -

Demo: http://unstoppablerobotninja.com/entry/fluid-images/

License: License Free



Read more...

Friday, May 1, 2009

Create Fancy Thumbnail Hover Effect with jQuery

Soh Tanaka has written a tutorial about making a Fancy Thumbnail Hover Effect with jQuery. Basically all they are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment with css), and padding when we hover over. During this animation, they also switch the value of the z-index, so that the selected image stays on top of the rest.



It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.


Image Hover Effect with jQuery



Requirements: jQuery Framework

Demo: http://www.sohtanaka.com/web-design/examples/image-zoom/

License: License Free





Read more...

PHP Quick Profiler - Firebug for PHP

Code reviews play an integral part in the development process for making quality software. We can find out security holes, memory leaks, poor queries and heavy file structures from code reviews. Unfortunately, these reviews are also very time consuming.


We spend a lot of time echoing queries, memory stats and objects to the browser just to see how they are being used in the code. To reduce this repetition, Ryan Campbell has invested some time creating the PHP Quick Profiler (PQP). It’s a small tool (think Firebug for PHP) to provide profiling and debugging related information to developers without needing them to add a lot of programmatic overhead to their code.


Now, we only need to toggle one config setting to true and we can have access to an automated tool to help create a faster and more consistent review experience. Since anyone can use it, PQP also gives the initial developer an idea of where their code stands before the review.


PHP Profiler



Requirements: -


Demo: http://particletree.com/examples/pqp/

License: License Free






Read more...

Download 18 Beautiful Project Icons for Free

Project Icon Set contains 18 beautiful icons related to project management. The set includes the icons address card, bar graph, calendar, clock / time, conference device, contact, documents, draft, mail, marker, milestone, notes, portfolio, project plan / gant chart, search / find, sitemap / flowchart, todo and user / resource.


The files are transparent PNGs, and vector Fireworks source files are included as well. As always, the set is completely free and may be used for any private or commercial project without any restrictions whatsoever.


Project Icons



Requirements: -

Demo: http://www.smashingmagazine.com/2009/04/27/project-icon…

License: License Free





Read more...

44 Tools To Help In Your Design Work

toolbox 44 tools to help you in your design work



The web is full of resources, but they’re often hard to reach. This is the reason why I think it’s important to organize them with a coherent structure and share it with you. So just bookmark this page for whenever you’ll need it, it’ll be useful. Please also mention if I missed anything.



  1. Organizing



  2. Communicating

    • Skype

      Cheap or free calls from your computer.

    • Adium

      Multi-client instant messaging application for Mac OSX.

    • Pidgin

      Multi-client instant messaging application for Windows.




  3. Brainstorming - Wireframing

    • Bubbl.us

      Online brainstorming application.

    • mindmeister

      Collaborative online mind mapping.

    • gliffy

      Create and share flowcharts and diagrams online.




  4. Typography


  5. Webdesign



  6. Colour


  7. Layout


  8. Image editing



  9. Stock photography


  10. Backing up - Archiving - Copyrighting

    • 7-Zip

      Open Source file archiver for Windows.


    • The Unarchiver

      Open Source file archiver for Mac OSX.

    • Copyscape

      Check if your website content has been ripped off.

    • Mozy

      Online data backup solution.

    • IdleBackup

      One-click backup utility for Windows.


    • ChronoSync

      Backup and synchronization utility.








Read more...

8 CSS tips for better linking

It may sound stupid to say that, but the ability to link is one of the best features of the web. It is then really important to make your links display as convenient for use as possible. In the following collection you’ll find some tips to make your links better looking and more usable.



1. Display filetype icons


If you are linking directly to a file, why not let your users know about it? I’m always terribly annoyed when Acrobat launches by surprise. One way many thoughtful web writers deal with this issue is by adding (PDF) after the link. It would be even better if you used the proper CSS technique that does it automagically! Web-kreation has a good explanation on how to do that.


filetype icon example


2. Show the target page’s language


Are you often linking to websites written in another language than yours? If it’s the case, you should consider using pseudo-classes to display a little notification for the link’s language. It can be either a little country flag or a bracketed abbreviation of the language [en]. I would recommend not to use country flags for this, it can be misleading or hurt some national sensibilities. My country, Switzerland, is a very good example for that. Linking to a Swiss page with a French or German flag would be inappropriate. Even for English, which flag would you use? American, British, Autralian,…?



If you still want to use this technique, here is a tutorial.


language flag


3. Highlight microformats with CSS


Highlighting the microformatted informations allows you to give a better view of your contact and personal information. It is definitely a good way to improve the usability of your website and to get more people contacting you.


Discover how to highlight your microformats on Hicksdesign.


microformats links



4. Display an icon for external links


When browsing a website and clicking on links, I’m always thankful to webmasters that tell me whether I’ll be leaving their website or not. It is a nice way to indicate your website’s visitors where they are going.


Learn how to do this


external links


5. Tooltips


Tooltips give more information to your website visitor about the link they are hovering. Most tooltips tutorials will use javascript, but did you know that you can create them with pure CSS? It is actually quite simple, as you’ll see on this page.



tooltip 8 CSS tips for better linking


6. Learn to style visited links


I never know how to style visited links on the websites I design, this article gives some good ideas on how to do it.


visited link


7. Better link display on printed web pages


Linking isn’t limited to the online world, your links should also be visible on the printed version of your website. The most common way to achieve this with CSS is to display the URL next to the link text. Read this article to learn how.


There is however an even better way to display the links on a printed page, list them as footnotes. This article on A List Apart will teach you how, but it does take some scripting to achieve it.



print links 8 CSS tips for better linking


8. Image replacement for submit button


It’s quite easy to customize your submit button with simple CSS, but replacing it by an image will let you integrate the button more.


image replacement





Read more...

18 jQuery scripts and tutorials to improve portfolio

For freelancing designers, the online portfolio is one the best ways to get some work. Every prospect will check it before hiring you for the job, so it must be good. JQuery can be a great tool to improve your portfolio, whether it’s for eye candy, usability or functionalities. In the following collection you will find some great jQuery scripts and tutorials that’s help you to get a better portfolio



1. jQuery tabs



Tabs can be a great way to make informations about a project quickly available without leaving the page. For example you can insert project details in a secondary tab because you know that only a few visitors will have interest in it.


jquery tabs


2. jQuery cycle


If you want to show a project’s evolution, jQuery cycle could be the way to go. It is basically a slideshow with cool transition effects, and the ability to use different actions to move from one slide to another.


jquery cycle


3. Coda Bubble


If you are going to use a tooltip to display further technical informations, do it with style. This script and tutorial teaches you to create a bubble just as pretty as the ones on Coda’s website.


coda bubble



4. jQuery Zoom


If you have designs where the details have a lot of importance, you should use this script to let your site’s visitors know that you don’t neglect details in your designs.


jquery zoom


5. Flip Box


Nice flipping effect for your divs, images, or whatever you want to put in it.


flip box


6. jQuery Multimedia portfolio



A cool carousel jQuery that allows you to display different media types, perfect for multimedia designers.


jquery portfolio


7. Coda slider


If you read a lot of web design blogs, you’ve probably seen this one over and over. I still could not leave it out of this list as it’s a great way to display design work.


coda slider


8. Kwicks


Nifty little effect for menus, can also be used for other things if you are creative (and I am sure you are).


kwicks 18 jQuery scripts and tutorials to improve your portfolio



9. jQuery Treeview plugin


If you have a lot of projects and designs to show, this could be the right navigation to use for your portfolio.


jquery treeview


10. jQuery filterable portfolio


Excellent tutorial to create a filterable portfolio with jQuery.


jquery portfolio filter


11. LavaLamp menu effect


Beautiful menu effect that captures your attention towards the menu element you are hovering.



lavalamp menu


12. jQuery Calculator


Want to get rid of people with too low budgets? This could be the way to go. The jQuery Calculation plugin could allow you to give an estimate of what their request will cost.


jquery calculator


13. jQuery form validation


Tired of receiving incomplete form submissions from your portfolio site? Try the jQuery form validation plugin and the people trying to contact you will not be able to send a message if they didn’t fill in the form properly.


jquery validation



14. jQuery Accordion menu


In your portfolio you will probably want to emphasize on your content and images. Accordion menus can be a good way to declutter your sidebar and give more space to content.


jquery accordion


15. jQuery sequential list


It’s good to explain your workflow on your portfolio website, it gives your potential clients a good indication of what they can expect when working with you. Using a sequential list is a good way to do this, learn how in Web Designer Wall’s tutorial.


jquery sequential list


16. jqTransform



Good form styling does not only look nicer, it’s also often more usable.


jquery form styling


17. jQuery Virtual Tour


If you are really proud of your studio, you can give a good feel of what it looks like with this virtual tour jQuery plugin.


jquery virtual tour


18. jQuery Image Notes


To give informations about an image or project, image notes are the perfect solution. You can easily point out details and give in-context explanations.


jquery image notes





Read more...

Followers

Action

Mesothelioma Cancer
ThemeFlash Msn bot last visit powered by MyPagerank.Net Creative Commons License
 

ThemeFlash : The Quality Web Resources. Copyright 2009-2010 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol