02
Oct
2016
A la découverte de ReactJS

A la découverte de ReactJS

Posté par Mathieu LESNIAK à 16:52 dans la catégorie Développement
Tag(s) associé(s) :

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.

Lire la suite »
12
Juin
2013

5 fonctionnalités HTML5 que vous devez connaître

Posté par Mathieu LESNIAK à 21:42 dans la catégorie Développement
Tag(s) associé(s) :

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 !

14
Avr
2013

Recherche Géospatiale avec Sphinx

Posté par Mathieu LESNIAK à 09:24 dans la catégorie Développement
Tag(s) associé(s) :

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 ;)