Category Archives: Technical

Project Idea: “Lanky” PHP Middleware Language

Leave a reply

I keep not writing weekend web apps because I know that my projects generally follow this trajectory:
1. Build a database
2. Build some thin PHP middleware to expose an API to that database
3. Build a slick react/angular/whatever frontend
4. Realize a bunch of things I’m missing in my API and add them, lamenting the entire time that my “thin” PHP middleware is starting to bulge at the seams.

I keep realizing that that PHP layer is not really necessary. R0ml gave a great Recurse Center talk (if someone has notes I’ll link it)  on a postgres extension which renders the middleware unnecessary.

I’m not quite ready to make that leap and throw out the middleware entirely (even though I think it’s a great idea…). So I’d like to build a language to really easily describe a PHP API. My goal is to have the PHP routing be as thin as possible and mostly handled by one fast function. In fact, I’d love to eventually have this language implemented in node, or even C/C++ for a pure-speed kind of thing. I’d also love to figure out a way to cache the parsed document so that I don’t have to parse the entire thing every time, but that’s a future optimization.

I’ve started a github repository https://github.com/ertyseidohl/lanky  with an example of how I’d like a Lanky document to look at https://github.com/ertyseidohl/lanky/blob/master/thoughts.txt.

I may end up abandoning this at some point because of time restrictions but that’s why I figured I’d get my first ideas about it online – maybe if there’s something good in there someone can steal it, or even better, point me to a project which already does this but better.

I called it “Lanky” because that was the first synonym for “thin” that didn’t have outright negative connotations or an existing PHP framework (slim, gossamer, etc).

From Boulder, CO

–Erty

Should You Prefer Prefix over Postfix Increment?

Leave a reply

I’ve been told in the past by a programming mentor that ++x is faster than x++, and I found myself refactoring a few increments in javascript the other day.

But then I got thinking – is it really faster? Wouldn’t most modern compilers optimize out the difference? I decided to do some science.

Here’s an outline of the code I ran on JSPerf:

    var x = 0;
    
    var obj = {
      x: 0
    }

  // test one: 
  x++;

  // test two:
  ++x;

  //test three:
  ++obj.x;

  //test four:
  obj.x++

Results:

For the most part, ++x has the same microperformance as x++.

Modern versions of Android Browser, Chrome, Firefox, Internet Explorer, and Safari all have similar performance for each of the benchmarks. This overrides my existing belief that prefix notation is faster.

In some browsers, there is a small but noticeable difference.

In FF19, ++x is faster than x++. But ++obj.x and obj.x++ are the same speed.

In FF31, ++x is faster than x++, but obj.x++ is faster than ++obj.x.

One interesting thing is that some browsers prefer x++ and others prefer ++x. The largest difference, FF31, is around a 1% increase in performance. But, Chrome Mobile loses that same amount (~1%), preferring x++ over ++x, so ultimately it’s a wash unless you’re targeting a specific browser.

From Manhattan,

–Erty

Making Tea With Javascript: OOP with the Prototype Chain

1 Reply

Javascript is weird.

Prototypical inheritance is really powerful, but it’s quite a bit to wrap your mind around if you’re new to it. My first language was Java, and I’m comfortable with the “traditional” OOP paradigm. In this post, I’ll build a traditional Superclass/Subclass relationship in Javascript in an attempt to untangle the weirdness that is Javascript’s prototypical inheritance model.

All of the source code is available in a repl.it.

Part 1: Superclass Constructor

Let’s brew a cup of tea.

//Superclass constructor
var Tea = function(options) {
    this.color = options.color || "herbal";
    this.caffeine = options.caffeine || 0;
    this.tannins = options.tannins || 0;
    this.minsSteeped = 0;
}

Here, we’ve created a constructor for some tea. This tea can’t really do anything, but it holds some useful information on whatever tea object we create in the future. I can make a cup of herbal tea by calling this with the new keyword.

var myHerbalTea = new Tea({});

 Part 2: Superclass Prototype

Now that we have an idea of how prototypes work, we can go ahead and construct a prototype that will be applied to instances of Tea.

Tea.prototype = {
  steep : function(cup) {
      //caffeine
      this.caffeine = Math.max(0, this.caffeine - 1);
      if (this.caffeine) {
        cup.caffeine ++;
      }

      //tannins
      cup.tannins += this.tannins * this.minsSteeped;

      //color
      cup.color = this.color;

      //minsSteeped
      this.minsSteeped ++;
  }
};

Now we create an object with a single method, steep, and assign that to be the prototype of Tea.  We usually want to put methods on the prototype, so that there’s only one copy of the function shared among all instances (this saves us a lot of memory).

After calling var myHerbalTea = new Tea({}), we’ll have the following inheritance structure:

Prototype Inheritance of myHerbalTea

 

Notice that the Tea function is not part of the prototype chain. It is simply a constructor function used to add the member variables (color, etc) to myHerbalTea. However, because Tea.prototype exists, it is chained to our instance of the Tea class.

Part 3: Subclass

Herbal tea is boring. Let’s make something to wake us up!

//Subclass constructor
var BlackTea = function(){
    //Put instance properties from the superclass constructor on the subclass instance
    Tea.call(this, {
        color : "Black",
        caffeine : 10,
        tannins : 3
    });
    this.hasMilk = false;
}

Here’s where the Javascript magic begins. And by magic I mean less of the Harry Potter and more of the Goat Sacrifice.

Let’s make some black tea:

var firstCup = new BlackTea();

This is another constructor function, composed of two main parts. First, we call the Tea() function, binding to the current instance. The call to Tea will have firstCup bound to this, which will apply all of the instance variables (color, etc), to firstCup. This is kind of like calling super() in a constructor in Java.

Here’s the relevant code. Everything that refers to firstCup when we create it is highlighted red.

var Tea = function(options) {
    this.color = options.color || "herbal";
    this.caffeine = options.caffeine || 0;
    this.tannins = options.tannins || 0;
    this.minsSteeped = 0;
}

// ...

var BlackTea = function(){
    Tea.call(this, {
        color : "Black",
        caffeine : 10,
        tannins : 3
    });
    this.hasMilk = false;
}

var firstCup = new BlackTea();

// ...

Ok, pop quiz. what is currently the prototype of firstCup?

Answer: undefined.

If you thought it was Tea, remember that Tea is just the constructor and is never really a “thing”.

If you thought it was Tea.prototype (I totally did), know that even though we do Tea.call(...), we haven’t bound BlackTea‘s prototype yet, so firstCup.__proto__ is nothing.

Let’s set up the prototype and make a second cup.

Part 4: Subclass Prototype

Remember that the prototype of a class is the object that will be assigned to the __proto__ property of any instances created of that class. So in order to create a second cup of tea, we need to first change BlackTea.prototype.

BlackTea.prototype = Object.create(Tea.prototype);

var secondCup = new BlackTea();

It wasn’t obvious to me at first why we don’t bind BlackTea.prototype directly to Tea.prototype. Instead, we create an object whose prototype is Tea.prototype, and then set BlackTea.prototype to that new, empty object. Our secondCup object can still see the steep(cup) function, but it checks an empty object on its way up the prototype chain. Hmm…

But say we want to be able to add milk to our black tea. (Adding milk to green or herbal tea is icky and we shouldn’t allow our users to do that). If I modify BlackTea.prototype to be able to add milk:

BlackTea.prototype.addMilk = function(cup) {
    //adding milk makes the cup of tea less harsh!
    cup.tannins = Math.floor(cup.tannins / 2);
    this.hasMilk = true;
}

Remember that BlackTea.prototype is not Tea.prototype! It’s an object whose prototype is Tea.prototype. This means that addMilk is only available to instances of BlackTea, not any kind of tea.

Our prototype chain now looks like

withmilk

Yay!

Part 5: Actually Make Tea

//ok, let's make some tea
var myTea = new BlackTea();

var myCup = {
    color : "clear",
    caffeine : 0,
    tannins : 0
};

//steep for three minutes
myTea.steep(myCup);
myTea.steep(myCup);
myTea.steep(myCup);

//add some milk
myTea.addMilk(myCup);

//drink up
console.log(myCup, myTea);

This produces:
myCup is { color: ‘Black’, caffeine: 3, tannins: 4 }
myTea is { color: ‘Black’, caffeine: 7, tannins: 3, minsSteeped: 3, hasMilk: true }

Part 6: Recap

  • Javascript prototypal inheritance is super weird
  • Use the new keyword to treat a function as a constructor
    • The prototype of that function will become the __proto__ of the object, which is where the object looks for methods that aren’t declared locally.
    • Then you can call that constructor (like Java’s super()) using Class.call(object)
  • Explicitly set prototypes to an object with the prototype you want to create
    • e.g. myObject.prototype = Object.create(Constructor.prototype)

I hope this blog post cleared up some of the mystery around prototypes and inheritance!

From Manhattan,

–Erty Seidohl

P.S. Thanks to Ryan McVerry and Julia Evans for proofreading! Also Michael Mulley for helping me understand the WTF-ness of .prototype not actually returning anything on an object.

SSD vs RAID0 for Gaming: SCIENCE!

Leave a reply

A while ago, I bought an SSD (128GB Crucial M4) off Amazon, with the idea of putting it in my gaming rig as a “game cache”. My plan was to install my most played games on it, while the rest of my games sat on my current setup – Two 1TB Seagate Barracudas in RAID0. Here’s a cell phone pic of my setup:rigIgnore the awful position of the cable/drive on the new SSD – it’s for testing purposes.

At my current job, there’s a heavy reliance on data to drive decisions, and I decided to do some science here before actually moving my games over. And I’m glad I did. Here’s the data:

sequential random

E: RAID are the same raid drive – no difference, but two data collection runs, since the numbers were much more inconsistent. I had programs running on that drive while testing, meaning there’s a lot more noise. To do actual science I would run a lot more tests, but I feel that my results were good enough to make decisions on.

G: SSD is the SSD with two different stripe sizes: 4kb and 32kb. I believe the 4KB performed better because some cursory research showed that the drives are manufactured to be used with a 4kb block size, which makes sense.

Data was collected using Roadkil’s Disk Speed under light system load.

The interesting result is in the sequential/random difference on the RAID. In sequential reads, the RAID actually comes out faster than the SSD except at the 64kb read size. I believe this is because I have the RAIDs striped at 64KB, with 64KB blocks, and I must be hitting some sort of strange misalignment at exactly that size.

However, the RAID drops to basically zero (<1MB/s) when performing random read, while the SSD loses no speed at all. This is, of course, the main reason for getting an SSD.

Now, as far as I’m aware, games actually optimize for sequential read, since that’s how most hard drives are going to load them. What this means, as far as I can tell, is that I would actually be hurting my game performance by moving my games over to an SSD.

I’ll edit this post, after I play some Skyrim+HD Textures on the SSD and check if the load speeds feel any better.

Also: if anyone more experienced with hardware has any suggestions, I’m all ears!

From Brooklyn,

–Erty

 

One Letter at a Time

1 Reply

The other day, I saw the following brain-teaser posted on Reddit:

tumblr_lcev8fTt341qbjttfo1_500along with the claim that “Startling” is the only 9 letter word where you can remove one letter at a time and still have a word.

Let’s see if that’s true using IPython and a long list of words from http://www.mieliestronk.com/wordlist.html

[ed. note in 2018 – this link expired. I’m not quite sure where it went. Sorry!]It turns out that there are seven words of length 9 that match this property,  and one word of length 10: “Splittings” (actually an incredibly relevant word to this problem).

Just goes to show: don’t believe everything you read on the internet 😉

The Broadcast Problem

1 Reply

In which I ramble on for a while before concluding nothing. You’ve been warned.

Snapchat and Facebook

Snapchat is quickly becoming my go-to communication tool for sharing moments with close friends. There’s a certain intimacy to it: just you and your chosen few recipients get to see the picture for a short while. It’s a way to show off your interesting life without inconsiderately clogging up others’ newsfeeds. A way to send photos of yourself drunkenly wearing a lampshade without worrying about your boss or parents seeing it.

It’s a broadcast medium with a specific range. However, you don’t know who else got a copy of the snap as well. The question this blog post poses is: Is it impolite to not respond to a snapchat? Let’s take a look at some similar media.

Facebook – for me – is becoming a place to share memes and interesting internet finds, not moments from my life. It’s broadcast is powerful – without carefully choosing your settings, it’s easy for your photos to become globally available. Any of your friends (which these days includes parents, coworkers, and random business contacts) can go through your photos. There are ways to tailor your security but they’re often obtuse or difficult to get at.

Posting on Facebook is a broadcast with a large range. You assume that everyone’s friends can see a given post. If someone doesn’t specifically mention you, there’s no social penalty for not commenting on or “liking” a post.

SMS, IM (incl. Facebook Chat), and Email are direct message systems. When you get one, the assumption is that you are the only recipient unless it directly says otherwise. These more direct forms of communication create a one-on-one channel between the sender and recipient that have social weight – not replying to one is rude.

Broadcast and Direct Message

When choosing whether to reply to messages, people consider how direct the original message was. This metric, “replies”, is important in the social media world – especially that of dating applications – because it measures how much interaction users are having.

My cursory research for this article doesn’t turn up much in this realm of prior research, so I’m going to go ahead and make an unfounded claim based purely on my own observations: The more direct a message, the more likely a person is to respond. A somewhat spammy marketing article boasts a 50% response rate to Twitter DMs where they use the username in the message. That’s crazy good.

Why is a DM so much better than just an @-mention? While DMs do require the users to be following each other (meaning there’s already an element of trust), a DM is also only visible to the messagers. If I get an @-mention on Twitter I’ll only respond if I’m particularly in the mood to or if I have something to say about it. If I get a DM I’ll at least make a note to reply to it later.

With these direct messages, there’s a social stigma to not replying since it means you got the message but chose not to respond. With a broadcast, it’s always easy enough to claim that it was lost in the sea of other broadcasts. In most apps, there’s no way to verify that a specific friend saw a broadcast message.

Snapchat sits in the awkward in-between here. You can see if a friend has opened your message. But Snapchats are also often sent to large groups of users at the same time. Let’s investigate further.

Public and Private

Voice to text is far faster and more accurate than typing on my soft keyboard, but I choose to fat-finger my way though the words because speaking out loud broadcasts what I want to be private. The people around me aren’t interested in my mundane texts, and I find it as impolite as talking on a cellphone to say them out loud. These are private messages – not because they’re risque, but because they’re not interesting to anyone else.

You can’t tell who else a Snapchat has been sent to; when you get one, there’s no way to see how public or private that information is. Especially with very interesting Snaps, (“Hey look at me doing this cool thing”), I assume that a large portion of the sender’s contact list just felt a buzzing in their pocket.

Facebook is “public”. IM, Email, SMS are private. Snapchat is… kind of both?

Conclusion: Does Snapchat Bridge or Widen this Gap?

In my opinion, Snapchat is a broadcast and not a direct message, so it doesn’t warrant a response. Greta, my fiancee, argues the opposite – each snap appears as a direct message despite its actual dispersal. So… who’s right?

Per my warning at the beginning of this post, I don’t know, and I would love to find out. For Snapchat users: do you feel obligated to reply to snaps?

What kind of messages should people be obliged to respond to?

Povio: On its way to cool

Leave a reply

An open letter to the developers of Povio including some hopefully constructive and totally unsolicited feedback about the user experience.

1. Povio is cool

I heard about Povio through Hacker News and immediately installed it. It’s new. It’s humble. It solves the problem of people sharing useless stuff about themselves. I can ping the people I’m interested in, and I feel good when people ping me for a photo of myself. As a member of their target demographic, I’m hooked.

Really – I like the app and I want to see it succeed. The rest of this article is my thoughts on how to accomplish that, mainly directed toward the developer(s) but also as a way to open up a conversation about modern app development, privacy, and heteronormativity.

It solves what I call the “broadcast problem”. Basically the idea that some forms of communication are “broadcast” (snapchat, facebook) and others are direct (texting, skype) and it’s sometimes easy to confuse the two. You can read my thoughts on the broadcast problem if you’re so inclined.

2. Povio needs to not be a dating app for straight white men

The video for Povio features mostly a good looking female who is Povio’d (new verb!) by a male friend and they end up getting ice cream together, or something. Whatever – sex sells, and especially to the coveted 18-24 year old male. But there’s also a problem here, which is that Povio needs to attract people of all genders and backgrounds if it wants to be successful.

In my opinion, if Povio tries to be a dating app like tinder, it’s going to fail. It will turn creepy and the vast majority of users will abandon it. I worry that it’s already on its way to this. Here are the users that are added automatically as friends:

2014-03-24 22.37.26

!!!???

All white, and seriously: Miss Hotty?!

Either Povio will change this, or they’ll lose a lot of users who aren’t heteronormative white males. Even if, at best, it’s based on your facebook gender, race, and “looking for”, which is almost a neat idea for user acquisition, but still gives me a bad feeling about the app.

3. Povio has a neat UI with unintuitive UX

Povio’s UI and graphic design: Clever.

Povio’s UX and command structure: Obtuse.

Let’s say I want to unfriend a user. (I actually had to reach out to the devs on twitter to figure this one out). Expected: I long-click on the user’s list item and get options. Nope – long click does nothing. I click on Best Buddy’s face. Nope – a close up of his profile pic.

2014-03-24 22.37.33

What is he so smug about?

Turns out it’s as simple as single-tapping the list item. But it took me a good 5 minutes and a twitter conversation to figure that out. And who wants to see a large version of their friend’s profile picture?

2014-03-24 22.38.19

Finally.

Suggestion: Use the standard long-press for options. Remove the click-to-open-profile-pic action. Get some user testing and work on having a really intuitive user experience.

4. Povio needs to have the ability to turn on strict privacy settings

Yep, just like I suspected. Been on there for 10 minutes, and already getting friend requests from creepy guys I’ve never heard of. I would only use this with close friends. —natasham25

Make sure people know each other on Facebook, Google Contacts, or something. Have an option for anonymous friend requests to require a three-digit password. Photo apps like snapchat already toe the “creepy” line and enabling users to lock down their profile is the best way of combating this.

Allowing “creepy guys” to anonymously ping people is only going to reinforce the “dating app” vibe.

 5. Povio shouldn’t show me who pinged my friends

A) I don’t want to see how popular they are compared to me.

B) Nobody wants to see all of the people pinging their S.O.

It’s rare that someone enjoys the feeling of “sharing” a friend. Especially a S.O. or more. I pinged my Fiancee and was surprised to see a list of all the other people who had also pinged her. I’m not a jealous guy – who she sends Povios to is not my business. But I know more jealous types probably wouldn’t be happy to see those names, especially if they’re potential rivals. It also creates the feeling that you didn’t just get a special picture created and shared just for you.

Who is this guy anyway?

Not making me feel unique, here.

6. Povio is awesome for shy and boring people

Not a criticism!

Povio makes it really easy to ask your friends to include you in their life. As long as it’s easy enough to ignore a ping (with plausible deniability for ignoring it) from someone you don’t want to share with, I think there’s great potential here for an app that allows people to ask “hey, what are you up to” without feeling inclusive.

Snapchat is for broadcasting cool events. I get snaps from some people a LOT more than I do from others. I only send snapchats when something interesting or exciting is going on. To send a snap, you have to feel like you’re doing something worthy of taking up someone else’s ten seconds.

Povio solves that by allowing me to request my friends’ presence when I’m bored and lonely, and therefore makes me feel more social and wanted. I can get pings from friends and be inspired to set up something cool to take a picture of.

Epilogue:

Povio is up-and-coming and I hope the best for it. Based on the reactions of my non-immersed-in-the-tech-world friends it has a lot of potential and I can’t imagine it’s userbase is less than viral already.

With a few tweaks and fixes, I think Povio will quickly become a household name.

From Brooklyn,

— Erty Seidel

Edit: Povio’s creator has responded to this post:

P.S. – Shameless self-promotion: If you liked my writeup, know that I’m currently looking for work!

Terminal_’s Rules of Game Development: A retrospective

Leave a reply

Terminal_ is a game that Evan Conway , Max Feldkamp, Mike Gold, Julian Delfino, and myself worked on during the winter of 2012-2013. I’ve since left the project, but I believe that Evan and Max are carrying it forward despite having day jobs. That winter, I had the role of Product Manager, and came up with the following “helpful suggestions” to guide our development. I was chatting about game design with my friend Matt Davis, and decided to write up these rules so that they might be helpful to others.

The rules:

  1. This is not a workstation
  2. This is not a sim game
  3. Playtest Playtest Playtest
  4. Our drill is the drill that will pierce the heavens!
  5. Early optimization = death
  6. What is it really about?

1. This is not a workstation

Our early ideas for Terminal_ revolved around the player interacting with the game solely through a computer terminal. The problem with this is that we kept having ideas about implementing existing *nix tools and commands (like top, grep, etc.) in our game. I wrote rule #1 to remind us that the game was not a workstation, and that anything that didn’t contribute to the player having fun was just a distraction.

Takeaway: Focus on fun, not functionality.

2. This is not a Sim Game

We were constantly skirting Bottom-Up Game Design, basing the fun on the idea that the player was interacting with a terminal, instead of focusing on the challenges of level and puzzle design. Retrospectively, this is probably the biggest problem that we had. Our game was cool, it had a great atmosphere, but it didn’t have anything that was actually fun and engaging for the user.

Some games *are* sim games, in which case you can totally ignore this rule. But remember that sim games are only fun because they’re not exactly the thing that they’re trying to simulate. Otherwise they would be just as boring as that actual thing. If that makes sense.

Takeaway: Focus on fun puzzles and levels, not accurate simulation

3. Playtest Playtest Playtest

The Terminal_ team would get bogged down by arguments over the best way to implement a feature. When this happened – and I was usually one of the offenders – I would bring down the force of rule #3. Implement it one way, then playtest it. If it doesn’t work, try the other.

There’s A/B testing on websites, and really, data is an amazing way to make sure that your game is fun and playable. Valve knows this. They playtest each level over and over and over, making radical changes to the puzzle design until they get something that is fun and challenging, not frustrating or obvious. Portal 1 is a great example of this – listen to the developer commentary especially to see how many times they reference changing something because of playtests.

Takeaway: Data trumps opinion 99% of the time.

4. Our Drill is the Drill that will Pierce the Heavens!

If you don’t recognize this quote, you need more galaxy-sized robots in your life.

#4 was a reminder to not give up on the game, even when things were tough. We watched Gurren Lagann together as (mostly) a team at college, so whenever we were feeling down about the slow progress of our game, we would shout this at each other to remember that this game was achievable through hard work.

We obviously didn’t end up making the game, but I attribute that mainly to the fact that we only had 5 weeks to work, an ambitious schedule, and no clear person in charge to make final decisions about what went in the game.

Remember – you’re making something new, and even if the idea has been done before, you can do it better, or different in ways that are fun. Flappy bird is an idea that has been around forever, but Nguyen did things just right to make a worldwide sensation.

Another thought on this: Pare your game down to the minimum viable product. Get that done. Then expand on it until you have all the functionality you want. Whether you have a public beta is up to you, but despite your ability to pierce the heavens, you need to set realistic goals for the size and experience of your team. Once you’ve created something fully, you’ll be better prepared to embark on a larger project next time.

If you do fail, focus on the ways in which you’ve grown throughout the project, and the lessons learned for your next project. Then pierce the heavens next time.

Takeaway: Don’t give up on a game. If you run into trouble, see what you can cut. If you do fail, focus on the things you learned so that you can succeed with your next project.

5. Early Optimization = Death

I was chatting with Evan about one of his games recently – a dungeon crawler with a very innovative “sense” system. What you see, hear, smell, etc. in each room is passed through messages, and these messages also affect the wandering monsters. Nobody likes a room that reeks.

Evan was worried about the performance of iterating through all of the monsters and messages on each frame. He was beginning to consider alternate data structures and optimizations for the problem.

I fall prey to this all the time. The problem with this kind of thinking is that it quickly leads to spending more time working on the code than it does working on making the game fun. And really, there were no performance problems here, or in the similar problems we faced making Terminal_. This ties in to rule #3 – once playtesting has determined that something isn’t optimized enough is when it’s time to go back and rewrite it to be more efficient.

Or, if you have extra time and hands at the end of the project to make sure that your program will run on older PCs. Otherwise, just ship it, and work in the performance tweaks through patches later.

Takeaway: If you’re worried about performance, you’re probably wrong unless something actually isn’t performant.

6. What is it really about?

Especially in strongly-aesthetic games like Terminal_, knowing what your game is actually about is an important step toward putting reason behind your choices.

Even Flappy Bird has a “really about”: it’s about minimalist, fast gameplay. Nethack is really about exploring complex, programmatically generated dungeons. Amnesia: The Dark Descent is about atmosphere, memory, horror, and helplessness. Portal is about an insane AI testing you on puzzles which require you to think in a different topology.

What was Terminal_ about? I’m not sure. We kinda failed at this one because I think everyone on our team had a different idea.

Know the central themes of your game, whether you can describe that in a few words, a few sentences, or even an essay. Then, when someone proposes a new feature, you can really ask yourself and your team: does this fit into the theme?

Feel free to edit this theme as you go along, but when you do, check to make sure everything in your game still works toward creating something whole.

Takeaway: Have one idea about the themes of your game.

What are Javascript, AJAX, jQuery, AngularJS, and Node.js?

74 Replies

This post is addressed toward people who have little to no experience with JavaScript, Node.js, or their associated libraries, but are interested in learning what they are and aren’t.

Another student at Hacker School asked me to explain the difference between Javascript, AJAX, jQuery, AngularJS, and Node.js.

Let’s start with the basics:

JavaScript

JavaScript is a programming language designed for use in a web browser. (It’s no longer a “scripting” language, nor does it have anything to do with Oracle’s “Java”, so the name is a bit misleading.)

You can code in JavaScript – it’s a full-featured language which (with one notable exception) runs in a web browser like Chrome, Firefox, or Internet Explorer. It’s usual use is to manipulate a thing called the “Document Object Model”, essentially elements on a webpage.

JavaScript executes on the client side: A website server sends the javascript to a user’s browser, and that browser interprets and runs the code. This happens inside a “sandbox”, which keeps the javascript from touching the internals of the system, which most of the time keeps malicious code from messing up the user’s computer.

A simple JavaScript program is alert("hello world!");, which on an HTML page would probably be put inside a <script> tag to tell the user’s web browser to interpret the following as JavaScript, like: <script> alert("hello world!"); </script>. This code makes a small alert box pop up on the user’s browser. To see this code execute, click here.

So, to recap: JavaScript is a programming language that operates in the browser, inside a security “sandbox”. It allows manipulation of elements on a webpage.

AJAX

AJAX stands for “Asynchronous JavaScript and XML“, and is a way that a webpage can use JavaScript to send and receive data from a server without refreshing a webpage. XML is a kind of markup language – like HTML, which people sometimes use for sending data across the internet. Recently, JSON (“JavaScript Object Notation”) is more popular and can be natively read by JavaScript. I know that’s a lot of 4-letter acronyms, so let’s recap:

AJAX: Asynchronous JavaScript and XML. A system for sending and receiving data from a server without a page refresh. (example below)
XML: eXtensible Markup Language. A language for organizing arbitrary data. Uses lots of angle brackets “<>”. (example)
HTML: HyperText Markup Language. A subset of XML specifically for describing and organizing web pages. (example)
JSON: JavaScript Object Notation. A more modern way of packaging data that’s often used with AJAX. Can be natively read by JavaScript. (example)

A sample AJAX call might work like this:

  1. Client requests page from server
  2. Server responds to request and sends page
  3. Client makes AJAX call to the server and requests more data
  4. Server sends that data.
  5. Client updates the page using that data without refreshing.

Facebook, Gmail, and Pinterest are examples of sites that use a lot of AJAX.

The “Asynchronous” part refers to the fact that when the JavaScript makes the AJAX call to the webserver, it continues to work until the response – it doesn’t “block” and stop while the data is being processed server-side.

jQuery

jQuery is a library built in JavaScript to automate and simplify common tasks. There are many libraries like it, but jQuery really took off because of its power and ability to make things work in older browsers. jQuery is used in the browser, alongside “normal” JavaScript. It is mainly used for animation and AJAX, which are difficult to do with vanilla JavaScript, but are just a few lines in jQuery.

jQuery is included in a web page using the <script> tag; for example: <script src="./path/to/jquery.js"></script>. There are also myriad jQuery plugins, which extend the functionality of jQuery in various ways.

A sample jQuery call, which hides a small box when clicked:

Live Example:

Click!


<script src="path/to/jquery.js">
<script>
    $("#box").click(function(){$("#box").slideUp()});
</script>

AngularJS

AngularJS is a full frontend MVC framework for JavaScript web applications. It was built at Google and provides a way to quickly build large, single-page web applications. Like jQuery, it is included into a page using the <script> tag, and is itself written in JavaScript. Unlike jQuery, it is meant to be a framework upon which an entire web application is built. It actually includes a minimal version of jQuery by default.

If you’re looking to learn AngularJS, I recommend EggHead’s video tutorials. You’ll need to have a very solid understanding of JavaScript first, since writing any Angular requires a deep understanding of prototyping, scope, and various other JavaScript aspects.

The AngularJS website has a page of example projects built with AngularJS, if you’re so inclined.

Node.js

Remember how I told you that JavaScript ran in the browser, but I mentioned that there was one big exception to that? Node.js is that exception. It’s a command-line tool that runs JavaScript on a machine without needing to run in a browser. It does this by using a version of Chrome’s V8 Engine, which is the JavaScript engine that runs inside Google Chrome.

Before Node.js, developers would have to use different languages for the backend and frontend of their application. For example, PHP, Java, ASP.Net would run on the server, and JavaScript would run in the client browser. Now with Node.js, developers can use JavaScript on the server as well as the client, meaning that developers can focus on learning one language. Whether this is a good thing is still up for debate (nsfw language).

Conclusion

JavaScript is a language written for websites to run in the client’s browser.

AJAX is a way for JavaScript to request data from a server without refreshing the page or blocking the application.

jQuery is a JavaScript library built to automate and simplify common web tasks like AJAX or animation.

Angular is a hip JavaScript framework which is made for building large, single-page web applications.

Node.js allows JavaScript to be run without a browser, and is commonly used to run web servers.

Please leave any questions or ideas for improving this article in the comments below!

From Manhattan,

–Erty

 

Free Linux Servers

Leave a reply

Every once in a while, I find myself needing to quickly run linux or one of its derivatives. Here are some resources I’ve gathered that allow quick setup of a disposable linux server:

1. VirtualBox

Runs on your own machine as a VM. Internet connectivity. You’ll need to download an ISO and install it. You do get a GUI though.

2. Bellard’s JSLinux

Linux VM written in Javascript (how’s that for a project?). Free, terminal only, no networking. Pretty much good for playing around with the linux shell in a really disposable way.

3. Instant Server

Easily my favorite – hit a button and fill out a captcha for 35 minutes of Ubuntu 13.04. Or, pay a small fee and get the server for up to a week. Great customer service and good speeds. Terminal only, internet connectivity.

4. SimpleShell

Linited to 15 minutes, and doesn’t seem to have internet connectivity, despite what the site says. Still, for a free linux command line, it’s fast and has a very fast setup time.

5. And many more

A google search for “free shell” provides many links, dmoz being  one of the more trustworthy (run by Mozilla).

Enjoy!

From Manhattan,

–Erty