Design & Développement web - Le topic des canards qui mangent des cookies

[Teocali]

Il ne reste plus qu'à faire un angular-like server-side (peu importe le langage) et que tout le monde s'extasie dessus en disant que c'est une révolution et une idée jamais vue auparavant.

J'ai encore du mal avec les termes et les concepts, mais ce que tu expliques, la, suffit pas d'un server gerant WAMP ?

[Tomaka17]

Nan le principe de la programmation déclarative c'est que tu indiques à l'ordinateur tout ce qu'il doit faire via un langage quelconque, et il le fait.

Un exemple c'est le SQL. Quand tu "programmes" en SQL, tu dis juste "je veux ça" et il le fait.
C'est pareil pour Angular, quand tu mets un "ng-model="prout"" tu dis juste "je veux que la valeur "prout" soit en permanence dans cet input" et il le fait.
Il n'y a pas de notion d'instruction ni d'ordre dans lequel les choses sont exécutées.

Faire un site web server side en déclaratif, ça voudrait dire indiquer les routes, les templates, les controlleurs, etc. dans un langage type yaml/json/ce que tu veux, et sans absolument aucune ligne de code PHP/Ruby/etc. nulle part.
Le site serait ensuite interprété (ou compilé pour plus de perfs) par un programme tiers.
Vos frameworks favoris font sans doute déjà ça mais à moitié uniquement, ce qui casse tout l'intérêt du truc.


Sinon je viens de voir qu'Atom est disponible pour windows, je m'en vais tester ça

[war-p]

Nan le principe de la programmation déclarative c'est que tu indiques à l'ordinateur tout ce qu'il doit faire via un langage quelconque, et il le fait.

Un exemple c'est le SQL. Quand tu "programmes" en SQL, tu dis juste "je veux ça" et il le fait.
C'est pareil pour Angular, quand tu mets un "ng-model="prout"" tu dis juste "je veux que la valeur "prout" soit en permanence dans cet input" et il le fait.
Il n'y a pas de notion d'instruction ni d'ordre dans lequel les choses sont exécutées.

Faire un site web server side en déclaratif, ça voudrait dire indiquer les routes, les templates, les controlleurs, etc. dans un langage type yaml/json/ce que tu veux, et sans absolument aucune ligne de code PHP/Ruby/etc. nulle part.
Le site serait ensuite interprété (ou compilé pour plus de perfs) par un programme tiers.
Vos frameworks favoris font sans doute déjà ça mais à moitié uniquement, ce qui casse tout l'intérêt du truc.


Sinon je viens de voir qu'Atom est disponible pour windows, je m'en vais tester ça

Les vrais utilisent webstorm

[BentheXIII]

Amis canards, bonsoir.

Dans le cadre de mon MSc, je suis amené à développer un programme en C++ (éléments finis/particle-in-cell si vous voulez des détails), qu'il était grand temps que je documente.
C'est plus ou moins chose faite, grâce à cet outil magique qui est doxygen. La documentation obtenue est au format HTML.

Sauf que ça fait très XIX siècle d'envoyer la doc en .tar par mail pour ensuite l'extraire et ouvrir index.html avec firefox - _ -. Bref, j'aimerais pouvoir avoir la doc dispo sur internet, afin de pouvoir la visualiser depuis n'importe où, ainsi que pouvoir facilement la mettre à jour.

Sauf que je n'y connais ... rien en dev web. Je sais qu'il me faut un gentil(et gratuit de préférence) hébergeur pour stocker les pages html. Et ma foi, c'est à peu prêt tout!
Comme j'ai déjà la structure du site généré (enfin je crois), ça devrait être facile.

Non?

bref, merci pour vos lumières!

[Awake]

@BentheXIII : créé toi un compte gratuit sur free.fr, tu aura un hébergement en XXXXXX.free.fr où tu pourra mettre ce que tu veux. En gratuit sans pub c'est encore le mieux que je connaisse.

[BentheXIII]

Il s'agit de cette page?
https://subscribe.free.fr/accesgratuit/

Mes parents vont pas se faire débrancher leur ligne téléphonique si je mets leur numéro? :fear:

[Awake]

Bon attends je vais essayer de m'en occuper. Tu veux quoi comme nom de domaine ?

[Tomaka17]

Je trouve que ça fait beaucoup plus XIXème siècle d'avoir un site en free.fr que d'envoyer un tar par email.

[Awake]

XIXem c'est d'avoir un hébergergement sur chez.com. Benthe si tu veux un truc un peu plus classe tu prend un hébergement chez OVH à 2€40 par mois et t'aura un vrai nom de domaine et 100Go.

[BentheXIII]

Non mais je peux m'en occuper également. Le seul problème, c'est que je ne suis pas sur le territoire français et que l'adresse/numéro de tel que j'allais indiquer est celui de mes parents.
Qui n'ont rien demandé et ne sont pas chez Free.

Je ne sais pas exactement dans quoi je m'engage en signant ce formulaire et en rentrant les infos ci-dessus. Je voudrais juste être sûr que ça n'affecte pas la ligne téléphonique/internet de mes parents.

Est-ce que signer ce formulaire a une quelconque conséquence pour la ligne tel/internet indiquée?
Les infos de connections sont elles uniquement envoyées par voie postale? 0_0

[Awake]

Est-ce que signer ce formulaire a une quelconque conséquence pour la ligne tel/internet indiquée?

Nope.

Les infos de connections sont elles uniquement envoyées par voie postale? 0_0

Ouip.

[BentheXIII]

Ok, merci pour ces infos. Je vais aviser.

[Yuccaman]

Sinon il existe des solutions comme cloudvent qui permettent d'héberger un petit site grâce à un compte Dropbox.

[tenshu]

Gratuit et compréhensible pour un dev : https://pages.github.com/

Cherche pas plus loin.

[Awake]

Il faut pas que le projet correspondant soit open source pour les pages github ? Sinon ouais c'est top. C'est sûr que ça fait plus pro que free.fr.

[BentheXIII]

Génial! J'essaie ça bientôt

[tenshu]

Il faut pas que le projet correspondant soit open source pour les pages github ? Sinon ouais c'est top. C'est sûr que ça fait plus pro que free.fr.

Pas à ma connaissance.

[BentheXIII]

http://bbercovici.github.io/

merci pour les conseils.

[Awake]

http://www.jetbrains.com/dbe/

IDE pour base de données par les gens qui ont fait l'excellent PHPStorm.

[moimadmax]

Tiens j'ai une petite question.

Je voudrais faire un mini site en local (qui serve de documentation à un projet).
Je veux qu'il puisse être consultable simplement en ouvrant un fichier .htm, sans qu'il n'y ait de serveur ni quoi que ce soit.

Du coup, est-ce qu'il existe des solutions pour faire un template HTML et m'éviter de faire du copier-coller ?
De préférence sans qu'il soit nécessaire de générer des trucs (comme avec jekyll), parce que je ne veux pas forcer les gens à installer ruby/python/etc. juste pour lire ma doc.
J'ai pensé à Angular et son système de routes, mais l'AJAX ne fonctionne pas avec les fichiers locaux.
J'ai pensé au XSLT, mais c'est un peu vieux comme système.

Sinon tu la fait en markdown et tu utilises jr.js pour la transformer en html : http://xeoncross.github.io/jr/about.html affichez le code source de la page.

[Sekigo Le Magnifique]

Une question.
Je suis en train de tâter Angularjs. Et y a un truc que je n'arrive pas à faire.
En gros, j'ai le serveur qui propose une api REST. Ici, un simple exemple de wiki en json. Là où je bloque, c'est pour la gestion des erreurs http. J'arrive à les intercepter, mais je ne sais pas quoi en faire pour conserver les informations que me renvois le serveur.

'use strict';

angular.module('wikiApp', [
    'ngRoute',
    'ngSanitize',
    'wikiServices',
    'articleControllers',
])

.config(function($httpProvider) {
    $httpProvider.interceptors.push(function($q, $location) {
        return {
            // request: function(response) { return response; },
            // response: function(response) { return response; },
            // requestError: function(rejection) {
            //     console.log(rejection);
            //     return rejection;
            // },
           // C'est ici que ça bloque
            responseError: function(rejection) {
                return $q.reject(rejection);
            }
        }
    })
})

.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/category/:uid*?', {
        templateUrl: '/static/category.html',
        controller: 'CategoryCtrl',
    })
    .when('/article/:uid*', {
        templateUrl: '/static/article.html',
        controller: 'ArticleCtrl',
    });
});

Une fois que j'attrape l'erreur dans responseError, ce que j'aimerais, c'est envoyer l'objet rejection vers un template et afficher ce dernier.
Ça me permettrait d'afficher les erreurs comme je le souhaite. Et surtout, j'utilise Flask coté serveur. Quand il lève une erreur, il renvoie une page de debug, avec console Python intégré pour interroger le serveur et debugger. J'aimerais vivement conserver cette page et l'afficher, parce que c'est très utile en serveur de dev.

Les exemples que je vois sur le net (hormis les 3/4 qui sont dépréciés), ils redirigent la page vers une hypothétique page 404. Mais ils perdent toutes les informations sur l'erreur.

Je vais continuer à chercher de mon coté, mais un coup de main m'aiderait vraiment beaucoup.
Merci d'avoir lu.

Edit: En y réfléchissant, c'est pas bon non plus ce que je suis en train de faire. En catchant toutes les erreurs de la sorte, et en les traitant toute de la même manière, ça va pas aller. Pour le moment, je charge objet par objet. Imaginons que par la suite, j'ai plein d'objets à charger à la fois, et que ce n'est pas très important que certains foirent, il va automatiquement me balancer le template à la gueule.
Mieux vaut gérer ça coté contrôleur.

[Skiant]

Si tu utilises une API REST, regarde ce que fait Restangular. Perso on utilise ça au taf parce que c'est super plus simple à gérer.

Restangular.one('object', objectID)
.get(
  function(success) {
  },
  function (error) {
  }
);

[Sekigo Le Magnifique]

La documentation d'angularjs me rend dingue. Le tutoriel est vraiment naze.
Voilà, j'arrive à peu près à obtenir ce que je voulais. On oublie tout ce que j'ai écris plus haut. Ça se passe dans le contrôleur de Category.

// app.js
angular.module('wikiApp', [
    'ngRoute',
    'ngSanitize',
    'wikiServices',
    'articleControllers',
])

.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/category/:uid*?', {
        templateUrl: '/static/category.html',
        controller: 'CategoryCtrl',
    })
    .when('/article/:uid*', {
        templateUrl: '/static/article.html',
        controller: 'ArticleCtrl',
    })
});


// services.js
angular.module('wikiServices', ['ngResource'])

.factory('Article', function($resource) {
    return $resource('/api/article/:uid', {}, {});
})

.factory('Category', function($resource, $q) {
    return $resource('/api/category/:uid', {}, {});
});


// controller.js
angular.module('articleControllers', ['ngRoute', 'ngResource'])

.controller('CategoryCtrl', function($scope, $routeParams, Category)-{
    $scope.tree = Category.get({uid: $routeParams.uid});
    // C'est ici que ça se passe
    // Chaque "variable" envoyé dans un template est une "future" et sa valeur est fourni si besoin.
    // En gros, les méthodes $promise.then, $promise.catch, $promise.finally fonctionnent comme des try/catch/finally
    $scope.tree.$promise.then(function() {
        $scope.error = null;
    }, function(error) {
        $scope.error = error;
    });
})

.controller('ArticleCtrl', function($scope, $routeParams, Article) {
    $scope.article = Article.get({uid: $routeParams.uid});
});

Là, maintenant, j'arrive à chopper les erreurs que j'envoi vers mon template category.html

<script type="text/ng-template" id="itemTree">
    <div ng-switch="item.type">
        <a ng-switch-when="category" href="/#/category/{{ item.url }}" class="category">{{ item.name }}</a>
        <a ng-switch-when="article" href="/#/article/{{ item.url }}" class="article">{{ item.name }}</a>
        <span ng-switch-default></span>
    </div>
    </div>
    <ul ng-if="item.children">
        <li ng-repeat="item in item.children" ng-include="'itemTree'">
        </li>
    </ul>
</script>

<!-- C'est ici que je peux afficher les erreurs -->
<div ng-if="error">
    <h2>{{ error.status }}</h2>
    <pre>{{ error.data }}</pre>
</div>
<a ng-if="tree.parent" ng-href="/#/category/{{ tree.parent.url }}">Remonter vers {{ tree.parent.name }}</a>
<ul>
    <li ng-repeat="item in tree.children" ng-include="'itemTree'"></li>
</ul>

Bon, j'ai foutu dans une balise pre pour le moment. Ce que je reçoit du serveur, c'est une page complète html. Le mieux serait de récupérer uniquement le contenu du body et de l'injecter directement dans le DOM. Je ne pense pas que ce sera aussi galère que réussir à piger comment catcher une erreur http.

Edit: J'ai été regardé pour restangular. Je me le met sous le coude pour le moment. Là, j'essaye de comprendre déjà les grands principe de angularjs. Plus tard, quand j'aurais un peu plus de skill, j'utiliserais éventuellement cette bibiliothèque si besoin. Merci.

[deathdigger]

Méthode crade, tu stockes ta page d'erreur dans une variable et tu découpes entre <body> et </body>, ou alors, tu la parses.

[Skiant]

Je t'avoue que j'ai même pas cherché à comprendre le fonctionnement de $resource tellement ça m'avait l'air capillotracté pour ce que j'en avais à faire, du coup on a pluggé Restangular directement dans tous nos controllers.

Pour la doc angular, leur doc officielle est un cauchemard en effet, par contre tu as l'excellent egghead.io qui a des tas de tutos vidéos bien foutus.
Si t'es chaud patate, tu peux aussi te prendre le ng-book, il m'a grandement aidé à piger certains trucs (niveau Directives par exemple).

[Fastela]

Sinon tu la fait en markdown et tu utilises jr.js pour la transformer en html : http://xeoncross.github.io/jr/about.html affichez le code source de la page.

Ahah c'est excellent ce truc

[Sekigo Le Magnifique]

Pour la doc angular, leur doc officielle est un cauchemard en effet, par contre tu as l'excellent egghead.io qui a des tas de tutos vidéos bien foutus.
Si t'es chaud patate, tu peux aussi te prendre le ng-book, il m'a grandement aidé à piger certains trucs (niveau Directives par exemple).

lololol les directives.
Putain. Je pensais la doc de sqlalchemy déjà bien compliqué, mais c'est Martine va à la plage à coté de celle d'angular.
Tu prends la page sur les directives : https://docs.angularjs.org/guide/directive
Là, tu es noyé sous une tonne d'informations dont tu te branles complètement. Ce que je voulais, c'est juste REMPLACER UN PUTAIN D4ATTRIBUTS §§§
Là, ils te présentent trois millions de trucs, mais le use-case le plus simple, apparemment, c'est pour les tapettes et ça vaut pas le coup de le présenter.

Finalement, j'ai été directement dans le code source d'angular, parce que je sature complètement.
À la fin, j'avais même oublier mon besoin initial. Qui était d'avoir un putain de moyen de gérer les urls à peu près proprement. Parce que j'ai pas trouvé ça, avec tout le bordel de hashbang et de mode html5.

Puis, j'ai aussi rien compris à l'injection de dépendances. Ça marche nickel pour tout SAUF pour les directives avec $locationProvider. Du coup, j'ai pondu cette merde.

var _dirty_locationProvider = null; // lolilol  ça maaaaarche pas

angular.module('wikiApp', [
    'ngRoute',
    'ngSanitize',
    'wikiServices',
    'articleControllers',
])

.directive('wikiHref', function ($parse, $location) {
    return function (scope, element, attr) {
        var $locationProvider = _dirty_locationProvider;
        // Change l'url suivant les paramètres défini par $locationProvider
        var href = '/' + ($locationProvider.html5Mode() ? '': '#') + $locationProvider.hashPrefix() + attr.wikiHref;
        attr.$set('href', href);
    }
})

.config(function($routeProvider, $locationProvider) {
    _dirty_locationProvider = $locationProvider;  // lolilol II
    $routeProvider
    .when('/category/:uid*?', {
        templateUrl: '/static/category.html',
        controller: 'CategoryCtrl',
    })
    .when('/article/raw/:uid*', {
        templateUrl: '/static/article.html',
        controller: 'ArticleRawCtrl',
    })
    .when('/article/:uid*', {
        templateUrl: '/static/article.html',
        controller: 'ArticleCtrl',
    });

    $locationProvider.hashPrefix('!');
})

La prochaine saloperie de ce genre avec angular, je le jarte. Là, je laisse une dernière chance, parce que je sens le potentiel quand même derrière. Mais si c'est pour lutter 10 ans à chaque nouveau truc, que je considère comme basique, et ceci contre une API qui risque de péter dans les 3 mois qui viennent, ça vaut pas le coup.

[tenshu]

Au boulot on migre sous git.
Le DT a imposé un branching model complètement défaillant

[Skiant]

Sekigo pour les routes, choppe ui-router. Il est cent fois plus simple et il te permet d'avoir notamment un attribut "ui-sref" qui te permet de filer le nom d'un état et de le laisser se démerder pour gérer le href.

Edit: Ah et sinon, tu peux pas injecter un Provider dans autre chose qu'un bloc de config. D'où tes emmerdes.

[Evil3ye]

Salut à tous.

Je débute en html et css, et j'ai voulu créer un logo cliquable pour m'entraîner. Tout marche bien, il reste à sa place, quand on clique dessus il renvoie à l'accueil, parfait.

SAUF QUE : quand on réduit la fenêtre, le logo fait TOUT pour rester en haut à gauche de la fenêtre, quitte à empiéter sur le titre principal de la page. Quand on scroll, il "disparaît", il reste à sa place (normal).
Est-ce que vous sauriez comment éviter ce désagrément ?

Mon code html :

<a href="#"><img src="images/logo.jpg" id="logo" /></a>

et le css :

#logo
{
position: absolute;
top: 10px;
left: 50px;
}

Voilà, merci de votre aide.