Les nouveautés de PHP 7.4

PHP 7.4 devrait arriver en fin d’année 2019, les informations qui suivent sont donc susceptibles de changer dans les mois à venir, mais elles devraient vous permettre de vous faire une idée des nouveautés apportées par cette nouvelle version de PHP.

Préchargement des fichiers

A l’heure actuelle, si l’on utilise un framework PHP, les fichiers ont besoin d’être chargés et recompilés à chaque requête. Avec PHP 7.4 il sera possible de précharger ces fichiers en mémoire afin qu’ils soient disponibles pour toutes les requêtes suivantes.
Cela apporte un gain de performance notable mais qui a cependant un coût, si la source d’un fichier préchargé est changée, le serveur devra être redémarré pour pouvoir utiliser la version mise à jour. Une option utile pour la production mais dont on se passera sûrement pour le développement.

Propriétés typées

Il sera possible de préciser le type des propriétés d’un objet :

class A
{
    public string $name;
    
    public Foo $foo;
}

Cette fonctionnalité de PHP est confirmée pour la version 7.4.

Amélioration de la variance des types

Il sera désormais possible d’utiliser des types de renvois covariants :

class ParentType {}
class ChildType extends ParentType {}

class A
{
    public function covariantReturnTypes(): ParentType
    { /* … */ }
}

class B extends A
{
    public function covariantReturnTypes(): ChildType
    { /* … */ }
}

Ici on a une classe A dont la fonction covariantReturnTypes renvoie un objet de type ParentType, et une classe B enfant de la classe A dont la fonction renvoie un objet de type ChildType (enfant de ParentType). Il s’agit de covariance car l’enfant renvoie l’enfant et le parent le parent.

De même, on pourra dorénavant utiliser des arguments de fonction contravariants :

class A
{
    public function contraVariantArguments(ChildType $type)
    { /* … */ }
}

class B extends A
{
    public function contraVariantArguments(ParentType $type)
    { /* … */ }
}

Ici la classe B est enfant de A mais elle utilise un paramètre de type ParentType qui est parent de celui utilisé par la classe A. Il s’agit de contravariance.

Interface de fonction étrangère

Les extensions PHP pourront désormais être codées en PHP pure mais demanderont tout de même une bonne connaissance de C pour utiliser cette fonctionnalité avancée.

Opérateur d’assignation coalescente nulle

Un nouvel opérateur fera son apparition nous permettant d’écrire :

$data['date'] ??= new DateTime();

A la place de :

$data['date'] = $data['date'] ?? new DateTime();

Source

stitcher.io

Nominatim un moteur de recherche pour OpenStreetMap

Nominatim est un outil pour rechercher des données OpenSreetMap (OSM) par nom et adresse, mais également pour générer des adresses à partir de points OSM. Il est également utilisé comme l’une des sources de la boîte de recherche sur la page d’accueil d’OpenStreetMap.

Recherche

Les termes cherchés sont traitées d’abord de gauche à droite, puis de droite à gauche. Ils peuvent être séparés par des virgules pour réduire la complexité de la recherche. Par exemple « 135 pilkington avenue, birmingham« .

La recherche peut prendre les formes suivantes :

https://nominatim.openstreetmap.org/search?<params>
https://nominatim.openstreetmap.org/search/<query>?<params>

La liste des paramètres peut être trouvées sur le Wiki de Nominatim.

Pour obtenir un résultat au format JSON on peut par exemple utiliser cette syntaxe :

https://nominatim.openstreetmap.org/search?q=135+pilkington+avenue,+birmingham&format=json

Exploitation des données

Nous avons pu récupérer des données OSM à partir d’une adresse, il reste maintenant à les exploiter.

En Javascript

var nominatim = "https://nominatim.openstreetmap.org/search?format=json&q=";
var searchAddress = '135+pilkington+avenue,+birmingham';
var locSearch = nominatim + searchAddress;
httpGet(locSearch);

function httpGet(url) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			var locInfos = this.responseText;
			locInfos = JSON.parse(locInfos);
			if (locInfos === undefined || locInfos.length === 0) {
				//
			} else {
				lat = locInfos[0].lat;
				lon = locInfos[0].lon;
				displayMap(lat, lon);
			}
		}
	}
	xhttp.open("GET", url, true);
	xhttp.send();
}

On définie d’abord l’adresse à utiliser pour notre recherche puis on appelle la fonction httpGet avec notre url en paramètre. Il s’agit d’une fonction AJAX utilisant la méthode GET pour obtenir le résultat de l’url. Ce dernier étant au format JSON, on utilise JSON.parse() pour transformer la chaîne de caractères en données exploitables (ici un array contenant des objets). On peut ensuite exploiter ces données pour récupérer par exemple la latitude et la longitude.

En PHP

$nominatim = 'https://nominatim.openstreetmap.org/search?format=json&q=';
$searchAddress = '135+pilkington+avenue,+birmingham';
$locSearch = $nominatim.$searchAddress;

$options = array(
	"http"=>array(
		"header"=>"User-Agent: StevesCleverAddressScript 3.7.6\r\n"
	)
);

$context = stream_context_create($options);

$result = file_get_contents($locSearch, false, $context);

if ($result !== false) {
	$loc = json_decode($result);

	$lat = $loc[0]->lat;
	$lon = $loc[0]->lon;
}

On définie encore une fois l’adresse à utiliser pour notre recherche, puis on utilise la fonction file_get_contents() avec l’url en question. Il faut néanmoins définir les options à utiliser pour cette fonction et particulièrement la propriété User-Agent, le tout définit dans un array qui est ensuite transformé en ressource avec stream_context_create() pour pouvoir être accepté par la fonction file_get_contents(). Cette dernière renvoie false si la requête échoue. Nos données étant au format JSON, il faut utiliser json_decode() pour pouvoir les exploiter.

FormData et upload de fichier en Ajax

FormData est un objet Javascript qui permet de créer un ensemble de clés et de valeurs pour l’envoi de données de formulaire en Ajax (XMLHttpRequest). Cela permet, entre autres, de gérer l’envoi de fichier grâce à l’encodage « multipart/form-data ». Encodage qui est automatiquement utilisé à partir du moment où l’on envoie un objet FormData, l’utilisation d’un header supplémentaire pour l’encodage n’est pas nécessaire.

var name = document.getElementsByName('tech-name')[0].value;
var img = document.getElementsByName('tech-img')[0].files[0];

var formData = new FormData();

formData.append('name', name);
formData.append('img-name', img.name);
formData.append('img', img, img.name);

Ici on stocke d’abord la valeur d’un champ de formulaire dans la variable name puis on stocke notre fichier dans la variable img. On crée ensuite un nouvel objet FormData dans lequel on vient stocker un ensemble de paires clé-valeur. D’abord name puis le nom du fichier dans img-name et enfin notre fichier dans img.

La méthode append() permet de stocker une chaîne de caractères, un fichier ou un blob. Si la valeur stockée n’est ni un fichier, ni un blob elle sera convertie en chaîne de caractères (13 deviendra ’13’).

Il ne reste plus qu’à envoyer notre fichier en Ajax :

var xhttp = new XMLHttpRequest();
...
xhttp.send(formData);

Les données envoyées sont dans le même format que celles envoyées avec la méthode submit() si elle utilise l’encodage « multipart/form-data ».

Si on reprend l’exemple précédent on pourra récupérer nos trois valeurs avec (en PHP) :

$name = $_POST['name'];
$img_name = $_POST['img-name];
$img = $_FILES['img'];

Récupérer le données d’un formulaire avec FormData

Plutôt que de stocker les paires clé-valeur une à une, il est possible de récupérer l’ensemble des données d’un formulaire en précisant l’élément du formulaire lors de la création de l’objet FormData.

var formData = new FormData(someFormElement);

Il est également possible de stocker d’autres données dans l’objet FormData pour compléter celui-ci (si nécessaire) avec la méthode append() vue précédemment.

Source

MDN Web Docs – Utilisation d’objets FormData

Tester un prénom ou un nom avec RegEx

Tester des noms et prénoms avec des expressions régulières est toujours délicat car il est souvent nécessaire de prendre en compte un certain nombre de caractères spéciaux. Le problème étant souvent de s’assurer qu’aucune lettre n’est laissée de côté.

Le problème

La méthode suivante est couramment utilisée :

[A-Za-z-]+

Elle comprend les lettres majuscules de A à Z, les lettres minuscules de a à z ainsi que le tiret pour les noms composés. Bien entendu pour des langages comme le français où les accents sont courants dans les noms cela est loin d’être satisfaisant.

Afin de corriger cela, on peut trouver sur internet un ensemble de solutions approximatives qui contournent une partie du problème en incluant une liste de caractères dans l’expression régulière.

[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ-]+

Un début de solution

Plutôt que de lister les différents caractères un à un et de risquer d’en oublier, il est possible d’utiliser les plages de caractères. De la même manière que [a-z] comprend tous les caractères entre a et z inclus, [À-ÿ] comprend tous les caractères entre À et ÿ. Le problème ici est que cela comprend également les caractères × et ÷. Pour éviter cela on peut simplement utiliser les plages suivantes :

[À-ÖØ-öø-ÿ]

Ce qui donne l’expression régulière suivante si on y ajoute les caractères non accentués et le tiret pour les noms composés :

[A-Za-zÀ-ÖØ-öø-ÿ-]+

On approche déjà d’une solution satisfaisante, cependant il existe des caractères accentués en dehors de cette plage.

Comprendre toutes les lettres accentuées ou non

Il existe des raccourcis RegEx qui vont nous simplifier la vie pour faire nos tests grâce aux catégories de caractères Unicode. Ces catégories peuvent être utilisées dans les RegEx PCRE.

Dans notre cas nous utiliserons la catégories des lettres, qui les comprend toutes qu’elle soit accentuées ou non, à laquelle on rajoutera encore une fois le tiret pour les noms composés :

[\p{L}-]+

A savoir

Il s’agit ici des RegEx PCRE (Perl Compatible Regular Expressions) à la base intégrée au langage Perl mais aujourd’hui également utilisées dans d’autres langages comme le PHP.

Pour utiliser ce type d’expression en Javascript, il est nécessaire d’ajouter le paramètre ‘u’ (pour Unicode) à la fonction RegExp comme dans l’exemple suivant :

if (RegExp(/^[\p{L}-]+$/, 'u').test(element.value) === false) {...}

Le support fourni par les navigateur n’est pas complet mais il est possible d’utiliser la librairie Javascript XRegExp pour palier à ce problème.

Source

Blog de Samuel Marchal

Thunderbird remis au goût du jour en 2019

Avec l’utilisation croissante des webmails, Thunderbird a perdu chaque année de plus en plus d’utilisateurs, par conséquent le projet a vu son importance baisser aux yeux de Mozilla. Il était même question en 2016 de lui trouver un repreneur. 2019 sera cependant une meilleure année pour Thunderbird avec l’arrivée de plusieurs mises à jours ayant pour objectif de remettre le logiciel au goût du jour.

Un client plus rapide et plus performant

Mozilla annonce que nous verrons de grandes améliorations au niveau de la rapidité du client mail grâce au travail ciblé qui sera réalisé sur les parties les plus lentes de l’application. En effet Mozilla travaille sur une meilleure détection des problèmes de performance et sur de nouvelles méthodes pour mesurer la lenteur du client.

Un client plus beau et plus pratique

Suite aux nombreux retours demandant une amélioration de l’interface et de l’expérience utilisateur de Thunderbird, Mozilla prévoit de travailler sur ces points grâce, notamment, à l’addition de nouveaux développeurs sur le projet qui se spécialiseront sur l’UI/UX.

Un meilleur support est prévu pour Gmail, étant l’un des fournisseurs de mail les plus utilisés. Mozilla souhaite également améliorer l’intégration des notifications pour chacun des systèmes d’exploitation.

L’interface et l’expérience utilisateur des paramètres et du cryptage seront également entièrement revus cette année.

Conclusion

L’avenir de Thunderbird pouvait paraître incertain ces dernières années, mais Mozilla parait désormais décidé à améliorer son client de messagerie et à le remettre au goût du jour en 2019.

Sources

Les principes de POO en Javascript

Programmation orientée objet

La programmation orientée objet (ou POO) est une approche différente du code par rapport à la programmation procédurale. L’idée est de concevoir des objets qui vont interagir les uns avec les autres, ainsi que de créer des modèles et des méthodes qui peuvent être hérités.

Le but étant, entre autres, de permettre une plus grande flexibilité et une meilleure maintenabilité du code.

En Javascript, elle repose notamment sur l’utilisation de constructeurs et de prototypes.

Les constructeurs

Contrairement aux langages de POO classiques, Javascript ne permet pas de créer des classes. Les méthodes et propriétés des objets sont définis grâce aux constructeurs.

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

Le constructeur est utilisé pour créer des objets dont certaines propriétés sont définies grâce à ses paramètres et au mot-clé this (this n’a pas de valeur, c’est un substitut pour l’objet créé). La function Person ci-dessus est un constructeur, de nouveaux objets de type Person peuvent être créés grâce au mot-clé new.

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

Les prototypes

Les fonctions associées à un objet sont appelées méthodes. Elle peuvent être héritées d’un type d’objet par un autre grâce au prototype.

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

Ici on crée une fonction name qui renvoie une chaîne de caractères composée du prénom et du nom. Si l’on reprend l’exemple précédent on peut récupérer ceux de John Doe grâce au code suivant :

var name = myFather.name();

Si nous voulions créer un type d’objet Professor qui hériterait des propriétés et méthodes du type d’objet Person nous utiliserions :

Professor.prototype = Object.create(Person.prototype);

Conclusion

Javascript a une approche de la programmation orientée objet différente des autres langages. Elles s’appuient sur l’utilisation de constructeurs et de prototypes pour retrouver les principes de POO.

Sources

Cross-site request forgery et comment s’en protéger avec Laravel

Le cross-site request forgery ou CSRF est un type de vulnérabilité des systèmes d’authentification web. Le principe revient à faire exécuter à son insu une action à un utilisateur authentifié et disposant des droits suffisants pour exécuter cette dite action.

Les différents moyens de prévention

  • Confirmation demandée à l’utilisateur pour les actions critiques
  • Confirmation de l’ancien mot de passe pour changer celui-ci ou l’adresse email.
  • Utilisation de jetons de validité pour les formulaires. Les jetons sont transmis et vérifiés côté serveur et ont une durée de validité limitée.
  • L’utilisation de requête HTTP POST à la place de GET.
  • Vérification de la page référente pour les pages et actions sensibles. La requête sera donc bloquée si elle provient d’une autre page.

CSRF Token sous Laravel

Laravel utilise la méthode de jetons de validité de formulaire mentionnée précédemment. La création de ces jetons (ou tokens) est directement gérée par Laravel et est donc très facile à mettre en place.

Le première étape consiste à rajouter une balise meta qui contiendra le jeton généré par Laravel :

<meta name="csrf-token" content="{{ csrf_token() }}">

Il ne reste ensuite qu’à insérer @csrf dans le formulaire de la manière suivante :

<form method="POST" action="/profile">
    @csrf
    ...
</form>

Dans le cas de l’utilisation d’Ajax, il faut rajouter le header suivant :

xhttp.setRequestHeader('X-CSRF-TOKEN', token);

où la variable token est la valeur de l’attribut content de la balise meta crsf-token.

Conclusion

Il s’agit d’une méthode simple et rapide à mettre en place qui permet d’ajouter un niveau de sécurité pour l’utilisation de formulaires. Cela permet également d’éviter les erreurs 419 lors de l’utilisation de la méthode POST (en utilisation classique ou en AJAX).

Sources

Un remplaçant pour le xml, plus léger et plus rapide

Le XML est un format très utilisé pour transmettre des données mais il est loin d’être optimisé. C’est pour cette raison que l’Efficient Extensible Interchange Working Group travaille depuis des années sur un moyen efficace d’encoder les fichiers XML au format binaire plutôt que du simple texte.

Efficient Extensible Interchange (EXI)

C’est de cette manière qu’à été créé l’Efficient Extensible Interchange ou EXI. Cette norme du W3C est en préparation depuis plusieurs années. Elle a d’ailleurs été adoptée en tant que recommandation W3C depuis le 10 mars 2011, avec une seconde édition en Février 2014.

L’EXI est un moyen pour un système d’envoyer à un autre système une séquence hautement compressée d’événements d’analyse de fichiers (parse events). Le destinataire peut alors construire la structure des données depuis ces événements sans avoir à reconstituer une représentation textuelle (comme le JSON, XML, Javascript, HTML ou autre).

Cela permet une utilisation de bande passante bien inférieure ainsi qu’une moindre consommation d’énergie, points particulièrement important sur les appareils mobiles qui sont, comme nous les savons, grandement utilisés aujourd’hui et avec une tendance à la hausse. Il en est de même les capteurs de températures et autres appareils du genre ou la faible consommation de l’EXI en CPU et mémoire sont très importants.

Un remplaçant du XML mais pas que

Si le EXI qui signifiait à la base Efficient XML Interchange a été renommé Efficient Extensible Interchange ce n’est pas sans raison. Le système de compression de données au format binaire peut être utilisé pour d’autres langages que le XML. En plus de cela les processeurs EXI peuvent précharger des informations de chaines de caractères (en utilisant le W3C XML Schema) afin de réduire encore plus la quantité de données qui nécessite d’être envoyée.

Sources

Processing JS pour la création de graphismes web

Processing JS permet d’utiliser le langage Processing pour créer des graphismes web 2D ou 3D grâce aux canvas HTML5.

Pourquoi utiliser les canvas

Les interactions avec le DOM sont connues pour être lentes et c’est pour cette raison qu’on essaie en général d’en limiter le nombre. Cependant lors de la création de graphismes web on peut rapidement avoir besoin de modifier un nombre important d’éléments des dizaines de fois par seconde afin d’avoir un rendu fluide et agréable à l’œil.

C’est pour répondre à cette problématique que les canvas HTML5 ont été créés. Ils sont optimisés pour le graphisme et permettent de n’avoir à interagir qu’avec un seul élément du DOM tout en en affichant un nombre important.

Processing JS

Originellement développé par Ben Fry et Casey Reas, Processing a débuté en tant langage de programmation open source basé sur le Java afin d’aider les communautés d’art électronique et de design visuel à apprendre les bases de la programmation. Processing JS permet au code Processing d’être exécuté par n’importe quel navigateur compatible avec le HTML5.

Comment utiliser Processing JS

Afin d’utiliser Processing JS il suffit de télécharger la dernière version et de l’ajouter en tant que script, puis de créer un canvas avec un attribut data-processing-sources précisant le script à exécuter, et enfin d’écrire son script en Processing ou en Javascript.

Le html comprendra donc les éléments suivants :

<script src="processing.js"></script>
<canvas data-processing-sources="anything.pde"></canvas>

Exemple de code

// Variables globales
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Initialise le canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;  
}

// Boucle principale de rendu
void draw(){
  
  radius = radius + sin( frameCount / 4 );
  
  // Trajet du cercle vers la nouvelle destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
  
  // Remplit le canvas de gris
  background( 100 );
  
  // Définit la couleur de remplissage (bleu)
  fill( 0, 121, 184 );
  
  // Définit la couleur de bordure (blanc)
  stroke(255); 
  
  // Dessine le cercle
  ellipse( X, Y, radius, radius );                  
}


// Définit la nouvelle destination du cercle
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}

Liens

Footer fixe en bas de page avec flexbox

Lorsque l’on ajoute un footer sur son site, on souhaite en général que celui-ci reste en bas de page, que celle-ci contienne peu de contenu ou non (avec ou sans scroll).

Il existe de nombreux moyens d’obtenir ce résultat mais cela demande en général d’avoir un footer de hauteur fixe (à cause de l’utilisation de padding, margin ou autres méthodes qui viennent compenser la hauteur du footer).

Les flexbox permettent cependant d’avoir le même comportement tout en autorisant une hauteur de footer variable.

Avec flex-grow, flex-shrink et flex-basis

<body>
  <div class="content">
    Contenu du site
  </div>
  <footer></footer>
</body>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
footer {
  flex-shrink: 0;
}

Ici le flex-grow de 1 sur la classe content permet à cet élément de grandir pour occuper la place disponible.

Avec margin-top auto

<body>
  <div class="content">
    Contenu du site
  </div>
  <footer></footer>
</body>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
footer {
  margin-top: auto;
}

Cette fois-ci, l’espace restant sur la page est comblé par le margin-top auto du footer.

Source

css-tricks.com