Reprise du message précédent :

Pas sur de comprendre vos réponses, j'ai fait un test pour vous montrer mon problème :
http://codepen.io/anon/pen/tBwsA
 
Si on passe sur les 4 super vite, ça reste blocké "blanc".
 
J'ai essayé de bidouiller un truc avec un enregistrement de l’état mais je trouves ça lourd et sale (bon dans mon exemple fait à l'arrache en plus ça bug ^^):
http://codepen.io/anon/pen/cjaIe

Dans le manifest du APP Cache, tu peux mettre des wildcard il me semble... Tes bouts de carte sont pas tous servis par une URL qui a la même tronche et que tu pourrais faire matcher génériquement ?

J'ai toujours été persuadé qu'en CSS, l'unité px correspondait @ 1 pixel à l'écran.
 
Et bien en fait, ce n'est pas le cas
 

les wildcards ne sont que dans la partie network ( genre pour tout ce qui est tile/* en offline servir 'not-found.jpg' ), pas dans la partie mise en cache
 
En bonus le fonctionnement de l'appcache est assez violent : il charge tout le catalogue a chaque appel de ta page html, et si il y a une modification, il essaye de recharger toutes les urls du manifest. Une fois le téléchargement fini, si tout s'est bien passé, il faut que l'utilisateur recharge la page pour avoir accès aux nouveaux fichiers.
 

Déjà faut utiliser mouseenter et mouseleave
ensuite il faut mettre des stops sur tes FX sinon ça part en cacahuète
http://codepen.io/arnogues/pen/nwceH

http://instacod.es/

 
 
http://instacod.es/72160
 

Ok merci beaucoup, je ne savais pas qu'on pouvait Fx.stop(); (c'est pas dans la doc) et ni le .offsetWidth qui remplace avantageusement un MASK.getSize().y !
 
Un bon bouquin à me conseiller sur les bases de dev en JS ?

Vraiment étrange qu'ils n'aient pas documenté stop() dans la doc, pourtant la fonction est bien présente dans l'objet FX et n'est pas appelée en interne au niveau du core.

pour les warriorir qui veulent faire de l'ES 6 tout de suite : http://addyosmani.com/blog/author- [...] for-grunt/

Je bosse sur un projet avec Dustin Diaz \o/

 
Et si on comparait avec Mezzanine ?
 
On va étudier ces deux solutions.

Pas de bol, Mezzanine était aussi entre deux eaux quand j'ai fait l'audit. Le code à beaucoup bougé depuis.

Question sf2 :
 
Je développe un Bundle qui se veut le plus générique possible.
 
Dans ce bundle j'utilise un layout mais je veux faire en sorte que n'importe quel Bundle utilisant ce Bundle puisse utiliser son layout.
Pour ça j'ai regardé du côté de l'héritage dynamique dans twig et j'en suis arrivé à ça :
{% extend baseLayout %}
Où baseLayout est une variable contenant le chemin du layout de base.
 
Maintenant le problème c'est que je dois injecter cette variable, baseLayout, à chaque vu, donc à chaque action.
 
J'ai vu qu'il y avait des variables globales Twig, mais je veux que la config de mon baseLayout reste propre à mon bundle.

 
ben non y'a pas de solution simple
 
sqlite supporte les blob donc normalement websql aussi (a moins qu'il y ait d'autres impl. mais pas a ma connaissance) mais safari limite a 50Mo /domain et chrome a 25/5Mo donc c'est mort pour 2Go (a moins de faire une extension qui request unlimitedstorage)
 
j'aurais tendance a te proposer de regarder du coté des polyfills filesystem => indexeddb
https://github.com/ebidel/idb.filesystem.js
 
mais ca resoudra pas tes pbs sur mobile a moins que tu puisse limiter le nombre de tiles et la tu peux aussi chercher un polyfill indexeddb=>websql

Je pense que ça va se finir en phongap pour le gros cache, et indexeddb+ polyfill pour stoker un subset de données sur les clients pur web

les polyfills ne permettent pas de passer outre les limites de stockages et tous les navigateurs ne permettent pas de demander de l'espace supplémentaire

si c'est vraiment un pré requis de stocker les cartes c'est clair qu'un serveur local avec un sqlite et des mbtiles c'est aussi simple.

oui je pensais un peu à ça ( c'est juste qu'il va falloir que j'encapsule un peu ça pour ne pas trop faire diverger les bases de code entre la webapp et la version phonegap)
 
J'aurai bien voulu faire une app 100% web, c'est le seul point pour lequel je n'ai pas trouvé de solution (ceci dit, en passant a phonegap, je peux faire une app qui tourne en arrière plan ce qui est impossible avec une webapp)

c'est clair que la difference ca va surtout etre le tiles delivery.
 
mais si tu utilises leaflet ca permet de faire des trucs pas mal avec des changement conditionnels de sources a la volée et du progressive enhancement. tu pourrais avoir la meme page qui selon l'os/device detecté charge la datasource la plus pertinente
 
en ce moment je fais joujou avec d3 et leaflet et c'est plutot marrant (plus que raphael huhuhu)
avec d3 et des poly geoJson/topoJson en niveau de detail bas ou en enhancement et des tiles des qu'on zoome.

En fait, j'ai fait un plugin ( que je vais peut être  publier) qui utilise filesystem/indexeddb pour stocker les tiles en offline
Quand tu fais une requêtes pour une tuile, si elle est en cache elle est affichée immédiatement, puis mise à jour quand la requête revient du serveur ( et ca remet  à jour le cache). Donc il me "suffira" de faire une phonegap/mbtiles store et ça devrait le faire .

toi aussi, tu joue avec leaflet
En fait, putôt que d3, j'ai pris http://humangeo.github.io/leaflet-dvf/ et awesomemarker

 
Les bidouilles à base de subdomains c'est pas envisageable ?

tout le monde joue avec leaflet ! c'est trop bien !
 
mais ouais tiens peut etre je devrais regarder dvf.
 
d3 c'etait parce qu'on bossait avec du mapbox et que leur api changeait tout le temps (en plus de bugguer a mort sur mobile)
 
maintenant que c'est officiellement sur base leaflet ca change quelques trucs ne serait ce que la taille du code a charger. leaflet + dvf ca pese 135Ko, soit environ la taille de d3.
faut juste que je vois si ca charge du topojson ou si je dois transformer mes maps

J'ai peur que ce ne soit pas perenne

Au passage : voila ce que donne le plugin

L.FileSystemStore = L.Class.extend({
    includes: L.Mixin.Events,
    initialize: function () {
        var that = this;
        this._fs = null;
        window.requestFileSystem(window.TEMPORARY, 50 * 1024 * 1024,
                function (fs) {
                    that._fs = fs;
                    that.fire('ready');
                }, function (error) {
                    console.log(error);
                })
    },
    get: function (key, onsuccess, onerror) {
        var that = this;
        var path = hex_md5(key);
        this._fs.root.getFile(path, {}, function (fileEntry) {
            onsuccess.call(null, {src: fileEntry.toURL()});
 
 
        }, function (e) {
            console.log(e);
            that.fire('error', e)
        });
    },
//{url: url, time: +new Date(), data: blob}
    put: function (image_data) {
        var that = this;
        var path = hex_md5(image_data.url);
        this._fs.root.getFile(path, {create: true}, function (fileEntry) {
            fileEntry.createWriter(function (file_writer) {
                file_writer.write(image_data.data);
            }, function (e) {
                console.log(e);
                that.fire('error', e)
            });
 
        }, function (e) {
            console.log(e);
            that.fire('error', e)
        });
    },
    ready: function () {
        return !!this._fs;
    }
});
 
L.IndexedDbStore = L.Class.extend({
    includes: L.Mixin.Events,
    initialize: function () {
        window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
                IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction;
 
        var that = this;
        this._db = null;
        this._store = null;
        this._version = 1;
 
        var request = indexedDB.open("leaflet_store", this._version);
        request.onsuccess = function (evt) {
            that._db = request.result;
            that.fire('ready');
        };
        request.onerror = function (evt) {
            that.fire('error', evt);
        };
        request.onupgradeneeded = function (evt) {
            that._store = evt.currentTarget.result.createObjectStore("tile_cache",
                    { keyPath: "url" });
            that._store.createIndex("time", "time", { unique: false });
 
        };
    },
 
    get: function (key, onsuccess, onerror) {
        var db = this._db;
        var trans = db.transaction(["tile_cache"]);
        var store = trans.objectStore("tile_cache" );
        var request = store.get(key);
 
        request.onerror = function (event) {
            onerror.call(null, event);
        };
        request.onsuccess = function (event) {
            onsuccess.call(null, request.result);
        };
    },
 
    put: function (data) {
        var db = this._db;
        var trans = db.transaction(["tile_cache"], "readwrite" );
        var store = trans.objectStore("tile_cache" );
        var that = this;
        var request = store.put(data);
        request.onsuccess = function (e) {
            that.fire('success');
        };
        request.onerror = function (e) {
            that.fire('error', e);
        };
    },
    ready: function () {
        return !!this._db;
    }
 
 
});
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
L.store = window.requestFileSystem  ? new L.FileSystemStore() : new L.IndexedDbStore(); //chrome doesn't like blob in indexeddb but offers the file system api
 
L.CachedTileLayer = L.TileLayer.extend({
    //TODO check if store is ready
    //TODO pruning
    //TODO : seed cache
    //always_check_online : option pour savoir si c'est utile de prendre sur le web une tuile qu'on a en cache
    // prune(date creation, nb access,
 
    _setTileSrcFromBlob: function (tile, blob) {
        var URL = window.URL || window.webkitURL;
 
        // Create and revoke ObjectURL
        var imgURL = URL.createObjectURL(blob);
 
        // Set img src to ObjectURL
        tile.src = imgURL;
 
        // Revoking ObjectURL
        URL.revokeObjectURL(imgURL);
    },
 
    _loadTile: function (tile, tilePoint) {
        tile._layer = this;
        tile.onload = this._tileOnLoad;
        tile.onerror = this._tileOnError;
        this._adjustTilePoint(tilePoint);
 
 
 
 
        var src = this.getTileUrl(tilePoint);
        //try to get an existing tile from cache
        L.store.get(src, function (record) {
            if (record) {
                if (record.src) {
                    tile.src = record.src;
                } else {
                    if (record.data) {
                        tile._layer._setTileSrcFromBlob(tile, record.data)
                    }
                }
            }
        })
 
        //load data from ajax2 (browser supporting indexed db also support binary aja query
        var xhr = new XMLHttpRequest();
        xhr.open('GET', src, true);
        xhr.responseType = 'blob';
 
        xhr.onload = function (e) {
            if (this.status == 200) {
                var blob = new Blob([this.response], {type: 'image/png'});
                //put the data in tile
                tile._layer._setTileSrcFromBlob(tile, blob);
 
                //put in store
                L.store.put({url: src, time: +new Date(), data: blob},
                        function () {
                        },
                        function (event) {
                            console.log('insert error ');
                            console.log(event);
                        }
                )
            }
        };
        xhr.send();
    }
})
 
L.store.on('ready', function () {
    var map = L.map('map').setView([51.505, -0.09], 13);
    var tile_layer = new L.CachedTileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    tile_layer.addTo(map);
})

ca fait longtemps que je ne me suis pas faut basher, lachez vous

function getProp(obj, names) {
  var i, o;
  for(i = 0, l = names.length; i < l; i++) {
    o = obj[names[i]];
    if(o) return o;
  }
  throw new Error('Unable to find a valid key amongst ' + names.join(', '));
}
 
var indexedDB = getProp(window, ["indexedDB", "webkitIndexedDB", "mozIndexedDB", "OIndexedDB", "msIndexedDB"]);

Non?

Et puis écris pas sur window.

hasOwnProperty ou typeof
 
des fois y'a des setter/getter, des fois non c'est un peu bizarre au debut  
 
L.store.get() n'est pas super explicite sachant qu'il ne retourne rien, ca serait plus un "setter"
 
"if (record){if (record.src)" me semble pas super robuste (puis undefined est R/O depuis ES5 autant en profiter et faire comme si personne ne surchargeait undefined )
 
mais franchement a par le fait que tu attaques window si ca marche c'est tranquille
 
puis j'imagine que tu utilises un filler pour la console.
 
[edit]
ah si, un truc perso, je prefere utiliser "var self = this" plutot que "var that = this" ou idealement un nom de variable explicite
 
mais comme d'hab, d'abord ca marche, ensuite on refactor

Il n'y a pas si longtemps je vous parlais d'un problème de rendu de police sous Chrome et Safari donc WebKit, notamment une font color: #FFF; sur background: #000;
 
J'ai trouvé la solution à mon problème
 
Avant

Après

 
Et la solution:

Sinon j'ai un autre problème
 
Un input qui ne veut pas entendre parler de height: 40px; vous auriez une idée?

quel type d'input? dans quel contexte?
 
sinon pour webkit tu as deux possibilités :
- antialiased
- subpixel-antialiased
 
le subpix est plus propre sur du mobile et les ecran type pentiles mais rend bizarre selon le fond

Ces deux propriétés ne changeaient rien au problème
 
input type submit

Yop !
 
Jai une petite question à propos de javascript :
 
J'ai commencé une petite webapp très simple à base d'AngularJS (histoire de voir avec un exemple assez simple comment fonctionne la chose).
 
L'appli est une sorte de calculateur, en gros il y a une liste de choix, chaque choix à un nom, une quantité max sélectionnable, et une valeur, le but étant de faire le total (je simplifie le truc, en vrai c'est un peu plus intéressant que ça ).
 
L'appli fonctionne sans BDD, j'ai donc un .json avec mes choix :
 

 
Je charge le bordel  

 
Et AngularJS se charge de m'afficher un beau tableau en fonction de mon template.
 
Maintenant j'aimerais pourvoir étendre les objets contenus dans $scope.items pour pouvoir leur rattacher dynamiquement la quantité souhaitée.
 
Evidemment y'a moyen de rajouter une propriété dans le .json que je laisse à zéro par exemple, mais il y a pas plus propre ?
 
Je suis malheureusement une bille en JS (sauf quand il s'agit de faire des trucs bien crados )
 
L'idée serait de créer un prototype si j'ai bien compris, que j'initialiserais avec les données de chaque objet json, avec en plus de nouvelles méthodes/propriétés, mais en gros ça revient à devoir boucler sur mon JSON, initialiser pour chaque choix un nouvel objet, construire un nouvel array avec ces nouveaux objets, puis filer à angularJS cette array au lieu de mon JSON de base.
 
Quelqu'un à une idée pour faire ça proprement et si c'est effectivement la meilleur manière de faire ?
 
Merki  

Douglas crockford recrute:
 
https://plus.google.com/11809527622 [...] SG9RktPPUR

Javascript et c++ ? C'est pour nraynal

Web 3.0, le web casse-couilles

c'est posible que ce soit juste pour forcer la mise en cache d'un media sur ios ( et donc l'avoir pret en cas de besoin)

yo, c'est quoi la solution la plus simple et courte avec CSS HTML5 jquery pour disabler un bouton si un input field est invalide ?
sachant que l'input est HTML5, donc il a la pseudo-classe :invalid

 
 
Le font smoothing antialiased n'est pas un fix et le subpixel est + performant, il utilise + de pixels autour de la fonte pour lisser correctement. Perso je trouve que le deuxième est + moche que le premier mais ça n'engage que moi ^^
 
 

Vous me conseillez quoi comme ressources pour découvrir le responsive ?
Pas trop de blabla du concret.
 
Je fais joujou avec Twitter Bootstrap comme base.
 

- Mobile First
- Responsive Web Design
Tous les deux de la collection A book Apart

pas mieux  
 
Le seul truc qui me gene avec bootstrap pour du responsive c'est que tout est en px, j'aurai préféré des em
 
Ceci dit bootsrap 3 sera mobile first

merci
 
j'hésite à passer sur bootstrap 3 directement alors