Powered By Olvy
Huh... where was week 23? Good that you ask. So here's a little insight into how CodeSandbox Team operates currently.
We try to run a 4-week cycle where the first 3 weeks are discovery and implementation continuously and the 4th week is a "cool-down" week where we try to tie up all loose ends. For example, we write and finish documentation that is missing, evaluate the success of the last few weeks, and so on. We also did this 4 week cycle for the first time in the current structure and we did not ship anything noteworthy in the last week but planned and discovered a lot. So there is much more to come in the future. Overall we're learning and iterating and these weekly releases are what we always focus on getting better at.
On to more fun things as there are cool things to share:
Drag and Drop File Upload
Nothing prevents you anymore from uploading files with one little drag to your project and it gets uploaded in seconds (depending on filesize 😉). Made a neat little Demo for yall.
Better Framework Support
Many Frameworks like Vite, Remix, Solid and more are making sure your code runs perfectly in all conditions. So far it always needed a little bit of manual configuration to get them running in Projects because of how they interact with localhost to show you the latest changes. Luckily we were able to build something to make that obsolete. Now, these projects work as expected in CodeSandbox Projects without extra configuration and can shine. We should make a blog post on this as it's pretty cool.
Other Changes and Fixes
We fixed some performance issues around the LSP implementation
Fork is now called Branch - let us know if this is less confusing
Dropdown menus no longer hide content outside the window by accident
Better Error handling and messaging throughout the import flow
That's all we can share this week, but there's much more to come. Stay tuned.
As some of you may know, one of the exciting new technologies we use to build the experience that we envision for CodeSandbox Projects is Firecracker. This has not been done before in the way we are using it, so there's a lot of experimentation and innovation happening. The good news is - we got it to a state that all new Projets created will run on Firecracker by default and we'll migrate other projects over in the near future.
This is an exciting update because Firecracker allows us to do new things. It's faster branching and faster (sometimes instant) bootup times for running dev servers. We are working on a full blog post for this topic because there is soo much to share. For now, let us share some other highlights from last week:
More Storage by default
Projects now have 6GB (4GB previously) of storage by default. We've seen quite some improvement when it comes to VM size and extra storage, so we've bumped this up for the extra space and comfort.
Alright, this is actually the result of some feature-work we titled "memoize router", but the result of this is a higher FPS count in our Editor as there are fewer refreshes and that is what counts. We'll always keep an eye on this FPS for your snappy Editor feeling and anything we can do to make it fast we'll tackle regularly to make sure the experience is great.
Tasks now have a proper status shown next to them right in VScode. No more guessing which of them is running or not.
CodeSandbox for iOS
Our Mobile Team (it's the one and only Carlos) is hard at work on all days.
You'll now find LSP diagnostics output directly in your editor on mobile, and it's really great. Instant feedback on your JS code, if it's all looking correct, is an amazing feature to have to avoid little oversights.
Improved Code Completion Performance by 0.2 seconds (it actually feels faster, I swear)
That's all for this week. So long, all the best from your
showOpenInCodeSandbox: pass prop to loading component (#486);
React.useIdwhen available, getting ready for React 18 (#461);
CodeEditor: check if error message has a valid position (#466);
CodeEditor: any change on read-only props wasn’t remounting the component (#456);
Sandpack-context: make sure that the method
updateFiletriggers all clients (#455).
It's the first weekly update now ... yay 🎉 - it's also a pretty short one. We did a lot of discovery and discussion last week on some bigger issues we are tackling now, so there are only a few things to highlight. As always we also address various little bugs and quirks along the way but won't highlight them here unless it's really worth sharing. Well here we go:
Since the launch we had Read only branches which defaults to a main branch, so people don't alter this branch by accident for everyone and only forking would be possible. Based on feedback and more usage we also added Protected state which gives people more ways of interacting with a branch if you have write access.
Discard Multiple Changes at once
With our Git Sidebar we offer a nice way to create commits but discarding changes was limited to one file at a time using the context menu. Now you can select and discard the changes for multiple files at once without using the Terminal.
Copy relative file path
We shipped a super handy functionality to our Editor where you can now easily copy the relative file path for any file from its context menu.
Projects Dashboard Cleanup
We cleaned up various interaction hover effects on the Projects Dashboard to make some interactions clearer and squashed some other bugs along the way.
CodeSandbox for iOS
We are also busy on this side. We get a lot of really good feedback from users, but sadly most of the cool changes are only usable by people in the beta (Open Beta soon?) -- regardless we fixed some bugs and rolled out some little updates also when it comes to .env file handling on iOS. The new version is already in review and should land on all iOS devices within this week.
Also, did you know you can subscribe on this page to our updates? This will send this nice little weekly overview directly to your inbox and you won't miss anything.
Your CodeSandbox Team.
It’s been a couple of weeks since we announced CodeSandbox Projects and we couldn’t be happier about the feedback and input we got from all of you. There are 10K+ signups for our waitlist and we’ve been busy at adding more and more people while addressing all the feedback we got.
First of all, a big thank you from all of us at CodeSandbox. 🙇
Here are a few highlights of what has changed over the last few weeks:
You can now seamless drag the size of the file explorer or the DevTools area and toggle their visibility with the Command Palette.
Better Code Highlighting
We rolled out various changes and improvements to our custom CodeSandbox Syntax Highlighting Theme and even released a VSCode Extension due to the positive reception.
Highly requested and ready for you to use. It’s the first iteration of this feature and we’ll add much more to it, but take it slow to make sure security is all tight and in place.
GitHub Action Support
You can now install a GitHub Action for your project to receive automatically created messages with links to the Branch Previews and running code in your PRs where you most need them.
Binary Files Support
We can now show images and other file formats in the editor. We’ll add more special functionality for various file formats in the future.
PR Review Improvements
Whenever you open a PR within CodeSandbox, you can now see what files have changed and see the diffs by clicking on the files in the sidebar.
There's a new button in the sidebar (under the git panel). This button installs a GitHub Action that will automatically add links to a live running environment on CodeSandbox for every new PR.
You can now start collaborative terminals, tasks, and previews right from within VSCode!
Properly comment out
Tasks can now be run from the Command Palette and UI alike.
Better auto-discovery for newly imported projects to get your project running without extra configuration in many cases.
Many projects have been ported over from Kubernetes to Firecracker and this brought many performance improvements across the board, from faster loading times to quicker branching.
The Dashboard now loads faster as we optimised the initial load and data we poll from the GitHub API, especially for bigger projects.
Draft Branches now only get created on CodeSandbox and are only pushed to GitHub when you actually commit changes, reducing the initiation time of new branches.
Various Bug fixes
We are never happy if things don’t work as expected so we squashed a lot of annoying little bugs.
It’s now easier to self-invite new users to your teams and let them experience CodeSandbox Projects as part of your team.
… and so much more that we can’t even list all stuff here in a readable way. This is also the reason why we kick off weekly Changelogs now. There’s so much happening here every week and we’ll also keep you posted about it on a weekly basis.
Oh … and have you seen we released CodeSandbox for iOS?
Your CodeSandbox team.
Sandpack-client: file-resolver protocol error handling #427;
SandpackPreview: programmatically consume sandpack-instance from a component #425;
SandpackPreview: render additional content in preview container #422;
SandpackPreivew: possibility to render additional buttons #412.
Sandpack-client: set default value on log-level #418.
Environments: remove SSE envs from ts-types, which sandpack currently doesn’t support #410.
We’re super eager to introduce CodeSandbox Projects; a cloud development platform with the familiar speed and experience of CodeSandbox, but deeply integrated with your favorite tooling, and working on projects of any size. We’ve been using it at CodeSandbox ourselves to build CodeSandbox, and have been loving it!
This has been the biggest project at CodeSandbox so far. When we started with CodeSandbox Projects, we were a team of 12 people, now we’re a team of 30 people. We’ve worked super hard to get to this point, and we’re so excited that we can finally share it with the world!
We know these are some hard times in the world. We still wanted to put our work out. We’re hoping for better days ahead, and we’ll try to help as much as possible from our side.
Adewale Abati, AJ Foster, Alex Moldovan, András Bácsai, Artem Zakharchenko, Bas Buursma, Bogdan Luca, Carlos Vidal, Christian Alfoni, Danilo Woznica, Danny Ruchtie, Gianmarco Simone, Ioana Chiorean, Ives van Hoorne, James Amey, Jasper de Moor, Joana Telker, Joji Augustine, Julien Leclercq, Kate Beard, Lena Sotto Mayor, Marco Vincit, Maria Clara Santana, Matan Kushner, Necoline Hubner, Oskar van Eeden, Roman Kuba, Sanne Kalkman, Scott Hutcheson, Tamas Szuromi, Zeh Fernandes
Add logLevel to sandpack options #378.
Improve the reliability of the "user-visible" mode #343;
OpenInCodeSandboxButton: preserve ?file= param for big sandboxes #357;
We are incredibly excited to show you the first glimpse of the new CodeSandbox. There is so much we want to show and tell everyone, and finally, we can break the silence.
On our brand new changelog, you'll be able to stay on top of everything CodeSandbox, from Sandpack to ... so many other things we share more about soon.
Sizebot: just introduced a new bot to analyze the current bundler on every pull request and make sure we’re aware of the current bundle size. It uses the same methodology from bundlephobia.com to analyze the exports from the bundle and its dependencies. Here’s an example running on a PR;
CodeMirror: adds the language extension as a class name in the editor component, which gives more possibilities for customizations #334;
Tests: increased the coverage of the unit tests in one of the core functions #336.
init-mode: it resets the bundler state when the client has been unregistered, which gives the loading component start a new loading flow from scratch #337;
editorState: it shifts the approach of how the
editorStatehas been updated in the Sandpack context. From now on, it watches any changes on files and then sets if the current editor has any changes performed internally #333;
CodeEditor component: it was found out another approach to remove the placeholder div, in order to avoid a state without any code for a few milliseconds (#310);
calculateNearestUniquePath: fixed some edge cases with the same file name in different directories (#311);
Scrollbar: remove custom styles for scrollbars, which was hijacking the default system behavior. From now on, we leave the client to decide how to customize the scrollbars, instead of enforcing an opinionated style.
License: we finally moved the license to Apache-2.0 (which is a more permissible license, we're enabling more contributions);
We wrote a document about Contribution Guide, Performance Indicator, License & Community. Check it here.