If you know or use TypeScript you ought to be familiar with its Playground. It is an awesome tool, being able to play around with TypeScript on the browser, try things out. Is also great for collaboration, since the editor's state (code and config) is kept serialized in the URL, all it take is ctrl + s (or Cmd if you are in need Mac) and the link is on the clipboard and ready to be shared.

But then you paste the link on Slack and it is looonger than the yarn.lock of a React application 😰

A fairly short snippet results in something like this:

https://www.typescriptlang.org/play/index.html#code/PTAEBUE8AcFMGUDGAnAltALqayD2A3VAE1gGdQBHAV1UQGsBaAM1QA9RlZFcBbH2AHZEAhhlS4B5JrmQBYAFAhQ3PhNDDEiYoIykANKAwALWJFCkjuAO6gq0UKgGhIuKslCwiqDDNAAjYVJPBSU1ThV+IVFxSQA6BRCwADFfWFZhHmgAG1gIGAQUdCxEYSccAm1KGnpmNjJE0Gl3DBhcckdnV2b80gAuBPluSSxYKhzkUgA5Kh4-WHcAXlAAJliAdgBGAA5lre3dgBYFUfGpmbnkWJ94DGRSgHMACgBKAG4G0E+v74A9AH0AYCfqAGOZYDlEFhjKhyD4wbljLksqh7kYsH4aFkiANEFlAuQAKLpTI5ADCeNI5AA3gpPvxjLgiC9QDT5N9oaRYgJcBgACJcPGcIigJYbAAM7zZoAAvgppUA

That's a big nope from your coworkers who hate long links polluting the Slack history. And if you are anything like me you don't even like to be the one sharing long links either.

What if ... ?

What if those long links looked like this instead?

tsplay.dev/vwj58W

tsplay.dev/hello

Yet another link shortener

Yes there are already a ton of link shorteners out there. But it is great to have a dedicate one. It creates identity. When you see tsplay.dev you know it'll be some TypeScript code.

🛡️ It is also about security. You never know where tinyurl.com or bit.ly short-links could redirect to.

In the making

For now short links can only be created on tsplay.dev.

But we are working on a playground plugin to create short links right there in the playground. Which should be available when the new version of the TypeScript website is fully released.

By Nahuel 🎨 Joni 💻 & myself 💻