I recently pushed another feature pre-release (v0.7.0) of Reken and with this I call it  feature complete for the first major 1.0 milestone.  I started development of Reken in 18 months ago and feel it now has critical mass.

There will need to be some fixes; functional, performance and code size wise before removing the pre-release label.

This last feature release focussed on adding timer support. I added two new attributes: data-timer and data-interval.

The data-timer Reken attribute allows you to add a timeout on an element. This is handy for example to briefly show a self disappearing message. Another example is to add an animation effect and then remove it after a set amount of time. The attribute takes 3 parameters in its value, seperated by colons.

  1. The timeout in milliseconds.
  2. A boolean expression that triggers the timer when true.
  3. The code to execute when the timeout occurs.

For example the following code changes the text on a button for 1 second after the button is pressed 

<button
	data-timer="1000:pressed:pressed=false"
	data-action="pressed=true"
	data-text="${pressed?'pressing':'press me'}">
</button>
data-timer example

With the data-interval every time interval some code gets executed. With this functionality you can update a counter. 

<button>
    data-interval="1000:counting:counting--;if (counter==0) counting=false;"
	data-text="${counting?count:'Start'}"
	data-action="counting=true;counter=30"
</button>
data-interval example

I created a fun demo showcasing the data-interval attribute on the Reken demo website based on the "game of life".

Screenshot of "Game of Life demo"