Tip: Lorem ipsum Database Generation

So you’re working on a web site, eh? You need some data in your database to do accurate testing!

I’m working on a side project, where all of the content is AJAX’d in. To make this work, I had to create a small script that would fill a collection in my database with misc information.

Previously I was working with MySQL and Postgres, which are a bit of a pain. You need to have some script output a large JSON file, which is often stored in repos, and bloats everything up. These are called “fixtures”. They are then imported into a database using shell scripts or similar, cause lots of problems when the APIs change, etc.

To remedy this, I used a script which connects to the database using the same API as my application would. I have that API defined in a file called database.js.

The code isn’t pretty, but it is two things.

  1. Modular.

    it allows me to add more fields, remove things, change things, and modify things with ease. I want three words in a name, or maybe one? I can just change the parameter for rWords.

  2. Quick

    some would use a weird framework to do stuff like this, but I have functions like pickOne committed to memory. Instead of typing some likely text I found lorem ipsum text (remember this query, and click on the first result).

var db = require(‘./database’);

function pickOne(opts) {
    return opts[Math.floor(Math.random()*opts.length)]
}

function rWords(count) {
    var lorem = "sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem ut enim ad minima veniam quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid ex ea commodi consequatur quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur vel illum qui dolorem eum fugiat quo voluptas nulla pariatur";
    var words = lorem.split(" ");

    var chosen = [];

    for (var i=0; i<count; i++) {
        chosen.push(pickOne(words));
    }
    console.log(chosen, count);
    console.log(pickOne(words));

    return chosen.join(" ");
}

function rWord() {
    return rWords(1);
}

if (require.main === module) {
    var total = 100, completed = 0, i;

    for ( i = 1; i <= total; i++ ) {
        db.newBlend({
            path: "/files/" + rWord() + ".blend",
            name: rWords(2),
            category: pickOne(["materials", "tools"]),
            description: rWords(14),
            appendType: "Object",
            appendName: rWord(),
            rating: Math.floor( Math.random() * 6 ) * 5,
            ratings: 5,
        }, function () {
            completed++;

            if ( (completed / total).toFixed(2) !==  ((completed - 1) / total).toFixed(2)) {
                console.log(Math.floor(completed / total * 100) + "% done");
            }

            if (completed === total) {
                process.exit();
            }
        });
    }
}

Take it, modify it, or just learn to write your own. I spent about 10 minutes writing that, and it’s saved me hours so far. It takes about 3 seconds to run on my computer, so I usually see a flash of percentages, and then it’s done.

Tip: Build Grunt Projects with a Link or Bookmark

I use grunt in all of my projects, and grunt-watch never quite works. So I’m always running grunt on the command line, and then switching to the browser. To fix that, I decided to abuse HTTP Status Codes and NodeJS.

I made a little node script in the root of my project, which contains this.

var http = require("http");
var exec = require('child_process').exec
var server = http.createServer(function(request, response) {
    response.writeHead(204);
    exec("grunt");
    response.end();
});

server.listen(5173);
console.log("Server is listening");

Then I created a bookmark, but you could also have a link on the website itself or do something silly like curl on the command line anyway. Point the link to http://localhost:5173

Now run the server

node gruntlet.js

And any time a http request is made to port 5173 on localhost, it’ll invoke grunt.

If you haven’t tried it yet, you’re probably thinking “Well, that’ll try to navigate to localhost:5173 in the browser!”. That’s where the trick is. We’re using the little-known status code 204 which means “No content”; and browsers won’t navigate to the URL, meaning you can hit F5 and you’ll get the new build.

Developing Tumblr Themes Easily - Blog #2

I’m working on a theme for tumblr, which is featured on this blog. Historically, tumblr theme development has always been terrible.

The old process:

  • make a huge HTML file (hundreds or thousands of lines)
  • copy that to the clipboard
  • paste it into the tumblr theme editor
  • press update
  • look
  • go back to the code and pull your hair out

My process:

  • create directories for each type of post, and other fragments
  • use grunt to combine these into the single HTML file you want
  • have tumblr automagically update the preview, by running a small bit of code when you start a dev session

By the way, I’m using that workflow to develop a Semantic-UI theme here! If you’re on my blog, you’re looking at it!

I’ll upload the code to GitHub once it’s stableish.

Blog #1 - Semantic UI

Recently I’ve been working on an exciting new project. Semantic-UI is similar to Bootstrap, but I rarely need to refer to the docs because it just makes sense.

When I say I’m working on it; I’m not actually writing a lot of the CSS or JavaScript; more working on things around it. I’ve started working on the download customizer, which is a really fun project. I’m trying to learn from past failures, like Bootstrap’s which is just a ton of input boxes and words totaling 27 pages of crazy.

So, to start we ask the important questions. “How do you want to organize your code?”. “What jQuery version do you want?”. And explain the differences, between the choices.

Next up is the toggles. These follow that “show don’t tell” rule your english teacher would say over and over again in 5th grade. You see examples of the elements; short descriptions of their purpose, and decide if you want them.

Instead of hundreds or thousands of input boxes, there’s a right click menu. Right click on an element if you want to change the look or feel.

The modules are the interactive stuff in Semantic. So, logically, we should let the users poke stuff and see real demos; right there, in the page.

At the bottom, you’ll see the view toggles, various options which affect global styles, and some fill-in-the-blank stuff for the HTML page we generate. This HTML page will be a combination of all of the elements, collections, modules, and views you choose; already wired to work with the framework of your choice. Of course, this is still TODO.

And finally (drum roll please!) you’ll have the download button, which compiles the code; minifies the CSS and JavaScript, generates the HTML pages; packs icons, and pops up a File Save dialog for you download the zip. All of this is done in the browser.

What is this place?!?!

I’ll be posting tips and tricks for various things here. Currently I’m really interested in Blender and Web Development.

Let me know what you want to see here!