Soyez Reponsables

Construisez votre API

//madsgraphics.github.io/prez/soyez_responsables__construisez_votre_api.html

MAD MAD

Dev UI

JavaScript Ninja

Une histoire de Singes

//𝒲

Doutez /
Éxpérimentez

Parlons Web

Symfony 2

Si je vous dis…

  • Drupal
  • eZPublish
  • Magento
  • phpBB
  • Laravel

Bootstrap

Si je vous dis…

  • Twitter
  • PythonAnywhere
  • Kippt
  • SoundReady

Compass

Si je vous dis…

  • Heroku
  • Sencha Touch
  • Foundation

Soyez vigilants

API ?

Build

Your

Own

API

Like a Boss

Design

Découplez

Limitez
l'empreinte
carbone

CSS


#el {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em 0 0 -350px;
  width: 700px;
  font-family: sans-serif;
  font-size: 1.2em;
  line-height: 1.58em;
  text-align: center;
}
          

.centered {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

.title {
  width: 700px;
  margin: -1em 0 0 -350px;
  text-align: center;
}

.font-std {
  font: 1.2em/1.58em sans-serif;
}
          

%centered {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

%title {
  width: 700px;
  margin: -1em 0 0 -350px;
  text-align: center;
}

%font-std {
  font: 1.2em/1.58em sans-serif;
}

#el {
  +font-std;
  +centered;
  +title;
}
          

Surveillez
vos portées

JavaScript


(function($, undefined) {

  // PLACE YOUR LOGICS HERE

})(jQuery);
          

(function($, undefined) {

  var _myPrivateMethod, myPublicObject;

  _myPrivateMethod = function (msg) {
    console.log(msg);
  }

  myPublicObject = {
    debug = function () {
      _myPrivateMethod('Hello World !');
    }
  }

  window.myModule = myPublicObject;

  })(jQuery);

myModule.debug();
          

Isolez vos éléments


<body>
  <div id="container">

    <nav class="widget">
      <ul>
        <li><!-- // --></li>
        <li><!-- // --></li>
      </ul>
    </nav>

    <section id="searchbox" class="widget">
      <!-- SEARCH BOX WIDGET -->
    </section>

    <section id="content">

    </section>

    <section id="newsletter" class="widget">
      <!-- SUBSCRIBE FORM -->
    </section>

  </div>
</body>
          

Partage

Restez simples

Chartez vos noms

Utilisez les standards

  • URI
  • JSON
  • XML
  • Timestamp
  • UTF8
  • g11n

/orateurs
/orateurs/mad

/visiteurs

/conférences
          

GET  : /orateurs
POST : /orateurs/mad

DELETE : /visiteurs/<name>

POST : /conférences
          

Formatez

HTTP Header Accept

Versionnez

Prefix : /v1/orateurs/mad

Gérez les
Exceptions

HTTP Codes

Collaboration

Utilisez les ressources

Diffusez vos outils

Concevez des briques

Raisonnez Galaxie

Inter-
connectez

Zapier / IFTTT…

Toolbox

Microlibs

microjs.com

P
processeurs

Sass / Less / Stylus

Static
Templating

Jekyll / Kirby / Pelican

Builders

Grunt / Rake

Micro-
Frameworks

Sinatra / Express / Slim

On peut parler d'industrialisation,
mais le web restera,
et pour longtemps,
un métier d'artisans passionnés.

Merci !

//madsgraphics.github.io/prez/soyez_responsables__construisez_votre_api.html

Questions ?

Crédits

Fonts
Images