Comment je fabrique mes propres cartes sur Internet

Comment je fabrique mes propres cartes sur Internet

Il faut croire que j’ai toujours aimé jouer avec les cartes, alors j'ai décidé de passer à la vitesse supérieure et de fabriquer les miennes.

Temps de lecture : 11 minutes
Comment accéder à l'appareil photo avec juste du HTML ?

Comment accéder à l'appareil photo avec juste du HTML ?

Le saviez-vous ?

Il est possible d’utiliser l’appareil photo et vidéo de votre téléphone avec juste du HTML. Vous ne me croyez pas ? Allez, on essaie !

Temps de lecture : 2 minutes
Comment rendre une vidéo Youtube responsive en 2022 ?

Comment rendre une vidéo Youtube responsive en 2022 ?

Vous avez un site tout beau, mobile first, et vous intégrer une vidéo Youtube. Et là c’est le drame.

Temps de lecture : 1 minute
DotGo Europe 2019

DotGo Europe 2019

J’ai eu la chance d’aller à l’édition 2019 de la conférence Dot Go. Bien que je n’ai pas l’occasion de pratiquer le Go quotidiennement (breaking news, les journées ne font toujours que 24h), ce 25 mars 2019 était pour moi l’occasion de rentrer un peu plus dans le monde du Go.

Temps de lecture : 5 minutes
A la découverte de ReactJS

A la découverte de ReactJS

Si vous me suivez sur Twitter, vous avez surement remarqué que je poste de plus en plus de liens en relation avec ReactJS.

Laissez-moi vous guider et découvrir ce qui se cache sous ce drôle de nom.

Temps de lecture : 7 minutes

5 fonctionnalités HTML5 que vous devez connaître

Fonctionnalités HTML 5 à connaître

Le HTML5 commence à envahir les sites, et c'est tant mieux ! Je vous propose ici de découvrir quelques trucs et astuces qui pourront vous aider à concevoir de belles pages en HTML5 (et aussi vous simplifier la vie ;))


Expressions régulières


Fini l'appel au javascript pour valider une saisie utilisateur ! Autoriser ou nom la soumission d'un formulaire n'a jamais été aussi facile grâce à l'attribut pattern des INPUT :

<input type="text" name="phone-number" pattern="\[0-9\]*" value=""/>

La ligne ci dessus n'autorise que les chiffres. Pas d'autres caractères superflus ! (mais cela ne vous empêche pas de valider la saisie côté serveur, en PHP par exemple)


Download


Avant, lorsque vous vouliez forcer le téléchargement d'un élément à partir d'une page (un PDF par exemple) vous n'aviez pas trop de solutions. Soit vous jouiez avec un .htaccess pour ce fichier en question, soit vous le serviez via PHP, pour modifier les headers de la page.

HTML5 vous permet de contourner ce problème. Il est désormais possible de forcer le téléchargement d'une ressource (et même de spécifier son nom) via l'attribut download de la base A :

<a href="http://www.eskuel.net/imgblog/2013/05/danoquette-coupable.jpg" download="danoquette.jpg">Télécharger ici la photo de danoquette</a>


Prefetch


Il est possible de dire au navigateur de charger automatiquement certains éléments qui ne sont pas présents sur la page grâve à prefetch.Imaginez sur un blog, vous pourriez charger automatiquement le dernier article en date, vos visiteurs ayant une très forte chance de vouloir le lire. Ainsi, en cliquant sur son lien, la page sera déjà chargée, et votre site aura l'air encore plus rapide !

<link rel="prefetch" href="http://www.eskuel.net/la-danoquette-quest-ce-que-cest-1508" />

A noter que pour Chrome, la manipulation est légèrement différente. Il faut non pas utiliser prefetch mais prerender, qui a pour but de préparer le rendu de la page en amont :

<link rel="prerender" href="http://www.eskuel.net/la-danoquette-quest-ce-que-cest-1508" />


DNS Prefetch


Par défaut, votre navigateur ne fait la résolution DNS que lorsque vous cliquez sur un lien, ou vous chargez une image. La résolution DNS peut prendre un peu de temps, surtout sur une connexion avec une forte latence (en 3G par exemple).

Le DNS prefetch marche un peu comme le prefetch ci-dessus, mais il ne charge pas de ressource. Il opère juste la résolution DNS en arrière plan, et met le résultat en cache. Ainsi lorsque la ressource située sur ce domaine devra être chargée, le lookup sera déjà fait, et la navigation fluidifiée.

<link rel="dns-prefetch" href="//www.google-analytics.com">


Datalist


Grâce aux Datalist, vous pouvez proposer sur un champ texte une suggestion de valeurs prédéfinies. Pas besoin de jQuery ou de requêtes en AJAX pour proposer la suggestion. Bien entendu, si votre liste est trop longue, il sera peut être plus judicieux de faire appel à un peu de javascript pour aller demander la liste à une base de données au fur et à mesure de la frappe.

<label for="choix_voiture">Indiquez la marque de votre voiture :</label>
<input list="liste-voitures" type="text" id="choix_voiture">
<datalist id="liste-voitures">
<option value="Peugeot">
<option value="Renault">
<option value="Citroën">
<option value="Danoquette">
</datalist>

Avec ça, vous êtes parés pour faire de superbes pages en HMTL5.

A vous de jouer !

Temps de lecture : 3 minutes

Recherche Géospatiale avec Sphinx

Aujourd'hui, je vais vous parler d'un de mes nouveaux "jouets" : Sphinx Search

Sphinx, pour celles et ceux d'entre vous qui ne connaissent pas encore (bouuuu :p) est un moteur de recherche open source qui est utilisé sur des sites à forte fréquentation comme Craiglist, Joomla, Mysql.com, Scribd, et j'en passe.

Je ne vais pas vous expliquer comment installer et créer un index sous Sphinx, cet article ayant plutôt pour but de vous montrer comment exploiter les fonctionnalités de recherches géographiques du moteur.

En effet, en 2 temps, 3 mouvements, vous pourrez définir un index géographique, et l'utiliser pour récupérer les éléments de votre base de données situés à moins de X mètres d'un item donné.

Imaginez donc que vous possédez une table, listant tout une liste de points d'intérêts, ou même de villes, et que vous avez, pour chacun de ces items leurs coordonnées latitude / longitude (en degrés)

Votre but est donc d'obtenir, pour une ville donnée, les villes situées dans un rayon de 5 km.

Commençons tout d'abord par définir une source cities dans Sphinx, comme suit :

source cities
{
type = mysql
sql_host = localhost
sql_user = root
sql_pass = XXX
sql_db = ma_db

sql_query = SELECT id country, zip, name, \
RADIANS(lat) AS latitude, RADIANS(lon) AS longitude \
FROM cities;
sql_attr_float = latitude
sql_attr_float = longitude

sql_query_info = SELECT name FROM cities WHERE id=$id
}

Vous définissez tout d'abord les informations de connexion à la base. Ensuite viens la requête qui va vous permettre d'indexer les données :

sql_query = SELECT id country, zip, name, \
RADIANS(lat) AS latitude, RADIANS(lon) AS longitude \
FROM cities;

Pour que Sphinx puisse travailler efficacement avec vos coordonnées, il faut les convertir via RADIANS(). C'est là la seule difficulté de ce tutorial :)

Viens à présent le moment de définir un index utilisant cette source :

index cities
{
source = cities
path = /var/lib/sphinxsearch/data/cities
docinfo = extern
mlock = 0
morphology = none
min_word_len = 1
charset_type = utf-8
charset_table = 0..9, A..Z->a..z, _, a..z, U+410..U+42F->U+430..U+44F, U+430..U+44F
ignore_chars = U+00AD
html_strip = 0
enable_star = 0
}

Si vous avez déjà créé un index sous Sphinx, rien de ce qui est ci-dessus ne doit vous sembler étranger :)

Il ne vous reste plus qu'à lancer l'indexation de votre nouvelle config :

indexer --rotate cities

A présent, le clou du spectacle : l'interrogation de la base :)

$search = new SphinxClient();
$search->SetServer('localhost', 9312);
$search->SetMatchMode(SPH_MATCH_ALL);
$search->SetArrayResult(true);
$search->SetGeoAnchor('latitude', 'longitude', (float) deg2rad($latitude), (float) deg2rad($longitude));
$search->SetSortMode ( SPH_SORT_EXTENDED, "@geodist asc");
$circle = (float) $radius;
$search->SetFilterFloatRange('@geodist', 0.0, $circle);

$result = $search->Query('', 'cities');

Les variables $latitude et $longitude étant les coordonnées de votre item de référence, et $radius le rayon en mètres dont lequel doivent se situer les résultats.

Vous remarquerez l'attribut @geodist dans le filtre de recherche et dans le critère de tri. Cet attribut fourni par Sphinx représente la distance en mètres de vos résultats de recherche.

Maintenant, vous avez toutes les clés en main pour monter un super système de POI autour de votre position ;)

Temps de lecture : 3 minutes