Commit f6faee0e authored by julientaq's avatar julientaq
Browse files

new article: A paged.js hackathon at EnsadLab

parent f7754ca7
---
title: "A paged.js hackathon at EnsadLab"
date: 2021-03-18T12:00:02+02:00
draft: true
draft: false
type: post
url: ../posts/2021-03-hackathon/
id: hackathon-ensadlab
......@@ -20,28 +20,30 @@ tags:
A few days ago, the 1st and 2nd of March 2021, some graphic designers got together for a Paged.js hackathon in Paris to discover more about the possibilities of the tool and work together. The hackathon, organised by Julie Blanc and Lucile Haute welcomed Julien Taquet, Manu Vazquez, Louis Éveillard, Sarah Garcin, Robin de Mourat and Quentin Juhel.
On the 1st and 2nd of March 2021, a group graphic designers went together in Paris for a Paged.js hackathon. The goal was to bring together people who already had an experience with Pagedjs to discover how they worked, how they come to layout their content, and to think together about pushing the boundaries further. The hackathon, organised by Julie Blanc and Lucile Haute welcomed Julien Taquet, Manu Vazquez, Louis Éveillard, Sarah Garcin, Robin de Mourat and Quentin Juhel.
![](img/9J1A5482_retouch.jpg)
![](img/9J1A5333_retouch.jpg)
Despite the context of the health crisis, we were able to meet at EnsadLab and it was a real pleasure to spend two days together. The idea was to go deeply into how Paged.js works, to work on scripts to improve Paged.js and to discuss the possibilities of page layouts or new workflows of graphic designers.
Despite the context of that global pandemic, we were able to meet at EnsadLab and we got lucky to have the pleasure of spending two days together.
The morning of the first day was dedicated to a round table of the projects made by the participants. They showed the specific improvements they had already made to Paged.js and the difficulties they encountered in the layout rendering or in the workflows with their work partners (authors, editors, printers...). Then, depending on the ideas and desires, we worked on different ideas during the rest of the hackathons.
The idea was to go deeply into how Paged.js works, to work on scripts to improve and extend Paged.js and to discuss what #CSSPrint change in terms of page layouts and new workflows for graphic designers.
Generally, we have discussed and worked with [handlers and hooks](https://www.pagedjs.org/documentation/11-hooks/). The source code of Paged.js is organised in such a way as to facilitate the addition of functionalities through the addition of handlers made up of predefined hooks. The hooks are a kind of specific breakpoint in the execution of the script that give the possibility to add your own script at different moments of the document pagination and rendering (when reading the CSS, before the pagination of the document, before or after the fragmentation of a specific page, before and after the addition of elements in the page, etc.).
We started the workshop looking at projects made by the participants. During the first morning, they showed the specific improvements they had already made to Paged.js and the difficulties they encountered in the layout rendering or in the workflows with their co-workers (authors, editors, print shops, etc.). From there, we worked on different ideas that were raised along that talk.
Generally, we have discussed and worked with [handlers and hooks](https://www.pagedjs.org/documentation/11-hooks/). The source code of Paged.js is organised in such a way in order to facilitate the addition of functionalities through the handlers and hooks. The hooks are a kind of specific breakpoint in the execution of the script that give the possibility to add your own script at different moments of the document pagination and rendering (for example before the css is parsed, and after, before the pagination of the document, before or after the fragmentation of a specific page, before and after the addition of elements in the page, etc.).
![](img/9J1A5203_retouch.jpg)
![](img/9J1A5476_retouch.jpg)
The results of the workshops are not directly usable. Some of them can be adapted to your use if you are comfortable with the use of paged.js, others still require development. All the source codes are available in [a dedicated repo on our gitlab instance](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021). In this article, we offer you a summary of the discussions and the work done.
The results of the workshops are not usable as working bit directly. Some of them can be adapted to your use if you are comfortable with the use of paged.js, others still require a bit of development. All the source codes are available in [a dedicated repo on our gitlab instance](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021). In this article, we offer you a summary of the discussions and the work done.
## Documentation
Sarah works around baseline stuff. She writes the [beginning of a documentation](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/blob/master/baseline-experiment_sarah/baseline-documentation.md) about it (in French): how to uses variables to fit a baseline grid, use pixel values and not pt value, how to add visual guideline, etc. She also develops [scripts](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/baseline-experiment_sarah) to automatically align elements (even images) on the baseline grid with the use of `offsetTop`. She went further in the experimentation by positioning the elements randomly in the page and keeping the elements aligned on the baseline.
Sarah worked around baselines. She wrote the [beginning of a documentation](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/blob/master/baseline-experiment_sarah/baseline-documentation.md) about it (in French): how to uses variables to fit a baseline grid, why using pixel values and instead of pt value, how to add visual guideline, etc. She also developped some [scripts](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/baseline-experiment_sarah) to automatically align elements (even images) on the baseline grid with the use of `offsetTop`. She went further in the experimentation by positioning the elements randomly in the page and keeping the elements aligned on the baseline.
![](img/9J1A5322_retouch.jpg)
![](img/baseline.png)
......@@ -52,11 +54,11 @@ Manu took advantage of the hackathon to document the ["experiments" repo](https:
## Canvas HTML for images and for drawing
Following stories of problems with offset printers with the use of CSS mix-blend-mode on some images, Robin and Julien had the idea to work with HTML canvas [to recreate the problematic effects](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/blend-modes). Beyond CSS mix-blend-mode, the use of canvas for images is a real positive point that allows a better optimization of images for printing.
Following stories of problems with offset printers with the use of CSS mix-blend-mode on some images, Robin and Louis came with the idea of using canvas [to recreate the image and its effects](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/blend-modes). Beyond CSS `mix-blend-mode`, the use of canvas for images is a real positive point that allows a better optimization of images for printing.
![](img/9J1A5636_retouch.jpg)
Louis works also [with canvas](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/canvas_embedding-louis). He made a system to inject external javacsript into canevas and drawing things or downloading API. A script can be added on the fly with the `data-script` attribute in the canvas and the size of the canvas must be given in advance to avoid overflow problems.
Louis also worked [with canvas](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/canvas_embedding-louis). He made a system to inject external javascript into canevas and drawing things or downloading API. A script can be added on the fly with the `data-script` attribute in the canvas and the size of the canvas must be given in advance to avoid overflow problems.
......@@ -71,7 +73,7 @@ Robin and Julie works on an old script written 2 years earlier to create [float
## Imposition
Quentin, a fanzine lover, makes a lot of Paged.js workshops with students. Most of the time, they print their own productions and therefore need a way to impose the sheets after the paged.js rendering. With the Julien's help, [he made a script](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/imposition_quentin_juhel) to re-organized the dispositions of the pages, automaticly add pages to have a multiple of 4 and change the size of the spread after the rendering of the document. The script is only a first step and they want to develop it further to make more complex spreads.
Quentin, a fanzine lover, makes a lot of Paged.js workshops with students. Most of the time, they print their own productions and therefore need a way to impose the sheets after the paged.js rendering. With Juliens help, [he made a script](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/imposition_quentin_juhel) to re-organize the dispositions of the pages, automaticly add pages to have a multiple of 4 and change the size of the spread after the rendering of the document. The script is only a first step and they want to develop it further to make more complex spreads (this whole idea was based on a script Julien Bidoret made).
![](img/9J1A5506_retouch.jpg)
......@@ -79,7 +81,7 @@ Quentin, a fanzine lover, makes a lot of Paged.js workshops with students. Most
## Automatic grid layout
Louis used [Potpack](https://mapbox.github.io/potpack/), a "tiny and fast JavaScript library for packing boxes of varying size into a near-square container", to distribute image elements on the page according to their number and ratio. The [script available on the repo](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/auto_layout_images-louis) is a good example of how automatic grid layout algorithms ([Masory](https://masonry.desandro.com/), [Packery](https://packery.metafizzy.co/)...) can be easily added to Paged.js. The idea is to start preparing modules, simply usable with the addition of classes in the HTML and that could be used by people who are not developers or graphic designers who do not code.
Louis used [Potpack](https://mapbox.github.io/potpack/), a tiny and fast JavaScript library for packing boxes of varying size into a near-square container“, to distribute image elements on the page according to their number and ratio. The [script available on the repo](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/auto_layout_images-louis) is a good example of how automatic grid layout algorithms (for example [Masonry](https://masonry.desandro.com/), [Packery](https://packery.metafizzy.co/)) can be easily added to Paged.js. The idea is to start preparing javascript modules, usable with the addition of some classes in the HTML. That could be used by people who are not developers or graphic designers who do not code.
![](img/9J1A5002_retouch.jpg)
......@@ -90,7 +92,7 @@ During the first morning, Sarah and Julie told about the time-consuming last ste
![](img/paged-editor.png)
So Louis looked for a way to create a better link between the two. [He imagined an interface](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/paged_editor-louis) in the web browser with, on the left, the content editable in flow and on the right, the paginated rendering in page-by-page display. The two area are linked and clicking on an item will display it in both areas synchronously. It's also possible to modify the content on the left and have it update on the right paginated rendering. This is a very good start to imagine more advanced interfaces integrating Paged.js as a tool.
So Louis looked for a way to create a better link between the two. [He imagined an interface](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/paged_editor-louis) in the browser with, on the left, the editable content as a single flow and on the right, the paginated render in a page-by-page display. The two area are linked and clicking on an item will display it in both areas synchronously. It's also possible to modify the content on the left and have it update on the right paginated rendering. This is a very good start to imagine more advanced interfaces integrating Paged.js as a tool.
![](img/montage-1.png)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment