FormatJS - Internationaliser vos applications web

FormatJS est une collection modulaire de bibliothèques JavaScript pour l'internationalisation soit des des nombres, les dates, et les chaînes de caractères. Il comprend un ensemble de bibliothèques de base qui se appuient sur les JavaScript Intl built-ins et les normes de i18n, ainsi qu'un ensemble d'intégrations pour les bibliothèques de modèles et de composants communs.

FormatJS a été testé dans tous les principaux navigateurs sur les ordinateurs de bureau et les appareils mobiles. Cela permet aux développeurs d'utiliser FormatJS à la fois sur le serveur et côté client de leurs applications et fonctionne parfaitement avecNode.js.

24.1.15 - 0

20 sites web pour trouver des images de haute qualité

J'ai réuni une collection de 20 sites avec de belles photos libres que vous pouvez choisir. Heureusement, ils vous aideront à pimenter vos conceptions futures. vous pouvez utiliser gratuitement - oui, à la fois pour un usage personnel et commercial (lire les licences attentivement).

http://compfight.com/
http://www.lifeofpix.com/
http://superfamous.com/
http://www.imcreator.com/free
http://getrefe.tumblr.com/
http://snapographic.com/
http://lockandstockphotos.com/
http://snapwiresnaps.tumblr.com/
http://nos.twnsnd.co/
http://jeshoots.com/
http://cupcake.nilssonlee.se/
http://kaboompics.com/
http://foodiesfeed.com/
http://jaymantri.com/
http://www.designerspics.com/
http://www.raumrot.com/10/
http://magdeleine.co/
http://publicdomainarchive.com/
http://startupstockphotos.com/
http://photopin.com/

27.12.14 - 0

Contrôler le lecteur vidéo HTML5 avec JavaScript

En plus des contrôles intégrés, nous pouvons également contrôler une vidéo avec la nouvelle API médias de HTML5.

Contrôler le lecteur vidéo HTML5 avec JavaScript

Detection:

Détecter si le navigateur support les balise <video> et <audio> est simple (Feature Detection HTML5).

Nous avons seulement besoin de déterminer si la méthode "canPlayType" est disponible.

Si le navigateur reconnaît la balise <video>, il a également reconnaît la balise <audio>. 

Tous les navigateurs qui reconnaissent une, sera également reconnaître l'autre.

if ( 'canPlayType' in document.createElement('video') ) {
  // Code
}

if ( 'canPlayType' in document.createElement('audio') ) {
  // Code
}

Ou bien:

var supportMedia = (function() {
  return ('canPlayType' in document.createElement('video'));
})();
if ( supportMedia ) { 
  // Code
}

Si vous utilisez Modernizr, vous pouvez écrit:

if ( Modernizr.video ) { ... }
if ( Modernizr.audio ) { ... }

Dans certains cas, il est aussi utile de déterminer si les navigateurs reconnaissent un codec particulier(mp4, webm, ogg, ...). Est-il possible?

Oui bien sûre. Modernizr fournit une solution élégante. Par exemple:

Modernizr.video  // navigateur prend en charge la balise video
Modernizr.video.webm // navigateur prend en charge le format WebM
Modernizr.video.h264 // navigateur prend en charge le format H.264

Les API HTML5 audio et vidéo sont identiques. Donc on pourra tester le support de l'audio avec:

Modernizr.audio.mp3
Modernizr.audio.ogg
Modernizr.audio.wav

Méthodes:

Les méthodes disponibles pour les médias que ce soit audio ou video sont:

• play() => commence ou continue la vidéo référencée.
• pause() => pause la vidéo.
• load() => récupérer une nouvelle ressource multimédia.
• canPlayType() => détermine si le navigateur supporte un codec particulier.

Ces méthodes peuvent être utilisées, comme ceci:

var video = document.getElementById('video');
video.play();
video.pause();
video.canPlayType('audio/ogg');

événements:

• play: Lorsque la vidéo est lancée.
• pause: Lorsque la vidéo est en pause.
• ended: Lorsque la vidéo est terminée.
• progress: Lorsque les médias ont été récupérées.
• canplay: Lorsque la vidéo a été entièrement chargées.

attributs:

• duration: La durée de la vidéo associée.
• currentTime: La position actuelle de la vidéo. Par exemple, lorsque la vidéo est en pause.
• autoplay: Une valeur booléenne indiquant si la vidéo a été fixé à autostart.
• poster: L'image d'affiche fourni.
• paused: Une valeur booléenne indiquant si la vidéo est actuellement pause.
• ended: Une valeur booléenne indiquant si la vidéo est terminée.

Prenons un exemple pratique:

Code HTML5:

<video id="video" width="500" height="500">
  <source src="video.mp4">
  <source src="video.webm">
  <source src="video.ogg">
</video>
<button id="button">Play</button>

Code JavaScript:

var video = document.getElementById("video"),
var button = document.getElementById("button");

// Lancer la vidéo lorsque le bouton est cliqué.
button.addEventListener('click', function() {
  video[video.paused ? 'play' : 'pause'](); 
}, false);

// Changer le text en Pause si la vidéo est lancée
video.addEventListener('play', function() {
  button.innerHTML = 'Pause';
}, false);

// Changer le text en Play si la vidéo en pause
video.addEventListener('pause', function() {
  button.innerHTML = 'Play';
}, false);

// Changer le text en Play si la vidéo est terminée
video.addEventListener('ended', function() {
  button.innerHTML = 'Play';
}, false);

Code JQuery:

var $video = $('#video'),
video = $video[0];

$video
.on('play', function() {
  $('#button').text('Pause');
})
.on('pause ended', function() {
  $('#button').text('Play');
});
$('#button').on('click', function() { 
  video[video.paused ? 'play' : 'pause']();
});

8.8.14 - 0

Envoyer des emails anonymes avec Leak

Leak est un outil pour se connecter avec les gens sur un niveau plus franche et personnelle. Être anonyme parmi tout en restant ludique n'est pas possible part ailleurs. Leak vous permet d'être vous-même et parler librement :).

Envoyer des emails anonymes

Plus d'informations visiter le lien : ici.

7.8.14 - 0

10 IDEs moderne pour les développeurs web

Codage des sites Web est un long processus fastidieux et il y a toujours plus à apprendre.

Pourquoi ne pas faire le travail un peu plus simple par l'écriture de code avec un environnement de développement intégré?

Ces programmes (IDE) ont la coloration syntaxique et de nombreuses autres fonctionnalités qui accélèrent le processus de codage.

IDE moderne pour les développeurs web

L'article vous propose 10 programmes de développement web les plus utilisés:

• phpDesigner 8
• Coda
• Sublime Text
• ICEcoder
• Aptana
• WebStorm
• Komodo
• TextWrangler
• Smultron
• SubEthaEdit

7.8.14 - 0

Effet de remplissage

Parfois vous voulez juste créer quelque chose spécial. Peut-être pour l'une de vos pages où vous voulez arriver à quelque chose d'unique pour soutenir votre marque. Icons Filling Effect peuvent vous aider à concevoir une page Web cool avec juste quelques icônes.

C'est un effet accrocheur remplissage pour vos icônes, qui peut être utilisé pour faire une simple page dynamique.

6.8.14 - 0