#grunt

klaus++ @klaus 16/03/2019

Filmspotting : Nachrede auf Klara Heydebreck | Deutsche Kinemathek
▻https://www.deutsche-kinemathek.de/de/besuch/veranstaltungskalender/nachrede-auf-klara-heydebreck-eberhard-fechner
A voir - avec un peu de chance le cinéma Arsenal montrera une copie 16mm de ce film documentaire remarquable et émouvant. C’est le récit d’une vie de femme à Berlin entre 1896 et 1969. Pour les non-berlinois y a la copie youtube.
▻https://www.youtube.com/watch?v=-1qH6wQurSQ
25.3.2019 19:00 - Kino Arsenal (BRD 1969, Regie: Eberhard Fechner)
Die einstündige Produktion, gedreht auf 16mm-Material, fällt durch die üblichen Formatraster der Fernsehsender und Kinoprogramme, so dass diese Wiederaufführung eine seltene Gelegenheit der Wiederbegegnung mit diesem stilbildenden Frühwerk Eberhard Fechners bedeutet.
Arsenal, Kino 2, Eintritt: 8 Euro
▻https://de.wikipedia.org/wiki/Klara_Heydebreck
Für einen Dokumentarfilm zum Thema Selbstmord, für den er nach eigenen Angaben kein Drehbuch geschrieben hatte, sondern sich von den Rechercheergebnissen leiten lassen wollte, besuchte Eberhard Fechner die Berliner Polizei und griff zufällig den Todesfall Klara Heydebrecks unter mehreren an diesem Tag gemeldeten heraus. Er suchte Kontakt zu ihrer Familie, den Nachbarn und ehemaligen Arbeitskollegen sowie den mit ihrem Tod befassten Dienststellen. Die Familie überließ ihm den Nachlass Klara Heydebrecks; aus diesen Dokumenten und Interviews mit den Personen, die Klara gekannt hatten, entstand der Ende 1969 erstmals ausgestrahlte Dokumentarfilm Nachrede auf Klara Heydebreck. Blick auf ein unter- und fehleingeschätztes Leben. Durch die Auswertung des Nachlasses und die Befragung des Umfelds konnten die sozialen und wirtschaftlichen Rahmenbedingungen einer Frau dargestellt werden, die sich dem herrschenden Frauenbild wohl nicht anpassen wollte, in ihrem Umfeld wegen ihrer kulturellen Interessen auf Unverständnis stieß und schließlich völlig vereinsamte. Die am Anfang des Films gestellte Frage, warum Klara ihr Leben beendet hatte, musste dabei offenbleiben
SELBSTMORD : Schikane des Teufels - DER SPIEGEL 38/1970
▻http://www.spiegel.de/spiegel/print/d-44906627.html
Diesen Dokumentar-Epilog hat Fechner mit zeitgeschichtlichen Aspekten ergänzt. Aus Lohnstreifen’ Rentenbescheinigungen und Arbeitslosen-Papieren errechnete er beispielsweise die finanzielle Bilanz dieses einfachen Lebens:
In 57 Jahren hat Klara Heydebreck 129 000 Mark verdient, 2263 Mark pro Jahr.
Als die Feuerwehr Ihren Leichnam im Krankenhaus „abgeladen“ hatte (so eine Pflegerin), waren noch 6,49 Mark auf Ihrem Konto. Die Kripo registrierte den Vorgang Heydebreck — einen von 13 000 westdeutschen Selbstmordfällen im Jahr — unter dem Aktenzeichen AZ KapAr 483/69.
„Einsamkeit“, so hatte Klara Heydebreck einst an ihre Schwester geschrieben, „kann sehr schön sein. Doch Mangel leiden an lebensnotwendigen Dingen ist eine Schikane des Teufels.“
Solchen Leidenswegen ist das Fernsehen schon dann und wann nachgegangen. Fechners Reportage ist anders: Ihre Anteilnahme, Ihre Eindringlichkelt ist wahrlich eine Stunde vor dem Bildschirm wert.
Eberhard Fechner (1926 - 1992)
▻https://de.wikipedia.org/wiki/Eberhard_Fechner
Fechner war ein begnadeter Interviewer. So interviewte er um 1975 die vier damals noch lebenden Mitglieder der Comedian Harmonists und um 1979–81 für seine Dokumentation Der Prozeß mehrere Zeugen und Angeklagte des Majdanek-Prozesses. Ähnlich wie Claude Lanzmann verstand er es, durch geduldiges Zuhören und Nachfragen auch sehr persönliche, kontroverse und tief verborgene Erinnerungen seiner Interviewpartner hervorzulocken. Daneben übernahm er immer wieder auch Aufgaben als Schauspieler in Fernsehfilmen.
Site web sur Eberhard Fechner
▻https://web.archive.org/web/20170920124604/http://www.eberhardfechner.de
La collection Eberhard Fechner à l’Akademie der Künste Berlin
▻https://archiv.adk.de/bigobjekt/39883
#Allemagne #Berlin #Wedding #Grüntaler_Straße #histoire #film #femmes #suicide #auf_deutsch

klaus++ @klaus

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016

» 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

Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  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 @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016
  
  @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 ? ;-)
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  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 ?
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016
  
  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.
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  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
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016
  
  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 ».
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  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).
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 4/02/2016
  
  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.
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 4/02/2016
  
  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
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 4/02/2016
  
  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
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 20/01/2016

MicrosoftDX/grunt-webstandards · GitHub
▻https://github.com/MicrosoftDX/grunt-webstandards
"grunt-webstandards is a #Grunt plugin that improves your site with modern web standards. It checks if your website is using correct CSS prefixes, using up to date JavaScript libraries, using responsive web design, if you’re defining platform icons, … Tags: Grunt #Gulp qualité #clevermarks #VorlonJS
#qualité
- #Github
Nicolas Hoizey @nhoizey CC BY-NC-SA
Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 8/06/2015

addyosmani/critical · GitHub
▻https://github.com/addyosmani/critical
Tags : #webperf #critique #CSS #Gulp #Grunt #abovethefold

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 13/12/2014

#grunt-real-favicon: Generate a multiplatform #favicon with RealFaviconGenerator
▻https://github.com/RealFaviconGenerator/grunt-real-favicon
Tags : favicon #icone grunt

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 25/09/2014

Solid #Grunt: from spaghetti to rock solid code
▻https://oncletom.io/talks/2014/sotr
Tags : Grunt #optimisation

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 29/03/2014

Supercharging your Gruntfile: How to squeeze the most out of your build configuration
▻http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile
Tags : #Grunt #todo

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
baroug @baroug 10/03/2014

7

7

Metalsmith
▻http://www.metalsmith.io
All of the logic in Metalsmith is handled by #plugins. You simply chain them together. (…) Each plugin is invoked with the contents of the source directory, with every file parsed for optional #YAML front-matter
@fil
- #You
baroug @baroug
- RastaPopoulos @rastapopoulos CC BY-NC 10/03/2014
  
  Bientôt il y aura autant de générateur de sites statiques que de développeur⋅euse⋅s web. :)
  Mais sinon ça a l’air cool quand tout est développé en plugins dès le départ comme ça.
  
  RastaPopoulos @rastapopoulos CC BY-NC
- 0gust1 @0gust1 CC BY-NC 10/03/2014
  
  Bientôt il y aura autant de générateur de sites statiques que de développeur⋅euse⋅s web. :)
  C’est comme les outils de build basés sur node.js. ^^
  Sinon, c’est vrai qu’il a l’air sympa à première vue, j’ai pas eu le temps de bcp regarder.
  
  0gust1 @0gust1 CC BY-NC
- 0gust1 @0gust1 CC BY-NC 15/04/2014
  
  Hey, j’ai mis les mains dedans. C’est plutôt très sympa.
  On retrouve le même principe de fonctionnement que #wintersmith et une syntaxe proche de #gulp.
  A la différence de #grunt / #gulp, ce n’est pas un moteur de tâches qui peut servir à faire de la génération de sites statiques, mais l’inverse.
  On a donc plein de truc très utiles pour faire des sites web (gestion de permalinks, des titres, des collections de posts...), qui sont pénibles à refaire en grunt/gulp.
  Et par rapport à wintersmith, c’est plus clair, plus facilement hackable (et sans #coffeescript).
  J’ai même réussi à faire implémenter une fonctionnalité de livereload en 1 soirée (j’espère que l’auteur metalsmith-watch prendra en compte ma demande d’évo ^^).
  Bref, je me demande si #wintersmith n’a pas du souci à se faire, chez moi.
  
  0gust1 @0gust1 CC BY-NC
Écrire un commentaire
0gust1 @0gust1 CC BY-NC 17/02/2014

YANBT — yet another nodeJS build tool :
▻http://www.solitr.com/blog/2014/02/broccoli-first-release/index.html
Après #grunt, après #gulp, voici #broccoli.
http://www.bearsupply.net/wp-content/uploads/2012/04/Broccoli-Bunch.jpg
Il a des arguments, quand même, mais c’est fatiguant.
#javascript #nodejs #build-tool

0gust1 @0gust1 CC BY-NC

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 17/02/2014

Une présentation de #Bower, #Grunt et #Yeoman
▻http://florianlb.fr/talks/2014/yeoman
Tags : Yeoman Grunt Bower

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
Fil @fil 8/02/2014

6

6

Getting Started With #Pattern_Libraries ∙ An A List Apart Blog Post
▻http://alistapart.com/blog/post/getting-started-with-pattern-libraries
▻http://patterns.alistapart.com
#design #web
- #Brad Frost
Fil @fil
- RastaPopoulos @rastapopoulos CC BY-NC 8/02/2014
  
  Même chose identifiée sous le nom de « style guide », recensé par @nhoizey il y a 2 mois :
  ▻http://seenthis.net/messages/204620
  #style_guide ou #styleguide #qualité-web #bonnes-pratiques
  
  RastaPopoulos @rastapopoulos CC BY-NC
- 0gust1 @0gust1 CC BY-NC 10/02/2014
  
  Il y a beaucoup d’intérêts ; d’avantages et de bénéfices à construire ce genre d’outils. Par contre, il faut également les maintenir...
  Je dois actuellement démarrer la génération d’un guide de style, je ne referais pas les mêmes erreurs qu’auparavant : il sera le plus possible généré automatiquement (grunt, fichiers en markdown). Faire un guide de style en HTML pur est bien trop coûteux à maintenir et rapidement source d’erreurs. Enfin, l’inclusion d’outils d’automatisation permet également de jouer des tests directement sur le guide de style (tests de unitaires, test d’intégration de composants ).
  
  0gust1 @0gust1 CC BY-NC
- 0gust1 @0gust1 CC BY-NC 10/02/2014
  
  Il semble y avoir 2 manières populaires de commenter ses CSS / LESS / etc.. de manière à générer automatiquement une bibliothèque de motifs / un guide de style :
  – Styledocco : ▻http://jacobrask.github.io/styledocco
  – KSS : ▻https://github.com/kneath/kss
  J’ai essayé grunt-styleguide ( ▻https://github.com/indieisaconcept/grunt-styleguide ), que j’ai utilisé avec Styledocco. Honnêtement c’est vraiment vraiment sympa, voir même un peu magique (puisque styledocco fournit déjà des styles et templates pour le site généré de documentation).
  Et je trouve le formalisme styledocco vraiment lisible et agréable : on écrit ses sommentaires CSS en markdown et boum, voilà une super doc qui tient déjà la route.
  cc @tetue ?
  #grunt #bibliothèque_de_motifs
  
  0gust1 @0gust1 CC BY-NC
- RastaPopoulos @rastapopoulos CC BY-NC 11/02/2014
  
  Bon alors j’en profite, puisque tu commences à connaître Grunt et assimilés, et que tu connais SPIP, et que tu parles français.
  Donc : est-ce qu’on peut utiliser ce type d’outils dans un projet quelconque, pas du tout JS/Node/etc ? Par exemple, est-ce que je peux utiliser Grunt lorsque j’intègre un site SPIP, dans mes plugins-squelettes et mes plugins-thèmes (découpage Z) ? Et si oui comment ?
  
  RastaPopoulos @rastapopoulos CC BY-NC
- 0gust1 @0gust1 CC BY-NC 11/02/2014
  
  Par exemple, est-ce que je peux utiliser Grunt lorsque j’intègre un site SPIP, dans mes plugins-squelettes et mes plugins-thèmes (découpage Z) ?
  Carrément, Grunt c’est juste un automatiseur de tâches, comme il est JS, et utilise node, il a des affinités avec cet écosystème, mais on peut s’en servir pour n’importe quoi.
  Ce qui est intéressant, c’est qu’une fois qu’on a compris comment ça marche, il y a très peu de choses à coder, à écrire. La plupart du temps ça se résume à un path d’entrée (avec du ’globbing’, comme dans zsh - « /repertoire//.js » = tous les fichiers js situés dans répertoire et les sous-répertoires), des options, et un path de sortie (si il y a écriture de fichiers).
  Par exemple, pour le guide de style dont je parle plus haut, j’ai juste ajouté ça dans mon « gruntfile » :
  styleguide : {
  options : {
  framework : {
  name : ’styledocco’
  },
  name : ’Guide de style de mon appli’
  /,template : {include : [’plugin.css’, ’app.js’]}/
  },
  doc_projet : {
  files : {
  ’projet/dossier/documentation/’ :’projet/dossier/css’
  }
  }
  
  et pour lancer la tâche : « grunt styleguide:doc_projet »
  Pour faire des squelettes, oui, je pense qu’il doit y avoir des choses intéressantes : optimisation des images, génération automatique de sprite, génération de webfonts, vérification et validation du code JS, concaténation, copie, compression de fichiers etc...
  Et si oui comment ?
  Je ne sais pas ;) , il y a tellement de plugins, de possibilités, que ça doit partir du besoin. Si vous me donnez des cas concrets, je pourrais en dire plus :)
  C’est quoi les trucs qui font braire lorsque tu fais des squelettes ou des thèmes ?
  Les grandes étapes :
  *Niveau Système :
  – installer node.js
  – installer l’interface cli de grunt ("npm install -g grunt-cli")
  Niveau Projet :
  – créér un fichier ’package.json’ à la raçine du projet (le dossier de ton squelette, je dirais) : soit à la main, en copiant collant un truc trouvé en ligne, soit en tapant « npm init ». Ce fichier contiendra les dépendances et la description de ton projet grunt.
  – installer grunt (et les plugins qui t’intéressent) : "npm install grunt —save-dev’. Le flag à la fin va dire à npm (node package manager) d’écrire la dépendance dans le fichier package.json.
  L’installation va créer un répertoire node_modules à coté du fichier package.json. La plupart du temps, il faut dire au gestionnaire de source d’ignorer ce répertoire.
  – créer un fichier Gruntfile.js (le plus simple est de recopier un exemple sur le site de grunt).
  – modifier le Gruntfile.js en fonction de ses besoins et du projet.
  Bref, l’automatisation d’un projet via grunt peut se résumer à 2 fichiers : le package.json et le Gruntfile.js. Sur la machine de quelqu’un qui a déjà node.js, il suffira juste de taper « npm install » dans le répertoire pour que toutes les dépendances, plugins et autres soient installés.
  Pour démarrer :
  ▻http://gruntjs.com/getting-started
  Les plugins :
  ▻http://gruntjs.com/plugins
  [edit : comment on fait pour mettre du code dans seenthis ? là mon exemple de path avec globbing casse tout...]
  
  0gust1 @0gust1 CC BY-NC
- b_b @b_b PUBLIC DOMAIN 18/02/2014
  
  Un article à ce sujet par ici : ▻http://mike.teczno.com/notes/being-a-client.html
  On y trouve un lien vers cette page : ▻http://codeforamerica.clearleft.com
  
  b_b @b_b PUBLIC DOMAIN
- RastaPopoulos @rastapopoulos CC BY-NC 18/02/2014
  
  À noter que le dernier lien utilise la même présentation que celui d’A List Apart.
  Ya ça aussi, un site où sont collectés tous les modèles et toutes les ressources de Brad Frost autour du #responsive :
  ▻http://bradfrost.github.io/this-is-responsive/patterns.html
  ▻http://bradfrost.github.io/this-is-responsive/resources.html
  
  RastaPopoulos @rastapopoulos CC BY-NC
- RastaPopoulos @rastapopoulos CC BY-NC 18/02/2014
  
  Sinon pour @0gust1, sur SPIP/Grunt, je ne sais plus… :D
  En fait, le Less et le Scss, il y a des plugins qui les compilent magiquement en interne, côté serveur. Puis ensuite il y a déjà un plugin qui compresse tous les CSS et JS, côté serveur aussi. Du coup, il ne reste plus grand chose à faire en local…
  Du coup non, pour l’instant, je ne vois pas à quoi ça pourrait me servir. Mais à chaque fois que je vois un article ou une personne qui en parle, je me demande toujours si ça peut m’aider… :D
  
  RastaPopoulos @rastapopoulos CC BY-NC
- 0gust1 @0gust1 CC BY-NC 18/02/2014
  
  @rastapopoulos : c’est vrai que grunt est souvent utilisé pour du build. Ce qui est aussi intéressant, ce sont les fonctions d’automatisation du workflow de dev :
  – grunt-contrib-watch, qui permet de « surveiller » un ensemble de fichiers et lancer automatiquement des traitements si changement (modification, ajout, suppression).
  – la génération de sprites et de webfonts d’icônes.
  – les outils de qualité de code (jshint).
  – les plugins d’upload automatique.
  Grâce à ça, c’est possible de gagner beaucoup de temps, et surtout de garder son fil de pensées, sa concentration quand on fait de la conception front : j’ai cote à cote mon éditeur et mon navigateur, et au moindre changement, je vois tout de suite le résultat.
  
  0gust1 @0gust1 CC BY-NC
- JeremyRaffin @jeremyraffin 23/05/2014
  
  Je vous rejoins concernant le gain de temps avec Grunt concernant l’automatisation de taches, il faut prendre le temps de bien configurer ses taches et derrière ça roule !
  C’est super pratique d’avoir une version dev (avec livereload) sur laquelle travailler confortablement et pouvoir en une ligne de commande générer une version production avec toutes les optimisations nécessaires (compression images, minification, concaténation ...)
  Concernant les guides de styles j’utilise grunt-styleguide avec KSS comme framework et j’ai publié un article sur le sujet ▻https://medium.com/@JeremyRaffin/4abccdcbab29
  Ca permet de pouvoir rapidement générer un styleguide maintenable facilement.
  
  JeremyRaffin @jeremyraffin
Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 1/02/2014

1

1

Using #Grunt for #PHP
▻http://chrsm.org/post/using-grunt-for-php
here’s how I use Grunt for PHP Tags : PHP Grunt
- #PHP
Nicolas Hoizey @nhoizey CC BY-NC-SA
Écrire un commentaire
b_b @b_b PUBLIC DOMAIN 24/01/2014

4

4

Getting from #GitHub to #WordPress
We now manage our WordPress theme in jquery-wp-content, and the content for all of our sites are stored and managed in individual repositories on GitHub. Storing the content of each site on GitHub gives us all the benefits of tracking tasks in issues, discussions on pull requests, visual diffs for changes, etc. The content of each page is generated by grunt-jquery-content from #HTML, #XML or #Markdown source depending on the repository. This content is then synced to WordPress using grunt-wordpress. Just like our code, all of our site content is open source and released under the terms of the MIT license, with the exception of our branding which is not licensed for use by others.
▻http://blog.jquery.com/2014/01/23/getting-from-github-to-wordpress
▻http://contribute.jquery.org/web-sites/#grunt-getting-static-content-into-wordpress
Ça devrait intéresser @fil
- #Github
- #HTML
- #XML
- #HTML
- #XML
b_b @b_b PUBLIC DOMAIN
- RastaPopoulos @rastapopoulos CC BY-NC 24/01/2014
  
  #Grunt #synchronisation #CMS #gestion_de_contenu
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Fil @fil 27/01/2014
  
  à lire le code je ne vais pas essayer d’utiliser les mêmes #outils — mais la démarche est intéressante
  à noter, les meta-données d’un article sont stockées sous la forme suivante en tête du fichier (html) du contenu :
  <script>{ "title": "My Post", "termSlugs": { "<taxonomy_name>": [ "<hierarchical_slug>" ] } }</script> <p>Content - I'm a post!</p> contenu…
  
  Fil @fil
Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 13/01/2014

7

7

motherjones/grunt-html-smoosher
▻https://github.com/motherjones/grunt-html-smoosher
“A #grunt task which takes a html file, finds all the #CSS and js links, and outputs a version with all the css and js written #inline for ease of pasting into a cms” Tags: grunt inline #webperf CSS #JavaScript

Nicolas Hoizey @nhoizey CC BY-NC-SA
- Fil @fil 13/01/2014
  
  l’idéal serait d’avoir ça en ligne de commande :
  smoosher $URL > truc-final.html
  
  Fil @fil
- Nicolas Hoizey @nhoizey CC BY-NC-SA 13/01/2014
  
  Ça ne doit pas être bien compliqué pour quelqu’un qui fait du #Node.js … ou alors au moins une conf Grunt qui ne fait que ça.
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- 0gust1 @0gust1 CC BY-NC 14/01/2014
  
  Toujours motivé @fil ? J’ai bidouillé hier soir qq chose qui marche presque, il me reste à rendre synchrones les appels ’get’ vers les CSS / JS.
  De quoi aurais-tu besoin comme options pour la ligne de commande ?
  
  0gust1 @0gust1 CC BY-NC
- Fil @fil 14/01/2014
  
  en option je dirais « minifier », « minifier-js », « minifier-css », éventuellement en passant en argument le minifier souhaité ; éventuellement, « mogrify » (pour envoyer un email avec le résultat), « strip-js » et « strip-css » pour virer js et css ; sinon, je sais pas :)
  pour mogrify on peut le faire à part via #emogrifier ▻http://seenthis.net/messages/127820
  
  Fil @fil
- 0gust1 @0gust1 CC BY-NC 14/01/2014
  
  Ok. Et plusieurs URL en arguments ?
  
  ça peut accélérer les choses (pas besoin de charger les librairies nodeJS à chaque url à traiter).
  Par contre, rediriger la sortie vers un seul fichier ne sera plus possible, sauf si on veut plein de pages html concaténées (on peut toujours écrire un genre de séparateur, sinon).
  
  0gust1 @0gust1 CC BY-NC
- Fil @fil 14/01/2014
  
  s’il faut choisir je préfère conserver la sortie stdout, quitte à faire page par page
  
  Fil @fil
- 0gust1 @0gust1 CC BY-NC 15/02/2014
  
  Bon, j’ai pas eu beaucoup de temps, mais j’ai quelque chose qui tourne. Le code est encore assez moche, car j’ai essayé plein de trucs.
  Les retours m’intéressent car je n’ai pas très confiance dans la bibliothèque utilisée pour manipuler le html ("cheerio") : par exemple, sur ▻http://seenthis.net, un fichier js n’est pas traité.
  @robin m’a conseillé d’utiliser « whacko », mais celle ci ne renvoie pas de promises...
  ▻https://github.com/0gust1/cli-html-smoosher
  
  0gust1 @0gust1 CC BY-NC
- 0gust1 @0gust1 CC BY-NC 15/04/2014
  
  À tout hasard, @fil (ou quelqu’un d’autre) a pu tester ? ^^
  
  0gust1 @0gust1 CC BY-NC
- Fil @fil 12/05/2014
  
  hé bien ça marche nickel, #merci !
  
  Fil @fil
- 0gust1 @0gust1 CC BY-NC 30/06/2014
  
  Plop,
  J’ai fait une mise à jour avec les options ’—strip’, ’—strip_css’ et ’—strip_js.
  Pour mettre à jour une installation existante, faites un « git pull » dans le répertoire où vous aviez cloné le dépot.
  
  0gust1 @0gust1 CC BY-NC
Écrire un commentaire
0gust1 @0gust1 CC BY-NC 26/12/2013

►http://www.insertafter.com/articles-gulp_vs_grunt.html
#gulp sera-t-il le successeur de #grunt ?
Analyse des avantages de Gulp par rapport à Grunt, par nicolas froidure (@nfroidure)
#javascript #task-runner
.

0gust1 @0gust1 CC BY-NC

Écrire un commentaire
robin @robin CC BY 2/12/2013

1

1

wearefractal/gulp
▻https://github.com/wearefractal/gulp
The streaming build system
This looks indeed to be a lot more understandable than the rather intricate Grunt.

robin @robin CC BY
- 0gust1 @0gust1 CC BY-NC 2/12/2013
  
  #javascript #pipes #streams #nodejs #grunt #gulp
  
  0gust1 @0gust1 CC BY-NC
- 0gust1 @0gust1 CC BY-NC 26/12/2013
  
  gulp ou grunt ? : ►http://www.insertafter.com/articles-gulp_vs_grunt.html
  
  0gust1 @0gust1 CC BY-NC
Écrire un commentaire

0gust1 CC BY-NC 27/11/2013

Usable and flexible Gruntfile modularization

La suite et le début de la fin de mes interrogations sur la modularisation de la configuration et des tâches #grunt, pour un gros projet de « refactoring »

Je voulais quelque chose de simple, qui autorise un découpage orienté fonctionnalité, maintenable et facilitant l’appropriation par les integrateurs / devs front de l’équipe.

Plutôt que d’avoir un énorme Gruntfile inmaintenable et incompréhensible, on le découpe en petits morceaux consistants avec l’organisation fonctionnelle du site.

▻https://gist.github.com/0gust1/7683132

/*global module:false*/
module.exports = function(grunt) {
var env = process.env.NODE_ENV || 'dev';
var _ = require('lodash');
/*** External config & tasks filepaths ***/
//we have 1 base config, and possibly many module-specific config
var configLocations = ['./grunt-config/default_config.js', './grunt-config/**/config.js'];
//we have 1 base tasks definition, and possibly many module-specific config
var tasksLocations = ['./grunt-config/default_tasks.js', './grunt-config/**/tasks.js'];
/* Typical project layout (matching with the globbing pattern above - adapt to your project structure) :

  ├── Gruntfile.js 
  ├── package.json
  ├── grunt-config
  │   ├── homepage
  │   │   └── config.js
  │   ├── navigation
  │   │   └── config.js
  │   ├── module1
  │   │   ├── config.js
  │   │   └── tasks.js
  │   ├── default_config.js
  │   ├── default_tasks.js
  │   └── template_module_grunt.txt
  ├── website_directory1
  │   ├── mdp
  │   ├── multimedia-storage
  │   ├── mv-commit.sh
  │   ├── query
  │   ├── temp
  │   └── tmp
  └── website_directory2
      ├── crossdomain.xml
      ├── css
      ├── favicon.ico
      ├── fonts
      :
      :
      :

  */
/***************** External configuration management ***********************************/
var configFiles = grunt.file.expand({
filter: "isFile"
}, configLocations );
grunt.log.writeln('Gathering external configuration files'.underline.green);
grunt.log.writeln("configFiles : " + grunt.log.wordlist(configFiles, {
separator: ', ',
color: 'cyan'
}));
var configArray = configFiles.map(function(file) {
grunt.log.writeln("=> importing : " + file);
return require(file)(grunt, env);
});
var config = {};
configArray.forEach(function(element) {
config = _.merge(config, element);
});
grunt.initConfig(config);
/***************** Task loading & registering *******************************************/
// We load grunt tasks listed in package.json file
require('load-grunt-tasks')(grunt);
/****** External tasks registering ****************/
grunt.log.writeln('Gathering external task files'.underline.green);
var taskFiles = grunt.file.expand({
filter: "isFile"
}, tasksLocations);
grunt.log.writeln("task files : " + grunt.log.wordlist(taskFiles, {
separator: ', ',
color: 'cyan'
}));
taskFiles.forEach(function(path) {
grunt.log.writeln("=> loading & registering : " + path);
require(path)(grunt);
});
grunt.registerTask('default', ['attention:gruntfile', 'jshint:gruntfile', 'logConfig']);
grunt.registerTask('checkGruntFile', 'Tâche par défaut - aide et vérification du gruntfile', function() {
grunt.log.subhead('* Tâche par défaut - aide et vérification du gruntfile *');
grunt.log.writeln('Exécutez "grunt -h" pour avoir plus d\'informations sur les tâches disponibles');
grunt.log.writeln('...');
grunt.log.subhead('Vérification du gruntfile...');
grunt.task.run(['jshint:gruntfile']);
});
//write the generated configuration (for debug)
grunt.registerTask('logConfig', 'Ecrire la configuration générée', function() {
//grunt.task.run(['attention:gruntfile']);
grunt.log.subhead('* Configuration générée : *');
grunt.log.writeln(JSON.stringify(config, undefined, 2));
});
};

Pour le début de ma démarche : ▻http://seenthis.net/messages/198290

#javascript #webdev #front_end #node_js

0gust1 CC BY-NC

0gust1 @0gust1 CC BY-NC 6/12/2013

Juste pour dire que j’ai corrigé un bug dans le chargement des fichiers de tâche (’grunt.task.loadTasks()’ ne prend pas/plus en paramètre un filepath mais un path, ce qui foutait tout par terre). Désormais j’utilise ’require()’.
Attention, du coup l’embed sur @seenthis n’est plus à jour.

0gust1 @0gust1 CC BY-NC

Écrire un commentaire

0gust1 @0gust1 CC BY-NC 26/11/2013

10

10

Générer sa propre webfont à partir d’images SVG, avec codes unicodes personnalisés. Le tout automatisé avec #Grunt.
En gros, on met des fichiers svg dans un répertoire, et des fichiers .eot, .woff, .ttf et .svg sont générés.
L’article expliquant la démarche :
▻http://www.insertafter.com/articles-gruntjs_font_icons.html
Le plugin grunt :
▻https://github.com/nfroidure/grunt-svgicons2svgfont
Merci @nfroidure :)
#javascript #nodejs #webfont #typographie #unicode

0gust1 @0gust1 CC BY-NC
- baroug @baroug 26/11/2013
  
  #icones
  
  baroug @baroug
- Maïeul @maieul 26/11/2013
  
  ca veut dire quoi avec « codes unicodes personnalisés ». c’est à dire que cela met des caractères dans les parties unicodes « non affectées à des caractères » ?
  
  Maïeul @maieul
- 0gust1 @0gust1 CC BY-NC 26/11/2013
  
  Oui, j’ai l’impression, mais seulement si tu veux. :)
  Il faut nommer l’image source svg avec l’unicode souhaité : « uE002-arrow-down.svg » par exemple.
  Un autre intérêt de générer ses fontes avec des noms de fichiers d’icônes préfixés avec le caractère Unicode, est de pouvoir utiliser le bon caractère Unicode quand cela fait sens.
  Par exemple, si vous avez un icône « plus » permettant d’avoir un icône sur un bouton d’ajout au panier, cela peut être utile d’utiliser le code Unicode du signe « + » (U+002B) plutôt qu’un code faisant parti de la plage des codes réservés à un usage privé.
  Utile aussi pour garder un site - utilisant les webfonts pour les icônes ou pictos - utilisable sur des connexions lentes ou dégradées.
  
  0gust1 @0gust1 CC BY-NC
- Pinkilla @pinkilla CC BY-NC 28/11/2013
  
  @Maïeul C’est même « pire » l’idée est de ne pas avoir de caractères pour cette police particulière que ne servira qu’à afficher des icones.
  L’avantage étant que ces icones auront un beau rendu quelle que soit la taille …
  ►http://namok.be/blog/?post/2013/11/10/add-by-hands
  
  Pinkilla @pinkilla CC BY-NC
Écrire un commentaire
0gust1 @0gust1 CC BY-NC 19/11/2013

3

3
▻https://gist.github.com/0gust1/7543330
├── Gruntfile.js ├── grunt-tasks │ ├── options <= config directory │ │ ├── imagemin.js <= config file for the imagemin task │ │ ├── notify.js │ │ └── watch.js │ ├── set_config.js <= custom task │ └── set_global.js <= another custom task
Inventory of solutions to modularize grunt configuration for large project & (legacy) codebases
Je m’interroge sur les bonnes façons d’utiliser #grunt pour gérer la couche « front-end » de gros sites. J’ai déjà recensé quelques outils, on m’a fait quelques retours. Je prends tout.
#javascript #webdesign #webdev #nodejs
0gust1 @0gust1 CC BY-NC
Écrire un commentaire
0gust1 @0gust1 CC BY-NC 5/10/2013

More maintainable Gruntfiles
▻http://www.thomasboyt.com/2013/09/01/maintainable-grunt.html
#grunt #javascript #build #node.js

0gust1 @0gust1 CC BY-NC

Écrire un commentaire
0gust1 @0gust1 CC BY-NC 30/09/2013

2

2

▻http://www.google.com/webdesigner
Google y va de son environnement d’animation et de design HTML.
Très très orienté « bannières de pub » au premier abord. On verra les premier retours.
ça pourrait être pas mal si cette solution est scriptable et intégrable à des outils ou workflows sur mesure (logiciels 3D, écosystème #node.js / #Grunt)
#webdesign #css3 #google #animation
- #Google
0gust1 @0gust1 CC BY-NC
- Fil @fil 30/09/2013
  
  on a assez de mal à se dépêtrer des outils de google, je suis pas tellement pour s’engrener dans un de plus
  
  Fil @fil
Écrire un commentaire
0gust1 @0gust1 CC BY-NC 26/09/2013

9

9

Je m’intéresse aux générateurs de sites statiques de l’écosystème de #node.js :
Mes critères sont : simplicité, rapidité de prise en main, extensibilité, pas de langage de templates tout pourri (genre jade ou mustache).
Les #outils intéressants (selon moi) :
– Wintersmith : ▻http://wintersmith.io
– Assemble : ▻http://assemble.io
– Kerouac : ▻https://github.com/jaredhanson/kerouac
Après quelques essais, j’ai une petite préférence pour wintersmith (+ #nunjucks pour les templates).
Quelques articles à propos de sa prise en main / configuration :
▻http://davidtucker.net/articles/introduction-to-wintersmith
▻http://www.alexnormand.com/blog/2012/07/switching-to-wintersmith
▻http://www.da5hed.com/articles/wintersmith
#javascript #build #static_site #site_statique

0gust1 @0gust1 CC BY-NC
- 0gust1 @0gust1 CC BY-NC 26/09/2013
  
  Je soupçonne fortement la plate-forme de blogging « ghost » (▻http://seenthis.net/messages/171633) (#hype, beta fermée toussa) d’utiliser kerouac dans son architecture.
  
  0gust1 @0gust1 CC BY-NC
- Fil @fil 26/09/2013
  
  #wintersmith : belle découverte !
  
  Fil @fil
- Fil @fil 26/09/2013
  
  autre très intéressant article sur le blog de davidtucker, sur l’automatisation de son workflow avec #grunt.js
  ▻http://davidtucker.net/articles/automating-with-grunt
  
  Fil @fil
- Fil @fil 26/09/2013
  
  et l’article que tu cites de da5hed parle de son intégration avec #pandoc, notamment pour avoir du #TeX etc, via wintersmith-pandoc
  ▻https://github.com/lhagan/wintersmith-pandoc
  
  Fil @fil
- 0gust1 @0gust1 CC BY-NC 26/09/2013
  
  Merci !
  J’ai pas eu le temps de détailler tout à l’heure, mais je me disais bien que ça intéresserait les matheux du coin ;)
  #mathématiques
  
  0gust1 @0gust1 CC BY-NC
Écrire un commentaire