Published 16 years 4 months ago • Last updated March 22, 2025 • ⏱️ 4 min read
My one man mission to create a social coding network is going well, if you read this blog previously you'll remember my attempts at a JavaScript sandbox until I finally settled on JSReg as a method. I've refined the process of creating tags after trying to build them myself using the editor.
Login to Hackvertor and click "Create tag" this will give you a JavaScript editor with a default blank tag. I've added this as guidance, the first part of the sample is a simple if statement that checks the first param for something. Params are tag params that the user can change when using your tag, the editor has these three params on the left hand side so that you can test. Lets say your tag supports one parameter and either encode or decode, place encode in the first param box and you can test that state in the editor.
You might notice that the sample tag uses an anonymous function, this makes it easier for you to return the output from the tag. You don't need one for simple tags but I recommend you use one when developing more complex ones.
The left hand side also contains "name" which is the name of your tag and category to appear in the application home page, the help text at the bottom lets you describe what your tag and params does. This is useful for the user as before they add the tag they can hover over it and read what it does.
Every tag extends the special object property "HV" which allows you to reuse your code and others. Lets say you want to reverse some text, rather than writing this yourself you can use the HV object like so:-
<pre lang="javascript"> code = code.HV('reverse'); (123).HV('reverse') </pre>Notice this works with any object as demonstrated in the second part of the sample code.
In order to work with user input a special variable is automatically assigned called "code" you can test user input by placing something in the user input box above the editor. This automatically gets assigned to "code" and allows you to test your tag. Each time you modify the tag the code is automatically executed and any syntax errors will be reported.
You can also look at previous tags for inspiration.
Like anything the sandbox isn't perfect, one of the most common problems you'll encounter will be arrays. When using arrays you need to make sure you define them using Array() not [] as it is assumed in the sandbox that [] is a object property accessor. Using the Array constructor can be tricky because Array(1) creates an array with a length of 1 but NOT with a value of 1 in the first element.
Try not to use complex for loops and avoid for..in loops where possible until the sandbox handles loops more effectively.
I've added a fun element to creating tags. When you add tags in Hackvertor you get points and a special, when someone votes for your tag you get points, if a tag is malicious or bad you can get points removed. When you reach a certain status with the amount of points you've accumulated you'll be able to perform a special power.
There are currently 7 special powers and depending what status you are you'll be able to use them on weaker foes. This feature is experimental and I could remove it change it slightly depending on the results. Points can also be negative and will be awarded if a user tries to do some vote rigging or maybe forgets to select a user to perform a special power on. You've been warned :)