GUADEC 2026 - Day 2 - Track 2

[00:00:13]Heat. Heat.

[00:00:43]ah ah a oh a oh a oh a oh a oh a oh a oh a oh a oh a oh a ah ah ah ah ah ah ah ah ah ah ah Wow.

[00:01:02]Hey.

[00:01:11]Hey.

[00:01:31]Heat. Heat.

[00:02:02]Oh.

[00:02:23]Heat.

[00:02:26]Heat.

[00:02:42]Heat. Heat.

[00:02:52]Heat. Heat.

[00:03:13]Heat.

[00:03:24]Heat.

[00:03:33]Heat. Heat. N.

[00:04:18]Heat. Hey. Hey. Hey.

[00:04:45]Oh, ah.

[00:04:51]Heat. Heat.

[00:06:04]Heat. Heat.

[00:06:31]Ah, ah.

[00:07:38]Heat. Heat.

[00:08:23]Heat.

[00:08:26]Heat.

[00:08:33]Heat.

[00:08:50]Heat.

[00:09:24]Heat.

[00:09:41]Heat.

[00:10:26]Heat. Heat.

[00:10:52]Oh.

[00:10:55]Ah.

[00:11:00]Oh. Oh.

[00:11:29]Heat.

[00:11:46]Heat.

[00:12:09]Heat. Heat.

[00:12:16]Heat.

[00:12:28]Heat.

[00:12:55]Heat. Heat.

[00:13:29]for it.

[00:14:21]Oh.

[00:14:23]Hey. Hey.

[00:14:40]Heat. Heat.

[00:14:57]Oh, a a Heat.

[00:16:36]Hey. Hey. Hey.

[00:16:41]Heat.

[00:17:00]Heat.

[00:17:34]it. Hey Heat. Heat.

[00:18:15]Okay.

[00:18:23]>> Well, sorry. We're starting now. Okay.

[00:18:26]Everyone, welcome to day two um track two. I just have one announcement before we start. We have some um lunch tickets left for tomorrow and we have to buy those tickets to get lunch because it's a Saturday and the university is closed and the cafeteria is only going to make those many um plates from what I know.

[00:18:48]So um I think there are some 11 tickets left. Uh you can get them at the registration desk. Um, and as for those people who don't have badges, because uh we didn't print those out, we're going to get blank badges today. Um, once we have that, we'll let you know and then you can go and pick one up for yourself.

[00:19:07]Um, yeah, other than that, now we can start with the talk. Um, now we have a talk on a brief history of graphs. So, yeah, over to you.

[00:19:19]>> Yes.

[00:19:21]Does this mic working?

[00:19:33]But I don't hear anything.

[00:19:59]Yes, that's also This this should work, right?

[00:20:34]>> Okay.

[00:20:55]Okay. Yeah.

[00:20:59]Um, I'll just ignore the mouse.

[00:21:12]Hello. Hello.

[00:21:30]>> It works.

[00:21:31]>> It works. It still works.

[00:21:34]>> And now Okay. That's not okay. It's always fun with like tech conferences, always being played with tech uh issues.

[00:21:47]I Okay, it's a bit uh on and off.

[00:22:00]Um, okay.

[00:22:04]I'll um if it's a bug or a feature, but uh yeah, I think it it mostly works. It's just that it drops all the time. Yeah, >> that's uh now it seems quite stable, but >> the famous last words.

[00:22:41]>> Okay, turn on.

[00:22:46]>> Okay, it seems stable at the moment.

[00:22:51]>> Yeah, it seems stable right.

[00:22:58]>> Okay.

[00:23:16]Stop.

[00:23:28]>> Okay. Uh I The computer's working.

[00:24:40]Hey, hey, hey.

[00:25:02]Ah, ah.

[00:25:15]Heat. Heat.

[00:26:09]So I will talk about graphs which is like a grown circle application I started and maintained and basically how I stumbled into app development and I'll talk a bit about community and the role of community in this process. Uh first a bit disclaimer. Uh there are some personal opinions involved as in all uh presentations but I just wanted to like highlight that any opinions expressed are my own uh and not necessarily shared with any maintainers or people affiliated with my employer or whatever.

[00:26:42]Uh just to get that out of the way and first I'll talk about bit background.

[00:26:46]Who am I? How did I get here? Well uh my background is actually in physics. I studied physics in uh in the Netherlands and then during my masters I moved to Sweden uh to do my master thesis. Then I kind of got an invitation to do my uh PhD uh which I did in neutron optics. Uh so that was originally I was planning to stay in Sweden for six months then for another few months then for four more years. Now it's eight years later and I still live there and now I'm uh yeah I'm dual citizen.

[00:27:20]Uh it's during my PhD I kind of got into app development. Uh first I started with like MATLAB scripts. Uh and then I kind of found the MATLAB UI designer and it's quite fun to like make small tools and it's quite easy. It's just like you can like drag and uh click uh like drag and drop and then like set the correct buttons like say this button has to execute this piece of code. So I kind of started develop my first apps and like a few small highlights. Uh this is like a very early one. It's quite basic. I'm not completely sure why I called it apple pie at the time. Must have been drunk. But basically, it is like a logging tool. Like we had a uh we did sputtering. Doesn't really matter what it does. But the thing is like we're creating samples and like we're logging the timings and uh like um the power voltages and such, but also like the delay of uh our machine like it kind of gets slower and slower time. At one point like a reviewer that like didn't believe us that the fact that our thick layers got thicker is because our program got slower because I say like yeah but it's like 2020 computers don't like they can like run this well not if you're using live view and actually had the data to prove this. So it was quite fun to like have the receipts. Uh then a slightly more complicated thing. It's also like written QT uh they use QT designer. This is like a tool to like do um JISEX measurements. Again, a bit too technical to talk about what it exactly is. It's quite horrific, but it was quite nice because there was like no tool to do this kind of stuff. Uh because we were doing like super niche stuff. Uh and then like I needed to like like show or like to get data from this quickly and actually I published a paper with this which is still by far my favorite paper I published. It's called JCAN. This was the first application I published on flattopub and actually I looked at it lately we have like uh in total like well hundreds of downloads in Germany and like none uh at any other place and the thing is like the instrument I designed this for was in Germany so apparently it's actually been used by some people for the thing is intended for so I was quite happy yeah the other thing was also a horrific name was uh the uh original uh like the the original version of graphs which are called data manipulator that man uh and I first got in like why I started with this stuff first the pragmatic basically got measurements that look like this and every single measurement here in the beginning has a piece that's just like scrap data it's just the way the instrument is set up you have like a direct beam coming in that's not part of the data I need to cut this off and it is quite terrible to do with most stuff I can use a script but I have to like look it up. Where do I go up? I can look visually. I can like take it away in a JSON or like a text file.

[00:30:16]Or I can use like the tool where we paid €800 for. It's uh a crime against humanity in my view. Origin uh origin labs. It's super powerful. I don't want to like dismiss that. It's very good if you want to do invent stuff, but if you want to do like basic stuff like 99.9% even in science with stuff you're doing is just plotting data.

[00:30:38]This is not great but also political. Uh I see the context a bit bad but it's like a bad uh uh a black box. Input in question mark input out. The thing is like in science we have this like this very rigorous stuff like we have to be open about the entire process. We have to tell every step we did. We have to like be able to show our data. How did you come to this? We have to have to replicate this independently except if you're using software because then it's fine. like I bought this tool from this company and they don't have to show what they're doing. And I I personally like this really irked me. I had the discussion quite often with colleagues. People always agreed with me but no one really wanted to like put any consequence to to this which I understand people don't really have the energy but it bothered me a lot. So that's also for me like I kind of wanted to have something where the data is open at least like at least make it source available. Uh so then I started that man. I did it in Qt. Uh basically I was using QT at the time because it's um really nicely cross compatible with Windows GTK. I thought it's a bit of a pain to get working on Windows and like all my colleagues were using Windows start using QT. QT design is quite nice if you're very new as well and like to get the stuff out I could just select data and then uh press the cut button and then it's gone. So it worked quite well.

[00:32:02]can normalize. So basically you divide it by the max value. So the max value is one. So you can compare them because the total absolute value is a bit random.

[00:32:12]Depends how you set up your filters and such. I thought this is fun. Uh let's do it again uh but in GTK because I'm using Gnome. I really like the Gnome uh like the design language and like how things work. And basically I'm the only user anyway. So just I'll just choose for myself and choose GTK. They're saying me, young and naive. Now I'm just naive.

[00:32:35]Uh so this is grass 1.0. Uh it's quite basically a copy of this that man. Uh but I um in GTK so it was like beautiful. Uh we cannot read this. It's like this bird saying. I know I've said you have to be delusional to think this, but this is the uh but there's never been anything cuter in this in all time like this beautiful bird which is your eyes and your sinus infection. I stole this from false false needs.com just uh to mention that. Um but it's uh quite nice. It's like an UI only a parent could love. But then I kind of started sharing this on this weekend gnome and actually got some feedback which is quite nice. Uh one of the first things actually I first shared it on Reddit I'd say. Uh one of the first things from Harry he kind of said like uh well uh you're developing this uh according to like with mind you probably should comply to the human interface guideline.

[00:33:31]So you can thank them for uh that it's not called that man. Uh so we kind had some discussion and like set it on graphs is quite nice.

[00:33:41]Uh I got also quite quickly uh Tobias uh gave me like uh actually just proposed a new icon. I had a like very basic icon.

[00:33:51]Um like some others like also like when I first started the cool tool because I had actually settings. Uh then I like I looked for a JSON file with config didn't know about G settings at the time and if it didn't didn't exist because otherwise it would crash it would just okay it doesn't exist. I haven't found it. So I'm creating a new one. So you get like this to say like I didn't find any config creating a new one. Uh the thing is the first start there is no config file. At the first start you would always get like config found. So I got like a lot of this kind of stuff and I kind of like first of all like it really motivated me because like I really thought like oh cool people are like actually helping me. I actually interested. It's like really thing but also like you kind of notice like community matters. You kind of get this feedback that really makes stuff better for all of us. So kind of early development called just like starting edit uh settings uh access property. So you can like change the uh the scaling or like the labels also the ability to plot on multiple axis which was slightly more complicated but worked well. Uh then also around after this uh Kristoff joined graphs so I should also mention this because uh Christo has been maintaining it with me at this time. uh so like he uh came in around quite early there and then uh eventually they started contributing more and more and eventually like he's now co-maintaining probably wrote more than 50% but like we write like yeah have it together just don't want to also say that we um I'm not doing this all by myself it's like mainly a twoerson project plus all the other people that are kind of helping out with feedback uh so then we kind of started grasp 1.5 four has kind of started getting slightly better. We like put in the menus in like these um uh what is called these slider boxes.

[00:35:42]Um and then uh yeah, we started like getting quite a lot of design feedback again like Tobias helped a lot in the beginning. Uh like we had this grid of buttons like you see here in the left.

[00:35:54]It's not really great probably. Uh got some help with the icons. Uh yeah, things like the we have these settings in the beginning. Uh we had a save button that's like sticking out in the eye in the beginning. Uh so like we really also like drop apply like if you used to change any setting you have to press the apply button that's also not really according to the uh interface guidelines.

[00:36:19]So after uh some uh feedback and such we came to grass 1.5 and there kind of started to look a lot more like it does today. It's kind of oversaturated. It's not in real life. I can promise. Uh but like started quite better and I think it's at this time we uh kind of first also at 1.6 where we like mainly introduced localization. So like translatable strings a lot of under the hood work but it's around this time we kind of applied for circle. Uh so G circle you can um one time way to describe it is like as an app verification program.

[00:36:56]Uh now I stole a quote from Masteron. Uh it's the the full one also goes into the metadata but the Gnome circles a developer education initiative the sky is a verification program and I think that's quite um quite actually quite true. Uh there's a lot of um um things that you kind of learn along this way especially if you're new in this stuff. So we went for review and we had um uh well I just picked up some stuff but one of the things that I was quite a highlight for me was for example touchpad gestures. The thing is like met lip which we used to draw the plots doesn't do gestures. You cannot like uh change your stuff by like tracking over the touchpad or pinch the zoom and so they kind of like went to to this like we have this stuff we have this limitation. So never looked into this.

[00:37:48]Let's just assume it doesn't work. The thing is that uh we got this in the review. So then I kind of start again like looking anyway and actually we can use GTK gestures and GTK gestures we can just couple this to map lip and it worked splendidly. I just spend a week on this and when this works it's like a uh like like a dopamine kick. It was like very like I could play around with this for hours. It's one of these really really thing when things finally work and it's like and it works well. It's one of these great things. Also, like we had a lot of settings and uh the cell editor, I get into this later. It was like a dropown menu just about the settings. Uh just wanted to uh shout out to the this is quite a famous uh web page, but if you're on the online, I should I really recommend looking into this thing is that preferences, they're often just an excuse for just not wanting to pick defaults. You're cluttering your UI. You're creating a lot of technical depth. And in most cases, it really works a lot better to just have sensible defaults and um not have an UI that like uh resembles a karaoke machine. It really gets a lot better if you just pick a lane and stick to that. Um we also had like we had a plot settings and we had a preferences and it was quite confusing uh because one of them actually was like um here you can set the scaling right now for linear or logarithmic for all the axis even if they're not shown. But we also had another one where you could set the default scaling and if you change this one it doesn't change anything in the app. It just it's when you open the app again it would open those ones. Uh those are kind of these things that like yeah why are we doing this? Uh now we're using G settings and just remembers the previous setting or uh actually I think for the scaling we have like a set to default button which works a lot better.

[00:39:46]We even had a button for the clipboard length. Uh so like how many states are left in the clipboard. The idea was like if we have a thousand then we might have a lot of RAM usage if we have so we might want to lower it. Yeah. Also quite a bad idea. We just kept it to a sane default. Uh cuz this is what just confused people. You won't be able to find stuff among all the other crap.

[00:40:11]Uh also like the style editor. If you want to change the style of your graphs, you had like a drop-own menu with a lot of names. Uh you had no idea what it would look like. You would have to like pick the style and then like close it and then hope that it looks nice.

[00:40:27]Uh so this was the state before we sent it to GNO circle and to this review took like quite some time like five months or so and a 1.7 is the version that got in and there things worked a lot better. We got rid of like 80% I think probably 70% of all of the settings. Uh it looked nicer overall. Things worked better. We had this like very nice states as well.

[00:40:50]Uh so we have like a move state, a zoom state, a selection state.

[00:40:56]Um and things like really uh got a lot more usable and also like the cell editor was now like this. So you have like a preview of how things look like.

[00:41:07]Uh not unimportant. And also also to note that we introduce here curve fitting. This is just a thing that I wanted to get in. Uh so you can like yeah um do some regression for any arbitrary equation.

[00:41:22]uh about joining circle just want to show uh joining circle works uh we uh this is the amount of downloads we had on flat hub here was before circle and that point like I probably shouldn't even don't need the arrow is when we joined circle and uh I think we more than tripled quadrupled uh like suddenly and like it kept stable that's also the interesting thing is that when we joined circle we're like with 20 apps now I heard we're with 70 we're slowing down. Uh so it's not uh like the new circle apps are ruining it for us like drowning out advertisements.

[00:42:01]Uh see like as an ecosystem like we're really getting strong and that's the main thing that I learned here as well is like put design first.

[00:42:10]uh don't start with the back end with the limitation but really think about how should it work and how do I want it to work and then like okay but how can I use the technology to fit into this instead of the other way around and I have a small detour of like a side app I've been working on it's called lockpicker it's like at work I work with IT forensics nowadays I suddenly use hash cut and the thing is uh I won't go too much into it but the thing is like if you want to crack a hash based my password. You send in your mode and then like a random number then uh I don't even call it a for and then like a hash and then like uh for your increments and then you have like a mask and it's really in my view quite horrible. So I hacked together a quick UI. So basically what I was thinking at the time is okay I'll uh can just generate a string based on like the menu on the left and I just dump the terminal output on the right.

[00:43:06]And then I think well wait uh this is quite bad like why do I need this terminal output these you get the s for states to pay for pause those don't even work uh how should it look like I shouldn't have uh uh uh like a terminal output uh instead I should just like show a status and like the preference is like this and basically like thinking instead of like how can I dump my terminal to a guey is more like how should Guey look like and how can I use that get there using the terminal output I have leads to much better apps uh it looks better in um real life it's just that I think it's a problem at podium to be honest but uh uh yeah I can like start and pause oh yeah also now if it's cracked because the thing is you crack a password in hashcat it kind of starts like halfway in a dump it's super confusing and now it's just Here you get your actual password using this hash and copy it. So it worked quite well. So again like design first the technology you can fit later.

[00:44:16]Uh then grass 1.8 it's not really super exciting. We had some um support for uh uh for accent colors um a lot of under the hood changes but most of this time was uh spent on developing 2.0.

[00:44:32]So which brings me to grass today. So last March I think we had a release which is quite big uh 2.0 looked like this. It looks quite similar. One thing that you check see is that we have now an equation label here.

[00:44:47]It's because we now differentiate between equations and imported data. So basically if you uh create an equation it has an infinite canvas. So you no longer can like if you scroll out of frame it generates it again. And it should look like it never generates it because it generates slightly further and also like it can generate data and like import data. And if you do like here we have sin as x if you do a derivative of it it does this symbolically so it actually changes the name. It didn't do so previously either.

[00:45:20]Uh so you can now plot st graphs uh like here it's quite quick and easy.

[00:45:27]Uh, and like the style editor actually has a preview which we didn't have before either. Like uh if you create a new style so I base it here on ede dark for some reason I changed the name here and basically like you can change the uh well basically anything that you want.

[00:45:48]Uh here I think I decided to change like um yeah I have no taste. So I say I want to have the thick directions outwards and I want them to be thick anyway like I can change the entire stylesheet once and I can apply it to any graph that I want which is quite nice. Uh we have proper error propagation was first calculated very naively. Uh yeah now it's actually using uh delta methods.

[00:46:18]Uh error bars it's been requested for quite a long time. Uh it was slightly annoying to get this in but it works quite well. We rented import export and mobile support. Uh so this is a postmarket OS uh phone uh OnePlus and works actually quite well. It's somewhat laggy but it's an old phone. Uh that's a problem in the matplot lib. Uh it's not meant for performance. It's meant for accurate uh plots. Uh but like you can drag and drop, you can uh change settings. It works really nicely. And then I have like a few about graphs tomorrow. Uh basically one thing I'm working on is uh fill. So you can like have an upper lower bound and fill in between or like fill below your um uh graphs. Uh this works quite well. We're just discussing like how to interface this.

[00:47:12]uh thing we have planned is like datetime data because you're not cannot implement uh import currently like uh date it just as data uh units would be nice to have histograms uh could interfaces quite well without like uh disrupting things because like um 3D plots are often requested uh I am confident to say that probably will never come in it will make things way too complicated also like uh because we do symbolic uh calculations, we should be able to like import uh this is like really bad to see. It's a screenshot from someone from Joker where you can like have a a variable and you can like slide it between two values to see like how it changes the graphs. Uh this is also thing that's planned uh but like uh is mainly like handmade. So like I have one nice example about like also about how open source or that open source works and one of the things is like above I have this draft I didn't make screenshot the old one if you have a flatp pack like here it's if you have a project it gives the the path to the project and the thing is in flatpack it's uh sandboxed and we didn't know how to get like uh the actual path so it just say document portal and then I noticed that text editor is actually also sandboxed and it shows the correct path and I think it's context edited it's open source I can look into the code that's what I did so I found the part it's uh file attributes document portal host path and then here it's get attribute string from this so this is an hour code query info from the document host path and then get attribute string so just stole it from context editor and I shared this I must like oh great I can just share this uh like I I looked into someone else's code, stole their solution and now it works for me as well. And then I got a response from Martin Owens who was working at Inkscape. Oh actually uh we have a similar issue and it's not in our codebase and from the developer from type setter uh which is a great application for um uh using types uh and uh actually the they managed before us uh like we released quite late uh but like they stole the solution that I stole which is fantastic like uh great artist good artist copy great artist steal and I just copy from great artists.

[00:49:43]Uh so it's um yeah this like kind of shows that like this community stuff like uh talking with each other like sharing your results your success as well as your failures really works which brings me also to uh another thing LLM uh I kind of been thinking a lot about whether I should say something uh like everything that can be said probably has been said uh a million times and I think I want to say like they mainly make me sad add uh to a large degree it's like uh this entire journey has been very rewarding uh and it's been rewarding thanks to other people to community uh not to talk into a chatbot and like the the kick I got when like the the the gestures were working and like the really feeling that you're getting better that you're learning stuff it kind of killing this all and then I'm not even talking about like the fact that you kind of like uh like give all the means of computation so to speak to like some huge big corporations and of course the environmental impact. Uh I'm not saying there's no use to LMS at all but like be careful. I think especially if you're beginning it's probably ruining more than that it uh is helping you in the end. We don't need more and faster code. We need slow and good code and like doing things for hand. Having the time to think really helps a lot. At the same time it's kind of tearing community apart which is also quite painful. Uh we see like people getting like really bullied for using it sometimes or which is not really great either. Uh like community it's a very sparse uh resource. So we should be very careful about um like hiring the temperature too much. We should lower the temperature can like be very critical about the systems. Think about this. Uh but I wanted to leave with one final quote from the late Michael Brooks. Be kind to people but be ruthless to systems. Uh that's where I wanted to end. Uh thank you.

[00:52:01]>> Any questions for shoot?

[00:52:05]You can also ask questions in the matrix room.

[00:52:14]No questions so far. Yes.

[00:52:21]>> Uh, hi. Uh, thanks. Super cool to to see this uh sort of laid out like this. I don't remember half of the things that happened, but uh I guess I was involved a little bit.

[00:52:30]>> That's in the beginning.

[00:52:32]>> U very cool to see this like a few years on. Uh yeah. Uh my question was um you mentioned like the mudplot lip is does all the rendering of the graph.

[00:52:43]>> Yeah.

[00:52:44]>> Um but like whatever the performance of it is not so great because it's doing a lot of fancy under the hood.

[00:52:52]>> Are there any like whatever alternatives that like are more performant? Cuz I think like nowadays like that's the the one thing of the app that like feels like a little bit like because like the frame rate is completely different than anything else.

[00:53:04]>> I don't know. Are there any potential solutions there or is that just like not fixable?

[00:53:08]>> Uh I think I'm not sure if this is working or not. Maybe it is. I think it is. Yeah. Uh one thing that uh I uh that that actually is because there are some there is some work like on back ends that are like use GPU acceleration just is completely CPU bound. Uh that's um but like these are all kind of like those 80% solutions that kind of work most of the time and then like it's like one guy doing one version and a ML lip updates.

[00:53:43]Uh but otherwise the it's worth looking into it at one point.

[00:53:49]The thing is ML lib is like very good and very complete but I agree like especially if you have like a laptop or slightly older hardware it's the main pain point uh like my job uh uh PC I don't tell anyone that I have used it there like hacked a bit uh there it's like beautiful uh but on my own laptop I noticed like uh that's also why it's probably good to use like an older laptop for uh developing anyway.

[00:54:22]It's uh it it really like because you don't notice this otherwise but it's yeah like to to answer the question like honestly I don't know for sure but it's worth looking into it because I agree it's the main it's the main really pain point.

[00:54:41]>> Any other questions?

[00:54:42]>> Yeah.

[00:54:47]Um really really great action uh application. Just wondering if there is any plan or any option to get like a component to draw uh things. Just just let me give you a use case like um I'm maintaining some GPS um um plotter so you can see the track and so and you can see elevation velocity and so is it possible or is any plan to or it already exists some component to draw graphs in other applications?

[00:55:22]Uh no not uh like the thing is uh we just scroll as ML lib artists which we can export in uh SVG PNG or like all the things that ML lip supports but there's no plans at least like to be able to communicate with other applications. I also don't know really how that would work with uh like um flatback uh because we're kind of flatback first uh like you should probably then probably uh maybe divide it up into libraries but uh yeah at the moment there's no plans for such a thing.

[00:55:59]>> Any other questions?

[00:56:06]Nothing in the matrix room. Oh, >> hi. Uh, great talk. Um, so I'm the person who added the support for uh uh getting the path name of the host uh file thing.

[00:56:21]>> So I'm wondering uh uh where should this be kind of documented like what could we do to make it more accessible because apparently no one noticed.

[00:56:33]>> No. Uh, that's a good question. Like because I don't know exactly where I would I would look because I the only reason I found it is because I saw another app that does it and I looked into their code base. Um, and I don't know the thing is because I like I think I probably have Googled it or kagi it uh and probably didn't have any results.

[00:56:58]I don't really recall correctly but somewhere in the docs but >> they are tech it is technically in the docs so it exists some somewhere uh but uh I'm uh yes it's probably not very discoverable um >> I've been trying to improve the documentation of the portals uh but yeah I don't know I don't know what to do about this so it would be nice to >> know what to Okay, thanks.

[00:57:33]>> Great talk. Um, you kind of hinted at it, but I'm still going to ask what your like drive was. So you had this app uh written in a you know QT targeting multiple operating systems and then something drove you to redo it in GDK like what was what was the because like it it seemed like a miracle like especially for an app like you would think like a media player or you know video player >> that that's kind of the app where people would favor aesthetics but like for a for a data presentation software.

[00:58:14]>> It's probably like to some extent it's kind of like uh me kind of picking the selfish route as in I kind of started QT because like then I can share it with my colleagues and whatever. And then I like yeah but I'm like the main user here and I kind of think uh aesthetics are important. Uh the uh interface is important.

[00:58:37]uh I'll just use what like works best for me and like then I also kind of strongly believe in dog fooding in like using your own software because like that's the only way to find like the the the paper cuts and like the not just the paper cut also the part where there's friction like oh this is slightly annoying. Uh so then I kind of wanted no I'll just choose for myself and I think that in the end led to better software and also more users. Right now we're at 60,000 uh downloads in flat hub. Depending on how you count where the most popular graphing application depends if you count yoga bra or not. Uh and I don't think it would get to this stage if I would remain pragmatic and like choose something that works for all instead of like having something that like is nicely polished with like a single workflow in mind.

[00:59:31]Uh so it's it's mainly originally just because I chose what I prefer because I think it's nice and then in the end things um I think it led to better results as well.

[00:59:46]>> Thank you for the questions. Thank you short for the presentation. Next one will be about developing GDK with React.

[00:59:54]Thank you.

[00:59:57]Heat. Heat. N.

[01:00:17]Heat.

[01:00:32]Hey, Heat.

[01:01:03]Oh, hey.

[01:01:07]Hey, hey, hey.

[01:01:53]Oh, ah.

[01:02:44]Heat. Heat.

[01:03:29]Heat. Heat.

[01:03:37]Oh, oh.

[01:04:06]Wow.

[01:04:28]Hey. Hey.

[01:04:32]Heat. Heat.

[01:05:14]Welcome back. We are going to the next talk. It's a remote talk by Angelou about writing Linux applications faster with GTK and React. Enjoy um reactions and questions please in the matrix room for track two.

[01:05:49]>> So let me start with the introductions.

[01:05:52]Who am I? My name my name is Angel also known as Vixalian on the internet and I'm a university student. I'm currently in my final year. I'm doing software engineering and I've also been Google summer of code in 2023 and currently in 2026 for 2023 I in Google s of code I was working on the workbench application which is place where you can write applications and test them before you implement them their user interface actually and in 2026 I'm working on adding debug adapter protocol support to JavaScript So uh I'm a very nonjavascript person at least I'm trying to be. I'm also the maintainer of decibels and sticky notes.

[01:06:43]So decibels is also known as audio player and it's this application right here and it's also the default audio player in Gnome in Ubuntu and in Fedora I believe and the most they maintain of of sticky notes uh which is this application you can find on flatub uh you can use it to write notes uh that stick in a few words is just a framework for writing native GTK for application ations and you write the application using React which is a web framework that we use to a web a web library actually that we use to write uh reactive applications on the web. If you come from web development you might be quite familiar with react already.

[01:07:32]Then the applications you write will be written in JavaScript. So they will need uh the JavaScript engine or GGS for short to run them and you render uh real widgets uh real GTK widgets and you we don't use a web view such as uh other technologies like electron or to uh do so why did I build PG? So when I got started uh writing GTK applications or uh native applications for Linux uh I found that there was already there was some high friction. Um especially when starting a project you you will need a few boilerplate uh code files before even getting started. In the case of VA you probably need a source file. You also need to configure me so that it can build using the valor compiler um and can build with the relevant libraries and link with them. And I and I believe the story is also similar for C and maybe even Rust although I haven't tried it in depth and Gnome JavaScript or GJS is already proven in Gnome because it's what it's what's used already for the Gnome shell and a few applications such as decibels stick that I mentioned and also a few other Gnome applications are written in JavaScript already. So I feel like we could have we could implement the experience while also using JavaScript.

[01:09:05]Um yeah, so there's probably millions of web developers and since there's quite a large number of web developers, there have been some tools that have been built by and for web development um that improve the experience for web development. So for example, have new bundlers that will bundle your JavaScript code into maybe a single file. So it can be distributed and minify it. We have hot module reload or HMR and we have TypeScript already. So since these tools have been uh implemented to ease the development of web development which uses JavaScript, I believe we could also bring those improvements to native application development uh using GJS and GTK.

[01:09:53]So here is an example of an application written in u with pitchy.

[01:09:59]So pitch is just a framework. So we are using adita and gtk library gtk widgets.

[01:10:06]And here we also using state to track application state. Uh this is from React but these widgets like adita toolar view uh header bar and GTK box button label and button uh button are are from GTK itself. So these are uh toolkit widgets that we get from GTK and you can combine combine them with react uh um function such as use state. So here we have of course an obligatory counter demo and you can see you can see it counting from uh zero to like incrementing and decrementing and state is managed well.

[01:10:50]So pitch itself is built as a monor repo because I wanted it to be composed of different parts that can be split and uh used together if needed. So we have different packages which I will explain later in the coming slides. But we have packages for PG core which include the application runner, the development server, the compiler that will compile our application into a single file that can be run by js. Um we have a different package for react which will provide uh which will tell react how to update our or build the application given a widget tree. You also have a package for hooks which I will explain later. You have also poly fields um and the create package that allows to scaffold applications pitch applications quickly.

[01:11:43]You also have a few different plugins.

[01:11:45]Um, you have plugins for React, CSS, resources, and runner, which I will uh hopefully get a chance to explain later in the slides. And of course, there's also a few examples, which I'll be explaining in the slides as we go uh we go on.

[01:12:03]So, I I tried to split the um the presentation into uh different sections.

[01:12:09]So uh the first section is titled for web developers and it explains how Pichy uh brings the web development uh process that they know and love into uh native application development for Linux.

[01:12:26]Firstly when you write an application with Pichy you get support for JSX. So JSX is this um this syntax where you can um you can use XML like structures to write your widget tree. So here you can see for example how I wrote a a widget tree for a toolbar view with a header bar and the GTK box. So this is the syntax that allows you to write it. It's called G JSX. So at the end when you compile this application it will be written into normal JavaScript. So this acts like syntactic sugar so that you can write your user interfaces uh faster. Uh JSX has been popularized by React but it's also used by other toolkits I believe solid and more. Um it's also reactive in that uh when you write a variable let's say you have this variable called name and we set a a property on So we have this uh GTK label and we are displaying it the current name. It's reactive in that if you change the variable up top uh this label will also change reactively and you don't need to write your builder XML like before where you had to write um I think GTK developers are already familiar with builder XML.

[01:13:48]It's when you write a different XML file to define your UI and then maybe later link it and bind it to your datas. So here it's all reactive and in one file which is uh at least in my eyes a good thing because all the code is in one place and with Pichy it's quite easy to scaffold an application to get started.

[01:14:11]Uh if you have NodeJS installed, NodeJS comes with npm with a tool. It's a the node package manager. So you can run this uh script on your uh local uh machine. npm create pachy at latest and it will uh ask you for the name of your project and bootstrap it in under 30 seconds.

[01:14:35]So when you have your application bootstrapped you can get um you can start coding and the very first thing uh we improve in the developer experience is hot mode you reload which is quite familiar by uh to web developers hot module reload refers to the way where when you write code and save the UI will update automatically without losing the state.

[01:15:01]So this happens most of the time. Um when you update any uh variable or any label, it will update the UI automatically as soon as you save. But sometimes when you maybe update some state or uh other things, it may require full restart. But I'm still working on ways where I can reduce the need for full restarts and it's always going to be hot reload most of the times.

[01:15:29]Another important feature we have which is borrowed from web development is styling especially CSS modules.

[01:15:38]CSS modules is this nice way where you have a file with a module. CSS extension and when you have that file um with some styles some styles inside you can import that file as a normal JavaScript module and pachy when it's on the bundling step it will compile the CSS file and uh minify it will also uh bundle it automatically without you needing to put it in a J resource file and you can use the styles from it by uh just typing styles from the important uh CSS file and then dot the class name that you want to use.

[01:16:19]This is also nice since it will always generate unique style classes so you don't also have collisions.

[01:16:26]So here's an example of a button of a page that was written with CSS modules.

[01:16:36]Uh another feature that will be beneficial to react uh to web developers is the use of npm npm libraries. When you write your application using pitchy you uh you are able to access quite a large number of um libraries from npm.

[01:16:54]Um here I have this example which uh shows different toggles at the top and also shows a list of blog posts by the authors. you're able to filter uh the posts by author by clicking on the on the author that you you you you need and that will only fetch the the the specified users posts.

[01:17:19]Um here in this example I didn't want to implement everything from scratch. So I used u S swr which is quite a popular library for fetching data. Um and also it will also reload the data when the user uh when the user refocuses the application on when the or when the user loses internet and regains internet. So that's one thing I don't need to reimplement because it's already implemented by a package on npmh I can reuse. I also have access to different state management library such as nano stores resistant and more. So I don't need to implement state management uh manually as well.

[01:18:03]PG also supports asset bundling uh quite easily and fast. So here I had this Gnome logo and I wanted to display it in my application. with the old way or with uh what GTK developers are familiar with. I might need to write an XML uh G resource file and compile it and make sure it's in the right place. But with P it's all automatic. All I need to do is import the file as if it will it was normal JavaScript code and then use it as a jury source. Pichi will automatically build and bundle and put it in the right place for you automatically so that you can focus on writing the code and less about um compiling and setting up your build system.

[01:18:54]So yes um the next section is titled for GTK developers and also uh tells them how uh writing application might be better than what they are used to currently or even uh uh tell them how they can reuse what they have been using uh to write uh chic applications but with pitchy.

[01:19:19]So yeah uh the a good improvement in Pichy over writing normal GGS code is that you get access to TypeScript out of the box. It's automatically configured for you. You don't need to install anything and as soon as you start writing your code with your editor uh it will give you IntelliSense and autocomplete your variables before you even complete before you even complete them. So you can even look up the implementation uh if you get stuck maybe check out the correct property name and so on. And they also have uh type checking with TypeScript before you compile your code so that you catch errors in at compile time instead of on runtime.

[01:20:08]Yes. And then uh you also get access to React. React is a library that we use under the hood for writing u UIs and is the same React that has been powering web applications for a long time and is already loved by web developers.

[01:20:28]So React is probably used in more than 30% of all websites and it has some nice features such as um providers for um for uh state management suspense. Suspense is where you can load data while also showing different data when the data is loading or u show a different UI when an error has happened automatically. You have access to portals for rendering out of outside the widget tree. Let's say you want to maybe display a popover. You can use portals for that. You also have access to concurrent rendering. React is very um very fast and is very mature and when you use JSX and and variable updates, it doesn't rebuild the entire widget tree. Instead, it it it patches the widget that needs to be updated with the correct data automatically.

[01:21:27]So, it's concurrent and it's fast. You also have access to different React hooks such as use state, use effect, and use context. And of course, you have access to plethora of libraries that were designed to work with React such as ones I mentioned before like SWR or even um or even react query and much more.

[01:21:51]So React is a big enough topic on itself but uh I hope it can be interesting and of use to us developers.

[01:22:02]Um another thing is Pichy provides different hooks to you automatic uh for for free which you can use to uh do most of uh uh operations that you do in application.

[01:22:16]So for example, you have a hook to check the accent color to check the dark mode to use a setting. For example, you can use this use setting hook to check for uh the users's background or even check if they have dynamic work spaces enabled. Also have a hook for network monitoring checking if the users is current user is currently connected and use binding to check the value of a property. And of course all these hooks will always uh return updated data. So if the user switches on direct mode then switches it off it will uh rerender application transparently.

[01:22:59]And also you it allows you to change the different settings. So you can also set dark mode to enabled or disable it or change the accent color or change a setting.

[01:23:11]Yes. Um with Pich you also have access to all the different object introspection libraries that we uh know and and love. So the basic ones are of course GTK4 and Libat Vita. So you have access to the different widgets adaptive layout style classes and much more. Um you also have access to GI and Jio for G objects for lists for other infrastructure as well. And you have access to also a different old sets of libraries which you can use in your application to um get started quickly without reimplementing everything. So with P you have access to both G object introspection libraries and also npm um libraries to get start to get you started faster.

[01:24:02]And another um advantage of Pichy is that you can scale your application without compromising performance.

[01:24:11]Here I have an example of a contact list application. It's written in pachy and I used a library called fakerjs to to generate 500 contacts and I display them in a list here um using jio list model and gtk list view and it's all implemented nicely and it's fast which might not be the case if you use a web view.

[01:24:36]Sorry for the quality of this video. I used I recorded in GIFs. So that's why the quality is lacking. And yeah, when you implement uh your uh application using picture, you get performance similar to uh GTK although there's a nasty risk here because it is little overhead uh from GJS and from React, but it should be negligible.

[01:25:05]Uh another use case for pichy would be nice uh and easy debus.

[01:25:11]So debus is this way of communic of way it's a way where applications can communicate with other applications or other system components.

[01:25:22]So one of the different interfaces specified by Libus is Empress or MPIS.

[01:25:30]I believe it stands for multime media something. I don't remember the rest.

[01:25:35]But it essentially allows you when you are playing a video or an audio to show controls in for example the Gnome Show or KD so that the user can pause and play using um the shell's um UI or maybe even the media keys on their headphones on the laptop or or the keyboard. So with Pich it's very nice and easy to implement uh using this third party package called Uh well why when if you had uh implemented this manually it would have been a headache. I'm sure GTK developers in the room have already probably know how hard it is to implement debas it requires a lot of boiler plate.

[01:26:20]So yeah um the last section is for contributors or people who want to build with Py generally or want to improve pitch itself.

[01:26:30]So Py is is not implemented as uh everything in one place but instead it reuses uh components and libraries from other places as well. So I believe it was worth a mention to them to mention them.

[01:26:47]Firstly, we have Jurgen, which is this nice tool by Al. I'm not sure to how to pronounce their name, but they're a helpful person in the community. So, this library will uh use the G object introspection files. Uh I think it's girs gills to generate TypeScript code that we can use for type generation and type checking in Pichy. So, that's what we rely on for TypeScript confirance.

[01:27:16]Uh we also use we can also use gimm as a convenience library for GJS. uh it provides you access to G object decorator so you can register objects in G objects uh easily and also the previous debas example it was made possible by this gen library and so there's so much more we can do with G name also have uh it also gives you a polyfill to fetch and also access to uh a settings uh a way where you can store your application settings easily We also use npm and nodejs for distribution. That's how we distribute uh pach and also allow you to use different packages from npm. We use roll down for compiling our application and bundling it. Uh so that's where we compile the J JSX into code into normal JavaScript code that GJS can understand and also all the different features such as decorators which GJS might not understand yet.

[01:28:22]We also use TS down for it CS it CSS bundling uh functionality. So that's what we use for CSS module support. We also use uh TSC or the TypeScript compiler to compile uh our code from TypeScript to JavaScript and also check for errors.

[01:28:42]Uh pitch itself also uses oxint and ox format for linting and formatting and change sets for when we want to release a feature and write change logs automatically.

[01:28:54]So there's quite a few features on the road map already. Um the most important one in my eyes at least is get text transition support so that you can write your application and um and also um uh make it so it can be translated into multiple languages. Um another feature on the road map is multi-platform builds which we might be able to do and supports Windows and Mac OS builds and maybe even Android in the future. Who knows?

[01:29:26]Um, another feature that would be nice is automatic flatback packaging. So, you write a picture application and it compiles into a flatback automatically.

[01:29:36]And we might also uh in the future support other UI frameworks such as felt, solid and view depending on their complexity.

[01:29:46]Also, if you have a different idea you want to be implemented, of course, it can be put on the road map.

[01:29:52]So, thank you. This has been Pichy. I hope you enjoyed the presentation and if you have any feedback uh please reach out. There's a metric link here uh which you can reach out to me. It's a group where we can discuss about pitch and other typescript and javascript um innom discussions. I also have links for the examples that I used in this presentation and a link to pitch source code itself. Thank you.

[01:30:30]Thank you all for being here. Uh thanks to Angelo for the talk. It's uh quite interesting and challenging to write this. So uh it's uh definitely impressive. Um now we have coffee break and then the keynote. So this room will resume after the lunch break at 13:45.

[01:30:50]Also uh I have see a question >> questions can be in the matrix room uh track two. Um also uh small announcement that there are still a few open slots for lightning talks tomorrow. So if you're interested, have considered doing one, uh make a decision, um do it and um you can uh you can um sign up at the uh the desks at the ground floor.

[01:31:47]Heat. Heat.

[01:32:09]Oh, oh.

[01:32:51]Heat. Heat.

[01:33:36]Oh, Heat. Heat.

[01:34:07]a a I don't know.

[01:35:26]Oh yeah.

[01:35:47]Heat. Heat.

[01:35:53]Ah, oh.

[01:36:49]I'm happy.

[01:37:31]Oh.

[01:37:40]Hey. Hey.

[01:37:55]Heat. Heat.

[01:38:16]Heat. Heat.

[01:38:25]Heat up here.

[01:38:51]Heat. Heat.

[01:39:33]Oh.

[01:39:57]Heat. Heat.

[01:40:19]Oh, oh, ah.

[01:41:47]Heat. Heat.

[01:42:04]Heat. Heat.

[01:42:21]Oh, ah.

[01:42:58]Hey, hey, hey.

[01:43:50]Oh, a heat.

[01:44:07]Ah, Heat. Heat.

[01:45:41]Heat. Heat.

[01:46:26]Oh, ah.

[01:46:33]Heat. Heat.

[01:46:55]Heat.

[01:47:07]Heat.

[01:47:55]Oh, hey.

[01:48:17]everything.

[01:48:29]Oh.

[01:49:02]I don't Heat.

[01:49:19]Heat.

[01:50:04]Heat. Heat.

[01:50:31]Heat. Heat.

[01:51:05]everybody.

[01:51:22]Heat. Heat.

[01:51:29]Hey. Hey. Hey.

[01:52:00]You're a Oh, Oh, hey.

[01:53:11]Heat. Heat.

[01:53:50]Heat. Heat.

[01:54:09]Heat. Heat.

[01:54:36]Oh, ah.

[01:54:44]Heat.

[01:55:07]Heat.

[01:55:27]Heat. Heat.

[01:55:33]Heat. Heat.

[01:56:12]Heat. Heat.

[01:56:38]Oh, oh, oh. me.

[01:57:11]Hey. Hey.

[01:57:34]Heat. Hey, Heat.

[01:58:19]Heat. Heat.

[01:58:41]Oh, ah.

[01:58:53]Oh, hey.

[01:59:55]Hey.

[02:00:19]Ah, everything.

[02:00:48]Oh, wow.

[02:01:06]Heat. Heat.

[02:01:30]Hey. Hey. Hey.

[02:02:10]Oh, a heat.

[02:02:46]Oh, ah.

[02:02:51]Heat. Heat.

[02:03:14]Heat.

[02:03:27]Heat.

[02:03:56]Hey.

[02:04:05]Hey. Hey. Oh, hey.

[02:04:37]Every oh a ah Hey, hey, hey.

[02:05:39]Heat. Heat.

[02:06:07]Oh.

[02:06:14]Hey. Hey. Heat. Heat.

[02:06:51]Oh, a ah.

[02:07:17]Hey, hey, hey.

[02:07:41]Heat. Heat.

[02:07:51]Heat. Heat.

[02:08:26]Heat. Heat.

[02:08:34]Uh-huh.

[02:08:53]Oh.

[02:09:15]Heat. Heat.

[02:09:22]Heat. Heat.

[02:10:05]Heat. Hey. Hey. Hey.

[02:10:29]Heat. Heat.

[02:10:56]Oh, ah.

[02:11:02]Heat. Heat.

[02:11:24]Heat.

[02:11:37]Heat.

[02:12:29]Hey.

[02:12:31]Hey. Hey.

[02:12:51]Ah, oh.

[02:13:32]it. Heat. Heat.

[02:14:34]Heat. Heat.

[02:15:00]Oh, ah.

[02:15:08]Heat. Heat.

[02:15:33]Heat. Heat.

[02:16:10]Heat.

[02:16:15]Hey, heat. Hey, heat.

[02:16:36]Heat. Heat.

[02:16:44]I oh Heat. Heat.

[02:18:41]Heat. Heat.

[02:19:05]Heat. Heat.

[02:19:41]Heat. Heat.

[02:20:18]All day.

[02:20:41]Heat. Heat.

[02:20:50]Heat. Heat. N.

[02:21:08]Oh, a a Hey. Hey. Hey.

[02:21:52]Hey. Hey. Hey.

[02:22:17]Heat.

[02:22:36]Heat.

[02:22:53]Heat. Heat.

[02:23:10]Oh, ah.

[02:23:41]Heat up here.

[02:24:39]Oh, hey.

[02:24:58]Oh yeah.

[02:25:13]Oh.

[02:25:17]Oh, heat.

[02:25:54]Heat. Heat.

[02:26:20]Hello.

[02:26:31]Heat. Heat.

[02:27:15]Oh, ah.

[02:27:52]Heat.

[02:28:06]Heat.

[02:28:14]Heat.

[02:28:32]Heat.

[02:28:51]Heat. Heat.

[02:29:01]Ah, oh.

[02:29:53]Heat.

[02:30:08]Heat.

[02:30:32]Everything.

[02:30:41]Heat.

[02:30:53]Heat.

[02:31:20]Oh, oh, a ah.

[02:31:32]Wow.

[02:31:46]Heat.

[02:32:10]Heat. Heat.

[02:32:17]Heat. Heat.

[02:32:56]Heat. Heat.

[02:33:03]Heat. Heat. N.

[02:33:22]Oh, a a Heat. Heat.

[02:34:49]Oh, hey.

[02:35:25]Oh, ah.

[02:35:57]Heat. Heat.

[02:36:21]Heat. Heat.

[02:37:01]Heat. Heat.

[02:37:16]Everything.

[02:37:32]Oh.

[02:38:02]Heat. Heat.

[02:39:03]Heat.

[02:39:05]Heat.

[02:39:30]Oh, oh, a I don't know.

[02:40:34]Everything.

[02:41:08]Ah, down.

[02:41:37]Oh, a heat.

[02:42:13]Heat. Hey, Heat.

[02:42:42]Hey. Hey. Hey.

[02:43:01]Heat.

[02:43:06]Hey. Hey. Hey.

[02:43:10]Oh, ah.

[02:43:56]Heat up Heat. Heat.

[02:44:44]Heat. Heat.

[02:45:08]Ah, ah.

[02:45:26]Everything.

[02:45:42]Oh.

[02:46:12]Heat. Heat.

[02:46:56]Oh.

[02:47:03]Hey. Hey.

[02:47:18]Heat. Heat.

[02:47:39]Oh, ah.

[02:47:53]Heat.

[02:48:11]Heat.

[02:48:38]Do you feel Ah, heat.

[02:49:42]Oh, wow.

[02:49:59]Hey. Hey. Hey.

[02:51:10]Heat. Hey, Heat.

[02:51:16]Heat. Heat.

[02:51:44]Oh, ah.

[02:52:01]Heat up here.

[02:52:28]Hey, hey, hey.

[02:53:23]Ah, everything.

[02:53:47]Oh, a Heat. Heat.

[02:54:34]Heat. Heat.

[02:55:13]Oh, hey.

[02:55:37]Heat. Heat.

[02:55:45]a a heat.

[02:56:30]Heat. Heat.

[02:56:36]Want to w Hey, heat. Hey.

[02:57:30]Heat. Heat. N.

[02:57:52]Oh, a w Oh, hey.

[02:59:29]Heat. Heat. N.

[02:59:54]Oh, a ah.

[03:00:25]Heat up here. I don't want to Ah, everything.

[03:01:56]Oh, a Heat. Heat.

[03:03:06]Heat. Hey, Heat.

[03:03:23]Oh, a heat.

[03:03:59]Oh, ah.

[03:04:05]Heat. Heat.

[03:04:40]Heat. Heat.

[03:05:10]Oh yeah.

[03:05:13]Oh.

[03:05:18]Oh, ah.

[03:06:01]Oh, oh.

[03:06:13]Wow.

[03:06:24]Heat.

[03:06:33]Heat. Heat.

[03:07:09]Hello.

[03:07:27]Heat.

[03:07:40]Heat.

[03:08:04]Oh, ah.

[03:08:35]Heat. Hey, heat. Hey, heat.

[03:08:39]Heat. Heat.

[03:09:21]Oh yeah.

[03:09:27]Come on.

[03:09:47]Ah.

[03:10:06]Heat. Heat.

[03:10:14]Hey, hey, hey.

[03:10:41]Heat.

[03:10:57]Heat.

[03:11:04]Heat. Heat.

[03:11:42]Heat. Heat.

[03:12:09]Oh, ah.

[03:12:44]Heat.

[03:12:59]Heat.

[03:13:07]Heat. Heat.

[03:13:28]Heat. Heat.

[03:14:04]Ah, oh.

[03:14:46]Heat.

[03:15:02]Heat.

[03:15:34]Heat. Heat.

[03:16:14]Oh.

[03:16:16]Uh-huh.

[03:16:23]Wow.

[03:16:59]Want to dance?

[03:17:42]Oh, hey.

[03:17:50]Uh-huh.

[03:18:16]Oh.

[03:18:21]Oh, hey.

[03:18:43]Heat. Heat.

[03:19:28]Hello.

[03:19:30]Hello.

[03:19:34]Heat. Heat.

[03:20:18]Oh, ah.

[03:21:09]Heat. Hey, Heat.

[03:21:14]Heat. Heat.

[03:21:38]Heat.

[03:21:54]Heat.

[03:22:21]Oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh.

[03:22:33]Wow.

[03:22:54]Hey. Hey.

[03:23:11]Heat. Heat.

[03:23:40]Oh.

[03:23:47]Hey. Hey.

[03:23:59]Heat. Heat.

[03:24:23]Oh, ah.

[03:24:35]Wow.

[03:24:50]Heat.

[03:24:57]Heat. Heat.

[03:25:33]Heat.

[03:25:37]Heat.

[03:25:59]Heat. Heat.

[03:26:26]Oh.

[03:26:33]Oh.

[03:26:35]A a Wow.

[03:26:58]Hey. Hey.

[03:27:02]Heat. Heat.

[03:28:02]Heat. Heat.

[03:28:28]Oh, ah.

[03:29:19]Heat. Heat.

[03:29:27]Heat. Heat.

[03:30:04]Heat. Heat.

[03:30:31]Oh, oh, oh.

[03:31:06]Heat. Heat.

[03:31:29]Hey. Hey. Hey.

[03:32:14]Heat. Heat.

[03:32:33]Oh, ah.

[03:33:14]Heat. Hey. Hey. Hey.

[03:33:33]Heat. Heat.

[03:33:50]Oh, hey.

[03:34:16]Heat. Heat.

[03:34:36]Oh, a w Heat. Heat.

[03:36:10]Heat. Heat.

[03:36:38]Oh, ah.

[03:37:09]Heat. Heat.

[03:37:55]Oh, hey.

[03:38:21]Ah, everything.

[03:38:45]Oh, wow.

[03:38:59]Hey. Hey. Hey.

[03:39:50]Hey. Hey. Hey.

[03:40:07]Oh, a heat.

[03:40:43]Oh, ah.

[03:41:33]Hey, hey, hey.

[03:42:00]Oh yeah.

[03:42:19]Heat. Heat.

[03:42:29]I'm a oh.

[03:43:21]Heat. Heat.

[03:44:21]Heat. Heat.

[03:44:48]Oh, ah.

[03:45:26]Heat.

[03:45:39]Hey, honey.

[03:45:49]Hey. Hey. Hey.

[03:46:28]Heat. Heat.

[03:46:50]Heat. Heat.

[03:47:41]Heat. Heat.

[03:48:26]Heat. Heat.

[03:48:53]Oh, ah.

[03:49:02]Heat. Heat.

[03:49:25]Heat. Heat.

[03:49:49]Hey. Hey. Hey.

[03:50:31]Oh, down.

[03:50:55]Oh, ah.

[03:52:24]Heat. Hey. Hey. Hey.

[03:52:41]Ah, heat.

[03:53:07]ah ah heat.

[03:53:22]Heat.

[03:53:38]Heat.

[03:54:38]Oh, Oh, hey.

[03:55:34]Heat. Heat.

[03:56:36]Heat. Heat.

[03:57:02]Oh.

[03:57:05]Ah.

[03:57:10]Oh.

[03:57:12]Heat. Heat. N.

[03:57:53]Heat. Heat.

[03:57:59]Heat.

[03:58:17]Heat.

[03:58:38]Heat. Heat.

[03:58:53]Everything.

[03:59:10]Oh.

[03:59:40]Heat. Heat.

[04:00:02]Heat. Heat.

[04:00:41]Heat. Heat.

[04:00:50]Ah, ah.

[04:01:58]Heat. Heat.

[04:02:06]Heat. Heat.

[04:02:43]Heat. Heat.

[04:02:51]Heat. Heat. N.

[04:03:10]Oh, oh, oh.

[04:03:26]Heat up.

[04:04:36]Oh, hey.

[04:04:48]Heat. Heat. N.

[04:05:12]Oh, a ah.

[04:05:24]Ah.

[04:06:22]Okay, welcome back in Track two for this afternoon. We start with a presentation about um Python GDK2 application that was ported to GDK4 by um Zulfia.

[04:11:22]Hi, we need a second. We are having problems troubleshooting the vehicle.

[04:11:45]Uh complete.

[04:15:03]Hello. Everything okay now?

[04:15:12]Yeah.

[04:15:14]Okay.

[04:15:20]>> Okay. Okay. I will start now. Okay. Uh hello. Uh my name is Zulpian and I'm joining remotely from Indonesia.

[04:15:30]Uh I'm happy to be here at Guadecom Asia Summit in Tokyo last year. Uh Mr. Ram Krishna encouraged me to submit this talk to guad. I like to thank him for that. So here I am. Uh today I want to talk about Jolie like text editor I first built in 2010 and what happened when I tried to bring it to GTO.

[04:16:02]Uh let me give a bit context about myself and this project. I started using Linux in 2008 through canonical cate program getting Ubuntu cities delivered to my home that put me deep into the ecosystem.

[04:16:19]Two years later in 2010 I built Jolp as a personal experiment. Uh Python was not a talk at my college. GTK was almost unknown where I studied. So I learned everything on my own mostly from books and documentation and that project became my thesis.

[04:16:43]After graduating in 2011, I stopped coding for a long time and returned to programming in 2024.

[04:16:54]And in in last year uh in 2025, I rewrote Jolie uh completely from scratch.

[04:17:04]Uh one thing I found later those early release were downloaded from 23 countries on source sports. So for a small student that was uh surprisingly uh motivating.

[04:17:21]So uh here is here is a quick overview of what change between the two versions.

[04:17:28]on the left uh old jolp use Python 2, GTK2, GTK software 2 uh genome virtual file system for file handling uh manual MD5 hashing for file monitoring uh use iterator b search and uh no CSS system at all. on the right uh JP 2025 this Python 3 GT 4 G5 uh modern JO uh GO file monitor uh GT source context and GT CSS.

[04:18:06]So on paper uh this looks like a straightforward upgrade but uh when I actually open the old code and uh try to pour it uh that assumption uh last only a few hours.

[04:18:25]The the first thing I uh encountered was the application model in uh GTA 2. Uh you start with a window directly.

[04:18:39]You create a GT window uh connect the VRO signal to GTK main uh call show and run GTK main. That's it. Uh the window is the application.

[04:18:55]Now in GTA 4 uh there is no GT main anymore. Everything start with uh GDK application.

[04:19:04]You will define the application uh set an application ID and the windows uh lives inside uh do activate and the life cycle like uh start up uh activate shutdown is uh all managed by the application.

[04:19:26]So for me personally uh this uh actually made things easier in uh GT2 uh for at that time for me uh creating a second window uh felt complicated because uh there was uh nothing holding uh everything together.

[04:19:48]Uh now in GT 4 a new window is just a new instance under the same application life cycle everything follows uh automatically but coming from Kica 2 uh this was the first class clear signup uh this is not just a syntax update.

[04:20:14]Uh the second thing I found was the menu system in JKEA 2. Uh the recommended way to build menus and toolbars was UI manager uh together with action group. You uh define entries like uh actions, labels, shortcuts, uh callbacks all in a list.

[04:20:41]Then uh you create an action group. Add the entries. Create a UI manager. Insert the action group.

[04:20:48]Uh add the accelateral accelerator group uh to the window. And uh finally uh get the mini bar widget uh from a pet stream. And for Jolp uh that list had many entries covering every menu item.

[04:21:07]In Jica 4 uh UI manager is completely gone. Actions are now registered using go simple action and menus can be built using GKA builder. uh one system for both UI and menus and I also created a small helper function uh create action to register each action together with this it's a with it's a call back and keyboard shortcut in in one call and uh the helper is personal choice to keep the code clean not a requirement And uh beyond the technical chain uh genome applications follow uh different UI pattern. Uh instead of a classic menu bar, Joel Pino use bar with hamburger menu pop open. So more focus and cleaner.

[04:22:15]So uh within uh the first few hours uh three things were already clear.

[04:22:23]The application model was uh completely different. Uh UA manager and action group were gone entirely and the action callbacks pattern had changed.

[04:22:36]So from just those three things uh it was unfairious uh adapting the old code will only preserve updated uh assumptions. So the project was uh rewriten from scratch.

[04:22:55]Uh now uh let me talk about uh what gap for gives you on the other side of uh that decision in old jolp uh detecting external file change was fully manual. I had to calculate an MD5 hash of the file content, store it and compare it every time the window receive a focus in event.

[04:23:25]And uh because Python 2 had different model availability depending on the version, I had to wrap the hash function in try except try hash li MD5 first call back to the old MD5 model.

[04:23:41]uh it worked but uh it was unrealable.

[04:23:46]Uh focus in event is not the same as uh file chain.

[04:23:51]Now in gtica 4 uh go file monitor handles all of this automatically.

[04:23:58]You can call a monitor file on a go file object uh connect to the change site now and you're done. It detects modified, renamed and deleted each with a different event type. So Jolp can respond differently depending on what actually happened.

[04:24:22]So this is one of the curious examples where the rewrite simplify the code not just uh modernized it.

[04:24:34]Uh next is uh search was uh another area that uh took significant time and this is where uh I want to be honest about how I learned in uh JP uh 2010 uh search was built on uh GT source views iterator search APIs.

[04:25:02]I use uh GTK source view forward search and ether backward search uh standalone function synchronous no match count no regard wrap around had to be handled manually by catching exceptions and resetting to the start iterator.

[04:25:26]Uh now in GTA 4 uh GTK surf view provides uh source context uh a proper source object uh with uh asing forward and backward source uh real-time match con uh built-in regax wall and uh cash sensitive options but uh understanding uh how to implement as uh uh implement a singing search in Python uh took me quite a long time.

[04:26:07]I learned uh a lot by reading the Genome text editor source code. uh I'm grateful that I can still make sense of C code little by little and understand the patterns behind it and I translated that into Python for Jolby.

[04:26:26]So that process reading C source code and implementing it in Python was uh probably the part that took the most time in the entire rewrite.

[04:26:45]In uh JP 2010 uh the find and replace dialogues were separated uh windows built with a glade uh to show the fine dialogue. I had to set it transition to the parent window.

[04:27:02]check if it was already visible and call show out inspirated window spirited flow. Uh in JK 4 I use a GDK uh revealer for the source and replace navbar uh to show it one line set reper child to hide it uh set reper child false the plan uh the panel slides in in line without uh interrupting the text area.

[04:27:36]Uh I discovered this pattern by observing the behavior of the uh genome text editor. Uh I noticed it had an inline search bar that appeared without a spirit window and uh after checking the documentation uh I found the GT repealer and implemented it in uh Jolby.

[04:28:03]Uh for the status bar I use uh GTK overlay. Uh the status bar class uh classes GTK overlay directly. Uh a label appears over the content showing line and column position. uh then auto hides after two seconds using uh gite timeout and dialogues uh in join now serve uh only for purpose uh alerts and message everything else uh is in line.

[04:28:43]Uh one more thing uh GTK 4 uh gives you that uh GTK 2 did uh have at all uh CSS uh styling system in GTK 2 I didn't touch styling I just follow the system time there was no easy way I think to customize the interface without diving into into temp engines and in geeka for uh you can style your application using standard CSS. Uh the uh the same syntax anyone familiar with web development already knows. No extra libraries, no additional the dependencies.

[04:29:30]And for JP, I created a small custom CSS file. I define a custom grape color palette like Abuquad, Abu Sadang, Abu Galab, uh Indonesian names. Yes. And I applied them to the hither bar buttons and window background.

[04:29:51]The goal was a neutral gray that works on both uh dark and light system tanks.

[04:30:00]Uh it's a personal choice but uh having that option at all is something critical for made easy.

[04:30:10]Uh yes uh here's what the two versions actually look like uh side by side.

[04:30:19]on the left uh old Jolie uh simple minimal built by a college student learning Python and Jica on his own. On the right a Jolie 2025 same philosophy lightweight minimal dependencies but rebuilt on a modern stack with cleaner interface.

[04:30:44]15 years apart, same project but uh different paradigm.

[04:30:52]Uh now uh the most interesting challenge I encountered during the rewrite uh job supports a multiple tabs. Each step can open a large file sometimes up to 1 million lines.

[04:31:12]File loading is asing using GTK source file loader. Uh that part works fine on its own. But uh what happens when you have a multiple large files loading at the same time and uh in another tab uh you want to search or replace text with uh naive asing where all operations run at the same priority.

[04:31:44]The search starts uh feeling sluggish.

[04:31:48]the the UI is uh technically responsive but the search interaction lags because the file loaders are uh competing for the same scheduleuler time.

[04:32:02]Uh as Elon is not enough when everything runs equally, search uh still lacks.

[04:32:13]Uh the solution uh was uh understanding uh GIF's uh tax uh scheduling model.

[04:32:24]Uh GIE has a priority system for asing operations. Uh by default uh most operations run at a priority default but you can explicitly explicitly uh set a lower priority for background work. And for jolp uh I set the file loader uh to run at give priority low. This means the GI scheduleuler always give search operation which run at priority default uh higher priority than uh file loading.

[04:33:05]Uh the result uh even when multiple large uh even Yes.

[04:33:24]The time is type. Please type in the chat.

[04:33:39]Please type in the chat.

[04:34:23]Second uh modern uh DTIP replace a lot of thing that used to be manual. Third uh I think Elon is not enough.

[04:34:36]Yes. Yes. Uh as long priorities matter Juliet system is the key to keeping your application responsive on the real condition. The documentation list the priorities uh experience tell you when to use them.

[04:34:53]Okay.

[04:34:55]Uh that's called my presentation. Uh thank you very much for your time and attention.

[04:35:00]uh job available on FetHub and Monet SSV to park converter is available on FetHub too. Feel free to explore the project.

[04:35:10]Uh if you have any question, please type them in the chat. Uh sometime comes to my letter, don't hesitate to reach out of afterward as well. Thank you. Have a great day.

[04:35:33]All right.

[04:35:40]>> It was 10 minutes over.

[04:35:41]>> Yes. Thank you for uh for the talk.

[04:35:44]Thank you. Um the next one will be about uh internationalization in uh we'll start in a few minutes when we have set up.

[04:37:51]Oh, ah.

[04:38:32]Heat. Heat.

[04:39:30]Ah, yeah.

[04:39:58]Oh, a w a Heat. Heat.

[04:41:20]Oh, hey.

[04:41:54]All right, welcome back. We are a bit behind schedule, but I have a few short announcements. Um there is a link in the GUC attendees chat to uh submit questions for the AGM tomorrow. Also there are still a few slots available for who wants to give a lightning talk and there are a few tickets for the lunch tomorrow don't forget. Um having said that let me introduce Guom about translation. Um enjoy.

[04:42:22]>> Thank you.

[04:42:24]So we talk about accessibility ROMs for wheelchair, screen readers for blind, caption for the deaf. Those are essential. But there's something we don't say. A person who doesn't speak English is also excluded from English only interfaces and it's unusable. So I want to show you what is internationalization and that internationalization is also accessibility. So what is it and how to do it properly? This is what I'm going to talk about in the next 30 minutes.

[04:42:54]So, as it's been said, okay, it doesn't work.

[04:43:05]Do we have something?

[04:43:08]Oops, I broke the entire system. Sorry.

[04:43:24]It's this button and this button.

[04:43:30]Okay. Thank you.

[04:43:32]So I am Guiam Bernar. I am from the I8N team, the internationalization team and I am working in the team with Anderson Rafael. Um as you saw yesterday in the lightning tong of the team. Uh that's my first talk at Guedex. So even though I'm a longtime contributor actually I started in 2013 as a simple translator in the French team.

[04:43:56]So my presentation will be divided in five different sections. First I will um talk about internationalization in general terms. Second I review some of the most important rules for localizable for an internationalizable and localizable interface. Um then I will focus a bit about local support and the complexity with the different languages and then I will share you some of the things that we thought about for linguistic inclusion of of users and also developers and finally uh I will talk about them lines which is our internationalization platform and I'm the maintainer of this platform.

[04:44:36]So first thing first what is uh what we call internationalization or I8N internationalization sorry yes internationalization is fundamentally about separating concerns in software development at his heart it means decoupling three distinct elements the code logic so the business rules the features and the algorithms the user experience the and the user experience and so the user interface. So it's about layouts, components and UI widgets and also the text content. So the strings displayed to your users. The separation, this separation is what enables us to enables us and our software to reach users worldwide. Um not through miraculous translation but through a deliberate technical and linguistic process and preparation.

[04:45:33]So we use I8N and L10N localization. Um and many people use these terms but internationalization and localization um using this term in interchangeably uh you shouldn't do that. Understanding the difference is essential. So internationalization is actually the engineering work. It's the infra infrastructure that enables your software to be displayed in other languages. and to be shown to people with other cultures. So the question we ask is is this technically capable of working in any language or region? And the other part localization is the c cultural and linguistic work. It's the actual translation not only translation but also adaptation and testing in a specific language, region or community.

[04:46:28]uh in localization we ask does this make sense and feel right for this audience.

[04:46:33]So it's two different problems.

[04:46:36]So why it matters for our community? Uh our internationalization our internationalization efforts serve serve four interconnected goals. First we focus on consistency across the entire ecosystem. When Gnome applications speak in a unified voice um localized in each language and adapted for each region to each people, users experience Gnome as a professional product as a unified product. It serves also a broader global adoption. Um Gnome targets users everywhere. So a good internationalization and also a good localization remove barriers for speakers uh of languages with smaller tech markets. for example, non-Latin non-Latin writing systems and regions where accessibility is crucial. So this expands our user base um a lot.

[04:47:34]And third, the perceived quality is also increased because when a user opens a Gnome application in their native language and find it perfectly localized and translated with the appropriate context, they perceive the entire ecosystem as professional and respectful. Conversely, broken translations and untransated interface signal carelessness. And finally, we consider also accessibility as a human right. Um, internationalization and localization are forms of accessibility.

[04:48:05]We talk about making software accessible to people with visual impairments, hearing difficulties, motor challenges, motor challenges, and rightly so. But linguistic and cultural accessibility is just as important. A person who doesn't speak English is as I said excluded from English only interfaces just as a person who is blind is excluded from textual visual textual and visual only content.

[04:48:29]So when we ensures when we ensure Gnome speaks your language and understand your cultural context uh we're saying you belong here uh regardless of what language you speak and where you're from. This is the goal of localization and internationalization.

[04:48:46]Here we go. So, let's switch to the second section. What are the rules and what are the rules for an inclusive and localizable interface? Now that we understand why internationalization matters, let's talk about how we actually do it.

[04:49:07]So, first thing first, the foundation of good internationalization is good source writing. So, American English is Gnome's source language and the quality of English strings directly impacts it directly impacts how translators understand what to translate, how well translations can adapt to other languages, grammar and syntax or and whether the interface feels natural or awkward to users.

[04:49:35]So, the first principle and is also and it's also our golden rule. You should use simple, clear, and consistent language.

[04:49:46]Most translators are non-native English speakers. So, ambiguous or complex sentences, message list to misrations.

[04:49:54]It confuses users in every localized version. So, you should also avoid um slong and abbreviations.

[04:50:03]These are exceptionally exceptionally hard to translate correctly and also translators can't assume abbreviation will work the same way in other languages. You cannot assume that uh for example charet might be spelled out differently in French, Chinese or Polish for example. So you should be consistent and also use the terminology the same terminology and spelling everywhere. Choose one form and stick with it everywhere.

[04:50:33]You have the example with emails and it's extracted from a real module I had to work on. So in this case use just email same syntax.

[04:50:45]Um okay the second rule is about um formatting messages consistently.

[04:50:56]Maybe you know, maybe not, but whites spaces and formatting matters enormously because um for translation, we translate strings including the white spaces. So whenever you you decide to change a white space in your string, it creates a new a new string, a new message that has to be translated. So the key rules are don't add trading space or new lines.

[04:51:20]Don't put white space before columns, question marks or exclamation marks. And also avoid the use of tabs inside messages because tabs won't align the same way in all languages. Uh it depends on the side on the for example the the the side the size of the tab sign on your system and it might be longer or shorter.

[04:51:46]You should also avoid cultural references. Uh idioms, metaphor, region, um region specific conventions don't translate in other languages. Uh they require cultural adaptation, which translators don't always do. Uh the most known example is batteries included which is a message that is that is displayed on Gnome's website and it clearly doesn't translate well in other languages. So be try to find another formulation and to be a bit more explicit you should try to avoid cultural references in your strings. Um I selected these examples from existing messages not not only from Gnome but from other projects that that require translation.

[04:52:36]And the fourth principle you should never never ever catonate strings. Um we often say that the i8 and teams uh because building messages by concatenating fragments is one of the main issue we face with internationalization.

[04:52:58]In many languages the word order defer fundamentally um and when you catenate concatenate fragments you just force the English word order. as an example um in English it's subject verb object in Japanese subject subject verb object in Japanese subject object verb and in Irish verb subject object so if you concatenate strings you force the English word order and it can it cannot be translated also we lose context so maybe the solution well no it's not maybe the solution is to provide complete string for each context So this way each string is complete self-contained and translatable as a wall. So don't forget provide full strings.

[04:53:49]Next principle endle pres correctly. So preling is a common localization problem and many developers try shortcuts that breaks that break in other languages.

[04:54:00]Hey, no worries. Sometimes I do it myself. So there are many problems with the syntax you have above. Um it doesn't account for language languages with irregular plurals like foot and feet for example or sheep sheep. Uh but also other languages have um a way to represent plurals without an ending s.

[04:54:21]So it clearly doesn't work. Also we have English with different we have sorry languages with different form of plural.

[04:54:29]So in English in French and German we have two forms of plural. uh but in Polish, Russian or Czech we have three lang three forms of parole and in Arabic I found many complex rules and I I won't say more because I will probably say something wrong but so the context changes and there are many forms of pre you can't account that there is only two so maybe the solution would be to to yeah maybe the solution would be to try a good if statement but it still breaks the rule of there are in other language more than two probes. Um so the correct approach is to use n get text.

[04:55:14]It's um it's a function from the get text software that you use and you should use it even if you know the number will never be one because as I said there are many different forms of pearls in in other languages. So even if you don't even if you know u there will never be a one value it can there can be two three four five uh you should use n get text I've got an example in English it's file and files and in polish we have three forms of uh pre rolls and complex rules in the middle because numbers ending with two three and four except 12 13 and 14 have a certain form of per and the other case have a third form of pero.

[04:56:03]So what are the techniques? Now we've covered how to write good source strings. Uh let's talk about some technical uh tools and practices to make to make strings translatable. So the getex library is the standard system uh for making and translating strings in in C code. And so and oh sorry so understanding and um understanding how to use it correctly is fundamental. So new get text has many compatible implementations in other languages like Python, Rust etc. So first thing you should use this macro because this macro underscore parenthesis is used by X get text. It's a tool to extract to detect and to extract get um strings as messages to be to be translated. Uh it works in many languages. So we use the same process for all the Gnome modules that we have on on dem. Um of course there are messages you should not translate like debug messages uh variable names and and so on.

[04:57:07]Also for dynamic content uh for dynamic content you you have to use format specifiers. Uh so you should never hardcode values like digits uh like it's digit in my example because um we have to keep the connection for translators between um the number and uh well it's part of the context actually.

[04:57:31]So translators have to understand the context of the string of the string. So if you write step uh blah blah out of blah blah uh it gives information to the to the translator that the that the number of of of step could be in limited and also if you maintain this kind of string you have to make two changes in case your your loop number changes. So you should always inject uh parameters uh this way. In other languages like in Python, you can also name your parameters which gives a way better context to translators. Like in this example, I could say step number of total number of steps and I can and I guarantee you that it helps a lot.

[04:58:19]Um in my library in my software I have homonyms. I use same strings but in different context. how to tell the translators uh that actually they are uh two different context. So the best example is how to to translate open. In English maybe it's always open but in other languages it's not always open because open could be um a noun or a verb in this example. So some English strings are ambiguous and the meaning depends on the context and it's it's uh it's something we have to be aware of.

[04:58:55]So you have to use pig text and p text the first parameter is the context. So the best thing is to use a key because this key you will reuse it you will reuse it in the same context after for example uh this case of open um is a case I encountered with dim lines because with dim lines I wanted to say that a merge request is open or closed and there is another translation there is another message for another thing with open and it clearly doesn't translate the same And of course with comments if you don't know how to reduce the ambiguity or if you want to add uh context to the translators you have to use comments please about time okay 20 minutes okay so I'll talk about local support uh Gnome has 55 language teams. Obviously, not all of them are active. Not all of them reach 100% translation. As an example, the French translation is not 100% complete, but we focus on Gnome versions and and Gnome UI of Gnome documentation. This is our top priority.

[05:00:18]But supporting a local means more than just translating strings. It means understanding and accommodating fundamentally different ways of writing of formatting and on organizing information.

[05:00:31]So when you write source code for uh and strings for Gnome you're not writing just for English speakers you're writing for the entire world and also for languages with radically different properties. So we have plenty of writing systems. Uh there are different alphabets and this list is not obviously exhaustive. We have Latin, celic, Arabic, Indian, Chinese, Korean, Japanese and probably many others. So there is in addition to this different ways to read text. So from left to right, right to left and in some rare cases it could be birectional if if it's in case a mix between LTL and RTL text.

[05:01:12]And of course uh we have also letters that change shape. uh as an example in Arabic you have um you have the letter that change shape based on the position in a word. So we have you have a sign for the isolated character. You have a sign for the uh initial median and ending character which is different every time. Well it's it's not different every time but it's different based on the position. And um you can see the translation of save document in different script.

[05:01:50]And so what is it? So what's normal in a local is wrong in another. But let's take an example. Um people speak French in parts of the world that are not France.

[05:02:04]They don't use euro. But I use Euro because I live in France.

[05:02:08]uh we don't or we may or we may not have the same in cultural references.

[05:02:15]So how do we handle this? How do you end this? Um by extracting all these context, all these numbers, date, currencies and measurements from the strings, you help um um translating and localizing uh the the the systems. So for date formats for example, the easiest thing is to use uh the frameworks we have. So you can actually render the date. You use an object that is a date and you render the the date in the localized version based on the system local using the format specifier percent x for example.

[05:02:54]For numbers uh there are different ways to write integers as I showed on the right. Um, in French we use uh a space as a thousand separator, but in English it's a comma. I think it's the same for decimal separator. It's a comma in French and a dot in in English. So again, you can use uh this single quote indicates that it should use the uh the adapted format in the in the system locate.

[05:03:28]And another subtlety with currencies.

[05:03:31]And as I said, there is different ways to write currencies. In French, you put the symbol at the end of the number. You have a space and the symbol. And in English, the symbol precedes the number.

[05:03:48]So you should always let the local let the local handle the position and the writing of of uh of your currencies. And this time it's not getext. It's it's in the example standard C code. Uh it's it's from some standard library. It's strmon the function you can use. And uh again for linguistic specificities English has a minimal inflection. An inflection is a process of word formation in which a word is modified depending on its role in the sentence.

[05:04:24]So as an example, a Russian has six cases, six grammatical uh cases and rules of each linguistic element each changing word ending. You have always the same beginning of the word and the word ending changes and varies. It varies depending on the context. So whatever the order of of the of the words in the sentence, you keep the meaning because of of these uh word endings.

[05:04:56]because it's implicit that the from and the for in the English example are implicit actually.

[05:05:07]Okay. So I'll talk about a bit about linguistic inclusion.

[05:05:12]Um I would like to focus on something I long thought about which is not a rule or recommendation uh at the moment but uh it is something I experimented with as a translator. Um these insights were discussed were debated and it is very clear that we as translator as translators have received also a lot of concern about inclusivity of the language both in original strings and in translations. So my example in this section will be exaggerated just in order to to understand what what I'm talking about. Uh the main idea with this is that a lexical choice can exclude uh can render invisible and can embarrass a community or people. And so when we write software our choice our word choices our word choices signal uh who is welcome and who is rejected also.

[05:06:10]So maybe the most important thing in internationalization is you should never um assume the gender when referring to people. Uh the most common case is when you refer to user or administrators because in all cases you should avoid pronouns like her, his etc. Except of course if you explicitly know the gender of the person you are talking to. Um for example in French when you try to translate user we say utiliz which is user or user because we say the masculine and the feminine form at once.

[05:06:52]So you can use collective or plural form instead. So using administration team for instance or uh system administration uh when you use this form of of um of um sentence we keep the language neutral in English and also in translation because the gender is on the team or on the system not on the people uh you are talking to.

[05:07:18]So with the same idea uh try if possible to to write your sentences a neutral way.

[05:07:28]Um so you should avoid languages stereotypes or um or make assumptions on on people. So try to avoid normal mode but say instead standard default uh well you have as I said exaggerated examples and also try no it's not try but you should avoid discriminatory phrases uh many free libra open source software decided to exclude some of the terms um because they refer to oppression and discrimination so you should avoid them in in any case except for non exceptions uh such as when you refer a term in another software and you when you are referring to something that exists outside of of your own software. Um yes and in this case the the word you use should be put in quotes to indicate that you are quoting someone and it's not uh our software or the Gnum project is speaking and I am almost done. Perfect.

[05:08:39]Um I would finally talk about what we do um tech um what we what we do in the i89 team and talk about deml lines our localization platform.

[05:08:56]So we provide our own localization platform which is demlines. It allows us to coordinate translation in all our languages and it also extracts the string from your software. So you just we we just have to connect uh dem lines to your repository and then we do the extraction of messages ourselves and we coordinate the translation process ourselves.

[05:09:20]So um why is it called them lights? It's a reference to to a sentence which is lies demlines and statistics. It's a critique of applied statistics because we are a statistic application. We track actually the translation completeness of our software.

[05:09:43]So I tried to compare the situation between Gnome and other desktop environment projects.

[05:09:51]And uh in terms of scale, we can compare Gnome to KD because we are both major projects with hundreds of modules and tens of thousands of strings to translate. Um we are organized very differently. KD is still using SVN and a synchronization process to push uh PO files to the uh software while we use them lines to directly push um um commits of of PO files directly to your repositories. So it's an automated process with deml lines. we have um a tool an an offline tool which is g translator which is highly maintained and in KD they have localiz which is also a tool dedicated to translation in their ecosystem. Other projects benefit from centralized platform like trans effects or weblate but they are really small in comparison to uh KD or Gnome.

[05:10:51]Our process deliberately prioritize consistency over convenience like every six months the question rise again why don't we provide an online translation platform I'd say it's more a feature than a bug actually we think that um as we focus on consistency we think that translating the PO files as a wall uh improves consistency See because you can you have the wall context of the application and so when you are in doubt with a term for example you can just search in the PO file to to to just compare what what is the term that has been used in previous translation. So our focus is um consistency with this uh we also have llines working on unifying the translation process. So the translation is really simple. You are a member of a team you decide to translate. So you reserve a module for translation. You translate, you upload your PO file. It is being reviewed, then approved, then pushed to the repository. And it's what does demand? It's a it's an application to coordinate the translation process, the translation process. And finally uh by having um such an application on on our ecosystem we al also lower maintenance maintenance and overhead and resources because demline is a very lightweight application and it's a very critical application also because without them lines uh we cannot uh localize software.

[05:12:28]So the trade-off is that translators have to install g translator translate offline. Um but the benefit is quality because we use translation memories and the terminology is also discussed in within the teams within the translation teams and uh we understand that it's a demanding workflow but with our focuses on quality lines. This is what you have on the right. It's the what is it? Yeah, it's the summary of of a module. You have the translation of uh nom shell in French for example. We track many branches because we have an organization which which is based on module. Module is an application. So glib is a module. Nom shell is a module or well you got it. Uh we track branches.

[05:13:24]Uh this allows us to maintain translations in previous versions of of nome for instance. For instance, I had to fix a string in nome 49 and I also fixed it in Gnome 50 and tracking different branches allows us to do this.

[05:13:41]We have also the domain. The domain the two main domains you have are UI translations and documentation.

[05:13:48]is an exception because for you have PO install, you have installer, Windows installer, you have documentation, many kind of documentations and the root and the core thing is the PO file, the file you actually translate um as a translator.

[05:14:08]I recently added something in demand.

[05:14:11]It's the the ability for maintainers to actually change the settings of their modules. Um we well we received a lot of of questions or of um of request to update like the URL of the project to update the generation process of some modules and so we decided just to open the the ability to modify the the properties of your module yourself on timeline. So now you have a form to do it.

[05:14:43]And once your module has been approved uh well if you want to add your module on demlines you have to talk to us opening an issue on GitLab and we will have a we have a review process and we will ensure that everything is correct.

[05:14:59]But once your project is accepted and added on demands, you have a full control of adding branches, removing branches, um changing the PO generation strategy, etc. And finally, I would like to talk about string freeze breaks. Um so for upcoming or already released module with modules which track string freezes. So as of July 2026, Gnome um 50 is frozen and Gum 51 will be frozen at the end of of mid mid August and we have an announcement period that starts at the beginning of August. It means that if you are a developer, we would like you not to update the strings of your of your software because um translators need to have time to translate and if a string has been translated, we don't want translators to translate it over another because you wanted to make some adjustments. Um from the first August of this year, you have to declare uh the the breaks and they have to be approved.

[05:16:08]It's not like um it's like it's not a punishment. It's just to ensure that we can help help you with with the strings and and also maybe try to find an arrangements uh to to maintain consistency.

[05:16:23]In any case, you should contact us on GitLab, discourse or matrix and we'll fix that together. So this is my conclusion and I think I'm okay with the time.

[05:16:35]Um so as I said internationalization is a form of accessibility. I want to insist on this. Um Gnome has a good support for about 80 languages 80 locals with radically different writing systems system systems. So text directions grammatical rules and structures um highly inflected languages like Russian for instance or segmentation free languages like like like Chinese. Um, Demlines is our translation platform. We coordinate the international internationalization and localization process. So, if you need anything about internationalization and localization, please reach us.

[05:17:18]And if you want to join us, you're welcome. So, thanks for listening. I'd like to thank Anders, Rafael, also Victoria from the Polish team and Dennis from the Russian team who helped me help me ensuring that what I said is correct.

[05:17:34]So if you have any questions and suggestions, please ask.

[05:17:48]Hi there. Um, this was super interesting. Uh I love how you dip down into the implementation but also the details about how to translate actually.

[05:17:57]Um I wonder do you see any gaps in documenting all these like is this I'm I'm having a look for instance at the writing guide in the human interface guidelines and I love it because super concise super helpful in some ways in how you should be concise and that how how that helps with internationalization but I think for instance about all these cultural nuances or the or the inclusive language um you you need reference material for that right you don't just do inclusive language you need to know the actual instances of of it, right? Do you see any gaps there and and um yeah, basically that's my question. Um our first objective before this presentation was to update the documentation then to actually present what I'm presenting right now and at the end say hey we have all the guidelines written uh at the end of the presentation and actually we uh we as you see uh we didn't we didn't have time to to do this but this is our plan for the next six months. It's to actually take the documentation that is living on the old uh Gnome wiki to convert it to well because this documentation can now live in multiple places like the unbook, the developer guidelines and the UI guidelines. So we have to take them as a wall and try to dispatch the correct things at the correct places because the public is different every time. So we have this um this uh task on stage and this is our goal for next six months. We have a blog post which is actually almost ready to explain just that. Uh but we missed time to do it. But this is planned for the next month. And yes, yes, we have this big challenge and we have also changes on demands that you might like on on on the next six months, but I won't say more, but just have a look at the backlog and and you'll see.

[05:20:01]>> We are mostly out of time. Um, urgent questions.

[05:20:07]Dome. Thank you.

[05:20:09]We now we now have a short break.

[05:20:14]>> Thank you very much.

[05:20:42]Heat. Heat.

[05:21:33]Heat. Heat.

[05:21:59]Oh, hey.

[05:22:23]Heat. Heat.

[05:22:45]Oh, a ah.

[05:22:57]Heat.

[05:23:16]Heat.

[05:23:21]Heat. Heat.

[05:23:43]Hey. Hey. Hey.

[05:24:28]Heat. Heat.

[05:24:36]Every a Oh, hey.

[05:26:37]Heat.

[05:26:42]Heat.

[05:26:52]Uh-huh.

[05:27:15]Heat. Heat.

[05:28:35]Ah, everything.

[05:28:57]Oh, hey.

[05:29:19]Heat. Heat.

[05:30:02]Hey, everybody.

[05:30:11]Heat. Heat.

[05:30:55]Oh, ah.

[05:31:02]Heat. Heat.

[05:31:24]Heat.

[05:31:36]Heat.

[05:32:09]Hey.

[05:32:14]Hey. Hey.

[05:32:30]Heat.

[05:32:33]Hey. Hey. Hey.

[05:32:59]ah oh.

[05:33:04]Oh.

[05:33:40]Hello and welcome back to track two of the quadc um the last talk for this afternoon is about com I don't know how to pronounce it compalanche uh by kuan I've been told you can hear what I say to this microphone which will come in handy when there are questions at the end having said that there's one uh additional uh message that there is a link in the Guad attendees uh matrix room to submit questions for the AGM tomorrow.

[05:34:16]Now over towan.

[05:34:24]Hello. Can you hear me?

[05:34:30]>> Yes.

[05:34:30]>> Okay. Hi, my name is Juan Pablo Garte.

[05:34:34]I'm from Argentina, currently living in the US. I've been working or involving Gnome since early 2000s. Um, most of my work first started contributing to Glade Glade 3. Uh, and nowadays for the past few years, I've been working on Kambalache, which is just the new version of Glade for uh, for CTK4.

[05:35:04]So all right. So um that's enough. We can start. Um so kambalache.

[05:35:19]All right. So kambalache. What's kambalache? Kambalache is a what you see is what you get tool. It's a an ID to create um to create user interfaces for GTK 3 and GTK 4. Um uh and it has one simple goal, spare you from having to write XML by hand. I really don't I never like XML. Um, so that's why I work so hard making a tool so you don't have to uh write XML. Um, and the intended audience is uh developer that are already familiar with GTK. So if you are starting, I really uh advise for you to uh follow GTK tutorials, get to know the basics of the toolkit.

[05:36:18]uh write some XML by hand, some small examples so that you can understand how everything is put together and once you have a a basic understanding uh Kambalache or Glade will make much more uh sense.

[05:36:35]Okay. So in this presentation I'm going to do something a little bit different that what I've done in the past. In the past presentation, I just enumerate all the new features that I added in the past year. But this time, what I want to do is uh showcase make a little application uh and showcase uh how everything gets together using uh kambalachi.

[05:37:02]So what kind of application should should we do? Um my first idea was let's well something like a video player or a small web browser uh something that it's visually rich and that we can see something nice in in the screen. So I asked Mtolon and most people uh decided uh that it was a good idea just to make a web browser. I also use uh the new feature in Kambalache where I can ask users uh for for pools and the results are uh similar.

[05:37:43]Uh so that's uh what we're going to do today. But the focus is not this is not a tutorial for uh programming on how to make an application but just how to use kambalache from start to having something that uh works. Okay. So we're going to do a very simple web browser. We we're going to use webkit web view widgets.

[05:38:09]Uh by default we're going to load uh the planet kome uh website.

[05:38:16]We're gonna add a home button and some navigation buttons to go back and forth.

[05:38:23]Okay. So, let's start with a project from uh a project from uh scratch.

[05:38:31]Okay. So, the first thing we're going to do is add a project name. We're going to name it uh planet the gnome. going to add an app ID and we're going to store it in project.

[05:38:50]It's going to be a Python application and with template we're going to use the Gnome application template which creates all the plumbing for you. create um a small u GTK application uh with all the resources that that you need and everything should work. So let's create a project and as you can see here we have the source code. Let's make this a little bit bigger.

[05:39:26]So we have the source code and we see here we have a window and the UI XML for for that window and if we run this we get a nice hello world application.

[05:39:44]All right. So now that we have our project let's move on and let's create a kambalachi project for for this application. So the first thing we're going to do is create a new project.

[05:40:00]Uh let's call it planet.

[05:40:04]This is going to be the name of the kambalache project file. And we going to store it. Let's choose here the root directory of the source code of the project we just created.

[05:40:22]and we choose uh GTK4.

[05:40:25]Okay. So, let's create a project.

[05:40:29]Now, here by default, Cambach creates a a UI file with the same name where you can start adding your widget. But today, we're going to do something different.

[05:40:40]We're just going to remove this and we're going to enable uh so this is a blank project that only has GTK toolkit.

[05:40:50]So you can choose the settings of the project and enable the different um libraries that you want to use in your project. So we're going to use adita and now we have adita uh widgets also present in the different choosers. So we could start creating uh files uh right away or we can import the project that is already been created. So for that I added in the past few months I added a new import directory feature where you just select the root of your project or or where your um glade project file is and then just click import and it will lo scan all the files and it will load everything that kalache supports u being um all the UI files. For example, here we have the shortcut window and the window the main window for the for the application. And we also have the G resources that are used to include this UI files in the in the project.

[05:42:02]All right. So we added that. So let's uh remove this and we're going to add as the content of the of the main toolbar view. Uh we can add a web view. All right, we need to enable webkit first.

[05:42:23]Let's enable webkit here and let's add web view.

[05:42:32]Okay. So this is a web kit web view by default in the workspace in kambellache.

[05:42:38]H when you create a web view it just load h someh just to test for example we and have some UI test. Let's so you can run you can see how how thing everything works. So this is the web view. Let's put a name to it. Let's call it web view.

[05:43:05]Save the project.

[05:43:07]And that's it. We can uh move on.

[05:43:16]Okay. So the first step, what we going to do? First, we're going to make um we're going to load uh planet Gnome by default.

[05:43:27]Add a home button.

[05:43:29]and use uh use a signal callback to connect to that home button so that we can go back to uh planet and also uh then we're going to show how to implement an action the same do the same thing but with an action.

[05:43:49]All right. So here we are back again in Cambell with the project.

[05:43:59]Let's just add a button here. So one one thing um to mention here for example how we going to add a a button here. Um by default kambalache works with placeholders. This is when you create a a window. This is the the widget that looks like a grid. This is where you can doubleclick and add any any widget.

[05:44:26]For this to work, I need to write custom code in the workspace view needs to know what what where to add a placeholder so that you can add different childs. Most of the widget and that's very time consuming. So there's very little support only like the basic uh widget have uh support for placeholder. That's uh something that in the future I plan to improve um now that the core of the application is mostly done. So when you use a a widget like a white widget that had very little support for placeholders um what you can do is delete this window.

[05:45:14]What you can do is um you can either use uh in this case uh properties and set and create widget directly in the properties or for example now we here we select the header bar. We know we can add uh widget to the header bar. So if you want to add the button you can choose uh this and you when you select the a class if you place press hold hold alt while pressing here it will add a a button directly or you can select right click and add object here and it will add uh the object that you had selected it will be added um in in the selected option and that's a way uh to add um children when there's no good support in in the workspace. So, okay, we have our home button. Let's call it home and icon name. Let's use something that's already here using let's go home symbolic. All right.

[05:46:30]So, we said that we were going to load.

[05:46:34]We going to do that by co in code. Uh, we added the home button. Let's create a call back. So, I'm going to select the button, go to the signal tabs, and here you you get all the different signals for for that object.

[05:46:51]Let's add one for on home.

[05:46:57]Click and save. All right. So, we have our web view.

[05:47:03]It's called web view. And we have our button that's called uh home. So, let's see if we can implement this.

[05:47:12]So, let me maximize this. And we're going to go here to the window class.

[05:47:22]And what we're going to do is um this is the label we removed. Now we have a web view and we also have a home button. Um this is uh syntactic sugar from uh the excellent Python uh bindings that uses the template and it just finds the reference of the object that's defined in your UI and assigns that to this class uh member automatically.

[05:48:01]So that's very convenient. Now let's define h function on home click and what we want to do is self web view then we can access the web view and we're going to do a load query planet genome.org that uh that should work. Um and now so we need to tell GTK that this is the callback we want to connect uh we want to connect to this home on home click call back we define in the and that's done by we can use a decorator so PTK comes with a decorator that's called gtk template dot callback and you have to pass the name of uh the callback that you want to connect this function with and that's it. If we run this should work.

[05:49:35]If we add colon at the end of the definition there will forget to save on home click.

[05:50:34]All right, we're having a problem here.

[05:50:43]And I don't understand why this says that it's it says that it's not finding that was declared but not present in the template. All right.

[05:51:10]Is here. Did I misspel something?

[05:51:20]No, it's not misspelled.

[05:51:26]If anyone sees sees the error, please chime in.

[05:51:51]Plan it in a window. That's Right. Type name.

[05:52:23]All right. What could it be? Um, can Oh, here we go.

[05:53:15]Um, okay. This is what happened to do.

[05:53:19]We have RX1.

[05:53:23]For some reason, there's a typo here.

[05:53:30]I don't understand where that type typo comes from.

[05:53:37]Uh but if we if you if we look here it says planner henome instead of planet.

[05:53:48]So we change that. I don't know what how that happened. Um, so now I should say planet Gnome.

[05:54:06]Oh yeah, this is a Oh, so thank you. Yes, that's also a a good point. Um, so we have window here. Obviously, I already added a web view to the UI and um GTK doesn't know how to uh create that. So, we need to import um WebKit here.

[05:54:44]WebKit. And we going to need to import GI and do uh GI require version.

[05:55:12]We're going to say that for WebKit we need version six.

[05:55:38]And uh this is one thing that um currently we we load webkit but um the web view type is not register yet. So we can and so um GTK builder will not have access to the type but we can do uh we can use um G object we can do G object type ensure and we have to pass the G type of class that we want to make sure that it's instantiated that it's registered.

[05:56:24]So web webkit web view with capital here g type.

[05:56:38]All right. So now we have um planet Gong window.

[05:56:56]There's a planet there. And so now maybe we are lucky. No.

[05:57:06]All right. WebKit is with capital K here and K here.

[05:57:22]All right. So um the web kit should be there and if we press home button.

[05:57:36]Yes, I meant web view.

[05:57:41]Uh web view.

[05:57:58]All right.

[05:58:00]Do not create before displayed.

[05:58:15]There's something in web view that is not working here. Um, it be something in the manifest. Maybe we need to add uh That's device BRI. So that should work.

[05:59:15]All right, let's move on. Let and we can run the application uh later or um Yeah.

[05:59:35]Let's put a print f here. Let's print and let's https print print on click and let's see if that's working.

[06:00:00]Yes, it's working. But there's something in web that is not working. And you're in by the end of the applica of the presentation, you'll know why there I'm testing too many things live at the same time. All right. So using templates. So oh um yeah, we are kind of short of time. Let's move on. So using template, let's going to create a template from the header bar. Add some more navigation buttons and add your URL entry that we might left out because we don't we won't have enough time.

[06:00:48]So let's open the project here and let's create a template. So here we have the header bar. We're going to create a new UI file.

[06:01:08]We're going to call it header bar.

[06:01:18]So now we going to go back here and we're going to cut this here and paste it here or all right uh there's a bug here. Let's just recreate the the header bar and AW header bar we going to add here and here. Let's add the button again.

[06:02:29]also home and the name let's say that is wind home and let's also add two more buttons Uh here Go next and let's call this back or let's call this back and call this forward.

[06:03:48]And so now uh we have a UI file that has as a top level a header bar. Let's call it um planet no head bar and let's so if we see the definition of this file we see that it has an object class and it's the header bar with a ID planet genome header bar. If we click here in template uh that will tell um tambalache to use this as a template. So here is serialize as a template and the thing that we can do now once you click that template you can go to the other uh UI that's going to remove this and here uh we're going to select uh planet nom header bar and we're going to add a new one here.

[06:05:08]Um and select the layout as uh top. So that will put the header bar in the top of the toolbar view. All right. So now if we look at the definition of of here we'll see that we have the template genome window and here in the child top it's just using the class that we just defined as a as a template. Um, let's save here and let's go back to the project.

[06:06:18]And so now here we need to add a new file.

[06:06:27]Python.

[06:06:30]We're going to copy the source code from window and ignome header bar here.

[06:07:07]I say home back and forward pass on click. Uh all right let's and header bar header bar here.

[06:07:30]We don't need the web kit. We are not using webkit here.

[06:07:42]Um another thing that I miss is the resource file. We need to add uh a new file here. So, let's pick the header bar that we just created.

[06:07:58]And sure, why not? Let's strip XML blanks too. Um, so now we have the the header bar, the UI, it's already in in the resources file. So that should be compiler and build available uh as this resource path. We added the header bar. Uh, we probably need this to the me file here.

[06:08:39]header bar and nothing in in it. Okay, let's see what error we get here.

[06:08:52]All right. Yes, we need to clean up uh window.

[06:08:57]We don't have this home anymore. They're bar.

[06:09:19]All right.

[06:09:32]All right. So, we need to import from All right. Okay. Um, AW at white header bar is a final type.

[06:10:19]So it cannot be uh derived.

[06:10:23]What happens for not trying everything from scratch.

[06:10:28]Okay. So habaric cannot. So let's make it derive from GTK box and not do it. Let's go back here. So, header bar remove the header bar from here. So, we can modify the template. This is not going to be a template anymore.

[06:11:18]I'm going to add a box as a parent.

[06:11:23]So, It's going to be the header bar. The box is going to be the the new template and select template here.

[06:11:42]View the new header bar right here. Yes. Go on. Uh time is almost running out.

[06:12:02]Time is almost running That's everything and yeah this is how um you use uh template uh in kambalache you create your UI you set template and once you set an it in other places in other UI files to create your UI so let's move on and yes that was the end of the presentation Um the application didn't work because of EGL problem with WebKit. And now you'll see I don't know if you have any questions and then I'll show something else that will make sense why it wasn't working.

[06:13:20]>> Okay. Can you hear this?

[06:13:26]>> Does it work?

[06:13:29]>> Yes, I can hear you.

[06:13:30]>> Okay. Any question?

[06:13:36]Hi, >> how is Kambalanche different from Liua?

[06:13:48]>> Okay. So, uh Libua is a library. It's a collection of different toolkits, different widgets made with GTK. So you have like different um views, split views, dialogues, different components and kambalache is an application to use GTK and leave a weight um object to create a a a UI file. So if we um go back here um what you see here in this in the center that's what I call the workspace uh that's a live preview of the UI that you are um creating and it will be the same instead of uh you will have to do write all this to create something like this. So here you can let's create a a new one for example new UI you can add you create your window that's you what you did and you will have to write this XML object window uh then um inside your window you usually you can put it like a box uh inside the box.

[06:15:19]Uh you can put a label. This a label is um which define in GTK.

[06:15:28]Uh then you have a AW add shortcut label um that has an accelerator and some other properties that you can set here.

[06:15:47]And basically it's a way to live to create the UI definition that will be then loaded by your application to construct the the UI.

[06:16:03]>> All right. Thank you.

[06:16:05]Uh there are no more questions in the room. Um maybe you can keep an eye on the QuadC track 2 matrix channel if there are any questions there. Thanks for the presentation.

[06:16:17]>> So I I have one more thing to show that one minute. So what could uh nothing can possibly go wrong right with a live demo. So what I've been showing so far what are you what you are seeing in the share screen. It's a GTK4 application that I created using Kambalache to present the slides themselves. So here this is in this project you can see this is the talk that I'm giving the project and what I did is basically I have a slides uh I have a GTK stack called slides and inside it I have um all the pages that meant that were uh part of this uh application. So for example in in this here what you see in the background it's a it's a class it's a widget I made uh last year uh to show shatter toy uh shaders pixel shaders uh and as you can see here I created different shaded toy and shaders and I basically mimic the API from uh shader toy so I to run my shader inside uh the slides.

[06:17:46]And what I did, what I did basically I created a a an small script that loads the UI files, finds the the stack called slice, put it inside the window, add some um shortcuts to go back and forward and for this year I added small web view webcam view using G streamer so that I can share um my camera together with the with the slice.

[06:18:22]Uh and that's why WebKit wasn't working because WebKit kit was running inside a compositor inside the application and there's some bug somewhere there that uh the hardware acceleration is not working.

[06:18:39]That is so >> as usual uh help wanted please joining on if you have any questions joining us in matrix. Uh here is the gitlab um page for kambalache and thank you.

[06:18:56]>> Thanks a lot. That's really cool.

[06:18:58]Amazing. Thank you.

[06:19:14]Heat. Heat.