Categories

Marx.js – Web Developer’s Best Friend

11/30

Spread the word

I was building and testing a web application for work with incredibly long forms, of which were mostly select fields. For my testing, the data entered really didn’t matter so I was using Web Developer, a google chrome extension, to populate the form fields. The problem with this extension is it does not populate selects and it populates inputs and textareas with the name attribute of the input, which is nonsensical, if you ask me. There had to be a better way…

The Better Way

This led me build a plugin called Marx.js. This plugin gives the developer a small widget that can either be a button just to populate a form or a small control panel to provide more functionality.

Marx.js populates form fields with names of the Marx Brothers, their characters and movies, while selects, radio buttons and checkboxes are selected randomly. But wait there’s more!

Features at a glance:

Populate inputs, smartly

Randomized selection

Widget Positioning

Toggle Controls

Marx Ipsum Generator

Marx Images

Standard Control Panel

Advanced Control Panel

Control Panel Toggle Advanced Functions

Control Panel Toggle Advanced Functions

Control Panel Toggle All

Control Panel Toggle All

Populate Inputs, Smartly

Marx.js provides values for inputs based on input type. So <input type="email"> will be populated with something like firefly@animalcrackers.com which is built using the Marx Brothers data. Other fields such as number, date and url are also recognized and populated appropriately.

Randomized Selection

The Web Developer extension does populate checkboxes and radio buttons but checks all of them. Which means you cannot get any type of randomization to your forms.

Marx.js is built to randomly select one radio button from each radio group and randomly selects one or more checkboxes from each checkbox group. Selects, though, are the big deal here and one of the main reasons I built Marx.js, the Web Developer extension does not populate these at all. Marx.js not only does, but selects an option randomly.

Widget Positioning

By default the Marx.js widget is fixed positioned in the bottom-right corner of the browser window and is collapsed. This keeps it out of your way until you need it. But not all web pages and forms are the same, which is why I built in the ability to select which corner of the browser you wish to place the widget.

Toggle Controls

Marx.js was built with multiple control panel views. Minimum is just the button that populates your whole form, standard provides a simple control panel with buttons for populating the form or specific input types, and advanced provides more functions like, show hidden fields, expand selects, clear form and generate ipsum text.

Marx Ipsum Generator

With Marx.js you can easily get filler text or Lorem Ipsum that is actually monologues from the Marx Brothers’ movies. You can select the number of paragraphs you need through the advanced control panel.

Marx Images

Also through the advanced control panel you can easily download random images for testing file uploads or just place holder images for your markup.

The Marx Brothers

If you’ve never heard of the Marx Brothers, it’s probably because you are under the age of 40. The Marx Brothers were an American comedy team that started on the stage as a Vaudeville act and as their popularity grew they went on to make 14 movies together between the years of 1921 and 1949.

The Marx Brothers were made up of five brothers. Chico, Harpo and Groucho were the core of the team and were in all of the movies, Gummo and Zeppo were the two youngest and played the straight man in the act. I highly recommend watching any of their movies and would probably start with Animal Crackers, Night at the Opera or Day at the Races.

Quick Start

Simply download the library, link to it in the <head> of your HTML page and initialize the Marx.js class.

Ruby on Rails Gem

I also created a Rails Gem for easily adding Marx.js to your Rails applications.

If you’re using Ruby on Rails you can simply add the gem to your Gemfile gem 'marxjs-rails' and then run bundle install. Lastly be sure to include Marx.js in your app/assets/javascripts/application.js like so: //= marx

Road Map

So as you can probably guess, Marx.js has been released as a beta for now and I have plans for updates, features and packages for it. Which means I would love to hear any feedback, bugs or feature requests you may have, after you’ve tried it out. Just hit me up on Twitter or create an issue on the gitHub page.