Monthly Archives: March 2012

Tour Dates Artist Event Schedule Component 3.0 Has Been Released

Are you running a band website? Have you been looking for easy management of tour dates? If the answer is “yes” – do not look any further, because TourDates by Acid.JS is the right tool for you. It has it all – modern looks, easy to use, fully ajax-driven admin, full browser support and amazingly small footprint. I bet that your band will certainly love it!

Key Features

  • Fast and reliable, with extremely small footprint compared to it’s amazing functionality.
  • Lightweight admin with cool and easy to use UI, event drag-and-drop, etc.
  • Venue, tickets provider, support band and country management.
  • Fully customizable and localizable templates powered by Pisi Template Engine.
  • Social and sharing buttons on the public page.
  • Cool set of imageless CSS3 skins with fallback for older browsers.
  • Drag-and-drop rearrangement of the public page columns order.
  • Can be easily branded with band’s logo, etc.
  • Event date-picker.
  • Data backup.
  • Event editor.
  • CSS, templates and JavaScript are gzipped.
  • Suitable for any kind of artist.
  • If you are logged in, the admin can be accessed directly from the public front-end of the component
  • And yet more loads of cool stuff. Just check it out…

Requirements

  • Web-server with PHP support.
  • Standards-compliant (HTML5, XHTML1.0, XHTML1.1) or Skinny DTD public page.
  • JavaScript must be enabled.
  • Cookies must be enabled.

Admin Screenshots (If accessed from the front-end public page)

And Now… What?

Want to give TourDates by Acid.JS Web.UI a try? Start by it’s info and demo pages, and if you like it, why don’t you download it and try it at home? The help and manual page is available here.

How to Find Instance Name(s) of a JavaScript Object

For a project I was recently working on, I needed to get reference to object(s)’ instances and respectively their methods and properties, so below is the solution I came up with. getInstancesOf() is a JavaScript function that checks for instances of an object within a defined scope and returns an array of instances’ variable names that can be used for different purposes.

/**
* Get instance names of an object
* @param object - object name
* @param scope - window, parent, etc
*/

function getInstancesOf(object, scope) {
     "use strict";

     var
        instances = [];

    for(var v in scope) {
        if(scope.hasOwnProperty(v) && scope[v] instanceof object) {
            instances.push(v);
        }
    }
    return instances;
}

And a few tests, in which we create a couple of instances of the MyClass object:

(function() {
    "use strict";

    function MyClass(name) {
        this.name = name;
    }
    MyClass.prototype = {
        myMethod: function() {
            console.log("MyClass.prototype.myMethod(): " + this.name);
        }
    };

    window.MyClass = MyClass;
})();

var
    instance1 = new MyClass("property of instance1"),
    instance2 = new MyClass("property of instance2"),
    instance3 = new MyClass("property of instance3");

// get length of instances of MyClass
console.log(getInstancesOf(MyClass, window).length); // 3
// get the name of instance1
console.log(getInstancesOf(MyClass, window)[1]); // instance2
// get the name of instance0
console.log(getInstancesOf(MyClass, window)[0]); // instance1
// loop through all of the instances of MyClass, and call it's test() method
for(var i = 0, len = getInstancesOf(MyClass, window).length; i < len; i ++) {
    window[getInstancesOf(MyClass, window)[i]].myMethod();
}

Related Posts

CSS3 Animations Without Keyframes

Here’s how to turn a CSS3 keyframe animation to hard frame animation, which can be used to create flip-book like effects with background image sprites, etc. Just change your animation-timing function to “step-start”:

animation-timing-function: step-start;

Step-start is currently implemented in all browsers which support CSS3 keyframe animations, and you will need to use the vendor-specific properties for each one.

Overriding the Default Placeholder Styles for Loading and Broken Images in Firefox

A quick and dirty trick for overriding the system styles of the loading and broken image placeholders in Firefox in case you have ever wondered if it is possible:

@-moz-document url-prefix() {
    /* hide the system icon for loading images */
    img:-moz-loading {
        visibility: hidden;
    }
    /* hide the system icon for broken images */
    img:-moz-broken {
        -moz-force-broken-image-icon: 0;
    }
}

Pisi HTML Template Engine 1.0 is Out!

Pisi is HTML templating engine that runs entirely in the browser. It can be used to scale down the size of ajax requests to the server by allowing them to switch from markup and data responses to data-only responses (for example JSON). Once fetched on the client, the data can be parsed by Pisi and converted to HTML and rendered on the page.

The syntax of Pisi is simple and intuitive, templates are cached on the client, so they can be used later, rendering process is fast, reliable and seamless.

Features

  • Easy and intuitive API.
  • Pure HTML with server-like function tags compiling to JavaScript.
  • Two types of templates – on-page and external.
  • Templates are compiled and cached for later use.
  • Fast and seamless execution parsing and rendering.
  • Support for different data types – variables, arrays, associative arrays (json), etc.
  • Any JavaScript can be embedded directly to the template.
  • Library-independent.
  • Only 3Kb minified and gzipped

Some Example Code

Template:

<script type="text/x-pisi-template" id="al_pacino_movies">
<h4>Al Pacino Movies</h4><ul>
<% for(var i = 0; i < pacino.length; i ++) { %>
    <li><a href="http://www.imdb.com/find?q=<%= pacino[i].replace(/s/g, '+') %>&s=tt" title="Search IMDB for <%= pacino[i] %>" target="_blank"><%= pacino[i] %></a></li>
<% } %>
</ul></script>

Data Object:

var pacino = ["Serpico", "Dog Day Afternoon", "Scent of A Woman", "Insomnia", "Carlito's Way", "Heat"]

Template Call:


_pisi.setExternal([{
    template: "al_pacino_movies",
    data: pacino,
    callback: function(html) {
        document.getElementById("movies").innerHTML = html;
    }
]}

Rendered Markup:

<h4>Al Pacino Movies</h4>
<ul>
<li><a target="_blank" title="Search IMDB for Serpico" href="http://www.imdb.com/find?q=Serpico&amp;s=tt">Serpico</a></li>
    <li><a target="_blank" title="Search IMDB for Dog Day Afternoon" href="http://www.imdb.com/find?q=Dog+Day+Afternoon&amp;s=tt">Dog Day Afternoon</a></li>
    <li><a target="_blank" title="Search IMDB for Scent of A Woman" href="http://www.imdb.com/find?q=Scent+of+A+Woman&amp;s=tt">Scent of A Woman</a></li>
    <li><a target="_blank" title="Search IMDB for Insomnia" href="http://www.imdb.com/find?q=Insomnia&amp;s=tt">Insomnia</a></li>
    <li><a target="_blank" title="Search IMDB for Carlito's Way" href="http://www.imdb.com/find?q=Carlito's+Way&amp;s=tt">Carlito's Way</a></li>
    <li><a target="_blank" title="Search IMDB for Heat" href="http://www.imdb.com/find?q=Heat&amp;s=tt">Heat</a></li>
</ul>

If the above looks and sounds cool enough, you can go to Pisi's home page, view the demo or download it and use it in your own projects. You can also check Templatr - another cool fully client-side JSON to HTML template engine by Acid.JS Web.UI.