Nouveau thème, nouvelle version !

Hey hey ! Voici enfin le premier thème complet du site duquel j’ai pu vous faire partager les avancées via notre série  et au passage, nous avons changé le nom du logo en « Epistol » en « EpiBlog » pour bien différencier avec le site non-blog.

Vous pouvez retrouver le code source du thème ici  : https://github.com/Epistol/EpiBlog-WP-Theme 

Sans transition, le blog va recevoir des articles petit à petit, notamment sur VueJS et Laravel, un projet de tchat couplé à du NoSQL qui va débuter et CDG qui est en finition.

En tout les cas, je vous souhaite de joyeuse fêtes de fin d’années !

via GIPHY

WTF : Monopoly

Je suis sûr que ni vous, ni moi, n’avait suivi (voir joué) à Monopoly depuis une paye (huehuehue) mais après quelques recherche pour noël, je suis tombé sur deux éditions qui me font franchement marrer : 

Une version tricheurs : 

Et une version … Fortnite, parce que Fortnite, c’est comme Martine :  Fortnite va à la plage, Fortnite fait ses vaccins, Fortnite joue au Monopoly : 

NB : Y’a des liens affiliés à Amazon, faut pas dec, Fortnite à suffisamment de thune x) 

Créer un thème (WP) en 2018 – 3/3

Cet article est la suite de l’épisode 2, qui s’axait sur la mise en page du thème et l’installation du design.

Suite et grosse fin de notre série sur le développement d’un thème simple pour WordPress : 

Notre thème majoritaire est conçu, on va s’attaquer à l’article « Sticky », celui qui reste en haut de la page sur une période définie, et qui sera pour moi un petit article dans la veine de Korben pour faire une mini news récapitulative de la semaine et d’autres trucs.

STICKY ARTICLE

LIRE LA SUITE « Créer un thème (WP) en 2018 – 3/3 »

Créer un thème (WP) en 2018 – 2/3

Cet article est la suite de l’épisode 1, qui s’axe sur la recherche d’inspiration et de définition des objectifs.

Après quelques heures de dessin et d’essais, voici mon résultat, à mi chemin entre low-res et high-res : 

En termes de couleurs, on s’en tiens à 3 pour ne pas perdre les utilisateurs, on essaye de rester dans la tendance avec du offset avec « l’oeuf » sur le #Recap, et le background un peu excentré sur le titre de l’article, sans oublié l’effet vague sur le pied de page.

Etape 4 : Le développement

Alors, et maintenant ? Il faut avoir son WordPress installé en local, je vais pas vous faire un tuto ici,  il en existe des TAS !

SUITE DE l’ARtICLE

Passer un Objet dans un composant VueJS [TIPS]

Bonsoir bonsoir, petite astuce pour ceux qui voudraient un jour passer un objet en tant qu’élément à afficher dans un composant VueJS (avec Laravel par exemple) : 

Si votre Objet est un objet simple, vous devez le formaliser en json, comme ici avec un json_encode simple : 

     <mini_recipe_list_element :recipe="{{json_encode($recette)}}"></mini_recipe_list_element>

Si jamais avec Laravel, votre Objet est issu d’une collection Eloquent, vous pouvez le sérialiser si ce n’est pas déjà fait : 

$user->toJson();

Et ensuite dans votre composant VueJS, il faut lui dire qu’on attend un objet en tant que prop  : 

props: {
			recipe: {
				type: Object,
				required: true
			}
		},

Et voilà 🙂 

Les pixel du style : NES.css

En flannant sur Github, je suis tombé sur un framework un peu fou : NES.css , une bibliothèque de style ayant un design rétro très largement inspiré de la NES : 

Lien Github : https://github.com/BcRikko/NES.css

Lien preview : https://bcrikko.github.io/NES.css/

Voilà, amusez-vous, ça reste une alpha/bêta assez cool, perso je pense que ça peut faire un easter-egg sympa pour CuisineDeGeek.

Desktop sci-fi

eDEX-UI est une application de bureau plein écran ressemblant à une interface d’ordinateur de science-fiction, fortement inspirée de DEX-UI et des effets de film TRON Legacy. Il exécute le shell de votre choix dans un terminal réel et affiche des informations en direct sur votre système. Il a été conçu pour être utilisé sur de grands écrans tactiles, mais il fonctionnera parfaitement sur un ordinateur de bureau standard, une tablette PC ou l’un de ces ordinateurs portables funky à 360 ° avec écrans tactiles.

Disponible sur Github: https://github.com/GitSquared/edex-ui 

L’idée – Créer un thème (WP) en 2018 – 1/3

Pour ce blog tout nouveau tout beau, il fallait que je recolle le thème au « personnal branding » Epistol, même si un peu délaissé depuis quelques temps, j’utilise le thème Lovecraft pour le moment qui fait un bon fallback pour l’instant.

Etape 1 : – Avoir une idée de thème

Avoir une idée de thème, c’est comme celle d’avoir un blog, c’est pas la partie la plus simple.  Que faire alors ? Plutôt horizontal ? Plutôt le contraire ? Sur un format 3/6/3 ? Ou un simple 3/9 ? Qu’est-ce que ça veut dire ? 

Si on veux créer le design d’un thème, on prend les références du marché actuel : Bootstrap et ses 12 colonnes se sont imposés dans le monde du design comme du développement depuis des années : il faut alors découper son site verticalement selon autant de colonne voulue.

Etape 1.bis : Trouver l’inspiration

Du coup sans trop d’idée, il vaut mieux aller voir ce qu’il se fait de mieux en terme de design et suivre les tendances de l’époque (tout en gardant ses propres goûts).

Voici quelques pistes pour celles et ceux qui en souhaiteraient (vous pouvez bien sûr proposer vos propres ressources en commentaire, j’affinerais la liste en conséquence) : 

On remarques plusieurs tendances : l' »offset » des éléments et du contenu, des titres avec des fonts assez grosses, des typos serifs qui ne sont plus combiné avec du sans-sérif et des bloc background qui se réalignent avec le contenu au fur et à mesure, ce qui contredit la tendance du premier point plus haut.

Etape 2 : Listing

Pour commencer le sketching, il faut définir le contenu du site et ainsi les placer à la vue de l’utilisateur sans jamais les perdre. C’est tout l’objectif du design :  le visuel au service du contenu.

Je commence ainsi un petit travail de listing : 

  • Page d’accueil : 
    • Articles
    • Menu avec liens importants (accueil, catégories, cv, contact, réseaux)
  • Catégories
  • Articles (complets et liens « en passant »)
  • // Sidebar (déjà présente)
  • Contact

Le nombre d’article est limité à 10 pour ne pas surcharger la page, puisque chaque article sera affiché en entier (jusqu’à une certaine longueur, mais en général, en entier).

Chaque article comporte :

  • Un titre
  • une image en avant
  • une date de publication et de modification
  • le contenu
  • les sources
  • partage réseaux
  • commentaires
  • tags
  • catégorie

Etape 3 – Sketching

Pour entamer un sketching, sachant que ce n’est sans doute pas mon point fort, je ne peux que vous conseiller de vous renseigner mais de mon expérience personnelle : 

  • soit vous commencez à sketcher sur papier
  • soit directement en qualité basse sur un logiciel dédié

Puisque je ne sais pas du tout dessiner, encore moins sketcher sur papier, je part sur la deuxième option avec Adobe XD (Sketch étant réservé à iOS).

Pour faire mon choix de couleur rapide, j’utilise Coolors qui me génère une palette restreinte de couleur (j’incorpore celle de mon logo en premier puis génère le tout) et obtiens ceci au bout de plusieurs essai : 


(Et une palette scss pour plus tard dans notre thème WordPress.)

Dans Adobe XD, chargeons la librairie « Kit de prototypage » pour se donner des éléments de base pour faire notre low-res prototype, que je vous propose de retrouver dans le prochain article et ainsi réaliser la version « high-resolution » dans la foulée.

Premier article !

Bienvenue sur mon blog, mon petit espace, mon site de ressources et d’expérimentations.

Ce blog fait suite à mon feu précédent blog, epistol.info que je ne maintenait plus pour 2 raisons : 

  • je ne me retrouvais plus dans ma propre ligne éditoriale, qui avais commencé à l’époque comme un « site d’information » mais l’information, ça demande beaucoup d’investissement / humains, dans la mouvance de mon autre site antérieur, pokeworldest, qui était un site d’informations sur … Pokémon ! (les jeunes années, tout ça tout ça)
  • l’hébergeur de l’époque crashait tout les 4 matins, c’était relou.

Du coup, l’objectif c’est de poster ce que je peux trouver pertinent ou intéressant, avec un rythme que j’essaye de garder d’un article par mois minimum.

En effet, ce rythme n’est pas à la pointe des grands réseaux sociaux mais au moins, je tente de contrôler tout de 0 à 1.

Je vais expérimenter des formats, des articles, des liens courts, des tweets pertinents (ça va me permettre de moins tweeter) et également de me tenir à jour sur WP et de vous tenir à jour, tout en construisant ma « carrière de développeur » car un développeur, au final, ça passe beaucoup de temps à coder et à se faire engueuler sans jamais montrer toutes les trouvailles, coup de génie et coup de gueule.

via GIPHY