DEV Community: Filipe Lima

Inside the Box: September Community Update

Filipe Lima — Tue, 15 Oct 2024 17:43:57 +0000

Hi there 👋

We are back with a fresh "Inside the Box" issue to keep you updated with the CodeSandbox highlights from last month.

Let's dive right in!

Latest Product News

New status page & improved error messages 🚨 — We have received lots of feedback about our error messages and we hear you! So, we have introduced a new detailed status page and improved our error messages to display relevant system status details.

Sandpack accessibility improvements to the file tab bar 🙌 — Sandpack is now more accessible! This update improves focus management and ensures interactive elements are keyboard accessible and visually highlighted when focused. It also brings adjustments to the tab button structure and keyboard controls for better usability. Huge shoutout to shrilakshmishastry for contributing with this PR!

Tons of improvements and bug fixes 🐞 — After our big editor changes, September was a significant consolidation and retrospective month. We shipped dozens of UX improvements and bug fixes that resulted in better stability and performance across the board.

Full changelog 📜 — For a comprehensive list of all other improvements and fixes we released last month, check out the full changelog!

Web Bytes

Napkins & Sandpack 🤝 — Once again, we were thrilled to see Sandpack in action in napkins.dev, a tool that uses AI to transform a wireframe into a fully working app. Kudos to @nutlope for bringing these open-source tools to the community!

Three.js Wiggle Bones Starter 🦴 — We always love seeing new Three.js examples! This Devbox by @xmliszt invites you to start wiggling with this Three.js library.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: August Community Update

Filipe Lima — Thu, 12 Sep 2024 15:54:47 +0000

Hello hello 👋

We are back with a fresh "Inside the Box" issue to keep you updated with the CodeSandbox highlights from last month.

Ok, let's go!

Latest Product News

New & improved template picker 🔥 — Now, we show a single modal that combines all our templates, making it easier to find the ideal language and runtime for your project. You can combine our filters to find anything in seconds. Check it out!

Sandpack static file support 🖼️ — You can now serve static files inside a Sandpack instance! This beta feature allows serving SVGs, fonts, images, and much more, which helps take isolated, interactive code examples to a new level!

Deprecated the legacy editor 👋 — After 7 years, we have officially deprecated our original “v1” editor, which is now replaced by our new editor powered by VS Code Web.

Full changelog 📜 — For a comprehensive list of all other improvements and fixes we released last month, check out the full changelog!

Web Bytes

LlamaCoder & Sandpack 🤯 — LlamaCoder, by @nutlope, is one of the most exciting projects we've seen in a long time! It uses Llama 3.1 and Together AI to generate full React apps and components based on a prompt, and then uses our very own Sandpack to display the generated code in seconds in a live playground.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: July Community Update

Filipe Lima — Thu, 08 Aug 2024 15:46:42 +0000

Hi there 👋

We are back with another issue of "Inside the Box," a summary of the CodeSandbox highlights from last month.

Let's jump right into it!

Latest Product News

New editor powered by VS Code Web 🔥 — After additional testing with thousands of beta users, we have officially rolled out our new editor powered by VS Code Web. Our biggest editor overhaul in years combines the familiarity and extensibility of VS Code Web with the power of CodeSandbox DevTools. For now, you can revert to the old experience by clicking “Disable VS Code Web” at the editor's top right.

New & improved Test Runner 🧪 — Many of our users have relied on the tests feature of our legacy editor for educational purposes and prototyping new features in isolation. Now, it's available in our new editor and has some improvements like test auto-detection and pinning.

Major overhaul of the Docs 📄 — With the launch of the new editor, we saw the perfect opportunity to bundle a series of updates to our Docs. We have added and updated documentation pages for the main product flows and freshened up our FAQ with questions our community shared over the past few months.

Full changelog 📜 — Last month, we also shipped several improvements and fixes to the CodeSandbox experience. Have a look at the changelog!

Web Bytes

node:sqlite running in CodeSandbox with Node.js nightly 🚀 — For all the Node enthusiasts out there, don't miss this Devbox by @karlhorky, made possible by @cjihrig (node:sqlite) and @GNUmanth (node-nightly).

How We Improved Our Workflows by Dogfooding Our Platform 💡 — We have been hearing good things from companies embracing cloud development, which reminded us of this excellent blog post by our product engineer Alex Moldovan. It describes some engineering breakthroughs our teams experienced while coding in the cloud. Worth a read!

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: June Community Update

Filipe Lima — Tue, 09 Jul 2024 12:16:42 +0000

Hey there 👋

Welcome back to "Inside the Box"! We've packed this issue with all the best bits from last month.

Enjoy!

Latest Product News

VS Code Web editor (beta) 🌟 — After several weeks of testing and iterations based on feedback from users who tested the experimental VS Code Web editor, it is now available in beta to everyone! To enable the beta editor, click the “VS Code Web” button at the right of the editor's top bar.

Several editor improvements 🔧 — As part of the rollout of the new editor, we're improving its overall stability and developer experience. If you need your shared URLs to open in the legacy editor, you can use a ?editorMode=v1 query string in the address bar. You can also access the legacy editor by disabling 'Unified platform editor' in the Experiments tab of the User Settings.

Full changelog 📜 — Want the inside scoop on everything else we've been working on? Head over to our website and check out the full changelog – it's got all the details!

Events & Community

JS Nation Amsterdam — "A full house" doesn't even begin to describe the packed audience that gathered for our very own product engineer, Alex Moldovan, at JS Nation. His talk, "Lessons for building resilient codebases," was praised both for its content and delivery.

Photo: JSNation, Twitter

Sandpack Spotlight: Kempo — Our community project highlight of the month goes to Kempo, a tool to build your code playgrounds using Sandpack. Kempo's approach makes it even easier to display live-running code examples, especially in content platforms like Hashnode.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: May Community Update

Filipe Lima — Mon, 10 Jun 2024 18:27:48 +0000

Hi there 👋

With a new month upon us, it's time for a fresh issue of "Inside the Box" with all of last month's highlights.

Let's go!

Latest Product News

Storybook add-on 🧩 — We're making every story come to life with the CodeSandbox Storybook add-on! After configuring the add-on on your Storybook instance, you will see a button to open that story in a Sandbox, which is great for design system teams and sharing bug repros.

CodeSandbox is now SOC 2 compliant ✅ — This milestone reflects how we handle and process customers' data securely, meeting key security standards.

Unlimited public Sandboxes 🚀 — After countless chats with our users, we decided to update our Free plan so it now includes unlimited public Sandboxes, 5 private Sandboxes and private npm.

Manual VM hibernation 🧊 — We have added an option to manually hibernate a VM from the editor's menu. This may be useful in cases where you want to immediately stop VM runtime.

VM credit spend meter 🧮 — We have added a UI element to the bottom left of the dashboard that displays VM credit expenditure in reference to the allocated quota. This makes it easier to monitor your spending.

Public VM templates for free — We have updated the logic of our public templates running in VMs so that their runtime is not billed to the workspace that created the template. This way, we're empowering everyone to create and share powerful templates with the community at no extra cost.

Web Bytes

How we scale our microVM infrastructure using low-latency memory decompression — If you have a knack for infrastructure, you probably don't want to miss this blog post by our Co-Founder Ives, who explains how we scale our infrastructure to handle 2.5 million microVM resumes per month.

JS Heroes 2024 — It's all good vibes after this year's JS Heroes conference, founded by our Product Engineer Alex Moldovan. Lots of familiar faces around and many demos run in CodeSandbox. A sight to behold!

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: April Community Update

Filipe Lima — Fri, 17 May 2024 11:27:27 +0000

Hey folks 👋

How's May treating you so far?

We're happy to be back with the latest issue of "Inside the Box", an update on last month's highlights. Let's dive right in!

Latest Product News

VS Code Web & Extensions 🆚 — We've added support for VS Code Web as the default CodeSandbox editor! This experimental feature allows you to run and install VS Code extensions directly in CodeSandbox and customize your editor the way you like it. You can turn it on in Settings under "Experiments" (click on the CodeSandbox logo in the top left of the editor, then click "Settings" and go to "Experiments").

GitHub PR Extension — Alongside VS Code Web support, we now also enable the GitHub PR Extension by default. This makes reviewing PRs using CodeSandbox much faster.

Updated Dashboard & Workspace Onboarding 🌱 — Our dashboard now has a dedicated "Get started" section with useful tutorials, and new members are welcomed with a new onboarding to help us enhance their experience.

Create repositories from starter templates — Creating a brand-new repository in CodeSandbox is now much easier! In the dashboard you can pick from one of our starter templates and kick off a fresh repo to build your new project.

Automatic domain-based invites ✉️ — Now, you can create an organization and claim a domain in your workspace settings so that when a user registers with a matching email domain, they will see an option to join your workspace with a click.

Self-serve annual plans 🪙 — You can now directly subscribe to an annual subscription of CodeSandbox Pro, which brings 30% savings compared to monthly billing.

Web Bytes

What's Unique about CodeSandbox CDEs — If you've wondered how CodeSandbox is different from other cloud development environments out there, then don't miss this overview by Ives!

How To Use CodeSandbox with Your Design System — Ever since we launched CodeSandbox, we've seen several companies use our Sandboxes as part of their design system. So, we wrote a complete guide on the best ways to improve design system examples, documentation, bug repros, and more.

Making Impact work with React 19 📽️ — Excited about the release of React 19? So are we! So much so that our lead engineer Christian took a deep dive into how some of the latest updates impact... Impact! Also a nice chance to see what it's like to use CodeSandbox on your work projects.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: March Community Update

Filipe Lima — Tue, 16 Apr 2024 16:56:37 +0000

Hallo allemaal 👋 (Which is how we'd say "Hi everyone" back at our HQ)

Welcome to the latest issue of "Inside the Box", with a fresh update on all things CodeSandbox!

Keep reading for a short and sweet summary of the main highlights from March.

Latest Product News

New repository import flow 🔥 — CodeSandbox CDE is especially useful for working on your repositories. So, we have rebuilt the repo import flow from scratch, so that after you grant GitHub permissions, we automatically show a list of repos from your GitHub organizations that you can import with a click. You can also type an owner/name combination to quickly import any GitHub repo.

Annual plans 🗓️ — CodeSandbox Pro now has an annual billing option, which is especially useful for teams and companies looking for predictable billing. The process for starting an annual plan may take up to 24 hours for the time being.

Editing subscription add-ons ➕ — CodeSandbox Pro subscribers can now adjust their add-ons at any point through their workspace portal. All changes will take effect at the start of the upcoming billing cycle. Once a change has been scheduled, it may still be adjusted during the period before the billing cycle changes over.

Seamless git checkout 📩 — Now, running git checkout in the terminal clones the VM of the original branch. This seamless flow encapsulates the "one VM per branch" approach that makes CodeSandbox unique.

Web Bytes

Shared Composable State Stores Across Frameworks — In the latest episode of our "CodeSandbox Engineering" series, our engineers Christian and Danilo explored how a simple function combined with reactive primitives could be a shared pattern for shared composable state stores in any framework.

Golden tickets 🎫 — We have released 5 golden tickets into the wild, each worth 1 month of unlimited usage. Tickets are hidden behind 5 super-secret milestones in our CDE. Two have been found so far, but expect an email from us if you find any of the remaining three!

Community Spotlight

We love to shine a light on some of the best projects amazing people create using our platform.

Today, we want to highlight one of the most recent projects approved for our "CodeSandbox Friends" program: Rete.js—a framework for creating visual interfaces and workflows.

On their documentation, you will find several examples running on CodeSandbox (like the one shown below), making it easier for anyone to see a demo and fork it to CodeSandbox to start building.

If you're using CodeSandbox to work on licensed open-source software, developer community projects or non-profit organizations, you may be eligible for "CodeSandbox Friends". More details in our Docs.

Sandstorm animation — Find your mind continuously wandering off to sandy beaches ⛱️? Well, so do we! So it was a nice surprise to feature the impressive work from @xmliszt on our latest community spotlight ✨

We really love seeing what you build using CodeSandbox. So do share with us what you're working on or which insights you would like to hear from us.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

PS: If you also find the expression "Hallo allemaal" pretty funny, then certainly don't Google it—you might end up playing this song in a loop for 3 hours.

Inside the Box: February Community Update

Filipe Lima — Wed, 13 Mar 2024 18:52:19 +0000

Hey everyone 👋

We are back with our February update!

"But wait," you ask, "aren't we halfway through March?"

And right you are! But let's just say that we've been so busy after the big CodeSandbox CDE release that we have just now got to writing this update.

So, let's get started looking at everything that's been happening in the CodeSandboxosphere.

Latest Product News

Simpler VM resizing 🔥 — Say you've been working on a feature branch in CodeSandbox CDE and have to run an especially resource-intensive task. Don't you wish you could give that VM some more juice for a few minutes? Well, now you can do it using the VM resizing option, right from the editor!

Team-based preview subdomains 🌐 — To empower a growing number of teams using CodeSandbox for their work projects, we have rolled out the ability to enable custom domains for previews. This can be helpful for cases like CORS "allow origin" headers, OAuth redirect URLs, and setting trusted URLs for forwarding requests. This feature can only be enabled on request.

Notifications for PR events 🔔 — Now, whenever a workspace has configured the CodeSandbox GitHub App integration, workspace members will receive Dashboard notifications for events such as PR review requests, approvals, requested changes, and more.

Better invite management 📩 — Adding and managing users in your workspace is now easier than ever! Now, you can edit workspace members directly from the editor's 'Share' modal. Plus, the workspace member overview now also shows pending invitations and pending requests to join a workspace (which can be managed by workspace admins).

Meet Us @ Events

Developer Collaboration in the Cloud — Coding in cloud development environments can massively enhance sync and async collaboration. In this episode of "Bits and Boxes", CodeSandbox engineers Christian Alfoni, Alex Moldovan and Danilo Woznika highlighted some of the most valuable flows of collaborating in the cloud.

Making the Codebase Accessible to Non-Coders — In yet another episode of Bits and Boxes, Alex invited Filipe from the Marketing team to explore CDE flows that are valuable to Marketing, Design and Product teams.

DevWorld Conference — On leap day, Sanne from our BeOps team was greeted by a full house at the DevWorld Conference in Amsterdam for the talk "Elixir: Happy Developers and Scaleable Backends".

Web Bytes

Are CDEs Coming to Replace Local Development? — The million-dollar question: coding in the cloud or locally? Well… why not both? This blog post from our Lead Engineer, Christian, explores the different benefits, drawbacks and synergies of local development and CDEs.

Golden tickets 🎫 — We have released 5 golden tickets into the wild, each worth 1 month of unlimited usage. Tickets are hidden behind 5 super-secret milestones in our CDE. Two have been found so far, but expect an email from us if you find any of the remaining three!

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Developing CodeSandbox Projects - AMA Recap

Filipe Lima — Wed, 28 Sep 2022 09:08:20 +0000

What if you could develop anything on the cloud, regardless of the project's complexity or your machine's specs, while saving time and improving collaboration?

This was the big question that we working at CodeSandbox kept asking ourselves, as we began to understand all the exciting things that CodeSandbox could empower people to do.

And so, in March 2022, CodeSandbox Projects was born, a result of more than 5 years of learnings from working on CodeSandbox.

Projects, currently in open beta, runs every branch on an independent development environment, using fast micro VMs. This branch lives behind a shareable URL, so that anyone accessing it can see the code running, the preview, as well as any other devtool that has been set up (for example, Storybook). It integrates seamlessly with GitHub and VS Code, bringing a lot of flexibility into the development flow.

In this AMA session, we put the spotlight on some of the people from the fantastic team that built CodeSandbox Projects, to dive deeper into the motivations behind this development and to hear their own thoughts about why they love CodeSandbox.

What led to CodeSandbox Projects?

The big idea behind Projects had been present for a long time, as we talked with our users and understood some of the limitations of running code on your browser. It doesn't scale well when you're building more complex projects, because you have to store all files in memory, and you can't seamlessly run other languages or services like databases.

We wanted people to go beyond prototyping and actually do full development in a collaborative way. — Sanne Kalkman

One of the core values of CodeSandbox is empowering creators to feel like they can build without limits. And so, we knew we had to break free from the limits of the browser and allow for a scalable development environment powered by the cloud.

As a team, we asked “what if we can support all the use cases, all the workflows that people need to move their development from their local environment to the cloud?” — Alex Moldovan

What does our team love about Projects?

You can tell a lot about a product by what its creators have to say about it. As a team of developers ourselves, we often encountered frustrations in our workflows and wondered why some parts of our daily routines felt so cumbersome and manual.

So we didn't really hold back from creating a development experience we believe can help creators save so much time and effort. After all, development should be accessible to all.

What really stands out is how easy it is to start actually working. I'm not a super technical person, being a designer, so every time I try to work with code. I do have some struggles and a few difficulties. But using Projects just makes it so much easier because I don't have to worry about setting up the environment and I just can easily share it with my colleagues and just collaborate and basically just start building. — Lena Sotto Mayor

Projects effectively removes the need to switch context and spin up a local dev server to be able to preview something or work on a branch. You always get straight to the running code and can focus on coding, having everything else automated for you.

I can share a branch with my code and then a preview like Storybook as well as me using a component from Storybook - and I love that! Not only do I get to jump straight into the code without having to pull down a branch and spin it up, but if I have my tests running for example, or if I have a component that I'm playing around with, I can just send it over. — Necoline Hubner

Of course, one of the staples of CodeSandbox Projects is being able to code from anywhere. Instead of relying on your own machine, your code is always running on the cloud. Plus, with our iOS app, you can enjoy a native coding experience anywhere, straight from your iPad.

I'm able to work with my repositories. For example, I have my own personal website, and ever since my laptop crashed, I literally just imported from GitHub and all I'm doing is working on my website and being able to make PRs and make changes on the go - sometimes from my iPad. This kind of flexibility has just given me the opportunity to do that right. — Adewale Abati

As we started developing CodeSandbox with CodeSandbox, we marveled to find just how much value it brought to our individual development workflows.

After two or three months, I looked back and said - well I'm so “dependent” on these things that are automated with Projects which I didn't have before with my local environment. They're just small things that were there just helping out here and there. This is super valuable and can improve a lot of the developer experience. — Alex Moldovan

Also, don't miss this thread by Alex where he explains the process of replacing his local setup with CodeSandbox.

Looking Ahead

Developing CodeSandbox Projects was (and still is) an exciting, challenging and rewarding journey.

Don't miss the full AMA video here, where you can also hear the team provide some feedback on key questions from our audience.

If you haven't tried Projects yet, now is the right time! Import your first repo and experience all the benefits of this optimized development flow.

Also, don't forget to subscribe to our changelog newsletter and keep up to date with our latest updates (exciting things are coming!).