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

Archive for the ‘Tools’ Category

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
  • 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!

    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
  • 0 Comments
  • 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
  • 0 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com