Skip to content

Commit 97a673f

Browse files
rodarimarodarima
committed
Add fosdem slides
1 parent f16285e commit 97a673f

13 files changed

+376
-0
lines changed

‎fosdem-2025/Makefile

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
small:
2+
dillo -g 1024x576 slides.html &
3+
4+
big:
5+
dillo -g 1280x720 slides.html &
6+
7+
watch:
8+
ls | entr pkill -SIGUSR1 dillo

‎fosdem-2025/css/gruvbox-dark.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body { background: #282828; color: #ebdbb2; }
2+
pre { border-left: 5px solid #888; }
3+
div#end { background: #ffffea; }
4+
.hi { background: #98971a; color: #282828; }
5+
:link { color: #83a598; }
6+
:visited { color: #d3869b; }

‎fosdem-2025/css/gruvbox-light.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
body {
2+
background: #fbf1c7;
3+
color: #3c3836;
4+
}
5+
6+
pre {
7+
background: #eee;
8+
}
9+
10+
.hi {
11+
background: #ffff00;
12+
}
13+
14+
div#title {
15+
/*background: #ffffea;*/
16+
background: #fbf1c7;
17+
color: #3c3836;
18+
}
19+
20+
div#end {
21+
background: #ffffea;
22+
}

‎fosdem-2025/img/bug.jpg

4.2 KB
Loading

‎fosdem-2025/img/gap.png

52.3 KB
Loading

‎fosdem-2025/img/jorge.png

146 Bytes
Loading

‎fosdem-2025/img/logo.png

28.2 KB
Loading

‎fosdem-2025/img/mem.png

67.9 KB
Loading

‎fosdem-2025/img/v3.0.5.png

80.9 KB
Loading

‎fosdem-2025/img/v3.1.0.png

83.3 KB
Loading

‎fosdem-2025/img/v3.2.0.png

82.5 KB
Loading

‎fosdem-2025/img/ver.png

216 KB
Loading

‎fosdem-2025/index.html

+340
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Resurrecting Dillo</title>
5+
<!-- <link rel="stylesheet" href="css/gruvbox-light.css"> -->
6+
<!-- <link rel="stylesheet" href="css/gruvbox-dark.css"> -->
7+
<style>
8+
html, body { font-size: 22px; margin: 0; }
9+
div { margin: 0 2em; min-height: 120vh; /* border: 1px solid blue; */ }
10+
pre { padding: 10px; display: inline-block; }
11+
h1 { margin: 0; padding: 1em 0; /* border: solid 1px black; */ }
12+
ul { margin: 0; }
13+
li { margin-top: 0.5em; }
14+
div.title { text-align: center; }
15+
div.title h1 { padding: 2em 0 0.25em 0; font-size: 2.5em; }
16+
div.title h2 { margin-top: 0.1em; }
17+
div.title img { margin: 1em; }
18+
div.title p.author { font-size: 1.1em; }
19+
div.title p.email { font-size: 0.8em; }
20+
div.title p.date { padding-top: 1em; }
21+
22+
div.section { text-align: center; }
23+
div.section h1 { padding: 30vh 0 0.25em 0; font-size: 2.5em; }
24+
div.section h2 { margin-top: 0.1em; }
25+
26+
/*div#end { text-align: center; }*/
27+
/*div#end h1 { padding-top: 130px; font-size: 45px; }*/
28+
span.box { background: #eee; border: dotted 2px black; padding: 2px; display:inline-block; }
29+
span.hi { background: #ffea00; border: solid 1px gray; padding: 1px; display:inline-block; }
30+
pre>code { background: #f3f3f3; display:inline-block; }
31+
32+
/* Figures */
33+
/* div figure .center { text-align:center; margin: 1em; } */
34+
/* figure img .center { text-align:center; max-width: 100%; } */
35+
figure img { text-align:center; max-width: 100%; }
36+
37+
/* Tables */
38+
table { width: 100%; margin: 0; padding: 0; font-size: 16px; border-bottom: 2px solid black; border-top: 2px solid black; }
39+
th { border-bottom: 2px solid black; padding: 0.5em 0em }
40+
td { padding: 0.25em 0.5em; }
41+
table.center td { text-align: center }
42+
figure { margin: 1em }
43+
figcaption { margin: 1em 0.5em; font-size: 14px; }
44+
45+
</style>
46+
</head>
47+
<body>
48+
<div class="title" id="title"><h1>Resurrecting Dillo</h1>
49+
<h2>25th year aniversary!</h2>
50+
<img src="img/logo.png">
51+
<p class="author">Rodrigo Arias Mallo</p>
52+
<p class="email">[email protected]</p>
53+
<p class="date">2025-02-05</p>
54+
</div>
55+
<div id="me"><h1>About me</h1>
56+
<ul>
57+
<li>I'm a computer scientist at the Barcelona Supercomputer Center (HPC)</li>
58+
<li>I've been using Dillo for about 10 years on old computers</li>
59+
<li>I mostly program in C</li>
60+
<li>Simplicity is beautiful</li>
61+
</ul>
62+
</div>
63+
<div id="intro"><h1>What is Dillo?</h1>
64+
<ul>
65+
<li>Dillo is a very lightweight graphical web browser</li>
66+
<li>Has its own rendering engine and uses FLTK for the UI</li>
67+
<li>Support for a reasonable subset of HTML and CSS</li>
68+
<li>Doesn't support Javascript</li>
69+
<li>25 years old project, since 1999</li>
70+
</ul>
71+
</div>
72+
<div id="intro2"><h1>What is Dillo?</h1>
73+
<ul>
74+
<li>Dillo is a very lightweight graphical web browser</li>
75+
<li>Has its own rendering engine and uses FLTK for the UI</li>
76+
<li>Support for a reasonable subset of HTML and CSS</li>
77+
<li>Doesn't support Javascript</li>
78+
<li>25 years old project, since 1999</li>
79+
<li>This presentation is shown <b>in Dillo itself!</b></li>
80+
</ul>
81+
</div>
82+
<div id="objectives"><h1>Objectives</h1>
83+
<ul>
84+
<li>Lower the barrier of entry to the web (computational / network)
85+
</li>
86+
<li>User privacy (no cookies by default, no JS, no telemetry)</li>
87+
<li>Efficiency (fast and stream rendering, small codebase)</li>
88+
<li>Easy to use for users by default</li>
89+
</ul>
90+
</div>
91+
<div id="abandoned"><h1>Abandoned in 2017</h1>
92+
<ul>
93+
<li>In 2016, rendering engine developer
94+
<span style="color: #e11414">█</span>
95+
Sebastian Geerken passed away</li>
96+
<li>In 2017, lead developer
97+
<span style="color: #319e2a">█</span>
98+
Jorge Arellano Cid not active anymore</li>
99+
<li>In 2022, DNS lost and someone took over dillo.org to serve SPAM</li>
100+
<li><b>Gone: Email server, website, repo, mailing list, bug tracker</b></li>
101+
<li>Last official release 3.0.5 in 2015, some unreleased changes since then</li>
102+
</ul>
103+
<figure><img src="img/v3.0.5.png"></figure>
104+
</div>
105+
<div id="resurrection"><h1>Resurrection in 2024</h1>
106+
<ul>
107+
<li>In early 2024 I decided to try to resurrect it</li>
108+
<li>Old content recovered and backed up on GitHub and archive.org</li>
109+
<li>Setup a GitHub organization and a new website:
110+
<a href="https://dillo-browser.github.io">https://dillo-browser.github.io</a></li>
111+
<li>New mailing list at [email protected] </li>
112+
<li>Donations at Liberapay
113+
<a href="https://liberapay.com/dillo/">https://liberapay.com/dillo/</a>
114+
and IRC channel at libera: #dillo</li>
115+
</ul>
116+
<figure><img src="img/v3.0.5.png"></figure>
117+
</div>
118+
<div id="release-3.1.0"><h1>Release 3.1.0 after 9 years!</h1>
119+
<ul>
120+
<li>Automatic HTML rendering tests</li>
121+
<li>GitHub CI pipeline to build and pass the test suite</li>
122+
<li>Added support for OpenSSL/LibreSSL along with Mbed TLS</li>
123+
<li><b>Released version 3.1.0</b> with minimal changes</li>
124+
<li>Quickly adopted by several Linux/BSD distributions</li>
125+
</ul>
126+
<figure><img src="img/v3.1.0.png"></figure>
127+
</div>
128+
<div id="release-3.2.0"><h1>Release 3.2.0 two weeks ago</h1>
129+
<ul>
130+
<li>SVG support for Wikipedia math formulas, WebP too</li>
131+
<li>Scrollbar page navigation mode</li>
132+
<li>Open URLs with custom programs or commands</li>
133+
<li>Zoom control with <code>Ctrl +/-/0</code></li>
134+
<li>Reload the current page with SIGUSR1</li>
135+
</ul>
136+
<figure><img src="img/v3.2.0.png"></figure>
137+
</div>
138+
<div class="section" id="demo-usage">
139+
<h1>Usage demo</h1>
140+
</div>
141+
<div id="testing-netbook">
142+
<h1>Old netbook for testing</h1>
143+
<ul>
144+
<li>Intel Atom N455 from 2010, <b>the CPU is 15 years old!</b></li>
145+
<li>1 core at 1.66 GHz with 2 HW threads (Hyper Threading)</li>
146+
<li>Very small cache: L1d 24 KiB / L1i 32 KiB / L2 512 KiB / <b>L3 Nope</b></li>
147+
<li>RAM is 2 GiB with 4 GiB of SWAP</li>
148+
<li>Fast SSD as disk</li>
149+
<li><b>Bought second hand for 30 € + new SSD disk</b></li>
150+
</ul>
151+
</div>
152+
<div id="link-actions"><h1>Open link with external tools</h1>
153+
<ul>
154+
<li>Dillo doesn't play audio or video</li>
155+
<li>But you can just open the URL in any program you like:
156+
<pre>link_action="Open in MPV:mpv $url"
157+
link_action="Open in Firefox:firefox $url"</pre>
158+
</li>
159+
<li>Example:
160+
<a href="https://www.youtube.com/watch?v=A6mb9qt2-3o">
161+
https://www.youtube.com/watch?v=A6mb9qt2-3o</a>
162+
</li>
163+
<li>Geo links:
164+
<a href="geo:50.812375,4.380734">FOSDEM</a>,
165+
<a href="geo:41.387890,2.187120">Barcelona</a>
166+
</li>
167+
</ul>
168+
</div>
169+
<div id="proto"><h1>Extensible with plugins</h1>
170+
<ul>
171+
<li>Plugins implement new protocols in <b>any language</b></li>
172+
<li>Similar to <b>CGI</b> scripts but simpler</li>
173+
<li>Gemini (C/Go):
174+
<a href="gemini://gemini.circumlunar.space/users/hundredrabbits/weather.gmi">Weather</a>,
175+
<a href="gemini://warmedal.se/~antenna/">Antenna</a>
176+
</li>
177+
<li>Gopher (C):
178+
<a href="gopher://sdf.org">SDF</a>,
179+
<a href="gopher://gopher.floodgap.com">Floodgap</a>
180+
</li>
181+
<li><a href="file:~/.dillo/dpi/man/man.filter.dpi">Man</a> (Bash):
182+
<a href="man:dillo">Dillo</a>,
183+
<a href="man:gittutorial(7)">Git tutorial</a>,
184+
<a href="man:gcc(1)">Gcc</a> (big!)</li>
185+
<li><a
186+
href="https://www.theguardian.com/education/2019/mar/28/paywalls-block-scientific-progress-research-should-be-open-to-everyone">Bloated
187+
page</a> &rightarrow; <a href="rdrview:https://www.theguardian.com/education/2019/mar/28/paywalls-block-scientific-progress-research-should-be-open-to-everyone">Reader mode</a></li>
188+
</ul>
189+
</div>
190+
<div id="bad-sites"><h1>Examples of <i>bloated</i> websites</h1>
191+
<p>Anything that you find in the "modern" Web is broken or bloated, requiring
192+
you to run JavaScript to display mostly text websites:</p>
193+
<ul>
194+
<li>Big tech:
195+
<a href="https://www.reddit.com/r/linux/comments/3m32sb/soo_i_tried_new_browsers_review/">Reddit</a>,
196+
<a href="https://www.facebook.com/NetworkZoneISP/posts/dillo-is-a-minimalistic-web-browser-particularly-intended-for-older-or-slower-co/2241077379475961/">Facebook</a>,
197+
<a href="https://x.com/nasa">Twitter/X</a>,
198+
<a href="https://www.youtube.com/watch?v=A6mb9qt2-3o">YouTube</a>,
199+
<a href="https://www.google.com/maps">Google Maps</a>
200+
</li>
201+
<li>News:
202+
<a
203+
href="https://www.nytimes.com/1998/01/23/business/browser-war-a-concession-and-a-push.html">The
204+
New York Times</a>,
205+
<a href="https://www.theguardian.com/global/2015/mar/22/web-browser-came-back-haunt-microsoft">The Guardian</a>,
206+
<a href="https://www.bbc.com/news/technology-16284196">BBC</a>,
207+
<a href="http://news.bbc.co.uk/2/hi/science/nature/14035.stm">BBC old</a>
208+
</li>
209+
<li>Misc:
210+
<a href="https://fosstodon.org/@dillo">Mastodon</a>,
211+
<a href="https://bandcamp.com/">Bandcamp</a>
212+
</li>
213+
<li>Search engines:
214+
<a href="https://www.google.com/">Google</a><sup
215+
style="color:red">New!</sup>,
216+
<a href="https://www.bing.com/">Bing</a>
217+
</li>
218+
</ul>
219+
</div>
220+
<div id="simple-sites"><h1>Examples of <i>simple</i> websites</h1>
221+
<p>These websites work well with a subset of HTML and CSS and degrade nicely
222+
without JavaScript:</p>
223+
<ul>
224+
<li>Blogs/personal:
225+
<a href="https://wiki.xxiivv.com/site/varvara.html">XXIIVV</a>,
226+
<a href="https://100r.co/site/home.html">100r.co</a>,
227+
<a href="https://datagubbe.se/decusab/">Datagubbe</a>,
228+
<a href="https://idlewords.com/2023/1/why_not_mars.htm">idlewords.com</a>,
229+
<a href="https://seirdy.one/">Seirdy</a>
230+
</li>
231+
<li>News/link agregators:
232+
<a href="https://text.npr.org/">NPR (text)</a>,
233+
<a href="https://lwn.net/Articles/1004544/">LWN</a>,
234+
<a href="https://news.ycombinator.com/">HN</a>,
235+
<a href="https://lobste.rs/">Lobste.rs</a>
236+
</li>
237+
<li>Forums:
238+
<a href="https://forum.puppylinux.com/viewtopic.php?t=4499">phpBB</a>,
239+
<a href="https://daemonforums.org/showthread.php?t=9674">vBulletin</a>,
240+
<a href="https://www.bttr-software.de/forum/board_entry.php?id=10797">Little
241+
forum</a>,
242+
<a href="https://commandcenter.blogspot.com/">
243+
WordPress</a>
244+
</li>
245+
<li>
246+
Alternative frontends:
247+
<a href="https://yewtu.be">Invidious (YouTube)</a>,
248+
<a href="https://tn.vern.cc">Tent (Bandcamp)</a>,
249+
<a href="https://brutaldon.org/user/dillo">Brutaldon (Mastodon)</a>
250+
<li>Search engines:
251+
<a href="https://wiby.me/?q=solar+panel">Wiby</a>,
252+
<a href="https://www.mojeek.com/">Mojeek</a>,
253+
<a href="https://lite.duckduckgo.com/lite">DuckDuckGo (lite)</a>...
254+
(more at
255+
<a href="https://seirdy.one/posts/2021/03/10/search-engines-with-own-indexes/">
256+
Seirdy post</a>)
257+
</li>
258+
</ul>
259+
</div>
260+
<div class="section" id="performance-section">
261+
<h1>Performance and complexity</h1>
262+
</div>
263+
<div id="performance-gap"><h1>Performance gap</h1>
264+
<figure><img style="max-height:65vh" src="img/gap.png"></figure>
265+
<a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">Source</a>
266+
</div>
267+
<div id="performance-measurements">
268+
<h1>Performance measurements</h1>
269+
<ul>
270+
<li>All measurements are done in this netbook.</li>
271+
<li>Intel Atom N455 from 2010, <b>CPU is 15 years</b></li>
272+
<li>The page loaded is the Dillo website:
273+
<a href="https://dillo-browser.github.io">
274+
https://dillo-browser.github.io</a></li>
275+
<li>The results show <b>CPU time spent</b> measured with perf stat</li>
276+
</ul>
277+
<figure style="width:40em">
278+
<table class="center">
279+
<tr><th>Browser <th>Version <th>Open browser <th>New tab</tr>
280+
<tr><td>Dillo <td>3.2.0 <td>0.9 s <td>0.2 s </tr>
281+
<tr><td>Netsurf <td>3.11 <td>2.5 s <td>1.9 s </tr>
282+
<tr><td>Chromium <td>130.0.6723.91<td>26.9 s <td>6.5 s </tr>
283+
<tr><td>Firefox <td>132.0 <td>80.6 s <td>19.0 s </tr>
284+
</table>
285+
</figure>
286+
</div>
287+
<div id="lines-code">
288+
<h1>Codebase complexity</h1>
289+
<ul>
290+
<li>A large codebase is a barrier for patches.</li>
291+
<li>Dillo is very small compared with "big" browsers.</li>
292+
<li>Distributed in a <b>single floppy disk!</b></li>
293+
</ul>
294+
<p>
295+
<figure style="width:40em">
296+
<table class="center">
297+
<tr><th>Browser <th>Version <th>SLOC (C/C++) <th>Tarball size </tr>
298+
<tr><td>Dillo <td>3.2.0 <td>71k <td>1.32 MiB </tr>
299+
<tr><td>Netsurf <td>3.11 <td>412k <td>8.66 MiB </tr>
300+
<tr><td>Firefox <td>134.0 <td>11.4M <td>576 MiB </tr>
301+
<tr><td>Chromium <td>134.0.6955.1 <td>18.6M <td>1157 MiB? </tr>
302+
</table>
303+
</figure>
304+
</div>
305+
<div id="build-support">
306+
<h1>Low barrier for compiling</h1>
307+
<ul>
308+
<li>Apart from <i>using</i> the browser, it is also important to be able to <b>hack it</b></li>
309+
<li>Two main constraints: <b>build time</b> and <b>peak memory (RSS)</b> required for linking</li>
310+
<li>Can be hacked with 15 year old machines in reasonable time</li>
311+
</ul>
312+
<p>
313+
<figure style="width:35em">
314+
<table class="center">
315+
<tr><th>Machine <th>CPU <th>Year <th>Jobs <th>Wall time¹ <th>Peak RSS</tr>
316+
<tr><td>Toy <td>N455 <td>2010 <td>1 <td>6 min 33 s <td>131 MiB</tr>
317+
<tr><td>Toy <td>N455 <td>2010 <td>2 <td>5 min 20 s <td>134 MiB</tr>
318+
<tr><td>Hop <td>i7-10700F <td>2020 <td>1 <td>31 s <td>128 MiB</tr>
319+
<tr><td>Hop <td>i7-10700F <td>2020 <td>8 <td>8.5 s <td>125 MiB</tr>
320+
</table>
321+
<figcaption>
322+
<p>¹ <i>Shows the wall clock time to rebuild the whole browser with
323+
GCC, measured with GNU time(1) (not the builtin time command).</i>
324+
</figcaption>
325+
</figure>
326+
</div>
327+
<div id="end">
328+
<h1>The end</h1>
329+
<ul>
330+
<li>Remember that not everyone can get the latest computer or fast networks.</li>
331+
<li>But everyone should be able to read the content of the Web.</li>
332+
<li>Allow people to <b>choose</b> using newer technologies like JS or
333+
fallback to plain HTML.</li>
334+
<br>
335+
<li>Thanks for your attention!</li>
336+
<li>Questions? Some page you want to test?</li>
337+
</ul>
338+
</div>
339+
</body>
340+
</html>

0 commit comments

Comments
 (0)