Month: February 2012

Templatr – JSON to HTML Template Engine

Templatr is free, JSON-powered, fully client-side, library-independent, fast and responsive templating engine for HTML. It’s easy to define and use templates are parsed on the client and cached for later use. Ideally it can be used for AJAX-driven applications to reduce the requests to the server, as you can just get the data for the server and parse and render it entirely on the client by Templatr.

View demo of Templatr on this page, download it here or go to its help and manual page.

Advertisements

Funny, but True Facts About Novice Developers

The blog post for today is my ramblings about common mistakes that novice web-developers make during their first steps in programming.

Just for fun. They:

  • Use W3Schools as a primary source for programming knowledge and do not question a single line of code they find there. (“W3C is a mystery world which I should learn to comply to“).
  • Scorn unobtrusive JavaScript.
  • The first book on web-development they ever read is a mid-90’s apocryphal issue claiming that JavaScript is not a programming language. A claim they embrace and use as an excuse not to learn JavaScript.
  • Find it amazing to overuse animated gifs that poorly anti-alias with the background of the page.
  • Extensively use frames and iframes without any obvious reason or for positioning purposes.
  • Play with the DOCTYPE of the page (“What will happen if I use XHTML3.1 for my website?“) or simply dismiss it.
  • Add an XML prologue before the DOCTYPE just because they saw someone else doing it.
  • Rely heavily on the miracle of the absolute positioning, and in a month realize the gritty truth that their work looks different and in most cases unrecognizably broken on different screen resolutions.
  • Put a 25 megabytes of a lousy <bgsound />, that is blocking the entire website while being downloaded.
  • Don’t pay even the slightest attention to the word “cascading” in CSS.
  • Overload the website with tons of crappy ready-made JavaScript found over the Internet (title bar and status bar scrollers, marquees, etc).
  • Use JavaScript in order to achieve effects that are usually achievable with CSS.
  • Put a greeting message in a JavaScript alert(“”) on page load, which scares even them each time the page is loaded.
  • Wonder why their PHP code is not executed when the page is open from the local file system. Later they find that they can run their very own web-server.
  • Use 10+ different fonts (5 of which are totally exotic and only they and other 10 guys are the only persons in the world who have them installed) and a color-scheme that is causing nausea and nosebleed to visitors.
  • Don’t test with other browsers except their default one and are sincerely surprised that their new website looks crappy in Opera.
  • Use vendor proprietary JavaScript or CSS without providing solution for other browsers.
  • Use <br /> and &nbsp; for layout purposes.
  • Use inline styles.
  • Force certain style rules with !important instead of making use of the cascade in their styles.
  • Implement feedback forms without a server processing script and wonder why they don’t work. Do you remember action=”mailto:john@johndoe.com”?
  • Consider semantics, usability, accessibility and valid code useless stuff that they shouldn’t care of.
  • Use deprecated tags like <center />.
  • Start learning PHP or other server-side language before HTML.
  • Hard-code everything that should not be hard-coded.
  • Don’t care about encoding.

Do these facts sound familiar? Do you remember making at least 5 of these mistakes as a novice programmer?

Builder.CSS 2.0 Minifier and Merger is Out

The new and improved version of Builder.CSS Minifier and Merger is out.

What is Builder.CSS?

Builder.CSS is a free tool for merging and minifying style sheets into a single file and thus reducing HTTP requests and file download time. It features cool UI with various options for adding, removing and rearranging files via drag-and-drop, build and output options and is extremely fast and responsive even with a large number of files that need to be compiled. You can use it along with Builder.JS JavaScript Obfuscator, Merger and Minifier.

What’s New in Version 2.0?

  • Improved and faster performance.
  • New log viewer, logging each step of the compilation.
  • Ability to add more files from the UI.
  • Drag an drop functionality for rearrangement the order of the files.
  • Better HTTP error handling.
  • The actual merging and minification is now done entirely on the client.
  • PHP is now required only to write the output to a physical file if set to.
  • A number of issues and bug have been addressed and fixed.
  • Automatic check and notification is a new version is available for download.

Features:

  • Easily configurable list of files that need to be merged.
  • Minification options:
    • Remove line-breaks and tabs;
    • Remove extra white-space;
    • Remove comments;
    • Remove comments;
  • Two types for saving the output code – as a physical file or as a copy-paste string.
  • Drag an drop functionality for rearrangement the order of the files.
  • Log viewer, logging each step of the compilation.
  • Add /remove and rearrange files from the UI.

Requirements:

  • The latest version of Mozilla FireFox, Google Chrome, Apple Safari, Opera or Internet Explorer (9x+).
  • Web-server.
  • PHP if you wish to save the compilation about to a physical file.
  • JavaScript should be enabled.

Screenshots:

Get Builder.CSS. It’s Free.

You can download it from this link or from its home page on Acid.JS. If you like Builder.CSS, maybe you will find Builder.JS JavaScript Minifier, Merger and Obfuscator also useful tool. As usual, the new version has been included to the latest release of Acid.JS Web.UI.

JavaScript Merger, Minifier and Obfuscator

Following last week’s release of Builder.CSS, I decided to create a similar tool for merging, minification and obfuscation of JavaScript. I am happy to announce the result of my new experiment, called Builder.JS.

The major difference compared to Builder.CSS is in the UI. This time I decided to implement console-like interface that works with a simple set of commands for listing, adding, removing, settings options and building the list of files. Don’t be mislead by the screenshots – regardless of what you see, Builder.JS is an application that works in the browser. All you need is the latest versions of FireFox, Chrome, Safari, Opera or Internet Explorer.

Screenshots:

Features:

  • Any number of JavaScript files can be merged into a single, minified and obfuscated file.
  • The default options and files list are set in the constructor of the Builder.JS object declaration (in index.php).
  • The excellent Packer JavaScript obfuscation tool, created by Dean Edwards is integrated to Builder.JS, ensuring flawless obfuscation and maximum protection of the code.
  • Add, remove and build files and set options from a simple console-like interface and commands.
  • Various build options – Base-62 encoding, variable name replacement, minification, etc.
  • Two types of outputting the result of the build – as a string, that you can copy and save manually or automatic saving to a physical file (using PHP).
  • You can use the Up and Down arrows of your keyboard to repeat previously used commands.

Requirements:

  • The latest versions of Mozilla FireFox, Google Chrome, Apple Safari, Opera or Internet Explorer.
  • Web-server.
  • PHP (if you wish to save the build output to a physical file).
  • JavaScript should be enabled.

You can download Builder.JS directly from this url or go to it’s home page on Acid.JS. You can combine it with Builder.CSS. Happy use!

Builder.JS is also included in the latest release of Acid.JS Web.UI.