CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
►https://tobiasahlin.com/blog/masonry-with-css
Méthode « tout CSS » pour faire un layout masonry : à base de flexbox, :nth-child() et order
difficulté possible : semble nécessiter de fixer la hauteur de l’ensemble...
Voir aussi : 10 exemples de layout « types » en flebox : ▻https://tobiasahlin.com/blog/common-flexbox-patterns
Opinion | The Lesson of the Château de Calberte - The New York Times
▻https://www.nytimes.com/2018/07/19/opinion/chateau-de-calberte-france-history.html
When lunch was finished, Mr. Darnas insisted that I had to see something. He took me for a tour along the exterior wall. The Château de Calberte is jammed onto a steep, rocky outcrop and the wall in some places is at least 20 feet high.
He explained that when he and Ms. Darnas had first seen the place the walls had long since caved in on themselves. The couple pulled the stones out and eventually solved the jigsaw puzzle of how they had originally been assembled. He pointed to the different layers of stone just above our heads. The first layers were flat and had been cut by masons in such a way that they fit together effortlessly with very little mortar. He asked me to look a little higher. The stones were smaller and more haphazardly arranged.
His theory was the workmen who initially built the chateau had very advanced masonry skills. But over the centuries, as the region suffered war, plague and economic collapse, those skills had been lost. The last workmen who expanded the chateau simply didn’t know the advanced stonecutting techniques. The upper layer of the walls with the tinier stones was weak, more easily breached, and the walls were broken down again and again by brigands until the place was abandoned.
Do you understand why I’m telling you this story? he asked in a schoolmasterly way.
Yes, I said. Human progress isn’t a one-way process. We can forget how to build things. We can go backward as well as forward. He nodded.
And, of course, it isn’t just technological #innovation that can go backward. Societies can forget the social and political innovations that allowed them to flourish.
Via naked capitalism
Je suis subjugué de lire dans le New York Times un discours dont je fais régulièrement la démonstration aux amis et amies qui me rendent visite dans les Cévennes (où se trouve donc ce fameux château de Calberte et d’autres du même tonneau, comme le château de Brésis ou celui d’Aujac), les Cévennes où ce genre de pertes de savoirs, de compétences, et tout simplement de force et d’endurance, sont considérables. Très peu de maçons cévenols savent encore construire un toit en lauzes ou même en réparer un. De telles compétences sont à la fois rares et trop demandées.
Et de fait dans mes explications sur les raisons de telles disparitions, je manque rarement un petit tour par exemple devant le monument aux morts du village d’Aujac, d’où 45 jeunes gens ont été sacrifiées pendant 14-18, dans un village dans lequel ne doivent pas vivre plus de vingt personens à l’année en 2018.
Oui, il y avait de la vie et de la compétence dans cette région.
Le NYT aurait-il un message à faire passer ? Ou bien les journalistes sont-ils juste en roue libre, faute d’occupants stables à la Maison Blanche ?
Cf. aussi ce truc sacrilège qu’on y trouve :
▻https://seenthis.net/messages/710279
En arrondissant les nombres : environ 70 000 habitants en Lozère en 1990 : le double, un siècle auparavant. Le déclin commence un peu avant la guerre de 14 mais s’accélère après. Une partie de la réponse est effectivement sur les monuments aux morts...
Front-End Tricks: 100% #css control of #masonry Layout w/ left-right content flow
▻https://hackernoon.com/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190
CSS column-count + array reordering = left-to-right content flowLive Demo: ▻https://github.com/jessekorzan/masonry-css-jsThe problem… column-count works great except for left-to-right scan readingMasonry Layouts… popularized by sites like Pinterest. Loved by non-coding designers and holy-grailed in corporate boardrooms.Naturally, many sharp front-enders have worked on solutions. We have several libraries, techniques and hacks to achieve this marvel of content display.There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.For me, especially in exploratory efforts, a pure-CSS method is a flexible and fast way to iterate. I don’t want to rely on DOM manipulation or end up with a contrived (...)
Infinite Scroll
▻https://infinite-scroll.com
Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web.
Implémentation avec Masonry :
▻https://infinite-scroll.com/demo/masonry
Bricklaying robots create bulging masonry facade at Shanghai arts centre
▻http://www.dezeen.com/2016/11/01/bricklaying-robots-bulging-masonry-facade-china-shanghai-arts-centre-archi-u
The complex form could only be generated using computer software, which was then used to programme robots that accurately placed the bricks in the correct positions to create the sculptural surface.
Meet the moderate and democatic Syrian rebels: what Western correspondents don’t tell you about the Free Syrian Army
▻http://angryarab.blogspot.fr/2015/06/meet-moderate-and-democatic-syrian.html
It seems that the Free Syrian Army in its official correspondence with their Saudi masters, according to the Saudi cables in Wikileaks, identify the enemy as the International Free Mason movement personified in the Syrian regime, and they have no qualms about making reference to the enemy as the Manichean (or Safavid) Shi‘ite regime. The political adviser of the Free Syrian Army even maintains that Free Masonry is aimed at attacking Sunnis.
Sources:
▻http://www.al-akhbar.com/node/236507
▻http://al-akhbar.com/node/236506
Ingenious: John Ochsendorf - Issue 24: Error
▻http://nautil.us/issue/24/error/ingenious-john-ochsendorf
John Ochsendorf is a professor at the Massachusetts Institute of Technology whose work is devoted to understanding buildings of the past. An expert in masonry vaulting, he’s made a career of studying a style of construction that began millennia ago and practically disappeared with the Industrial Revolution. I met Ochsendorf in a nondescript lab on campus where a model of Rome’s Pantheon rested on a table. “I think the Pantheon is probably the greatest building of all time,” he says, and he hopes to use the model to demonstrate that the real building is stable enough as it is—even though it’s weathered and cracked—without the need for modern-day interventions like steel reinforcing. Ochsendorf, a MacArthur “Genius” Fellow, isn’t entirely comfortable in the spotlight; he says he’d rather ask me (...)
The First Day - Issue 16: Nothingness
▻http://nautil.us/issue/16/nothingness/the-first-day
The fog was thick when I left my bedsit and ventured out alone into the barren and murky city. I was heading for what used to be called a crematorium and these days is known as a funeral parlor. I had received a notice instructing me to arrive by 9 a.m., because my cremation was scheduled for 9:30. The night before had resounded with the sounds of collapsing masonry—one huge crash after another, as though a whole line of buildings was too tired to stay standing and had to lie down. In this continual bedlam I drifted fitfully between sleep and wakefulness. At daybreak, when I opened the door, the din suddenly halted, as though just by opening the door I had turned off the switch that controlled the noise. On the door a slip had been posted next to the notices that had been taped there (...)
Avec Mosquito, on vient de livrer le nouveau site de la Fémis :
▻http://www.femis.fr
C’est du #SPIP_3, #responsive, #HTML5 (et du #shameless_autopromo évidemment).
Parmi les points originaux…
– Le menu de navigation principal avec son animation « gauche-droite » au survol. Le javascript est très simple, et l’animation est directement en transition CSS. Dans chaque menu, les colonnes des rubriques/sous-rubriques sont aussi équilibrées que possible, et c’est fait directement avec Masonry.
– Les images passent par mon plugin « image_responsive », ce qui permet de gérer différentes tailles, ainsi que le chargement d’images deux fois plus grandes pour les écrans haute définition.
– Il y a réellement très peu d’images pour réaliser l’interface graphique. C’est essentiellement des CSS avec des dégradés discrets, des ombres portées… Comme d’habitude, mon plugin « CSS imbriqués » est très utile pour faciliter le codage (CSS avec gestion des préfixes et des variantes de navigateurs, code hiérarchisé, inversion des #media_queries…).
– La moteur de recherche (c’est du pur SPIP/Fulltext) bénéficie de petites améliorations dans les squelettes. (C’est accessible via la loupe en haut à gauche de la page.) La première consiste à faire des suggestions lorsqu’on commence à taper un mot. Tu tapes « réali », et ça te déplie des suggestions : « réalisation, réalisateurs, réalisateur, réalisé, réaliser… » classées en fonction de la présence de ces mots dans le site. Une fois que tu as validé ta recherche, la page de résultats est classique, mais avec un détail : le texte « descriptif » de chaque article est calculé pour afficher le terme recherché, surligné dans son contexte (habituellement on affiche simplement le début du texte comme partout dans le site ; là il y a un calcul amusant).
– Une grosse partie du boulot a consisté à refondre la base de donnée des anciens élèves. D’abord créer des moulinettes pour réorganiser l’ancienne base de données dans ma nouvelle structure. Ensuite évidemment gérer l’affichage sur le site (avec SPIP, cette partie, c’est assez finger in ze noze). Et surtout : des formulaires pour que chaque ancien étudiant gère lui-même sa fiche, ses infos personnelles, sa filmographie, son CV structuré… Le tout en essayant de proposer des interfaces aussi intuitives que possible, ce qui est toujours une gageure quand on a des formulaires un peu complexes.
– Ça faisait carrément longtemps : on utilise les brèves de SPIP ! (Pour l’« Actualité des diplômés »).
– Comme à mon habitude, la page d’accueil et le footer sont construits avec une « rubrique technique » invisible, laquelle contient des sous-rubriques pour structurer, et il faut donc publier des « articles virtuels » qui redirigent vers ce qu’on veut. C’est un peu plus contraignant que d’autres techniques, mais c’est ce qui donne la plus grande souplesse (on peut « référencer » des articles, des rubriques, des pages distantes…, forcer le classement qu’on veut en page d’accueil, utiliser des titres et des descriptifs plus adaptés…).
Comme à mon habitude, la page d’accueil et le rooter sont construits avec une « rubrique technique » invisible, laquelle contient des sous-rubriques pour structurer, et il faut donc publier des « articles virtuels » qui redirigent vers ce qu’on veut. C’est un peu plus contraignant que d’autres techniques, mais c’est ce qui donne la plus grande souplesse (on peut « référencer » des articles, des rubriques, des pages distantes…, forcer le classement qu’on veut en page d’accueil, utiliser des titres et des descriptifs plus adaptés…).
Héhé, par deux fois déjà, j’ai opté pour exactement la même technique, afin de sélectionner les contenus listés dans un carrousel d’accueil. Cela permet d’avoir une image différente, pas forcément intégrée au contenu final qui est lié, pareil pour le titre et le descriptif, qui peuvent être propres à l’accroche, et ça permet effectivement aussi de rediriger vers un autre contenu externe.
Pour ne pas faire de bidouille, ça pourrait mériter un plugin dédié, du genre « Sélections de contenus », où on pourrait en créer autant qu’on veut, avec un identifiant textuel non lié à la base (ce qui permet de l’utiliser dans les squelettes génériquement), et qui permettrait alors de sortir :
<BOUCLE_news_accueil(SELECTIONS){identifiant=news_accueil}>
LOGO_SELECTION
TITRE
DESCRIPTIF
LIEN (celui ci pouvant gérer à la fois une URL classique, ou un identifiant de contenu SPIP du genre : « evenement1234 »)
</BOUCLE_news_accueil>
Avec une interface bien fichue pour les administrer. Ça sera plus facile et plus facilement compréhensible (car pas un détournement).
Salut @arno,
j’ai enfin pris le temps de commencer ce plugin de sélections éditoriales.
Voici le premier commit :
▻http://zone.spip.org/trac/spip-zone/changeset/83884
Tu peux donc te faire une sélection « accueil », une autre « footer », etc. Et les récupérer facilement dans tes squelettes :
<BOUCLE_une(SELECTIONS){identifiant=accueil}>
<BOUCLE_contenus(SELECTIONS_CONTENUS){id_selection}>
<a href="#URL">
#LOGO_SELECTIONS_CONTENU
#TITRE
#DESCRIPTIF
</a>
</BOUCLE_contenus>
</BOUCLE_une>Et dans le champ « url », tu peux y mettre :
– soit un URL complet quelconque
– soit un objet SPIP sous la forme « article123 », « evenement456 », « rubrique789 ».
Dis moi ce que tu en penses.
(Et comme le dit le commit, viendra ensuite l’ajout de sélections en-dessous d’un objet SPIP. Lorsqu’on le veut.)
Oublié de le dire :
1) j’ai ajouté la création d’une sélection sous un contenu SPIP (un article par exemple), et
2) j’ai modifié le formulaire d’ajout d’un contenu sélectionné pour le rendre plus pratique : seule l’URL est obligatoire, et si on ne met que ça, la magie va chercher le titre du contenu SPIP (si on a mis « article1234 » par exemple) ou le titre de la page HTML (si on a mis un URL http).
Le plugin #jQuery Masonry de David Desandro maintenant disponible en une version ne nécessitant pas jQuery.
Vanilla Masonry
►http://vanilla-masonry.desandro.com/docs/intro.html
Masonry is a dynamic grid layout script. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
You might have heard of jQuery Masonry, this is the framework-free version.
Tutorial: Using jQuery Masonry with WordPress
►http://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress
Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.