CodeSandbox Blog

I think codesandbox is quite good. I always find that one on ones are the best way to enhance the learning experience. https://codesandbox.io/

Also worth mentioning https://codesandbox.io/ especially for those familiar with VSCode.

I've been using https://codesandbox.io/ pop up a lot. Repl has always been my favorite as well for other backend languages My goto will always be codepen though if its purely frontend. It just has the nicest UX interface and works really well. Funny thing about codepen is I also use it as a CDN too. I'll grab my compiled single CSS file from my main github repo, and paste it into a new codepen file. Then on a new codepen, I'll link that CDN codepen so I can isolate and make a webcomponent, while still adhering to my original CSS. I use the commit# / merge# to keep track between the main git repo VS the codepen CDN file

I loved this article. Disclaimer, I'm the founder of CodeFund (formerly Code Sponsor). As such, my focus is funding for open source. To start, you should check out Nadia Eghbal's Lemonade Stand (https://github.com/nayafia/lemonade-stand). She lists many different ways to generate funding, along with the pros and cons. There is no silver bullet. I believe that real substantial funding must come from all directions. Also, funding sources vary based on the personality of the maintainers. Some may prefer to go the fund-raising path with Patreon or Open Collective. Some may prefer the TideLift SLA path. Some go the route of selling merchandise, training or books. However, most paths of funding require the developer to take on the role of fundraiser, marketer, or even publisher. Developers may not want to do this and would prefer to focus on the code. This is why advertising fits most models. It provides passive, recurring and consistent income that does not require the maintainer to veer from their chosen path. It supports DHH's "fuck you" policy. The maintainer is not beholden to the advertiser with CodeFund, because there is no direct agreement. CodeFund (https://codefund.app) is an open source platform that helps fund maintainers, bloggers, and builders through non-tracking ethical ads. We only display ads based on the context of the website, not the visitor profile. Our ads are relevant and non-obtrusive to visitors. For example, go to https://jsbin.com or…

Which specific "best practices" are you referring to? Ignore the CSS-related discussions for now. React itself doesn't care how you handle the CSS in your app. You can write standalone stylesheets and match the classnames in your HTML output, same as you always have, write inline styles, or use one of the fancy new "CSS-in-JS" libs that have popped up. Other than that, the aspects of "reusability" and "easier to work with than hand-written DOM manipulation" are certainly true. "Easy to learn" is just an observation, not a reason to use it. In general, React is beneficial if you're doing any kind of interactive client-side application, regardless of how big your company is. It provides a consistent mental model for how your app is constructed and updated: given some set of state values, the resulting UI output will be X, and the data and updates flow top-down in the tree. This becomes more valuable as the size of the client-side logic and UI grows. I'd suggest taking some time to actually try out React and get a feel for how it works in practice. The easiest way to do it is to open up https://codesandbox.io and start a new React project. Here's a couple meta-links that may be helpful for learning more. My suggested list of resources for getting started with React: http://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-react/ My React/Redux links list: https://github.com/markerikson/react-redux-links If you've got any further questions I can help with,…

The official React tutorial starts you out by installing create-react-app. I know that vue has something similar and I wouldn't be surprised if others did as well (are there even other important front-end frameworks besides React/Angular/Vue at the moment?) https://reactjs.org/tutorial/tutorial.html This allow you to start off with a great setup and skip the configuration so you can get started with just writing React. I highly suggest starting with official docs before writing these off. A lot of other tutorials are of varying quality but you can trust the official docs for sure until you learn more about the community and which resources are worth it (or just use this https://github.com/markerikson/react-redux-links). It can be overwhelming if you aren't actively following the front-end world but the reality is that you need very little node knowledge and can go a very long way without ever touching webpack + babel. Even then, once you get to the point, learning to configure those things won't take much time and to me, it's worth it for the developer experience. If you really want to dabble in just writing React code, you can also try these browser IDEs if they float your boat. https://codesandbox.io/ https://stackblitz.com/

I have, it's called Visual Studio Code and I ditched my old native editor(s) for it. I'd even suggest that the fact that it's JS based has significantly changed the tech world because the editor itself will run in a browser so it's here https://godbolt.org/ , and here https://codesandbox.io, and here https://www.postman.com/, and here https://aws.amazon.com/pm/cloud9/ and 100s or 1000s of other sites.

I am rebuilding the website for a personal project of mine; the site is for a mod in a game that offers twitch integration, and in the mod, there is a "twitch chest" that only chat can open. I added an easter egg on the website, that when you click on the chest in the footer, it follows the mouse in a similar way it would within the game -- it keeps a safe distance from the mouse to prevent interfering with it, and will repel away to that distance when moving the mouse towards it. https://codesandbox.io/p/sandbox/floating-chest-k33n63 for a React component that implements this functionality.

Hey all! I wanted to show-off something I've been working on for the better part of a year. At Aptible, we have been using starfx in production for a few months now with great success. Some resources to learn more: - Michigan TypeScript Talk: https://www.youtube.com/watch?si=Mok0J8Wp0Z-ahFrN&v=uRbqLGj_6mI&am… - MVP: https://codesandbox.io/p/sandbox/starfx-simplest-dgqc9v?file=%2Fsrc%2F… - Examples repo: https://github.com/neurosnap/starfx-examples - Production example: https://github.com/aptible/app-ui Happy to answer questions! Thanks for taking a look.

At CodeSandbox (https://codesandbox.io) we're also working on this! Main focus of us is that we're running the environment in Firecracker microVMs, which allows us to snapshot and clone environments very quickly. This enables us to create a VM for every branch, which comes with the added advantage that every branch automatically has a snapshotted preview environment that can resume in ~2 seconds.

> microVMs for running containers are definitely a great idea I think my greybeard must be getting too long... This sounds like insanity to me. Why not just make a base image and some simple setup scripts? If you need to get super fancy, these guys have it figured out [1]. They can clone a running vm in under two seconds. [1] https://codesandbox.io/post/how-we-clone-a-running-vm-in-2-seconds

Hello everyone. CodeSandbox here. We are looking for a T-shaped generalist developer who is comfortable building and using advanced TypeScript features and patterns. We also have a position open for an experienced Developer Advocate as well as an iOS Engineer. We are 100% remote and our team members are located anywhere between UTC-5/+2. Our culture is very welcoming, informal and fun. Work-life balance is extremely important to us. At the same time our team is incredibly driven and dedicated to building a developer tool that changes the way we collaborate and develop online. We make rapid web development possible. Come check us out: https://codesandbox.io/

Absolute power and money corrupts. In this case looks like both. Yeah I stopped using Replit after this. Other alternatives https://stackblitz.com/ https://glot.io/ https://codesandbox.io/

https://codesandbox.io/embed/simple-physics-demo-with-debug-bounds-0k2… There's some excellent demos of how this works with this library with a full physics engine. Loads great even on my phone.

You can leave it if you wish. I'll have to learn a bit more about https://codesandbox.io/, it looks very useful. Apparently the contents of the page were somehow mangled a bit. As a result it is not functional.

Fun example of at least making an attempt...the Demuxed website for 2019[1] had a big, animated hero image on top of a deep purple background. Obviously we went with a video first, which looked great, but then...we ran into this problem and different browsers/hardware all would show slight-but-obvious differences between the video background and the hero background. Ultimately we decided to just use a gif, but the other, more fun solution we experimented with was to use canvas to render the video, grab the hex value from one of the purple pixels, and set the background to that[2]. [1] https://2019.demuxed.com [2] https://codesandbox.io/s/video-canvas-playground-gp0hk?from-embed=&…

Hi there, I'm the author of the project. We built Splitter as a part of the Devbook [0] development. When building Splitter, we got inspired by Split.js [1] which is a great library, we just needed some customization and more control. You can nest Splitter as much as you like. It's also responsive and has only two dependencies: React and styled-components. Here's a CodeSandbox project showing the component in action [2] [0] https://usedevbook.com [1] https://split.js.org/ [2] https://codesandbox.io/s/devbookhqspliiter-example-l23s4

react-three-fiber is a really nice library to make web 3D things with. Three.js is brilliant, but there's a metric ton of boilerplate to get complicated things up and running. react-three-fiber just shuffles that away so you can concentrate on building a graph out of components. I've been getting up to speed with it for a little while and I've been chucking things I've learned in to a Github Pages site - https://onion2k.github.io/r3f-by-example/ Each example can be spun up on Codesandbox with the click of a link eg https://onion2k.github.io/r3f-by-example/examples/geometry/instanced-d… (Click the "Fork on Codesandbox" link) There are tons of good examples of how to use react-three-fiber on Codesandbox - https://codesandbox.io/search?query=react-three-fiber&page=1

This is brilliant. CodeSandbox also has this. For example, you can import this project in CodeSandbox using link https://githubbox.com/conwnet/github1s (adding box between github and .com) https://codesandbox.io/docs/importing

...or you could use https://codeanywhere.com/ https://gitpod.io/ https://codesandbox.io/ https://codenvy.com/ for a more streamlined experience...

I use jsfiddle a lot for small experiments. Another grate website is https://codesandbox.io

You can also use e.g. https://codesandbox.io/ if you want to quickly whip up some prototype.

Amazing site. I noticed one thing that could easily improve the feel of the site — the sheet music playhead which is outside of the canvas. You are using fractional units to position it, but you're also using left/top/height properties which can't be fractional. If you convert these to GPU translated layers via translate, you'll get a smoother playhead since these can be positioned fractionally, plus you'll cut down on the repaints! Here's an example: https://codesandbox.io/s/magical-wind-mptqn?fontsize=14&hidenaviga…

Damn, sorry to hear it. Other users listed some good options, like https://codesandbox.io and https://observablebq.com/

I ran into that myself while working on a form heavy project. You can use various react form libraries to help make things easier, but then you need to figure out how to wrap your favorite visual component library. Passing all the properties between the two is really really confusing. I'm a fan of the Material-UI project which provides the visual components and ability to style them however you want. React Final Form is terrific with managing forms (and easily made very performant). imho, these form components become really nice to work with... Demo: https://lookfirst.github.io/mui-rff/ Codesandbox: https://codesandbox.io/s/react-final-form-material-ui-example-tqv09 Code: https://github.com/lookfirst/mui-rff

neat, this is my go to for something more complicated, i.e reat or even node https://codesandbox.io

CodeSandbox is pretty nice! https://codesandbox.io I also like Glitch a lot https://glitch.com

Hey that's amazing, and your tool is really advanced! It's exactly the purpose of this, we're making a cad system as well and it's been hell with the current way of how we chose to do it. We're using redux and getting the scene graph to adapt with manual subscribers - it's led to something that is very hard to understand. That is why i'm writing the reconciler now. The benefit of using tags (jsx) is that objects become fully managed. The most clear indication to me is still effects. https://codesandbox.io/embed/mo0xrqrj79 You can drop that in and it works. Make it conditional and once it gets unmounted the render loop goes back to normal. Almost magic, but then again, react for the dom had the same benefits.

Additionally if you find local development unpleasant you can always try remote development via something like https://codesandbox.io/ which will setup a project with everything you need.

I was really surprised that many of the web IDEs don't support the external keyboard in iOS. I haven't tried repl.it, but the ace editor (which cloud9 uses) doesn't support the arrow keys on the external keyboard for iOS which is a deal breaker for me.[1] Code Sandbox [2] however allows you to select which editor (Monaco or CodeMirror) and CodeMirror has a fix for handling the arrow keys. I've found Code Sandbox works pretty well on my iPad - it has a nice Github integration so I can commit directly or open pull requests from the web IDE. [1]: https://github.com/ajaxorg/ace/pull/3172 [2]: https://codesandbox.io