Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Tools’ Category

While creating/editing CSS files, viewing the output instantly saves much time.

CSSrefresh, a JavaScript file that auto-refreshes the web-page, was featured before at WRD.


SoFresh!, a bookmarklet, extends it a little further, works without inserting a JS file to our web pages and allows us to choose which CSS file to refresh.

In case you don't have such a live-updating development environment, you should definitely give this tool a try.

  • Tags:
  • Filed under: Extras, No License, Tools
  • 1 Comment
  • When displaying code in a web-page, highlighting its syntax accordingly helps so much in easily reading it.

    There are various syntax highlighters around (see 11 Syntax Highlighters To Beautify Code Presentation) and Lea Verou has released a lovely new one, named Prism, that is built with modern web standards in mind.

    Prism Syntax Highlighter

    Prism is lightweight (1.5KB minified & gzipped), can be integrated so easily (just insert a CSS and JS file) and works fast. It is already used to beautify lots of code in Dabblet (an interactive CSS playground) so its pretty stable.

    New languages can be added and the functionality can be improved with the plug-in architecture and the look/feel can be completely styled via CSS.

  • Tags:
  • Filed under: Extras, MIT License, Tools
  • If you are always developing with a specific language, using a development tool that is built specifically for that language can ease the process.

    NINJA-IDE is an open source and free development tool that focuses on Python developers at first but has support for code highlighting for various languages.

    Ninja IDE

    It has a handy code locator which enables us to access to any file, function or class inside the projects and a debugger that can highlight static and PEP8 errors in the document.

    The application allows managing Python Project automatically, saving descriptive information about them and letting the user to perform file management related task in the IDE itself.

    NINJA-IDE is highly extensible with its plugin support and there are already multiple plugins like a snippet manager or Git integration.

    P.S. It works in all major operating systems.

  • Tags:
  • Filed under: Extras, GPL License, Tools
  • Brackets is an open source code editor (IDE), built by Adobe, which is created with only client-side web technologies like HTML-CSS and JavaScript.

    The editor focuses on simplicity and, rather than too many panels, the quick-edit UI is the main thing.

    A "live development" feature syncs a browser with the editor and displays any changes instantly.


    It is integrated with the Chrome's Developer Tools and JSLint for debugging.

    Brackets, although being web-based, works in a native shell (Win & Mac versions available) to reach the filesystem.

  • Tags:
  • Filed under: Extras, Other License, Tools
  • Around 2 years ago, Microsoft had announced the first version of WebMatrix and it was shared at WRD.

    Lately, they have made the release-candidate of WebMatrix 2 available and it has become an exciting product for many.

    The tool now has support for the most recent web-dev technologies including HTML5-CSS3, Node.js or jQuery Mobile.

    WebMatrix 2

    It has a one-click installer for many popular apps including WordPress, Joomla, DotNetNuke and more. Also it can instantly install IIS, MSSQL, MySQL, PHP, Python and many others.

    There is built-in support for Windows Azure cloud and the project scan be pushed to the remote environment to any FTP address or to the Azure.

    Although WebMatrix 2 is a Microsoft product, it is well-integrated with PHP, any PHP functions hovered bring the docs from and there is code completion.

    Users can share extensions written for the platform and there are already good ones like iPhone/iPad simulator or a color theme manager.

    Years pass and browsers still render stuff very differently : ). It seems like they will keep doing so considering the different engines out there: WebKit, Gecko, IE, Presto (Opera).

    They have different defaults, some CSS properties don't work on another and there can even be inconsistencies when rendering JavaScript.

    BrowseEmAll is a Windows software for testing a website with many different browsers interactively and removing the pain out of the whole testing process.


    The software looks and works like a browser which allow us to select the rendering engine from a wide list of options:

    • Internet Explorer (7 – 9)
    • Firefox (3.6 – 12)
    • Chrome (12, 16, 19)
    • Safari (4, 5, 5.1)
    • Opera (10, 11)
    • iPhone, iPhone 4
    • iPad, iPad 2 simulator
    • Android (2.2, 2.3, 3.2 tablet, 4.0, 4.0 tablet)

    It is also possible to select the resolution and viewport (landscape or portait) for mobile + tablet browsers.

    Once a website is loaded with the browser of our preference, we can browse it like a regular website and see if things work as expected.

    Under the loaded website, there is a useful little feature, "Inspect and Compare", for comparing the HTML + DOM structure of the loaded URL with another browser to better locate any possible inconsistencies.

    BrowseEmAll Report

    As BrowseEmAll works on our computer, we can also test websites hosted locally and no need to upload them to the web.

    Besides browsing websites, the software can also automatically-generate cross-browser compatibility reports for selected browsers. The report includes screenshots with each browser and any HTML-CSS errors (if exists). 

    To sum up, BrowseEmAll is a very good option for very quickly testing websites across multiple browsers with a single installation. Specially, the local testing feature makes it pretty unique.

    How to join the giveaway?

    BrowseEmAll is giving away 5 Professional licenses (worth $89/each).

    In order to join the giveaway, you can choose one of the methods below or do both to increase your chances:

    Winners will be selected randomly on 06 Jun 2012 (1 week later). Good luck to all.

    The winners

    Here they are:

    • DR (comment #607895)
    • ‏@ptamaro
    • Roger Willis (comment #605492)
    • Murat Pala (comment #610234)
    • @michelfortin

    Congratulations to the winners and thanks to everyone for joining the giveaway.

    GitHub is one of the most popular hosted version control services around and, besides its premium plans, usage is completely free for open source projects.

    Many widely-used projects are hosted there (including Node.js Ruby on Rails, PHP or jQuery) and it definitely helps taking the code under control + improving the code with the contribution of others.

    If you are like me; "work better with GUI apps rather than the command-line" and use GitHub, they now have free-to-use desktop apps for popular operating systems.

    GitHub for Windows

    Lately, they had launched GitHub for Mac and, now, GitHub for Windows is released.

    Both applications offer almost all the functionality that can be reached from command line tools and ease the usage for developers like me : ).

    If you like working with lightweight editors when coding or willing to switch to a lighter one, Intype is a very nice option.

    It is a fast-loading text editor that has support for syntax highlighting and snippets on most of the popular languages (and new ones are being added regularly).


    The application can handle multiple projects, allows browsing/managing the files of them and comes with advanced editing features like:

    • the ability to select multiple text and editing at once
    • smart column selection (selecting all text inside an unordered list)
    • snippet insertion
    • and more..

    P.S. It also has a "distraction-free" editing mode which is great for focusing on the code and nothing else.

  • Tags:
  • Filed under: Extras, Other License, Tools
  • If you already use it, then you know that LESS is a "time and byte-saver" when creating + serving stylesheets (if not, you should definitely check it).

    You either use the .less files directly (via less.js or on the server with Node.js) or compile them into CSS from command-line and use only the CSS.


    Crunch is a free Adobe AIR application that eases the compiling part without the need of command-line but via a user-friendly interface.

    It is a simple CSS/LESS editor with syntax highlighting and multi-tab support.

    Once a LESS file is saved, the CSS version is created automatically (which is handy for anyone willing to develop with LESS but don't want to rely on JavaScript on the client-side).

    There are various PNG optimizer apps for Mac OS X (check this WRD article for them) but only a few for Windows.

    PNGGauntlet is a free Windows application for squeezing each and every byte in PNG files.

    With a very nice drag 'n' drop enabled user interface, the application can optimize any given number of files pretty quickly.


    It combines the algorithms of PNGOUT, OptiPNG, and DeflOpt for creating the smallest file and generates a lossless output.

    The image to be minified doesn't need to be in PNG format, other popular formats can be used as well for converting them to PNG.

    There are also several settings for anyone looking to fine tune the compression process.

    Uptime Robot