Craft JavaScript-Powered Sites Easier with Lucid

Almost every web site begins life as a specially formatted text file. Initially, the web consisted of static HTML files usually create in text editors. Soon the rise of the WYSIWYG (what you see is what you get) web editors to sought to hide this code and present an editor more like Word or other popular word processors. This would allow the creation of web pages without the need of learning HTML.

Building better development environments is one of the holy grails of computing. At heart all computing is zeros and ones, but no one programs at that level. Instead we use higher level languages to bring concepts into execution and let the computer translate those languages to code the computer understands. On the web, much of the interactivity you see that drives everything from photo galleries to web apps like Google Docs is coded in JavaScript. It’d be too complex for someone with no experience to use on day one to design their own site, but it’s not so complex as to be unapproachable. But surely there’s an easier way to make an interactive site without having to become a developer.

That’s where Lucid comes in. It’s a new tool from The Escapers that’s designed to help you code JavaScript-powered sites in a simpler graphical interface. Let’s take a look.

Like the article? You should subscribe and follow us on twitter.

What is Lucid?

Lucid is designed to allow a user to add dynamic effects to otherwise static web pages. Normally these features would require writing JavaScript code, but in Lucid, you can add animations and other active content to an otherwise static web page using drag and drop. The program supports animations, maps, and charts among other common effects. You drag and drop the elements that you want and Lucid generates standard Javascript to implement the features using standard, popular libraries such as jQuery.

Sample Included Workflows

Lucid includes several example workflows.

The program works by letting you create workflows consisting of actions and bindings. Actions perform an activity normally to or with an object on the web page, while bindings attach actions to objects on the web page. You create the workflows by dragging and dropping actions and bindings onto the page and then linking them together.

Lucid creates JavaScript code based on the workflows you create and adds it to your web page. Included in the JavaScript code will be comments that allow Lucid to maintain and edit this code as you make changes to the workflows. The generated code should run in any browser including mobile browsers such as Safari on the iPhone. You can also edit the code Lucid generates to customize the results. When done you can export the finished site in compressed code that removes the comments, though this minimized code cannot be brought back into Lucid.

Building Workflows

Lucid includes an introductory tutorial in the help and the web site contains two video demonstrating use of the program. These three resources will help you get a better grasp on the program and its abilities. You can use any HTML page in Lucid, but only static HTML pages are supported. You begin by either creating a blank project or import an existing web site as a project. You then let Lucid add the standard jQuery and jQuery UI libraries along with their custom library libraries to the site if not already included them.

Binding an Event

Binding a Click event to a blue square on a simple HTML page.

Next, you can create workflows in Lucid. For each workflow, you first create a binding. A binding is a combination of an object on a web page and an event on that object. The event will normally be an action by the viewer such as clicking an element of the page, moving the mouse over an item on the page, or pressing a key. To each binding you can then link a sequence of one or more actions. Each action will perform an activity. The activity may be an animation, a call to another web page, starting a timer, or other common dynamic functions. In many cases the action will have an effect on an element on the web page, but not usually the same as the one connected to the binding.

Simple Workflow

A simple workflow to fade a blue square when clicked.

As an example imagine that you have a blue square on a web page. When that square is clicked you want it to fade away over a second and a half period. The binding would be the click on the blue square. The action would be an fade animation bound to the square that will slide it down the screen.

Graphically, the window in Lucid will show these connection by drawing lines from the event to the action and from the event to its bound element and from the action to its bound element. The right side of the window shows a visual representation of the static web page you are working with. You cannot edit the page in this window, but use it to connect actions and bindings to objects on the page. Lucid also includes a Preview mode that allows you to use this window to test your page.

On the left you see your workflow for the page. At the top of the workflow your bindings are displayed. Below this your actions will be displayed. Lucid displays the relationships between bindings, actions, and elements on the web page using arrows and lines. For a complex workflow this display can get crowded quickly and Lucid allows you to temporarily hide parts of the workflow for clarity.

How Does Lucid Do?

Lucid’s goal is to simply adding dynamic actions to basic web sites without requiring the creator to learn to program JavaScript. To a large degree it succeeds. You can create some pretty good and impressive effects without knowing much JavaScript, if any. The drag and drop interface is intuitive and I ran into few bugs while testing the program. If your desired effects are simple and your site consists of static HTML pages, then you might be able to create a full workflow that meets your needs. If your site is dynamically created by a server or uses a framework like WordPress that is, then Lucid will not work for you.

Photo Gallery Sample Page

An included more complex example of a photo gallery web page.

I found that the program still assumes some familiarity with JavaScript. Many actions require some knowledge of the options and settings you’d use if writing the code directly. The names of actions and bindings also require some knowledge of HTML and the best practices on building pages to get the maximum effect. It’s an impressive start, but at this point Lucid won’t eliminate the need to know JavaScript for more complex or polished results. Lucid works well as a tool to add some interest and interactivity to a basic web site. I look forward to seeing how the tool evolves and if it can abstract many of the areas that now require programming knowledge.


Summary

Lucid seeks to make adding advanced tools to static web pages as simple as drag and drop. While not completely there, it has great promise and can help create the basic Javascript code for many effects.

7
theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow