J’ai écrit sous une illustration du billet prcédent ceci :

note : les illustrations sont généralement plus grandes qu’affichées, vous pouvez sur Mac les ouvrir dans une fenêtre séparée, ou zommer sur iOS.

Illustration…!!

• Notez la mise en abyme nécessaire…

• Et cela fonctionne sur iPad mais aussi sur iPhone…

Voilà, voilà…

J’apprécie Name Mangler ⚑ que j’utilise quotidiennement… J’aimerais trouver un équivalent sous iOS un de ces quatre mais bon, mon fil d’écriture de petits billets se terminant encore sur mon antique MacBook Pro de 2009, j’attends que ce dernier rende l’âme (…le plus tard possible…!) pour chercher.

• Cela me sert à ceci : renommer par exemple les copies d’écrans effectuées sur mon Mac en un nom plus compact et précis (note : les illustrations sont généralement plus grandes qu’affichées, vous pouvez sur Mac les ouvrir dans une fenêtre séparée, ou zommer sur iOS).

Notez que l’ordre des étapes est modifiable en permanence et que vous n’êtes pas limités, qu’elles se déroulent les unes après les autres…

• un mode debug permet de voir à chaque étape le résultat de la transformation…

• Et des options, il y en a un paquet…!

Bref, le genre d’utilitaire puissant indispensable qui permet, de plus, d’enregistrer des tas de modèles à appeler quand besoin est.

Je suis fan depuis… File List (son nom précédent…!) et ça doit dater de 2005…?

• Name Mangler ⚑ (18,99 €) sous OSX

La page que vous avez sous les yeux utilise bootstrap, c’est le choix de Richard pour coder urbanbike…

Je suis toujours bluffé par les disparitions d’éléments, voire leurs déplacements sur cette page quand on réduit son amplitude… C’est là où je me rends compte que la technologie de grand-papa¹ que j’utilisais naguère maladroitement est… totalement dépassée…!

Mon interrogation au départ…

En réduisant la page à sa plus simple expression sur le iPhone et en arrivant en pied de page, je me suis fait la réflexion suivante… “un peu ballot de ne pouvoir ajouter un lien vers la page de l’index antéchronologique”. En effet, ce lien existe bien dans les petites colonnes mais, une fois qu’elles sont masquées, bien évidement, y’a plus…!

Me voilà à farfouiller en mode Monsieur bricolage dans la page des spécificités de CSS · Bootstrap… Et là, je comprends un peu mieux le choix de cette technologie choisie par Richard…! Bon sang, mais c’est bien sûr…!

Masqué ou visible…? That is the question…

En gros, la page est divisée en douze colonnes (virtuelles) et tout objet peut être décrété visible sur telle ou telle plage (quatre grandes plages qui recouvrent ces douze colonnes). Et masqué sur telle autre.

Dans le cas qui m’intéresse, c’est l’inverse : je veux qu’un élément précis ne soit visible, n’appariasse que dans un cas de figure. Quand l’écran est au plus resserré…

Après un peu de temps à comprendre le code monaronasesque (!) et lu la doc, j’ai finit par créer une <div> supplémentaire dans le <footer> histoire de préciser ceci :

<div class="col-xs hidden-sm hidden-md hidden-lg">

J’envoie mon épure à Richard qui me précise aussitôt qu’il y a une méthode encore plus simple utilisant la propriété visible…

<div class="visible-xs-block">

Heu, oui, c’est encore plus court(e)…

Mais en regardant les options visibles, je comprend (enfin…!) que la CSS de Bootstrap est également disponible partout², même dans mon texte Markdown. Pas besoin de mettre créer option stabilo dans un texte, <mark> le fait très bien³.

De la couleur…?

Enfin, je tombe sur les class des Contextual backgrounds qui autorisent également des effets pratiques si besoin. Et je n’ai pas résisté à ajouter un bg-warning…

En résumé, c’est très facile de greffer un truc sur un code déjà bien construit et je suis gré à mes deux copains Richard et Dominique de me pousser à explorer de nouvelles pistes…! Je ne vais pas aller très loin mais cela m’éclate.

En effet, bricoler un peu de code ne fait pas de moi un développeur, nous sommes tous d’accord sur ce point…!

Bon, je continue à passer le plumeau dans le code d’urbanbike…

À suivre…