Okay. So welcome to our talk. We are going to talk about NPMX, a fast modern browser for the NPMS registry. Sewo is going to join later and do more of the atmospheric part of the talk that you're going to be maybe more interested about. And yeah, so SEO is a software engineer and like an unofficial dev rel for Ad Proto. And I'm amazed that I'm able to do this talk with her. It is a kind of example that like these young people are doing open source in a way that I will have loved to do when I was young.
So yeah, really. Thank you, Seb. And I'm an open source adventurer, like lately. I'm a project steward of MPMX together with Daniel, and I'm part of the team of other open source projects that you may have used, like Vit, V test. I'm part of the EATE community. We did Elk, a Mastodon client when we try to move there. Woo! There is a lot of people from our core team here, like Bailey is here. I think Bailey is part of every team in the Atmosphere. So thanks Bailey for taking care of our data for us and moving it around everywhere.
And Willow, I don't know if is it she's here, but yeah, Willow is very interesting because when we started NPMX, we saw that other like three projects were doing similar things. This happen a lot when you have an idea that is ready. We all share a lot of context and like people start to work in the same thing. And the good thing is that we know each other, we went, we took it, and we decided to work together. And npmx is here today because we didn't do four different alternatives to the browser uh the for the uh npm shell.com browser, but we all work it together.
So thank you, Willow. And uh James is also here, part also of the core team, and he is leading EATE that I think you may have seen him working on the improving the performance of every package in the ecosystem. And the relationship between EATNE and the NPMX community is like a great example of how we work not only internally but also with other communities and later on we are going to see a little bit about that. And Daniel say hi, he will have love to be here. And yeah, we wanted to include him because he started the project.
So for people that are not programmers, when we talk about packages, imagine if we would like to for the ad protocol dev Bluesky hand uh add proto handle, we would like to see the display name. Uh Bluesky app has a nice public API for it, but we normally don't start from scratch. We use libraries that are distributed as packages. So in JavaScript, we will import it a client from example from AddQt from Marie, and we can create uh a client for that service, and this lets us do like very comfortable with like type it, like functions and get the yeah, the display name in an easy way.
Uh so packages let us build software collaboratively and depending on the work of amazing other uh people and don't start from scratch. The package registry from uh the web, like a JavaScript is NPM. You will do NPM installed as a couple client to get this one in your project. And in NPMX, we actually have a dependency on Marie. Like we are using her libraries, so thanks Marie. Not only on Marie but on a lot of really wonderful open source projects, all the Vita Stack, uh NAX, Vue, NJS org, like there is so many uh people. We couldn't have built npmx without this in two months.
Yeah, we are relying on all this, the work of a lot of people. And in the case of npm, so this is the world largest software registry. This is a graph from like GitHub released it not long ago. If you take into account JavaScript and TypeScript together, it's like almost double of Python. It is an it's an amazing registry of like the work of like so many, so many people. And it's a little bit hard to understand because they it consists of three parts. The registry is called NPM and has that logo. The CLI is called NPM and has that logo, and the website is called npm.js.com and has the same logo.
So like people when they think about npm, they think about all the things together. But there are three different parts, you know, like the registry where all the tarbals are stored and they have like a public API that you can fetch. The CLI is something the command line interface that we use to like interact with that registry, and the website allows us to uh browse search, like do admin stuff. So npm right now it is on the hands of Microsoft. And yeah, they have not been adding a lot of features lately to it. So other open source people and like projects have been trying to say maybe we should innovate a little bit.
And so on the registry side you have JSR from the Denofox. You have Vault that also were X MPM Fox trying to see like what they could improve. Like we could have like twice maybe as fast if we are able to modify the server and like make the uh CLI and the server together communicate in a little bit better way. On the CLI, this has been for a long time. Yarn first show a lot of innovation, then PMPM uh in the Vit ecosystem and front end now PMPM is huge. We are all using PMPM. And on the website side we have nothing.
Actually there are some things, for example, for the graphs, there is a lot of mini websites to do graph for download graphs, and they are like all yarn, JSR, Vault all have their own little browsers, but it's not nothing that is like we can put here. And we actually need something there because I don't know if you see how the light in the room changed it, but it only has live mode. So for some of us that that is the way we don't use it. And also like if you see the little download weekly downloads graph there, you can only see the last week.
You cannot like explore the graph. There is so much more that we could do here, and like uh the packages and all the relationships, it is a social endeavor. Like we could see where are the maintainers? Where are the like I don't know where they are the maintainers here, like where are the relationships between the different packages, all the the graph of the different dependencies, all these things are extremely important. So Daniel sent to Bluesky this post on January 23 saying that for reasons he would love to know like what are the frustrations with the package registry and a lot of people responded, it's like 50 replies.
Nine hours later he had a working prototype and he is starting to invite people to work with him. Uh he didn't take it for himself only. And in the first week, that resulted in 50 PRs in the first day. So a lot of people were frustrated and wanted to actually change things. We created uh community chat uh and to invite people through DMs and through Bluesky, like bake post in in Bluesky the little bit because we wanted to start intentionally growing the community. One of that invites was to Zio because at the beginning, the first time that Daniel uh asked me if I would like to work with him.
I say like we should do something with that proto because atproto is awesome. And so like this I'm inviting ZOs, they will say yes, and we start working together. And the second week at the end, we had 1K issues and PRs. It is like one every 20 minutes around the clock. That is kind of impressive. And we ended up with 100 contributors that were invited through this like open networking, the 1.5 scar uh five car stars without like real promotion. It was like we don't we even didn't want it to mention the name at the beginning.
People were saying like where is the link? And yeah, you could find it. If you if you really care, you could find it. So we are back to the light thing. And this resulted that if you go to any uh com web page and you put an X at the beginning, we are recovering the X for something more important. And you're going to get two dark mode. So this is our browser for the MPM registry, and we are seeing like at Q client here. And like actually we can uh I don't know, like we can go to at huge.
So yeah, you can we can see a package and you see that there is a graph and you can see the oh okay, ah sorry. Ah nice, and this works actually. Okay, ah, I'm okay, that's very interesting. So we can go here and yeah, now in the graph we can see a beautiful graph. So yeah, and you can see like everything. So this thing that we're building is not only a product. We are also working together and constructing a massive team that is going to be keep working on this project and in other things that maybe we want to change.
And we are also already organized it a little bit. The front uh row that you see there are all the maintainers of our project. This what these are the core team of our project. And actually these are just roles because we there is resources that we need to like keep together, but we are all peers and work together. And I think that while this work it, there is a lot of things. Each of these things will be a talk, but like I will go very fast through it. But there is a coherent consensual product vision, but we try to iterate fast knowing that the code is myleable and we can keep changing it and we use versions so like we can iterate in main and then like when it's ready we release it.
Uh Daniel is extremely good in doing that. We lean in conventions in libraries like NAX that allow us to go extremely fast and don't discuss absolutely every little detail. We empower people that care about accessibility, performance, tests. If you care about any of these things, come to work with us.
We don't open everything directly. Like we are very intentional because we care about other people. And we optimize for adoption, and this may people would not like it a little bit, but we actually meet users and contributors where they are. And this means that we are using GitHub and Discord at this moment. And yeah, people are not that happy, but we will laugh long term to change that. We are routing for Tangle, we are rooting for Rumi, we are routing for everything that you are building, and when things are ready, we are going to be migrating there.
And when we work in community, we are by humans and for humans.
We like try to mix the in the go to our Discord, you will see like it's full with Bluesky links. Everyone that shares our values is welcome. This is very important. If you don't share our values, you can go build something else. New contributors are peers to ours. So as soon as you join and start contributing to the project, you're going to feel that you are one of us. And you can you have a voice and you can change things. And if you want to work, you're going to yeah, please go. Improve things. We do governance through roles and no hierarchy.
Ideas are discussed in the open, but we have a lot of spaces of trust where we've hash them out. And this is like mapping real life. You first discuss with your friends, with your colleagues, and then you go to the public. This is important is when you have like these private spaces. You're not taking things from the public and putting them there. You're taking things from DMs and putting them up. And we shape online space together, we decide what tools we use together. And this team is kind of like an ever growing healthy network of trust.
Like we have been building things like forever, like from Vit, V test, people from the Adproto community have building all those things that now we're doing together. And this is very thrilling and very exciting. So after all this, the second week, in the third week, we were not sleeping. People were sleeping like three hours a day and it was not healthy at all. So we ended up deciding that we need to change that. And we decided to take a vacation. When the project was going exponential, we just stop it working for a week. And this we lock it Discord, we stop it merging PRs for a week.
Some of us went to this mountain with the family and snowboard and some other people stayed, touching grass in ways they like it to do. For example, programming other things because they cannot stop. Luke, for example, did a nice browser extension that modifies the GitHub graph to have grass instead. And when he did it, actually he did differently, but our community tell told him you know what? When you contribute a lot, it should have less grass. And actually he did that. So like the more you work, the tighter the grass is, and if you work too much, they will be like brown patches.
So this is when we add this feature to MPMX is going to be this.
So yeah, the four week went out, the vacation is out, and we have been working, uh Salma is working with us, and she's amazing outreacher, and she prepared this idea of like having or live phone launch in six the sixth week with a lot of blog posts. So like we from this one we did a web ring that we link it to 26 other blog posts. She did one about how to make your first contribution to open source, so go read that if you want to do it. Daniel talked about how it's a lot better to have a team uh the next team instead of uh the next developer.
I wrote about conversion communities because again, like this work it because at the beginning there was already a network of trust between a lot of people. Alex wrote a book about this month. So like if you want to really know what is going on, like you go check that one. Uh Grafieros, like is the one doing the graphic magic, there is a library from view, and it talked about how you can improve like how much the library improves it. And this was also something that we saw with Elk. Like all the stack improve it because the people doing the libraries are now users and can improve things.
Thank you for all the yeah for inviting us here. And actually, like the Add Proto community have been so good from to MPMX to them from the beginning. The Bluesky team also was our first sponsor, that is a nice piece of lore. And we have already other sponsors like Vercel, uh Voiceero, Netdefy and Vault also. And yeah, and we are talking with other companies that want to help us. If you are a company and want to help us, please talk with us. Uh James wrote about the collaborating with NPMX. Philippe that working in NetNet, like talking about uh yeah, how working like he's a senior developer, has so much knowledge, but still this month, these two months really help him.
Paula, uh actually I love this blog post, like you should go read it. Like she wrote about it was her first contribution to open source and how she overcome the his postor syndrome. And now she is a very important part of our community. She did that so many features. We are talking about doing a talk together maybe in another conference uh later in the year. Uh Storybook also, like another good relationship that we like they are already like putting little things there. Uh I don't know if Jason is here, but like we also launched it with uh uh code TV uh blog post uh stream that was really nice.
And so yes, now we have an answer for that. There is NPMX.
And yeah, so one of the things about like this collaboration that I was mentioning between other communities, if you go to Fast Globe, for example, this was a library that everybody uses, you can see that it has 94 million downloads. So like a lot of people will actually go and check the downloads and install it without syncing. But if you see now in our UI, we have uh a notation from the people the AEA Tne, they curate this module replacement annotation, and it says that you may not need this dependencies. And if you click the link, you are going to see that it talks about replacement, like tiny lobby that is half the size.
And actually, like it shows you how you have to replace it. And this is very good because they were doing this work, and now they can rest a little bit and other people can do it directly. And yes, and we are keep working on features, like for example, uh James uh had this idea that's still not uh on the uh on the main, but the idea of like we can we can show so much information. I seen in the conference there was this idea of like surfacing all this information in a good way. And for example, Shame had this idea that between version we can show how they install size or if there is a listen license change, and we can show like the good things, the warnings, uh red things if like for example like a license will change to be not be uh open source anymore.
And so yeah, this is very important to us, and I I want to say that I didn't talk about atproto specifically so far because we are first doing a website that is very useful for a lot of people. And this website has a lot of opportunities to actually be a social website because doing open source and all the packages is a social endeavor again. And npang.com will do so much more in that regard. So we are going to ZEO. Thank you so much. Uh Do you want to be called Patak or Matthias? Both are fine.
All right. Another round of applause for Matthias for that wonderful presentation. Seriously, NPMX is such an amazing project, and I'm so happy for Matias to invite me to work on it with him, alongside a great uh number of community members. So one of the big pillars of NPMX is really showcasing the community, right? Open source is not just about code, it is about the people who make the code work, who make it happen to make it usable for anyone, right? Tools not only for developers but for users, right? And so when I got asked to be a part of this project, uh my main goal is to add social features, right?
And of course we're here at Atmosphere Conf, and so the protocol we use is app protocol. And there are multiple reasons as to why we use the app protocol, and the main one for me is how developer friendly it is. So just taking a look, see here. So one of the core pillars of app protocol is data sovereignty, being able to own your data, being able to say that I made that data, that that data is mine, and being able to show that to other people. The main way that App Protocol does this is with the PDS, the personal data server.
And there are multiple ways of doing this. First up is doing it self-hosted. We're developers, we like to you know have servers on our own, whether they be tiny Raspberry Pis in the corner of our room, or five dollar BPSs in the clouds somewhere, or even like beefy uh racks, you know. I I wish in the future I have a server rack in my home if I have the money for it, you know. But having your own PDS doesn't need something that beefy, right? Right now, mine is currently uh at self-hosted.social, but you uh as developers, woo, self-hosted.
Yeah, big big ups. Big up. Woo. But you as developers can easily uh spin one up using npm create PDS. Shout out to uh mk.gg I saw your um that's their handle. I saw their presentation yesterday about this wonderful CLI they made uh that allows you to spin up uh Cirrus, the uh very lightweight PDS that you could just spin up on a Cloudflare worker, right? Yeah, yeah, I'm getting a nod, I'm getting a thumbs up there. But you don't have to self-host it yourself. Um you can instead as a user be a part of a community.
So npmx does have a community hosted server, kinda like Bluesky with its mushroom servers, npmx has the same thing where users can host their data with us. Uh that way you don't have to spin up your own server. That's fine. You can migrate into NPMX as well. You can see here that uh Daniel Rowe and Patak already have their data on there. Uh and this PDS is not just anywhere, it is actually only three hours away by train to Eurosky servers uh in Germany. It is really close. So it is in Europe, so if you're worried about your data being hosted in the US, don't worry.
If you're on NPMX, it is in double checking Germany. Uh so any regulations, GDPR, data uh compliance stuff, it is you know all there. And once again, I want to give a big ups to the PDS czar of the project, Bailey Townshev, he's here. Seriously. We were literally talking, like when I got into the project, um, we were like, okay, we're gonna implement ad protocol. All right, but with that in mind, like we some people, some users, they won't, you know, they they aren't in the Atmosphere yet. They gotta have you know a way to get into the uh into the Atmosphere without you know going through Bluesky if they have any big hangups there.
So I literally DM Bailey once, like literally like maybe a day or two later, the PDS is up. So it's amazing. And if you're here in person, that's what he looks like. If you're online or even here and you're like, I don't know who Bailey is, you do, promise me. Like the pumpkin is great branding. Shout out Bailey. Seriously, like I keep telling him he needs like a pumpkin mask to wear in person so that you know it's him. So yeah, once again, thank you so much, Bailey for that. Another big round of applause for him.
And to show how successful the PDS is in and getting new users onto it, just a little bit here. We have a little over 300, probably even more now, 350 accounts on the server calling npmx.social their PDS home. Like seriously, like they could take a take a look at the avatars on the screen. There's so many. And that's just some of them. And a lot of these people, if you actually take a look at their PDSs, they haven't done anything else. Their first entry into the Atmosphere is NPMX, and that's one of the ways that I'm really proud of this project.
Is we're getting developers into the Atmosphere, slowly getting them acquainted with how wonderful this community is. And with that in mind, you know, getting new developers in, right? We want to get new uh contributors up and running, right? Like not only in the front end or the back end of the code, but getting them to make social features very easily. And app protocol makes that yeah, I got it, don't worry. I'll press the next button soon. No worries. So new contributors, you know, sometimes when you want to add social features, uh it could be like proprietary proprietary data and databases, then you'd need to have like secret keys to uh work with uh production data, live data.
Um and it could be like very wonky, but you know, as we all know, data is just JSON, right? Uh lex uh data like likes and packages and all that, they are shaped in a uh standardized lexicon so that anyone can just read it, you know, it's very straightforward. And to work with said data to manipulate it, you use XRPC calls, which are basically just API fetch calls. Like if you know how to do curl or if you know how to do a wait fetch on JavaScript, you can work with live data. And because the data is public and uh manipulating data is or querying data is just one fetch call away.
Um a lot of services and infrastructure has already popped up that makes it much simpler to uh to use, especially for new contributors, and big projects like ours. So another big shout out to uh Fig uh Phil for Microcosm. Uh big ups, big ups. Really one of the big pillars of the Atmosphere so far, if you want to get records without going straight to the PDSs, uh you can use their uh services. We use two mainly uh slingshot, we use to resolve data. Sorry, looking at the time. Uh resolving uh data, getting the mini doc. So that'll just be like the PDS, the DID, the handle, and as well as getting specific records very, very easily.
Uh these are the two uh sorry I can't see these are the two AP uh API routes that we use. Uh not only do we use Slingshot, we also use Constellation, a very useful tool and service that allows us to go through backlinks. So we can go and you know, query a package and to figure out how many people have liked it, like specifically like individual data. Sometimes you have multiple like records, right? We just want to get to make sure that you only have the one person per record, as well as getting the backlinks. Uh we use constellation for that.
And because of everything I've said so far, we've managed to implement our very first social feature, which which are likes. So uh you can see here, this is just uh um this is a live demo of my profile page. I only have 10 likes, but you can see here we have a um we have a little profile uh with my name, a little description. I also added a website that you could go into. And of course, you could see all of the packages that I have liked so far. And of course, if you as a developer want to take a look at npmx and do all these likes and stuff, going to the connect corner here, going down to the connect to Atmosphere bit here, you can log in very quickly.
There's also like a small description. I'm pretty proud of that description. You could create a new account again on our community-hosted PDS. And there's also a connect with Bluesky if you want to use that as well. So there's actually a lot of activity when it comes to likes when we release this feature. So much so that since we started, NPMX is one of, if not the biggest users of the microcosm ecosystem. So once again, I want to say thank you so much, Fig Phil, bad example, which is a really bad handle. It's a you're a great example in the community for having this these services up for us to use.
And of course, because the data is public, anybody can use them on any um website they want. A great example here is Blento, um, where you can connect any atmospheric data. And if we scroll, oh oh, sorry, let me go all the way here. And if we scroll all the way down on our Blento here, you could see there's so many contributors. Jeez Louise. And we also have a leaderboard here. So right now Svelte is at the top with almost a hundred almost 200 likes. So shout out Team Orange, you're doing great. Followed up by Nuxt, VET and View.
I think they're all green. So Team Green also catching up. So if you have a package, if you have a community, um, you know, show your support. Tell people to like things on NPMX, right. Let me let me scroll, let me go this way. Yeah. And now coding and you know virtue signaling with likes, that's not the only way you can be a part of an open source developer community. Right? You can be just talking about your favorite feature in a library. You can um congregate, coalesce, uh collect um different libraries and the implementations of your protocol.
In this case, this is a bunch of PDS stuff, or not even coding related, you can be a designer. Um, Dame over here changed the Bluesky thing to better ingredients, better piece of Papa John's, that was great. Um design is also a part of being uh in the open source community. And so no matter where you are in the web, being a part of the um being a part of the open source community, whether you're on uh code base, code bases, right, like entangled and GitHub contributing code, whether you're talking on Bluesky or Twitter, or if you have the money, um uh contributing with uh through open collective and Patreon, we want to surface your contributions as well because it's not just coders, it's everyone.
And that's the goal with NPMX. And so for the next slide here is a concept that uh community member Alex whipped up on Figma uh for a future of NPMX where you can scour the full network for what the project is doing and its community. So you could see here um it could be Bluesky posts, it could be GitHub patch notes, um, it could even be uh the maintainers themselves just surfacing specific people. So no matter if you're a maintainer, uh you're just a you're a contributor, or you're just someone that like we need to give special thanks to.
We want to shout you out. And one of the ways that we're looking into this uh into implementing this feature is uh Key Trace. It's a very promising uh product where you can connect uh many different accounts uh to your Atmosphere account. In this case, I have here mine where it's my Atmosphere account, right? My approach account connected to my Tangled to my GitHub, as well as just my website in general. So you know that if you go to Z.dev, that is definitely me. And so once again, I want to really really stress that no matter who you are you can be a part of the open source community so if you um if you code come and contribute code right engineer with us if you are a designer make things pretty with everyone if you know any other languages I only like you know I really only know one but some people can do like 10 amazing translate that's very very important right if you are really into accessibility making sure everyone has access uh and everyone can use the tools that we build you are also important as well and of course if you have the money to keep the lights up you are important too so if you are any one of these and npmx has resonated with you please come build with us we are at npmx.dev if you want to take a look at the code we are at repo.mpmx.dev if you want to chat along talk about anything and everything npmx go to chat.mpmx.dev that'll go to the Discord.
And of course if you want to tag us on BlueSky and just you know talk uh online uh we are at social.mpmx with that in mind I just want to say thank you once again to the uh to the Atmosphere conference Boris Ted Nick for organizing this everyone in this room uh who is so passionate about the Atmosphere and the future that it brings that they're here in person and of course people who are online watching remotely no matter where you are it is very wonderful. So once again I want to say thank you and before we wrap up I want to bring on Matthias for final remarks.
That was great. Yeah I wanted to say thank you but you did it so well so I just will say again thank you so much actually these past days have show us like make us very hopeful because you are not only building the technology that we need you are living it and this is this is also what we need like you are living in using the principles that you want to put into the technology. So yeah you make us very hopeful and I want to say that not only if you want to build with us in the sense of building like MPMX but if you are building anything else steal the stock because there is always things that we can collaborate we can abstract libraries and use them together we can help Fick like and give him the money to actually like yeah we can do really a lot together.
So that's it. Thanks a lot