DEV Community: Aymeric Ratinaud

[Boost]

Aymeric Ratinaud — Fri, 23 May 2025 17:00:35 +0000

Aymeric Ratinaud

May 20 '25

A new playground for creatives between Tumblr and CodePen 🌊

#webdev #css #website #programming

Comments 5

2 min read

A new playground for creatives between Tumblr and CodePen 🌊

Aymeric Ratinaud — Tue, 20 May 2025 13:51:06 +0000

I wanted to present an idea I had because I'm a fan of #css and I wondered what I could do with all the images I had on my computer. So I thought of creating this, a way of prototyping / presenting collections of images easily and quickly. (Soon accessible on your react projects thanks to the api).
its still working progress 😅

The site is designed to be a creative hub, enabling creators of all levels to bring their artistic vision to life and share it with the world.

More features to come, but for now here's a sneak preview

Free plan (Creator Starter):

Create visual collections
Up to 5 collections
500MB upload per week
Instant sharing of creations
URLs in {username}/{collection name} format
Creative freedom with unlimited customization options
Presentation of creations in professional galleries
Smooth workflow on all devices
Integration with your favorite creative tools

how to create a collection

go to upload

select files you want to add

Create "flowers" collection

now its on the website

click “show public collection” to go to the editor

click on “edit” in the top right-hand corner

feel free to edit HTML or CSS

now you can share your collection!

blankpage.space/app/explore is a platform for designers to showcase, organize and share their digital creations.

Future features:

The Pro plan is currently under development and will be available soon.
A waiting list has been set up to notify you of the launch.

Get a free landing-page template now! 📈

Aymeric Ratinaud — Thu, 17 Apr 2025 11:28:43 +0000

⏳ Available for free until Saturday only!

Are you building a SaaS, an app, a startup idea, or a digital product? Then you probably know how crucial a well-designed landing page is for your first impression. But designing from scratch is time-consuming and sometimes... just not fun.

That’s why I created a free Tailwind CSS + React landing page template that you can clone and use right away.

👉 But hurry — it’s free only until this Saturday!

✅ What’s included?

This template is fully responsive and made for modern web projects. It includes:

Header – clean navbar with CTA
Hero Section – bold headline and visual hook
Features Section – breakdown of key benefits
Large Features – highlight standout functionality
Pricing Section – clear, trustworthy plans
Problems and Solution – your product as the answer
Social Proof – client logos or press mentions
Testimonial Section – user quotes that convert
Waiting List CTA – email capture form
FAQ – remove doubts, increase conversions
Footer – neat layout with links and credits

🔗 Code

Download the full source code here:

👉 Download

💡 This will be removed after Saturday, so don’t wait.

🛠️ Built with:

React 18+ (functional components & hooks)
Tailwind CSS 3+
Clean structure, perfect for rapid prototyping or production
Easy to plug your own content in

💡 Why I built this?

I kept rebuilding landing pages for my own side projects, MVPs, and startup ideas. So I built one that I’m actually happy with — and I’m sharing it so you can save time too.

🔔 Want more?

I'm planning more free + premium templates soon (dashboards, auth pages, etc).

Follow me here on Dev.to, GitHub, or Twitter so you don’t miss it!

🙌 Feedback is welcome!

Found a bug? Got ideas? Want to contribute? Feel free to drop a comment below 👇

⏳ This freebie ends Saturday. Grab it now and launch faster!

Explorer toutes les fonctionnalités de console en JavaScript

Aymeric Ratinaud — Thu, 03 Oct 2024 12:56:17 +0000

Voici un article prêt à être publié sur Dev.to avec les exemples console en JavaScript, structuré et formaté pour une bonne lecture :

Explorer toutes les fonctionnalités de `console` en JavaScript

JavaScript est un langage puissant pour le développement web, mais il peut être parfois difficile de déboguer votre code efficacement. Heureusement, la fonction console offre de nombreuses méthodes pratiques pour vous aider à inspecter, diagnostiquer et surveiller le comportement de votre application.

Dans cet article, nous allons explorer toutes les variantes de console disponibles, en détaillant comment et quand les utiliser avec des exemples clairs.

1. `console.log()`

C'est la méthode la plus utilisée de la famille console. Elle affiche des messages dans la console, souvent utilisés pour suivre l'exécution générale de votre programme.

console.log("Message général");

2. `console.error()`

Cette méthode est utilisée pour signaler des erreurs dans la console. Les messages d'erreur apparaissent généralement en rouge dans la console des navigateurs.

console.error("Erreur détectée !");

3. `console.warn()`

console.warn() est utile pour afficher des avertissements. Les messages apparaissent en jaune dans la console, ce qui attire l'attention sans indiquer une erreur grave.

console.warn("Attention !");

4. `console.info()`

Bien que similaire à console.log(), la méthode console.info() est utilisée pour indiquer des informations importantes.

console.info("Information importante");

5. `console.debug()`

console.debug() est destinée aux messages de débogage. Ces messages peuvent parfois être masqués par défaut dans certains environnements, mais ils sont parfaits pour un débogage approfondi.

console.debug("Message de débogage");

6. `console.table()`

Une fonctionnalité très utile pour afficher des objets ou des tableaux sous forme de tableau (grid) dans la console. Parfait pour visualiser des données structurées.

console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);

7. `console.dir()`

Affiche une représentation interactive et inspectable d'un objet, permettant de voir ses propriétés de manière plus détaillée.

console.dir(document.body);

8. `console.time()` et `console.timeEnd()`

Ces méthodes permettent de mesurer le temps d'exécution entre les deux appels. Très utile pour tester les performances d'une partie de votre code.

console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Simulation d'une tâche longue
console.timeEnd("chrono");

9. `console.group()` et `console.groupEnd()`

Ces méthodes permettent de regrouper plusieurs messages dans la console, formant une hiérarchie facile à développer ou réduire.

console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();

10. `console.groupCollapsed()`

Similaire à console.group(), mais le groupe est réduit par défaut.

console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();

11. `console.trace()`

Si vous voulez voir une trace complète de la pile d'appels (call stack) qui a mené à l'endroit où le code est exécuté, utilisez console.trace().

function functionOne() {
    functionTwo();
}
function functionTwo() {
    console.trace("Trace de la pile");
}
functionOne();

12. `console.assert()`

Cette méthode affiche un message uniquement si une condition donnée est fausse. Elle est idéale pour valider des hypothèses pendant le développement.

console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");

13. `console.clear()`

Utilisez cette méthode pour effacer la console. Pratique pour nettoyer un environnement encombré.

console.clear(); // Efface la console

14. `console.count()` et `console.countReset()`

Ces méthodes comptent le nombre de fois qu'un certain label a été appelé, et permettent de réinitialiser le compteur avec console.countReset().

console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");

15. `console.memory`

Sur certains navigateurs (comme Chrome), vous pouvez utiliser console.memory pour afficher des informations relatives à la gestion de la mémoire.

console.log(console.memory);

Exemple combiné

Voici un exemple plus complet qui regroupe plusieurs des méthodes console mentionnées plus haut pour vous montrer leur utilité dans une situation plus complexe.

console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
    console.log(`Itération : ${i}`);
    if (i === 1) {
        console.warn("Attention à l'itération 1");
    }
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {} 
console.timeEnd("Temps d'exécution");

Conclusion

La famille des méthodes console en JavaScript est beaucoup plus vaste que la simple méthode console.log(). En comprenant et en utilisant ces différentes fonctionnalités, vous pourrez améliorer le débogage de votre code et obtenir des informations précieuses pendant le développement.

N'hésitez pas à utiliser ces méthodes dans vos projets, et amusez-vous à explorer ce qu'elles peuvent vous offrir !

Vous pouvez copier et utiliser ce bloc de code dans vos propres projets pour découvrir en profondeur la puissance de console. 😄

// console.log() : Affiche un message général
console.log("Message général");

// console.error() : Affiche un message d'erreur
console.error("Erreur détectée !");

// console.warn() : Affiche un avertissement
console.warn("Attention !");

// console.info() : Affiche des informations
console.info("Information importante");

// console.debug() : Affiche un message de débogage (souvent masqué par défaut)
console.debug("Message de débogage");

// console.table() : Affiche un tableau de données dans la console
console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);

// console.dir() : Affiche une représentation interactive d'un objet
console.dir(document.body);

// console.time() et console.timeEnd() : Chronomètre pour mesurer le temps d'exécution
console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Code simulant une tâche longue
console.timeEnd("chrono");

// console.group() et console.groupEnd() : Groupe les messages dans la console
console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();

// console.groupCollapsed() : Groupe réduit par défaut
console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();

// console.trace() : Affiche une trace de la pile d'appels
function functionOne() {
    functionTwo();
}
function functionTwo() {
    console.trace("Trace de la pile");
}
functionOne();

// console.assert() : Affiche un message uniquement si l'assertion est fausse
console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");

// console.clear() : Efface la console
// console.clear(); // Décommentez cette ligne pour effacer la console

// console.count() et console.countReset() : Comptabilise le nombre d'appels avec une étiquette
console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");

// console.memory : Affiche des informations sur la mémoire utilisée (fonctionne dans certains environnements)
console.log(console.memory);

// Exemple combiné de plusieurs fonctions console :
console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
    console.log(`Itération : ${i}`);
    if (i === 1) {
        console.warn("Attention à l'itération 1");
    }
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {} 
console.timeEnd("Temps d'exécution");

Merci pour la lecture !

Vous avez des questions ou des suggestions ? Laissez un commentaire ci-dessous, ou partagez d'autres astuces console que vous utilisez dans vos projets !

DiscriminatorMap de Doctrine avec Api-platform

Aymeric Ratinaud — Fri, 05 Jul 2024 14:40:25 +0000

Le DiscriminatorMap de Doctrine permet une gestion efficace des entités héritées.
Nous allons prendre l'exemple simple d'une classe Vehicle pour créer deux classes qui vont en hériter : Bike et Car
qui ont des attributs différents mais auront les mêmes que Vehicle.
Avec Api-platform, on pourra faire un GET /vehicles pour avoir tous les vehicules
GET bikes pour tous les bikes et GET /cars

<?php

namespace App\Entity;

use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiResource;
use App\Repository\VehicleRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: VehicleRepository::class)]
#[ORM\InheritanceType('JOINED')]
#[ORM\DiscriminatorColumn(name: 'discr', type: 'string')]
#[ORM\DiscriminatorMap([
    'car' => Car::class,
    'bike' => Bike::class
])]
#[ApiResource]
#[ApiFilter(OrderFilter::class)]
class Vehicle
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    #[ApiFilter(SearchFilter::class, strategy: 'partial')]
    private ?string $brand = null;

    #[ORM\Column]
    private ?\DateTimeImmutable $createdAt = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getBrand(): ?string
    {
        return $this->brand;
    }

    public function setBrand(string $brand): static
    {
        $this->brand = $brand;

        return $this;
    }

    public function getCreatedAt(): ?\DateTimeImmutable
    {
        return $this->createdAt;
    }

    public function setCreatedAt(\DateTimeImmutable $createdAt): static
    {
        $this->createdAt = $createdAt;

        return $this;
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiResource;
use App\Repository\BikeRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: BikeRepository::class)]
#[ApiResource]
#[ApiFilter(OrderFilter::class)]
class Bike extends Vehicle
{
    #[ORM\Column]
    private ?bool $hasCarrier = null;

    public function hasCarrier(): ?bool
    {
        return $this->hasCarrier;
    }

    public function setHasCarrier(bool $hasCarrier): static
    {
        $this->hasCarrier = $hasCarrier;

        return $this;
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiResource;
use App\Repository\CarRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: CarRepository::class)]
#[ApiResource]
#[ApiFilter(OrderFilter::class)]
class Car extends Vehicle
{
    #[ORM\Column]
    private ?int $numberOfDoors = null;

    public function getNumberOfDoors(): ?int
    {
        return $this->numberOfDoors;
    }

    public function setNumberOfDoors(int $numberOfDoors): static
    {
        $this->numberOfDoors = $numberOfDoors;

        return $this;
    }
}

Tout ce fait avec

#[ORM\InheritanceType('JOINED')]
#[ORM\DiscriminatorColumn(name: 'discr', type: 'string')]
#[ORM\DiscriminatorMap([
    'car' => Car::class,
    'bike' => Bike::class
])]

InheritanceType peut également être SINGLE_TABLE ce qui signifie que vous n'aurez qu'une seule table pour toutes vos entités

N'oubliez pas également sur les autres classes de rajouter extends Vehicle

Fusée 🚀

Api-platform : filtrer les résultats uniquement sur l'utilisateur connecté

Aymeric Ratinaud — Sun, 23 Jun 2024 09:52:46 +0000

Imaginez avoir dans votre projet plusieurs entités avec la relation author comme par exemple ces deux entités suivantes :

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\CourierFavoriteRepository;
use Doctrine\ORM\Mapping as ORM; 

#[ORM\Entity(repositoryClass: CourierFavoriteRepository::class)]
#[ApiResource()]
class Book
{ 
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\ManyToOne]
    #[ORM\JoinColumn(nullable: false)] 
    private ?User $author = null; 

    #[ORM\Column(length: 255)] 
    private ?string $title = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getAuthor(): ?User
    {
        return $this->author;
    }

    public function setAuthor(?User $author): static
    {
        $this->author = $author;

        return $this;
    } 

    public function getTitle(): ?string
    {
        return $this->title;
    }

    public function setTitle(string $title): self
    {
        $this->title = $title;

        return $this;
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\TodoRepository; 
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: TodoRepository::class)]
#[ApiResource()]
class Todo
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\ManyToOne]
    #[ORM\JoinColumn(nullable: false)]
    private ?User $author = null;

    #[ORM\Column(type: Types::TEXT)]
    private ?string $content = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getAuthor(): ?User
    {
        return $this->author;
    }

    public function setAuthor(?User $author): static
    {
        $this->author = $author;

        return $this;
    }

    public function getContent(): ?string
    {
        return $this->content;
    }

    public function setContent(string $content): static
    {
        $this->content = $content;

        return $this;
    }
}

Nous voulons verrouiller les résultats des GET item et collection uniquement sur l'user connecté.

Nous allons créer une interface que nous implémenterons sur nos entités

<?php

namespace App\Entity;

interface CurrentUserIsAuthorInterface
{
    public function setAuthor(?User $author): static;
}

Maitenant nous allons faire une DoctrineExtension qui va ajouter la contrainte where dans le QueryBuilder sur l'utilisateur connecté.

<?php

namespace App\DoctrineExtension;

use ApiPlatform\Doctrine\Orm\Extension\QueryCollectionExtensionInterface;
use ApiPlatform\Doctrine\Orm\Extension\QueryItemExtensionInterface;
use ApiPlatform\Doctrine\Orm\Util\QueryNameGeneratorInterface;
use ApiPlatform\Metadata\Operation;
use App\Entity\CurrentUserIsAuthorInterface;
use Doctrine\ORM\QueryBuilder;
use Symfony\Bundle\SecurityBundle\Security;

class CurrentUserIsAuthorExtension implements QueryCollectionExtensionInterface, QueryItemExtensionInterface
{
    public function __construct(
        private Security $security,
    ) {
    }

    public function applyToCollection(QueryBuilder $queryBuilder, QueryNameGeneratorInterface $queryNameGenerator, string $resourceClass, ?Operation $operation = null, array $context = []): void
    {
        $this->currentUserIsAuthor($resourceClass, $queryBuilder);
    }

    public function applyToItem(QueryBuilder $queryBuilder, QueryNameGeneratorInterface $queryNameGenerator, string $resourceClass, array $identifiers, ?Operation $operation = null, array $context = []): void
    {
        $this->currentUserIsAuthor($resourceClass, $queryBuilder);
    }

    /**
     * @param string $resourceClass
     * @param QueryBuilder $queryBuilder
     * @return void
     * @throws ReflectionException
     */
    public function currentUserIsAuthor(string $resourceClass, QueryBuilder $queryBuilder): void
    {
        $reflectionClass = new \ReflectionClass($resourceClass);
        if ($reflectionClass->implementsInterface(CurrentUserIsAuthorInterface::class)) {
            $alias = $queryBuilder->getRootAliases()[0];
            $queryBuilder->andWhere("$alias.author = :current_author")
                ->setParameter('current_author', $this->security->getUser()->getId());
        }
    }
}

Maintenant il nous reste à implémenter notre interface sur nos entités :

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\CourierFavoriteRepository;
use Doctrine\ORM\Mapping as ORM; 

#[ORM\Entity(repositoryClass: CourierFavoriteRepository::class)]
#[ApiResource()]
class Book implements CurrentUserIsAuthorInterface
{ 
    // ...

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\TodoRepository; 
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: TodoRepository::class)]
#[ApiResource()]
class Todo implements CurrentUserIsAuthorInterface
{
    // ...

Et c'est tout. Pour chaque GET item ou collection vous aurez uniquement les entrées avec l'utilisateurs qui est connecté 🚀

Lisez aussi "comment enregistrer automatiquement l'utilisateur connecté" : https://dev.to/aratinau/automatisons-lenregistrement-du-user-sur-nimporte-quelle-entite-4f68

Automatisons l'enregistrement du User sur n'importe quelle entité [Symfony]

Aymeric Ratinaud — Mon, 17 Jun 2024 19:19:51 +0000

Admettons que nous ayons des entités avec l'attribut author, nous allons voir comment factoriser la logique en une ligne pour enregistrer l'utilisateur automatiquement.

Prenons l'exemple de cette entité qui contient l'attribut author.

<?php

namespace App\Entity;

use App\Repository\CategoryRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: CategoryRepository::class)]
class Category
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    private ?string $name = null; 

    #[ORM\ManyToOne]
    #[ORM\JoinColumn(nullable: false)]
    private ?User $author = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getName(): ?string
    {
        return $this->name;
    }

    public function setName(string $name): static
    {
        $this->name = $name;

        return $this;
    } 

    public function getAuthor(): ?User
    {
        return $this->author;
    }

    public function setAuthor(?User $author): static
    {
        $this->author = $author;

        return $this;
    }
}

Dans notre projet nous avons également une dizaine d'entités qui contient également l'attribut author.

La premiere solution serait de faire un controller ou un DoctrineListener pour chaque entité. Comme celui-là par exemple :

<?php

namespace App\DoctrineListener;

use App\Entity\Category;
use Doctrine\Bundle\DoctrineBundle\Attribute\AsEntityListener;
use Doctrine\ORM\Events;
use Doctrine\Persistence\Event\LifecycleEventArgs;

#[AsEntityListener(event: Events::prePersist, entity: Category::class)]
class CategoryDoctrineListener
{
    public function __construct(
        private Security $security,
    ) {
    }

    public function prePersist(Category $category, LifecycleEventArgs $event)
    {
        $user = $this->security->getUser();
        $entity->setAuthor($user);
    }
}

Au lieu de ça nous allons garder la logique métier de CategoryDoctrineListener et l'adapter à toutes les entités qui contiennent l'attribut author

Pour cela nous allons faire une interface

<?php

namespace App\Entity;

interface AuthorInterface
{
    public function setAuthor(?User $author): static;
}

Ainsi nous allons l'implementer sur toutes les entités qui ont la méthode setAuthor

Exemple avec Catégory

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\CategoryRepository;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Serializer\Attribute\Groups;

#[ORM\Entity(repositoryClass: CategoryRepository::class)]
#[ApiResource(paginationEnabled: false)]
class Category implements AuthorInterface
// ...

Maintenant nous pouvons créer un DoctrineListener qui regarde si l'entité implemente AuthorInterface en utilisant la réflexion comme suit

<?php

namespace App\DoctrineListener;

use App\Entity\AuthorInterface;
use Doctrine\Bundle\DoctrineBundle\Attribute\AsDoctrineListener;
use Doctrine\ORM\Event\PrePersistEventArgs;
use Symfony\Bundle\SecurityBundle\Security;

#[AsDoctrineListener('prePersist')]
class AttachAuthorDoctrineListener
{
    public function __construct(
        private Security $security,
    ) {
    }

    public function prePersist(PrePersistEventArgs $event): void
    {
        $entity = $event->getObject();
        $reflectionClass = new \ReflectionClass($entity);
        if (!$reflectionClass->implementsInterface(AuthorInterface::class)) {
            return;
        }

        $user = $this->security->getUser();
        $entity->setAuthor($user);
    }
}

Et c'est tout, maintenant vous n'aurez qu'à ajouter implements AuthorInterface sur les entités qui ont besoin d'enregistrer l'auteur 🚀

Lisez aussi "comment filtrer les GET uniquement sur l'utilisateur connecté" https://dev.to/aratinau/api-platform-filtrer-les-resultats-uniquement-sur-lutilisateur-connecte-1fp6

Manage your GET query parameters with a react hook

Aymeric Ratinaud — Wed, 05 Jun 2024 16:15:55 +0000

For example, if I have this query /api/couriers?status[]=READ&status[]=SENT&status[]=UNREAD&urgency.value[]=0&urgency.value[]=25&importance.value[]=50&importance.value[]=25&importance.value[]=0&category.id[]=/api/categories/17&category.id[]=/api/categories/10&direction=incoming

And I want to remove the "importance", add another filter I find this solution:

import { useState } from 'react';

const useQueryParams = (initialState = {}) => {
  const [state, setState] = useState(initialState);

  const setProperty = (key, value) => {
    setState(prevState => ({
      ...prevState,
      [key]: value,
    }));
  };

  const addElement = (key, element) => {
    setState(prevState => {
      if (!prevState.hasOwnProperty(key)) {
        return {
          ...prevState,
          [key]: [element],
        };
      }

      if (!prevState[key].includes(element)) {
        return {
          ...prevState,
          [key]: [...prevState[key], element],
        };
      }

      return prevState;
    });
  }

  const removeElement = (key, element) => {
    setState(prevState => {
      const newArray = (prevState[key] || []).filter(item => item !== element);
      if (newArray.length === 0) {
        delete prevState[key]
      } else {
        return {
          ...prevState,
          [key]: newArray,
        };
      }
    });
  };

  const clear = () => {
    setState({})
  }

  return { state, setProperty, addElement, removeElement, clear };
};

export default useQueryParams;

Api-platform3 Boilerplate

Aymeric Ratinaud — Wed, 06 Mar 2024 13:55:44 +0000

I made a boilerplate available at this address which includes

symfony
api-platform
doctrine (of course)
fixtures and factory
codeception for functionnals tests

There is one entity Todo

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\TodoRepository;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: TodoRepository::class)]
#[ApiResource]
class Todo
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(type: Types::TEXT)]
    private ?string $description = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getDescription(): ?string
    {
        return $this->description;
    }

    public function setDescription(string $description): static
    {
        $this->description = $description;

        return $this;
    }
}

How tests the GET of the collection :

<?php


namespace App\tests\Api\todos;

use App\Factory\TodoFactory;
use App\Tests\Support\ApiTester;
use App\Tests\Support\Step\Api\Anonymous;

class getTodosCest
{
    public function _before(ApiTester $I)
    {
    }

    /**
     * @param Anonymous $I
     * @return void
     */
    public function tryToGetAllTodosAsAnonymous(Anonymous $I)
    {
        TodoFactory::createMany(30);

        $I->am('an anonymous user');
        $I->wantTo('list all todos');

        $I->haveHttpHeader("accept", "application/ld+json");
        $I->haveHttpHeader("Content-Type", "application/json");
        $I->sendGet('todos');

        $I->seeResponseCodeIs(\Codeception\Util\HttpCode::OK);
        $I->seeResponseIsJson();
        $I->seeResponseContainsJson([
            "@context" => "/api/contexts/Todo",
            "@type" => "hydra:Collection",
            "hydra:totalItems" => 30
        ]);
    }
}

Do you know DoctrineListener?

Aymeric Ratinaud — Sat, 10 Feb 2024 17:30:30 +0000

Imagine you had to monitor an entity to log when it was created or updated

Create a Note entity

<?php

namespace App\Entity;

use App\Repository\NoteRepository;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: NoteRepository::class)]
class Note
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(type: Types::TEXT)]
    private ?string $content = null;

    #[ORM\Column(length: 255)]
    private ?string $log = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getContent(): ?string
    {
        return $this->content;
    }

    public function setContent(string $content): static
    {
        $this->content = $content;

        return $this;
    }

    public function getLog(): ?string
    {
        return $this->log;
    }

    public function setLog(string $log): static
    {
        $this->log = $log;

        return $this;
    }
}

Then you can create a DoctrineListener to log when its created (persist) or updated

<?php

namespace App\DoctrineListener;

use App\Entity\Conference;
use App\Entity\Note;
use Doctrine\Bundle\DoctrineBundle\Attribute\AsEntityListener;
use Doctrine\Persistence\Event\LifecycleEventArgs;
use Doctrine\ORM\Events;


#[AsEntityListener(event: Events::prePersist, entity: Note::class)]
#[AsEntityListener(event: Events::preUpdate, entity: Note::class)]
class NoteEntityListener
{
    public function prePersist(Note $note, LifecycleEventArgs $event)
    {
        $note->setLog('This is from prePersist');
    }

    public function preUpdate(Note $note, LifecycleEventArgs $event)
    {
        $note->setLog('This is from preUpdate');
    }
}

That's all !
The doctrinelistener will be called at each persist or update.

Here is the complete list of events:

preRemove
postRemove
prePersist
postPersist
preUpdate
postUpdate
postLoad
preFlush
onFlush
postFlush
onClear

You have a demo at this address https://github.com/aratinau/api-platform-doctrine

What are your favorite underground resources for inspiration? Here 6. And what are yours?

Aymeric Ratinaud — Sat, 27 Jan 2024 21:42:08 +0000

codegrid

I personally like the codegrid channel, which shows how to make beautiful and simple sites quickly.

codrops

I hope you know codrops, which is a reference and offers lots of tips and resources.

awwwards

Of course the well-known awwwards

landingfolio

Here you can find landing page designs, templates and components

land-book

Here a website design gallery

freefrontend

Here you can find HTML, CSS and JavaScript code examples

What are your favorite underground resources for inspiration? Here 6

Aymeric Ratinaud — Sat, 27 Jan 2024 21:42:07 +0000

codegrid

I personally like the codegrid channel, which shows how to make beautiful and simple sites quickly.

codrops

I hope you know codrops, which is a reference and offers lots of tips and resources.

awwwards

Of course the well-known awwwards

landingfolio

Here you can find landing page designs, templates and components

land-book

Here a website design gallery

freefrontend

Here you can find HTML, CSS and JavaScript code examples

DEV Community: Aymeric Ratinaud

[Boost]

A new playground for creatives between Tumblr and CodePen 🌊

A new playground for creatives between Tumblr and CodePen 🌊

how to create a collection

Get a free landing-page template now! 📈

✅ What’s included?

🔗 Code

🛠️ Built with:

💡 Why I built this?

🔔 Want more?

🙌 Feedback is welcome!

Explorer toutes les fonctionnalités de console en JavaScript

Explorer toutes les fonctionnalités de console en JavaScript

1. console.log()

2. console.error()

3. console.warn()

4. console.info()

5. console.debug()

6. console.table()

7. console.dir()

8. console.time() et console.timeEnd()

9. console.group() et console.groupEnd()

10. console.groupCollapsed()

11. console.trace()

12. console.assert()

13. console.clear()

14. console.count() et console.countReset()

15. console.memory

Exemple combiné

Conclusion

DiscriminatorMap de Doctrine avec Api-platform

Api-platform : filtrer les résultats uniquement sur l'utilisateur connecté

Automatisons l'enregistrement du User sur n'importe quelle entité [Symfony]

Manage your GET query parameters with a react hook

Api-platform3 Boilerplate

Do you know DoctrineListener?

What are your favorite underground resources for inspiration? Here 6. And what are yours?

codegrid

codrops

awwwards

landingfolio

land-book

freefrontend

What are your favorite underground resources for inspiration? Here 6

codegrid

codrops

awwwards

landingfolio

land-book

freefrontend

Explorer toutes les fonctionnalités de `console` en JavaScript

1. `console.log()`

2. `console.error()`

3. `console.warn()`

4. `console.info()`

5. `console.debug()`

6. `console.table()`

7. `console.dir()`

8. `console.time()` et `console.timeEnd()`

9. `console.group()` et `console.groupEnd()`

10. `console.groupCollapsed()`

11. `console.trace()`

12. `console.assert()`

13. `console.clear()`

14. `console.count()` et `console.countReset()`

15. `console.memory`