JSR: Building an Open Registry for the JavaScript Community

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

JSR is a community-driven, modern JavaScript registry with a mission to improve the ecosystem through transparency, openness, and innovation. Hear about recent developments, including the establishment of its governance board, ongoing projects and initiatives, and how these efforts directly benefit JavaScript developers. Discover how the community can engage directly, contribute to JSR’s direction, and get insights into the project’s goals and upcoming milestones. 

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

FAQ

JSR is a new JavaScript registry similar to NPM, but it supports TypeScript out of the box and is open source. It works alongside NPM and is compatible with various runtimes like Cloudflare workers, Deno, Node.js, and Bun.

JSR is governed by a community-driven board including industry leaders like Evan Yu, Isaac Schluter, James Snell, Luca Casanato, and Ryan Dahl. The governance focuses on keeping JSR open and community-driven.

Yes, JSR packages can be used in non-TypeScript codebases. It generates JavaScript files and source maps, allowing compatibility with Node projects and other environments.

Yes, JSR is completely free and open source, aligning with its community-driven values and governance principles.

Currently, JSR does not support private packages, but it is on the roadmap and will be considered as development progresses.

JSR focuses on adding new features and reducing complexity. It offers detailed download metrics, a revamped search system, and automatic changelog and diff generation, among other features.

Yes, JSR can be self-hosted, although it requires setting up infrastructure like GCP and AWS. Future plans include making this process easier and adding proxy capabilities.

JSR has plans to implement virus and harm detection features, ensuring the safety of the registry. This is a high priority feature on their development roadmap.

Developers can contribute to JSR by accessing its open-source code on GitHub. There are many marked issues suitable for first-time contributors, and community involvement is highly encouraged.

JSR is open source and supports TypeScript natively, unlike NPM. It also offers features like tokenless authentication, provenance, and automatic documentation generation, focusing on reducing complexity and enhancing innovation.

Leo Kettmeir
Leo Kettmeir
29 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Leo introduces JSR, a new JavaScript registry similar to NPM but supporting TypeScript. It values openness and innovation, advocating for open governance and community involvement. Key figures like Evan Yu and Ryan Dahl lead the governance board. JSR aims to transition to an open foundation for community ownership, considering a nonprofit route for quicker action. Recent features include detailed download metrics, dark mode, and enhanced search functionality. Future plans involve NPM CLI support, self-hosting mirroring, and diversity in governance. JSON5 support, ESM adoption, and enterprise plans are part of JSR's package management strategy.

1. Introduction to JSR - Leo's Overview

Short description:

Leo introduces JSR, a new JavaScript registry similar to NPM but supporting TypeScript. It does not replace NPM and is compatible across different runtimes. JSR is free and open source, aiming to simplify the complexity of publishing and bring innovation in contrast to NPM.

Hello, and welcome to JSR, building an open registry for the JavaScript community. So first off, I'm Leo. I work at Deno, and I'm also a maintainer of JSR. So I want to quickly see a sea of hands how many people know what JSR is. Okay, about a third. Fair. Good, good.

So, for the others that don't know, first let me introduce you. What is JSR? So JSR is a new JavaScript registry. It's similar to NPM, but it's not NPM. It supports TypeScript out of the box, which is not just a feature. It was a foundational technical decision that we wanted to have, because TypeScript is everywhere now, and publishing TypeScript to NPM is a bit of a drag. I'll get into that in a bit.

And then, well, as I said, it does not replace NPM. It lives alongside it. So you can still use your NPM packages when having dependencies in JSR. And it's compatible across different runtimes. So you can use it with Cloudflare workers, Deno, Node.js, Bun, and anything else that supports Node modules directories. And it also has built-in support by YARN NPM-PM, as recent, but not NPM, which we would like to change. And another feature point is that JSR is completely free and open source. So why did we build JSR? Well, the first reason is complexity. Again, publishing to NPM can be a bit too complicated. You have to set up TS config, you have to find the right settings, the target, et cetera. It shouldn't be like that. It's way too complicated. And we just wanted to work. Oh, whoops. Then we have innovation. NPM has stopped adding any new features, really. I mean, have you ever seen any recent changes to NPM? No.

2. JSR's Values and Governance

Short description:

JSR values openness and innovation, offering tokenless auth, provenance, and automatic documentation generation. Unlike NPM, JSR is community-driven, open-source, and advocates for open governance. It aims to address the stagnant nature of the JavaScript ecosystem and advocates for openness and community-led governance.

The most recent feature, I think, was like two years ago it was something. But anything recent, there hasn't been, because they have stopped innovating. And the JavaScript ecosystem doesn't suit for that. The JavaScript ecosystem constantly evolves. There's a new framework like every week. And the ecosystem itself is moving fast. But the registry it lives on is not moving whatsoever, which is completely unacceptable.

Unlike NPM, which is owned by Microsoft, JSR is completely open. It's open source, it's driven by a community, and it has open governments as a core principle. Some additional features are tokenless auth, so you can just publish from GitHub actions without having to set up any tokens. It will just use OIDC and check with your GitHub user. Provenance, so it can prove that the person that published it actually is the person that published it. Documentation generation, which generates documentation automatically based on your typings and JS doc comments.

JSR is open for the reason that JavaScript is controlled not by a company but by a committee, aka T39. All the implementations of JavaScript are open source, like V8, JS core, etc. NPM is closed source, with the actual registry being completely closed source and just paid tiers for private packages, run by a company. The JavaScript registry needs to be open-source and governed by a community, open to innovation and run by a committee. Building trust involves convincing respected independent leaders from across the ecosystem.

3. JSR's Governance and Leadership

Short description:

JSR emphasizes open governance and community involvement. The registry's open-source nature contrasts with NPM's closed system. Key figures like Evan Yu, Isaac Schluter, James Snell, Luca Casanato, and Ryan Dahl lead the governance board, ensuring a community-driven approach to decision-making and innovation.

JSR is open for the reason that JavaScript is controlled, not controlled by a company, by a committee, aka T39. Then all the implementations of JavaScript are open source, like V8, JS core, et cetera. And then NPM is closed source. The only open source part is the CLI, I believe. But the actual registry is completely closed source and just paid tiers for having private packages, et cetera. And it's run by a company. And that does not fit with the rest of the JavaScript system. And so the JavaScript registry needs to be open source and governed by a community. And open to innovation and be run by a committee of some sort.

So who is running this? Well, we have a few people. And to run a project like this, you have to build trust. And a huge part of what it takes was convincing respected independent leaders from across the ecosystem. I mean, you need to have a foundation to convince more people to be able to make this something actually that works out. And as such, we have a few people that join the governance board. And this demonstrates our commitment to being really a community project.

So the people are Evan Yu, the creator of Vue.js and Vite and founder of Void Zero. Then we have Isaac Schluter, the creator of NPM and cofounder of VLT.sh. Then we have James Snell, who is a Node.js member and the principal system engineer at Cloudflare. Then we have Luca Casanato, who is a colleague of mine that works at Deno and also a member of TTC39. And finally, we have Ryan Dahl, who is the creator of Node.js and Deno. And that encompasses our current board members, but in the future, we might get more on the board.

4. GSR's Board Functions and Moderation

Short description:

The GSR board oversees the project's transition to a foundation and sets its direction. Open-source contributions lack a formal policy, relying on a case-by-case evaluation for merging. A moderation group manages the human side of GSR, ensuring its safety and reliability with key members like Oliver Methurst, Augustin Mori, and Dr. Blackerslight.

But the board really only does a few things, which are overseeing that GSR moves to a foundation. I'll get into that in a bit. And then setting the general direction of the project. Making decisions on behalf of the project when necessary. So really, this is when there is any conflict of interest or there is a drastic decision change that we want to move to a different provider for our infrastructure, etc. And determining how governance collects in the future. So if we want more people, this has still not really been decided on just because we're currently happy with the five people we have. And then determining how open source contributions to the project are made. Currently, we don't really have a policy. It's more like, yeah, this looks good. I'm gonna merge it. But we don't have any strict rules around how we want to run this project. As in what type of contributions we want to accept, what not. It's really currently just on a case-by-case basis that I decide, yes, let's merge this. Or any other of the maintainers, that is.

So we also have a moderation group. So again, GSR is public and it's a public infrastructure. So like many other public spaces, not NPM for example, but in the case of GSR, it needs maintenance and safety rules. So we have a group of people that handles any kind of human side of things. So reacting with people having issues, there's a name dispute, there is security reports, policy enforcement, stuff like that. It's very moderating, the entire system. And this obviously is quite important. But people usually don't care about it. It's not very thankful job. It's relatively thankless. And part of what it takes to keep the registry running safe and reliably for everyone. So for that we have Oliver Methurst, who is a creator of POP4, which is another JavaScript engine. Then we have Augustin Mori who is a contributor to Node.js and GSR as well. And then we have Dr. slash Blackerslight, contributor to GSR.

5. GSR's Transition to Open Foundation

Short description:

GSR aims to transition to an open foundation for community ownership. Considering an alternative of establishing a nonprofit foundation for quicker action. Recent features include detailed download metrics and the introduction of a dark mode.

These are relatively people that we trust. It's not really about getting people that are popular or famous, but really people that are willing to do the gnarly job of responding to support tickets and having to deal with any kind of problems.

As I was mentioning, we're talking about moving to a foundation. So what is this foundation? Ideally, we want to move to an open foundation where GSR, currently owned by the Dino company, can be managed independently to show openness and community ownership.

An alternative approach could be establishing our own nonprofit foundation, which is faster but comes with legal responsibilities. The process of transition, whether to an open foundation or a nonprofit entity, is ongoing. Recent features for GSR include detailed download metrics and the introduction of a dark mode.

6. JSR's Foundation Transition Considerations

Short description:

Considering the slow process, exploring the option of creating an open nonprofit foundation. Legal responsibilities differ from OpenGS's support. The nonprofit route offers a faster but uncertain path in the transition process.

But we'll see what happens and also ECMA seems to have some interest. But overall, it's a slow process. So we'll see what happens.

Now, an alternative would also be that we just have our own foundation. So rather open nonprofit company. That's also an approach we've been thinking of doing. It's a bit less defined and not entirely sure if we're going to do that.

It has its different problems, like you have to take care of legal stuff yourself instead of OpenGS taking care of all the legal shenanigans. So we'll see exactly what we do. But creating our own nonprofit technically is the fastest approach, and not having to wait on processes from these other organizations. But we'll see exactly what's going to happen. It's a slow process overall, regardless of which approach we do.

7. JSR's Feature Updates

Short description:

JSR's Recent & Upcoming Features: Detailed download metrics, version breakdown, dark mode, immutable package archiving, and revamped search for user convenience.

And we'll try to push this forward. But yeah, it will come as it comes. But it's already being treated as an open thing.

Then let's see some of the recent and upcoming features for JSR. So I mentioned a few of the key features at the beginning. But some additional features that we recently added was relatively detailed download metrics. So when you go to npm, the most you see is the weekly downloads on a relatively tiny bit.

With JSR, you can see actual breakdown of all the versions of how long they have been having downloads. So you can switch between daily, monthly, and weekly. And at one point, we'll also add yearly, but that's currently irrelevant. And then we also have recently added dark mode. I mean, that's just people have been asking for it, so we just did it. It was quite a while. But it's not a key feature, really, but people ask for it, so we give it.

And then we changed a bit of our package archiving infrastructure, because on JSR, you cannot change things, really. You cannot delete existing packages. We cannot have a left-path situation again. So the idea is that it's immutable. So if you publish to JSR, your package is there. We will only take things down in case of legal disputes or any other relatively similar type of situation. Or we are working on it to adding also the capability of being able to yourself being able to delete a package version if it has less than ten downloads and was published like less than two hours ago.

We want to give people the flexibility to delete the packages under certain circumstances. But not always, because, again, left-path, we don't want to repeat. So anything cannot be deleted, but we have archiving. So like on GitHub, you can archive a package, and that will just remove it from the search, will not make it visible. But it's still there. So you can download it. And that's relatively it for the most recent features. And then we have some upcoming features, which is our revamped search. So this goes also from reworking our current search to be a bit more easier to use and a bit nicer.

8. GSR's Enhanced Search Features

Short description:

GSR's Enhanced Search: Scope-level symbol search, global search functionality, changelog generation & comparison for easier version migrations.

But also this adds scope level symbol search. So in GSR, every package is under scope, unlike NPM, where that's relatively optional. And currently, you can search for symbols, aka function classes, et cetera, from a package in a package. But there is the use case. For example, we have the add STD scope, which is a standard library scope that provides various functionality. But you don't want to go through every package and find which one has the right functionality. So we're going to add search that will let you search for every function, every class, every interface in that scope.

But then we're going to also one-up that, and we're going to add functionality to search for any function, any class, anything across the entire registry. No matter which scope, which package, you can just search in a global search, and you'll get results. Similar to Go, from what I believe. And then also one more feature we want to work on soon is changelog generation and diff. This sounds quite boring, that we just generate a changelog, as you see on GitHub. But no, this would actually give you a nice diff between previously changed functions.

So let's say version 1.0 and 2.0 have some signature changes. It will display that as, oh, this changed. And you will see a nice diff being able to compare what the changes were, making migrations to new versions a lot easier. And that's pretty much it that we are currently working on and want to land soon. So I guess we can take a really quick peek at JSR. Let me see if I can get this to work. There we go. So we want to go to, oh, God, my laptop is being very slow. There we go. This is the JSR website. Seems relatively boring. There's not much to see. We have a few blog posts here. We have featured packages, which we manually select which packages want to be featured, recently updated, and new packages to JSR.

9. JSR's Package Insights

Short description:

Exploring STD Package in JSR: Compatibility, Scoring System, Weekly Metrics.

Then we have basically similar top points that I mentioned earlier. But we can take a look at a popular package. So I can go to at STD. Again as I mentioned just now, it's a standard library scope where we provide various standard functionality. This is maintained by the Dino company. And we can just jump into collection and we'll see some interesting things. It's big enough.

Okay. Well, we have this work with which shows what runtimes is compatible with. This is decided by the maintainers. Not automatically because detecting that automatically is relatively tricky. And then we also have a score. So JSR scores your package because people love gaming stuff. And the scores are based on various different pieces of information like has your do you have documentation on your symbols? Do you have a description for your package? Did you pick any runtime that's compatible with, et cetera, et cetera. And we are going to add more over time.

The goal for the score is not about really oh, this package is better than that, but it's more about making people use good conventions and making better packages for the whole ecosystem. Then we have the weekly metrics as we see this is very similar to npm, but I can click on that and you will see a nice graph for this is on a weekly basis for this package. You can change this to monthly if you want. And okay. That's my laptop is being extremely slow right now. Anyhow.

10. JSAR's Dependency Features

Short description:

Showing Dependency Graphs and Documentation Generation in JSAR.

And one more feature I can quickly show off is not in this package. But we have a list of dependencies. But in addition to a list of dependencies, you can generate we generate for you a dependency graph. So I think assert depends on one package. Okay. That's useless. But we can go that, for example, and you see a list of dependencies, but you can also go to a dependency graph, and it will generate a graph usually. Yes. There we go. Which generates all dependencies for internal files of the package. But also in yellow it highlights packages like external dependencies to a different package. And in red it also will highlight any npm packages. Now I don't have a direct example for that. But yeah. That's that.

And I guess we have one minute left that I can quickly give an overview of the docs generation. So here we have the assert library. It has various symbols. We have a default entry point and we have the assert function. And this is generated this content is generated by the JS doc comments via the JS doc comments and generates type like what it accepts, some documentation, examples, as defined parameters, return types, et cetera. So it gives a full breakdown, and it also shows you on how to use this. So you can run a command to add it or you can select whichever system you want. It will remember it for you. So you can go to pnpm and it shows you how to use it with pnpm, et cetera. And yeah. That's pretty much it for JSAR.

QnA

JSAR's Community Engagement

Short description:

JSAR Community Engagement and Future Plans

And yeah, we have weekly, biweekly meetings, open meetings, you can join. You can go to the link. There will be a calendar invite. And you can go to JSAR.io to use JSAR. And we also have, well, it's open source, so please contribute. There's a lot of simple fixes that are marked as good first issue. So we will love some contributions to the project. Thank you.

So first, have JSAR supported private packages yet? We currently don't support private packages as of now. It's not difficult for us to support, but it's just yet another feature we want. We have a relatively long issue tracker with a lot of requests of a lot of features, and there's limited manpower. So at one point, it's going to come, but not now.

Well, that's a tricky thing, but the whole point of JSAR is to be a better NPM, or a better alternative to NPM, and we already have seen interest from various maintainers of relatively big packages, like having multiple, like over tens of millions of downloads. And they are interested in moving to JSAR. And the blocker for that is NPM CLI supporting JSAR. So that's something we're going to try to push forward. See that the NPM team is going to allow us to add native support to NPM for JSAR. But yeah.

JSAR's Future Plans and Governance

Short description:

JSAR's Future Plans: NPM CLI support, Self-hosting mirroring, Diversity in governance.

And they are interested in moving to JSAR. And the blocker for that is NPM CLI supporting JSAR. So that's something we're going to try to push forward. See that the NPM team is going to allow us to add native support to NPM for JSAR. But yeah. Sounds exciting.

Ok, Dominika is asking, is it possible to self-host a JSAR mirror? So yes and no. So self-hosting JSAR is doable. It needs some setup. You currently have to setup like GCP and AWS and all that infrastructure stuff yourself, but it is definitely self-hostable. We want to make this flow a lot easier for people, and we also want to add mirroring to such a way that you can have a JSAR registry instance as a proxy.

Are you taking steps to increase diversity in the governance group or moderator team? We have not done any specific effort in that. Just because we wanted to start off with a team of people that we already know, and people that are, well, well-known by the community. I mean, I hope that most people would know those people on the board. So we will definitely increase the diversity of the team. But right now, we are focusing on just getting things done, and then we'll see to improve this.

JSAR's Governance Concerns

Short description:

Diversity in governance, Virus detection priority, GSR package usage in different codebases.

That is nice that you are working on them. And the next one, are you taking steps to increase diversity in the governance group or moderator team? We have not done any specific effort in that. Just because we wanted to start off with a team of people that we already know, and people that are, well, well-known by the community. I mean, I hope that most people would know those people on the board. So we will definitely increase the diversity of the team. But right now, we are focusing on just getting things done, and then we'll see to improve this. I mean, we're probably going to improve this also beforehand, but yeah, it's definitely something we'll do. Let's hope so.

Do you perform any virus or harm detection on the packages? Again, another feature that we have on the issue track and that we have not had a chance yet. It's a high priority one, because if you cannot be sure that anything is safe on GSR, then I mean, obviously, that's going to cause issues. So it's definitely something we're going to do. We are thinking about how we can exactly do this. It's not too difficult. It just needs sitting down, like every other feature. We're going to do it. Let's hope you can fix it properly.

Can GSR packages be used in a non-typescript codebase? Yes. So basically, you can depend on GSR packages in any of your Node projects, if you want, and we actually do the translation for you. So we generate JavaScript files and the source maps correctly, and when NPM or PMPM or YARN downloads the package, you will get it transpiled, whereas when you use it with Deno, Deno will just pull the individual files directly. It's slightly more performant, but in the end, you get the same result. Okay.

JSAR's Package Configuration

Short description:

JSON5 support for Package.JSON, GSR.JSON comparison, Migration from NPM to GSR, ESM adoption over CJS, Scope maintenance in NPM.

Yeah, another question with a lot of likes, and replies, actually. Do you have the feeling that JSON5 will ever be supported for Package.JSON, or any other same-format supporting commands? I don't know about Package.JSON. I mean, we have our own configuration file, which is GSR.JSON, which has four fields, which is the package name, the version, the entry points, and the licence, and that's JSON C-compatible. But for Package.JSON, yeah, that's... Ask the NPM team. Okay.

What does the Package.JSON look like of a published package? Still have main model exports fields? Well, I think you just answered that. Yeah, so we have a GSR.JSON that has an exports field where you can specify a string or an object. A string is the default entry point, and else you can do some scenarios with the object as well to make a default entry point or additional entry points that you want. But everything that you want to import from GSR has to be specified in the entry points. So yeah. Okay.

And they ask if there's a quick migration path or maybe a guide. I mean, so one thing with GSR that I forgot to mention is that it's ESM only. So we do not support CJS. And that is for various different reasons, but also because ESM is the future. More packages are moving to ESM and less CJS is being used. So the way forward, or rather, migration path from NPM to GSR should just work with maybe some slight tweaks. If you're using CJS, then you will have to change quite a few things to be using ESM instead. But overall, it should work. If there's any problems, I mean, just open an issue. And like the CLI has... Like we have a GSR CLI that you can use to publish to GSR and it gives you relatively useful error messages. So if that doesn't help, then yeah, open an issue, please. Nice. Then they have a way to go for sure. How do you think to reduce the problem of scope in NPM is maintained from a different person? This could be a security issue. Scope in NPM is maintained? I'm not sure I understand. There's a problem in NPM, I guess. It says scope in NPM is maintained from a different person.

JSAR's Scope Management and Enterprise Plans

Short description:

Scope maintenance, Reserved scopes, Enterprise plans - proxy key, private packages, CLI tool for JSR.

Oh, I see. I think I understand what the problem is. I think what they're asking is about, let's say, I have scope STD, for example, but someone else wants to publish to it as well. I think that's probably it. And if that's not it, I'm sorry, but I'm going to respond to this. If, let's say, someone is name squatting a scope, like, let's say, I, for example, have the Google scope, even though I don't work at Google and it doesn't belong to me, we will transfer it to the Google company. If there is a scope that's actually being used and it is named, like, doesn't belong to the actual person, then we'll still see to move it to the correct owners. So we will have discussions with the current maintainer of it, see why they have that scope, if they have valid enough reason, then we'll talk back with the people that want the scope and go back and forth. But so far, everyone has been just, oh, yeah, this company wants the scope, yeah, we'll just give them to them. They have had not any problem. And also we have reserved the top 500 packages plus a few more and other companies as reserved scopes, so you cannot just create the scopes. You will have to you will get a popup when you try to register those scopes and it will say, please open a ticket. And then we will assign it to you because, for example, we don't want random people to just creating, like, at Discord and then have weird things or like at Google or whatever. So we will be taking care of that. So you cannot just name squat and do things that other people should not be doing. Have sense. I mean, that's that could be a really great bridge.

Any plans for enterprise usage? So as I mentioned earlier, the proxy thing is probably the key thing for enterprise so that you can self-host yourself in your enterprise and have a flow back to the main registry. And I guess private packages kind of fall into enterprise usage as well, to some degree. And yeah, we don't have that yet. But at some point it's not difficult, but again, yeah, we'll get to it. You need time. I mean, again, please contribute. We will love some help. It's nice that they can contribute then.

Are you planning to release a CLI tool too? Yeah, so we have a JSR CLI that you can use via MPX. MPX JSR should just work. And you can use that to publish to a JSR. And that's it, really. You can publish to JSR and that's it.

JSAR's Package Management and Sustainability

Short description:

JSR's NPM alternative registry, Package compatibility and enforcement, Sustainability and growth compared to NPM.

And you can also download packages with it. Because with NPM currently not fully supporting JSR out of the box, we are doing some trickery using the .npmrc file, which you can specify a registry. This is what usually companies do in the enterprise situations. And basically we are using that functionality to point to the JSR registry as an NPM alternative registry.

Perfect. Can JSR let you see production-only downloads with only bundle minified servers? I'm not sure I fully understand what's being asked here. I mean, production-only downloads. I mean, if you publish packages, it's semi-compatible. So if you do pre-releases, then you can publish that. I mean, whatever you want to publish, you can publish. There is no specific enforcements of what's being published, is it production-ready or not. That is really up to the package maintainer and authors. And you can upload minified stuff if you want to upload minified stuff. We don't recommend it, but you can do it. Get it.

Do you think people prefer new features over sustainability? Did you make any research on this? In what sense sustainability in this scenario? I'm trying to think. I mean, JSR is not expensive to run, let's put it like that. It's relatively sustainable for us currently. It has relatively low expense costs, especially because NPM is relatively old and it has a It's more like NPM has many layers to it and it's built over time. So it has a lot of churn and it's not optimized in some aspects. Whereas JSR is brand new, we thought with these problems that NPM had to solve over the years as key elements that we had to do directly. So we don't have as many problems with that. But also, we are much smaller than NPM, so we don't have as much traffic. So yeah. At least you can fix that and then start doing more features with security.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
Watch video: pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
React Advanced 2021React Advanced 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
Top Content
The Talk discusses optimizing rendering of big tables using Flipper, a new version that is ten times faster with improved user interaction and richer data. It explores optimizing rendering with React, virtualization, filtering, sorting, and windowing techniques. The introduction of the Flipper Datasource packet simplifies handling updates, inserts, and removals. The performance of the Flipper data source package is excellent, even in a debug build of React, with minimal CPU usage. The Q&A session covers incremental sorting, dynamic row height, and the potential for two-dimensional virtualization in the future.
Durable Objects - Everything Everywhere All At Once For Not Very Much Money
React Day Berlin 2023React Day Berlin 2023
31 min
Durable Objects - Everything Everywhere All At Once For Not Very Much Money
Top Content
Watch video: Durable Objects - Everything Everywhere All At Once For Not Very Much Money
Durable Objects is a versatile programming paradigm by Cloudflare that allows for stateful and uniquely addressable server environments. It simplifies feature development, enables real-time updates through WebSocket connections, and provides a built-in key-value store for long-term storage. It can be used to create collaborative applications, manage data storage efficiently, and explore co-located compute and data at the edge. Other companies like Azure also offer similar technologies. Deno's KV and fly.io's Flame are innovative products that eliminate the need for provisioning databases and Kubernetes clusters.
Debugging with Chrome DevTools
JSNation Live 2021JSNation Live 2021
11 min
Debugging with Chrome DevTools
Top Content
Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Mastering advanced concepts in TypeScript
React Summit US 2023React Summit US 2023
132 min
Mastering advanced concepts in TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
WorkshopFree
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Vue.js Live 2024Vue.js Live 2024
119 min
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Workshop
Alvaro Saburido
Alvaro Saburido
Introducing "Mastering 3D Web Development with TresJS," a specialized workshop crafted for Vue.js developers eager to explore the realm of 3D graphics within their web applications. TresJS, a powerful custom renderer for Vue, is specifically designed to work seamlessly with Vue's reactive system. This workshop offers a deep dive into integrating sophisticated 3D visualizations and interactive experiences directly into Vue applications, leveraging the unique strengths of both Vue and TresJS ecosystems.
This workshop is designed for Vue.js developers looking to expand their skill set into the third dimension, UI/UX designers interested in incorporating 3D elements into web applications, and front-end developers curious about the potential of 3D graphics in enhancing user experiences. You'll need to be familiar with Vue.js to benefit from this workshop fully.
What You Will Learn- Introduction to TresJS: Discover the fundamentals of TresJS and how it integrates with the Vue ecosystem to bring 3D graphics to life.- Creating 3D Scenes with Vue: Learn to construct intricate 3D scenes utilizing Vue components, enhancing your user interfaces with dynamic and immersive visuals.- Interactivity and Animation: Master the techniques to make your 3D scenes interactive, responding to user inputs for a captivating user experience.- Integrating with Vue Features: Explore advanced integration of TresJS with Vue’s reactivity, composables, and the Vuex store to manage state in 3D web applications.- Performance and Best Practices: Gain insights into optimizing your 3D scenes for performance and best practices to maintain smooth, responsive web applications.