Commit f7754ca7 authored by Julie Blanc's avatar Julie Blanc
Browse files

tweaks with article id

parent 17c3187d
......@@ -4,6 +4,7 @@ date: 2021-03-18T12:00:02+02:00
draft: true
type: post
url: ../posts/2021-03-hackathon/
id: hackathon-ensadlab
# class: cookbook
author: Julie Blanc
intro: The the 1st and 2nd of March 2021, some graphic designers got together for a Paged.js hackathon in Paris.
......@@ -21,9 +22,7 @@ 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.
![](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.
......@@ -33,7 +32,6 @@ The morning of the first day was dedicated to a round table of the projects made
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.).
![](img/9J1A5203_retouch.jpg)
![](img/9J1A5476_retouch.jpg)
......@@ -46,7 +44,6 @@ The results of the workshops are not directly usable. Some of them can be adapte
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.
![](img/9J1A5322_retouch.jpg)
![](img/baseline.png)
Manu took advantage of the hackathon to document the ["experiments" repo](https://gitlab.pagedmedia.org/tools/experiments) available on the gitlab. This repo contains various experimental scripts tried in the last years. Some of them are still under development and can be used for your projects with some adaptations but nobody had taken the time to document them yet. Based on his experience with BookSprints, he also works with Julie on a [little script](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/delete-margin-content_manu) to delete content of margin boxes when an element appears on the page.
......@@ -68,7 +65,6 @@ Louis works also [with canvas](https://gitlab.pagedmedia.org/julientaq/hackathon
Robin and Julie works on an old script written 2 years earlier to create [float notes](https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/tree/master/notes-float). The script has been improved and optimized because the old version had serious problems with the fragmentation of the text content when notes was moved into floated areas. The idea is to be able to have a first implementation of a part of the [draft specifications for notes](https://github.com/w3c/css-print/issues/3) proposed by the Paged.js team. These are the first foundations but there is still a lot of work to be done to achieve a solid result (so be careful if you want to use the script).
![](img/9J1A5473_retouch.jpg)
![](img/float-notes.png)
......@@ -96,14 +92,8 @@ During the first morning, Sarah and Julie told about the time-consuming last ste
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.
![](img/montage-1.png)
Hackathon is a very interesting way of working to quickly come up with design ideas and see how to add them in paged.js. These two days were a success and we hope to find the opportunity to do other events.
*Thanks to EnsadLab for the financial and logistic support, Lucile Haute for the great help about the organization, Agathe Charrel for photos and all the participants for this two wonderful days.*
......@@ -111,45 +101,20 @@ Hackathon is a very interesting way of working to quickly come up with design id
<hr>
![](img/9J1A5546_retouch.jpg)
![](img/9J1A5566_retouch.jpg)
![](img/9J1A5614_retouch.jpg)
![](img/9J1A5465_retouch.jpg)
![](img/9J1A5511_retouch.jpg)
![](img/9J1A5115_retouch.jpg)
![](img/9J1A5299_retouch.jpg)
![](img/9J1A5370_retouch.jpg)
![](img/9J1A5382_retouch.jpg)
![](img/9J1A5157_retouch.jpg)
![](img/9J1A5257_retouch.jpg)
![](img/9J1A5303_retouch.jpg)
![](img/9J1A5390_retouch.jpg)
![](img/9J1A5419_retouch.jpg)
![](img/9J1A5430_retouch.jpg)
![](img/9J1A5537_retouch.jpg)
![](img/9J1A5539_retouch.jpg)
![](img/9J1A5716_retouch.jpg)
![](img/.jpg)
![](img/9J1A5716_retouch.jpg)
\ No newline at end of file
{"Target":"css/main.min.b93be187e6c547e6c4e045f3ca6cebb9.css","MediaType":"text/css","Data":{"Integrity":"md5-uTvhh+bFR+bE4EXzymzruQ=="}}
\ No newline at end of file
{"Target":"css/main.min.9d20c81650b921a26ea0b13d88d66cad.css","MediaType":"text/css","Data":{"Integrity":"md5-nSDIFlC5IaJuoLE9iNZsrQ=="}}
\ No newline at end of file
......@@ -31,3 +31,6 @@
@import "themes/bookish/assets/css/base/mobile.css";
@import "themes/bookish/assets/css/page/tweaks.css";
\ No newline at end of file
#hackathon-ensadlab {
img{
margin-top: 2em;
margin-bottom: 2em;
}
img + img {
margin-top: -0.5em;
}
hr + img {
margin-top: 4em;
}
}
\ No newline at end of file
......@@ -49,7 +49,7 @@
{{ block "main" . }}
{{ block "breadcrumb.html" . }}{{/* {{ partial "breadcrumb.html" .}} */}}
{{ end }}
<article>
<article id="{{ if .Params.id }}{{ .Params.id }}{{ end }}">
{{ if .Params.intro }}
<p class="intro">{{ .Params.intro | markdownify }}
<br/>
......
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