L'abeille comme révélateur des problématiques environnementales

Des sujets très vastes portés par ce merveilleux insecte.

En attendant la création du prochain site web www.abeille-infos.com en cours de réalisation, sans doute pour un certain nombre de semaines, j'ai défini également son identité avec un logo évocateur en ce qui concerne son objectif.
Bien que ce logo ne soit pas encore définitif, notamment au niveau des couleurs choisies, je considère qu'il me convient déjà en l'état, car il illustre bien la volonté d'informer et traiter l'actualité autour de l'abeille, comme témoin des évolutions.

Il sera aussi question d'aborder les causes et conséquences de l'activité de l'homme sur la planète avec l'abeille comme sentinelle involontaire et aux avant-postes.

D'autres thématiques seront abordées comme bien sûr l'apiculture responsable et davantage respectueuse de l'insecte, les menaces qui pèse sur sa disparition et les effets constatés, quelques bonnes adresses pour trouver du miel de qualité directement auprès du producteur, des annuaires spécifiques ...
Mais aussi des articles proposeront de s'initier à l'apiculture en tant que débutant, de manière simple et sans prétention, pour contribuer à son niveau, au maintien de l'existence des abeilles. La mise en avant d'actions associatives ou autres en faveur de l'abeille feront l'objet de toute mon attention.

Bref, des mauvaises nouvelles en guise de prise de conscience, mais aussi surtout des approches positives mises en exergue qui veulent donner un avenir à l'abeille et à la planète !

Le futur site web est actuellement développé sous Drupal 9+, ceci afin de joindre ma formation technique et mes convictions.

Cet article www.abeille-infos.com, les premières fondations du site sous Drupal ! est apparu en premier sur DOTPROGS.

L'idée, ici, est de présenter l'usage d'un "token" (jeton) pour se prémunir d'une attaque CSRF (Cross Site Request Forgery) en utilisant le framework Symfony 4+ (doit pouvoir fonctionner en Sf 3 également à peu de chose près) mais sans s'appuyer sur un formulaire.

En effet les tokens CSRF sont proposés pour la sécurité d'un formulaire Symfony, donc l'objectif de ma démarche avec ce "bout de code" est de mettre en place la même sécurité, en utilisant un simple lien ou un bouton HTML par exemple avec une requête "DELETE" en AJAX pour appeler l'action dédiée "DeleteMemberAction" ci-dessous.
Note : utiliser une requête en "GET" pour une suppression de ressource est une mauvaise pratique d'un point de vue HTTP.

Cet exemple tient compte du fait que l'utilisateur à l'origine de l'action est normalement authentifié sur un espace sécurisé, ce qui fait le danger par principe d'une attaque CSRF.
Un compte "membre" doit être supprimé, ce que l'on peut considérer comme une opération sensible !

<?php

declare(strict_types = 1);

namespace App\Action;

use App\Responder\DeleteMemberResponder; 
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Core\Exception\InvalidCsrfTokenException;
use Symfony\Component\Security\Csrf\CsrfToken;
use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;

/**
 * Class DeleteMemberAction.
 *
 * Delete a member account.
 */
class DeleteMemberAction
{
    /**
     *  Manage member deletion.
     *
     * @Route({
     *     "en": "/user/{id}/delete/{token}"
     * }, name="delete_member", methods={"DELETE"})
     *
     * @param CsrfTokenManagerInterface $csrfTokenManager
     * @param DeleteMemberResponder     $responder
     * @param Request                   $request
     * 
     * @return Response
     *
     * @throws InvalidCsrfTokenException
     */ 
    public function __invoke(CsrfTokenManagerInterface $csrfTokenManager, DeleteMemberResponder $responder, Request $request): Response
    {
        // "delete_member" must be a unique token id for session storage inside application
        $token = new CsrfToken('delete_member', $request->attributes->get('token'));

        // Action is stopped since token is not allowed!
        if (!$csrfTokenManager->isTokenValid($token)) {
            throw new InvalidCsrfTokenException('CSRF Token is not valid.');
        }

        // Handle request and proceed to parameters validation and member deletion
        // ...
        // Return expected response (e.g. JSON, HTML...)
    }
}

Note : cette action est auto-configurée en tant que "controller" au sein du framework pour être appelée correctement via la route précisée.
Ce "controller" va en outre enclencher la vérification de la validité du token par l'intermédiaire d'un service "CsrfTokenManager" implémentant une interface. Vous trouverez ici le détail de cette classe concrète.

Cet objet "CsrfTokenManager" vérifie la validité d'un autre objet "CsrfToken" associant un identifiant et une valeur de token.

Mais à ce propos comment le token est généré ?
Généralement, il est créé dans un template via une fonction Twig avec "csrf_token('delete_member')" qui permet d'avoir le retour de la valeur du token CSRF en passant l'identifiant correspondant attendu.
Voici ce que cela peut donner sur un simple lien HTML côté Twig (l'allié fidèle de Symfony) :

{# "id" parameter can also be a uuid value! #}
<a href="{{ path('delete_member', {'id': 450, 'token': csrf_token('delete_member')}) }}" title="Validate deletion">Delete account</a>

Bien entendu, il est préférable par exemple de demander une confirmation avant suppression, afin d'être plus user friendly !

Le token CSRF peut être généré aussi simplement dans un service, toujours grâce à l'instance "CsrfTokenManager" et sa méthode "getToken('delete_member')" qui retourne un objet "CsrfToken" et va générer/stocker le token s'il n'existe pas déjà.
L'objet "CsrfToken" a quant à lui une méthode "getValue()" afin de récupérer en définitive la valeur du token.

{# Strange getter which can also generate a token! #}
$token = $csrfTokenManager->getToken('delete_member')->getValue();

Ce manager fait appel à d'autres instances pour générer le token et le stocker en session notamment via les classes concrètes "UriSafeTokenGenerator" et "NativeSessionTokenStorage" ou des implémentations similaires.

J'espère que ces quelques lignes pourront vous rendre service, sans mauvais jeu de mot !

Cet article Exemple d’utilisation d’un « token CSRF » sans formulaire avec Symfony est apparu en premier sur DOTPROGS.

Partons du principe que l'on souhaite lister les erreurs de validation lors de l'utilisation d'un formulaire avec Symfony 4.
Ça ne sert pas à grand chose mais cet exemple permet de récupérer "l'équivalent" simplifié des données qui remontent dans le profiler de Symfony pour les violations de contraintes sur les champs de ce formulaire.

Pour faire du "debug" rapide, j'utilise simplement un dump() des erreurs directement côté Twig pour m'assurer que les contraintes s'appliquent bien en testant visuellement le formulaire.

J'ai donc déclaré une fonction "macro" utilisée de façon récursive et exécutée pour boucler sur les objets FormErrorsIterator de chaque champ enfant (et enfant(s) d'enfant ...).

Note: "_self" désigne le template courant et permet une utilisation immédiate.

Pour Symfony, tout type de champ de formulaire est également un formulaire, il existe donc la notion de formulaire parent et enfant.

La récursivité pour cet exemple provient simplement du fait que j'ai décidé d'afficher l'ensemble des violations de contraintes présentes au sein du root form ici appelé "myRootForm" (variable déclarée pour le formulaire global) :

{% macro form_errors(forms) %}
  {% for form in forms %}
    {% for formError in form.vars.errors %}
      {{ dump(formError.cause.propertyPath, formError.cause.constraint, formError.cause.message) }}
    {% endfor %}
    {% if form.children is not empty %}
      {# Use macro recursively #}
      {{ _self.form_errors(form.children) }}
    {% endif %}
  {% endfor %}
{% endmacro %}

{# Use macro immediately after declaration in the same template #}
{{ _self.form_errors(myRootForm.children) }}

Ce "dump" affiche le propertyPath (le champ concerné), le type de contrainte objet, et le message d'erreur personnalisé ou proposé par défaut.
Les contraintes personnalisées (custom constraints) proposées par Symfony, éventuellement mises en place sur un projet, remontent également dans les boucles.

Pour utiliser votre macro où vous le souhaitez, il suffit de la déclarer dans un template dédié aux déclarations des fonctions macros et ensuite de faire un import de ce template dans un autre template pour pouvoir l'utiliser :

{# Import macro in another template #}
{% from 'macros.html.twig' import form_errors %}

{# Use macro #}
{{ form_errors(myRootForm.children) }}

{# ------------------------------------------- #}

{# Or import macro like this #} 
{% import "macros.html.twig" as macros %}

{# Use macro in the same way #}
{{ macros.form_errors(myRootForm.children) }}

Vous pouvez consulter la documentation concernant les macros Twig.

Voilà, c'est déjà fini !

Cet article Exemple d’utilisation d’une fonction « macro » Twig récursive est apparu en premier sur DOTPROGS.

J'ai été confronté à un problème que je n'avais pas envisagé en voulant lister en iframe un certain nombre de vidéos Youtube, Vimeo et Dailymotion (toutes disponibles en lecture) sur une page web.
Ces vidéos sont gérées avec leur API JavaScript respectives pour interagir entre elles (autrement-dit stopper une video en lecture si une autre démarre), car quoi de plus embêtant que d'avoir deux videos lues en même temps, super cacophonie !
Mon objectif initial était de gérer au mieux l'expérience utilisateur avec un loader pour chacune des videos en attendant que le chargement sur la page soit terminé.
Note : la notion de chargement consiste ici à s'assurer que la vidéo est un contenu disponible (sans erreur 404 par exemple).
Cela semblait assez nécessaire étant donné que plusieurs vidéos d'origine différente pouvaient être chargées au même moment.
Au passage, je comprends mieux pourquoi Youtube ou d'autres services affichent une vidéo à la fois, car cela est plus judicieux et pragmatique !
Seulement voilà, je n'avais pas accès au contenu des iframes du fait de la fameuse restriction de sécurité dans un contexte de "Cross Origin Resource Sharing" (contenu provenant d'un domaine différent).
je n'avais donc pas la possibilité d'accéder à un contenu externe (vidéo) en iframe et surtout tester son chargement directement en JavaScript !
D'autant plus que la gestion d'évènement en JavaScript sur une iframe est plutôt limitée ...

Après un certain nombre de recherche et en me documentant sur de possibles solutions, j'ai opté pour une approche similaire à ce qui est présenté ici en vidéo :
Cross domain proxy et requête AJAX : https://www.youtube.com/watch?v=o8puzjzpjqo

L'idée pour moi est d'effectuer une requête AJAX en passant en paramètre l'URL de la vidéo afin de vérifier en PHP que la vidéo est une ressource exploitable.
Le simple retour attendu sera une chaîne JSON contenant l'équivalent d'un booléan 0 ("chargement" impossible) et 1 ("chargement" exploitable côté client en JavaScript) pour basiquement faire apparaître soit un message d'erreur, soit faire disparaître le loader et rendre accessible l'iframe. Cela ressemble plus à une astuce mais permet de s'assurer que la vidéo va être disponible pour la lecture par l'utilisateur.

Seules les portions de code principales sont présentées ici, je pense qu'elles suffisent à voir globalement le principe.
Tous les commentaires sont en anglais car c'est une habitude personnelle !
Le code PHP provient de développements présents dans un projet Symfony 4, le principe requête - réponse reste cependant classique.

- Voici la partie requête AJAX réalisée côté client :

// Ajax request ES6 function
return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(obj.method || "GET", obj.url, obj.async || false );
        if (obj.overrideMimeType) {
            xhr.overrideMimeType(obj.overrideMimeType);
        }
        if (obj.responseType) {
            xhr.responseType = obj.responseType;
        }
        if (obj.withCredentials) {
            xhr.withCredentials = obj.withCredentials;
        }
        if (obj.headers) {
            Object.keys(obj.headers).forEach(key => {
                xhr.setRequestHeader(key, obj.headers[key]);
            });
        }
        // Custom functions for loader
        if (obj.onProgressFunction) {
            // Custom loader
            xhr.onprogress = () => {
                obj.onProgressFunction(xhr);
            };
        }
        if (obj.onLoadStartFunction) {
            xhr.onloadstart = () => {
                obj.onLoadStartFunction(xhr);
            };
        }
        if (obj.onLoadEndFunction) {
            xhr.onloadend = () => {
                obj.onLoadEndFunction(xhr);
            };
        }
        xhr.onerror = () => reject(xhr);
        xhr.onload = xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE ) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response);
                } else {
                    reject(xhr);
                }
            }
        };
        // Send request
        xhr.send(obj.body !== undefined ? obj.body : null);
    });
};

import request from './all/ajax-request';

export default function() {

    // Other scripts before here ...
    
    // Check video loading with C.O.R.S
    function checkLoadingCORSRequest(method, url, resolvedCallback, errorCallback, args, timeOut) {
        // XMLHttpRequest object
        const obj = {
            method: method,
            url: url.replace(/(\?.+)/gi, ''),
            async: true,
            withCredentials: false,
            responseType: 'json'
        };
        // Use promise with callbacks
        request(obj).then((response) => {
            // no need to parse with JSON.parse(response).status: response is already an object
            if (response.status === 1) {
                resolvedCallback.apply(null, args);
                // Dispatch checked video success event to manage asynchronous execution and enable API
                let customEvent = new Event('checkedVideoSuccess');
                args[0].dispatchEvent(customEvent);
            } else {
                errorCallback.apply(null, args);
            }
            // Cancel timeOut
            clearTimeout(timeOut);
        }).catch(() => {
            errorCallback.apply(null, args);
            // Cancel timeOut
            clearTimeout(timeOut);
        });
    }

    // Manage iframe after loading success: media argument is an iframe element
    function afterMediaLoaded(media) {
        // Make loader disappear and render iframe correctly for instance
        // ...
    }

    // Manage loading failure: media argument is an iframe element    
    function whenMediaError(media) {
        // Display an error message instead of iframe element for instance
        // ...
    }

    // Convert NodeLists to arrays (example with multiple Youtube iframes in slider)
    let singleSliderElement = document.getElementById('...');
    let youtubeIframes = Array.from(singleSliderElement.querySelectorAll('...')),
    let ytTimeOut = [];
    for (let i = 0; i < youtubeIframes.length; i ++) { // Call iframe loading rendering behavior with Youtube example in loop: ytTimeOut[i] = setTimeout(() => {
            // Dynamic URL to call action PHP class script (can obviously be static)
            let proxyURL = singleSliderElement.getAttribute('data-video-proxy') + youtubeIframes[i].getAttribute('src');
            checkLoadingCORSRequest('GET', proxyURL, afterMediaLoaded, whenMediaError, [youtubeIframes[i]], ytTimeOut[i]);
        }, 10);
    }

    // Other scripts after here ...
}

- L'action (controller) appelée par la requête AJAX qui envoie la réponse JSON grâce à un responder (pattern ADR), une fois la vidéo contrôlée par un service :

<?php
 
declare(strict_types = 1);
 
namespace App\Action;
 
use App\Responder\Json\JsonResponder;
use App\Service\Medias\VideoURLProxyChecker;
use Psr\Log\LoggerAwareTrait;
use Psr\Log\LoggerInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
 
/**
 * Class AjaxVideoURLCheckAction.
 *
 * Verify if video URL can be loaded using ajax.
 */
class AjaxVideoURLCheckAction
{
    use LoggerAwareTrait;
 
    /**
     * @var VideoURLProxyChecker
     */
    private $videoChecker;
 
    /**
     * AjaxTrickListAction constructor.
     *
     * @param VideoURLProxyChecker $videoChecker
     *
     * @param LoggerInterface $logger
     *
     * @return void
     */
    public function __construct(VideoURLProxyChecker $videoChecker, LoggerInterface $logger)
    {
       $this->videoChecker = $videoChecker;
       $this->setLogger($logger);
    }
 
    /**
     * Check if single trick video URL can be loaded from ajax request.
     *
     * @Route("/{_locale}/load-video/url/{url<(.+)>?}", name="load_video_url_check")
     *
     * @param JsonResponder $responder
     * @param Request       $request
     *
     * @return Response
     *
     * @see https://symfony.com/doc/current/routing/slash_in_parameter.html
     */
    public function __invoke(JsonResponder $responder, Request $request): JsonResponse
    {
        // Check video URL value
        $url = $this->videoChecker->filterURLAttribute($request);
        if (\is_null($url)) {
            $this->logger->error(
                "[trace app videos] AjaxVideoURLCheckAction/__invoke => " .
                "Technical error due to video url set to null: check loading process for both client and server side!"
            );
        }
        // Check if URL is formatted as expected (validation) and accessible
        $data = $this->videoChecker->verify($url);
        return $responder($data);
    }
}

<?php
 
declare(strict_types = 1);
 
namespace App\Responder\Json;
 
use Symfony\Component\HttpFoundation\JsonResponse;
 
/**
 * Class JsonResponder.
 *
 * Manage a simple JSON response with status from ajax request.
 */
final class JsonResponder
{
    /**
     * Invokable Responder with Magic method.
     *
     * @param array $data
     *
     * @return JsonResponse
     */
    public function __invoke(array $data): JsonResponse
    {
        // Encode data with JSON string with serializer
        return new JsonResponse($data);
    }
}

- Le service, classe PHP simple qui effectue les contrôles sur la ressource vidéo :

<?php

declare(strict_types = 1);

namespace App\Service\Medias;

use Symfony\Component\HttpFoundation\Request;

/*
 * Class VideoURLProxyChecker.
 *
 * Check if a video URL can be correctly loaded.
 * .
 */
class VideoURLProxyChecker
{
    // CAUTION: these iframe URL patterns should certainly be improved and are very important for a quite "secure" use!
    // Even more, they can evolve, so it is preferable to use providers APIs!
    const ALLOWED_URL_PATTERNS = [
        '/^https?:\/\/www\.youtube\.com\/embed\/[a-zA-Z0-9_-]+$/', // [\w-]+
        '/^https?:\/\/player\.vimeo\.com\/video\/[0-9]+$/',
        '/^https?:\/\/www\.dailymotion\.com\/embed\/video\/[a-zA-Z0-9]+$/'
    ];

    /**
     * Filter provided URL.
     *
     * @param Request $request
     * @param bool    $isDecoded
     *
     * @return null|string
     */
    public function filterURLAttribute(Request $request, bool $isDecoded = false): ?string
    {
        // Get URL to check
        $url = null;
        if (!\is_null($request->attributes->get('url'))) {
            $url = $request->attributes->get('url');
        }
        return $isDecoded ? $url : urldecode($url);
    }

    /**
     * Check if URL format is allowed.
     *
     * @param string|null $url
     *
     * @return bool
     */
    public function isAllowed(?string $url): bool
    {
        if (\is_null($url)) {
            return false;
        }
        $patterns = self::ALLOWED_URL_PATTERNS;
        // Use of "array_filter" would be more appropriate here!
        for ($i = 0; $i < count($patterns); $i ++) {
            if (preg_match( $patterns[$i], urldecode($url))) {
                return true;
            }
        }
        return false;
    }

    /**
     * Request URL to check if a content can be loaded. Choice is made to use cURL here.
     *
     * CAUTION: do not use this method alone because of potential "SSRF" attacks! At least use isAllowed() before...
     * @link https://www.vaadata.com/blog/understanding-web-vulnerability-server-side-request-forgery-1/
     *
     * @param string|null $url
     *
     * @return bool
     */
    public function isContent(?string $url): bool
    {
        if (\is_null($url)) {
            return false;
        }
        // Youtube particular case to check availability correctly
        // otherwise HTTP code is always 200!
        if (preg_match( '/youtube/', $url)) {
            $url = $this->prepareAccessToYoutubeVideoContent($url);
        }
        // Use cURL
        $handle = curl_init(urldecode($url));
        curl_setopt($handle, CURLOPT_RETURNTRANSFER, 1);
        // Avoid content loading by getting the headers only
        curl_setopt($handle, CURLOPT_NOBODY, 1);
        // Request with cURL
        curl_exec($handle);
        $httpCode = curl_getinfo($handle, CURLINFO_HTTP_CODE);
        // Check resource availability with HTTP code 200
        $isContentFound = 200 === $httpCode ? true : false;
        curl_close($handle);
        return $isContentFound;
    }

    /**
     * Check particular youtube video availability.
     *
     * @link Particular case for youtube video:
     * https://stackoverflow.com/questions/29166402/verify-if-video-exist-with-youtube-api-v3
     *
     * @param $url
     *
     * @return string the correct url to use to check availability
     */
    private function prepareAccessToYoutubeVideoContent($url): string
    {
        // Extract video id and use correct URL
        preg_match( '/embed\/(.+)/', urldecode($url), $matches);
        $videoID = $matches[1];
        $url ='https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=' . $videoID;
        return $url;
    }

    /**
     * Return a status code to be converted later in JSON string.
     *
     * Value 1 means URL can be loaded and value 0 means error context must be used!
     *
     * @param string|null $url
     *
     * @return array
     *
     * @see https://symfony.com/doc/current/controller.html#returning-json-response
     */
    public function verify(?string $url): array
    {
        // Prepare array to be converted in JSON string with Symfony JsonResponse object (no need to use "json_encode" here)
        if (\is_null($url)) {
            return ['status' => 0];
        }
        $url = urldecode($url);
        return $this->isAllowed($url) && $this->isContent($url) ? ['status' => 1] : ['status' => 0];
    }

}

Des erreurs (de copié-collé) peuvent s'être glissées dans le code bien que celui-ci soit issu d'un projet opérationnel.
Je vous invite à me les signaler en me contactant si c'est le cas.
Je suis également preneur si vous avez des conseils pour améliorer certains scripts, ou si vous estimez que certains points sont inexactes.

L'idée de départ, bien que perfectible, reste simple et intéressante pour vérifier l'accès à des ressources externes.

- Promesse et XMLHttpRequest : la fonction JavaScript "request(object)" est en grande partie inspirée de ce script : http://ccoenraets.github.io/es6-tutorial-data/promisify
J'apprécie cette manière de faire notamment pour la gestion d'évènements vraiment souple.
il n'y a pas que "axios" et "fetch api" dans la vie !
- Voici un lien vers Symfony 4 qui est utilisé en partie dans ce post.

Cet article Tester le chargement (disponibilité) d’une video en iframe avec AJAX est apparu en premier sur DOTPROGS.

Dans le cadre de la création d'un blog, je me suis documenté sur quelques approches basiques pour réaliser une pagination en PHP - MySQL afin de lister des articles.
une fois le principe de base compris, j'ai décidé par la suite de "personnaliser" un tantinet cette pagination et l'afficher avec Twig dans un autre projet utilisant le framework Symfony.

- J'utilise par exemple un "entity service layer" qui est une classe PHP qui sert ici de passerelle entre un Repository Doctrine et une Action/Controller.
Je prends en compte également un affichage descendant ou ascendant "$order" qui est bien sûr facultatif car on peut faire plus simple !
L'objectif est de faire une requête SQL en utilisant les paramètres OFFSET ET LIMIT - ici grâce au Repository avec findByLimitOffsetWithOrder(...) dans la méthode getFilteredList(...) - pour obtenir les posts (articles) propres à la page courante "currentPage" définie dans getPaginationParameters(...).
Les principales méthodes personnelles nécessaires de cet "entity service layer" que j'utilisent sont présentées ci-dessous :

<?php 
 
declare(strict_types = 1); 
 
namespace App\Service; 
 
// Used classes are not declared to simplify code demo! 
// use ... 
// use ... 
 
class PostServiceLayer 
{ 
    // Traits, properties and constructor with dependency injection and other previous methods 
    // ...
 
    /** 
    * Count all posts without filter. 
    * 
    * @return int 
    * 
    * @throws \Doctrine\ORM\NonUniqueResultException 
    * @throws \UnexpectedValueException 
    */ 
    public function countAll() : int 
    { 
        $result = $this->repository->countAll();
        if (\is_null($result)) {
            throw new \UnexpectedValueException('Post total count error: list can not be generated!');
        }
        return $result;
    }
 
    /**
     * Get filtered post list depending on parameters.
     *
     * @param int|null $offset
     * @param int      $limit
     * @param string   $order
     *
     * @return array
     *
     * @throws \Doctrine\ORM\NonUniqueResultException
     */
    public function getFilteredList(
        int $offset = null,
        int $limit = Post::POST_NUMBER_PER_LOADING,
        string $order = Post::POST_LOADING_MODE
    ) : array {
        // Init value to define starting rank
        $init = ('DESC' === $order) ? $this->countAll() : -1;
        // Offset starts at 0 (i.e. the 15th Post rank has a value of 14)
        $start = $offset;
        $end = $offset + $limit;
        return $this->repository->findByLimitOffsetWithOrder($order, $init, $start, $end);
    }
 
    /**
     * Get default parameters to show a post list.
     *
     * (e.g. sort direction, post number for "load more", ...)
     *
     * @return array
     */
    public function getListDefaultParameters() : array
    {
        return [
            'loadingMode'      => Post::POST_LOADING_MODE,
            'numberPerLoading' => Post::POST_NUMBER_PER_LOADING,
            'numberPerPage'    => Post::POST_NUMBER_PER_PAGE
        ];
    }
 
    /**
     * Get pagination parameters to manage page links.
     *
     * This is used on complete post list accessible on "posts" page.
     *
     * @param int $pageIndex
     *
     * @return array|null
     *
     * @throws \Doctrine\ORM\NonUniqueResultException
     */
    public function getPaginationParameters(int $pageIndex) : ?array
    {
        $countAll = $this->countAll();
        $listDefaultParameters = $this->getListDefaultParameters();
        $postNumberPerPage = $listDefaultParameters['numberPerPage'];
        $pageCount = $countAll % $postNumberPerPage == 0
            ? $countAll / $postNumberPerPage
            : (int) floor($countAll / $postNumberPerPage) + 1;
        $loadingMode = $listDefaultParameters['loadingMode'];
        if ($pageIndex <= 0 || $pageIndex > $pageCount) {
            return null;
        }
        if ('DESC' === $loadingMode) {
            $offset = $countAll - $pageIndex * $postNumberPerPage < 0
                ? 0 : $countAll - $pageIndex * $postNumberPerPage;
            $limit = $offset === 0
                ? $countAll % $postNumberPerPage : $postNumberPerPage;
 
        } else {
            $offset = $pageIndex === 1
                ? 0 : ($pageIndex - 1) * $postNumberPerPage;
            $limit = $offset + $postNumberPerPage > $countAll - 1
                ? $countAll % $postNumberPerPage : $postNumberPerPage;
        }
        return [
            'currentPage'   => $pageIndex,
            'currentOffset' => $offset,
            'currentLimit'  => $limit,
            'pageCount'     => $pageCount,
            'loadingMode'   => $loadingMode,
            'postCount'     => $countAll
        ];
    }
 
    // Other following methods
    // ...
 
}

- Voici la partie Twig à intégrer dans un template (les commentaires sont en anglais, c'est une habitude personnelle !) :
Les deux variables importantes à transmettre à la vue depuis une "Action" ou un "Controller" (non détaillé ici) sont le nombre de page total "pageCount" et la page courante "currentPage" pour sa mise en exergue et structurer les comportements autour d'elle.
Dans une deuxième temps, il s'agit d'initialiser des variables en fonction des conditions induites par la personnalisation que l'on souhaite obtenir.
Je décide par exemple d'afficher les 2 pages précédentes et suivantes (libre à vous d'en afficher plus!) autour de la page courante : si cela n'est pas possible, j'évalue la possibilité d'afficher 1 page, ou aucune, avant ou après la page courante, ce qui explique les conditions initialisées au préalable.
Je substitue les autres numéros de page par "..." pour les matérialiser, à l'exception de la première et la dernière pour conserver les bornes extrêmes, et ainsi gérer un nombre conséquent de page à afficher le cas échéant.

<!-- Generate pagination block if there is at least more than 1 page! -->
    {% if pageCount > 1 %}
        <!-- Pagination -->
        {# Page quantity to show around current page is 2 or a calculated minimum value #}
        {% set defaultPageQuantityAround = 2 %}
        {# Mininum value #}
        {% set minimumPageQuantityAround = min(currentPage - 1, pageCount - currentPage) %}
        {# Condition to show the right page numbers before current page: default or minimum value #}
        {% set conditionBefore = currentPage != 1 and minimumPageQuantityAround <= currentPage - 1 %}
        {# Condition to show the right page numbers after current page: default or minimum value #}
        {% set conditionAfter = currentPage != pageCount and minimumPageQuantityAround <= pageCount - currentPage %}
        {# Define page numbers before, other pages will be replaced by "..." #}
        {% set PageQuantityAroundBefore = conditionBefore ? defaultPageQuantityAround : minimumPageQuantityAround %}
        {# Define page numbers after, other pages will be replaced by "..." #}
        {% set PageQuantityAroundAfter = conditionAfter ? defaultPageQuantityAround : minimumPageQuantityAround %}
        <div class="uk-flex uk-flex-center">
            <ul class="uk-pagination uk-text-bold uk-text-uppercase">
                {# Previous link #}
                {% if currentPage - 1 != 0 %}
                <li><a class="st-color-yellow" href="{{ path('posts', { 'page': currentPage - 1 }) }}" title="Previous"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
                {% endif %}
                {% for i in 1..pageCount %}
                {# Current page to show #}
                {% if currentPage == i %}
                <li class="st-color-red">{{ i }}</li>
                {# Show "..." before current page depending on page numbers to show before #}
                {% elseif (i < currentPage and 1 != i) and (i == currentPage - PageQuantityAroundBefore - 1) %}
                <li class="uk-disabled">...</li>
                {# Show "..." after current page depending on page numbers to show after #}
                {% elseif (i > currentPage and pageCount != i) and (i == currentPage + PageQuantityAroundAfter + 1) %}
                <li class="uk-disabled">...</li>
                {# Hide pages under current page and before "..." excepted page 1 #}
                {% elseif (1 != i) and (i < currentPage - PageQuantityAroundBefore - 1) %}
                <li class="uk-hidden"><a href="{{ path('posts', { 'page': i }) }}" title="Page {{ i }}">{{ i }}</a></li>
                {# Hide pages over current page and after "..." excepted page with number "pageCount" (last) #}
                {% elseif (pageCount != i) and (i > currentPage + PageQuantityAroundAfter + 1) %}
                <li class="uk-hidden"><a href="{{ path('posts', { 'page': i }) }}" title="Page {{ i }}">{{ i }}</a></li>
                {# Apply particular style for lowest link corresponding to fisrt page 1, and Highest link corresponding to page total count #}
                {% elseif i == 1 or i == pageCount %}
                <li><a class="st-color-blue" href="{{ path('posts', { 'page': i }) }}" title="Page {{ i }}">{{ i }}</a></li>
                {# Normal links which are not concerned by conditions above #}
                {% else %}
                <li><a href="{{ path('posts', { 'page': i }) }}" title="Page {{ i }}">{{ i }}</a></li>
                {% endif %}
                {% endfor %}
                {# Next link #}
                {% if currentPage + 1 <= pageCount %}
                <li class="uk-margin-auto-left"><a class="st-color-yellow" href="{{ path('posts', { 'page': currentPage + 1 }) }}" title="Next">Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
                {% endif %}
            </ul>
        </div>
    {% endif %}

Et voici le résultat visuel de la pagination :

Les classes CSS utilisées ici sont personnalisées (pour les couleurs) et issues du framework UIkit pour le comportement (lien désactivé, lien caché ...), donc rien de significatif pour ce qui est de l'aspect mise en forme.

Un tel système de pagination peut très facilement être adapté pour de l'AJAX et afficher les posts de la page courante (en renvoyant du contenu HTML avec un block Twig par exemple) en asynchrone afin d'être davantage "user friendly" !

Ces extraits de code sont issus d'un projet opérationnel, ceci-dit des "petites coquilles" peuvent s'être glissées entre les lignes.
N'hésitez pas à me contacter pour signaler des erreurs éventuelles ou pour partager des améliorations, car on peut souvent mieux faire ou faire plus pragmatique !

Cet article Mettre en place une pagination personnalisée avec Twig est apparu en premier sur DOTPROGS.

L'expérience utilisateur, une aventure vraiment sérieuse !

Du design pour un expérience réussie

Le design "UX" en bref :
Le design d'expérience traduit la conception (élaboration, création) de l'expérience utilisateur (User eXperience) associée à l'usage d'un produit (service, système, etc ...).
Dans le domaine du web et en particulier pour un site web donné, l'expérience utilisateur est constituée notamment de son référencement, de son apparence (graphisme), de l'ergonomie (cohérence, positionnement des éléments) , de son efficacité (actions facilitées et accès clair à l'information), de son adaptation aux nouveaux usages (prise en compte des nouveaux terminaux) ...

Un bon design d'expérience est un design qui répond aux besoins et aux habitudes de l'utilisateur, celui-ci provoque ainsi de l'émotion et permet une expérience satisfaisante voire aboutie. Cette expérience est rendue possible grâce au design "UI" (User Interface) : la conception d'une interface entre l'utilisateur et le produit (ou service, ou autre) doit être en particulier suffisamment intuitive et efficace pour créer une expérience agréable.

Quelles sont les compétences attendues du "UX" designer ?
Les entreprises veulent toutes créer des produits ou services ayant un succès à la clef, cependant l'idée de départ est souvent très bonne et la mise en oeuvre n'est pas toujours à la hauteur.

Pour cette raison, les entreprises qui veulent atteindre un objectif réel de réponses aux attentes de l'utilisateur, font appel à tous les moyens disponibles dont le design "UX" pour maximiser les chances de réussite.
Pour certaines, elles prennent la décision d'embaucher spécifiquement un designer "UX" qui aura pour mission de coordonner au sein de l'entreprise cette démarche : se pose alors la nécessité d'investir et surtout de croire en ce modèle de conception qui est bien sûr reconnu dans le milieu du web.
Le design "UX" a pu être pratiqué parfois de manière assez empirique, hasardeuse, il a désormais été davantage formalisé et il existe de véritables cursus de formation qui en font un ensemble de compétences professionnelles reconnues.
Ce métier fait logiquement appel à de multiples connaissances variées telles qu'imaginer et concevoir des solutions correspondant aux besoins de l'utilisateur, analyser les comportements et les modes de consommation de celui-ci, concevoir des interfaces et fonctionnalités en adéquation, en restant dans le cadre autant que possible de la demande du client.
Le designer "UX" sera d'autant meilleur qu'il saura travailler avec les différents intervenants impliqués dans le projet proposé.

Peut-on attendre autant de compétences stratégiques, d'une seule personne, ou est-ce un poste qui sert à aiguiller vers un objectif majeur : l'utilisateur ?
Les efforts d'un designer "UX" vont être concentrées sur les interactions qui vont naître entre le produit et l'utilisateur : autrement dit l'interface proposée pour un produit, service, système aura un rôle central.
Il est nécessaire de comprendre que le designer "UX" est un peu de le chef d'orchestre pour l'application de cette approche : il doit impulser la réflexion et la coordination avec les différentes acteurs du projets en interne (chef de projet, webdesigner, directeur artistique, intégrateur, développeur) et en externe (expliciter le concept au niveau du client) pour convaincre de l'utilité de la démarche et la rendre concrète.

Les graphistes vont par exemple concevoir des interfaces agréables répondant au service proposé, les intégrateurs et développeurs vont mettre en place des fonctionnalités et les rendre vivantes et magnifier l'interface.
Quel que soit le domaine de compétence, chacun doit prendre en compte le design "UX" et est naturellement impliqué, et pas simplement la personne dédiée à cette démarche.

En réalité, le designer "UX" ne peut pas raisonnablement remplir l'ensemble de ces rôles, car les compétences techniques et conceptuelles sont sans doute trop vastes pour un seul individu. Si son expérience personnelle et professionnelle est conséquente et pluridisciplinaire, elle lui permettra ceci-dit, d'avoir un regard global assez pointu.

Pourquoi en définitive, il est indispensable d'accorder de l'importance au design "UX" ?
Si cette discipline est maîtrisée par une entreprise, elle peut en faire un avantage concurrentiel majeur pour se différencier.

Il est certain qu'intégrer le design "UX" dans un processus de conception, induit une remise en question conséquente des équipes au sein d'une agence par exemple pour les sensibiliser, les former, les impliquer, et leur permettre d'adhérer à ce type de méthodes innovantes.

On voit clairement apparaître le besoin impérieux de sensibiliser l'ensemble d'une équipe au design "UX" pour mener à bien la conception de l'expérience utilisateur : toutes les entreprises n'ont pas franchi le pas, mais peuvent difficilement ignorer la démarche.

Sans moyens financiers et humains, et aussi sans conviction, il ne peut pas, sans doute, y avoir de design "UX" sincère et efficace au sein de l'entreprise, il ne suffit pas d'en parler pour sembler fonctionner de manière plus professionnelle.

Personnellement et à titre d'exemple, mes modestes expériences dans le web ne m'ont pas permis de côtoyer des gestions de projets aussi abouties gravitant autour du design "UX", la professionnalisation pourtant grandissante de notre secteur d'activité laisse très certainement encore des possibilités a beaucoup de structures, pour se démarquer et mieux travailler avec des méthodologies vraiment pertinentes voire indispensables comme le design "UX".

Vous trouverez ici une présentation du design "UI" ainsi que des ressources complètes sur ce site web.

Cet article Qui peut prétendre vraiment s’appuyer sur un designer « UX » ? est apparu en premier sur DOTPROGS.

Ashtanga, un yoga intense et bienfaisant

Le plaisir est une quête qui passe par la culture de l'effort.

Une vidéo d'introduction qui plante le décor, et qui bien sûr n'est pas l'illustration de ce qui nous attend lorsqu'on débute le yoga, mais qui démontre quel niveau de prouesses, un pratiquant peut atteindre en "Ashtanga" Yoga, l'expression "effort intense" prend ici tout son sens !

Je précise tout de suite que cette forme de yoga est vraiment portée sur l'effort physique en plus de la méditation, et devient "quasi acrobatique" à haut niveau. Elle n'est en rien le symbole de la pratique du yoga, très divers par ces courants et évolutions, voire modernisé dans certains cas.

Quelques vidéos en lien ci-dessous permettent de réaliser quel est le cheminement à suivre avant d'espérer simplement progresser spécifiquement en Yoga "Ashtanga" ou pour certains peut-être arriver à un véritable niveau avancé. Le plaisir, le bien-être et prendre soin de soi sont des objectifs beaucoup plus fondamentaux que la performance, vous l'aurez bien compris.

Ashtanga Yoga niveau expert en vidéo !

Tout d'abord, je tiens à dire que je ne prétends pas connaître le yoga, cependant je m'y intéresse pour avoir eu la chance d'être initié avec surprise et étonnement à quelques séances par des connaissances, et en garde un regard agréable et convaincu.
J'avais des à-priori avant cette découverte, je l'admets, dont notamment un regard faussé, en considérant que le yoga se réduisait beaucoup à de la méditation associée à des postures assez lentes ...

Avant toute chose, j'ai souhaité évoqué ce sujet en soulignant que le yoga est une forme de discipline qui permet de contrer la sédentarité excessive que l'on peut connaître en travaillant toute la journée assis sur une chaise, comme par exemple, lorsqu'on travaille dans le web !

Le Yoga "Ashtanga" est un "style" parmi les nombreuses orientations existantes qui se caractérise par un enchaînement de postures gradué par un certains nombre de "séries" de plus en plus exigeantes. La respiration et le regard sont deux axes de pratique caractéristiques de cette forme de yoga : le souffle est nécessaire par rapport à l'intensité et l'effort demandé par les postures, fixer son regard permet aussi de travailler son attention et se focaliser uniquement sur la pratique. Le Yoga "Ashtanga" demande d'être présent physiquement et psychiquement pour produire pleinement son bénéfice.

Les séries permettent à chacun d'évoluer à son rythme, et c'est surtout cela qu'il faut retenir, en prenant en compte le principe que chaque individu a des objectifs différents.

Par la pratique il est possible de trouver son espace d'expression, de satisfaction, de progression et aussi parfois de spiritualité.
Le yoga (en particulier le courant "Ashtanga") est aussi une excellente préparation physique pour un autre sport, ou à défaut d'autres activités, assure une bonne condition au quotidien, et peut avoir de nombreux effets "thérapeutiques" sur notre santé, s'il est bien encadré et correctement pratiqué bien évidemment.

- Présentation des différents courants ou pratiques de Yoga dont "Ashtanga" sur cette page
- Exemple de postures pour débutant en Yoga Ashtanga en video
- Exemple de postures pour intermédiaire en Yoga Ashtanga en video
- Exemple de postures pour confirmé en Yoga Ashtanga en video

Cet article Quand le yoga entretient la condition physique … est apparu en premier sur DOTPROGS.

Des possibilités d'intégration intéressantes avec le format "SVG"

Ses atouts majeurs

"SVG" (pour "Scalable Vector Graphic") est un format d'image pour les vecteurs graphiques et c'est ce qui fait son charme !
Ceci implique que ce format est facilement adaptable en dimensions, sans perte de qualité. Les fichiers en format "SVG" ont une taille réduite et bénéficie d'un bon taux de compression. L'affichage des images "SVG" sur des périphériques à haute définition et densité de pixel (type "retina" ou autre) est du coup bien géré.

Les formes dessinées sont aisément contrôlables, nous pouvons les animer facilement et leur appliquer des styles et de l'interactivité avec CSS et JavaScript.

Les navigateurs modernes permettent désormais de profiter de ce format, mais bien que "SVG" ne soit pas une véritablement une nouveauté, il n'est pas régulièrement utilisé sur un site web.

L'intégration, bien que clairement documentée nécessite un certain apprentissage. Il existe aussi certaines limites et exceptions comme souvent qui nécessitent de les contourner notamment en consultant caniuse, notre référence pour les problématiques d'utilisation.

"SVG" est basé sur le langage "XML", un fichier est donc facilement manipulable dans un simple éditeur de code.
un exemple de format "SVG" qui représente un pictogramme "tools" présent sur le visuel de cet article :

<svg version="1.1" id="Tools" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M3.135,6.89c0.933-0.725,1.707-0.225,2.74,0.971c0.116,0.135,0.272-0.023,0.361-0.1c0.088-0.078,1.451-1.305,1.518-1.361
 C7.82,6.341,7.9,6.231,7.795,6.108C7.688,5.985,7.301,5.483,7.052,5.157c-1.808-2.365,4.946-3.969,3.909-3.994
 c-0.528-0.014-2.646-0.039-2.963-0.004C6.715,1.294,5.104,2.493,4.293,3.052C3.232,3.778,2.836,4.204,2.771,4.263
 c-0.3,0.262-0.048,0.867-0.592,1.344C1.604,6.11,1.245,5.729,0.912,6.021C0.747,6.167,0.285,6.513,0.153,6.628
 C0.02,6.745-0.004,6.942,0.132,7.099c0,0,1.264,1.396,1.37,1.52C1.607,8.741,1.893,8.847,2.069,8.69
 c0.177-0.156,0.632-0.553,0.708-0.623C2.855,8.001,2.727,7.206,3.135,6.89z M8.843,7.407c-0.12-0.139-0.269-0.143-0.397-0.029
 L7.012,8.63c-0.113,0.1-0.129,0.283-0.027,0.4l8.294,9.439c0.194,0.223,0.53,0.246,0.751,0.053L17,17.709
 c0.222-0.195,0.245-0.533,0.052-0.758L8.843,7.407z M19.902,3.39c-0.074-0.494-0.33-0.391-0.463-0.182
 c-0.133,0.211-0.721,1.102-0.963,1.506c-0.24,0.4-0.832,1.191-1.934,0.41c-1.148-0.811-0.749-1.377-0.549-1.758
 c0.201-0.383,0.818-1.457,0.907-1.59c0.089-0.135-0.015-0.527-0.371-0.363c-0.357,0.164-2.523,1.025-2.823,2.26
 c-0.307,1.256,0.257,2.379-0.85,3.494l-1.343,1.4l1.349,1.566l1.654-1.57c0.394-0.396,1.236-0.781,1.998-0.607
 c1.633,0.369,2.524-0.244,3.061-1.258C20.057,5.792,19.977,3.884,19.902,3.39z M2.739,17.053c-0.208,0.209-0.208,0.549,0,0.758
 l0.951,0.93c0.208,0.209,0.538,0.121,0.746-0.088l4.907-4.824L7.84,12.115L2.739,17.053z"/>
</svg>

Des formes géométriques simples peuvent être traitées (rect, circle, elipse et polygon), ou plus complexes (balises polyline et path) comme l'exemple ci-dessus.

Le code avec balise "svg" ci-dessus peut-être placé tel quel dans une page web en HTML5, il existe en réalité différentes manières d'afficher et utiliser un "SVG" pour un site web dont notamment la balise "iframe", "object" et "img" et également l'intégration en background CSS.

L’attribut "viewBox" est important et permet l'affichage des formes représentées. Les attributs "width" et "height" définissent quant à eux le cadre fondamental qui va le contenir et l'afficher dans une page web. Lors de l'intégration, il faut donc apporter une attention particulière à ses valeurs. Voici ce que cela donne concrètement avec une illustration.

Vous pouvez exporter un fichier SVG à partir d'un éditeur graphique tel que Illustrator, Inkscape ou autres, cependant le code généré nécessitera d'être optimisé.

"SVG" permet des effets graphiques comme le détourage, masquage (clipPath et mask), ainsi que des filtres, et surtout il est adaptatif ce qui le rend pratique pour le responsive design.

Le "profil" de "SVG" a été brièvement abordé dans cet article, pour aller plus loin dans le domaine, je vous propose un lien très riche avec de nombreuses ressources et une revue assez large de ses capacités et surtout comme apprendre à l'utiliser.

Cet article SVG et son utilisation pour le web : des ressources variées est apparu en premier sur DOTPROGS.

DE NOUVELLES FONCTIONNALITÉS POUR LE CUSTOMIZER DE WORDPRESS

UNE EXPÉRIENCE UTILISATEUR AMÉLIORÉE ET PLUS AGRÉABLE

Le "customizer" de WordPress est l'interface de personnalisation avancée proposée au sein de l'administration du CMS (système de gestion de contenu).

Avant le customizer, le principe de "pages d'options" peu uniformes en fonction des thèmes était la règle. Le "customizer" propose de ce fait d'unifier cette approche avec une API ("interface de programmation").

Le "customizer" a pour intérêt de permettre de visualiser sa page web en même temps qu'elle est modifiée.

On y accède depuis le menu "Apparence -> Personnaliser", il est possible de piloter la forme et le fond du site web en fonction des champs de formulaires ("custom controls") définis et configurés par le thème activé.

Ses "contrôles personnalisés" sont organisés en "panels" (qui sont les grands ensembles de personnalisation), des "sections" divisent ces "panels" en sous-ensembles pour rendre plus lisibles les actions proposées par ces custom controls".

En fonction du thème choisi, la personnalisation peut être très avancée ou quasi inexistante si les développeurs de thèmes n'ont pas fait le choix du "customizer".

Le principe de base de l'API du customizer est de permettre la création de classes php qui héritent de classes natives aussi bien pour les panels, les sections que pour les "custom controls". Ainsi des contrôles personnalisés totalement nouveaux peuvent être créés sur la base d'un code uniforme proposé par cette API.

Un exemple de "custom control" non natif créé par un développeur est présenté ci-dessous, et propose spécifiquement les typographie de Google les plus populaires pour personnaliser les textes d'un site web :

<?php
 
if ( ! class_exists( 'WP_Customize_Control' ) )
    return NULL;
 
/**
 * A class to create a dropdown for all google fonts
 */
 class Google_Font_Dropdown_Custom_Control extends WP_Customize_Control
 {
    private $fonts = false;
 
    public function __construct($manager, $id, $args = array(), $options = array())
    {
        $this->fonts = $this->get_fonts();
        parent::__construct( $manager, $id, $args );
    }
 
    /**
     * Render the content of the category dropdown
     *
     * @return HTML
     */
    public function render_content()
    {
        if(!empty($this->fonts))
        {
            ?>
                <label>
                    <span class="customize-category-select-control"><?php echo esc_html( $this->label ); ?></span>
                    <select <?php $this->link(); ?>>
                        <?php
                            foreach ( $this->fonts as $k => $v )
                            {
                                printf('<option value="%s" %s>%s</option>', $k, selected($this->value(), $k, false), $v->family);
                            }
                        ?>
                    </select>
                </label>
            <?php
        }
    }
 
    /**
     * Get the google fonts from the API or in the cache
     *
     * @param  integer $amount
     *
     * @return String
     */
    public function get_fonts( $amount = 30 )
    {
        $fontFile = '/cache/google-web-fonts.txt';
 
        //Total time the file will be cached in seconds, set to a week
        $cachetime = 86400 * 7;
 
        if(file_exists($fontFile) && $cachetime < filemtime($fontFile))
        {
            $content = json_decode(file_get_contents($fontFile));
        } else {
 
            $googleApi = 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key={API_KEY}';
 
            $fontContent = wp_remote_get( $googleApi, array('sslverify'   => false) );
 
            $fp = fopen($fontFile, 'w');
            fwrite($fp, $fontContent['body']);
            fclose($fp);
 
            $content = json_decode($fontContent['body']);
        }
 
        if($amount == 'all')
        {
            return $content->items;
        } else {
            return array_slice($content->items, 0, $amount);
        }
    }
 }

Plus d'exemples sur le site des développeurs sont accessibles par ce lien.

Quelques développeurs web ou sociétés concevant des thèmes WordPress premium enrichissent, petit à petit par leur travail, la connaissance du "customizer" et contribuent à accroître les ressources sur le sujet.

Il existe peu de ressources de manière générale (même si un certain nombre de sites web anglophones s'y mettent) bien que le customizer existe depuis la version WordPress 3.4. A ce jour, on peut considérer qu'il a déjà bien évolué même s'il n'est pas un outil mature.

Il faut remarquer qu'il existe également une API JavaScript en parallèle mise à disposition par le "customizer" avec de bons tutoriels ici ou là, ce qui le rend très efficace.

En addition de cette API JavaScript, les créateurs de sites web ont aussi la possibilité de réaliser des "custom controls" avec des templates Underscore JS.

On peut aussi noter que la documentation proposée à la communauté par WordPress est assez succincte à ce jour, les développeurs web ont donc la nécessité d'étudier le code en détail !

Quelques types de champs efficaces sont proposés nativement, la documentation de l'API les présente brièvement, cependant ils limitent les possibilités de personnalisations avancées que l'on peut trouver ailleurs sur de nombreux formulaires servant à de la configuration.

Heureusement l'API du "customizer" est étudiée pour que les codeurs puissent s'exprimer et adapter celui-ci à leurs besoins et objectifs.

C'est à ce niveau qu'intervient Kirki en proposant des composants d'interface variés visible sur cette page, dit "user friendly" (facilitant l'expérience utilisateur), et très pratiques pour contrôler l'apparence et le contenu de son site web. Le "customizer" de WordPress, est de fait, véritablement amélioré et ses capacités sont accrues.

La librairie proposée par Kirki a pour but de rendre plus aisée l'utilisation des "custom controls" tout en respectant au maximum les bases de l'API.

Kirki est disponible sous forme de plugin et peut aussi être intégré directement à un thème pour les besoins des développeurs et intégrateurs web.

Avec Kirki, il est davantage question de l'API PHP du "customizer", adaptée par ce dernier pour accélérer le déploiement de l'interface.
Bien sûr, étant donné l'apparence des contrôles de la librairie, du JavaScript et des CSS3 rendent le rendu très soigné !

Le plugin WordPress Kirki est disponible sur wordpress.org.

Des ressources plus générales sur le "customizer" sont présentes ici.

Cet article Kirki, la boîte à outils pour le « customizer » de WordPress est apparu en premier sur DOTPROGS.

Fonctions et usages JavaScript

La notion de fonction "auto-exécutée"

Cet article peut sembler simpliste, mais il apparaît utile de connaître les principales possibilités de déclarer une fonction en JavaScript.
Personnellement, il m'arrive de produire du Javascript ponctuellement pour des besoins simples, je pense que c'est toujours constructif de s'interroger sur les bases de ce langage, l'objectif est avant tout de mieux comprendre ce que l'on écrit en JavaScript.

La tentation est souvent grande de bidouiller du code qui fonctionne malgré tout, mais c'est parfois bon aussi de s'arrêter pour faire le point sur de "modestes" notions.

Loin de moi l'idée, de faire de ce post, un exposé hasardeux sur les fonctions en JavaScript. Il faut bien plus que quelques lignes pour faire le tour du sujet, par contre, je suis parti de la notion de fonction en JavaScript pour mieux comprendre de quelle manière les usages actuels évoluent.

Petit tour d'horizon concernant les fonctions en JS pour arriver au sujet :
- La fonction déclarative (déclaration classique voire basique)

function hello() {
    console.log(hello.name); //affiche hello  
}
hello();

- L'expression de fonction anonyme

var myFunction = function() {
    console.log('myFunction called');
};
myFunction(); //affiche myFunction called

- L'expression de fonction nominative

var myFunction = function hello() {
    console.log(hello.name);
};
myFunction(); //affiche hello
console.log(myFunction.name); //affiche hello

- La méthode d'objet

//déclaration d'une fonction qui est un objet
var hello = function hello() {
};
//déclaration d'une méthode de l'objet
hello.myMethod = function() {
    console.log(this.name);
};
//appel
hello.myMethod(); //affiche hello

- L'expression de fonction immédiatement invoquée (IIFE pour Immediatly Invoked Function Expression)

var myFunction = function hello() {
    console.log(hello.name); //affiche hello
}();
console.log(myFunction); //affiche undefined

- L'expression de fonction immédiatement invoquée évaluée sans variable

// écriture 1
(function hello() {
    console.log(hello.name); //affiche hello
})();

ou

// écriture 2
(function hello() {
     console.log(hello.name); //affiche hello
}());

- Un exemple avec des arguments :

// écriture 1
(function hello(argument1, argument2) {
    console.log(hello.name); //affiche hello
    console.log(argument2); //affiche 1
})('test', 1);

- L'instanciation de fonction avec constructeur "Function"

var hello = new Function('a', 'b', 'return a+b;');
console.log(hello(2, 3)); //affiche 5

- Avec l'écriture "Arrow function" ES6 (plusieurs variantes de déclaration existent selon le nombre d'arguments !) :

((argument1, argument2) => {
    //votre script
})('test', 1);

Une pratique désormais répandue est d'utiliser l'IIFE pour structurer et surtout encapsuler voire "protéger ses scripts" au sein de la fonction avec la notion de "scope" (contexte) local à lui opposer au scope global (l'objet "window" du navigateur) : voici un très bon article qui présente l'IIFE comme une bonne approche.

La notion de programmation en objet JavaScript en utilisant une IIFE est abordée avec humour ici.

Pour aller plus loin et comprendre comment travaillent finalement les "spécialistes" du JavaScript, il est désormais question de concept modulaire, et là ça devient assez technique avec les approches du moment !

L'objectif de cet article est finalement d'y voir plus clair et comprendre quels sont les bons usages du JavaScript à l'heure actuelle et pointer le fait que l'IIFE (fonction "auto-exécutée" pour faire court) répond à des besoins bien spécifiques pour structurer son code.

Enfin un témoignage assez sympa (en anglais) qui montre bien que JavaScript est vraiment une jungle et qu'il faut en faire une compétence particulière pour rester dans les "rails" comme beaucoup d'autres domaines ...

Cet article Fonction en JavaScript, « IIFE », et usage dit professionnel … est apparu en premier sur DOTPROGS.