Flexbox Patterns
▻http://www.flexboxpatterns.com
Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.
toujours chelou la génération auto des tags à partir du flux :)
#flexbox #intégration #web #HTML #CSS #patterns #modèles
Merci, j’apprends beaucoup mieux avec des exemples très précis comme ça.
Est-ce qu’on sait comment ces modèles se déclinent quand on arrive sur un navigateur qui ne gère pas bien flexbox, ou pas la bonne version ? (parce que là le code contient juste le css « vanilla » officiel)
J’aimerais bien utiliser pour de vrai Flexbox lors de ma prochaine intégration (qui doit se faire vers avril normalement) ! Mais je ne voudrais pas trop péter sur tel ou tel navigateur (sans aller à IE6 hein évidemment huhu).
Il y avait ça comme projet de liste de patterns flexbox aussi :
▻http://seenthis.net/messages/338835
Mais il s’est arrêté à 6 cas… et ça n’a plus été mis à jour apparemment.
@rastapopoulos les tags pourris, c’est parce que j’ai finalement jeté mon compte Diigo, qui ne servait de relai de ma source Pinboard que pour Seenthis. Si un jour Seenthis supporte les tags façon Pinboard, ce sera mieux. Cf ►http://seenthis.net/messages/324311
Pour revenir au sujet : si tu utilises Autoprefixer, ça règle une bonne partie (voire tous ?) des problèmes de support dans les navigateurs un peu anciens qui utilisaient d’anciennes syntaxes.
Oui pour les tags, on avait vu que c’est Pinboard qui ne respecte pas la norme DC. (et donc ça peut très bien être un tag ayant plusieurs mots, ça existe parfaitement, et seenthis ne devrait pas discriminer ça)
Pour autoprefixer, je n’utilise pas encore, à appliquer après SCSS donc, mais ce n’est pas dans mon workflow pour l’instant (car je fais compiler les SCSS par SPIP, avec son Path). :(
Mais sinon les préfixes suffisent ? IE8 a plus de 1% du parc encore… (entreprises, mairies, toussa). Bon mais là mon projet au printemps c’est pour le grand public, donc ça va. Ça serait bien de s’y mettre enfin !
@fil je suis plutôt en mode allègement drastique de mes pet projects ces temps-ci (c’est très nécessaire), et clairement loin de tout code SPIP (et même PHP) depuis très longtemps, donc il y a objectivement peu de chance que je puisse proposer quoi que ce soit, désolé.
@rastapopoulos je ne suis pas sûr que les préfixes suffisent, notamment Firefox a eu 3 implémentations différentes…
Et du coup toi tu l’utilises @nhoizey, ou tu l’as déjà utilisé ou fait utilisé sur un « vrai » projet ? (pro ou perso peu importe mais avec des vrais visiteurs à la fin)
@rastapopoulos il y en a dans mon site perso et dans l’interface de mon jeu ►http://play.esviji.com notamment
» Case Study : Our #SVG Icon Process Cloud Four Blog
▻http://blog.cloudfour.com/our-svg-icon-process
SVG’s versatility empowers us to craft the most appropriate solution for our audience and use-case. So as much as I’d like to, I can’t say exactly how you should implement SVG icons in your next project. There’s no substitution for research and tryi… Tags: #processus #picto #grunt #gulp SVG #clevermarks
En lien avec, puisque ce sont les mêmes :
►http://seenthis.net/messages/433569
Mais je persiste : je ne trouve pas ça bien d’avoir à insérer des images (SVG ou pas peu importe) de décoration, dans le HTML. Pour moi c’est typiquement un truc uniquement propre au thème graphique du moment, et qui doit pouvoir être changé juste en changeant les choix graphiques, sans toucher aux templates.
@rastapopoulos si tu les gères à l’extérieur et que c’est juste ton processus de packaging/déploiement qui les met dans le HTML, ça ne te suffit pas ? ;-)
oui ça c’est encore autre chose… avec un post-processeur ?
Du coup qu’appelles-tu les gérer à l’extérieur ? Dans ton HTML tu as par exemple des classes CSS classiques, par exemple class="bouton precedent", et ensuite comme tu dis que sur cet élément tu veux le décorer avec un pictogramme SVG ?
Oui, par exemple, et du coup une tâche (npm, Grunt, Gulp, whatever) prend le HTML, injecte le sprite SVG au début, puis des <use> aux bons endroits.
Oui, je comprends bien le principe du post-processing, ya pas de problèmes… mais ma question c’était plus, comme tu gères concrètement le fait de dire que tu veux tel pictogramme de décoration devant le texte de tel bouton ayant telle classe ? Où et comment tu décris ça ? C’est un peu une réinvention du CSS quoi ?… :D
Ah mais on ne s’est pas compris, comme eux je dis que "because our icons represent or reinforce content, they should exist in markup", donc ce n’est pas (complètement) de la décoration, donc pas du ressort de CSS.
Si tu regardes le source de ►http://play.esviji.com tu verras au tout début du <body> un sprite SVG qui contient des boutons que j’utilise après dans l’interface. Pour l’instant le sprite est en dur dans le HTML initial, mais j’ai prévu de l’externaliser dans les sources, pour qu’il ne soit inclus qu’à la « compilation ».
Ah oui mais moi je dis clairement l’inverse, que « une flèche vers la gauche », c’est une décoration pour un bouton « précédent ».
Une loupe c’est une décoration pour un bouton « rechercher ».
Etc etc. Donc ce n’est pas du tout du contenu (pour moi).
(Et une icône toute seule sans aucun label, c’est quasiment à coup sûr très mal.)
Après si le post-proc sert « juste » à dire qu’on transforme le span class « icone loupe » en lui assignant un SVG de loupe, évidemment là le truc est déjà dans les balises. Bon au moins ça permet de changer l’icône si le thème graphique change, sans toucher aux balises.
Mais pour moi c’est le fait même de dire d’aller chercher une icône de « flèche vers la droite » qui ne fait pas partie du contenu (et qui peut très bien changer).
Je comprends ta réticence de puriste, on pourrait continuer sans fin… ;-)
Une icône toute seule sans aucun label, c’est parfois nécessaire, et avec le SVG inline, ça peut être complètement accessible.
Hihi oui je sais. :D
Pour l’accessibilité, oui et non : pour moi l’accessibilité ce n’est pas QUE une histoire de lecteur d’écran (et là oui on peut lui faire lire un label, etc). Même si t’as des yeux, une icône toute seule, il y a un grand nombre de cas où le sens n’est potentiellement pas immédiat à beaucoup trop de monde, car il n’y a pas de standard. Ça fait trop d’apprentissage, trop lent, et donc ce n’est bon ni pour les gens qui ont un handicap de compréhension (il y a des handicaps cognitifs), ni pour l’optimisation des « conversions » dans un contexte marketing.
Les tests A/B sur hamburger seul VS mot « menu » le montrent assez bien. Et « Try Icon Labels instead of opening for interpretation. »
▻http://goodui.org/index.html#47
Je connais bien le problème du hamburger comme seule représentation du menu, effectivement. Nous sommes d’accord que c’est de l’accessibilité au sens cognitif, mais donc plus largement de l’UX pour tout le monde.
Mais imagine mettre des labels sur tous les boutons d’un WYSIWYG par exemple… :-p
Effectivement !
8828
13768 (maxi, 512, bravo @Fil !)
Quelle saloperie ce truc. #anti-travail
J’étais presque arrivé à 512, mais j’ai malencontreusement éteint Firefox sans faire exprès. Profitons-en pour fermer cet onglet !
Bravo ! @thomasschmit !
10844 avec 1024…
YES !
(un poil moins efficace que @thomasschmitt…)
Imbécile. J’ai réveillé la maison.
#not-safe-for-home
60016 et 4096 atteint
Une version ultérieure de 2048 donne la possibilité de continuer après avoir gagné. Ce n’était pas encore 4096…
https://dl.dropbox.com/s/dywhlmq0xwqwtll/Capture%20d%27%C3%A9cran%202014-03-16%2001.02.56.jpg
Hier, dans le bus, un joueur sur son smartphone (en tout début de partie, la plus grosse brique était 16 ou 32)
Une version WTF : ▻http://www.donaldguy.com/Flappy-Doge2048 via @WalterStephanie
Voilà une version un tout petit peu plus facile…
▻http://ehzhang.github.io/4
Et une version avec un « Undo » :
▻http://sujeetgholap.github.io/2048
Prise de tête, le 3D.
Mais peut-être plus simple (plus de degrés de liberté ?)
Réussi du premier coup…
ce truc commençait vraiment à me rendre fou
Marrant, moi j’ai fait une partie puis je n’y ai pas retouché…
Il faut dire que j’ai un autre jeu qui m’obsède… :-)
►http://play.esviji.com
Rhâââ, 212396, avec 16384
Je fais une pause…
Vous êtes tous très forts parce que moi je n’arrive même pas à comprendre ce que veut dire avoir fait XXX avec XXXXX
Cela dit je fais pas non plus beaucoup d’effort :)
seulement 1% des 75 millions de parties jouées à « 2048 » ont été remportées !
Bravo ! vous êtes des monstres géniaux !
On devient fou, ou ça nous révèle qu’on l’était déjà ?
Faut-il présenter 2048 (sur ST) ?
« 2048 », stop ou encore ?
▻http://www.lemonde.fr/vous/article/2014/03/27/2048-stop-ou-encore_4390930_3238.html
Faut-il encore présenter 2048 ? Depuis le 9 mars, date de sa mise en ligne, le jeu de reflexion du développeur Web italien Gabriel Cirulli « ruine votre productivité au travail », comme le présageait son créateur de 20 ans. Chronophage et addictif, il donne également lieu à une propagation en ligne d’astuces pour en voir le bout du tunnel et à des versions détournées.
Ce jeu a conquis plus de 7,2 millions de joueurs qui enchaînent frénétiquement les parties.
Qui donne le site listant toutes les variantes (sauf les bites) :
▻http://allthe2048.com
Et qui permet de ne pas manquer celles là, donc :
▻http://www.matimenkes.com/2048/justinbieber
▻http://www.fradifrad.com/app/PENIS2048
Blog — Gabriele Cirulli
▻http://gabrielecirulli.com/blog
The last few weeks have been quite a wild ride for me. In March, I built a game called 2048 just for fun, and released it as open-source software on GitHub. Over the course of the following weeks it unexpectedly became a worldwide hit, and it has been played by more than 23 million people.
Il sort donc finalement une appli iphone / android avec un bandeau publicitaire en bas, et un achat ) 0,89 euro pour enlever la pub.
