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

Archive for the ‘Tools’ Category

Lately, a post at WRD had introduced Hack St. which was a handy web app for debugging HTTP requests.

Postman is a similar tool with more features and comes as a free Chrome extension.

It allows sending any type of HTTP requests (GET, HEAD, POST, PUT..) with any number of parameters + headers.

Postman Chrome Extension

There is support for different authentication mechanisms (basic, digest, OAuth) and the response received is syntax highlighted (HTML, JSON or XML).

Postman keeps a history of requests so that we can easily re-send them later and has a “collections” feature for storing all requests to the same API/domain.

The extension even has some more features to simplify testing and debugging of HTTP requests. A must-have for every web developer.

When we want to test how a web project will render in a different browser, we usually copy/paste the URL in the new browser and load it.

Catapulty, a bookmarklet, has a simpler solution that reduces the steps involved (copy, paste and hit “enter”: 3 steps).

There are 2 bookmarklets: throw and hit. When we press “throw”, the URL to be loaded in other browsers is stored by the service and, when we press “hit” in other browsers, the URL is loaded there. That simple.

Catapulty

  • Tags:
  • Filed under: Extras, Other License, Tools
  • 1 Comment
  • KineticWing is a free IDE that is lightweight, portable and works on all major operating systems (Mac support is mentioned to be coming soon).

    It is not a complicated IDE but more like a smart text editor with modern features.

    These features include support for Sass or Less (with built-in compiler), HTML5-CSS3 or CoffeeScript.

    KineticWing IDE

    A great feature is the ability to extending it with JavaScript plugins and there are already many like JSHint, JSLint, Less Compiler, JSBeauty..

    KineticWing is supporting server-side languages as well and more of them are being added within time.

    The editor is not yet perfect, it is in beta status, but the features and roadmap are very promising.

    Google Chrome’s “Developer Tools” is what many developers use to debug client-side code.

    Chrome Logger is an extension that brings server-side code debugging to this tool.

    Chrome Logger

    It has libraries for PHP, Python, Ruby, .NET, ColdFusion and Node.js. Also, new ones can be created with the documentation provided.

    These libraries simply enable us to view variables in Developer Tools.

    Although each server-side language has their stronger debugger tools, using the same logging tool for client and server-side makes sense.

    Pingendo is a fresh IDE that is currently in beta status and available for Win + Mac.

    It is currently free (can become paid after the beta – no info on that) and focuses on easing web authoring.

    There is a DOM-tree editor which we can quickly view the tree and edit their styles and/or properties.

    Pingendo

    Pingendo has built-in support for Bootstrap + Foundation frameworks an Font Awesome (more such stuff will be added).

    Also, CSS rules can be edited visually, including CSS3 ones like gradients or transformations.

    When building websites with scripting languages that require compiling (Sass, Less, Stylus..), compiling them manually (or via refreshing the page) is usually an extra step.

    Prepros is an open source application for Windows OS that can do that automatically for Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown.

    Prepros

    It auto-compiles the source and injects the CSS (also HTML and JS) to the browser so that no refresh is needed.

    There are options for the compiling process like the output format or its style (compressed, nested..).

    Prepros also has a built-in + static HTTP server for testing any ajax requests.

    When working on a project, after each CSS or JavaScript update, the need to refresh the browser is a time-loss (and it is usually done 10s of times).

    Tincr, a Chrome extension, solves this by integrating itself into Chrome’s Developer Tools and auto-refreshing the browser once these files are changed.

    Tincr Chrome Extension

    It is not bound to any IDE and works with all of them. There are several built-in project types (Ruby on Rails, Chrome extensions, Atlasian projects..) and custom ones can be created for any custom CSS/JS structure.

    Also, it -kinda- converts the Developer Tools into an IDE by adding an auto-save feature to changes made to the code from Developer Tools

    HTML_CodeSniffer is a bookmarklet to check if a web page validates for the selected standard.

    The bookmarklet is open source, has a slick interface and currently comes with a set of 3 standards that enforce the Web Content Accessibility Guidelines (WCAG) 2.0.

    HTML_CodeSniffer Bookmarklet

    It displays the errors, warnings + notices and their details can still be viewed within the bookmarklet.

    The standards and their rules are hosted in the GitHub repository, so, once a new standard or rule is added by the developer, the bookmarklet will auto-update.

    You may have heard of Zen Coding before and it now has a new name and website: Emmet.io.

    Emmet is an editor plugin which has versions for many popular editors like Notepad++, Aptana, Coda, TextMate, Komodo Edit and more.

    Once installed, using a CSS-like syntax, it is possible to create bulk HTML and CSS code (or nay other programming language code) with a single line for coding quickly.

    Emmet

    For example, it can transform this command: ul#nav>li.item$*4>a{Item $} into an HTML unordered list with 4 items.

    It can also generate Lorem Ipsum text and much more complex outputs than the example above.

    There are various actions integrated for fastening the stuff more like splitting-joining, merging lines, browsing through important code points, etc.

  • Tags:
  • Filed under: Extras, Other License, Tools
  • 1 Comment
  • Working completely online is not only a getting popular trend but also something that happens slowly in the background almost without us realizing it.

    Many of us have online storage accounts to host our documents/codes, lots of web apps exist to help us accomplish our daily tasks (image editors, cross-browser testing tools, etc.).

    Orion Web IDE

    Orion, by Eclipse, is an open source and online IDE application (that is alternative to others) which can be a good alternative for anyone willing to create code online.

    It has 2 versions, hosted or self-hosted, and the self-hosted version requires Java to run.

    The application supports working with multiple projects, creating files/folders, FTP and there is Firebug + Git integration.

    Orion is extensible with its plugin system and it is well-documented.

  • Tags:
  • Filed under: Extras, Other License, Tools
  • 0 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com