Tools To Make Web Development More Efficient -Part 2 -

Other available tools to help make web development projects quicker and more productive:

1. JSUnit

JSUnit is a unit testing framework for JavaScript. Testing JavaScript manually is time-consuming and prone to errors, but JSUnit provides the developer a simpler, automated way of doing unit tests to ensure thorough testing at a fraction of the time it would take to test manually. JSUnit allows for the execution of automated tests for multiple browsers and operating systems.

2. Test plugin for JavaScriptMVC

The Test plugin for JavaScriptMVC is another excellent JavaScript testing framework to help make development speedier. It was created with the concept of "JavaScript testing sucks… so we want to make it easier" in mind. The Test plugin is a comprehensive set of utilities allowing you to do unit tests as well as simulate user interaction that can occur in a web page.

3. Venkman: JavaScript Debugger

Venkman is a JavaScript debugging environment for Firefox 2, Netscape, and Seamonkey. It gives you a GUI for stepping through JavaScript code and setting break points. It also comes with a command-line interface built in. Venkman is an extension that you can easily install and download through the Firefox Add-ons section of Mozilla.org.

4. Firebug

Firebug is a Mozilla Firefox extension that gives you plenty of web development tools and features. Firebug has a built-in JavaScript debugger that lets you step through your script as well as allowing you to perform benchmarks to see why your script is slow/sluggish.
You can quickly hunt down CSS, HTML, JavaScript, and XML errors through Firebug, and it even allows you to filter and search for specific errors. Another handy feature is the DOM inspector pane which outlines a web page’s structure; very handy if you’re working on a big website or an open-source application that you’ve recently gotten involved with. It’s an awesome tool though I find that disabling Firebug when I’m not using it is helpful in speeding up normal browsing (such accessing Gmail, for example).

5. Web Developer extension for Firefox

Web Developer extension is a very handy and time-saving extension for Firefox. I’ve written and recommended it plenty of times and is an extension that I use daily. You can rapidly validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, quickly fill out web forms for testing purposes, clear your cache with a shortcut key, change XHTML on-the-fly (great for working remotely on a web design), inspect HTTP headers information, and much more.

6. Internet Explorer Developer Toolbar

Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option. IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.

7. Yahoo! Design Pattern Library

The Yahoo! Design Pattern Library is a large collection of proven optimal web design patterns to save you time in creating highly-sophisticated design solutions. Some things that you can find in the Design Pattern Library are: breadcrumb navigation, auto-complete for web forms, and drag-and-drop solutions. It speeds up development by offering solutions to common design needs so that you don’t have to re-invent the wheel.

8. Test Everything

Test Everything is a web-based application for multi-purpose testing, reducing the time it takes you to use online services and validators. Test Everything is an aggregate of over 100 tools reduced to just one web page. You can validate your XHTML for web standards and accessibility, test your design in several browsers (using the Browsershots service), check page rank, and more – all in one location.

9. Pingdom Tools

Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what’s taking so long to load), file size, file type, and URL.

10. Aptana Studio Community Edition

Aptana Studio is an integrated development environment (IDE) designed for Ajax-based applications. It has JavaScript debugging, an Ajax and JavaScript library that includes some popular frameworks (such as the Dojo Toolkit) syntax colorizing, HTML/CSS/JavaScript code assistance (auto-complete and tool tips) and much more. It makes Ajax development simpler and gives the developer time-saving ways of organizing and managing multiple projects.

Read more »

Tweet

Tools To Make Web Development More Efficient -Part1 ( 10 Useful Tools)-

There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.

1. CSS Grid Builder

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press "Show Code" and it generates the HTML for you.
You don’t even have to host the CSS file on your web server (saving you some bandwidth and maintenance hassles), the generated code links to the appropriate stylesheet found on Yahoo!’s Developer Network API.

2. CSS Sprite Generator

Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually.
CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.

3. Blueprint: A CSS Framework

Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.

4. CSSTidy

CSSTidy is an open source application that parses, fixes, and optimizes CSS code to reduce file size and also to standardize CSS code formatting automatically. It also finds and removes redundant styles and properties. You can adjust CSSTidy’s settings to your preferred compression level but even the default setting can often give you 30% compression according to the creators of CSSTidy. Check out the "before and after" examples to get a feel for how CSSTidy works.

5. logicss: CSS Framework

logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids. Check out the preview of their CSS code generation tool.

6. ___layouts

___layouts is a very simple CSS framework that can be used to create web-standards compliant page layouts. ___layouts was inspired by Yahoo!’s Grids CSS and offers 5 preset widths that supports fluid-width or fixed-width layouts. Much like Yahoo!’s Grid.css, ___layouts also has a web-based Layout Builder that was developed for the Firefox browser. Caution: the Layout Builder is still in its early stages of development, so things may be buggy at times.

7. Clean AJAX

Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.

8. Sajax

Sajax (which stands for "Simple Ajax Toolkit") is an open source framework developed to speed up the creation of Ajax applications. It supports major sever-side technologies such as ASP, Cold Fusion, PHP, Perl, Python, and Ruby. Sajax has a fairly large community of over 39,000 registered users on their forums – so if you run into any troubles while developing a Sajax-based application or if you want to showcase your work, you’ll be sure to have an audience.

9. DOMTool

DOMTool was created to cut down the time it takes to code DOM structures. Creating DOM statements is as simple as copying your HTML code into the DOMTool and then clicking a button. It’s not meant to be used as a simple copy-and-paste solution and you should verify and optimize the output, but it gives you a great starting point.

10. JavaScript Code Improver

JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.

Read more »

Tweet

Local - The What, The Why, The How

Internet marketing, also known as web marketing, online marketing, webvertising, or e-marketing, is referred to as the marketing (generally promotion) of products or services over the Internet. Internet marketing is considered to be broad in scope because it not only refers to marketing on the Internet, but also includes marketing done via e-mail and wireless media. Digital customer data and electronic customer relationship management (ECRM) systems are also often grouped together under internet marketing
This video explain how to use online marketing and find new ways to attract local customers online.

Read more »

Tweet

7 Things to do After Installing Ubuntu 12.04

Tutorial of seven things to do after Installing Ubuntu 12.04



1-Change Update Server and Run Updates
Speed up your downloads and get your system up-to-date

2- Install Proprietary Drivers
e.g. nVidia / AMD ATI Graphics Card, Wireless network, TV Cards, etc...

3- Install Proprietary Codecs
To Play Adobe Flash Videos, MP3 Audio, MP4 Videos, and a few other codecs

4- Customise Desktop with MyUnity
MyUnity allows you to easily customise your desktop to change transparency settings, launcher size, and icon theme.

5- Keyboard Shortcuts
Bring back familiar Windows shortcuts such as
Win+E for Home Folder (Nautilus File Manager)
Ctrl+Alt+Del to open System Monitor

6- Privacy Settings
Prevent history being recorded for certain File Types, Folders, or Applications.

7- Setup Ubuntu One Cloud Storage
Gives you 5Gb of online storage for free. Great for getting same configuration between different computers.
Ubuntu One can synchronise between Windows, iPhone, and Android Smart Phones

Read more »

Tweet

How to Keep Track of How Other People Are Using Your Media Online

Whether you have a blog, you post photos on photo sharing sites, or you're a YouTube star you probably wonder when and how your media is getting used by other people. Regardless of whether it's free-to-use media or copyrighted material the process of tracking it down is the same.

Depending on the type of media you're producing you can track it in different ways. For our purposes we'll break the search into three types: art and photos, writing, and videos.

Track Where Your Photos and Art Appear Online

Tracking where photos and art appear online is pretty easy if you don't mind doing it manually. The webapp TinEye provides a dead simple reverse image search that will track anywhere your image turns up online. All you need to do is upload your image and TinyEye will search to see if it appears anywhere else online. Google's own Search by Image will do the same thing.

Less helpful but still useful is your image host's built-in stats page. If you're using any of the big image hosting sites like Picasa (views), Photobucket (Home > Stats), or Flickr (Your Stats), you'll find a statistics page showing when people link to your images. Provided someone is linking and crediting your image you'll see where it's coming from.

Track Down Writing Quotes, Links, and Everything Else

Tracking down your written words is a bit tricky. The simple and automated method is to create a Google Alert with your name, but that's only going to show up when someone is linking to your writing with your name included. The other easy method is to setup trackbacks on your blog so you can tell when people link to you. If your blog doesn't support trackbacks (or you're not using a blog format) you can use Google's Webmaster Tools for free. Once Webmaster Tools is set up, click Traffic > Links to see who is linking to you.

Of course, not every usage of your writing media is going to link back to you. To find out where you words might also be appearing you can use a copy search engine like Copyscape. In Copyscape you paste the URL you want to check and Copyscape will pull up any links that are identical. You can also sign up for the automated service Copysentry that does the same thing for $4.95 a month.

Find Where Your Videos Are Getting Embedded

Tracking where your videos you create turn up online is remarkably easy and built right into the two major video sharing platforms, YouTube and Vimeo. You can check where traffic comes from and where the video is embedded.

For YouTube, click your account name in the top right corner, then select Video Manager. Next, click the Analytic button. Here, you'll find the traffic of all your videos and a breakdown of where that traffic comes from. To find out where the video is embedded, select the video you want to track and then click the Analytics button. Select Playback locations, then click on the "Embedded player on other websites" link. Here you'll find every site that has embedded your video.

For Vimeo you need a paid Plus membership to see where you videos are embedded. Click Me > My Stats > Advanced stats > Embed. Here you'll see where your videos have been embedded.

So whether you're just curious as to how your freely available media gets used or if you're trying to hunt down someone breaking copyright the above tips should get you on your way. We weren't able to find a good way to track down how music is used save for a Google Alert or a store's built-in statistics tool (the online store Bandcamp, for instance, gives you a breakdown of incoming links)

From : LifeHacker

Read more »

Tweet