Styleguide
Éléments de charte graphique et composants du site
Couleurs
Les couleurs du thème sont organisés en trois couples, avec une couleur principale (utilisée pour les fonds notamment) et son accent (utilisée pour les boutons) :
- FLOWER (principale) et ABYSS (accent),
- SUN (principale) et MIST (accent),
- LAGOON (principale) et GROUND (accent).
Les noms sont inventés et ne correspondent pas à des valeurs standards.
En plus de ça il existe deux couleurs techniques : light et dark.
FLOWER
FLOWERABYSS
ABYSSSUN
SUNMIST
MISTLAGOON
LAGOONGROUND
GROUNDLIGHT
LIGHTDARK
DARKPolices
Sur le site, il y a deux polices différentes :
- Rubik Regular, utilisée pour le texte de base,
- Roboto Slab Light pour les titres, les citations (composant Quote) et les noms de composants.
Layout
Contient les éléments structurels communs à toutes les pages du site.
Il inclut :
Back to top
Un bouton flottant pour remonter en haut de la page.
Row
Une section de page : un titre et un id optionnel et surtout du contenu.
Le composant peut accueillir optionellement une liste de mots-clés, affiché par une Badges list
Spécialisations
Le composant peut être encapsulé et pré-configuré en d'autres composants de la même échelle, plus spécialisés.
Pour l'instant, la seule spécialisation est PageHeader.
PageHeader
Affiche les titre et sous-titre de la page sous la forme d'une bannière, étendue sur l'intégralité de la largeur de la page.
Peut contenir les composants pré-réglés :
Un PageHeader tout simple
Juste le titre et le sous-titre
Quote
Met en valeur un texte et, si applicable, affiche son auteur et sa source.
Ceci est une simple citation.
Ceci est une citation avec auteur et source- Source optionnelle,Auteur optionnel
Project
Présente les grandes lignes d'un projet, avec : sa stack, sa date, son contenu.
Affiché dans le Carousel.
Titre du projet
full-stacktag 1tag 222 juin 2022
Articles list
Sur la page Blog, affiche la liste des articles du site.
gatsbynotionmodule npmstatikon26/09/2022
Gatsby x Notion : je créé le module NPM statikon
Dans la perspective de créer de nombreux sites statiques sur la stack Gatsby x Notion, j'ai pensé créer un module NPM pour contenir des composants et ...
Lire l'articledevblog sitemotifsgastby js04/07/2022
Refonte du site : nouveaux contenus et passage sur GatsbyJS
Accompagné de Tim Jeanmart, développeur web junior, je migre mon site internet professionnel vers Gatsby et mets à jour son contenu.
courtphilosophie du codelangagecommunicationtests05/04/2021
Le langage des spécifications
philosophie du codecode joyaurefactoringimpermanence des choses19/02/2021
Dans le code, rien est éternel
Parlons rapidement du code joyau avant d'aborder l'impermanence des choses que l'on crée, code inclus :P
rimarok.comdevopsCI/CDftp11/02/2021
dev.rimarok.com en déploiement continu
developer experienceréflexionsfutur04/02/2021
Visualisation d'une codebase complexe
motifs-jsrelease notesen27/01/2021
motifs-js : 0.4 et nouveau WEBSITE build (sitemap included)
roadmapopen-sourcerimarok.commotifs-jsimrok.frbazar.imrok.fr08/01/2021
Roadmap open-source #1
devnpmmotifs-js05/01/2021
motifs-js : Publier un module npm
Malgré un investissement initial de temps plus important, créer son propre module npm et le publier est la meilleure façon de partager son code entre ...
Lire l'article
Motifs list
Sur la page Motifs de conception, affiche la liste des articles du site.
| Nom du motif | Description | Synonymes |
|---|---|---|
| Entité | Quelque chose, un concept, une représentation, un individu ou une part d’un individu. | individu, chose, donnée |
| Ensemble | Groupe d’entités, défini par un (ou plusieurs) critère(s) et qui existe par discrimination de son extérieur. | groupe |
| Valeur | Contenu (retourné) d’une entité, à interpréter selon son type. | contenu |
| Propriété | Caractère d’une entité, pouvant être définie par un type, et pouvant porter ou non une valeur. | attribut, caractère, prop, property |
| Nom | Mot, ou groupe de mots, pas forcément unique, désignant une entité, parfois porteur de sens. | name |
| Variable | Associe un nom à une valeur variable. La valeur peut-être un nombre, un texte, une entité, un ensemble, une propriété de l’un ou l’autre, et bien plus encore. | var |
| Identifiant | Valeur unique (dans un contexte) permettant d’identifier une entité précisément. | id, identifier |
| Titre | Remplace le nom pour mettre en valeur, et éventuellement résumer, une entité (objet, page, section …). | title |
| Alias | Nom alternatif d’une entité, référence/proxy d’une valeur. | |
| Motif | Récurrence d’un caractère, ou d ’un groupe de caractères, dans un ensemble d’entités. | |
| Instance | Occurrence d’un motif dans une entité; dans le code, objet créé sur le modèle d’un type, d’une classe (qui l’aurait alors instancié). | |
| Type | Formalisation de la structure d’une entité par restriction de la valeur possible pour ses propriétés. | |
| Objet | Une entité conceptuelle porteuse de propriétés. | |
| Classe | Structure typée d’objets, incluant propriétés et fonctions (méthodes), ainsi qu’un (ou plusieurs) constructeur(s). | |
| Reference | Pas l’entité même, mais un pointeur/une redirection vers elle. | |
| Booléen | Une valeur binaire : vrai/faux, 1/0, oui/non. | |
| Nombre | Une valeur représentée par une quantité, pouvant ou non être entière. | |
| Chaîne de caractères | Une suite de caractères alphanumériques considérés comme une seule et même entité. | |
| Tableau | ||
| Étiquette | ||
| Énumération | ||
| Catégorie | ||
| Composant | ||
| Page | ||
| Fichier | ||
| Dossier | Ensemble nommé pouvant contenir des fichiers et d’autres dossiers. | |
| Contexte | Namespace, Portée, Scope, Périmètre | |
| Fonction | ||
| Fonction / Paramètre | ||
| Usine | Une fonction instanciant et retournant un objet sur la base d’un (ou plusieurs) type(s) donné(s). | Factory |
| Composant / Conteneur | Composant encapsulant d’autres composants. | |
| Unique | Valeur non répétée dans un contexte, ou entité identifiable individuellement par le biais de l’un (ou plusieurs) de ses attributs. | |
| Itération | ||
| Collection | table | |
| Filtre | Sélectionne les entités d’un ensemble qui répondent à certaines conditions. | |
| Ordre | Ordonnance les entités d’un ensemble en fonction de certaines propriétés. | Ordonnancement |
| Modèle de page | Template | |
| Agencement | Layout, Mise en page | |
| Url | ||
| Slug | ||
| Domaine | ||
| Site | ||
| Base de données | Fait persister les données sous forme de collections d’objets, plus ou moins typées et/ou relationnelles; et permet d’interagir avec. | database |
| Serveur | ||
| JS / Serveur | ||
| Client | ||
| UI | ||
| API | ||
| Authentification | ||
| API / Clé | ||
| Utilisateur | ||
| Permission | ||
| Rôle | ||
| Module | Dépendance, bibliothèque | |
| JS / Tableau / Map | ||
| JS / Map | ||
| JS / Set | ||
| Parenthèses | ||
| Généralisation et spécialisation | Un objet ou une classe sont dits plus génériques moins dotés ils sont en attributs. Spécialiser c’est restreindre la définition par ajouts d’attributs. | |
| Constante | Association d’un nom à une valeur immuable (par opposition aux variables). | |
| HTML / Balise | ||
| Incrément | ||
| Décrément | ||
| CSS / Selecteur | ||
| CSS / Règle | ||
| Thème | ||
| Variation | ||
| Get | ||
| JS / Export | ||
| JS / Reduce | ||
| JS / Promise | ||
| React / Composant | ||
| Déplier | ||
| Menu | ||
| Paramètre | ||
| Ou | || | |
| JS / Switch | ||
| JS / Opérateur ternnaire | condition ? result : alt | |
| Et | && | |
| Requête | ||
| AJAX | ||
| Langage | ||
| Jeton | Token | |
| Symbole | ||
| Négation | ||
| Node JS / Écrire un fichier | ||
| Composant UI / Carte | ||
| Environnement | ||
| Test | ||
| RIMAROK.com / Code-joyau | ||
| Déploiement | ||
| Automatisation du processus de déploiement | ||
| JS / Périmètre | Scope | |
| JS / Let | ||
| JS / Const | ||
| Cache | ||
| Archivage | ||
| Base de données / Jonction | ||
| Journal | Logs | |
| Historique | ||
| Supprimer | ||
| Modifier | ||
| Créer | ||
| JS / Try Catch | ||
| Erreur | ||
| JS / Destructuration | ||
| Memoisation | ||
| JS / Await | ||
| JS / Async | ||
| Version | ||
| Favori | ||
| Cron | Routine | |
| JS / Stricte égalité | ||
| React / Enfant | ||
| État | ||
| Git / Commit | ||
| Version | ||
| Git / Branche | ||
| Clé-valeur | ||
| Produit | ||
| Article | ||
| Portée | ||
| Set | ||
| Lot | Regroupement de plusieurs opérations en une, par exemple pour mettre à jour plusieurs entités en une requête. | Batch |
| Modulo |
Badges list
Affiche une liste inline de badges pilules.
La couleur des badges peut être paramétrée individuellement au besoin.
Badge 1Badge 2