Monthly Archives: August 2014

Creating Better Wheels

Back in february 2013, I was at a clumsy hotel in the business heart of Paris, La Defense, for a week while visiting Qualys’ French headquarters. The golden rule of supply and demand over there drives the prices crazy and I felt robbed as I entered the tiny, smelly and loud room that my company was paying 250$ / night for. A beautiful view on the hotel 20 feet away next door, freshly stained carpet, and exquisite torn tapestries. The final blow came when powering up my laptop and realizing that the wifi signal was like a distant whisper, too weak to be used though it had been paid for… After being disconnected numerous times within the first minutes of usage, I gave up.

I had been working on a side project for the past couple of months and had run accross the simple need to have a multiple selection combo box in tune with Bootstrap. I had spent a couple of hours trying to find or play with the closest solutions to my needs (chosen, select2, textextjs, etc) but I was not satisfied with the lack of configuration options. At the time they would all come short of the features I needed: some didn’t allow you to create free entries/tags, all had static layouts, the quality of the docs matched the one of my hotel room (they have all improved on this since), and it was a pain to achieve a pixel-perfect visual with Bootstrap. I had always been told not to reinvent the wheel but as I attempted to work with the existing tools I realized it might take me less time to actually rewrite a plugin from scratch.

A clumsy place with no internet and a poor TV programming for 4 nights was just the perfect moment to create my combobox. I designed it from scratch, with the inspiration of what had been done for the other plugins. It took me about 8 hours to get something that I was satisfied about, and because I had some time left, I took another 4 hours to build the documentation and prepare it to become open source.

While I had made several contributions in the past to other open source projects I was using, this was my first attempt at releasing an open-source project as a creator. I pushed it during the week-end and created a thread on /r/programming to expose it and tract a bit of attention. I was hoping for some good feedback. All i got the first 24 hours was a single comment saying:

http://ivaynberg.github.com/select2/

http://textextjs.com/

I have to say, I felt pretty bad and quickly concluded that my project was useless. I received a bit more neutral feedback afterwards with people who pointed out a few bugs and I spent some time fixing them for the next couple of days. I then exposed the plugin at two other places but always received the same answer: “why are you reinventing the wheel? It’s already been done before a thousand times.”

If you have ever created anything, you have probably been in that case as well. I think it’s pretty safe to say that in the software business, all the needs have been covered one way or another. Whatever you do out there, you will be reinventing the wheel. This is so disturbing it can even prevent you from starting anything. When John Carmack started game development, he felt like he was late to the party and that everything had already been done a couple of years before him. So why even bother?

Well, surprisingly, a year later, my tiny and simple open-source jQuery plugin MagicSuggest has almost reached 900 stars on github. It even was at the top of github’s trending list for a few consecutive days. Small achievement, yet big realization: I started as a plagiarist. I became an innovator.

Take a look at all the software/websites you are currently using and you will realize that almost if not all of them have replaced an existing product / website that was irreplacable at the time. Back in 97 everyone was using AltaVista to search the web. You would have been foolish to create another search engine back then. In 2005, all development teams were using SVN. And there were tens of other VCS available should the standard not fit. Why on earth would you want to recreate another one? Back in 2007 everyone was using emacs / vim / textmate / notepad++ to code. There were thousands of editors out there and you would have been foolish to create another one. The list goes on and on, with similar patterns. similar initial end-users criticisms, similar end-product success.

There’s a quote wrongly attributed to Picasso that is often quoted today: “Good artists copy, great artists steal” that Steve Jobs would often refer to. I prefer the W. H. Davenport Adams version:

“Great poets imitate and improve, whereas small ones steal and spoil.”

The great truth about software is that there is no perfect round-shaped wheel out there. We should be very careful when criticizing those who imitate: the ones who attempt to recreate something are the only ones who can seize the opportunity to make it better. And if you want to contribute to the future, start looking for people who have the guts and skills to question the standards of today.

In our little world of code, innovation is not achieved through creation. It is done through improvement.

How AngularJs will save JavaScript from its $ sign

I usually never rant about other programmers, considering myself only an average programmer. But as a community of developers, I think we are doing an awful job of helping people understand that jQuery != JavaScript. And I think that AngularJS will be a great asset in that regard.

The ever-amazing jQuery
I won’t say it enough: jQuery is an amazing piece of work and I cannot remember or imagine how we ended up building front-end code without it back in the days. It has saved us as developers at a time when every browser was going left and right: in 2006, Internet Explorer 6 was still leading the dance even though it didn’t comply with a bunch of basic w3c standards (boxing hell, transparency hacks, etc.). Firefox was on the rise and Chrome wasn’t to be released until 2 years later. jQuery provided us with the most powerful tools to master the DOM without ever worrying about the browser. It was simply revolutionary. We were also very lucky that its creator, John Resig, only 22 at the time, made it clear from the start that his library would stay completely open sourced, distributed with no strings attached. I want to emphasize that because it deserves to be praised. This was 8 years ago. There was no GitHub. Open source projects weren’t the latest fashion that it has become today. But unlike other people who were more interested about money than about improving the web, John stayed true to his word and conviction by being an advocate of open source software. Like a few others, he is one of the great hackers of our generation who have revolutionized our industry.

JavaScript sucks, jQuery is so cool
jQuery’s success was not only caused by its licence model or its cross-browser dom manipulation power, it was also caused by the fact that JavaScript was (and still is) an unpopular and misunderstood language.

If you ever get a chance to look at client source code from the websites that were built at the time, you will quickly see why people despised JavaScript. Everyone (including me) was doing it wrong, with files scattered everywhere using hundreds of differant coding style. There was no structure. Things could be done a thousand ways and noone would tell you which was the right one. People would randomly create variables on the global scope with very precise names such as data or i. There were memory leaks everywhere. There was no need for jslint, no need for convention, no need for a grumpy old man to tell you what to do. Noone ever bothered to create very clean JavaScript code. It was just something that people usually rushed at the end of the dev cycle in order to produce some quick and dirty client-side effect or field validation. It wasn’t even considered a real language, something that you could put on a resume or that you could brag about.

I’ve always believed that anyone can produce the crappiest code with any programming language or framework. Yet I think that some languages make it easier than others, PHP and JavaScript being the first 2 that come to mind.

The truth is: people didn’t like JavaScript because they didn’t understand the language. They looked at it as some trivial scripting language that anyone could code by typing random keys on a keyboard. People did not take the time to learn the subtleties of the language because they despised it. This is why jQuery came out so strong. People were seeing it as an escape from JavaScript, something that would replace its ackward and aweful syntax. DOM manipulation became easy, and it could be done properly without worrying much about anything else. jQuery was just so cool.

$(2 + 2)
From that point on, jQuery was adopted into every single website out there. And any website who didn’t use it would have been foolish not to do so. This was at the time when people would test each browser version number and specify which was supported. Chrome was released and butchered the old version numbering traditions by going from Chrome 1 to Chrome 8 in less than a year. It became impossible to go by without using jQuery’s hassle-free cross browser code. And yet, while jQuery solved many issues for us at the time, it didn’t address the most important one: people were still coding in JavaScript without knowing anything about JavaScript. All the complex parts of the language were wrapped and hidden so that anyone could build clean client code using the library. How many times have I wished that jQuery’s scope management hadn’t been left out to die, forcing people to keep references of this and that everywhere. (kudos to ExtJS for doing the exact opposite by the way)

And so it was that everyone’s toolbox was soon to be only filled with this all-in-one hammer called jQuery. You have a JavaScript problem? jQuery is the answer! Just look at StackOverflow’s JavaScript questions and answers. Every “vanilla” (I’m not found of that word…) JavaScript question is answered or tagged with a jQuery answer, making it even more complex to differenciate one from the other. jQuery started as a helper library. It became an imposed non-requirement. It’s been said a thousand times:

when all you have is a hammer, everything starts to look like a nail.

At that rate, I was predicting that people would soon do simple math using the $ sign. I would have bought some candles for Brendan Eich. This is where I am ranting about our community of developers. We need to do a better job of helping people understand that jQuery is not JavaScript. We should not answer with jQuery when it is not needed. We should also provide JavaScript answers to jQuery questions when jQuery has nothing to do with the problem. It is our duty to help others understand the language more, as it is quickly becoming the most important programming language in the world. We need to help people open up jQuery’s source code, understand its magic methods like $.extend or $.ajax, or how it manipulates the DOM. Just like 10 years ago, anyone today who has only done object-oriented programming will be thrown off by JavaScript’s prototype-based language and dynamic typing. But if one starts digging into what makes JavaScript unique, understanding the concepts of closures, anonymous functions, first-class functions, class-less syntax, he/she will immediately realize how beautiful, complex, and powerful JavaScript can be.

AngularJs to the rescue!
It seems hard for Google to create something that isn’t amazing. Their quality standards are part of what makes the internet great today. AngularJs came out late 2010. With about 2 releases a month using entertaining codenames like sneaky-seagull or barefoot-telepathy, it quickly started getting recognition as a new way to build complex, rich and unified single-page applications. As of today, it is one of the hot and trending tag you want to put on your resume.
Of course there have been other breakthroughs with the JavaScript usage, such as its usage on the server side. But the unique thing about AngularJs is that when designed correctly, your app should not include both angular.js and jquery.js. When designed correctly, AngularJS makes jQuery obsolete by taking care of the DOM manipulation in its own way. And as people stop using jQuery, they once again have a chance to dig into the wonderful world of JavaScript they had once despised.

Don’t misread me. I’m not saying that people should forget jQuery and replace it with AngularJS. It would be of no worth to replace an all-in-one tool with another. But as people strive to have multiple tools in their toolbox, they might end up realizing that they don’t need a sledgehammer to crack a nut.

CodingGamers

I have been thinking about a new game concept for a while. It targets a niche community so if you are part of that community I would love to hear your feedback as I make progress on this hobby project.

This post will be long because it describes the gaming concepts. No TL;DR; sorry.

Title: CodingGamers
Genre: Educational / RPG / Small games
Description: Programmers and Gamers will meet on this platform to create and play games with an RPG flavor, retracing the history of computer Gaming.
Inspirations: Game Dev Story, Upgrade Complete, CodePen, PlayMyCode, and the recently discovered awesome Untrusted

Starting up
Registration is free and is done through Tw / Fb / G+.
The user starts the game with the following stats:
– money: 150₲ (virtual currency)
– # games made: 0
– reputation: 0
– game company: none
– experience: 0
– year: 1980 (first era of time)

The virtual currency ₲ is used to:
– purchase/upgrade a more recent computer
– play games compatible with the acquired hardware
– purchase a game engine to create better games
– enhance a game engine

The objective of the game is to unlock all perks, advance through the years and reach the hall of fame with a stellar game. A user is both a gamer and a game developer.

Eras of Time
– There are 5 eras of time (1980, 1982, 1985, 1989 and 1992) that can be unlocked once the user reaches a certain amount of XP points.
– Experience is gained by shipping the games one creates and by finishing games others created.
– The site’s bootstrap theme, the available hardware and games reflect the era that the user is in.

WebSite Presentation
Once registered, the user can login to his homepage.
– Dashboard Tab : stats about the user’s company, his game sales #, his gaming stats, his friends stats, gaming news, game ads
– Tseam Library Tab : library of all the games the user has purchased with ₲.
– Coding Lab Tab : library of all games in current development
– Dry’s Electronics Tab: shop where the user can purchase new computers, parts, and game engines.
– iShopGame Tab : shop where the user can purchase games developed by the other users.

Whether or not the user will be mostly a player or a programmer, he cannot do anything until he has purchased his first computer, which is why he starts off with some ₲. Initially the user is set back in 1980. He can only purchase the most basic computer:

– Computer Name: IBN Personal Computer
– Requirements: 100₲ + year > 1979
– Specs: 1-bit display (black&green), 80×24 characters display, 8kb memory
– Upgrades available: memory up to 32Kb: 4kb = 20₲

The user is then led back to the homepage where he can:
#1/ start playing games that his computer can handle
#2/ start his own game company and career as a game developer

#1 : Playing Games
The user goes to the Games Shop where he sees all the games that have been released by other users and which match the era/period that he is in. Each game has a price (₲), a description, a cover image, user rating, the developer’s reputation (overall rating on the games released), and finally hardware requirements.

(Games can be sorted by name, # sales, release date, company, rating. Some games are grayed out as the user might not have the required specs to play them such as unsufficient memory, etc.)

Every time the user purchases a game, 50% of the ₲ goes to the developer.
The game gets added to the user’s game library where the user can play it, complete it, and then rate it.

The user gains experience by completing other user’s games and rating them once he has completed them. (ratings make up for the developer’s rep) Once he has enough experience, he may advance to the next era: the website theme is modernized, more advanced computers and parts can be purchased. The new hardware allows the player to play games with higher requirements.

#2 : Creating Games:
The first time the user goes into the Coding tab, he will be required to create his game company with a permanent name and custom-made pixel-art logo. (which will be displayed at the start of the games he makes)

He will then see all the current games that he has in development.
He can edit or create a new game.
Should he decide to create a new game, he is first asked to select one of his computers to develop the game on as well as a game engine to use. This choice cannot be changed after for that game.
The user is then taken into a CodePen-like environment where he uses the game engine to produce a full game.

Game Engines
Game Engines need to be bought to build games with. They require a certain type of hardware before purchase.
The better the engine, the more features it has (palettes, fonts, collision, music, sounds, etc.)

Example for first available engine:

– Name: 7UPERTXT-NG-3000
– Price: 30₲
– Required Tech: IBN Personal Computer
– Great For: Tiny Text-Based Games
– Speed: 5 FPS
– Available API methods to interact with display:
void write(txt, [x], [y], [color])
string input(txt, [x], [y], [color], callback)

Each game engine tech is a subset of a full custom yet fairly simple HTML5 game engine.
Each game engine comes with its manual (basically the API doc). New engines include descriptions / tutorials of the new API methods that were unlocked.

Programming
Coding is made in javascript and will use the API methods provided by the selected engine version.
Once a computer and game engine have been selected, the user enters into creative mode with an editor on the left and the results on the right.
Each game is required to have an ending. The length of the source code (# characters) is limited by the computer memory specs. Developers will not be able to write source code that exceed the amount of his computer.
Gamers cannot play games whose source codes exceed the memory amount of their computer

Assets have to be hard-coded in the game code. Images will be arrays of color pixels matching a given palette.
Musics will be transformed from string (http://keithwhor.com/music/, http://en.wikibooks.org/wiki/QBasic/Appendix#PLAY)
Sounds will be fetched from a provided sound library.
This means that the entire game can be exported as a single file and used freely elsewhere.

Once the game is ready for release, the player submits a unique title, a game type, an uploaded squared 256×256 image logo and a selling price in ₲. He can also purchase an ad campaign that will give his game more visibility to the other users (it appears in people’s dashboards, gets promoted in the Game Store, etc.)
The requirements for gamers to buy the game match the developer’s machine specs.
The developer can also decide to open-source his game so that others can view the source code freely.

The game is then in green-light beta, meaning that they have to be approved by the website’s mods before being public.
Website mods will have to play the game to moderate it (check if ending possible, no hacks, no spam…) and then assign the amount of xp gained when completed. Once approved, the game is released and appears in the store. Developers gain XP when a game goes gold, they also gain ₲ from game sales.
With enough XP, they can advance to the next era. The ₲ allows them to purchase better computer, computer parts, game engines, and make better and more expensive games.

Proof of Concept:
Here is a simple hangman game created with the most basic game engine / game computer combo. You can see that the main game loop is already in place and the rendering is done by the engine. The code is updated live and should be running in its own frame for security.

Additional Notes:
Users can gain additional ₲ by promoting the site (social network shares), getting referals (new users), or simply being active: logging in, reviewing
games, etc.
A game that reaches a certain amount of sales is called a hit. These games can have sequels which have benefits (people who game good score to the original game are notified of the new release, etc.)
Every week a new game theme is given. At the end of every week, one game from each era is selected to get a theme award.
Once a game has been released, it cannot be re-edited. Code is view-only. Bugs remain bugs. This is the floppy disk era. Release when bugfree!
Every month a high-end game is selected to be elected to the Hall of Fame (another front page tab) and the programmer wins the game.
Everything reflects the era the user is in: the web app interface, the code editor, the games, etc.
The Game Engine API will be open sourced on GitHub

Technical Notes:
Executing someone else’s javascript is always a bit frisky… We’ll have to take the same disposition as jsfiddle / codepen.

Possible computer specs according to the accessible eras:
Computer Name: IBN Personal Computer
Requirements: 100₲ + year > 1979
Specs:
– 1-bit display (black&green)
– 40×24 characters display (320×192)
– 8kb memory
– 1 simultaneous keys
Upgrades available:
– memory up to 16Kb: 4kb = 20₲ for ex.

Computer Name: ZED Spectrum
Requirements: 300₲ + year > 1982
Specs:
– 2-bit display CGA (8 colors)
– 80×48 characters display
– 16kb memory
– 2 simultaneous keys
– music 1 channel support
– up to 16 simultaneuous sprites

Upgrades available:
– additional fonts
– additional palette
– memory up to 32kb

Computer Name: AGIMA 1000
Requirements: 500₲ + year > 1985
Specs:
– 3-bit display EGA (64 colors)
– 320×200 pixel display
– 32kb memory
– 3 simultaneous keys
– mouse support
– music 1 channel support
– sound 1 channel support
– up to 32 simultaneuous sprites

Upgrades available:
– additional fonts
– additional palette
– additional sounds
– memory up to 64kb

Computer Name: 386SX25
Requirements: 1000₲ + year > 1989
Specs:
– 4-bit display VGA (256 colors)
– 320×200 pixel display
– 128kb memory
– 4 simultaneous keys
– mouse support
– music 4 channel support
– sound 4 channel support
– up to 64 simultaneuous sprites

Upgrades available:
– additional fonts
– additional palette
– additional sounds
– memory up to 1028kb

Computer Name: 486DX2-66
Requirements: 2000₲ + year > 1992

Specs:
– 4-bit display VGA (256 colors)
– 640×480 pixel display
– 512kb memory
– 4 simultaneous keys
– mouse support
– music 8 channel support
– sound 8 channel support
– up to 256 simultaneuous sprites

Upgrades available:
– additional fonts
– additional palette
– additional sounds
– memory up to 4096kb