Live Blogging Ludum Dare

On April 25, 2014, in Web Coding, by admin

ld

Hey guys,

I’ll be live blogging my Lundum Dare progress from this blog post.

My inspiration for this Lundum Dare is work I did a few years ago that stirred the pot by connecting Websockets, WebGL and Node.js:

http://www.travisglines.com/web-coding/webgl-node-js-websockets-a-web-technology-perfect-storm

I’ll be building as much of a sandbox MMO using similar technologies as I can this time around.

4/25/2014 3:37 PM PST

The tech stack I’ll be using:

  • Language -> Mostly Google’s Dart (also compiling it to JS) … both client/server
  • Drawing Tech -> WebGL
  • Communication Tech -> Websockets/AJAX
  • Host -> Digital Ocean
  • Database -> Cassandra hopefully, otherwise MongoDB

4/25/2014 3:50 PM PST

Pre-start work:

  • Get familiar with Digital Ocean’s API as I’ll want to use it to start/stop servers
  • Play around a bit with Dart server side and decide on libraries I want to use
  • Decide on game server architecture
  • Get domain name (will refer to below as DOMAIN.com until theme decided

4/25/2014 4:00 PM PST

Game server architecture:

  • Serve web assets (aka client) html/css/js/dart from https://www.DOMAIN.com
  • I’ll initially just use one box for https stuff, but later on an nginx load balancer with multiple web boxes behind it and split out per subdomain
  • Serve api from https://api.DOMAIN.com … handles logins/sessions and tells client which game servers to connect to
  • Serve gameservers (boxes that keep entity positions/etc in memory) in a grid fashion. Something like 0-0-gameserver.DOMAIN.com … initially just one
  • Both gameservers and api talk to same DB cluster, however to avoid race conditions all queries go through primary game server once connected

4/25/2014 4:15 PM PST

Game plan:

  • As soon as the clock starts I’ll provision one of api, web, database, and gameserver boxes on Ubuntu x64 14.04 LTS in Digital Ocean’s San Francisco data center.
  • Next up is to get the web server returning static html/css/dart/js assets, the api returning JSON and talking to the database server and the gameserver accepting websocket connections from authenticated clients.
  • After which I’ll get some WebGL polygons rendering and test out sending simple JSON messages between players.
  • Then comes the actual work, designing the game … I’m thinking very basic assets voxel-ish graphics, procedural terrain
  • Terrain and game rules dependent on the theme, I’m hoping its something conducive to a sandbox MMO

4/25/2014 6:00 PM PST

Go go go!

The Theme is Beneath the Surface

I think this works well for a sandbox MMO.

First Ideas:

  • Ocean/underwater World
  • Underground World
  • Some sort of metaphorical interpretation of beneath the surface

The Idea I’ll go with after some deliberation:

I’m very interested in automation and the things it will do to our world in the coming decades. I’ll be building a world called Kohhd that takes place on Earth in the year 2100. AI has recently grown past the point of singularity where it’s improving itself and parts of the human robot population rebelled killing a large portion of humanity and enslaving the rest. However, some humans went below ground, where they’d be hard to detect with robots still loyal to their creators. While the humans rebuild and cling to life underground, the all out war continues between the friendly robots and evil robots. It is your job to survive and thrive by programming the robots to be more intelligent in hopes of either regaining control of Earth for the humans or wiping out the human friendly robots to enslave the rest of humanity.

I’ve been wanting to create a game that combines the political/economic issues of automation with a tool that helps people learn to code for a while.

4/25/2014 6:45 PM PST

Realizing some more technical implications of this …

  • Zone’s/gameservers need to be partitioned in 3 dimensions so digging down is natural
  • I don’t exactly feel like doing polar coordinates etc, and I’d like the game to be voxel-esque so I’ll need a strategy for digging down in terms of coordinates
  • Initial gameplay will be focused underground, which could mean low polygon counts … so this is a plus
  • Setting up a system where you can build your own underground facility could be really cool

4/25/2014 7:00 PM PST

Initial Server Set Provisioned:

Screen Shot 2014-04-25 at 6.59.21 PM

Now I’ll work on getting polygons on the screen for a bit locally before trying to do client/server stuff.

4/25/2014 7:25 PM PST

Git repo all setup, initial dart code showing text/css/html and interactive.

4/25/2014 8:50 PM PST

Initial infrastructure all set up. Game loop rendering using requestAnimationFrame etc … now for some polygons.

Basic application architecture looks like this:

1
2
3
4
5
6
7
Application
|-> Game
    |-> Camera
    |-> Entities
    |-> Player
    |-> Input
    |-> Methods like draw loop etc

Stay tuned … more to come

 

During my high school years I played basketball. One thing that stuck with me more than anything from my experience was that the difference between teams that won and teams that lost was fundamentals. Coach Howard would tell us day in and day out that taking care of the ball, reducing turnovers, making free throws, getting the ball inside, playing solid defense and controlling the pace of the game were all essential. It finally paid off when we made it to the championship game in my senior year.

What does this have to do with web startups you ask? Well, since that time in pretty much any competitive game, I’ve noticed that there are a few key focus areas that separate winning teams from loosing teams. You can grade a team based on these things and predict very well how they would do. After spending the last few months working on a web startup, I’d like to share the things I learned first hand and the fundamentals that governed the game. Please excuse my naivety if this post seems obvious, or overgeneralizing to you as I sure didn’t know these things well enough going into the process and had I read this post I may have been that little bit more effective. Hopefully it’ll help someone else out there trying to do the same.

Startup Fundamentals

The three fundamentals I found were the Idea, Traction and Technical Execution. Each of these has equal weight. Now let me go much deeper into each of these to explain why they’re important, what I really mean by each and more specific details.

Idea

The idea is essential to the business, however commonly too heavily relied upon as someone thinking they can have a great product. The idea for me, is more encompassing than the typical “I have a business idea!” with no more further thought. It includes things that people like Paul Graham would ask you: “How big is the possible addressable market? Who are your competitors? How will you make money? Does it fix a need or problem people have? What’s new about your idea?” This is where the Lean Startup movement really shines because basically you quickly pivot until you find an idea that works. You define an idea that works by one that finds traction readily available. The better the idea the easier the traction will be to aquire.

Technical Execution

Can your team sustainably put together a solid product and iterate? If you’re going to compete in a red hot market like web startups you need to have the chops to code a product quickly and iterate on it to improve it. In some rare cases technical execution can be nearly all you need; These are typically areas that are on the edge of what is possible technically, where the idea is more obvious and can provide first mover advantage if executed.

Technical execution is everything from design to site speed. Its the quality of the product you have produced. If you’re Zappos its customer service, if you’re Netflix its streaming bandwidth and if you’re TechCrunch its the quality and relevance of your posts. I say sustainably because writing good code is only a small piece of pulling a product off. You need to be able to have a nice work environment and work together as a team. Politics and disgruntled team members will distract you into ruins unless you’re vigilant.

Traction

More precisely the ability to gain traction. This was one of the realizations that hit home the hardest: you can build the best product in the world, that everyone wants and still fail. Relevant people need to hear about it. Good startups will have a plan (not “Well, we’ll just post it on HackerNews”) for getting people to actually start using and continue using their product. I feel like most web startups these days fail, not because the idea sucked or the team made a bad product … but because no one ever heard about it.

Some Examples:

Google stole market share from Lycos, Yahoo!, Excite, AskJeeves and the like through having better search results. Their superior PageRank algorithim drove traction through an established business/product model.

Facebook seems like traction wizardry to me. It came into a market already dominated my MySpace. However going after college students first and starting in the best place to do that (Boston, MA is probably the best/largest college “town” in the world) was a brilliant circumstance that I think led to its success over MySpace. College students share things … fast, and have enough time/willingness to try them out.

TLDR;

Startups need to focus on one question: Are you building something well, that people want, will pay for and will somehow hear about?

Lacking in any one of these areas can kill off your startup entirely. Most startups need to beat their competition in all three fundamentals and blow them away in one.

Discussion on HN: http://news.ycombinator.com/item?id=2530902

 

Over the past few months a few things have become extremely clear to me: web technologies are exploding and the capabilities for software on the web is soon to meet that of desktop software if innovation continues along this path.

The web technologies I’m talking about are webGL, websockets and node.js. WebGL enables web developers to utilize many of OpenGL’s features inside a web browser and bring 3D applications to the web. Websockets allow a client to communicate with a server with significantly less overhead than ajax, making real time applications on the web much more doable. Node.js allows the server to salably handle all these websocket connections. The real kicker is that they’re all coming to maturity at the same time and cater to each other in a huge way.

When you think of 3D on the web, you typically think of games first. Games in 3D are fun, but what if you could do multiplayer gaming inside a web browser, with a server that could scale? This is a reality that I think is now upon us and on a night before YCombinator starts announcing who gets into their summer program and developers are showing off their apps, I’d like to share with you a simple app I made to demonstrate what I mean. I made a simple chat application using the above technology stack (and others: socket.io, now.js, three.js). Keep in mind its mostly just a proof of concept, I wrote it in a few hours and is very primitive.

Demo: http://labs.travisglines.com

You can move around with the arrow keys and hit enter to send the text you have written. Its extremely simple and there are plenty of bugs/errors/vulnerabilities I’m sure, but it gets the point across.

I personally can’t wait for 3D to come to the web (hopefully its in the form of WebGL instead of Adobe’s Molehill) and think its just a matter of time until it happens. One of the things that people are instantly going to want to do is interact. In 3 dimensions that means sharing 3 position variables, chat and actions all in real time. Luckily enough node.js came along just in time to make the process nearly trivial and in 57 lines of server side code I can share 3 position variables and let users chat with each other. The individual pieces are themselves very cool, but with all of these technologies coming to maturity at roughly the same time the opportunities and possibilities are huge. Things like a web based MMO game, 3D shopping with friends in realtime (something I’d like to pursue here soon if we don’t get accepted to YC) and more are all possible at this point.

Whenever new technologies or server stacks come out, it seems there is always a company that succeeds and champions the tech. I look forward to what comes out of these technologies in the next few years and am excited for the company that gets it right.

 

Dear Google Chrome Team,

I’m a huge fan of your browser, Chrome OS and your efforts to bring applications to the web. However I find that one thing missing would help me greatly: an SSH client built into Chrome.

I’ve even found more people looking for the same:
http://groups.google.com/a/chromium.org/group/chromium-os-discuss/browse_thread/thread/50ec071f2512371d

http://www.google.com/support/forum/p/Chrome/thread?tid=5953879cbacec9f0&hl=en

Like said in those threads it could be extremely simple … type “ssh://username@domain.com:port_number”. You could even bookmark it and simply click it to go to the server, it would ask you for a password and bingo you’d be in. Heres a screenshot:

If you wanted to get real fancy with it you could do some theme overriding, ssh key stuff and scp file upload/download tool.

I use windows as my main operating system (software availability/drivers being the main motivation for this) and typically ssh into linux servers from there. This means that I have to use Putty or another SSH client to navigate to them. One main problem is if I’m on a friends/family member/library’s computer it probably has Google Chrome but no SSH client. This means I have to go out and download Putty onto their system if I can at all. (Administrator privileges required) An SSH client built in would solve that in one fell swoop.

I would love to use just one application to communicate with outside servers (and have applications live on the web, not on my desktop) some day and think that integrating an SSH client could be a huge step forward in this goal.

 

Lets make a Twitter Clone in Node.js

On March 5, 2011, in Web, Web Coding, by admin

During last few weeks I’ve promised many (mostly from HackerNews) that I would publish and open source an example application in Node.js using some of the techniques I’ve talked about. While in need of a little intellectual diversity from my normal role working 24/7 on my startup (http://www.exipe.com) I decided that making a twitter clone would be cool.

This morning I purchased the domain name nodrr.com (instead of tweet you nod … if that makes any sense … kind of a play on node.js + twitter + some physical action) for this purpose. It’s currently just after 4:15 PM on Saturday afternoon the East Coast of the US, I just went out Thursday night for a bit with friends so I’m not feeling all socially isolated by this, I just watched The Social Network (inspiration) and I’m feeling the need to code … lets make a Twitter clone in node.

I’ll be live blogging the whole time with edits, updates and battleplans. Please forgive my lack of attention to grammar/spelling/common sense English writing skills as I’ll be focusing on coding, not so much whether that use of ellipsis was correct. Watch my coding progress on github as well if you’d like: https://github.com/tglines/nodrr

4:25PM – First things first:

  • Set up EC2 Micro Instance with Ubuntu 64-bit
  • Set up git/github link on the EC2 instance
  • Download and install Node.js, npm and some of the libraries I’ll be using
  • Provision an AWS elastic IP and point nodrr.com at my EC2 instance

4:40PM – Box is up:

  • EC2 is up, dns records are pointed to the elastic IP and we’re SSH’ed In
  • Compiling node

5:10PM – Git project initialized, node built, npm installed.

  • Grabbed express, connect-auth, mongoose, jade for now from npm
  • Now installing mongodb packages
  • Cue the Daft Punk
  • Vote for the news item on HackerNews ;-)

5:35PM – Project directories setup, main script started … getting an unexpected error

  • Grabbed a few more npm libs – connect-mongodb and connect-force-domain
  • Getting and error with express.bodyDecoder() … hmmm

5:50 PM – Theres the bug … connect renamed bodydecoder to bodyparser

6:05 PM – Facebook Connect Setup

  • Got oauth through npm
  • Set up the app on facebook
  • Jade template isn’t getting the title ….

6:10 PM – Battling a new one

6:23 PM – Hello World

  • Got a hello world up (taking down now so dont check yet)
  • Fixed the express.js local variable passing change … see my error above about the title
  • Lets start putting in some real stuff here … auth/login … forms … all the good stufff

6:40 PM – Some Frontend

  • Added a reset style sheet from yahoo and included style.css
  • Included jquery from google’s cdn and a template main.js

6:55 PM – Dinner Break

  • Be back in a bit

7:10 – Back @ it

  • The buffalo chicken/cuscus was very tasty.
  • Lets do a color scheme like: http://nodejs.org/
  • Working on facebook login auth … we’ll later add more providers like twitter/github/google etc

7:30 PM – Once More Into the Breach

  • Now Getting this error on redirect attempts: Error: Can’t set headers after they are sent.
  • hmm…

8:10 PM – Redirect Problem = Solved For Now

  • The redirect problem with facebook connect has now been solved
  • After initial login with connect throwing the user to a make a username page.

8:45 PM – We Have Nods!

  • The first nods are going in the database now, some serious securing to do
  • Heres a screenshot:

9:05 PM – Stylin

  • A little more style:

11:22 – Another Screenshot

  • User Pages Much Better
  • Need Pagination and character limits
  • Screenshot:

12:18 – Check it Out: http://www.nodrr.com

  • It works pretty decently but needs a lot of features to be more usable
  • Please keep in mind that this was just a demo and proof of concept
  • Check out my real startup @ www.exipe.com
  • Time for bed.