Announcing JS Space!

I am so excited to share this with you!

From the README:

JS-Space a tool/game that will generate a mostly-realistic galaxy from a seed, then let you navigate around it to view the various stars within the galaxy. It’s designed to work well on computers and mobile devices.

How to Use:

  • Use the arrow keys on screen, or on your keyboard to navigate about the galaxy.
  • Click/tap on a star to view it’s details.

Links:

Some Neato Features

  • It’s Open Source!
  • Only vanilla JS was used, no jQuery or anything else.
  • Alter the config.json to change the number of sectors that are generated, min distance between generated stars, etc.
  • The Sector View window is calibrated on page load, so on your phone try loading it in portrait vs landscape mode to see different layouts.
  • All the star details are mostly realistic main sequence type stars, with appropriate percent chance of existing. (Class M are much more common than class A, for example.)
  • You can pass in a seed via the URI. For example: https://js-space.graviton.systems/?seed=reverse_the_polarity . Otherwise it uses the default seed.
  • No images are used, it’s all done via CSS and/or HTML Canvas elements
  • The entire payload of this is less than 25kb! (when accounting for gzip)

Here is how it looks on a mobile device:

js-space2

Why Did you build this?!

A great question. πŸ™‚ Initially I wanted to make a MMO 2D Space game. I still want to do that, but after working on this early prototype, I am convinced I don’t want to do it in JS. Still, I learned a lot from this and definitely upgraded my JS skills.

Do you plan on developing it any farther?

I am thinking about adding the System View, so after you click on a star, you can also view the system of planets surrounding the star, click to get their info, etc.

Stop fighting and embrace the JS

I’ve slowly come to the belief that if you want to keep working on front-end web development, you are going to need to get your JavaScript skills pretty polished.

I’ve been using JavaScript for a long time, but only through the window of jQuery. I’d have many event listeners and do ajax things when appropriate, hitting API endpoints I made. That is all well and good, and honestly for simpler information sites that is probably appropriate. However when you start needing templates to insert returned data into, and are trying to push more application logic onto the clients browser, it quickly gets messy.

There are many front end JS frameworks out there, but like always I tend towards lean and extendable. I’ve started playing with mithriljs. I fully admit it was the name that attracted me to it. I am still taking baby steps, but so far I’m liking it.

I paused on working with mithriljs to brush up on my JS skills, since some of what mithril is doing is more than the simple JS I’m used to dealing with. I started reading through the O’Reilly book JavaScript, the Definitive Guide. Around 80% of what I come across I already know, but then I hit some element I’d never used before, or learn some nuance I wasn’t aware of. It’s awesome!

Anyway, I am going to try to journal my progress and share neat things I’ve learned. Stay tuned!

Moving options between select boxes

Just a quick post. I needed to be able to display a multi-select box showing all the options available to a user, and allow the user to select one or several, and ‘move’ them to their list of chosen options. Then, when the form is submitted, make sure only the items in the chosen list of options is submitted.

Fairly easy right? It was, but took long enough that I wanted to share and tag appropriately, in case people come looking for it. πŸ™‚

Image of what I wanted:
Multiselect image

Link to my working JSFiddle.

HTML:

<form action="javascript:void(0);"> 
   <select multiple="multiple" name="all_options" class="all_options">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
    </select>
    <button class="go_in">in</button>
    <button class="go_out">out</button>
    <select multiple="multiple" name="chosen_options" class="chosen_options">
        <option value="7">Seven</option>
    </select>
    <br/><input type="submit" value="submit">
</form>

Javascript:

$('.go_in').click(function() {
    return !$('.all_options option:selected').remove().appendTo('.chosen_options');
});
$('.go_out').click(function() {
   return !$('.chosen_options option:selected').remove().appendTo('.all_options'); 
});
 
$('form').submit(function() {
    $('.all_options option').prop('selected','');
    $('.chosen_options option').prop('selected','selected');
    alert($(this).serialize());
});

JPEF Magic!

Links to the code first!

Github: http://github.com/timbotron/JPEF-Magic

What is JPEF Magic, you ask?

JPEF (Javascript, PHP, Email Form) Magic is a package which handles email forms in an elegant and simple manner. Essentially, it lets you add email forms to your site and deploy addition email forms down the road much quicker then creating each one from scratch.

Notable features..

  • Consolidation; instead of validation and post-processing on each form page, handled with one file
  • Email generated has full text from questions on form
  • Settings for email processing (Email Subject, From, etc) are handled in hidden inputs on form
  • After success, passes all the email body to the ‘on success’ page you’ve set up
  • Allows you to have one “Form submitted successfully” page, with the users info displayed.

Why did I make it?

I come across this need all the time. I always think, “Oh I’ll just throw a form together.” but after you take care of the php to mail it, error checking, it does take time. Couple that with the fact I hate using the name value in emails as the question. I wanted a way to just have the exact language of the question on the form be what was included in the email, with minimal duplication by me. Hence, JPEF Magic was born.

Check out the demo at: http://lab.citracode.com/jpef_magic/