Introductions aux Composants Web (WebComponent)

TL;DR;

Avec les Composants Web tu peux désormais créer des éléments HTML réutilisables. Pour fonctionner, ils nécessitent l’utilisation de 4 nouvelles API HTML5 qui sont : Custom Element, Shadow DOM, HTML Template et HTML import. Comme elles ne sont pas encore supportées par tous les browsers, t’auras besoin du polyfill webcomponent.js pour travailler correctement. Continuer la lecture de « Introductions aux Composants Web (WebComponent) »

Le Namespace en JS, pas si trivial…

Namespaces Javascript

L’organisation de la plupart des librairies actuelles en JavaScript se fait à l’aide du Design Pattern Namespace permettant d’encapsuler nos fonctionnalités dans un objet afin de ne pas pourrir le global scope. On notera par exemple jQuery et son $  (alias jquery ), d3 et son d3 , Snap.svg et son Snap , etc…
Dernièrement, j’ai voulu moi aussi utiliser ce système pour mieux organiser un projet existant, qui n’implémentait pas la notion d’injection de dépendance et déclarait tout en global.

En plus ça tombe bien, je connais ce Design Pattern… vraiment ?!

Continuer la lecture de « Le Namespace en JS, pas si trivial… »

Grunt, l’exécuteur de tâche

GruntJS

Introduction

Lorsque vous développez pour le web, un certains nombres de tâches doivent se faire à chaque fois que vous voulez tester ou mettre en PROD votre création. Et si toutes ces tâches ennuyeuses et répétitives pouvaient être automatisée simplement ?
Grunt est, entre autres, une solution qui va vous faciliter la vie ! Il peut par exemple gérer automatiquement la compilation de préprocesseurs CSS (LESS, Sass, Compass) lors de chaque modification de fichier, optimiser vos fichiers (concaténation, minimisation,…), gérer les sprites, et j’en passe… Continuer la lecture de « Grunt, l’exécuteur de tâche »

Géolocalisation

window.onload = function(){

	//Si on a l'autorisation de géolocaliser
	if(navigator.geolocation){
		function succesGeo(position){
			var infopos = 'Ma position => ';
				infopos += 'Latitude: '+position.coords.latitude+' - ';
				infopos += 'Longitude: '+position.coords.longitude;
				document.getElementById('position').innerHTML = infopos;

				//instancier un objet coordonnée google maps selon l'API
				var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

				//option pour centrer la carte sur notre position
				var optionsGMaps = {
					mapTypeControl: false,
					center: latlng,
					navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					zoom: 15
				};

				//initialiser la carte selon nos paramêtres
				var map = new google.maps.Map(document.getElementById('mapGoogle'), optionsGMaps);

				//ajout d'un 'flag' sur notre position
				var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					title: 'Votre emplacement !'
				});
		}

		//requête de géolocalisation
		navigator.geolocation.getCurrentPosition(succesGeo);
	}
}

Introduction

La géolocalisation est devenu omniprésente dans nos vies ces dernières anneés. L’arrivée des technologies mobiles et les connexions Internet de accessible dans de nombreux endroits incitent de plus en plus les gens à partager des lieux afin de faire savoir où ils sont, où ils vont, etc.
Cela demande une infrastructure, des outils et des connaissances conséquentes, mais au final pas tant que ça grâce aux outils HTML5, OpenLayer, OpenStreetMap, Google Map ou tout autres possibilités qu’elles soient libres ou non.

La composante géographique de la géolocalisation est basée sur 3 notions: Continuer la lecture de « Géolocalisation »