broncowdd / SnippetVamp

Store, share & manage your snippets easily
45 stars 12 forks source link

export pdf cheatsheet #38

Open tmos opened 11 years ago

tmos commented 11 years ago

Salut, Une idée qui me semble pas mal (dites moi ce que vous en pensez), serait de proposer l'export en pdf de tous les snippets d'un tag, cela permettrait d'en faire une cheatsheet imprimable et épinglable devant son bureau.

Evidement cela est surtout efficace dans l'optique que l'utilisateur ait des petits morceaux de code (même plutôt des commandes).

Voilà, c'était une idée, je n'ai pas les compétences pour la mettre en oeuvre, ça pourra peut être aider :)

Bonne continuation

broncowdd commented 11 years ago

C'est une excellent idée ! Je vais y réfléchir ;)

tmos commented 11 years ago

Ravi que ça te branche :) Bonne continuation, snipetsVamp est vraiment top (je m'en sers pour me rapeller des commandes/langages vus en cours perso) !

@bientôt :)

Phyks commented 11 years ago

J'ai réalisé un petit PoC de ce que ça pourrait donner sur mon fork de SnippetVamp (phyks/SnippetVamp). Il est possible d'exporter la page courante en ePub en plus du format PDF traditionnel.

Pour cela, j'ai utilisé une classe ePub disponible sous Github (licence LGPL) : https://github.com/Grandt/PHPePub/

J'ai préféré le format ePub supporté par la plupart des tablettes et ouvert contrairement au PDF. De plus, j'ai trouvé plus facilement une classe pour faire de l'ePub que du PDF (en plus epub == html packagé dans du zip, donc c'est facile à faire).

La page courante peut donc être exportée en ePub en calquant le comportement du lien vers le flux RSS.

Le rendu est encore à améliorer considérablement, j'ai juste mis le minimum pour voir ce que ça donnait (en particulier, tout le contenu n'y est pas, il faudrait du CSS etc.).

Note : l'icône n'est faite que dans le thème default. Et globalement, je n'ai pas testé avec d'autre thème pour l'instant.

broncowdd commented 11 years ago

Pour ma part, j'aimerais autant que possible éviter le recours à une lib extérieure afin de conserver l'aspect Kiss et léger de l'appli. Je testerai tout de même ta version pour me faire une idée.

Phyks commented 11 years ago

Ok pour l'aspect Kiss à conserver. C'est vrai que c'est un atout d'avoir des scripts Kiss et légers.

Malheureusement la génération de PDFs/ePub est assez complexe et je pense que le recours à une librairie externe peut faciliter grandement la chose.

Une possibilité pourrait être d'utiliser un système type "plugins" pour étendre les fonctionnalités. Il y aurait ainsi un noyau kiss et légers, avec des fonctionnalités extensibles.

Si tu le souhaites, je pourrais épurer la lib en question afin de ne garder que ce qui est réellement utile.

broncowdd commented 11 years ago
C'est vrai qu'on pourrait imaginer ce
  système de plugins: c'est une idée à creuser sérieusement...
  Le 14/09/2013 19:45, Lucas Verney a écrit :

  Ok pour l'aspect Kiss à conserver. C'est vrai que c'est un
    atout d'avoir des scripts Kiss et légers.
  Malheureusement la génération de PDFs/ePub est assez complexe
    et je pense que le recours à une librairie externe peut
    faciliter grandement la chose.
  Une possibilité pourrait être d'utiliser un système type
    "plugins" pour étendre les fonctionnalités. Il y aurait ainsi un
    noyau kiss et légers, avec des fonctionnalités extensibles.
  Si tu le souhaites, je pourrais épurer la lib en question afin
    de ne garder que ce qui est réellement utile.
  —
    Reply to this email directly or view
      it on GitHub.
Phyks commented 11 years ago

Idée à creuser du coup :) Je vais essayer de proposer une implémentation un peu moins "proof of concept" et un peu plus fonctionnelle.

@tmos : Est-ce que tu aurais un croquis ou un petit schéma de ce que tu entends par cheatsheet, niveau mise en forme notamment ? Pour l'instant, j'ai fais un truc très basique, linéaire et pas très beau :) (cf mon fork si tu veux tester).

tmos commented 11 years ago

Plop ! J'ai suivi le fil par mail, ravi que l'idée tienne :) (d'ailleurs phyks, va falloir que tu m'expliques comment tu fais pour avoir le temps de coder comme ça ! ;) )

Pour la mise en page je verrais bien un truc comme ça : http://www.post-hit.net/wp-content/uploads/2008/06/html-cheat-sheet.png http://www.addedbytes.com/cheat-sheets/download/python-cheat-sheet-v1.png http://ult-tex.net/info/htaccess/mod_rewrite_cheat_sheet.png http://www.post-hit.net/wp-content/uploads/2008/06/css_cheat_sheet.png

L'idéal avec le PDF étant qu'on peut facilement imprimer la feuille pour la punaiser, ce que le epub ne permet pas. Par contre je conçois que c'est une très bonne idée et qu'il est un très bon complément au pdf !

Phyks commented 11 years ago

Ok, j'avais bien la même chose que toi en tête avec l'idée de "cheatsheet" == truc avec tout sur une feuille, à punaiser sur le bureau.

Niveau PDF / ePub, en fait c'est quasiment la même chose normalement. Il faut que je regarde ça en détails, mais même si l'ePub est en général utilisé pour présenter des livres, on doit pouvoir faire quelque chose de sensiblement identique car c'est en fait un document HTML avec un subset des propriétés CSS supporté, zippé dans un fichier .epub. Au pire, je pourrai passer sur du PDF si le besoin s'en fait sentir. Je regarderai ça plus en détails quand j'aurai fini les modifs sur Greeder.

P.S. : Pour le temps, j'ai une heure ou deux par jour de dispo, et je code pour des trucs que j'utilise quotidiennement pendant ce temps, c'est tout :)

Phyks commented 11 years ago

Je n'ai pas fait beaucoup de modifs sur ma proposition, qui doit encore être largement améliorée (proof of concept pour l'instant plus qu'autre chose) ces derniers temps, ayant été un peu débordé. Je garde l'idée dans un coin de ma tête et dès que j'ai 5 minutes, je m'y remets, s'il y a encore des gens intéressés.

Je viens d'ailleurs de voir passer cette pull request sur Leed : https://github.com/ldleman/Leed-market/pull/64 qui pourrait fournir une base. Je note ici pour penser à regarder plus en détails :)

Phyks commented 10 years ago

J'ai un peu plus de temps en ce moment, et je suis bien motivé pour terminer cet export sous forme de cheatsheet ! En tout cas, je pense que ça pourrait être cool comme fonctionnalité, et j'ai déjà un hack fonctionnel (très moche par contre) : cf https://github.com/Phyks/SnippetVamp

Du coup, s'il y a toujours des gens intéressés, je peux passer un peu de temps pour le coder. Mais j'aurai besoin d'un petit coup de main sur le design, notamment sur la forme que vous voulez que cela prenne.

Ping @tmos et @broncowdd : si vous êtes toujours intéressés et que vous passez par là : avez-vous réfléchi un peu à la façon de l'implémenter (niveau interactions avec l'utilisateur et design) ?

broncowdd commented 10 years ago

Je t'avouerai que je n'ai pas du tout réfléchi... il faudrait que je teste ça...

tmos commented 10 years ago

Je pense que procéder par colonnes pourrait être sympa : 2 si format portrait, 3 ou 4 si paysage. que ça soit un condensé d'infos mais clair quand même (que l'on puisse du premier coup d'œil repérer un titre particulier).

Phyks commented 10 years ago

@tmos : du coup, un bout de code par colonne ? Quelque chose dans ce genre (oui, mes talents en dessin sont très limités ^^) ? design

Par contre, il va falloir faire gaffe aux bouts de code trop longs qui débordent de la page du coup... :/

tmos commented 10 years ago

Je pensais plutôt à un truc comme ça : http://www.kaikkonendesign.fi/columns/ (à imaginer sur papier, c'est juste pour l'exemple des colonnes)

Phyks commented 10 years ago

Donc des colonnes fluides et le code qui continue de l'une à l'autre plutôt, si j'ai bien compris ?

(Après, l'epub utilise un subset de html / css, je ne sais pas si on peut faire ce qui est fait dans cette page par exemple)

tmos commented 10 years ago

Oui par exemple, mais je pense qu'il vaut mieux définir un nombre de colonnes fixe, ça sera moins galère à implémenter. Pour le texte qui continue, pourquoi pas, à voir si un truc du genre «massonry» est faisable ?…

Pour suivre de très près le format epub… «courez pauvres fous !» C'est un format potentiellement top, mais aucune liseuse n'est foutue de bien les lire (toutes bloquées sur epub2), et aucun logiciel n'est foutu de générer du epub correct (faut tout faire à la main). TL;DR : N'essaie pas d'implémenter des choses exotiques en epub ! Bref, c'était le coup de gueule du soir :)

Phyks commented 10 years ago

Ok pour ton idée de thème pour l'epub.

J'ai vu ça pour l'epub, ça a l'air un peu archaïque. Mais bon, le PDF est 10 fois plus dur à générer donc bon... :/

Masonry = http://masonry.desandro.com/ ? Pas sûr que ce soit faisable sur epub...

Par contre, j'ai vu passer ça récemment : http://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery, peut-être qu'il y a moyen de s'en inspirer ?

Phyks commented 10 years ago

J'ai regardé un peu ce qu'on peut faire là-dessus. Et je confirme @tmos, l'epub c'est vraiment sale... Déjà, il ne veut pas centrer mon texte, pour je ne sais quelle raison... Il y a 36 hacks différents sur le web, pas un seul de fonctionnel.

Bref, voila ce que j'ai réussi à faire, ce qui n'est pas génial (enfin, on oublie les belles colonnes etc.) :

Une autre idée était d'utiliser du PDF. Pour le coup, j'ai trouvé wkhtmltopdf qui convertit une page web en html en pdf en utilisant webkit pour le rendu, et ça marche bien ! Mais c'est un logiciel à installer sur le serveur, donc bye bye les mutualisés etc. :/

J'ai également trouvé domPDF qui fait la même chose, en PHP, mais ça me semble très lourd donc pas vraiment envisageable non plus : https://github.com/dompdf/dompdf

La solution à base de wkhtmltopdf me semble néanmoins la plus performante :/

Sinon, je me rappelle avoir vu passer il y a quelques temps un petit script PHP pour enregistrer une image d'une page web, qui pourrait être une autre solution... mais pas moyen de remettre la main dessus :/

Bref, si vous voulez, j'ai un code Proof of concept fonctionnel, mais pas génial. Un rendu est visible ici : http://pub.phyks.me/tmp/Cheatsheet.epub

tmos commented 10 years ago

L'epub généré ne passe carrément pas avec l'ebook viewer de Calibre (qui est plus ou moins une référence) :/ Mais encore une fois je pense que le plus important est le PDF, pour pouvoir imprimer et punaiser une référence rapide. L'epub nécessite un ordi/liseuse, ce qui dénature l’intérêt de la cheatsheet selon moi.

Par contre l'aspect installation serveur obligatoire est rebutante… Pourquoi pas une simple mise en page sur une page html (fluide) et l'utilisateur imprime cette page directement ? Si le html/css est bien fait il doit y avoir moyen de passer outre le pdf non ?

Phyks commented 10 years ago

En effet, je ne sais pas ce qu'il en est pour l'epub et l'impression.

Sinon, je suis désolé pour l'epub qui ne passe pas sur Calibre. Je ne connais pas bien les epub et ai juste testé avec le visionneur d'Okular, qui est également mon lecteur PDF.

En effet, le PDF me semble être la meilleure option, mais l'installation côté serveur me rebute également. Pourtant, je n'ai guère trouvé d'autres solutions…

L'idéal reste donc ta solution de page HTML / CSS propre et que l'utilisateur peut imprimer ou stocker à sa guise. +1 pour ta solution, je regarde ce que je peux faire quand j'ai 5 minutes ! :)

tmos commented 10 years ago

Super :) Quelques conseils en vrac pour les css d'impression : -n'utiliser que des % et pas de px, uniquement du fluide c'est important -faire des colones en css (cf mon lien précédent) -combiner à des media queries pour pouvoir cibler les formats paysage/portrait (les tailles étant plutôt inutiles vu que la plupart des gens ont des imprimantes A4 il me semble). -penser à enlever tous les éléments inutiles sur un feuille de papier (genre des possibles liens). -utiliser une monospace pour le code, et surtout la tester sur papier, fa ressort différemment que sur écran.

Voilà, n'hésites pas à me contacter si je peux t'aider/conseiller pour le css/mise en page :)

Phyks commented 10 years ago

Ok, merci pour les conseils !

Je risque d'être un peu occupé au mois de janvier, mais devrait avoir du temps libre après. Je regarde ça quand j'ai 5 minutes et te tient au courant de ce que j'arrive à faire :) (et je reviendrai sûrement pour avoir des astuces sur le CSS ^^).

Phyks commented 10 years ago

~~@tmos: as-tu un avis sur le postscript ? notamment pour son support et sa potentielle conversion vers du PDF ?

Je ne sais pas comment c'est supporté en général, mais ça me semble bien pour l'impression, generable et bien supporté sous Linux (lecture / conversion en PDF). ~~

En y repensant, c'est une idée stupide en fait, il y aura toujours les mêmes problèmes de rendu… Clairement, autant utiliser le moteur du rendu du navigateur et l'impression en PDF !

tmos commented 10 years ago

Postscript, la dernière fois que je l'ai utilisé c'était dans une imprimerie, jamais à la maison... +1 pour l'impression navigateur je pense, ce sera le plus universel... Par contre va falloir serieusement se pencher sur des CSS valides pour l'impression, si c'est l'imprimante qui interprète les CSS ça risque d'être joyeux...