1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
|
<!DOCTYPE html>
<html>
<head>
<title>SerenityOS: The second year</title>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#banner {
padding: 10px;
background-color: #6699cc;
color: white;
}
#buggie {
position: absolute;
top: 8px;
right: 20px;
}
#browser_ad {
padding: 10px;
text-align: center;
border: 1px dashed gray;
}
.shot .inner {
padding: 16px;
}
.shot .title {
padding: 4px;
background-color: #6699cc;
color: white;
}
.shot img {
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id=banner>SerenityOS: The second year</h1>
<img id="buggie" src="buggie2.png">
<div id="browser_ad">
<img src="getbrowser.gif"><br>
Best viewed in 1024x768 with the SerenityOS Browser!<br>
<font color=#ccc>(jk it works everywhere)</font>
</div>
<p>
<b id="greeting">Hello friends!</b>
</p>
<p>
Today is the second birthday of <a href="http://serenityos.org/">SerenityOS</a>,
counting from the
<a href="https://github.com/SerenityOS/serenity/commit/5a300551574451fbf509685d11095bda4fcb20be">first commit</a>
in the <a href="https://github.com/SerenityOS/serenity/">git repository</a>,
on October 10, 2018.
</p>
<p>
Previous birthdays: <a href="http://serenityos.org/happy/1st/">1st</a>.
</p>
<p>
<b>NOTE:</b> Since the HTML and CSS support has improved over the last
year, this page uses a bit more of them to showcase SerenityOS browser
support. :^)
</p>
<h2>Introduction to SerenityOS</h2>
<p>
SerenityOS is a from-scratch desktop operating system that combines
a Unix-like core with the look&feel of 1990s productivity software.
It's written in modern C++ and goes all the way from kernel to web browser.
The project aims to build everything in-house instead of relying on
third-party libraries.
</p>
<p>
I started building this system after
<a href="https://www.youtube.com/watch?v=j3JkNGKZtqM">finishing a 3-month rehabilitation program for drug addiction</a>
in 2018. I found myself with a lot of time and nothing to spend it on.
So I began building something I'd always wanted to build: my very own dream OS.
</p>
<p>
Parts of my development work is presented in screencast format on
<a href="https://youtube.com/andreaskling">my YouTube channel</a>.
I also post monthly update videos showcasing new features there.
</p>
<h2>Snapshots from year 2 of development</h2>
<p>
Anyways, let's continue looking at screenshots where we left off
in <a href="http://serenityos.org/happy/1st/">last year's birthday celebration</a>!
We had just gotten the browser strong enough to display the first
birthday celebration page..
</p>
<div class="shot">
<div class="title"><b>2019-10-31:</b> :hover selectors in the Browser</div>
<div class="inner">
<a href="2019-10-31.png"><img src="thumb.2019-10-31.png"></a>
<p class="info">
I remember first seeing links change color when hovered back
in the IE3 days, and thinking it was the coolest thing ever.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2019-11-04:</b> Ladies and gentlemen, we've got Quake!</div>
<div class="inner">
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/-rMY7Fv84eA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="info">
Jesse ported Quake to Serenity. We didn't have sound at
first but that was fixed later. Still, it was very exciting!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2019-11-30:</b> Playing with "find in files" in the HackStudio IDE</div>
<div class="inner">
<a href="2019-11-30.png"><img src="thumb.2019-11-30.png"></a>
<p class="info">
I decided to start building an IDE for C++ development.
Since SerenityOS is a programmer's OS, a capable development
environment is a must-have.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2019-12-08:</b> Ported the nesalizer NES emulator (with sound support, too!)</div>
<div class="inner">
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/6y68tX7OHCs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="info">
Getting a NES emulator running helped drive improvements for
threading and timing APIs in the kernel.
Check out the video to see me die before even reaching the 1st palace..
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2019-12-30:</b> SerenityOS was hacked in a 36c3 CTF</div>
<div class="inner">
<img src="hxp.png">
<p class="info">
Someone put together a CTF (Capture The Flag) challenge at the
36c3 computer security conference. I learned about this when
two exploits showed up (complete with write-ups!) on GitHub:
<a href="https://github.com/Fire30/CTF-WRITEUPS/tree/master/36c3_ctf/wisdom">one from Fire30</a> and <a href="https://github.com/braindead/ctf-writeups/tree/master/2019/36c3/wisdom">another one from braindead</a>.
<br><br>
This caught me by total surprise and I was a little bit disappointed
at how easy it was to break into the system. This event sent me down
a deep rabbit hole of learning about system security and applying
everything I learned to secure Serenity. I wanted to make sure that
the next CTF presented more of a challenge!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-01-12:</b> I ported the game VVVVVVV to Serenity</div>
<div class="inner">
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/wTXjWf_hVCI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="info">
After the classic platformer VVVVVV was released as open-source,
I wanted to get it running on Serenity. It was pretty easy
to get it going since it used SDL and we already had a decent SDL port.
The game was open sourced on Jan 10th and I had it running 2 days later.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-01-31:</b> pledge() and unveil() all the things</div>
<div class="inner">
<a href="2020-01-31.png"><img src="thumb.2020-01-31.png"></a>
<p class="info">
Outside of enabling every protection mechanism the x86 has to offer,
there was also a fair amount of architectural Unix-level security
work. One of the most important pieces was adopting two OpenBSD-like
system calls: <code>pledge()</code> and <code>unveil()</code>.
<br><br>
I wrote about <a href="https://awesomekling.github.io/pledge-and-unveil-in-SerenityOS/">Serenity's pledge and unveil implementation on my blog</a>.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-02-22:</b> Kernel symbols in the Profiler</div>
<div class="inner">
<a href="2020-02-22.png"><img src="thumb.2020-02-22.png"></a>
<p class="info">
The system's built-in time profiler became a lot more helpful when
we added symbolication of kernel stack frames. You can tell them apart
from userspace frames by the little red icon in the graph!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-02-29:</b> A simple built-in web server</div>
<div class="inner">
<a href="2020-02-29.png"><img src="thumb.2020-02-29.png"></a>
<p class="info">
For my own birthday (February 9th), I celebrated by building a simple
HTTP server for Serenity. I always loved the simple HTTP server that
comes with Python, and I wanted something similar for Serenity.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-03-31:</b> The JavaScript explosion</div>
<div class="inner">
<a href="2020-03-31.png"><img src="thumb.2020-03-31.png"></a>
<p class="info">
People kept asking me if the web browser would ever support JavaScript.
I honestly felt a bit intimidated when starting this project but I just
did it anyway, and a whole bunch of people very quickly joined up to
help out.
<br><br>
I started by <a href="https://www.youtube.com/watch?v=byNwCHc_IIM">implementing a simple AST interpreter</a>,
and building some test AST's by hand. Then Stephan added a parser, and Sergey made a REPL,
and then things really took off, with Linus and Matt going especially deep.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-05-28:</b> Changing the LICENSE (a tiny bit)</div>
<div class="inner">
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/1jbd2OmW2DE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="info">
To celebrate the project reaching 10'000 commits, I updated the main license file
to assign copyright to "the SerenityOS developers" instead of just myself.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-05-30:</b> Accessing more of the web with TLS (and HTTPS)</div>
<div class="inner">
<a href="2020-05-30.png"><img src="thumb.2020-05-30.png"></a>
<p class="info">
Browser development was moving forward with the LibJS engine allowing
more and more complex things. But we were still limited to visiting unencrypted
websites served over HTTP.
<br><br>
In comes LibTLS and LibCrypto! Thanks to some amazing work by Ali, assisted by
Itamar and DexesTTP, we can now talk to HTTPS websites as well. The whole world
opens up!
<br><br>
I was super excited when I could get Google loading for the first time!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-06-22:</b> Our very own JPEG decoder</div>
<div class="inner">
<a href="2020-06-22.png"><img src="thumb.2020-06-22.png"></a>
<p class="info">
Devashish implemented a JPEG decoder for LibGfx and suddenly we had access
to a world of photos!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-06-30:</b> Working on ACID2 compliance test fixes</div>
<div class="inner">
<a href="2020-06-30.png"><img src="thumb.2020-06-30.png"></a>
<p class="info">
I spent a whole bunch of time improving standards compliance in the
LibWeb engine's CSS implementation.
I've been using the classic <a href="http://acid2.acidtests.org/">ACID2 test</a>
to drive some of the work. As you can see from the picture, a lot of work
still remains!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-07-27:</b> Catching memory errors with a userspace emulator</div>
<div class="inner">
<a href="2020-07-27.png"><img src="thumb.2020-07-27.png"></a>
<p class="info">
One tool I've missed ever since starting the SerenityOS project is the amazing
<a href="https://www.valgrind.org/">Valgrind</a>.
<br><br>
I finally decided to do something about it, and I was curious how such a thing might
be implemented, so I set out to create a workalike of my own.
<br><br>
I've hacked on x86 emulators in the past, so I decided to bring my knowledge in that
area into Serenity and started building UserspaceEmulator (or UE for short), a program
that implements a ring-3-only x86 CPU and intercepts system calls so we can instrument them.
<br><br>
Within a couple of weeks of hacking, I could run compiled programs without changing
anything about them, and catch memory leaks just like Valgrind would!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-08-30:</b> More desktop games! (Chess and 2048)</div>
<div class="inner">
<a href="2020-08-30.png"><img src="thumb.2020-08-30.png"></a>
<p class="info">
I've always been a fan of desktop games, ever since the days of the
Microsoft Entertainment Pack.
<br><br>
Here we were joined by two great games, a 2048 clone by Ali & Sergey,
and a Chess game by Peter. The chess engine is still pleasantly stupid,
so I can even beat it myself!
<br><br>
Also of note: the awesome icons in the system menu! Many of them were
drawn by thankyouverycool (so thank you, thankyouverycool, very cool!)
<br><br>
Even more: the "About" box was redesigned by Nick, and Buggie the system
mascot was drawn by Simon! These things happened much earlier but I'm
mentioning them here since they are visible in the screenshot.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-09-22:</b> Git integration in the HackStudio IDE</div>
<div class="inner">
<a href="2020-09-22.png"><img src="thumb.2020-09-22.png"></a>
<p class="info">
Itamar started adding support for Git integration (diffing, staging, commits)
to the HackStudio IDE.
<br><br>
Note that this is an optional feature that is only available if you have the
<code>git</code> port installed. HackStudio is the only program in the system
that makes use of ports since we don't have our own implementations of
git, a compiler, or a linker... yet. :^)
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-09-29:</b> Playing with the Spreadsheet application</div>
<div class="inner">
<a href="2020-09-29.png"><img src="thumb.2020-09-29.png"></a>
<p class="info">
The Spreadsheet app was started by Ali and is powered internally by the
LibJS JavaScript engine. Cell expressions are evaluated as JS.
It feels really neat so far, although we're still figuring out
how it should work.
<br><br>
It even has built-in documentation, which is generated from the JavaScript
source code!
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-10-03:</b> Copying images between applications!</div>
<div class="inner">
<a href="2020-10-03.png"><img src="thumb.2020-10-03.png"></a>
<p class="info">
While we've had a system clipboard for a long time, it only recently
became possible to copy anything other than text between apps.
<br><br>
Here I had just added an image context menu in the Browser so you can
copy images from the web directly to the clipboard!
<br><br>
Also on display: the PixelPaint app (formerly PaintBrush), which became
a layer-based image editor in the last year.
</p>
</div>
</div>
<div class="shot">
<div class="title"><b>2020-10-10:</b> Making this very webpage!</div>
<div class="inner">
<a href="2020-10-10.png"><img src="thumb.2020-10-10.png"></a>
<p class="info">
I had to fix some CSS bugs in the LibWeb engine while putting together
this page. I have also discovered a whole bunch of things that need
fixing. But this is where we are right now!
<br><br>
<b><font color="#404">Happy 2nd birthday SerenityOS! I'm so proud of you, and of all the people who have worked on you!</font></b>
</p>
</div>
</div>
<h2>Conclusion</h2>
<p>
And with that, this little tour of the second year of Serenity is over!
</p>
<p>
If you would like to see more, I've continued the tradition of making a monthly
round-up video at the end of each month. You can find them in
<a href="https://www.youtube.com/playlist?list=PLMOpZvQB55bfp6ykOLayLqLrjcpv_Sw3P">a special playlist</a>
on my YouTube channel.
</p>
<h2>Thanks</h2>
<p>
To all the lovely people have helped out in the last year, with code, bug reports,
man pages, commenting/liking/sharing my videos, sending letters, chilling on IRC,
retweeting my shower thoughts, telling your friends, etc, thank you!
I'm eternally grateful for all the love and support this project gets.
</p>
<p>
And also, a huge <b>thank you!</b> to everyone who has supported me via
<a href="https://github.com/sponsors/awesomekling">GitHub Sponsors</a>,
<a href="https://patreon.com/serenityos">Patreon</a>,
and <a href="https://paypal.me/awesomekling">PayPal</a>.
I hope to be able to do this full time some day, and your continued support
is keeping the dream alive!
</p>
<p>
All right, let's keep pushing forward into year 3!
</p>
<p>
<i>Andreas Kling, 2020-10-10</i>
</p>
<p>
<a href="https://github.com/awesomekling">GitHub</a> |
<a href="https://youtube.com/c/AndreasKling">YouTube</a> |
<a href="https://twitter.com/awesomekling">Twitter</a> |
<a href="https://patreon.com/serenityos">Patreon</a> |
<a href="https://paypal.me/awesomekling">PayPal</a>
</p>
<script>
var g = document.getElementById("greeting");
var gi = 0;
var gt = "hello friends!";
setInterval(function() {
gi++;
if (gi == g.innerHTML.length)
gi = 0;
var t1 = gt.substring(0, gi);
var t2 = gt.substring(gi, gt.length);
var nt = t1.toUpperCase() + t2.toLowerCase();
g.innerHTML = nt;
}, 250);
// FIXME: We don't load the YouTube embeds on SerenityOS for now since they
// bog down performance massively and we can't play video yet anyway.
if (navigator.platform != "SerenityOS") {
for (iframe of document.getElementsByTagName("iframe")) {
iframe.setAttribute("src", iframe.getAttribute("data-src"));
}
}
</script>
</body>
</html>
|
