Native Fullscreen JavaScript API (plus jQuery plugin)
HTML5 <video> is great, but when it was first released, one of the big complaints was that it couldn’t do true FullScreen like Flash. Thankfully, this is changing and native FullScreen support is coming to most browsers in the next few months (no word from the Internet Explorer team Update on IE below #5)) The API is still heavily in flux especially since the W3C joined in this week. I spent some time working through the differences to implement FullScreen in MediaElement.js HTML5 video player, and it’s working great in Safari 5.1+, Chrome Canary Chrome 15+, or Firefox Nightly (go to about:config and set full-screen-api.enabled= true) and scheduled for Firefox 10. Below I’m going to try to explain how things evolved, where we are today, and then some code that you can play with. Simple Demo Video Demo A Brief History of the FullScreen API Understanding the FullScreen API Here are the most important parts of the FullScreen API with notes on how things differ among browsers. 1. 2. 3. 4. 5.
Tinycon - Gérer dynamiquement des alertes dans les favicons
Tinycon est un script JS permettant de manipuler la favicon de son site dynamiquement afin d'alerter l'utilisateur sur de nouveaux messages, actions... Idéal pour attirer l'attention d'un utilisateur ayant déjà une vingtaine d'onglets ouverts. Tinycon permet de gérer la favicon et une bulle de notification pour prévenir l'utilisateur sur le fait qu'il y'ai de nouveaux messages, de nouvellesactions disponibles... La bulle est ajoutée à votre favicon classique via du Canvas et peut être personnalisée via les options suivantes: width: Largeur de la bulle d'alerteheight: Hauteur de la bulle d'alertefont: La police type CSS de la bullecolour: La couleur de la policebackground: tLa couleur de fond de la bullefallback: True ou false si vous souhaitez le fallback en cas de non compatibilité navigateur. Et voilà comment configurer les options du script: 1.Tinycon.setOptions({ 2. width: 7, 3. height: 9, 4. font: '10px arial', 5. colour: '#ffffff', 6. background: '#549A2F', 7. fallback: true Site Officiel
CoffeeScript
Programmation orientée objet avec le langage JavaScript (1ère partie)
Dans ce premier article, nous allons décrire les différents mécanismes de base du noyau du langage JavaScript, le langage EcmaScript. Ce dernier est standardisé par la spécification ECMA-262 [1] dont la version 3 est la version courante. Bien que ce langage soit orienté objet, il différe considérablement des langages objet classiques tels que Java et C++ puisqu'il se fonde sur une variante de ce paradigme, à savoir la programmation orientée objet par prototype [2]. Nous verrons que son intérêt consiste en son aspect dynamique permettant de modifier la structure des objets après leur création. La plupart des concepts de la programmation orientée objet peuvent être mis en oeuvre mais des limitations existent néanmoins avec ce type de programmation orientée objet. La connaissance des différents mécanismes de base de JavaScript est primordiale à différents niveaux. Avant de rentrer dans le vif du sujet, commençons par rappeller ce qu'est le langage JavaScript et ce qu'il permet de faire. 0.1.
Tiny Circleslider: A lightweight circular carousel for jQuery
What is it? Tinycircleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. Features IOS and Android support. Need support or custom features? Anything is possible! Examples $(document).ready(function(){ $('#circleslider1').tinycircleslider();}); Note: There is no lightbox natively in tiny circleslider for this example fancybox was used. To get a better understanding of how it all comes together I made a (corny) styled example. Constructor Properties Methods Events Usage The image below displays how you calculate the radius of your circleslider.
JS adolescence
For me there was a time that can only be described as adolescence in the field of programming and more specifically JavaScript. This period was characterised by a certain laziness and hubris. I thought I was right. I thought others were wrong. Today I present a short list of JavaScript practices that once seemed right but I now deem foolish (in most situations): Using logical operators as statements a() || b.foo.bar(); m && c() ? There is no real advantage in forgoing convention for the sake of cleverness. Always declaring variables at the top of their scope function calculate() { var a, m, t, y, This, is, really, understandable = false; // Actual logic goes here} Instead I declare a variable where it makes sense. Repeatedly used inline object literals It’s better for clarity and performance (potentially) to define separate classes for cases where you repeatedly make object literals of the same structure. Complex inline regular expressions if (/r[ -~]? It makes sense to cache these things.
5 APIs that will transform the Web in 2013 | Alex MacCaw
It’s incredibly exciting to see how the Web is evolving, and 2013 has a lot more in store. Over the next year, there are a number of technologies coming down the pipeline that have the potential to radically transform how we use and develop for the Web. CSS Custom Filters CSS filters are already in Chrome and Safari, and allow advanced styling as as blurring, warping and modifying the color intensities of elements. What this means in practice, is that you can create incredible effects. So when can you use this? Autocomplete API This API has the potential to radically transform signups and payments on the web. However, autocomplete is treating the symptoms and not the disease. The Chrome team have been working on this idea, and in October submitted a proposal and patch to WebKit. So when can you expect to see this in the wild? Google Chrome Apps What if I told you that Google had snuck an operating system across all your devices, including your laptop and cell phone. So what’s the catch?
Programmation - apprendre en jouant
Programmation – apprendre en jouant Il existe de nombreux moyen d’apprendre sur le net: tutorieltutoriel vidéocours en ligneforum… Aujourd’hui je vous parle d’une autre manière d’apprendre : apprendre en jouant! Il existe de multiple plateforme en voici une petite sélection: Robozzle Il s’agit d’un puzzle game au design très simple mais efficace. Il existe des niveaux de toutes les difficultés qui permettent de satisfaire l’ensemble des programmeurs et surtout de nous faire progresser dans la programmation. Pourquoi est-ce un jeu de programmation? Parce qu’il va faire appel à toutes vos qualités de développeur et il va vous falloir composer avec les instructions basiques du robot (avance / tourne à droite / à gauche..) mais aussi avec des fonctions et appels de fonctions spéciales : détection de la couleur de la case, changement de cette couleur… de quoi se torturer pendant quelques heures… Vous choisissez votre puzzle d’en une liste en fonction de la difficulté. au lieu de :
