Intereactive Web Design - Sugar Land, TX

PHP 5.2 brought us native use of a DateTime object for handling dates and times instead of using procedural date(), time() and strtotime() type functions. Among other things, this really helps us move away from thinking of dates and times in seconds (via a unix timestamp) and as such, having to save an integer in a database and/or using arithmetic (# of seconds X 60 = minutes, etc..) to manipulate dates.

So now that we can think of dates and times as a true date (e.g. 2009/04/27) all the way from PHP to MySQL, using a true date/time column type, it really speeds thing up. However, in the native DateTime class constants there is not a MySQL format for inserting the date object directly into a database. I realized that all I needed to do was create my own constant that aligns with the prebuilt ones.

Here is the only code you need

define('DATE_MYSQL', "Y/m/d H:i:s");

Here it is in context.

define('DATE_MYSQL', "Y/m/d H:i:s");

$dateTime = new DateTime("now");
echo $dateTime->format(DATE_MYSQL);

You’ll notice I use the same format as the other date constants like DATE_RSS to be consistent. Also note that with this same code you can set up any type of format that you can use on your site or in your code.

Alot has happened in the last month or so around our little company. And while so much of it seems like steps backward, I feel like we’re progressing forward more than ever. Here’s a rundown of everything that has been going on the past few months with us both good and not so good and hopefully you’ll see why the blog has been so dead as of late.

The company

A year or so ago we scaled back our client based work to set our focus on an idea for a web application that we really believe in and believe can help solve alot problems (and create some form of world peace). That change also brought a new opportunity for Phil to work for a great design company called Springbox in Austin as an Art Directors, but continuing to head up the creative direction here at Intereactive. Over the past year our interests have taken different paths and as of this April, we all came to terms with the fact that Phil will no longer be here at Intereactive. Major bummer. We left on probably the best terms ever, so I can’t complain at all. In fact I believe trying to plod ahead when people aren’t “into it” really hurts you more than anything. If you are a fan of Phil’s work please check him out over at philcoffman.com.

Mootools to Jquery

On a more technical note, the aftermath of our time at the SXSW conference left us with a major change to our JS framework. Chris and I went in to a Javascript panel where John Resig (creator of jQuery) was speaking and we both left with a very uneasy feeling about using our current framework Mootools. Let me make one thing very clear… We still love Mootools. And honestly, it’s very hard to pinpoint our exact reasons for switching. But chiefly among them was that we felt that while Mootools is a very strong framework, jQuery has a much brighter future. There seems to be much more involvement in releasing new code and more innovative ways in solving some of the problems. We’ve currently re-written all our code within Mosaic using jQuery and it’s much shorter (for whatever that is worth). There are definitely shortcomings in the animation side of things, but all in all we are very happy with the move.

Focusing on the basics – a PHP framework

We are mainly a PHP shop that has been writing code since before most people knew what a framework really was, so when it came time to start writing an application we pretty much already had our own lean, mean framework that we were already familiar with. The last few months we’ve taken that framework and really oiled the gears and shined up the fenders and made it into a full blown MVC framework using syntax that we are familiar with. With Chris’s insistance, we’ve broken it out of the application, made it it’s own project, and given it life through the name “Akira”. The name Akira comes from the name of the Commander of the Black Lion (the core leader) of Voltron… so in turn, our Akira is also the core of what makes an overall project work and function properly. Well that and we’re just geeks at heart. It’s something we can quickly plop onto a blank slate and have an idea fleshed out in less than a day. Just yesterday I coded up an entire home finance manager for my personal use in less than 5-6 hours using the framework.

And before we get the request… no, we won’t be releasing it to the public. It’s honestly no better than CodeIgniter or Kohana… we are just familiar with the methods and syntax of our own stuff so it’s faster for us to write. If you aren’t using a framework.. Use one! I suggest Kohana.

Errata

So in summary… we lost a badass designer (very sad), switched to an awesome JS framework (very happy), and spent way too much time developing Akira (very very happy). There are countless other things that have sidetracked us over the past year such as redefining our goals, having kids, taking vacations and going to conferences. But now I believe we have the focus we need and the tools to get there. It’s amazing how change can be so frustrating, but once you are through it, it is so freeing. We’ll be reworking the Intereactive site soon to be more inline with who we are now and also be showing off some features of Mosaic in the blog in the next few weeks or so.

Overview

MultiSlide is a Mootools class that will group multiple slide effects together and allow you to slide them all in or out at one time. MultiSlide will also allow you to retain individual control over each slide and it contains several callback events for easier integration into your UI.

Current Version: 1.0

Download

Source is hosted at GitHub

Features

• Built on Mootools 1.2 and weighs in at 4kb (uncompressed)
• Opening or closing of multiple slides with one button
• Retains individual control over each separate slide
• Uses customizable CSS classes for hooks, so that no additional markup is needed
• Several callback events for custom UI controls
• Transition speed and type are configurable

Demo

• Basic Example
• Example with a few more options

How To Use It

The basic structure should closely follow the following structure when building multiple slides. You can have as many of the “ms_container’s” as you need and all are controlled by the top two elements. Consider each of the following sections as an HTML element with the class name as shown. Please note that these are just the default class names and can be replaced with your own custom ones to reduce markup.

The standard way to initialize MultiSlide is to call the class and pass in the CSS class name of the element that wraps each slide. In this case it would be:
var multislide = new multislide('ms_container');
You can also call the “expand all” and “collapse all” methods from your javascript by calling:
multilside.expand_all();
multilside.collapse_all();

Please read the documentation below and look at the demos to see how to further customize the MultiSlide class.

Documentation

Syntax

new multislide(container_class [, options]);

Arguments

• container_class – (mixed) A string of the CSS class name that wraps each slide instance
• options – (object, optional) key/value set of options

Options

• slide_duration – (number) duration (in milliseconds) of the slide; defaults to 300
• slide_transition – (string) transition that the slide should use; defaults to ‘sine:in:out’
• class_expand_all – (string) CSS class name that is applied to the element that will expand all the slides; defaults to ‘expand_all’
• class_collapse_all – (string) CSS class name that is applied to the element that will collapse all the slides; defaults to ‘collapse_all’
• class_toggler – (string) CSS class name that is applied to the element that will toggle the individual slide; defaults to ‘ms_toggler’
• class_expander – (string) CSS class name that is applied to the element that will be the slide; defaults to ‘ms_expander’

Methods

• expand_all – Used to expand all the slides at one time
• collapse_all – Used to collapse all the slides at one time

Custom Events

• onExpand – Fired anytime a single slide in the group is exapnded by it’s toggler. Passes the toggler element that was clicked back to the event to be able to make UI changes.
• onCollapse – Fired anytime a single slide in the group is collapsed by it’s toggler. Passes the toggler element that was clicked back to the event to be able to make UI changes.
• onExpand_all – Fired anytime the “exapand all” runs
• onCollapse_all – Fired anytime the “collapse all” runs