Auteur/autrice : Éric

Je voulais faire simple : Une page dont premier bloc doit occu­per l’in­té­gra­lité de l’écran.

html, body { padding: 0; margin: 0; } 
#first { width: 100vw; height: 100vh; }

<div id="first">Hello</div>
<div>World</div>

Ça n’est *jamais* simple.

Barres de défi­le­ment

Alors déjà vw et vh prennent en compte les barres de défi­le­ment. J’ai perdu l’ha­bi­tude sous mac mais elles prennent encore de la place à l’af­fi­chage sous windows.

Du coup, comme ma page est plus longue que l’écran, j’ai une barre de défi­le­ment verti­cale sur le côté. 100vw + la barre de défi­le­ment, c’est plus que l’écran. Mon bloc dépasse donc sur le côté.

J’ai deux solu­tions : 100%, qui regarde la taille d’af­fi­chage dispo­nible (donc sans les barres de défi­le­ment) ou window.innerWidth en javas­cript qui fait la même chose.

Dans les deux cas je ne veux pas que la taille de mon contenu « saute » en fonc­tion de la longueur de ma page. Le plus simple est de forcer l’af­fi­chage de la barre de défi­le­ment verti­cale même dans les très rares cas où je n’en aurai pas besoin.

html, body { padding: 0; margin: 0; overflow-y: scroll; } 
#first { width: 100%; height: 100vh; }

<div id="first">Hello</div>
<div>World</div>

Je ne me préoc­cupe pas de la barre de défi­le­ment hori­zon­tale. Norma­le­ment je ne devrais jamais en avoir sur une page web.

La barre de navi­ga­tion

Sur les smart­phones les navi­ga­teurs proposent désor­mais une barre de navi­ga­tion esca­mo­table. Elle est visible quand on arrive sur la page, dispa­rait quand on défile vers le bas, réap­pa­rait quand on défile vers le haut.

C’est un bon compro­mis entre le besoin d’un écran sans rien au milieu et le besoin d’avoir accès à la barre de navi­ga­tion. Reste que « tout l’écran » peut vouloir dire trois choses :

1. Tout l’écran de départ, quand il y a la barre, quitte à ce que ça ne prenne plus tout l’écran quand la barre dispa­rait.
2. Tout l’écran possible, quitte à ce que ça dépasse de l’écran quand la barre est visible.
3. Tout l’écran dispo­nible, et donc une taille qui change suivant que la barre est visible ou non.

Mon bloc doit prendre tout l’écran au démar­rage de la page, et je ne veux pas que quoi que ce soit bouge dans la page simple­ment parce qu’on défile verti­ca­le­ment. Je cherche donc dans la solu­tion 1.

J’ai deux outils pour ça :

• 100vh en CSS, qui corres­pond à la taille n° 2 (sans la barre)
• window.innerHeight en Javas­cript, qui corres­pond à la taille n°3 (adap­ta­tif) avec un événe­ment « resize » quand la barre appa­rait ou dispa­rait

Idéa­le­ment ma solu­tion c’est « 100vh moins la taille de la barre ».

Malheu­reu­se­ment la taille de la barre ne fait pas partie des variables d’en­vi­ron­ne­ment CSS. On a la taille des encoches des écrans iPhone mais pas la taille de la barre qui concerne pour­tant quasi­ment tout le monde.

La seule solu­tion que j’ai trou­vée c’est au démar­rage faire un <div> de 100vh, regar­der la taille qu’il a, retran­cher window.innerHeight, et stocker ça dans une variable CSS.

<script>
const div=document.createElement('div');

div.setAttribute('style', 'height:100vh;width:0;position.absolute;top:0');

const barSize = div.scrollHeight - window.innerHeight;

document.documentElement.style.setProperty('--bar-height', barSize+'px');
</script>


html, body { padding: 0; margin: 0; overflow-y: scroll; } 
#first { 
  width: 100%; 
  height: calc(100vh - var(--barSize, 0px); 
}

<div id="first">Hello</div>
<div>World</div>

Si vous trou­vez mieux, je suis preneur.

Je ne crois pas vous avoir déjà parlé de Choosy et pour­tant je ne saurais plus m’en passer.

Ce petit utili­taire remplace le navi­ga­teur par défaut dans la confi­gu­ra­tion système et se charge de redi­ri­ger vers le bon navi­ga­teur en fonc­tion des règles que vous lui aurez donné.

Chez moi ça me permet de sépa­rer effi­ca­ce­ment le pro et le perso.

Le lien vient de slack ? navi­ga­teur pro. Le lien est vers twit­ter ? navi­ga­teur perso. Le lien est vers un domaine pro ? navi­ga­teur pro. Le lien contient le nom de la boite ? navi­ga­teur pro. Ça vient du termi­nal ? je l’uti­lise pour les deux, ça lais­sera le choix du navi­ga­teur à chaque fois (mais rien que l’écrire me fait dire que ça méri­te­rait que j’uti­lise deux app de termi­nal diffé­rentes pour faci­li­ter la sépa­ra­tion).

On peut filtrer en fonc­tion du lien (domaine, mots clefs, expres­sion ration­nelle), de l’ap­pli­ca­tion source, de la présence d’une touche appuyée lors de l’ap­pel sur le lien, des navi­ga­teurs déjà en train de tour­ner… et si vrai­ment on le souhaite il est possible de présen­ter les diffé­rents navi­ga­teurs possible pour lais­ser choi­sir au cas par cas.

Si ce n’est pas deux navi­ga­teurs, Choosy est capable de lancer le lien sur des profils diffé­rents dans Chrome.

Un paie­ment unique de 10 $ pour ne pas avoir des onglets persos dans les onglets pro parce que j’ai cliqué sur un lien pendant la pause, ça les vaut large­ment.

Quelle est l’aug­men­ta­tion annuelle stan­dard pour un déve­lop­peur qui travaille correc­te­ment mais pas excep­tion­nel­le­ment, avec une progres­sion de carrière clas­sique ? 2 %, 4 %, 6 %, 8 % ?

J’ai demandé autour de moi, 3 à 5 % semble des esti­ma­tions raison­nables. Les augmen­ta­tions de 8 à 10 % sont consi­dé­rées comme des mérites excep­tion­nels.

À vous de trou­ver les chiffres de votre entre­prise. Vous pouvez lisser via une moyenne sur plusieurs années mais pas exclure les années « excep­tion­nelles » où l’en­tre­prise a été en diffi­culté finan­cière.

Et à dans la grille d’em­bauche ?

Si vous avez une grille de salaire de réfé­rence à l’em­bauche, même si le nombre d’an­nées d’ex­pé­rience n’y est qu’in­di­ca­tif, quelle augmen­ta­tion annuelle serait néces­saire pour passer de 0 à 5 ans d’ex­pé­rience en respec­tant cette grille ?

Ajou­tez-y l’in­fla­tion (prenons 1 % pour simpli­fier). Si votre grille des salaires à l’em­bauche a tendance à être rééva­luée plus vite que l’in­fla­tion à cause d’un marché en tension, prenez-le aussi en compte (c’est très proba­ble­ment le cas sur les métiers d’in­gé­nie­rie logi­cielle, je ne serais pas étonné qu’il faille ajou­ter 1 point de % en plus).

Atten­tion, on parle là d’aug­men­ta­tion annuelle, toutes les années. Si vous n’aug­men­tez qu’une fois tous les deux ans, il faut doubler ce chiffre. S’il n’y a pas ou peu d’aug­men­ta­tion les années diffi­ciles, il faut l’aug­men­ter propor­tion­nel­le­ment les autres années.

Compa­rons…

Si, après correc­tions liés à l’in­fla­tion et à l’évo­lu­tion du marché, le chiffre que vous obte­nez à partir des salaires à l’em­bauche est plus grand que celui de vos augmen­ta­tions annuelles moyennes, vous avez un problème.

Si, toujours après correc­tion, il est équi­valent ou supé­rieur à ce que vous consi­dé­rez comme une augmen­ta­tion excep­tion­nelle, votre problème est critique.

Une simple ques­tion d’iné­ga­li­tés…

Vous avez un problème parce que vous géné­rez une inéga­lité entre les nouveaux (qui s’alignent à la grille d’em­bauche) et les anciens (plus faible­ment augmen­tés).

Vous géné­rez un senti­ment d’injus­tice pour les anciens. Comme en paral­lèle ces mêmes déve­lop­peurs vont rece­voir des offres qui, elles, s’alignent sur le marché, l’in­sa­tis­fac­tion ne va pas pouvoir être igno­rée et ne va que gran­dir avec le temps.

Dans le meilleur des cas les anciens sont inci­tés à démis­sion­ner plus vite que prévu pour pour­suivre leur carrière. Dommage, ce sont eux qui ont la connais­sance de votre l’en­tre­prise et recru­ter coûte cher.

Dans dans le pire des cas ces anciens restent, insa­tis­faits, géné­rant une défiance et un pessi­misme latents vis à vis de la direc­tion, en entrai­nant aussi les nouveaux dans le sillage.

En regar­dant ce que je consi­dère le marché de l’in­gé­nie­rie logi­cielle et ce que je vois dans diffé­rentes entre­prises où je suis passé, l’aug­men­ta­tion légi­time devrait appro­cher les 6 à 7 % les 5 premières années en plus de l’in­fla­tion (donc 7 à 8% avec l’in­fla­tion du moment). Ça décroit après les premières années mais reste proba­ble­ment encore dans les 3 à 4 % hors infla­tion (donc 4 à 5 % avec) pendant les 10 ans suivants.

Bien évidem­ment, je parle de moyenne. Pour suivre 7 à 8 % en moyenne année après année, il devrait être fréquent de voir des augmen­ta­tions de 10 % et plus.

Vous avez fait tenté l’ex­pé­rience ? Je suis curieux de vos chiffres.

Que consi­dé­riez-vous une augmen­ta­tion « normale » avant de faire le calcul ? Quelle augmen­ta­tion est néces­saire d’après votre grille à l’em­bauche et en y ajou­tant au moins 1% d’in­fla­tion ?

Je cherche toujours la grille idéale pour présen­ter des photos avec des formats arbi­traires de façon à ce que ça passe bien et sur mobile et sur écran de bureau.

Il n’existe pas de solu­tion passe-partout. J’avais listé l’état de l’art il y a quelques temps. Il y a de rares acteurs qui font des petits plus pour rompre la mono­to­nie ou mettre en avant des images parti­cu­lières mais dans l’en­semble on se contente d’un agen­ce­ment par carré (Insta­gram), par lignes (Flickr) ou par colonnes (Tumblr) suivant ce qu’on vise comme type de photos et si elles sont prin­ci­pa­le­ment affi­chées sur des écrans de bureau ou des mobiles. C’est géné­ra­le­ment spécia­lisé et assez illi­sible dès qu’on y met une photo d’un format diffé­rent ou qu’on visua­lise sur un écran non adapté.

J’avais tenté quelque chose d’un peu diffé­rent en m’au­to­ri­sant des confi­gu­ra­tions un peu plus limi­tées mais qui conti­nuent à respec­ter le rapport largeur/hauteur de chaque image : Des séries d’agen­ce­ments de 1 à 4 photos, empi­lés les un au dessus des autres. Ça permet d’avoir un rendu plus divers, plus riche et adapté au format de chaque image (une image format portrait peut être mise en regard d’images format paysage).

Trois ans après, ça tient toujours et ça ne m’a jamais créé de résul­tat qui jure visuel­le­ment. Du coup j’ai ajouté quelques agen­ce­ments plus complexes à la liste, ainsi que les varia­tions pour savoir si tel grand bloc va en haut ou en bas, à gauche ou à droite, etc.

Ça donne des formules de 3 km pour trou­ver la taille de chaque image en fonc­tion de son ratio, de la taille hori­zon­tale dispo­nible et de la taille des espa­ce­ments, mais ça fonc­tionne.

J’ai aussi changé la formule de sélec­tion.

Aupa­ra­vant je parcou­rais pas à pas en choi­sis­sant le bloc le plus adéquat au fur et à mesure du parcours. Ça me lais­sait parfois peu de choix sur les dernières images, avec par exemple une dernière image au format portrait à affi­cher en pleine largeur parce qu’il ne reste plus qu’elle et que je ne peux donc pas la mettre en regard d’une autre. Désor­mais je calcule toutes les combi­nai­sons possibles sur l’en­semble des images et je garde la meilleure combi­nai­son de blocs de façon globale.

Le score d’une combi­nai­son c’est la somme des scores de chaque image. J’y compare la surface d’af­fi­chage à une surface cible « idéale » (aujourd’­hui c’est fixé à « ⅔ d’une photo au ratio 3:2 affi­chée en pleine largeur »).

Initia­le­ment je comp­tais le nombre de pixels de diffé­rence mais ça a tendance à encou­ra­ger des photos plus petites (on retire peu de pixels) par rapport aux photos plus grandes (on ajoute beau­coup de pixels). Depuis je calcule un facteur « photo la plus grande des deux / photo la plus petite des deux ». Comme je préfère une petite varia­tion sur toutes les photos à une énorme varia­tion sur une unique photo, j’élève cette diffé­rence au carré.

Le gros avan­tage de cette méthode c’est que je peux éven­tuel­le­ment faire varier la taille de réfé­rence. Une photo de moindre impor­tance sera compa­rée à une taille de réfé­rence plus petite. La photo prin­ci­pale sera compa­rée à une taille de réfé­rence plus grande. On arrive ainsi à mettre en valeur les bonnes images et mettre en retrait les autres.

« Quand on demande leur avis à des gens qui n’y connaissent pas grand-chose sur un sujet complexe, il arrive qu’ils se trompent »

David Barroux

Je vais très proba­ble­ment devoir chan­ger mon smart­phone et je suis perdu dans les marques et les modèles. J’ap­pré­cie­rais bien une recom­man­da­tion de quelqu’un qui connait bien le milieu.

Je fais prin­ci­pa­le­ment du web, des réseaux sociaux, de la navi­ga­tion gps et des vidéos. Je cherche d’abord une très bonne auto­no­mie (je le solli­cite vrai­ment beau­coup) et un écran de bonne qualité qui n’est pas ébloui en exté­rieur (idéa­le­ment AMOLED).

Je n’ai pas besoin d’un proces­seur dernier cri mais vu que ça influe beau­coup sur la navi­ga­tion web, on va dire que la puis­sance reste un critère secon­daire.

Je n’ai que faire d’une taille d’écran gigan­tesque, d’une réso­lu­tion de folie, ou d’une puce graphique excep­tion­nelle pour les deux. Je n’ai aussi aucune utilité de trois zillions de capteurs photos super poin­tus.

Pour un ordre d’idée, le précé­dent était un Samsung Galaxy A5 2017, celui d’avant un Sony Z3 Compact, les deux choi­sis parce qu’ils avaient une des meilleures auto­no­mies de leur époque.

Auriez-vous des réfé­rences à me conseiller ?

J’ai pris un peu de recul sur mes orien­ta­tions poli­tiques histoire de voir où et comment m’im­pliquer. Je suis arrivé avec quelques critères (donnés ici dans le désordre) :

• Recherche une société meilleure, quitte à remettre en cause l’exis­tant et le passé
• Écolo­gie et urgence clima­tique
• Société soli­daire, basée sur du collec­tif et des communs
• Fortes liber­tés civiles, droits de l’hu­main, liberté d’ex­pres­sion et vie privée
• Idéal démo­cra­tique avec une vision pour nos insti­tu­tions
• Euro­péen à tendance fédé­ra­liste, univer­sa­liste dans ses valeurs
• Recherche de justice sociale et partage des richesses
• Modèle de société qui revoit le rapport au travail, à l’éco­no­mie et à la produc­tion
• N’ex­clut pas les choix poli­tiques forts ou radi­caux bases sur des opinions, mais ne contre­dit pas la science, les faits, le ration­nel et le prag­ma­tique

Oui, j’en demande beau­coup.

Typique­ment pour moi ça exclut proba­ble­ment une majeure partie des collec­tifs qu’on quali­fie­rait « de droite » en France : L’éco­no­mie, la souve­rai­neté, la liberté indi­vi­duelle, l’ordre, et la défense du système actuel y priment en géné­ral sur les critères que j’ai listé plus haut. Ce ne sont aussi pas eux qui vont remettre en cause le système.

Mon dernier point m’em­pêche très nette­ment d’en­vi­sa­ger EELV, au moins tant qu’ils restent dans des actes entre deux chaises vis à vis des vaccins, du nucléaire, et ce genre de choses.

Le PS j’ai trop de défiance après l’avoir vu amener Valls, suivre les tenants de l’ordre et renon­cer à tout ce pourquoi je vote­rai pour eux. Je retiens le mariage pour tous, c’est énorme, mais d’autres à gauche avaient ce même projet. Ça ne suffit pas à contre­ba­lan­cer.

LFI je n’ac­croche pas à la vision popu­liste et natio­na­liste. La base mili­tante est très diverse, amal­ga­mant tous ceux qui en ont marre, allant parfois sur le brun. Le chef est lui a tendance auto­cra­tique et mégalo. Ça fait trop et j’ai même peur de ce qu’il se passe­rait s’ils arrivent au pouvoir avant d’avoir fait le ménage. C’est un no go indé­pen­dam­ment de ce que je pense du programme.

J’ai beau­coup d’af­fi­ni­tés avec Géné­ra­tion-s, notam­ment parce que Benoît Hamon ose avan­cer sérieu­se­ment sur la ques­tion du travail et du revenu de base, mais pas que. Ils parlent social, société, communs, démo­cra­tie, etc.

Malheu­reu­se­ment ils ont des posi­tions offi­cielles très marquées sur la fin du nucléaire. Pour­tant, s’il y a un seul enjeu sur notre géné­ra­tion, c’est le climat. Et là, honnê­te­ment, je n’ai vu aucun scéna­rio crédible qui permette de se passer du nucléaire. L’ur­gence est de construire, pas détruire.

On m’a proposé Place Publique, mais le site ne présente que de très vagues valeurs, qui pour­raient être dites par une majo­rité des partis français. Avec trop d’af­fi­ni­tés au PS et pas de vrai programme concret, je passe mon tour.

Nouvelle Donne… Le programme a des valeurs proches des miennes des idées inté­res­santes, quelques trous (toujours rien, ni pour ni contre ni analyse, à propos du nucléaire ? Vrai­ment ?) mais.. j’ai déjà donné. Il paraît que ça s’est amélioré sur certains points qui posaient problème en interne mais il n’en sort toujours pas grand chose à part des alliances à chaque élec­tion. C’est d’ailleurs peut être ça le problème. Je ne veux pas d’un parti qui soit un moyen pour les têtes d’af­fiches d’ob­te­nir un mandat aux élec­tions. Les élec­tions c’est le moyen, pas le but.

Du coup j’ai fait un tour ailleurs.

J’avais un souve­nir du Parti Pirate quasi­ment unique­ment orienté culture, réseaux et liber­tés civiles, ainsi qu’une conno­ta­tion très « libe­ra­tienne et liber­tés indi­vi­duelles » que je ne partage à priori pas.

Peut-être que ça a changé, peut être que mes souve­nirs ou préju­gés étaient faux. Toujours est-il que j’y ai trouvé des posi­tions pas si éloi­gnées de ce que je cherche avec mes critères.

C’est en construc­tion. Il me manque beau­coup de prises de posi­tion, notam­ment sur la partie « Société soli­daire, basée sur du collec­tif et des communs ». J’ai toujours peur que la tendance libe­ra­tienne puisse s’y retrou­ver et donc faire partie du bateau. Pour autant, si j’au­rais parfois pris d’autres choix, rien de ce que j’ai vu ne m’a fait sauter au plafond ou même gêné.

Ma vraie rete­nue à plutôt été sur la capa­cité de l’as­so­cia­tion à avoir un vrai impact. J’étais prêt à faire de gros compro­mis pour avan­cer avec une struc­ture qui a un vrai impact… mais pas rien.

Avec un peu de recul, si on ne se limite pas à la France, le Parti Pirate a eu et à encore un impact. Le fait que ce ne soit pas un parti avec un leader tête d’af­fiche laisse aussi penser qu’on pourra imagi­ner des choses diffé­rentes. La taille peut sur ce point aussi être un avan­tage.

Bref, me voilà parti avec le Parti Pirate pour tenter l’aven­ture.