Lazy loading dans WordPress

Le lazy loading, à quoi ça sert ?

Le lazy Load ou chargement différé est un moyen d’accélérer le chargement HTML et ainsi d’améliorer à la fois l’expérience utilisateur et le référencement des sites.
Le principe est simple : il consiste à différer le chargement de ce qui n’est pas tout de suite utile à la lecture d’une page par le navigateur : à savoir, la plupart des fichiers js et les images qui ne sont pas sensées apparaître immédiatement dans la fenêtre du navigateur car se trouvant dans la partie hors champ de la page (en général le bas de la page). La ligne de démarcation entre partie visible sans scroll et le reste de la page est nommée la ligne de flottaison.

Faire des maths en css avec calc()

calc() est une fonction native de CSS3 qui permet de faire des calculs mathématiques simples (addition, soustraction, multiplication et division) en remplacement de n'importe quelle valeur de largeur / hauteur / position / angle / temps ...etc.

Etre capable de faire des calculs mathématiques simples en CSS peut être utile dans certains cas et peut éviter d'utiliser du javascript inutilement.

Du PHP dans Visual Studio: est-ce vraiment possible ?

Présentation

Depuis plusieurs mois maintenant je suis amené à travailler sur deux languages différents : le C# (.NET) et le PHP 🙁 .

Le problème c'est que je suis "Full Microsoft" et j'adore mon EDI "Microsoft Visual Studio 2017" !!! C'est vrai, je peux utiliser VS Code, mais moins pratique quand même.

J'ai donc cherché pour savoir si je pouvais faire du PHP dans mon environnement préféré. Et j'ai trouvé un plugin (payant je l'avoue) mais qui vaut le détour: "PHP Tools for Visual Studio" !

Je vais vous présenter ce plugin rapidement et vous montrer comment l'utiliser.

Visual Studio Code : quésaco ?

Présentation

Visual Studio Code est un éditeur de code source léger mais puissant qui fonctionne sur toutes les plateformes tel que Windows, MacOS et Linux. Il prend en charge la plupart des languages connus comme JavaScript, TypeScript et Node.js ou encore C ++, C #, Python, PHP...

Il intègre toutes les fonctionnalités attendues pour ce genre d'outils (snippets, indentation automatique, coloration syntaxique, auto complétion, code refactoring...etc). 

Il intègre aussi un gestionnaire de paquets et de dépôts (Connexion à GIT par exemple). Enfin, il est possible de développer des plugins pour VS Code.

Télécharger VS Code ici.

Communiquer powershell et webservice Soap. Démo avancée pratique

soap via powershell

 

L'objet est de consommer les webservices (soap ou autre) depuis powershell.

Cette première démo fait le focus sur un webservice soap simple afin de présenter facilement les notions liées.

Considérons ce webservice dont le wsdl est localisé à cette adresse: http://www.dneonline.com/calculator.asmx?wsdl

Il offre un simple calculateur. La seule méthode qui nous intéresse est la méthode Add.

Pour interroger ce webservice, nous utilisons Invoke-WebRequest de powershell.

 

cmdlet Invoke-WebRequest (iwr)

La commande get-help iwr affiche ceci:

NOM

Invoke-WebRequest

RÉSUMÉ

   Gets content from a web page on the Internet.

SYNTAXE

   Invoke-WebRequest [-Uri] <Uri> [-Body <Object>] [-Certificate <X509Certificate>] [-CertificateThumbprint <String>] [-ContentType <String>] [-Credential <PSCredential>]

   [-DisableKeepAlive] [-Headers <IDictionary>] [-InFile <String>] [-MaximumRedirection <Int32>] [-Method <WebRequestMethod> {Default | Get | Head | Post | Put | Delete |

   Trace | Options | Merge | Patch}] [-OutFile <String>] [-PassThru] [-Proxy <Uri>] [-ProxyCredential <PSCredential>] [-ProxyUseDefaultCredentials] [-SessionVariable

   <String>] [-TimeoutSec <Int32>] [-TransferEncoding <String> {chunked | compress | deflate | gzip | identity}] [-UseBasicParsing] [-UseDefaultCredentials] [-UserAgent

   <String>] [-WebSession <WebRequestSession>] [<CommonParameters>]

........

Whaoooo!!!!

 

Pour notre démo pratique, nous utilisons cette forme:

 

Utilisation des classes Proxy Magento 2

 

Magento 2 utilise le principe d'injection de dépendances comme alternative à la classe finale Mage de Magento 1. Cela veut dire que si une classe A dépend du service B, B doit être injecté directement dans le constructeur de A, ce n'est plus à A de récupérer la dépendance B au moment où il en a besoin.

Cela implique inévitablement que B doit être instancié avant d'être injecté dans A. Cela n'a rien de problématique en soi, par contre imaginons que l'instanciation de B soit relativement lourde en terme de ressource et que B possède également des dépendances, qui elles-mêmes possèdent des dépendances, qui elles-mêmes... Vous l'aurez compris, cela peut commencer à devenir non négligeable, surtout (et c'est là que la problématique devient intéressante) si A a besoin de B uniquement dans certaines conditions (selon l'état d'une variable, l'état d'un service, le calcul d'un résultat, ou autre), l'instanciation de B devient donc inutile si A n'en a jamais besoin. Les classes de type Proxy sont présentes pour répondre à cette problématique.

Mise en place d’un thème Magento 2

Magento 2 intègre un système de thème puissant. Pour rappel, selon  le glossaire Magento, un thème contient des informations graphiques et d'apparence. Il permet de personnaliser le magasin à l'image de la marque.

Je sous propose de suivre la mise en place d'un thème et d'avoir un aperçu de certaines notions essentielles du système de thème utilisé par Magento 2.

Magento permet de disposer de thèmes installables via des packages composer, mais également de créer ses propres thèmes via app/design.

Les thèmes sont destinés à surcharger / étendre les ressources des vues, initialement utilisées par des modules et librairies.

Magento 2 intègre de base deux thèmes : Luma, un thème de démonstration déjà bien personnalisé, et blank, qui sert  de base à la création d'un thème custom, mais intégrant des éléments indispensables, comme la gestion du responsive.

Theme Luma.