Archive for the ‘Tools’ Category

Ptwix is an open source web component, that is built with PHP, for displaying tweets in an Ajaxed interface.

It can be configured to show your tweets or the tweets of your friends.

Ptwix - Ajax/PHP Tweets

Once a webpage is loaded, the latest tweets are shown & "an update button" can make an Ajax call to get the new ones.

The component comes with 3 ready-to-use themes & new ones can be created by updating the CSS + images used.

Ptwix is so easy to install & it supports caching for faster loading.

MySpace is sharing an open source project named MySpace’s Performance Tracker which is an Internet Explorer plugin for capturing and measuring possible bottlenecks on webpages.

Myspace's Performance Tracker

The plugin is a great helper to developers for:

  • measure the CPU hit and memory footprint of your pages
  • reviewing screenshots of the page while it renders
  • reviewing rendered HTML on each point of the page’s lifecycle
  • viewing estimates of the time it takes to render each section of the page in different connection speeds
  • validating the content of pages against a set of proven “best practice” rules of web development. 

P.S. The tool is currently in pre-alpha state.

  • Tags:
  • Filed under: Extras, GPL License, Tools
  • 0 Comments
  • (smt) is a free script, built with JavaScript & PHP, to create a simple mouse tracking system for webpages.

    It enables you to watch how visitors interact with a webpage like:

    • which areas they click
    • what parts they highlight
    • & more..

    Mouse Tracking Script

    (smt) can work with both liquid & fixed layouts. For any user with "JavaScript disabled" it will gracefully degrade.

    The script is very easy-to-install by simply uploading the project folder & including the JS files to the pages to be recorded (documentation).

    With various options provided, it is possible to enable/disable viewing the mouse activity routes, distances, clicks & more.

    When working on projects as a group of designers & developers, it sometimes requires an effort to keep all files within the project synchronized.

    Jake is a free & open source software which keeps everything synchronized in a group of any number of users & does not require a central server.

    File Sharing Client

    Usage of the software is very easy:

    • create a project
    • drag’n drop the folder of the projects
    • invite other people to see the project

    Jake uses Jabber and open source chat server engines for the communication & users can login even with their Google username/passwords or any Jabber server.

    The software is available for Windows, Mac & Linux.

    For every web designer & developer, refreshing the browsers to see the updates we make is a very common action.

    XRefresh is a solution, specifically built for easing this process, which automatically refreshes browsers once an update to a file in our project folder is done.

    XRefresh

    It comes with 2 parts: a browser plugin (both for Firefox & IE) and an application (for Windows & Mac) which watches the changes made in the folders we mentioned.

    Although it is handy for systems with one monitor, the best environment will probably be two monitors where the IDE & the browsers runs on each.

    P.S. For Firefox, it requires Firebug to be installed.

    Opera, with version 10, is announcing a new feature named Opera Unite which converts any device running this browser into a web server.

    It is an open platform where, using its API, developers can create new services/products (with HTML, CSS, JavaScript, SVG and AJAX) which will be served from user’s computers.

    Opera Unite

    It already comes with various ready-to-use services like:

    • file sharing
    • media player (reach your media from anywhere)
    • web server (host websites, currently static pages but won’t be surprising to see new ones supporting PHP, ASP.NET & others)
    • the lounge (for hosting a chat room)
    • & more..

    To read more & download Opera Unite, click here.

    UIzard is an open source development tool for creating web applications on the web.

    It has built-in support for various project types like:

    • standard web applications
    • Google API-based widgets/gadgets
    • mobile web applications

    UIzard

    User interface elements can be controlled with drag’n drops just like a desktop IDE & UIzard’s built-in editor has support for code-highlighting.

    With an instant preview feature, the outputs of the design & code can be seen easily.

    P.S. The application is currently in beta status & can be a little unstable.

  • Tags:
  • Filed under: Extras, GPL License, Tools
  • Comments Off
  • Firebug LogoFirebug is probably one of the most helpful tools used when developing websites.

    Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.

    This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:

    • working inside browser, no need to switch apps.
    • being real-time, logging every request
    • ability to edit code & see results instantly
    • debugging JavaScript, measuring its performance & more..

    It also has another feature, which is extendibility with help of Firefox add-ons.

    There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:

     

    YSlow

    YSlow Firebug Addon

    YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).

    YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it™ and JSLint.

    Page Speed

    Firebug Page Speed

    Very similar to YSlow, it is an add-on by the Google team for evaluating the performance of web pages and, best of all, getting suggestions (based on "Web Performance Best Practices") on ways to improve them.

    Page Speed automatically optimizes images & provides compressed ones foruploading later.

    It can also detect  JavaScript and CSS loaded that actually isn’t used for decreasing the total size of these files.

    Read the rest of this entry »

    As designers & developers, we try to make a website easier-to-use for end-users. This can be building a less-complicated system, using different sizes & colors according to the priority of the content, etc.

    But, whatever we do, we need to findout if these work or not. Because sometimes, users do the unexpected & surprise you with "how the easy-to-use website you created" is not easy for them.

    Clixpy

    Clixpy, a very easy to install & use web usability testing tool, is a great helper for finding out how users browse a website. It does this by recording the activities of:

    • mouse movements
    • clicks
    • scrollings
    • form inputs

    A statistics application can give you the browsing route of a visitor. But, it does not provide what happens at that route & why readers choose that route, which actually are the vital questions. And this is what Clixpy offers.

    How to install & use it?

    A JavaScript code inserted into a website’s footer is automatically detected by Clixpy & tracking/recording starts (will be great if it becomes possible to limit the websites that can use the code to prevent unexpected usages).

    From the admin interface of the application, you can filter the sessions recorded by domain, date or the status (new captures, atched ones, etc.).

    Before viewing a session, you can have a strong idea about the details of it as Clixpy displays the number of pageviews, which pages are viewed, duration & user + browser details captured. It also enables you to save & take notes on any capture to analyze them later.

    Clixpy Session Player

    By clicking on any captured session, Clixpy presents you the same experience the reader has on the website.

    Also, you can define a limit on the capturing process like "capture first 20 sessions" or "stop the whole capture feature anytime".

    What to expect as a result?

    After installing Clixpy & capturing the sessions of your visitors, it is time to analyze the results. Simply:

    • watch the sessions
    • see which features your visitors find difficult & easy to use
    • take notes
    • & take action, fix the parts that you can offer a better user experience. And, for a double check, re-capture those webpages with Clixpy to see if the updates really work.

    50 free promo codes with 100 captures each

    Clixpy is offering 50 free promo codes to WebResourcesDepot readers for tasting the application. Each promo code enables you to capture 100 sessions. To get one, besides any comment you might have, simply mention "I want a discount code" in the comments & one promo code will be e-mailed to you within a day.

    All promo codes are now requested. But don’t worry, you can always play with Clixpy’s demo to see how it works.

    PHP.JS is a JavaScript library that enables anyone to use PHP functions client-side.

    It can be very helpful to any developer who wants to get the PHP functions on static pages, get the extra functionality (like being able to use file_get_contents(), mktime(), serialize() ) & take the load off the server.

    PHP.JS

    Currently ~400 functions are ported & there are still ones being experimented or waiting to be included. But it is possible to find the most popular ones (even md5()).

    The download packages can be totally customized & it is possible to get only the functions you need besides all of them.

    feed-holder
    FeedBurner
    • PSD to HTML
    • activeCollab | Project Management
    • Slice'n Dice
    • Find Out How Serious...
    • PSD to HTML
    • MailChimp

    Cheap SSL Certificates - SSLmatic