What is CSS ?

CSS is an extremely powerful descriptive language.
It helps to define how to display a document (e.g. a web page).

A style sheet contains a set of CSS rules.
Each CSS rule has a CSS selector associated with a set of declarations.
You can see a CSS selector as a selection filter applied on every HTML element. A few element can match a CSS selector if they fit the structure describes in this selector.
Each declaration is composed of a couple (property : value).
The CSS property is a predefined property related to a display or layout behavior.
The value will apply a custom value for the property on all elements matching the CSS selector.

Let’s focus on some advantages of this descriptive language:

A CSS rule is independant from others.

The order of CSS rules (selector + declarations) really does not matter.
The priority between CSS rules is based on the selector itself and not on their arrangement.

You can “mix” CSS rule

2 CSS rules can have the same CSS selector. An element can be matched with multiple CSS rules. CSS rules are merged, it’s called the cascading.
This is the most important feature of CSS.
It implies a very modular and extensible language.

Example

Some limitations of today’s template system

Most of template system are based on inherence between templates.

• You have usually an “inclusion” approach: a template will “include” multiple external template. (Many template into Many template)
• And an “extension” approach: You define in a main template an area where you can append a template. Others templates “extend” your main template. (One main template for Many template)

These approaches aims to factorize template codes and that’s great.

But it doesn’t fit my needs:

• It brings dependencies between templates.
• If you add a new template, you have to modify existing templates.
  If your application tend to go modules based, this is going to be unmaintainable.

web application module (n)
1 : an independent unit of functionality that is part of the total structure of a web application

A solution for scalable applications and libraries

I’ve recently started to rewrite my SliderJS library and I needed to split it into very modular features and having loose coupling between each component.

I followed this Scalable JavaScript Application Architecture article.

So, how to bring loose coupling in templating?.
Each module have its own template and know where to append. Bringing this logic in a main template would break the independency and if I need to add new modules soon, it will not working without modifiyng it.
How to keep the scalability of the main template without modifying it?

The best solution I found is to combine CSS selectors concepts with template system approaches.

CSS concepts applied on templating

I’ve decided to inspire from CSS: attaching a CSS selector with a template.
It benefits from some CSS advantages explained before.

Simple twitter widget example

Classical approach

The way to template it with the classical approach would be:

CSS selector based approach

But we can also split the original “template” in small fragments and mix all of them.
It helps to define each templates independently.

We can identify:

- A root template fragment:

- A header fragment appended with .twitter selector and with an high priority:

- A twitts list fragment appended with .twitter selector:

with parameters twitts = [ "Hello world!" ]

- An empty footer fragment appended with .twitter selector and with a low priority:

- A “follow me” link fragment appended with .twitter footer selector:

with parameters me = "greweb"

Advanced example

This is another example with a slider.

Let’s conceptually imagine the following template language:

combined with some parameters, it will result

Of-course we could also do this programmatically with DOM. But see the benefit of such a descriptive way to define things?

You should keep in mind that the order of rules definition does not matter. In that’s sense, it is a mixable, extensible, modular and loosely-coupled template system.

More about this POC

Unlike CSS, two same rules aren’t merged but are appended.

The priority governs the order of append. The higher the value is, the sooner it is appended to the containers selected by the CSS selector.

As you can see, there is a micro-templating inside each rule. For this example, it looks like the John Resig ‘s Micro Templating.

Note also that a rule must be aware of its parameters to work properly. But this only concerns the implementation: You have to find a way to give a dynamic reference of these parameters when you add a rule.

Concrete implementation

The code above was a conceptual proof of concept, but I implement a subset of these features in Javascript and made “SelectorTemplating.js” available here : https://gist.github.com/1731611

This is how it can be used for (almost) the same example. You will see different style of usage:

t.add (selector, templateFunction, callback, priority)
 * selector is the selector function. if null, append to root.
 * a template function is an identifier in the template.
 * the callback is called at the end of the templating with 2 arguments : the appended nodes and the global container.

Algorithm of the template process

container := the container element
rules := an array containing all rules.
sort rules by priority.
(1) take one rule from rules
  - elements := []
  - if the selector is @root, elements := [container]
  - otherwise, elements := all elements which matches the selector
  - if the elements is empty, back to (1) by taking the next rule.
  - (2) if not, templatize the html and append it into all of these elements. remove the rule from rules. back to (1) by starting from the first rules. 

the loop (1) must end when :
  - there is no rules anymore
  - you have covered all the rules array without finding a match (without passing by (2) for this loop). In that case, it means some rules are not used.

There is a known limitation of the algorithm I intend to fix soon:
Once we found matching elements for a rule, we append the template in these elements once, and we remove the rule. It’s a simple way to avoid recursion. But this approach doesn’t work if a selector can potentially matches elements defined in different rules. I know how to fix this but it’s not yet implemented.

What’s next?

We are working hard for the next version (v2) of SliderJS by trying to make a revolutionary IDE platform for SliderJS. It requires a modulification of every components of SliderJS, we try to keep things simple (no external library required, the core system is only 4k sized). You will have more information soon!

This templating system should benefits of this work.

Keep in touch!

Some links

• Play framework website
• Play framework Archlinux documentation
• Play framework AUR package

Abstract summary

Introduction

Existing Platform as a Service: Playapps.net, Heroku.com.

Our needs are quite different: you sometimes need to have your own server on your own infrastructure and not depending on third party web services.

Let’s see how to deploy some play applications from scratch with ArchLinux.

Requirement

Install ArchLinux on your server

Install yaourt

Installation

Creating 2 play framework applications

Configuring daemons

For app1 :

For app2 :

Starting daemons

Make it permanent in /etc/rc.conf by adding them in the DAEMONS variable.

Nginx, as a front end proxy server

Install nginx using pacman.

Edit /etc/nginx/conf/nginx.conf

Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page.

Nav links are distributed proportionally to the page sections. See how your scrollbar “weds” these links

Flexible Nav is both a library and a bookmarklet which can be used easily in any website.

The bookmarklet demonstrate the hackability of the web by using the semantic of web headings (h1, h2, h3, ..).

Links

• Documentation and Demos
• fork me on Github
• FlexibleNav bookmarklet (drag me in your bookmarks bar)

Same Game Gravity is today available on iPad, iPhone, Android, Web, Facebook Apps and Chrome Web Store.

Un principe simple remis au goût du jour. Trés bon!! (bobylito)

Great twist (excuse the pun) on the “same” game! (mrspeaker)

A fresh spin on Same Game the use of gravity is pretty clever. (erwan)

Same Game Gravity is a mind-bending ball removal puzzle game where you try to remove all of the balls from the board. Balls can only be removed when they are grouped with more balls of the same color. The balls are influenced by gravity. On mobile, you change gravity by rotating your mobile, on desktop you have arrows.

The game gravity

Rotate your device to apply gravity and change balls arrangement!

A pioneering scores system based on social networks

2 years ago, I started to developed the Same Game as an HTML Canvas experiment. I’ve enjoyed developing this game, mostly because playing with HTML5 Canvas is so easy. Recently I’ve seen a nice increase in the user base (now around 250 visitors a day) – despite it being perhaps the simplest games I’ve ever developed. Simplicity is good, but my increase in users is thanks to the power of HTML5: The Same Game is available for 6 different platforms. And I can pump out new builds for them all in around 15 minutes. Here’s how…

It’s often the simplest games which work. Too much complexity is not good.

In 2010, I learned how to make mobile web applications. It was also the year of the iPad. Out of interest I tried my same game canvas experiment on the iPad, and was surprised to find that it worked pretty well out of the box! Seeing it run on multiple devices was exciting – and the touch screens offered a new dimension for creating highly intuitive interactions. I mean, today, even my mum can play Same Game Gravity without any help! (That’s unfortunately not the case for her desktop)

That’s why I wanted to make Same Game for mobile. I started out developing and testing it as an Android application – because I have an Android phone. I created my own micro framework with some MVC concept (views, controllers, a router, etc.). The goal was to create a simple and light web app that look like a native application. For views? Portions of HTML. For transitions between views? CSS transitions. Supporting the “back” button of Android devices as a native application? I played with the hash (onhashchange event).

In short, the web is wide and worldly enough to do pretty much everything you want with…

So I implemented the Same Game on Android. But (naturally) the game already existed on Android! I had to find something new! I was itching to fully exploit the possibilities of a new technology. Mobile has great potential – so it would be bad not to make use of new APIs. I discovered the Accelerometer. My idea was gravity: change the balls position by rotating the device.

But, many of my friends don’t have Android phones!

The Same Game Gravity is now available for iPad, iPhone, Android, Facebook, Chrome Store and desktop browsers. That’s a lot of platforms, with a lot of APIs to learn – and potentially a LOT of work in maintenance. But thankfully I didn’t have to go off learning Objective-C and Java Android, or keep track of arm-fulls of repositories! All the platforms are supported from a single codebase: thanks to the power and awesomeness of JavaScript, HTML, and CSS – combined with a nifty tool I developed WebAppBuilder to easily build each instance.

I added a cool scoring system that spreads via multiple social networks simultaneously and easily – and now I have a truly cross-platform game!

The code

Desktop version source code is available on Github.

The HTML

(see game.html)

The HTML code is pretty simple.
Basically, there is a <div id=”main”> container which contains different <section>. Each section is a view of the game.

For instance here is the game view :

In the desktop version, game.html is wrapped into index.html in an iframe to keep the game independent of the context.

The CSS

(see game.css)

CSS 3 is very rich.

CSS Transitions and CSS Transforms has been used to do view change.

The game core

(see game.js)

Code is organized in different javascript “classes”.

The main components are :

• game.Grid contains all the algorithm of the game.
• game.GameCanvasRenderer is a game renderer (graphic part of the game) based on HTML Canvas element. It contains different functions called by game.Game.
• game.Game contains all the game logic, the game loop and bind DOM events (touch, click, …).

game.desktop.js: a game instance for the desktop

(see game.desktop.js)

This file contains all the specific code for the desktop version (it overrides existing classes). But it mainly contains the game controller handling different views and using all game classes.

Some significant code

The gravity

The game gravity was maybe the hardest part of the game development.

Using device Accelerometer for mobile/tablet version

I needed to find ways to access to the device accelerometer. For Android I used PhoneGap Accelerometer. But on iPhone I wasn’t able to get PhoneGap’s accelerometer.getCurrentAcceleration to work properly, so I used DeviceMotion event supported by iOS 4.2+. (see DeviceOrientation spec).

(A big thanks to @42loops for that: devicemotionevent.html)

CSS Transforms and Transitions for the desktop version

Computers don’t have an Accelerometer. Except maybe some macbook but I’m not sure people would like to turn macbook in 360°! but the gravity concept is crucial to the game. I ended up implementing “gravity” via the arrow keys.
The game is entirely rotated with CSS Transforms and animated with CSS Transitions.

The score system

I’ve written a web service with Play! framework to receive scores or retrieve them from Twitter, validate them and spread them with a json API and widgets.

This web service will be available soon for game developers.

The power of this web service is the usage of social networks. It will retrieve peoples names, avatars, and their social links without needing to prompt the user.
For game developers, social scores sharing is a nice way of advertising your game: someone shares his scores to his friends: so your game can spread virally.

See that little hash “$4f005″? That’s a way to check if sent scores are valid.
In fact the web service allows you to handle your own security, via your own “twitter to scores” transformer. You can add a small Javascript function that is executed by the server when transforming a twit to scores – to ensure there hasn’t been any cheating.

The web service also provides generic widgets to easily embed game scores in websites.
If a player has played a few different games using this web scores service, we can provide a “transversal” widget contains all scores of a player.

The Same Game Gravity Widget

Same Game Gravity use its own widget (source code here).

This widget is very customizable. Here’s an example of the code used to embed the widget anywhere (like in this blog post) :

Conclusion

And here we are! 6 months to develop a game and release it on different platforms! I learn a lot about mobile development and I’m now more capable to develop other games.
I learned that you should avoid using Canvas if you can use DOM instead because performance are bad on some mobile device whereas CSS Transitions / Animations are hardware accelerated.

Finally, I learned that game development is not only about programming! The marketing and the graphical parts are so important too.

Want to checkout the code or contribute to the game i18n? Just fork the game repository.

http://same.greweb.fr/

Thanks

Big thanks to all game testers. Friends and colleagues, thank you very much!
Special thanks to @mrspeaker for English help

Using web to develop mobile applications is very productive and web technologies are rich.

Fork WebAppBuilder on Github.

Rich?

New web technologies have become rich with CSS3, HTML5 and new Javascript APIs are now being supported on most of smartphones. CSS3 animations, Web Service usage, local storage, Geolocation, drawing shapes (Canvas),.. are some example of new web features.

I won’t expand more on this topic but invite you to visit this link for more details.

Productive?

Compared to a native application, the web application paradigm is reversed.
The Web provide a common way to make applications.
To develop a native application, you must adapt yourself for each device, each new API, or each new language,… but with Web, the device fits to you by proving bridges (accessible via JavaScript) to access device features!
I mean, you don’t need to dive into the Java Android API or Objective-C language (for iPhone/iPad), or any other API for other devices… You just have to learn web technologies.

We are in 2011, the “only desktop application” model is over now, and mobile and tablet are two new platforms you should be aware of. So it changes everything about the technology to use.

Having a common language for all instances

Instances of a single application can be numerous.
In fact, an application can be projected in at least 3 axis of instance : The platform (mobile, tablet, desktop, …), the Operating System (Android, iPhone, webOS) and the application version (free version, full version, …).

That’s pretty expensive to develop X instances of an application. This is a problem for developing the first version and mainly for maintainability : You want to fix bugs and add features once, and only once.

So, the point is we need a common language to describe an application with multiple instances.

Web is great for that!

Computers have browsers, mobiles and tablets device have recent browsers.

To make your application development fully independent from the device, firstly you need a great framework to bridge your application and the device (like PhoneGap), secondly you need a great tool to easily build all applications from your common source code.

First of all, let’s see how to organize a web project.

Good practice

This is how I’ve organize my project :

The source code directory

This directory contains all your web app source code. You should keep your application source code (with HTML, CSS, Javascripts, images, sounds, …) in one directory (like /src ).
You should avoid specific code, but sometimes you still need some specific behaviors for different devices. If so, I recommend you to put these differences inside different files (for exemple: mobile.html, tablet.html, computer.html,…).

Project skeletons

Keep one skeleton directory for each instance of your application.
A skeleton directory will contains all the specific code related to the platform/device/version.
Frameworks like PhoneGap bring you these skeletons.

WebAppBuilder

I created WebAppBuilder : a lightweight Makefile to build your project. This is a mashup of existing cool stuff like : a small template system (Mustache), SASS with Compass, Javascript minimizer, …

Features of WebAppBuilder

• Template easily your HTML files with Mustache.
• Copy, concatenate, minimize Javascripts however you want.
• Retrieve Javascript files from URLs (useful for libraries).
• Compile SASS files into CSS files (if you use this awesome stylesheets language)
• Support Compass if installed (you don’t need to provide it in your source, only an import works)
• Merge your CSS files.
• Copy and optionally rename resources you want to include (images, fonts, sounds,…).
• Error handling and atomicity : if one operation fail, the make fail (javascript syntax error, sass syntax error, …)

You must have one Makefile per project skeleton, so you can easily define what to do with the /src for the related platform/device/OS.

Download or Contribute

Fork me on Github

Example with my Same Game Gravity game

I developed these tools during the Same Game Gravity game development.

A make inside my android/ skeleton gives me :

And here is the Makefile I use :

Android Makefile

Configuring your IDE

I use mainly komodo and geany as an IDE. They both have a build system. I recommand you to configure your IDE to make && open the page just by pressing a shortcut key.

Features planned

• make should build the .apk for Android app

Special thanks

• to mrspeaker for English review.
• to jQuery build system (js minifier)

It’s now available on Android market.

More infos on http://same.greweb.fr/.

This ball removal puzzle game is made with HTML5 technologies and PhoneGap. Source code will be published within a few months.

Dans la suite de l’article : les liens et codes de la vidéo …

Liens

Specs

• whatwg.org/html
• Canvas

Exemples

Bibliothèques graphiques

Exemple de l’implémentation

Like in the past, I have decided to restart to do some video tutorials and podcasts, but this time to share my new experience in web architecture and programming.

I have lot of ideas of video podcast around new web technologies but I don’t have much time to do all of them.
So I’m going back to the real goal, I mean YOU, readers ! I will ask you through a vote what do you expect the next video podcast? This is a new concept I’m experimenting.

I’m expecting lot of votes before closing them, so feel free to share the news.
I intend to release a video every 2 or 3 months about.

Pick one choice among these various topics :

[poll id="2"]

(I don’t know if I’ll do it in English but if it’s in French, I’ll probably put subtitles)

If you have the same problem, you can read this article to fix it

My conf :
Linux Kernel: 2.6.36
Architecture: x64
Device: ID 07d1:3c0a D-Link System DWA-140 RangeBooster N Adapter(rev.B2) [Ralink RT2870]

What to use ?

So the only way I found to make it work nicely is to use ndiswrapper, a windows XP driver wrapper, and wpa_supplicant, a WLAN tool.

First, I’ve tried some RaLink drivers but this was not really great, I’ve succeed to make ra2870 work only one time but there was some lags each 20 seconds (like 1000ms ping frequently).

Moreover, I recommend not using NetworkManager with this method, it seems ndiswrapper and networkmanager produced awful results for this bundle (like waiting 30s for wifi to connect (or not connecting!), or freezing my Linux, …). Use wpa_supplicant + utils like netcfg instead of

Procedure

Alternatives rejected, here is the solution step by step :

Pre-conditions

With a wired connection, install these packages (with your package manager) : ndiswrapper , wpa_supplicant and (optional) netcfg.

Unfortunately, I had some freeze issues with the current ndiswrapper repository version so I checkout ndiswrapper SVN source code on http://sourceforge.net/scm/?type=svn&group_id=93482 and recompile it. Maybe you have to do the same.

1. Don’t plug your bundle yet. Insert the CD of the product. It contains the driver we need for ndiswrapper. You need to find the /Drivers/WinXPx64/ (it may depend on your arch) .inf file. You can also download the last driver on the D-Link website.
2. Go on commandline in root mode and type :
   ndiswrapper -i {path of the .inf file}

   Example:

   ndiswrapper -i /media/cdrom0/Drivers/WinXPx64/Drt2870.inf

   )

3. Plug your bundle and check if the command “ndiswrapper -l” say something like :
   drt2870 : driver installed
     device (07D1:3C0A) present

   If not you maybe need to “ndiswrapper -r drt2870 ” to remove the driver and return to the second step trying another /Drivers/*/*.inf file.

4. Next, you need to configure your wpa_supplicant.conf configuration file for your wifi access point. Refer to the documentation.
5. Try to run wpa_supplicant :
   wpa_supplicant -i wlan0 -c /etc/wpa_supplicant.conf

   Once this working, you maybe need to run dhcpd :

   dhcpd wlan0
6. Now you can try your internet connection, by pinging google.com or try to browse the web.
7. If it works, you can save your configuration, refer to the documentation.

For any problem, feel free to comment this article.