Ça résume.
— (permalink)
Site original : le hollandais volant links
Oh et j’ai changé (légèrement) le thème de mon site.
J’utilise une jolie astuce CSS qui permet de faire deux colonnes de blocs de taille variable, avec en prime la possibilité de garder l’ordre des articles (sur Firefox en tout cas).
Normalement, quand on utilise des colonnes, les éléments HTML sont placés dans la première colonne puis dans la seconde. C’est le comportement que vous avez sous Chrome (ou Vivaldi, Opera…).
Firefox permet un petit truc en plus : si on regarde les articles par ordre chronologique, ils sigzaguent !
Vous me direz que c’est simple et qu’il suffit des inline-block… sauf que les inline-block ne permet pas de garder prendre des blocs de taille variable et d’avoir un beau rendu façon « journal ».
Je trouve ça tellement chouette que je vais mettre ça ailleurs aussi.
Je n’utilise pas de float non plus (qui aurait rendu compliqué un design fluide et responsive). Bien-sûr, tout est 100% CSS !
Si vous voyez des bugs sur un navigateur récent, merci de me le signaler :-)
ÉDIT : après quelques remarques :
– j’ai rajouté le nuage de tags. Je ne pensais pas que quelqu’un les utilisais encore…
– j’ai remis les blocs dans l’ordre sur un affichage mobile (un oubli de ma part).
– le layout en double colonne est joli, mais n’est pas pratique sous Chrome, à cause de l’ordre des éléments. Je ne peux pas faire comme dans Firefox à cause d’un bug dans Blink (il est marqué comme résolu mais ça ne l’est pas pour le mode "Column" de flexbox, et ça ne sera jamais corrigé malheureusement : il est en wontfix).
Du coup, soit je passe par un brin de JS pour forcer les deux colonnes (c’est juste un "height" à fixer), soit je repasse en mode colonne unique.
Voilà où on est rendu.
Posséder un gilet jaune dans sa voiture est un délit.
Ah et aussi : ne pas posséder un gilet jaune est une infraction.
*clap clap*
Imaginez vous avez un template avec N posts à la suite. S’il y N articles, vous voulez un style A. S’il y a 1 seul article, par contre, vous voulez un style B.
Le CSS est très simple :
#blog > article {
width: 500px;
}
#blog > article:first-of-type:last-of-type {
width: 1000px;
}L’idée est que si l’article est tout seul, il est à la fois le premier et le dernier !
Par exemple, là, je bosse sur un design où les articles sont mis côté à côté de largeur 500px. Quand un seul article est affiché, je veux en revanche qu’il occupe toute la largeur.
PUTAIN C’EST QUOI CES SITES DE MERDE QUI M’EMPÊCHENT DE SCROLLER COMME JE VEUX AVEC LE CLIC-MOLETTE?
Vous allez me laissez utiliser ma souris et mon clavier oui ???
Pendant que le peuple se soulève pour un équilibre fiscal plus juste, la ribambelle de vieux autarciques technophobes et déconnectés du monde vivant au Sénat en remet une couche.
Histoire d'être sûr que TF1, RTL et BFM continuent de laver le sol de l'Élysée avec leur langue.
+1
La remarque la plus pertinente dans l’histoire c’est quand il dit que la plupart des applications ne sont que des fenêtres web et ne fonctionnent pas sans connexion. Autrement dit, n’importe qui d’offline ne les ouvrirait même pas.
Facebook, Tinder, Tumblr, Twitter… tout ça ne sert à rien sans connexion. Conclusion ? Gardez-ça dans le navigateur.
Et quand bien même ces applications (genre Facebook) enregistraient les derniers posts en local pour les servir en offline… qui donc aurait envie de relire des posts déjà lu ? Les réseaux sociaux comme ça ne sont pas fait pour être lus et relus : ce ne sont pas des ressources utiles qui s’utilisent en offline et que l’on veut archiver.
L’avantage que je vois dans les PWA (et qui m’a poussé à aller voir ça de près) c’est le fait de pouvoir utiliser ça offline. Y compris des choses qui n’ont aucune interaction avec le serveur. Mon site, mon blog, fonctionne très bien dans le navigateur : pas besoin d’un app ni d’un PWA pour ça.
Par contre, mes petits outils, pour certains, si, ça m’est déjà souvent arrivé d’être dans le train, de vouloir noter un truc et de ne pas avoir de connexion.
Les PWA (et les applications en général), ne sont utiles quand s’ils sont entièrement fonctionnels en offline. Autrement c’est pas la peine.
À la limite, les données sont synchronisé avec un serveur, mais l’essentiel doit se passer sur l’appareil. Pas l’inverse !
***
Récemment (hier) j’ai revu tout le CSS de mon site… Au total, j’ai réduit ça de pas moins de 10 %. Le HTML a été réduire aussi (~25%) et le JS est resté stable. Tout ça pour dire que y a d’autres façons d’optimiser les choses.
Pour le CSS, ne factorisez pas. Il faut mieux réutiliser du HTML (et donc le CSS) plutôt qu’appliquer des styles identiques à deux éléments HTML différents. Ça ne vaut pas le coup, c’est impossible à maintenir et c’est un nid à redondances.
Par la psychologie.
C’est pas forcément les armes qui permettent à 100 flics de renverser vingt fois plus de protestants.
Il y a plein de méthodes. Celle du gaz lacrymo, par exemple, c’est parce que les gens, dans une manif, se comportent comme un tout, un groupe uni. Or l’effet du gaz est tel qu’il remet chaque individu à une place où il remet à sa propre survie en priorité, détruisant l’effet de groupe.
C’est très instructif, comme vidéo.
Pour enlever les accents, tildes, trémas, cédilles de toutes les lettres diacritiques latines, en PHP :
$texte = htmlentities($texte, ENT_QUOTES, 'UTF-8');
$texte = preg_replace('#&([a-z]{1,2})(acute|grave|circ|uml|cedil|tilde|ring|slash|caron|lig);#', '$1', $texte);
On commence par transformer les lettres accentuées en entités HTML : « é » devient « é ».
Ensuite, on remplace cette chaîne la par la première lettre après le « & ».
Ces entités sont toutes formées de la même façon :
à => à
è => è
ò => ò
ä => ä
ö => ö
ü => ü
Pour les ligatures, c’est pareil :
œ => œ
æ => æ
ß => $szlig;
Par contre ça ne fait que les minusucles, les majuscules ne marchent pas comme ça.
Ah quand-même : la carte indique la différence entre le résultat des élections et le nombre de sièges au parlement.
La logique voudrait que 25 % des voix = 25 % des sièges.
Et c’est à peu près ce qui se passe en Suisse, aux P-B, en Islande, au Danemark ou en Ukraine.
Dans les pays comme l’Allemagne, la Belgique la Scandinavie et la majorité des pays, la différence entre les voix et les sièges ne dépasse pas 5 points.
En France ? La différence excède 25 points : LREM a 52 % des sièges pour 25 % des voix.
C’est le plus grand écart d’Europe, et de très loin : le second pays c’est la Hongrie à 17 points d’écart. Viennent ensuite la Pologne (13 points), la Grèce (12 %) et le R-U (loin en dessous avec 6 points).
Et après on s’étonne que les politiques et les soi-disant représentants sont si déconnectés du peuple, à la fois pour leur vie et pour leur revendications. C’est un peu normal, quand la moitié des représentants défend les milliardaires alors que 99 % du pays n’est représenté que par la minorité qui reste…
Une explication très claire, par Snowden, de ce qu’est un blockchain, pourquoi les gens mettent un tel prix dessus, et à quoi tout ça peut bien servir.
C’est un peu long, mais ça vaut le coup.
Après la bobine Tesla, de générateur de Cockcroft-Walton, voici le générateur de Van Der Graaf, sur Plasma Channel !
Sur les 3, l’avantage des deux derniers, c’est qu’ils agissent comme une condensateur, donc des hautes tensions continues (la bobine Tesla est alternative).
Jay, l’auteur, indique aussi qu’il va préparer des kit-diy, et j’attendais ça depuis longtemps :D
**
Personnellement, je n’ai pas pas la place, ni l’argent ni les outils pour tout faire moi-même.
Pour la mini bobine de Tesla, par exemple, je n’ai pas pu trouver de tube PVC de 5cm de diamètre à la découpe dans n’importe quel magasin à proximité, y compris de bricolage. Je sais c’est idiot, mais j’ai dû utiliser du carton. Ça marche, mais c’est juste pour dire.
Concernant les plaques de plexi, j’ai dû les commander sur mesure. Au final, j’ai dû dépenser une centaine d’euros au total (avec les frais de pots monstrueux, principalement pour les condensateur et le plexi, qui représentent la moitié du prix total).
Évidemment, pour ce tarif, j’ai des pièces de rechange, mais quand-même…
Ceci dit, ça m’a permis de faire quelques articles sympas sur Couleur-Science sur ces appareils et d’avoir une bobine Tesla personnelle qui fonctionne et avec laquelle je peux faire des expériences plus que sympathique !
Si ça intéresse, j’ai depuis peu ouvert une page tipeee, qui pourrait éventuellement servir à créer des trucs comme ça, faire des articles et de participer au blog.
Je n’exclue pas non plus de donner ou faire gagner les trucs que je construit comme ça (au cas où certains voudraient avoir une bobine tesla ou un générateur de VDG, mais ne s’estiment pas en mesure d’en construire une).
Donc là France s'aventure sur cette pente, en arrêtant des gens qui n'ont rien fait mais qui "pourraient" faire quelque chose.
Me semble que c'est contraire aux droits de l'homme, ça (article 9).
Venez pas me dire qu'on n'est pas dans un régime totalitaire après ça.
Le menu démarrer de Windows 10 est bardé d’applications inutiles (xbox, météo, candycrush, tout ça).
Vous pouvez les désactiver un par un par un clic droit puis « désinstaller », ou en les virant parmi les autres programmes.
Sinon, on peut aussi supprimer tout le dossier C:\user\AppData\Local\Packages\*
Les « packages » correspondent à ces applis.
Perso j’ai tout viré, et mon menu démarrer est vide. Je n’ai pas constaté de problèmes pour le moment.
De toute façon, c’est dans le dossier de l’utilisateur, pas système, donc rien ne peut arriver de critique.
Tiens, je ne savais pas que Mozilla avait aussi son outil pour transformer des formules LaTeX en MathML.
Pour info, la bibliothèque la plus populaire pour faire ça est probablement MathJax. Par contre c’est hyper lent et lourd (plus de 80 Mo dans sa version complète).
Sur mes blogs, en particulier Couleur-Science, je lui préfère KaTeX : c’est une lib qui fait la même chose (avec une syntaxe légèrement différente). C’est développé par la Khan Academy.
C’est plus léger et super rapide (voyez vous même sur mes articles).
MathML, c’est un travail visant à définir un standard pour ça, en XML.
Coder ça à la main est archilourd :
Au lieu de ça en LaTeX :
\sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
On se retrouve avec ça en MathML :
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mo>+</mo>
<mn>∞</mn>
</mrow>
</munderover>
<mfrac>
<mn>1</mn>
<msup>
<mi>n</mi>
<mn>2</mn>
</msup>
</mfrac>
<mo>=</mo>
<mfrac>
<msup>
<mi>π</mi>
<mn>2</mn>
</msup>
<mn>6</mn>
</mfrac>
</mrow>
</semantics>
</math>Et c’est moyennement supporté dans les navigateurs, mais ça existe.
TeXZilla, c’est une lib qui transforme le langage LaTeX en MathML