 Good morning, everyone. So this is the web development track. I hope everyone had a great social event last night, and everyone is ready for some more. And yeah, as someone who has had their first struggles, would like to strike API-funded integration so far. I'm quite excited for this one. Santosh, take it away. Thank you, Max. Before I begin, I want to ask some questions. I mean, it takes great effort to come here early in the morning at 8.30. I know the pain, so let me ask some questions. How many of you create content on the internet? I mean, how many of you write blog posts, or how many of you create videos, audios, and post it on the internet? No one? One. And how many of you make money for your content? How many of you want to make money for your content on the internet? No one wants to make money from the internet? And how many of you think it is easy to send money between each other? And how many of you think it is easy to send money from one country to another country? No. So let's talk about web monetization now. So today, I'll be talking about web monetization, a new JavaScript standard that will help you to monetize your web content. For example, it might be your blog post. It might be your video, audio, anything that you put out on the internet. I'll talk about how you can monetize it. So coming to me, I'm Santosh. I'm an ambassador at the IntelliJer Foundation. I contribute to IntelliJer projects. IntelliJer is a nonprofit organization and an open source organization. So I contribute to their projects, and I also help contributors to get involved with IntelliJer. And previously, I have been involved with Mozilla. If you have heard about the Firefox browser, I have been involved with them for over 10 years. And anything that I learn as a part of web development, I go to conferences and teach about them. And so this is what we are going to talk about. We are going to talk about the current ways that we can monetize our content and the challenges involved with it and the pain points involved with it. And we'll talk about if there are any possible solutions and we'll dig deep into when is it all going to be real, the solutions. And what we could do now has web developers. So first, let's talk about how we can monetize our content right now and what are the challenges involved with it. The first thing is advertisements. If you have a blog post or if you have a website, one way to make money for your content is through advertisements. And they are at the core of making money for a lot of organizations, even big organizations like Google depend on ads for most of the revenue. But it also comes with the challenges. For example, in like five years back or 10 years back, if I want to download any music, I have to go to a website and then I'll find all these download buttons and you have to find the right download button to download your song. This is pretty hard because these platforms heavily rely on ads to make money. And one of the challenges, it is completely intrusive. Like people are worried that these companies will stay still data and then use it for targeting advertisements. And they also spoil the experience of the user who wants to visit your website. They will divert the user from the original content that they came to the website for. And the second way that people could make money is through subscriptions. This is a direct way where a consumer will pay the platform and the platform will make money out of it. But this also has challenges. For example, if there is a platform where I liked only one content, one article and I want to pay for that single article, it's not possible. I have to pay for the subscription. And when you have a lot of subscriptions, it becomes hard to manage your subscriptions as well. You will have one for video. You will have one subscription for audio. You have a couple of subscriptions for news websites. And this leads to something called a subscription fatigue. And it becomes hard to maintain those subscriptions. And the other way, you could make money is through sponsored content. And this also has some challenges. Like you will be able to post sponsored content and you will get opportunities when you become famous and you have a good large base of users who follow you. So it is limited to only the top few percent of the content creators. And also this leads to question the integrity of the creator. And this is usually people think twice before using any sponsored content for making money. And the other way is referral and affiliate links. If you are a content creator and if you post your content on YouTube or any of the social media channels, you'll post an affiliate link. And people who go from your affiliate link and then purchase a product, if someone does that, you will get some money out of it. So these are all some of the ways you can make money. At the same time, like there are other ways, but these are some of the ways that I wanted to put forward today. And then let's talk about some of the pain points in making money on the internet. So one is geographical locations and some other related parameters. So this is from Medium. I heard like I saw that Medium is blogged in Vietnam, but it is one of the largest content platforms on the internet where people can sign up as an author and write post and publish them. So I'm from India. I can write post on medium.com and I can buy a subscription of medium.com to read other people's articles. But at the same time, I won't be able to make any money from my content because India is not one of the 40 to 50 countries where people can monetize their content. So it seems unfair that I can create content and I can also buy a subscription, but I cannot make money from my subscription. So that is one of the pain point that I saw in the current content platforms. And then you will have intermediaries and platforms which take a huge cut off money that you're going to make. And also the payments are also not instant. For example, if someone is reading your article or watching your content, you won't get paid instantly. It takes some weeks, maybe months to get your content. And also there are other parameters such as you should have a minimum of 200 to 300 minimum subscribers for your channel or something like that to make money from the intermediaries. And also the current payment solutions are also one of the things to blame. They don't have a micropayment support. For example, if I liked an article and I want to donate like 10 cents to read that particular article, it is not possible right now to donate or like pay the 10 seconds amount and then read the article. And also anything that we do on the internet is easy. It's easy at this point of time to access anything and to create, build, deploy and do anything and to consume any content all around the world. But when it comes to money, it is not easy. You can send an email, you can send a message, you can share a picture, you can share a video. But if you start sending money over the internet, it becomes very hard. They have to deal with regulations and the payment systems are not interoperable. There are a lot of challenges with that. And if you want to buy a service, you first have to again enter your card details and then set up your valid and then make a payment. And this leads to, this cumbersome process leads to, leads people, even makes it hard for people to sign up for services on the internet. And how could we solve this? Now we talked about challenges, we talked about pain points. Let's talk about if there is a way to solve this. Introducing web monetization. At Interleger, our vision is to make sending payments has easy as sending an email. You might be using Gmail and someone might be using Yahoo Mail, someone might be using Outlook. And you can still send emails from one client to other client because they are all built on a single protocol in the SMTP protocol, simple message transfer protocol. So Interleger wants to create a protocol called as, it has a protocol called as Interleger protocol. And if any of the valid and payment systems have adopted this ILP protocol, it is easier to send money from one valid to other valid or one payment system to other payment system. And web monetization is a JavaScript API where I has a user can send money to the website owner directly right from the browser itself. So the core concept of web monetization is if you are a user, you had your valid address on your website. If I'm as a user visited your website, I can make money, I can pay you for reading your content. So the more time that I spent on your website, the more money I can stream to your particular website. And there are also some challenges, there are challenges such as you have to be live. I mean, you should have a stay internet when you are reading the content. Otherwise, even though I'm reading the content, you might not get paid as a content creator. And some other challenges also include, I mean, if there is a way for people to monetize their content other than like depending on the large platforms, they might block it in future. So that's one more challenge. And also sometimes you might have some money in your valid that you wanted to donate to content creators. But since you're not using those content or watching those content anymore, your money becomes, I mean, your money will still be in the valid and you won't be able to make any payments. And web monetization, the standard has three requirements. One is the valid extension and authorization. So the first thing is valid. Valid is like your bank account and it has an account number called as valid address. You should have a valid address and also you as a content creator should have a valid address. You as a website developer should have a valid address and I as a user should have a valid address. So when I open your website, the money will be transferred from my valid address to your valid address at the time. And the valid is the most complicated part because it deals with money and also it has to add her to the regulation that are in a particular country. And the second one is extension. So this extension, you will install it on the browser. If you have used, I mean, if you want to know more about this session, I mean, if you have heard about Grammarly or some other extension that we have on the browser. So those small icons are called the browser extensions and you will install a web monetization provider extension on your laptop, on your browser. And then you will provide an authorization. Authorization is like you will add your valid address. I as a user will add my valid address to my extension and I validate it for a certain payment, maybe say $1 or $2 every month. And then I authorize for the particular payment. And there is a fourth requirement which is the valid address I was telling about. So in this, the valid address you will, you as a web developer will add this valid address to your website. So how can web developers monetize their websites? So let's talk a little about the tech part. So you will add a valid address to your site. Like I said, you will generate a valid address and then add it to your site. So this is how you add it to the head of your webpage. The link tag you have seen, I mean, how many of you are web developers here? You? Yes. So this link tag, you will generally use it for adding CSS to your webpage. And similarly, you can use the same link tag with REL equal to monetization and you will provide a valid address to that particular link tag and you will add this to the head of the webpage. And you can also listen to the monetization events. Like if someone, if I'm paying you and I'll be streaming money like for every one second or two seconds or a couple of seconds, I'll be streaming your money and you as a web developer can listen to the monetization events. You will get to see the value currency and some other parameters as well, which will help you to validate the payment. And so imagine now you have a blog post which heavily depends on ads. You can provide an exclusive experience for users who are like web monetized. For example, if someone, a general user visits your website, you can still serve them hats. But since I'm a monetized user and I'm paying you when I'm watching content on your website, you can remove ads for my experience. So this will improve my experience and you will also get paid for your content. And we talked about standard challenges and everything. Like now let's talk about when is it all going to be real? So let's talk about the component. The first thing, the extension. You can scan this QR which will take you to the project. It is under development right now and we could have a live working extension anytime soon. You can go to the repository and start the repository. And if you want to contribute to the extension as well, this is an open source project. So you can get involved with it. You can find open issues, contribute to it and you can help us test the extension. All this could be done as volunteers. So you can just scan the QR code and start the repository to follow the project. And the ILP enabled wallets, they might, I mean, we might have some financial services soon by the end of this year. There are a good number of finance companies that are started to adopt the ILP protocol. So we might have ILP enabled wallets soon. So for the entire world eventually, we hope to have the ILP enabled wallets. So we have website developers can monetize our websites and also has users we can support the creators and support the websites that we love and use every day. And so this is a sample. So this is a website which is web monetized and you can go to the core in the head. You'll find the link tag with monetization along with the wallet address. And this is the extension I am talking about. This has a public key. You will use this public key to validate your wallet, to authorize your wallet. So you will add the public key here. You will name it and the key that you copied on the extension, you will add it here. And now it is added. And we are checking the payments, like the last payments, which is like $0.6. You're going again to the web monetization, web monetized site. And then here you are adding your wallet address. So this is a user wallet address. User has added a wallet address and $5 and he's connecting the extension. So $5 from this particular wallet address will be streamed to the payments throughout the month. Now you can see some monetization events along with US dollars and the asset scale and some more information related to the particular monetization event. This means someone who is using the extension is paying the particular website. And you can go, you can check here, the transactions. So there is $0.32 of pending outgoing payment, which means the user who has that extension has an outgoing payment of $0.32. And the website creator who has added his wallet address is getting that $0.32. So this is how the entire web monetization extension and the flow works. And some of the advantages of this are, imagine you have a website and your wallet address is configured to your local currency. For me, Indian rupees and for you, Vietnam is dollars. And if someone from the United States is consuming your content, then he might be paying in US dollars. So the cross border transactions become easy through the ILP protocol and with this web monetization standard. So where you can get paid for your content from any country, the people are using your website from. And I was talking about the extension. I spoke about the challenges and everything. Now let's talk about what we can do now. We don't have the valid yet. So what we can do now until we get the valid and until we, so the web monetization standard is also in a draft state and there are a lot of ways that we could get involved with the standard. So this is what you could do. Like now, whenever you have a new JavaScript API, there will be libraries that are built for different frameworks and different, what do you call it, content platforms out there. So one thing you could do is you could build plugins for different frameworks. It might be React, it might be CMS platforms or it might be frameworks such as Astro. So you can build the plugins for those libraries. And also if there are a lot of plugins already built, so you can also contribute to those plugins. That is one way you could get involved with the web monetization development. And then you can join the web monetization channel on the Intercollegiate community slide. So this will keep you posted of all the updates that are happening with web monetization and it also helps you to get involved with the web monetization community. And when we have the standard out and when we have the valid systems out, you would be the first person to get paid for your websites. And also join the community calls. This would provide a direct opportunity for you to get involved with the web monetization working group where you can share your thoughts, where you can get involved with building the standard as well as building the technology behind it like the extension or the plugins or anything. You're welcome to join the web monetization community call and continue to get involved with that. That's it. If you have any questions, let me know. Thank you. Okay, any questions? First of all, I want to thank you because of your really inspiring speech and you helped me a lot to broaden my horizon about how I can monetize my websites. So recently I'm having an intention to build a website to contain a lot of documents for my university students. And because I know that they are just students and they do not have much money to pay for my documents that I provide them. So I'm thinking that I will provide free. So can I have any way to like monetize my website, not including like using the, I mean, I don't want them to pay for my documents a loss. Yeah, I just want to know about how can I monetize my website except from taking money from the students? Good question. So without people getting paid, then you have to rely on other ways that you can monetize your content with ads, intrusive ads, targeted ads. So that is the way if you're looking for a way to monetize your content without using the web monetization standard. But with web monetization standard, it becomes, I mean, you can directly make money from it and it is also not a huge amount. So for example, I was talking about micro payments, like sending small payments, like one VND, two VND, that is something even students can afford it. And they can enjoy a rich experience for your content because you have spent a lot of amount of time. So it is easy for them also to spend the money. And also it is easy for you to maintain your website with the funds that you receive. But otherwise, like you can follow the general ways that are out there to monetize your website. All right. Got time for one more question. Really? I got one more question. How is the cross browser platform support going? Because, you know, I love Firefox. I use it every day, but I know some of my friends use Chrome, unfortunately. And yeah, I was just wondering, is it still like a standard in the making? Yes. So currently until it becomes an actual standard that has to be added to the browser, the entire code to add this is a polyfill, which is in the extension itself. So it is a cross browser extension. And the one which the demo which I was showing you is on Chrome browser itself. It works on Chrome. So the entire code that is needed to be implemented in the web monetization is right now on that extension. And it will be published into the Chrome Web Store. And eventually it will be a cross platform extension, which means you can download on Firefox and you can download on Edge and anything that is built on the web extension APIs. Thank you so much. And last round of applause. Thank you, Santosh. Hello, hello, everyone. My name is Ziraj. And thanks for coming out this early morning for my talk. Really appreciate it. And I'm really happy that we are doing this. And thanks for all the organizers for lovely conference. I'm having a very nice time here in Vietnam. This is my first time as well. Yeah. So before we get started, I would like to know how many of you write code. Oh, nice, most of the one. And how many of you think about writing a secure code? Or there we go. There we go. Everyone wants to write secure code, right? And nobody wants to get hacked, right? So this is all the talk is about. We're going to be talking about web security, specifically front end specific attacks, web vulnerabilities, and how to actually protect your website or web application from these type of attacks. Before we get started, a little introduction about me. My name is Ziraj. And I have been working with GitLab for the last four years. I'm in the part of a security as a front end engineer. And we build security products within GitLab, which are being integrated to GitLab product. And I also like to play ping pong. And I can play with both of my hands. And switching in between, I like that. That's fun. And I also like to poke around the web applications I use on everyday basis for swags, stickers, and who doesn't like free stuff, right? And then this little pop up at the bottom makes me really happy. Does anyone know what it is about? Has anyone seen this little pop up? It's like mere JavaScript alert. And we're going to be talking more about it. But these are the companies where I have been sending a lot of reports, security bugs, and to get some free swag, like I mentioned. And just to make the web more secure, anybody can do it. Every company has their own security guidelines, how to report bugs. And you could always go to their website and check out their security bug-boundy programs or any contribution website where you can build and help them write better software and help them secure their website or applications. And so this agenda is very simple. We're going to be talking about XSX, cross-site scripting, and content security policy. And in some of the initiatives we have taken at GitLab to make sure our application is free from these security bugs. And then if you have any questions, I can take them after this talk, or I'll be around the entire day. So don't hesitate to reach out to me. So yeah, first and foremost, security is important. It's like an elephant in the room when everyone agrees. That's important, but only a few takes very seriously. So it's like some of the companies think that they are doing so good, but they don't know they have been hacked or there's a famous code where some of the companies don't know if they have been hacked or they are yet to be hacked. And then it's like speeding on a highway. You get incredibly fast, and then you get fined, and then you start driving slow. So it's about once your app is compromised, you lose your users, you lose the trust in your applications and the users. And so that's why it's very important to make sure these things are being thought before building the application or while building the application and not afterward. And one of the misconceptions I have seen among us, the developers and the company stakeholders that security is only on the back end. But I'm going to talk about security stuff related to front-end as well is important. And little story time. So this particular instance where there was an issue with McDonald's website, everybody knows what it's McDonald's and we always eat it from there, but they also have a website where user can order, place and order online. And for that you have to create an account. And what the particular person did was there was a vulnerability using the AngularJS bypass where the AngularJS and bus bypass where whatever the password you set on the website, it will be stored on the browser itself. And if you visit a malicious website, they will be able to fetch that password and send it to them for malicious intent, right? So this particular instance had multiple issues identified and then put them all together to achieve this. So also there have been a lot many instances with WordPress. Everyone might have heard about WordPress. It's a popular blocking platform and people build websites out of it. And so it has very much being used and abused because of they have features like extensions. Anybody can write an extension for WordPress and publish them. And there have been a lot of instances like people write malicious extension and publish it and then it gets through and ends when you install an extension it tries to act as a key logger and just fetch all your user's password credentials and take them to the malicious websites or with attackers. Anybody knows what this particular application is? You might have seen it, chat GPD. There was a particular similar bug in chat GPD as well when somebody reported on Twitter and they were able to fix it in no time because it's popularity where somebody just write a JavaScript code and it gets executed on chat GPD answer. So we have been talking about this but let's talk what reality is, what is XSX? So it's called cross-site scripting. It's basic funda is when your data becomes code. In this particular example, you can see that there's an image tag with a source which is invalid like X doesn't exist, right? And if it doesn't exist, then it will try to load an on error attribute. The on error attribute now has a prompt function and which will just prompt one and prompt one will make sure that it just a prompt alert like this. This particular alert is from a website called Uber. It's very similar to what we use at Grab. So that's one of the issue I reported to Uber when I changed my name to this little code and when an Uber admin tries to delete the user they get this small alert. So it's more than an alert or pop-up or a prompt. It just can attack users. It can steal or hijackers or web session. It can actually record your movements or record your interaction with the website or it can fetch all the datas. You try to enter on the website or the application. There are a few types of XSX category. One is reflected XSX which works like an attacker sends your malicious link. Like who doesn't like free stuff? Click on this link to get free pictures of cats, dogs or free promotions like that. And when the user clicks that link and it executes a certain code on the website and the browser sends the private data like we saw in the case of McDonald's. Like the McDonald's used to store the data on the website and those data will be sent to the attacker. And here's another type of XSX, Tom XSX where this particular code, can somebody point out what's wrong with this code and what is specifically which part of the code is actually causing the bad thing here? Yeah, that's right. So it's like a part of that. You put a query name and with the name you try to check out the document.url, you take the URL as is. And then when you've write it, the most bad code here is document to write without actually doing any validations and just getting the query parameter from the URL and just putting in the DOM which may lead to an XSX. So our entire aim here is to make sure that we don't lead these type of bugs into any of the applications we build or use. So if you are a coder, then you can try to analyze places where DOM elements are created and avoid functions like inner HTML or similar functions in all the front end frameworks. I'm gonna talk about that in later slides. And one of the ways is add a linter rule like ESLint to make sure these functions are not being used by you or any other developer using the project. And there's a famous saying like, sanitize your input and code your output which will solve the issue for you. But it's hard, not that simple. So are we gonna be taking that look step by step? There's something called flag called secured and HTTP only flag where you can make sure the session cookies you have, session cookies might have some sensitive information which is like very identical to the particular web session. So the secure flag will make sure these cookies are not being sent on HTTP instance and they're always being sent on HTTPS. And the HTTP only makes sure is that these cookies are never being read with the JavaScript code. So when somebody tries to write a malicious code and they try to read the session cookies because that's what can be used for session hijacking. So these two flags are must for any session cookies or private sensitive cookies you might have in your application. A little demo. I'll be using this, I've taken some instances from the demo to make it feasible with this. This is a secure website. Trust me, it's very secure where you can just try to search something. And you can see that when you type in, hello, FOSS Asia and it gets rendered here, FOSS Asia. And you can also check that there's a query param being entered here. Okay, so this is very straightforward, this looks secure but how about we try something other than that? What about HTML tags? Now we entered an underlying tag and you can see that it's being sent in the query param and it's also being rendered here with an underlying. That's not intentional, right? That's should not happen, right? It should have just shown you exactly what you typed in and it's not an HTML preview website. It's a search website like a Google search. What if we try what we have been talking about this specific code where you write an image tag with invalid image and on error attribute which leads to a prompt and the prompt now will have a document.domain which basically fetch the current domain value, the current URL value. And if you try to search it now, there you go. There's a little popup being here. Now if you check that there's nothing being displayed here and that's because the code has been executed and not being properly sanitized or rendered. What if we try something else? Like what if we try to read the local storage which might have some sort of secrets or the user credentials or some of the deals of the users? And there you go in this. It was able to read some of the secret we have stored in the local storage. So the applications what I have been using here to show the demo, it was using a React framework and in this React time with this particular code function called dangerously set in our HTML which is by the name says it's dangerously being used with the query we use here was the user input and it is as dangerous as it sounds. So a way to avoid this is not to use it, only use it when you require it. In this particular case, we were rendering a user input. We just had to render it as is and we did not actually need to use it. So we can fix it by just using interpolations. And so a rule of thumb with this type of thing is that never trust user input. Whatever a user is trying to input or enter in your application, do not trust it as is. And you can avoid things like dangerously set in an HTML for React, VSTML for Vue.js and try to sanitize you with input and escape the output so that it's not rendered as is. And build secure links, write ESLint to make sure these things, dangerous functions are not being improperly used in your code. The next topic we are going to cover is called content security policy and you might have seen this error in the console sometime when you visit like Facebook.com, Google.com or any other website, big websites who have implemented content security policy where it's an advanced mechanism to prevent cross-scripting attacks and other things like it can be used to securely submit forms. It can be used to migrate your website from using HTTP to HTTPS. And it also helps with mitigating attacks like clickjackings. This, the CSP can be deployed via multiple ways and the most efficient way is to add an header in the code where it has been setting a policy where you can set multiple directives like a default source, a script source, an object source. So for example, the script source says that only allows certain things from example.com and the self means the same website, same application domain and should not be cross-region. For to understand it more better, let's use it to a good diagram where we have set a content security policy with default sources, HTTP at www.example.com and that means that we will only allow certain resources to be loaded on the website with this particular URL. For example, if we have a request fetching file.js from example.com, it will be allowed. But and similarly, if we have something called file.css which is another file being fetched from the same domain which will be allowed. But if application, if the same application tries to use something from malicious.com that request will be blocked and you will see an error in the console. So yeah, please free field to explore CSP and have it implemented in your application. And other than that, we have HTTP security headers which can be useful for various other type of attacks. So you can try to be as specific as possible with them. Now, the most interesting part of the talk is how we have been securing its labs front-end in general and how, what we have done to achieve are and improve our security posture. So how it all started with a little issue few years back where we tried to document and say everything on the issue that, hey, there's a lot of scope to improve our security posture. And then we analyzed all the libraries and the current code format we have to increase that and make sure that our application is not vulnerable to these type of attacks. So we have seen that VHTML is bad. Now we need to learn an alternative to that so that we can use it and developers don't have to think about writing secure code. It should be secure by default. So we'll build something called V-safe HTML where no matter what you write and send it to V-safe HTML, it will try to be as secure as possible. And it will, for this example, V-STML if you try to enter hello with some script tags and world and the V-safe HTML will try to just sanitize it and it will just remove the bad code from it. And there's a little link over here and this open source so anybody can try to use it if they have it. The same VUJs application. And then similar to that, we also built a secure link confidence. So where it's a GL link confident we have, we try to make sure that the links are secure by default. So for example, if somebody tried to write an HREF with the JavaScript code in it, we try to sanitize and just remove any malicious link with that. And so in this example, if the GL link is having an HREF with JavaScript code, the output will always be an about blank or something like a null. And this is again, it's part of our component online. And then we also came across multiple problems with the third party libraries we use particularly. We use a charting library in GitLab called Mermaid and we encounter a lot of security issues in that third party library. And we ended up paying a lot of money to our HACA one bug bounty researchers. We, GitLab is really good bounty amount and people try to do full-time bug bounty thing for us as well. But it has caused a number of XSX, this particular library. And we tried a different approach to solve that and where we try to put the entire library output and the rendering part within an iframe. And there's something called attribute called send box where you can try to contain that particular send box and create a real send box environment. And with that, we were able to contain that number of XSXs or number of issues in a third party library without affecting GitLab.com or GitLab instances. So we tried to apply multiple defenses in our code base with time we have been, there was a time where the issue got increased with the number of HACAs trying to find vulnerabilities in our platform. And these multiple defenses applied to our code base and application, we were able to actually make the issue count drop significantly. And I think, so in hindsight, it has worked out well for us. So it's good to make sure that your components you build in your company or your software application, they are following a secure by default approach. All right. Thanks everybody. Good luck for one more talk for William. And yeah. Okay. I just want to share my personal experience of the open source. So I just want to ask some questions for you guys. Have you ever tried to join the open source community before? Oh, great. So this area, how about you? Okay. Don't worry. There is no, none of technical talk, but just some, my personal experience. And when I was your age, about 20 years ago, I pretty much go through the same process as you did. So please, if you have any questions, you can just raise your hands and yeah, we can talk. Okay. Let me introduce myself. I'm William Jiang. I'm from China. And now I'm working for Biden's. Do you guys use the app from Biden's? Yeah. TikTok. Yeah. There was a lot of apps from Biden's. And I'm also both director of the Apogee Software Foundation. Do you know Apogee Software Foundation? No. Don't worry. I will share my journey with Apogee Software Foundation. And I'm also an initiator of Apogee Local Community Beijing. And oh, by the way, I will give a talk with my friend, Daniel, a one, one point, one 30 p.m. in the main hall. If you like, you can join us. And it's just sure some cultural difference things. And there's some sorts how we built the local community. And I think it will benefit you a lot. And before I join Biden's, I work for Red Hat and Huawei for a long time. There's just a video I want to show you. Dear programmers, aren't you tired of working on others' comments? Have you ever encountered a thought that your job is undesirable, but you must do it? Have you ever felt not receiving adequate credit for the works you've done if you are suffering from real life struggles? Welcome to the open source community. The utopia for excellent programmers just like you. Programming should be creative and meaningful. And we all deserve to perform coding in a friendly, welcoming environment. Hopefully we will get a lot of love here, but don't worry. Here's my understanding of the open source community. It includes a bunch of people who share the common interest to build the software. And it allows us to work together to communicate, to bring in new people just like me. And ultimately, build the software together in an open, transparent and collaborative way. And the open source community, people are so engaged and willing to share and exciting to help each other. So don't be afraid. Just go there. And working in the open source community could benefit than what you expected. And I just want to share some of my personal experience with you guys. I guess you don't know this gentleman, but I met him 20 years ago. And he has a later treat chat with Dandy House. He is the founder of the Excel and co-founder of CXF. At that time, I'm working on this project. And we have a very interesting talk. And do you know his major? It's not computer science, not information technology. It's just mechanical. It's just chemistry. And so quite impressive. He's not a study computer, but he did a lot of work on the open source world. And how did he do it? How did he do it? He got a lot of help from the community. He told me he wrote the programs in a bar and gets a lot of feedback from the community. So he learned a lot from the community. So at that time, I didn't realize the open source community is a very good place for you to grow up. And based on my former company experiences, like I'm just doing the coding by assigned task. And nobody cared about my code. I just need to deliver the features. And sometimes when I was working on that part, it's like I'm working lonely. No one, I can talk and share. And I just need to finish my job just like this coding monkey. But it's not exciting. I cannot choose based on my interest. So what I need is meet the deadline and deliver the feature. And it's a kind of comparison to the open source world. In open source world, it's break the silo and you will get a lot of help from the colleagues or the people from the community. And when I come in the code, I always get feedback from somebody in some place. And they care about the code. They are always willing to give you a feedback. And that is quite important. It helps you to understand the code by talking to the people. And I really joined the code review process. And in that way, you will learn a lot and maybe practice your English in that way. And so I learned a lot of technical about how to write the unit test, how to do the integration test. In that time, you won't get a panic when you do the release. But compared to my previous firm experiences, like they're always sometimes in the middle of night, I need to be, I got a phone call. Your code is broken. You need to fix it. Oh, that's causing me a lot of panic. But in open source words, we do it gradually and with the continuous integrations. It's really made my life much easier. Okay. There's a very complicated diagram. It's just like a conversion company. And you can see the command is up down. And in this hierarchy system, if the people just near the coast pattern, they always can get some credit or something. But as a developer, usually this way, we cannot talk to the management. So it's not a good thing. Just I showed in the review. But on the other side, open source community, people are self-organized. They are self-motivated. They are working from different companies. So there is no hierarchy system. And there is no manager, but a technical leader. And once you can show your great idea, if you have any great ideas, if you want to talk to people, you always can be recognized no matter the background to your words. Sometimes people don't know who you are, what you look like. It's just an email address. So don't be shy. Don't be wary. And in this way, when you talk to the community, you always can get feedback. Even you will not have the impersonal conversation. You can get the free comments or the mentorship to help you to go through the process and to learn the projects. And in this way, I think I spend a lot of time to purchase my coding scale in open source community. And instead of tracing up the others to just want to get a better performance review or something. So in this way, you just need to focus on the code and bring the real value to the community. So it's quite easier. And I think it's quite pure. And according to how ASF works, if you look up the website from the opposite of the foundations, we call it meritocracy. And once you earn the merit, you will get the repository right access. We call it commit right. You can push the code to the repository. And that is quite important. If you become a committer of the app to software project, it's well made to you easier to find your job in the job market. Because it's already show your program scale, how you work with others in a global way. So I highly recommend to you guys to look up those projects and to find just like internship. Actually, you don't need to go through all the process. What you need to is just a say hi in the community and ask the questions and try out the programs. And you know, we call the meritocracy is government by the merit. If you gain enough credit by contributing to the project or the community, you will be recognized. And in this way, it will motivate you very good. And I think it is very important principle in the community side, especially for the volunteer based community. For me, my daily job is like I ask the questions in the mailing list and answer the question from ask the questions to answer the questions I can feel. Oh, I learned a lot because you interact with the people and you always learn something from the others. And I think that's the beauty of the open source because it's just open away. You don't need to pass the engine exam. What you need to is open your heart and to embrace the community. And I, I, from the last questions to answer the questions, I was empowered by participate those discussions. It's made related to technical what I should is it's just incubating mailing list. If you are very interesting about how Apache civil foundations incubate the project, you can just subscribe the mailing list. And you can, you can keep learning by reading the mail. And there is there is a lot of interesting discussions. And once you have some questions, you can just ask people are always ready to answer your question. Even you never meet them before. But if you ask a right and worry challenge questions, you will get some feedback from the community. I think that's quite unique. And for my, for my early experience as a developers, I always talk to the developers and get some feedback. And sometimes they even treat about that because I help them solve the some problems. And it's really great to my day. Mail me feel very, very proud. And, and it's like, I can do something, turn to the work. So it's really a great feeling. As you say, open source community is just like a cut up place. You practice your program scales, your communication skills. And in this way, we also polish the open source of software by adding the functionality by solving our daily programs. And in that community, people are always willing to share their thoughts and do our later innovations based on others work. And it's made, I think it's made my life easier because I'm really enjoying the collaborations environment. And for the young generation just like us, the technology is developed very quickly. So which directions you choose? It's really hard to a person. But I think in the open source community, and there's a lot of Thailand or world class developer. They can always share their insight and bring a lot of helps to you. For myself, I want to share the story of Jamstretch. If you look up every 10 years, he made a very great innovation. In the first place, he's a founder of the GuruVee. From the GuruVee, he also work on Scala. And I'm happy to get a chance to work with him as a camera project. And it's integration projects. And I learned a lot how to talk to the applications in the industry by maintenance this project. Because there's always new stuff come out and people can submit the patches. And if I look up their patches, I always learn something from their patches. And it's really a amazing experience. And I can see the sparkle from Jamstretch when he talked about the Jenkins X, the Kubernetes. Oh, it's about 10 years ago. We have the team meeting in Dublin. And that's the Kubernetes just came out. And he keep talking and show me the directions. And especially he did a lot of CI parts by founding the Jenkins X project. And now he's in another new journey. But with work with this Thailand engineer, you can always get something. And please don't hesitate. And if you have some dream and if you want to work with the WorldCast program, you can just join the open source community. And in the open source community, it's pretty easiest for you to pass the engine level. It's like you can read about the project's information from the website. And you can subscribe to the mailing list. And you can find out the discussions about the projects from the GitHub issues or PRs. And in this way, people can collaborate by sharing this kind of information and can work together by talking the common program. And people are worried, so collaborative. And they always want to share an experience by answering the questions. So don't be afraid to ask the questions. And you can get a lot of feedback from them very quickly. And by asking questions and sending a proposal to the mailing list, I really learned a lot. Okay, so how can we behave in the open source world? And I just want to share Craig Russell's golden role and treat others as you would be treated. Be humble, be honest. Be willing to accept the responsibility and create the without become undefensive. Recognize that others are different. And with the skills that are different from you. Yeah, let's embrace the diversity. And together we can build our great things. To join the community, I just want to summarize. You need to listen to see the rules and to follow the rules. And to understand the code of conduct and to behavior yourself. And to show your works with detailed information. When you ask the bug, when you submit to the bug, please submit the state trace. You have Israel help us a lot. And then you will get some respect from the community. That's the common process. And I highly recommend you to go with that. And how can you find those projects? This is the Biden's open source project. And if you're interested, you can follow our Twitter. And those are some friend projects. And this is AI and big data is a back end. And we also have some infrastructures and security project. And for the cloud we go is built on top of a go language or Rust. And this is in power the Biden's back end system. And if you're interested, you can just look it up. And we also have some internship. We're open for the people around the world. And it's called, you can look up on the website. And I think it will open to the next month. And please take a look. And if you're interested, and if you are a friend there, guys, you can take a look at our aspect. It's made by Rust. It's very fast and provides a webpack functionality. And you can use it and give us some feedback. And we are very happy you can join us. And for the AI parts, we also have some interesting models and get a lot of attention. And especially if you want to create pictures by writing some prompt, you can check out. There's a very SDXL lightning. It's well fast to the process. And it just gave you a picture in a second. Okay. This is our slogan of the Biden's open source. And it's about creativity and the embrace of open source. If you like, here's our Twitter of the Biden's. And please follow us. And this is my linking. If you have any questions about open source and any other things, you can just send me a message. And it's really nice to talk with you guys. And yeah, I think we are free to ask your questions. Oh, thank you. All right, William. Thank you so much. Before we open the round for questions, I got one question for you, right? Because I remember, you know, some years ago when I was finishing uni, I was listening to all these talks, right? And I was like, oh, that sounds amazing, right? You meet all these great developers like yourself. But then you're like, oh, I'm not a native English speaker. I don't know. My coding skills are good enough. What are your tips to get started, right? For all the students here. For me, it's like, I share the same experience. My spoken English is not good at that time. It's taking me half an hour to compose email. But don't worry. Practice makes you perfect. If you take the chance to talk to people, and because the open source commented, oh, it's so nice. They always willing to give you a hand. So don't worry. And I think as a East Asia people, we share the same culture. And we will talk about in today's presentation around 1.30 PM in the main hall. If you're interested, you can join us. And I will share more detail about that. And there are some interesting funds in the psychological part. And yeah, please join us. All right. Thank you. Any more questions? Thanks. Thanks for sharing. Just curious. Thanks for integrating these open source projects back to proprietary products from BIDANCE. Actually, as a BIDANCE, as an internet company, we built the software to meet our business needs. So with the help of the open source, it speeds up the process. But as a part of the BIDANCE open source program we are still checking the process to make sure we choose the right open source project. As you may know, there are some supply chains issues. If there's a security leak, we need to fix this as quickly as possible. And if there's some projects without maintenance, we need to try to avoid using it. But to sum up, an open source project is not a free mirror. You still need to put some labs, put some resources to maintenance. So in this way, it will empower your business. Okay. Thank you so much. You're welcome. Thank you. There's our sound check. Ready? Okay, there's like a 50-50. Oh, well, you got one then. Thank you. Oh. Yeah, that's good. All right. Thanks, everyone. So after this interesting, inspiring open source talk, proof that we don't only need developers, I would argue it's better to have much, much more representation of other fields, especially. We come to like a different topic. Yeah, Christian. Hi, everybody. I hope you hear me all right. Just to get to know you a little better, can I get a show of hands for those of you who actually are developers or are developing things for the open source? And how many of you do have something to do with open source and tech? Yay. How many of you want to be designers and are here to know more about design? Don't. I'm kidding. How many of you adjust here because you want to learn a little bit about open source and how it works? Nice. Fine. Let's do just that in the interest of time. I'm not going to take more than 15 minutes right here. So today we're going to talk about what design does for open source and how to incorporate design into your life, your product and your practices. My name is Christian. I'm a senior product designer at Grab. I used to be what they would call a WordPress developer about a decade ago until I finally switched to accessibility design, product design, user research and open source contributions. I'm one of those weird designers who actually do like hanging out in different spaces and getting to learn different things, beyond just our little discipline of UX and UI. One of those disciplines happened to be, well, open source. I think that open source is actually great. I use open source a lot. I'm trying to convert a lot of my friends and a lot of my colleagues to open source. I'm actually just genuinely happy every time I come across an open source tool that is well-designed, which is not always the case unfortunately. In many cases we would come across a situation when open source is something that engineers built solving a problem for themselves, by themselves, without actually getting anybody else involved. Look, I'm not really saying that anything that you see here is ugly. We're not really here playing around with those terms. What I'm saying is a lot of tools within the open source realm are designed and built for people and by people within the same little bubble. Within the same little community we just talked about what the value of the community is and how to join it. Now, this community is not always diverse. This community does not always have one of the functions, which is designers. Well, there's a reason for that. You see, the reason is that a lot of developers, I'm not saying all of them, but a lot of developers think designers are really good at putting together logos, throwing some fancy colors, maybe adding some animations. You see those slides have fancy animations here and there, and then maybe get out of the way. Because designers are those people who are playing around, they're dressing up nicely, they have tattoos, and they have those little slides over there, but the bulk of the work is actually done by people like that over there coding things, putting things together daily and nightly, and that is where the brains are at. Now, the thing is that today we're going to discuss one particular subject, and that subject is what do we need people like myself for? What kind of value do designers bring? And I'm here to make a case. I'm here to make a little case in the next 10 minutes or so that designers are actually doing a little more and arguably much more than just putting together fancy interfaces. If you ever want to be a designer, or if you ever want to hire a designer, or if you ever want to think about learning what designers do, there's not all the fancy things that they're going to show you and forget turtle necks, forget fancy tattoos, again, this is what we play with. Designers are people who do research. There are people who go out there and they talk to your users and they analyze your market and they get to know the people that you are actually working for. Imagine that you're putting together an ice cream shop and you never ate an ice cream yourself and you like vanilla flavored ice cream. Never even thought that the market would like strawberry or chocolate. Designers are there to tell you just that. Designers are there to help you put together a strategy. They're there to put all the issues together from your GitHub page. They're there to consolidate all of that and tell you these are the things that you need to focus on and these are the things that you can probably deprioritize. Designers are there to test your ideas or that your ideas are not so great because something that seems good in your head may not necessarily be what the market would want and the designers are there to test those ideas with your users before you write a single line of code. We are there to learn about your users way before you start building the thing. We go out there and facilitate interviews. We talk to the people on the ground. We facilitate surveys. We analyze them. We put them together and we give you the summary of the learning. Sometimes what you think is the right call may not be the right call in reality. The designers are there to give you the reality check. They are there to give you the checklist of who your users are, what they want, what they struggle with and how you can help them. So if you have a product, if you work with open source and your product does not have a user persona, if you have the idea of who your users are, what they do, what they struggle with and what their aspirations are, ask yourself maybe you need a designer to help you do that. Designers are there to help you gain this clear perspective. They are there to help you answer one simple question. What are you building? Who are you building this for? Are you doing this as a hobby project for yourself? Are you solving your own problem? Or do you actually want other people to use the thing? Do you want other people to use your product and your solution? You need someone to connect you with those people. You need someone to go out there and to align you with them. And most importantly to align you with your peers. Now if you're sitting together with your friend and if you're throwing together a little product that you want to work on, there's very good chance that at some point you may have different ideas of what success is. One of you will think that you need to build a car. Another one will think that you need to build a motorcycle. If you start pulling it in different direction you're going to end up with a tricycle that's not going to go anywhere because it's not going to have wheels. You're going to focus on the exterior somehow you're going to forget the most important part. Again, designers are not going to be there to just put together the interface. They're going to be there to give you this kind of a reality check through alignment. The workshops, it's a boring work. It takes a lot of time, a lot of pain and a lot of tears but in the end designers are going to help you grow your product. Now again, you may have the best tech ever. You may have the backbone of the best technologically advanced product that you can ever deliver on the market. No one's going to use it if you can't grow it sustainably. Things just going to overflow with features upon features no one's going to use it. If people don't know how to do things without this heavy manual and apply them with if people see this giant monster of a thing instead of a usable simple product that is just powerful enough for them to use you will struggle with the backlog of features that you're going to have to address with endless bugs and issues that you're going to struggle with using it and the end is just going to fall apart. Again, imagine a monster that you're putting together and the monsters go way too many heads. Designers are there to chop off and to leave you with what you need to help you move sustainably. Now, I just want to give you a quick case study. It was a little product called Forum Bricks. You might want to check it out. It's a really good tech. I'm really, really glad to have worked on it. We helped set up an entire GitHub page for it called Forum Bricks. It's an alternative to a lot of customer insights gathering tool. Now this page this particular page took us seven days to build from inception to release. And in the beginning, this page was nothing. It was just a blank page with one simple icon. What we did was we introduced a personalization journey. Once you're on board, you answer a couple of questions and this page is tailored for you. These are the recommended things that you can set up. Now, in the seven days we double the user activation rate. Again, not bad. 50% more people are now actually proceeding with creating one of the surveys rather than just seeing this blank page and dropping off. It's a simple thing. You may not even have to be an interface designer to come up with it. But you do need to talk to your users. You do need to analyze the data to come up with it. And then you do need to work with your engineers to actually release it. Another example is beautiful link tree alternative. It's called BioDrop. The leader of the community is an amazing human being. Go check out BioDrop. Fantastic tool. Loving it. Now this is as incomprehensive as it gets. You're going to break your brain trying to understand what this thing is trying to do for you. So many videos. So many things out there. So many things happening. Or an amazing tool that does one job. It brings all your links together. Now all we did was we just brought together the simple navigation, one little tagline, product demo, and we paved the roadmap for the future releases. This is how your product looks like today. These are the things that we're going to do really quickly. These are the things that the team has to work on in the next iterations. Over the course of a few months we're fixing it. We're getting it to the point where anyone, not even the developer, going to land there and understand what it is and create an account. So for those of you who are actually engineers who have your products on GitHub those of you who would at some point become ones just want you to think about this thing. Designers have no idea what open source is. If I was a designer for open source as a space I would probably remove the word source from it altogether but developers are probably going to kill me. Whenever designers here open source they ask me same questions do I need to code? When they see the GitHub icon they're like oh that's a cute cat, is this one of your cats over there? And whenever I tell them about branches, well, you guessed it. We need to explain to designers, speaking of joining communities what they can do. So every time there is a community every time there is a tool every time you want to attract designers do a little bit of work. Write your documentation. Tell them how they can contribute. For you if you're a designer you're going to have to see this. This is your user story. These are the things that people worked on before you these are the things that we may need your help with. And most importantly this is my call for the entirety of the open source space. Open source your design process. Your decision making process and your thinking behind your features as important as the product that you build. If you build it because you had a vision at 2 in the morning that you want to build a feature and the buttons have to be green. This is not a good design decision but I want to know this because I will be able to improve that. If you had a reason to do something please tell me what the reason was. And we're going to be best friends. Now there's a lot of really well designed open source tools. There's plenty of them and they keep growing and they keep coming out. A lot of them are really well put together. A lot of them have designers helping them. A lot of them have really strong design communities. If you ever want to contribute WordPress as a fantastic design slack there's a design system that you can contribute to and there's a lot of documentation. There's fewer things that you can do with say Firefox but you can design your theme. There's going to be lovely. Especially with third manifest. Blender is probably a design tool in the open source world that a lot of designers know love very few contribute to because reasons. I believe that together we can do things differently. All we need to do is we actually need to come together to do that. We need to stop being afraid of one another. We need to embrace the fact that we help each other and well maybe we can learn a little. So I have two resources for you that you could subscribe to today. The first one is my accessibility newsletter. It's free. I'm not charging people anything. I'm writing about building and designing accessible products. The second one is a design podcast. You get to hear my voice a little more. It's called paper and pain. We're talking about design. We're talking about engineering and a lot of other things with designers and engineers in Southeast Asia the second season hopefully coming out at some point but you can listen to about 10 to 13 episodes and dial in for one of our lives and if for some reason you do want to follow me somewhere else there's my LinkedIn over there and my website where you can find me. I don't buy it. I do add people. If you're more of an old school guy I do have a couple of business cards over here. Let me know if you want one. It's kind of fancy. I like the colors. And if you have any questions, questions are welcome. Thank you. So any questions? So I'm not I don't actually ask fully about technologies but it's related to a little about design. I used to want to become a graphic designer and now I want to study a little bit about using and using design but I'm really curious about how the difficulty you know what difficulty if people like to rely on their AI or open store to create their products or something AI is not going to steal your job. AI is not going to steal my job either. Look the moment when AI understands what makes me happy the moment when AI understands what makes me sad and what happy and sad means is the moment when I'm going to move into the cabin in the woods and spend the rest of my life hunting koalas somewhere in Tasmania the issue is AI doesn't and we as designers we're not trying to understand how to color your buttons or how to put together the interfaces we're trying to understand what makes you tick we're trying to understand what users want are there any triggers that are going to make you happy is there anything that's going to provoke you to make a decision how are we going to navigate you through your journey and when I say all of this yes it's an idealistic perception of what makes design design but ultimately this is what you're going to be playing around with not with variables in Figma not with what AI is going to do for you which is just slap some things together and call it a day but rather making decisions based on what makes you as a user special and what your interaction is now you will need to understand people because it's all going to be about people and ultimately yes it's going to be tough it's going to be as tough as being an engineer being pretty much anything if you want to be good at this and I have to try real hard but if you like solving problems and if you like solving problems related to humans welcome to the field let me know if you have any questions just drop me a text on LinkedIn happy to help any more questions yes hi it's a little bit more advanced in the process after you have all these set up and you actually got a designer do you have experience on handling like external contribution from a designer in your process I love pen pod by the way thank you can I can I give you my business card right here thank you so much yes can I also give you my business I'm basically here for you all of you of course but yes please can I can I have if anyone else got fancy stickers like I obviously have some space on my laptop to add okay we do have there's a problem that comes in whenever you bring more people right you're really good when you're alone you're really good fine when you're with friends whenever there's a crowd there's a crowd right it's kind of hard to navigate it's it becomes this sort of like a team management with form breaks we did two things first of all we did it in pen pod which I'm really proud of we set up the whole repo so we have an entire repo where we outline what design process is what kind of things we want in each issue and like how do you write user stories essentially and when people started writing there I was kind of so like helping just make sure that there's reality check and that they are doing the right thing somebody's writing that they're going to pick up an issue or they've identified it there's a couple that are still active and there's a few in archive whenever they would submit a sort of like a high level version of what they think the solution is I would usually just copy paste the same question what is the problem that you're solving this whole thing starts going back and forth you could do it in the file we didn't get help because I wanted the transparency of it it gets a little tricky because again designers who would contribute to it a lot of them would have very little experience you might want to have someone who's a little more senior at least understands the process and they need a lot of hand holding so the more detail the documentation would be and we tried the better we had a couple of features that again with a little bit of oversight and with a little bit of going back and forth managed to deliver I wouldn't expect many high quality inputs but again better done than perfect right it will come gradually I'm a firm believer in unicorns rainbows and the fact that designers will one day join open source you know one thing will happen one or the other oh yeah anyone else alright thank you so much collect my business card if you really want to chat with me later find me around alright thank you so much you're going to take a quick break there's a tea and coffee break coming up and then see you back I'm going to copy some of the links I said are you busy? we're actually both busy thank you oh here's my boss so I hope you had a nice break and you are energized this talk I'll try to keep it as engaging as possible and since most of you are young professionals like Max mentioned that having a portfolio for yourself is really important so today we'll be talking about how you can build one for yourself and I'll be showing a small demo it's open source I won't be writing a lot of code due to the time crunch but then I'll be having a list of resources that you can go ahead and there's a well documented read me that you can follow the steps from as well so moving forward with the talk it's about revolutionizing web development with headless CMS so can I see a quick show of hands of how many of you are web developers web developers great how many of you know what is headless CMS cool I see a few hands and those of you don't this talk will actually tell you what it is but before that a bit of introduction about myself hi everybody I am Hemantika Mitra and I am working as a developer advocate at Hashtag sorry for my host voice I just lost it but then let's get started with it and little bit more about me since I see most of you have your laptops here I'm guessing you also have npm installed on your local machine so go to your terminal type npx space hello hyphen hemantika so this is a cool terminal you know introduction package that I made for myself just to show it off on conferences like this that is where you can also find more details about me my portfolio what I do what I've done in the past and all of those so that's it about me now let's move forward to the interesting part which is about tech great so okay one last thing so I also have some swags with me which is notebooks like this and then there are some stickers stickers is basically for everybody and then there are t-shirts like this as well I only have three t-shirts of three sizes small medium and large so you need to adjust with the size but then the competition is that whatever you're learning in this particular session I would like to see some tweets where you can tag Fawce Asia and Hashtag because that's how I'll figure out who are making the tweets and towards the end of my session I'll take five minutes to go through the tweets and just randomly select six tweets and just give away swag so that's about the competition and not the competition but just a friendly way to create more buzz about the session and moving forward so I asked how many of you know about headless CMS I just saw a few hands but for others basically what headless means is like that the backend is something that is handled by the product or the solution and the front end part is something that you need to do and to go by definition like it says so headless CMS is a backend only content management system and that's built up ground up as a content repository and the best part is that it is accessible via APIs some there are many solutions that are available in the market also have SDKs in different languages that you can hack with and also why people use headless CMS is because it allows you to manage content in one place and be able to deploy that content in any digital space that you want so to go by definition that's what headless CMS means but what it actually does is it separates the content layer from the presentation layer and what you can actually do like I mentioned a brief it like you have API set you can call to and you can integrate it with your own front end and then have a solution for it moving forward why headless CMS and currently in the market there are a lot of options available and the most popular one is WordPress then you also have solutions like story blog then there is content fold then there is strappy and there are a lot of solutions that is available in the market because and the major reason for that is it also saves development time and there is such huge no matter how many developers there are in the world there is a very huge need of solutions to be built and solutions like this which is some amount or lesser amount of code than traditional coding it only makes your process faster so why headless CMS is because at this point like we mentioned that data is the key similarly content is this key especially for tech or not just tech also for e-commerce because for any and every industry you will see there is some amount of content be it through blogs or videos but content is something that we are also consuming every day this is content whatever you are seeing on your phone is also content so what it really helps is headless CMS solutions it helps you in flexibility in content delivery like I mentioned that you can have it in one place and you can deploy it in any digital channel that you want next it also helps in improving performance and speed and one of the biggest reason for that is because you have APIs to call to so that definitely speeds up the performance and your time taken and then finally you have future proofing and speed and the reason to mention this is because a lot of headless CMS solutions they use recent technologies that are much faster and much scalable so whenever you are implementing this solution into your products or into the solution that you are building it makes it faster and since it is using a recent technology it also doesn't have a lot of legacy code that you need to update so these are the three top benefits that I feel that you have while using headless CMS now moving forward to that when do you need to use a headless CMS solution it's very much tailored for enterprises but for students why I use it I'll give you a demo that I used headless CMS solution to build a blog for myself like I have my portfolio and then there is another page that says blog which is listing all my blogs I'll be showing you how that looks but other than that like I mentioned already in my previous slides that it helps you with multi-platform content delivery it also reduces the complexity of the content structure so if you're using a headless CMS solution that's how you reduce the complexity then we have front-end technology flexibility so if your team is let's say if your team can code in React or some other JavaScript platforms sorry JavaScript not platforms but frameworks then you can go ahead and do that you have the flexibility to use any front-end frameworks and finally then if you want some scalability and improved performance then again you can use headless CMS and last you can also integrate with a lot of third-party services there is no cap on how you do it since it's all APIs all that you need to do is just make a call and it's as easy as that now which headless solution to choose there is no one-size-fits-all solution to it you need to like I mentioned that there are a lot of options available in the market you need to choose what actually fits the goal for you you need to do your own research and see what works for you but in this particular talk I will be talking about headless CMS and if these are some of your needs like if you want something to be very customizable if you want something which is open source if you want something that's that takes only a few minutes to set up which I'll show you in my demo then headless hash node is a great option for you and some of the key features that headless hash node has especially as students or as writers or somebody who is creating content we do have AI assisted writing so just come up with an idea and if you want to improve your grammar if you want to shorten it and do all the fancy things that AI can help you that's already inbuilt next we also have inline commenting so for people who have used Google talks you'll see that there is an option for us to go and add comments and reviews so you can also do that in hash node and then finally we have collaborative editing so if a blog is being written by me and my friends or my colleagues or two or three more people you can also do that so these are some things that I find very useful and especially as early tech you know professionals or somebody who is a student this features can definitely help you a lot now moving forward to the demo time so this is where I'll try to keep my mic down and speak as loud as I can let's hope you can hear me but or I'll try to just go with one hand so like I mentioned that I'll show you how I built my blog so this is basically it I have a few blogs these are all being fetched from hash node I'm sorry for the front end part I just coded it in a on a day but basically this is how you can also implement and I'll show you how you can do that so hash has this repository which is open source and it's a starter kit all that you need to do is fork it and create a clone for yourself I have already done that on my local machine so I'll be skipping this step and then I'll move forward to my VS code I hope you can see it great I am already in this is and and do a lot of CD dot dot great so once you fork it this is how your VS code or any idea of your choice is supposed to look like and then there are three packages that hash node provides right now and the one that you saw in my demo is a personal theme and then there is enterprise theme as well and then there is hash node theme as well so if you go to hash node dot com you'll see that there's a political theme that hash node follows while showing articles that's how it looks in general and you can choose from the theme the entire code structure is a monorepo structure so whichever theme you're choosing you need to go into that folder to install the dependencies and get it started so I'll just do that quickly so if you see that we are in our starter kit folder which is the main you know the fork that we just made and then I need to go into my packages so I'll just do that because inside packages are my themes my block starter kits and the different themes that I mentioned so inside packages if you can see that there is a block starter kit or you can just do an LS and see what are the files that we have so we have CD we need to do CD to block starter kit and then I'll do an LS again I'll see there's themes so I'll just get inside the document sorry the folder themes and then if you do an LS again you'll see that there are three themes that are available and for this particular demo I'll show you how you can build and customize a block using your enterprise themes so I'll just do the last CD into enterprise and that's it so now we are into our main theme that we will be replicating today which is enterprise and now we need to do and PNPM install to install all the packages that this theme needs so that will take a little while and it's done which is great and then what I need to do is within enterprise if you scroll down a bit you'll see that there is a .env file so basically the .env file it needs three things one is the hash node GraphQL API endpoint the second one is if you I'll give you another example so just give me a second I need to log into my another account so I'm logging into my hash node account and if you see that right here it's the internet is a bit slow but once you have an account and a few blogs on hash node you and if you log in this is what you will see and this is where my profile is so the main thing that I need in my .env file is this name which is hemantika m dot hash node .dev so I'll go back to my VS code and I'm trying to find my .env file yes so my .env file is already here and I have so these two things like the first one which is the hash node GraphQL endpoint will stay as it is we also have an .env .example file that you can copy and paste it into your actual .env file and then the next thing that you need is your publication name which in my case is hemantika m dot hash node .dev for you it will be different so you populate that and then this mode can be development or production depending on how confident you are to have it in production but for this particular demo will have it on development and that's all the changes that you need to make and now I'll do a pnpm run dev hoping the demo gods don't show up and it runs and I can show you a local deployment of how it should look like well it's running and my fingers are crossed hoping that it works okay we have a local host deployment just let me click on it great so just to recap so this is my hash node profile and if I am going here if I'm going to my blog home you'll see that I have two blogs and now I wanted to create a blog for my own self so all that it did was I cloned the hash node open source repository I added my .env you know the environment variables and then this is what hash node is I just needed to install a few dependencies and just run it and this is what hash node gave you know but prepared for me so the next step is I'll show you how you can easily customize it the entire code base is written mostly on tailwind and next chase so to change some cms sorry css what we can do is we can probably go to our let me see what I am trying to find okay just a second okay so let's try something maybe what we can do is we can go to our components and if you see that we do sorry if you see that we have a lot of components which is a footer component the header component maybe we can go to our cover picture component this is how the cover picture looks right now and let's say that I want it to look a little more rounded so let's see so if you see that we have this file which is inside the container folder structure which says it's a cover image file and let's say that I want to make it a little more rounded so I'll change the css a bit and probably make it to rounded excel and when I refresh it you'll see that it's a bit more rounded than now or let's say if I want to maybe change something else that also you can do it from here right here and then what I would also want to change is some color I am trying to change okay so if you see this is our tailwind file and then there are some primary colors that are changed so when I go back to my deployment you see here that the primary color is blue which means my buttons are blue my newsletter section is blue and all of if I was hovering on my links these are blue as well and I would like to change it to red or any of maybe to green as well so all that I need to do is I need to see where the code is written and then I let's say I want to change it to red so I do that and as you can see that the color primary color has changed to red and even the you know while I am hovering on my link it's it's red and everything here else has changed to red so these are two simple ways how you can easily go ahead and customize these are very simple ways but what I have also done is I have added a dark mode to light mode changes so you can also do that you can add SVJs for it and you know a component for it and you can customize it as much in any way that you want so for this particular demo I'll be keeping it short but that's pretty much it now I'm almost coming to the end of my session so that's how you can easily build sorry it's taking some time to present again but then that's pretty much it about how you can build a headless CMA solution for yourself and here is the QR code that has all the resources that I just mentioned including the open source repository the blogs and anything else that can help you get started and below is my twitter handle and I am you can find every other detail from you know my social handles there as well and I am also very active on social media so at any point of time if you need any help or if you need have any doubts I am more than happy to answer your question and also in the QR code there is our hashtar discord channel so at any point of time if you need support you just need to drop a text and somebody from the team will respond to you almost instantly so that's it and while I will be ending this session I would like to remind you about the competition that's going on which is you need to tweet your learnings and tag for satia and hash note and maybe a few minutes later I will see how many of you have done that and give you some swag that I have so yeah that's all for this session and I hope you learn something out of it and I will be very eager to see if you are building your own portfolios using hash note if you are doing so you can just tweet out to me or send me a DM and yeah I will be there maybe reposting it or cheering you from afar when I am going back to my country so yeah that's all from my end and thank you for being such patient listeners thank you Madhika thank you so much guys if any questions one and pick I already have few blog post written on medium some on dev2 and some on other platforms are there any migration tools available if I want to move all of them to hash note is it only RSS or something else as well yes any more questions great thank you so much welcome back everybody we continue with the web development track with Anton and a bit more I assume on the back end side as well as the front end side all right Anton thank you will be mostly about architecture yeah my name is Anton Shapilov I am twig workplace and today I will talk how what challenges that we've met developing distributed drive application so it was I want to tell you about what is twig workplace in general because twig drive it's one of the products that included in the twig workplace and twig workplace it's a collaboration platform ecosystem that consists of the several tools that will help you to work with other people towards your goal and purpose so we have mail application I won't describe what is mail and go further we have chat application we have video conference application calendar and of course you drive about what I will talk today and all the products are integrated and communicated with each other communicates with each other so to begin with I want to tell you about our starting point it's important for this pitch it's a previous version of the twig old twig so it was more or less product about the same goals to help people to collaborate but it was more like open source Microsoft teams if you will look at the screenshot you will need to spend time to find 10 differences it has messaging documents the same calendar and tasks that will help you to communicate but we've decided to rewrite it we've decided to rewrite it almost from scratch and we've decided to rewrite it because we want to be open open not only in terms of the open source but also open in terms of the architecture to use open standards and that will allow us for this almost 5 reasons it will allow us to be more secure because it's open standards everyone can see your code what you're developing what about your protocols and it will be easy to support also you have more credibility if everybody will see your code what you're running you have more trust from the people that are using your product also in terms of the security and also it will allow us to collaborate and to work together to work together on the protocols to work together on the applications so we've decided to rewrite from scratch but for twig drive we forked the old twig application and we've we've developed it further we've modified it so we forked it and we had MVP in three months it was working MVP with these functions you can store files upload it in multiple different ways you can create documents through the only office integration you can search the documents search just regular search search by content inside the document you can share documents by the link or share documents inside your team and also you can collaborate and work together on the documents also through the only office integration about the architecture of the application so it was Node.js and track.js application for the frontend for the metadata database it's we made application distributed to make it able to scale so for the database it's a Cassandra or MongoDB for the distributed search it's elastic search for MongoDB and for to storing the project it's like a three compatible object storage of course everything could be run in Kubernetes and orchestrated and monitored with Grafana and Prometheus so and we've modified our architecture we modified it we added support of the multiple more databases I will speak about it a little bit more later we've added support of the PostgreSQL added support of the open search mostly because elastic search doesn't have the license of the open search is not totally open and also we make the middle layer of the application more modular and more scalable because also I will speak about it later and we added integrations with only office with OIDC stuff with the open service and we made the application more secure about the architecture of the application is it microservices no it's not microservices we've it's a little bit Hollywood topic and before I think several years ago in every software conference you will see multiple speeches about the microservices and microservices architecture it's you can consider our architecture is model it's about modular why we didn't go to microservices it's because of mainly this really reason it's time consuming to support the same tooling code standards for every microservice it's more expensive to integrate each microservices in your build CI life cycle and release life cycle also of your application and it's more easy to support in profile especially for the small team if you have monolith application just check out application put a break point and you know where is your bug but with microservices you are not able to do this but we've some very resource consuming operation to the separate services to make it more easy to scale the most time consuming operations for that application it's generation of the preview files and parsing the file content to make it searchable so everything to this so we've split our application into services each service you can consider as a separate application that has its own connection to the database its own HTTP layer and all of the applications are independent they've started in the platform through the dependency injection and communicate with each other with the message bus and for a package that we can maybe later transform into something money microservices so this is a piece of code it looks how the platform is started you just list services that you want to be started inside the application and you can have it like this you can have it can list in the configuration you can can put a path where these services are located and also you can switch model regarding your security policies because we want to make our application more secure we make IC spammers and that's joke and that's true because if you are releasing your service in SAS it's almost 100% that your first users will be spammers and any other guys who will try to use your service not in a good way when we were releasing the previous version as I said it was open source Microsoft team and it was rather closed applications without any external communication but even there we have spammers who will try to spam through our platform with the invitation process and you will need very strict rate limits very strict security policies and even with this strict security policies and rate limits you will find people who will try to find way how to spam through your product so we will try about the security three states of the data that we have right now address and trend is end in use when we store data at rest so everything encrypted in the metadata database everything encrypted with the company key every file that we store in the storage encrypted with its own key and every key also encrypted when the data is trended it's encrypted by SSL and when data is used it's not encrypted because you are using it in the browser the main reason we do not support right now P2P encryption because we have only web browser application and it's very complicated to implement P2P encryption in the browser it's easy to implement but it will be not easy to use for the end user so we will come back to P2P encryption when we will have mobile application when we will have mobile application we will add P2P encryption for the mobile application also about security we nothing is logged when you upload your file in the browser it's directly through the streams go to the object storage so we split file in the chunks each chunk is encrypted separately and for each chunk there is a direct stream from your browser from your hard drive to the object storage just with security and we split it in the chunks and there is just several pipes in the several services that will allow to transfer data in small pieces and do not have the whole file anywhere metadata encryption and how we implemented we implemented with symmetrical encryption with AS256 algorithm and we made it with custom because it was very easy to implement you have custom decorators where you should put just okay and code this file into the JSON encrypted JSON and you have these three lines of code that will just encrypt and decrypt everything it was very easy to implement and to do it with this custom ORM but it has several drawbacks I will speak about it later because also okay we have custom ORM then we will generate all the database query with this ORM why not so also we made the application more extensible and to be able to communicate with the other application right now we do not implement any open standard in the twig drive we will implement webdapp it is planned by the end of this summer but now what we have we have htpapi we have integration with the odc providers we have you can integrate your application through the event message bus and consume events from the t drive and we have also applications obstructions inside the application it's kind of plugin you describe your plugin you describe what should behave, what api it should calls, how it should looks like inside the application in this example you see just on leftist integration it integrates in the context menu and when you click on this button for example create word document it will appear a window when you can create document so next point before twig drive application it means that we need to deal with legacy one is this we are at first we support MongoDB and Cassandra and it's absolutely two different databases with different model structure with different SEMA with different query capabilities with different way how you write the queries why we support multiple databases it's because we want our drive application run on several environments different environments you can use Cassandra for very big installation of the twig drive you are distributed with multiple servers but if you run it's I don't know on your local NAS or for the small company for ten people there is no need it will be very costly for you to support the Cassandra cluster so and this is example in twig drive we have versions for every file when you can upload or download exact version of the file and for every file you need to have a list of version and for every user you want to have a list of version that was created by these users and in the very first example in Cassandra we need two databases two tables to make it work you have file version with the partition key file ID and version ID and created that as a cluster in key or you can convert it in time you need no matter and you have user version with the partition key user ID and the cluster key version ID and created that so so this is two tables I don't know how deep should go into the Cassandra query model and the modeling data for the Cassandra but to avoid cluster scan full cluster scan you have to have this partition key there is no way until you will have I don't know dozen millions of records everything works fine in every database no matter data model you have but after you will need to do this optimizations 100% and in MongoDB it's just one collection with file ID created that fields you can add indexes on these fields and everything will work more or less good so how we solve this problem we've added support of the third database we've added support of the PostgreSQL it's like something in the middle it will allow us to have medium installation because one single instance of the PostgreSQL supports from 10,000 to 70,000 random written writes per second it will support one terabyte table without any very complicated partitioning and it's very easy to develop and very easy to optimize so we've added the support of PostgreSQL and also we've moved the support of multiple databases to the service layer that I've described previously from OEM to the service level so you can have for example in the same twig drive running instance one service that is working with Cassandra and another one that is working with PostgreSQL and Mongo other fun that we tell when we were developing that twig drive application dealing with legacy a lack of documentation so these to-do files when this documentation is not to date it's 100% if you are working some legacy product you will find these to-dos outdated dependencies it's very important for the security reasons to fix such kind of warnings and if it's legacy product it won't be easy to fix because some products especially in the Node.js especially in the JavaScript ecosystem they don't have backward compatibility you will need to rewrite from scratch and the technical that this to-do on the top that is temporary and should be deleted this to-do was 5 years old and you will find a lot of such kind of to-dos it's also another topic how to deal with the technical that in the product but it's also for another speech what's next this is our roadmap right now we have only on premise installations of the twig drive with some of the client I think the biggest installation is 10,000 or 15,000 users and 50 terabytes of data we are planning to release our public service in June also this year we are going to develop desktop application and mobile application and to add more plugin application management to make it more easy to integrate another application inside the twig drive also we want to increase our integration between our product with the twig chat application with the twig mail application because I don't know it's very not convenient to send big files through the email it's very time-consuming and resource-consuming operation and in most of the services you can't send big files through the email but you can send it file transparently for example by if you are sending file like a link to twig drive for user it will be transparent he's just uploading file to his mail but it will be not file it will be linked to twig drive also integrating with the distributed file system web 3.0 based on blockchain or not you also can integrate twig drive with some of the such kind of system right now because if they support F3 compatible protocol it's fine you can use it but some of them not and with some of them we want to be integrated and also integrated with the AI services these two openLM and lint2 we are developing in lina gora openLM is just a large language model and lint2 it's it's a tool for transcription it's a tool for transcribed speech to into the text that's what we are doing and the last about a detachment a little detachment we want you guys we need you we also need you in different in different terms we at first we are higher we are higher here in Hanoi we have office in Hanoi we have offices in Tunisia we have office in France we have a partnership program so if you are students or you are already developers you can join us you can write to me direct message you can write to me in telegram and by email and you are welcome and also you can join us on github you can look at the products of what we are doing of course we are looking for the contribution and also we are looking for some integration of your own products and do you think that it can be a part of that wake work place or we can have some interactions between our product also feel free to write me personally on to write on that wake drive channel in the telegram also you can write me on github anyway you are welcome thank you guys that's all for me and your questions sorry I forgot your questions no questions I got one if you don't mind for me interesting would be to know how do you guys handle testing right because as you said you have like a very small home nest installation all the way to like enterprise business with like 50 terabytes of data how do you make sure that all the software works like all the layers work for every single scenario that sounds like a lot to test good question because not all of the scenarios are tested so we have of course we have testing it's like a basic basic level everything is tested within test we have also integration test that we run on github for every platform for every combination of the databases for every combination of the search we are running all the tests and also we have low testing but low test we are running not for every combination low testing we are running only for the for the databases that we are considered for the high load so we load right now we running low testing for the Cassandra and for the elastic search that's it right thank you so much any more questions thank you thank you Anton so let us start who has who knows what archive is one two three okay so so it is this website it's yeah probably the website is not so immediately clear what it is to give you an idea it is a preprint server the oldest preprint server we have it was started in 1991 collecting scientific articles publications articles mostly on mathematics computer science physics and a few other computational biology so we have a lot of categories so if you think like more than nearly 33 years ago so since then we have a lot of articles that have been published and on our website we are currently at about 2.4 million articles all in well at the moment computer science is of course the biggest part physics is also very strong and so it's actually accelerating I mean everyone is published in so a lot of articles are uploaded nowadays so a few examples of what has been published on archive I guess all of you have heard LLM large language models they were first published on archive so the original article is on archive the lego the gravity wave which got the Nobel prize in physics some years ago was published first on archive and I'm a mathematician so a very famous the Perelman gave a proof one of the millennium conjectures the Lagrange conjecture he publishes also only uploaded his work on on archive and requested other scientists to look into this so it is really the source of lot of knowledge we have accumulated over the last years it is true that a lot of articles we have at archive first uploaded to archive and then published in more classical show on standard show on those like whatever computer science and mathematics but we have also I mentioned before the Perelman we have also a lot of articles that are only published on archive so this is an approach to open science so we want the people can just upload and then other people can look in this and create an open discussion about this research results but this is something we are having for and yeah so archive is quite good so open open at archive it's actually not only what I will discuss today we have several things so first of all it's open science if you are somehow in science in academics you've probably heard the discussion about open science you want many are scientific articles then open source so we have we use a lot of open source and we provide open source solutions and it's open access under tick marks because open access is often related to open science in this respect I consider accessibility we want to make our not our research we want to make our service the website the research accessible to everyone that includes people that are visually impaired have hypersensitivity so there are a lot of things that we need to take into account this is mostly the topic of today but I will go through the other two very short so open science so there is no paywall if you ever have tried to download the paper from the J store and you are not an institutional member you are asked for like $70 for a single PDF file of an article you might need for your search so this is not in our case it's completely open open access to all articles and above that also the sources of all articles so it's not only the finished PDF but actually the tech sources are available for practice not all for about 90% of our articles sinking back from 30 from the 2.4 million this is quite a lot so that was a decision by the founders of Archer and his co-workers it was a conscious decision back then to request submitters to submit also the tech code and that is very helpful we will see later because we can now do things with the tech code like converted to HTML which with pure PDF would not be possible so open source so we use a lot of open source also a generational divide so we use tech it's a type setting system very popular very common in mathematics, physics a bit less in computer science but still so this is just you have a text file and it's converted to a PDF more or less and we use another open source open source program light tech ml which is developed by Nista we will go into this a bit later we also produce open source not that much I have to say but still we have a version of auto tech that was our automatic or is still our automatic system to convert now you don't want to dive in the code it's on cpun it is 40 or 30 years old pearl code it's not fun to read it does what it does but we are rewriting everything in Python now and also dockerizing so we are working on to provide open source tech to PDF container that can use as a providing an API that is what we will use already partially using on the archive websites already so that is in process and we will do this in future so open access now open access you probably have heard about accessibility right you a lot of activity we will have here after lunch break we have a talk about accessibility and finding errors in accessibility now accessibility what does it mean not all people are equal and not all people have the same ability so for very simple blind people cannot easily read the website right they need special tools now there has been a lot of work in this direction w3c standards guidelines how to make websites or html source code accessible the reason is because they are screen readers there are a lot of tools for people that can help access content without actually seeing it the problem with the archive websites our website by itself is accessible so that was the easy part actually but is this real accessibility our biggest problem is what we really provide a pdf files of research now the big problem is that pdf format is not really accessible so I don't go into details there is a lot of new standards so pdf2o and general accessibility but we are far from a state where pdf can be used for handicap people so just to give you a simple example so this is a typical okay that doesn't work the pointer so this is a typical research article I just picked one from the last few days in mathematics something I understand it's about pnp so it's a typical page you see so I mean if you have ever read a research article you probably have seen something like this so it's a digitization of a page but actually it was meant to be printed and then well read like a book but in reality we all are aware that the mismatch between you see already here the mismatch between the page geometry and how our screens are orientated this is a huge problem you normally don't turn your laptop right to read your screen so what happens you have to scroll if you zoom in you have to scroll horizontally so this is really a problem there is a few work going on so if you heard pdf has developed something called liquid mode to allow for a reflow of pdfs the problem is restricted to mobiles and it's commercial so nobody can use this so it's not really a solution we can use so improvements in reflow this is not always like this it's more like html if you make your browser more narrow or wider then the text changes this is called reflowing that doesn't work with pdf you have to scroll around so that would help a lot other pdf limitations now I don't expect you to understand what is written there so this is the actual content of a pdf file it's actually people that I published myself you see the structure is completely lost so what is here what is here written this part is the title and the authors so separating intermediate logics of whatever something I wrote and there is no structure in here the structure in pdf is completely lost so it's just put the letter here put the letter here put the letter here that doesn't help people who want to have something that is accessible because you want to know section paragraph I want to go to the next paragraph I want to look into formulas so section heading captions these are all just typographic markup nothing else so again adobe is of course a way of this they have developed something this is called tagged pdf that tries to eliminate these problems by adding information into the pdf we have a problem most documents are not tagged and we don't have viewers that support them and also from the latex side there is only very preliminary support to generate tagged pdf so that's not really an approach we can offer for accessibility and so we have a lot of researchers that are handicapped in sense they cannot see or have high sensitivity they need different changes they tell you one thing please use html there is a very simple thing why because html is by define by design responsible if you have responsive design it reflows automatically nowadays most browsers have something like dark mode people who are very sensitive to white colors would like to have a dark mode because otherwise they cannot read it not really read this built-in translations now most browsers provide built-in translations for html this is also a kind of accessibility if you are not fluent in English you might enjoy getting at least a bit of support of automatic translation there are additional a lot of add-ons for dyslexia dyslexia is when the order of characters of letters are changed so you read them incorrectly and visually impaired everything another thing that html if you are not a complete maniac then html preserves the structure because you can write html like pdf before always make a big but normally do it with markup you say this is the header this is a paragraph this is a table so every normal html document has proper markup which is then accessible there is a rich marketplace of assistive technologies there are a lot of plugins for html people they can use they are used to them they are just doing them they are very efficient in reading stuff not to speak of search engines work much better with html than pdf extraction of text from pdf again if you look back at this so extraction of text from here is a bit more complicated because sometimes well words are split up you need to half reinterpret this and text harvesting is all much easier just to give you an idea practical the archive corpus is a part of practically every LLM that is trained because it's open everyone has access but there is one problem we mentioned before all the scientific articles are in pdf converting pdf to html is really hard so as I said before the structure is lost there was a project by allen institute of ai they tried to generate from pdf the html and so by ai model detecting re-creating that didn't work out quite well so what we then decided is to because we have 90% of the articles have the tech source to start at the tech source so now I don't get crazy I will not give you an introduction to tech just to give you an idea tech or laytech is a text file you create a text file here on the left side and it is compiled to a pdf the pdf doesn't have a structure it's just typographic stuff but the document itself and this is really the whole document produces this one you have a section you can have title section subsection and this is all marked up it's not html but it's very similar it's a different kind of markup that if we can re-use this to convert to html that would be very nice so another thing why it's so popular in science because it is really good in mathematics and if you ever have tried to enter formulas into a binware document and then looked at the output this is very disingenuous so tech generated a very standard language to convey mathematical expressions this is actually used even in Microsoft products nowadays so this is the standard language between scientists nowadays if they want to commute a formula many people use this without using tech by itself just to communicate and for example this here would create the formula on the side right okay that was all I showed you of tech code no more tech code here so a bit of history tech called Knud very famous for the art of computer programming you know the story who was it we say that the Apple guy said if you have read through all of the books of Knud of the art of computer programming you get a permanent position out of without an interview so Knud was just frustrated with the printing quality back then in the 60s everything was printed with a dyno type optical printing so he was very fed up with the quality of the print so he invented his own type setting system his own font design system just to set his own books yeah well this is this language so it is very similar to other languages back in the times scribe is still around most people haven't heard of it and the language he created is actually a Turing complete language so now I mean it's well practically it's a full-fledged programming language Turing complete means you can compute whatever you want with tech it might take a bit long but it's yeah this is a blessing in the sense that users can create very complicated stuff very detailed graphics very nice layout but it's also a curse because reinterpretation is very hard lots of people do a lot of crazy stuff so converting latex to HTML was our aim because it's the only thing we can do from PDF that didn't work properly so we started from latex we have as I said before nowadays 90% of the papers that are nowadays submitted are written in latex we have very few exceptions for different we have very few exceptions for people not uploading the source code available the problems how to write latex to HTML compiler everyone could say okay this is a nice holiday project let's write latex to HTML compiler if you look at the sources here it looks not that complicated to parse and write I mean that this h1, h2 blah blah blah not so hard unfortunately it is very hard because the tech compiler itself ignores at the end at the output side all the structure it's all just typographic setting the simple things like I mentioned before a section or something these are easy to do but there are hundreds thousands of packages that add additional functionality to latex and they all have to be hand added for a special case for the translation so this is a huge undertaking so we looked at the current solutions there is latex to HTML this is developed by Bruce and Dejan there is tech for HD that Eitan developed for long and now it's maintained by Michael and then this is tagged by the after mentioned before developed by the latex core team so the first two are more equal in quality in success rates so we compare them on a huge level and we have a lot of information about the process of our archive we settled for latex ml why also because there was a project before it's called archive and you have to be careful here there is a five here it's not an X that was this website and Dejan and Michael of course there were about 20% failures of course there are visual glitches but to end it's costly just to give you a reconversion of articles one, articles 0015 dollars well if you can multiply this by 2.4 million you have an unfriendly amount of money you would for every iteration we have to do so it's incomplete I have to say as I say 20% are failing a long list of packages we have not supported from the latex infrastructure one of the most famous is the famous graphing diagram packages there are edge cases there are people who authors who write rally strings and that is the big but it is something where handicapped researchers can work with so the feedback was incredible everyone was like big, big thanks because they finally can read HTML papers sometimes there are errors but before there was nothing now they have at least something right so for screen readers I mean they can live with glitches because they get more or less like if it's like 80-90% of the article that is great so that was a huge improvement we rolled out actually it is rolled out we rolled it out like one and a half months ago we brought this archive with 5 in-house we are working with them together the submission process already we want to motivate authors that on submission they check the HTML and maybe help to make it better with respect to accessibility it's not blocked by now but this will probably not come in the future a bit for the user interface we are running out of time so if you ever have that is the paper I showed you before so before there was always only this few PDF and the text source and maybe other formats and now we have the HTML here so that is new you can click on that what you get here is then a page it stays better we are not well it's not perfect it shows the content so we extract you can not navigate also very important for screen readers we also show warnings about things that didn't work in the conversion because well we are gathering feedback so we support formulas and everything dark mode and we always have a huge report issue because we want everyone to report issues with the conversion so that was the incredible feedback we have thousands of reports already so people are really happy about this feature and use it but you see this is not images these are actual formulas in mass ML blind people can read this with screen readers that's a huge improvement before it was impossible so what do we want to do in the future improve work with later to improve conversion rates improve visual glitches cost effective weighty recompile at the moment we only convert new submissions but not the old because 2.4 million is a lot and costs a lot of money we also look in the future also to look provide accessible pdf this is when the latest core teamwork is ready for the tech pdfs the big topic is charts and graphs very difficult I mean it's often a lot of data is hidden behind a graph charts and here getting information out of it is very hard providing the data behind graphs because that is what helps and then auto captioning we want authors to actually add alternated text but if they don't provide we are thinking about using AI models to auto generate descriptions so as a summary accessibility is very important there are a lot of researchers who wait for this for a long time the feedback was incredibly positive so not only not only from handicapped people from a lot of people who want to read papers that reflow automatically extremely positive feedback we are still far from the last mile even from the last mile we are far away there are a lot of packages we have to work with a lot of support that has to improve but and that is something which is really important I mean it provides a service to the community that is now here that has been not available for many many years just for those who are interested we are also running an archive accessibility forum later this year this opens since very recently just it will be soon be published in a blog post also last and least a few of acknowledgments first of all we all want to thank the researchers the blind researchers the handicapped researchers with whom we have worked they give incredible feedback so we have a lot of interviews permanent checks with them does this work for you does this help for they have provided incredible input for improving the situation then the usual statement that this is supported by the NSF and everything is my own meaning and last but not least I have joined archive recently I don't want to say this is work I have done this is the work of the archive team it's their improvements I'm recently joined and I'm working forward there's also my email if you want to check me so it's norbert.archive.org very easy to remember and that's all I think thanks a lot for the attention thank you so much alright are there any questions before we head off to lunch we have time for one we are building now that will be based on doubt and doctorized applications we actually want to be reusable because there are other archive like systems which are the last months we had a meeting with the Japanese archive so they have a big archive which is called the archive for chat Japanese so all the archive is on archive for more than 99% of the meeting but they are for example in Japan they have Japanese articles which are set in Japanese so also there we would like to offer so to say the website and everything as a service they can also service as a service so they can put into production and that would also work for China for not so you can integrate it into archive well we have things that are very strongly because we have a moderation system but for example they set many parts that will in the end be made publicly available because it is useful for others the first it will be the the FAPI based converter but we will of course we have a version where we can write directly packets so that is not something useful for others so we will put this out and other people we can help other free print servers to set up something similar and because it is a service we have masks to be designed but there are a lot of so if there is met archive there are a lot of other services and they all transfer from the same support alright that's it thank you so much see you guys after lunch have a good break