Archive for the ‘Tools’ Category

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