News
Home Home Contact us Contact
home News Projects Tests Files Follow manatlan on Twitter Sign in
2 weeks ago

My first PWA

Here is a scratch app. Progressive Web Apps are the way to go, like I said 3 years ago, it's a different fashion. It's a lot lot better to manage the cache with a service worker than with the appcache manifest ;-).

This one doesn't use angular, neither riotjs; it's just pure javascript ;-) In an near future, "web app" won't need Cordova/phonegap to access to peripherals. All will be added as api/event thru the service worker.

Comments (View)
4 months ago

Websocket on app engine : soon !

Big news ;-)

https://code.google.com/p/googleappengine/issues/detail?id=2535

"Thanks to everyone for your feedback. We recognize the importance of App Engine support for WebSockets[1][2] and are actively working on implementing this feature."

7 years later ;-)

Comments (View) Tags: gae
8 months ago

FreeboxV6 Api V3 avec Python

Un peu de python, et ça vient annuler ça ;-)

Voilà une api python simple de registration et de connexion avec les API v3 de la freebox :

import urllib2,hmac,json,hashlib,time

class FbxCnx:
    def __init__(self,host="mafreebox.free.fr"):
        self.host=host

    def register(self,appid,appname,devname):
        data={"app_id": appid,"app_name": appname,"device_name": devname}
        r=self._com("login/authorize/",data)["result"]
        trackid,token=r["track_id"],r["app_token"]
        s="pending"
        while s=="pending":
            s=self._com("login/authorize/%s"%trackid)["result"]["status"]
            time.sleep(1)
        return s=="granted" and token

    def _com(self,method,data=None,headers={}):
        url = "http://"+self.host+"/api/v3/"+method
        if data: data = json.dumps(data)
        return json.loads(urllib2.urlopen(urllib2.Request(url,data,headers)).read())

    def _mksession(self):
        challenge=self._com("login/")["result"]["challenge"]
        data={
          "app_id": self.appid,
          "password": hmac.new(self.token,challenge,hashlib.sha1).hexdigest()
        }
        return self._com("login/session/",data)["result"]["session_token"]

class FbxApp(FbxCnx):
    def __init__(self,appid,token,session=None,host="mafreebox.free.fr"):
        FbxCnx.__init__(self,host)
        self.appid,self.token=appid,token
        self.session=session if session else self._mksession()

    def com(self,method,data=None):
        return self._com(method,data,{"X-Fbx-App-Auth": self.session})

    def dir(self,path='/Disque dur/'):
        return self.com( "fs/ls/" + path.encode("base64") )

Pour commencer, il suffit de registrer son appli dans la freebox, en lançant, dans son reseau local uniquement, chez soi, la commande suivante :

print "token='%s'" % FbxCnx().register("test.id","le nom de l'app","la device")

Il faut valider la registration sur l'afficheur LCD de la freebox, et garder le token !

Une fois que c'est fait; on peut attaquer les API depuis n'importe où sur le web. Si on est ailleurs que dans son sous réseau freebox, il faudra préciser l'ip public de la freebox, ainsi que sont port, dans un paramètre 'host' (faut évidemment que ça soit activé dans la config freebox).

f=FbxApp("test.id",token,host="11.22.33.44:4444")
print f.dir()

L'instance FbxApp négocie, en douce, un 'token de session'. Si on veut garder la même session, il est possible de l'obtenir (f.session), de la faire persister, et de la donner à l'instanciation, comme ceci :

session="WV+O0z1XgE4QB728uINupbQdBiKKAhKYjAX+UylmGwL2ejo6ViQkcx1tK4onQIzt"
f=FbxApp("test.id",token,session,host="11.22.33.44:4444")
print f.dir()

Il n'y a que la commande "fs/ls" d'implementer (via dir()), mais le reste est tout aussi simple ;-)

Mais on peut aussi appeler directement les API, ainsi (et voir passer des params, via un dict comme second argument):

print f.com("airmedia/receivers")

Comments (View)
8 months ago

In the SPA style

I've built a super tool : it's a "web editor" online, so I can quickly code for the web (static or dynamic (python/bottle) files). It use the marvelous ace editor, it's hosted on GAE, it's built with RiotJS. It's a little bit like koding, but without the linux prompt. It's just for me, but I could release it. The frontend is here, but it's just for me, like I said before ;-( ... (it's already the second version, and this one was coded using the first version ... it's like the chicken & the egg ;-) ... now, I can code with the chromebook or whatever internet devices ;-)

It could be done with angular, but not. RiotJS is more fun (but not widely used ?!?) ;-)

Here are 2 (ugly) demos of a classic (simple) app (a kind of todo's app). The first one : an Angular2 version (with classic ES5 javascript (not typescript!)), the second one : a RiotJS version.

Twos are using :

  • a service (to deal with datas) : 'MyService'
  • a master component : 'app'
  • a child component : 'item' (itered from the master)
  • a mecanism of events to communicate between the twos
  • a pipe (aka filter), to transform data : 'mypipe'

I let you choose which is the most readable, the simplest ;-)

It's not really comparable, A2 comes with a full stack. With Riot, you'll need to import yours polyfills and others libs : but you've got the choice !

Comments (View)
9 months ago

iBraining goes mobile

It's a big day, It's nearly Christmas ! iBraining is now (nearly) fully playable on smartdevices (phones, tablets, small screens, ...).

It's not a big rewrite from scratch (like I planned), not a SPA app, not riotjs/angular* powered! I've just hacked the html/css to be a responsive app, to adapt itself to smallest screens. It should do the job.

Desktop version continues to work ;-), just small changes in the front.

Hope everything will continue to work for everybody.

PS: I will continue to work on it in the future days (mainly : better rendering).

Comments (View) Tags: ibraining
10 months ago

RiotJs : I'm fan

It makes 5 deys since I've discovered RiotJS :-)

It's perfect (there are some glitchs, but nothing annoying). You can clearly concentrate on your code/app, and not fight with the framework. It's pretty convention over configuration (it's sadly not the case of angular2). It fits my brain, and I am clearly more efficient with it ;-). And it's pretty easy to use others js libs, without a wrapper.

I've started to recode ibraining.com with riotjs. So the angularJS version will never reach the online state ;-). I've redone all my game components in less than 8hours. Pretty nice :-)

And my chromebook, with caret, is perfect tool to develop with RiotJS (angular2 dev is more complex on chromebook).

Here is my first riot online app (it's nothing, coded in 20min). It's a scratchpad to code python things. It works offline, uses 4 buffers (saved locally), and CTRL+RETURN is a shortcut to run the code. Thanks to skulpt.

Comments (View) Tags: angular, ibraining
11 months ago

RiotJS thougts

It fits my brain ...

I've spent some time on angular2, building a 'starter kit', with lot of components ready-to-use (menu, notifier, modals, services ...). I'm happy about the result.

But I found RiotJS while surfing on a javascript trouble. I had a look at the tuto, and was blown by the simplicity. 2 hours later, I'd full rebuilt my starter kit, without any frustations, and with a lot of fun (remembering the good old days of angularjs (v1)).

RiotJS is clean and comprehensible. Building a component is easy (far from angular2). Building a working solution is quick (far from ...). It's a real pleasure to code with it, it just works as expected.

The size of the riot runtime (with compiler) is around 18kB, compared to angular2+router+typescript+traceur around 2MB. The loading/instanciation time is very quick. The ability to code with classic javascript, or whatever you want is great.

Angular2 with typescript is cool. But life is too short to take some time to fight with types and declarations at all stages. It's like coding in java instead of python. I think I will continue with RiotJS, it's fun again, and you ve got great results quickly !

And you can start coding with a notepad (or SciTE ;-).

<!DOCTYPE html>
<html>
    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.4/riot+compiler.min.js"></script>

      <script type="riot/tag">
        <boum>
          <span class={color:selected} onclick={change}>hello {name}</span>
          <style scoped>
            span {cursor:pointer;border:1px dotted grey;}
            span.color {background:red}
          </style>
          this.name=this.opts["name"];
          this.selected=false;
          change(e) {
            this.selected=!this.selected;
          }
        </boum>
      </script>
    </head>

    <body>
      <boum name="world"></boum>
      <boum name="you"></boum>
    </body>

    <script>
      riot.mount("*");
    </script>
</html>

Comments (View) Tags: angular
11 months ago

Angular2 thoughts

I practice AngularJS for 3 years. I practice javascript for 15 years. And I mainly use SciTE as my first text editor, since ... I don't remember ;-)

I don't wanted to jump into typescript (or others JS transpilers). So I started to hack angular2 with classic javascript (aka ES5). But it's not a great choice, for the moment. BTW, recent changes on the class declarations (the new way to declare annotations) are on the good way, and perhaps it will be as easy as Typescript in the future.

But I tried to setup an atom editor to use angular2 with the transpiled way : it's clearly THE way ! I needed to dive into SystemJs, Typescript (code and compilations) : it does the job ! Don't need to dive into NodeJS, npm, and others gulp system. Atom, with its typescript plugin, is able to compile ts into js. It can autocomplete code, go to declaration, underline mistakes ... (every goodies offered by an IDE on typed languages). And thanks to typescript : you can mix typescript and classic javascript together ... It's perfect.

AngularJS was a good way to quickly produce a SAP app, but the learning curve was "hard", and it's not really prompt to make reusable components (without following good code design) : you can produce beasts by using controller, $scope and $rootScope.

Angular2 is clearly components based, and is really simple (compared to AngularJS). All fit together, and components are easily reusable (by design). It should be possible to make components with skulpt or brython too, one day.

Comments (View) Tags: angular
11 months ago

Angular2 diving in components ;-)

Here is a standalone file, which is fully executable in any browser (and ready to be hacked). It's typically the kind of example I dreamed to find at the beginning of my diving. But resources are, on the web, a huge soup of different versions. But remember : angular is in alpha ;-)

This example expose some concepts:

  • use of ES5 (classic javascript), cause I did't want to fight with all others concepts, to focus on a2 only ;-)
  • a custom pipe
  • Parent & nested child components
  • Share infos to child thru properties and content (transclude)
  • a custom event (to notify parent from a child event)
  • an external service (auto-injected), to deal with datas (model).

Hope it could help someone.

<html>
  <head>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
  </head>
  <body>
        <app/>
  </body>

  <script>
    function MyService() {
      var liste=[];
      return {
        all:function()    { return liste.slice(0) },
        add:function(x)   { liste.push(x) },
        sub:function(idx) { liste.splice(idx,1) },
      }
    }

    var MyPipe = ng
        .Pipe({name:"mypipe"})
        .Class({
          constructor: function () {},
          transform(val) { return "**"+val+"**";}
        });

    var ItemComponent = ng
        .Component({
          selector: 'item',
          properties: ["index"],
          events:["deleteme"],
        })
        .View({
          template: `
              <div>
                {{index}} ) <ng-content></ng-content>
                 <button (click)='onDeleteme($event)'>X</button>
              </div>

            `,
          directives: [ng.CORE_DIRECTIVES],
        })
        .Class({
          constructor: function () {
            this.deleteme = new ng.EventEmitter();
          },
          onDeleteme:function(event) {
            this.deleteme.next();
          }
        });


    var AppComponent = ng
        .Component({
          selector: 'app',
          bindings : [MyService],
        })
        .View({
          template: `
              <input #name/> <button (click)='mys.add(name.value)'>Add</button>
              <div *ng-for='#i of mys.all(); var index=index'>
                  <item [index]="index + 1" (deleteme)="mys.sub(index)">{{i | mypipe}}</item>
              </div>
            `,
          directives: [ng.CORE_DIRECTIVES,ItemComponent],
          pipes: [MyPipe]
        })
        .Class({
          constructor: [MyService, function (mys) {
            this.mys=mys;
          }],
        });

    ng.bootstrap(AppComponent);
  </script>
</html>

Comments (View) Tags: angular
11 months ago

First Angular2 tests ;-)

Got it ;-)

It wasn't so hard. The main trouble was to aggregate all mixins informations about angular2/angularjs/es6/es5/typescript/dart ... and babel or not ;-)

I choose to test with ES5, without syntaxic sugars (like new decorators) of ts/dart/es6 ;-(. But I wanted to make a simple component like I made a simple controller with classic angularJs/javascript(es5).

Here it is one :

<html>
  <head>
    <script src="https://code.angularjs.org/2.0.0-snapshot/angular2.sfx.dev.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
  <script>
    var AppComponent = ng
        .Component({selector: 'my-app'})
        .View({
          template: "<h1>Hello {{name}} </h1>" +
                    "<li *ng-for='#i of list'>{{i}}</li>"+
                    "<button (click)='add()'>Add</button>",
          directives: [ng.NgFor]
        })
        .Class({
          constructor: function () {
            this.name="world";
            this.list=[];

            this.add = function() {
              this.list.push(this.list.length+1);
            };
          }
        });

    ng.bootstrap(AppComponent);
  </script>
</html>

First impressions:

  • It's really component oriented. Bye bye controllers : It's a good point. It make me think of ReactJS. (Is angular2 = best of angularJs + reactJs ?)
  • I don't like theses new syntax chars (*/#/()/[]/...) in html/template side.
  • I really like how all tie together. I think it should be really easier to learn it, than the good old angularJs.
  • Angular != AngularJS

Comments (View) Tags: angular
<< oldest

Tags

RSS aex aex
RSS d2 d2
RSS gae gae
RSS go go
RSS ppa ppa
RSS Python Powered Get Ubuntu
©opyleft 2008 - manatlan cmd snippets