Hongkiat.com: Useful Code Comparing Tools for Web Developers

---

Useful Code Comparing Tools for Web Developers Posted: 19 Apr 2012 02:30 AM PDT Developers of many different languages all share the same growing pains. Buggy source codes will be a nagging problem throughout a developer’s career but a much less-considered issue is in the compiling and the merging of edits from two or more copies of the same source. Luckily there are incredibly helpful tools available for just this type of situation. In looking for software tools to use for code comparisons, you’ll run into a lot of different solutions. Both Windows and Mac OSX have their own free and paid tools, along with a web application which runs universally on all systems. Recommended Reading: Top 10 Free Source Code Editors 1. Diffuse The Diffuse software is free to download through SourceForge. They offer installation codes for Linux, Win32, Mac OS X and FreeBSD. Each of the operating systems has support for command line prompts and a GUI-based window toolkit. Depending on how you like to work, the command line does speed things up considerably, but only if you know what you’re doing! To keep things simple, you may want to stick to basic GUI. Their site has a couple of screenshots you can check out along with a list of features. These include line-by-line comparison and detailed code highlighting. What I really like about Diffuse is the open source nature of the project. You do not need to pay anything to gain full access to the power of their software suite. This may be the most globally accepted, among the major OS, free tool used for comparing code files. If you have the time, check out their online manual, which can help clear up any questions you’ve got. Of course, you can always download and install the app to get a hands-on experience. 2. DiffMerge Another great product DiffMerge has been put out there by a software company named SourceGear. Their software is also supported among all major operating systems, and they also feature a set of tools for comparing lines of code. Inside the DiffMerge screenshot gallery, you’ll find examples of the program running in Windows, Mac and Linux environments. In each example it’s clear how the buttons and toolbars have been created and placed together simplisticly. With this suite you’re not just limited to single file comparisons, but actually allowed to piece together entire folders of code! You can compare two project source folders side-by-side with relative ease. The added function of highlighting code differences in multiple panes makes DiffMerge all the more valuable. DiffMerge is 100% free to download. If you check out their downloads page, you can pick from dozens of installer solutions. I have to admit that for a free tool this program really blows away the competition! 3. Active File Compare The development company Formula Software has put out a Microsoft Windows-specific tool used for professional code comparison and version management. It’s called Active File Compare which targets programmers using slightly more complicated languages such as C++/C#, Java, Visual Basic, and Ruby. Code highlighting is supported for base web languages such as HTML and PHP. Unfortunately this software is offered free only in a trial version. The cheapest license costs $10 for personal or $15 for businesses. This pricing chart is fairly reasonable, especially considering you are locked in for free updates for life, with no recurring charges. One feature which really stands out is the ability to compare between Microsoft Office documents. Specifically, Excel spreadsheets are difficult to merge together when you need to switch between many tabs and sheets. The AFC software will keep a history of your changes so that you can revert to any point without losing previous data. You can lump these changes together into projects which behave like a small-scale version control system. If you’re constantly working in higher-level development languages then I suggest giving AFC a chance. It features a GUI similar tp the other solutions, along with basic command line options. Yet the ability to import and compare Excel spreadsheets easily justifies the licensing cost. 4. Kaleidoscope App With the Windows solutions we’ve introduced, we can’t leave Mac users in the cold. Kaleidoscope has been on the scene for a few years and has been featured in plenty of web design galleries. The app is free to download for a 30-day trial then charges a €29 purchase fee (about $39 USD) if you would want the app to keep. I have to say this is one of the more expensive solutions for code comparison tools. Nonetheless, you shouldn’t expect otherwise for a Mac application, and of course their standards for design are impeccable. Even the app website itself is brilliantly designed! Some of the added features include an instant search bar, customizable code highlights, keyboard shortcuts, and support for the most popular versions of control systems. Git, SubVersion and Mercurial are the 3 highest rated amongst the many options. And you can even tie into third party applications such as Gitbox or Tower Git client. But the most unique and surprising feature is the ability to compare differences between images! These include file types such as .png and .jpg, and Kaleidoscope even supports dynamic files such as PSD and AI. Yes you read that correctly — this app can compare code files and layered images all from within the same interface! Talk about some impressive development skills. It seems like $40USD is actually a bargain for a software with all these features. 5. WinMerge For one more desktop solution I’d like to present WinMerge. They have been in development since June 2009 and now offers the software 100% free for download. Support includes all versions of Windows 98 to Vista/7 and has both 32-bit and 64-bit installers. The software comes standard with all the features you’d expect to find when comparing your source files. Distinct line numbers, code highlighting, tabbed interface, file merging, etc. You can read a bit more on their personal website which also includes some nifty screenshots and installation instructions. The online manual also goes over some of the basic FAQ beginners are likely to run into. There isn’t any specific calling card to make you choose WinMerge over another solution. It’s not to say this software isn’t worth trying; some Windows users may prefer it over other options. Many of the features have been well documented by the programmers over years of development — and you can’t go wrong with free GNU tools. 6. Compare my Files Here is the only browser-based web app I’ve used for comparing different bits of code. Compare my Files is a simple and free online utility. You can use the tool to parse through the codes of two different files to highlight differences. You can also choose to compare the codes line-by-line to gather more accurate results if the files are very similar. The biggest downside here is that you’re limited to only uploading two files at a time. Bear in mind that almost any of the desktop alternatives would provide a better interface to managing detailed code differences. Of course, for a web application this is still fairly impressive. I feel that Compare my Files is your best option when you are working on another computer without any pre-installed code-comparing tool to use. This app is also handy as a quick check-in system to ensure that your files match up. I’ve found myself in this position when downloading different .zip archives from a cloud system, where I’m not 100% sure which files have been edited. The upload tools only support plaintext source code, but the content language is entirely unrelated as far as the parsing engine is concerned. Give it a try and you may be pleasantly surprised at how intuitive this browser-based solution feels with regards to other software. Conclusion If you’ve been building software or web projects for a while then you can understand how difficult managing these files can become. The process of merging different source code can be very annoying and risky to boot but as you become accustomed to the workflow you’ll be able to shave off hours of working time. I hope these tools can get you interested in managing your code and keeping directory files up-to-date. If you have other examples or wish to share your thoughts please do so in the discussion area below. Related posts: Source Code Comment Styling: Tips and Best Practices Top 10 Free Source Code Editors – Reviewed Keeping Your CSS3 Code Markup Slim 20 Useful iPhone Apps for Developers & Designers

How to Customize and Beautify Facebook Chat [Quicktip] Posted: 26 Apr 2012 08:13 PM PDT Feeling frustrated and helpless with the limited functions in Facebook chat? Facebook chat provides no options to select emoticons or change the typeface or font size. And you can’t even move the chat box around your screen — it is forever stuck at the bottom of your browser. Instead of remembering the hundreds of shortcodes for emoticons, it would be nice to have an extension panel/button where you can simply select emoticons anytime you want to use one. And wouldn’t it be great to be able to move the chat box around your screen or to change the font size? In this tutorial, we will show you how to do that with Pretty Facebook Chat. Pretty Facebook Chat is a Google Chrome extension that gives mobility and flexibility to your Facebook Chat. And yes, you can use emoticons on it too. Recommended Reading: Facebook Chat: Emoticons, Tips & Tricks To Enhance Conversation Install Pretty Facebook Chat Firstly, you must have the Google Chrome browser installed on your computer. If you have it installed, log in to your Facebook account, then head over to the Google Chrome Webstore and search for ‘Pretty Facebook Chat’. After the results appear, click on the ‘Add To Chrome’ button to install the extension. Installation is automatic and will only take seconds. Once installed, you will see a small red icon in the address bar at the top right corner, with a notification indicating that your installation is complete. Now open your Facebook Wall. If it is already open, refresh the page and you will be able to see a second red icon at a separate place, at the bottom of the browser just next to the Facebook translation icon. Click the icon to toggle the switch to ON. Once Pretty Facebook Chat is in active mode, you can start chatting with anyone, and you will see that the chat box is no longer attached to the bottom of the browser. You can now drag it anywhere within the browser. Emoticons, Font and Box Size Let’s look at how you can start using emoticons and changing the font and box size. a. Emoticons From the chat box, there will be a smiley emoticon visible at the top right corner of the box, just mouse-hover over it and a pop-up window will appear with a selection of emoticons to choose from. B. Font Size & Box size Now at the top right corner of the browser (inside the address bar) there’s another icon indicating that you have Pretty Facebook Chat installed. Click on that button to change the font and box sizes. You can control the chat box shadow too. Conclusion With Pretty Facebook Chat, you have more control over your Facebook chat box. Chatting with friends will be more fun with tons of emoticons to choose from. And let’s not forget the newly acquired mobility of the chat box, it no longer has to be stuck at the crummy corner, below eye-level. Related posts: How to Setup Messages + Facebook Chat in OS X Lion [Quicktip] How to Clear Messages Chat History [Quicktip] How to Listen to Music with Friends on Facebook [Quicktip] Facebook Chat: Emoticons, Tips & Tricks To Enhance Conversation

You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610