Thursday, October 17, 2019

The winner is CodeSandbox, Overmind, etc

At last! The holy grail. Or a close approximation.
A while ago I did an assessment of Dev environments in the cloud
Now I’ve settled on one.
My goal was a genuinely frictionless programming environment. One where everything I do happens instantly—or at least quickly.
I want to make a change and see a result.
Just like that.
I also want a sensible methodology for programming. One that organizes code so that I can create it rapidly, maintain it easily, modify it efficiently, test it thoroughly, and deploy it effortlessly.
I’ve got something that’s a candidate.

My programming environment

I’m using:

CodeSandbox

Codesandbox is my development environment. It lets me check stuff out of Github with a Chrome Extension that makes creating a new SandBox a one-click operation.
Once I’ve made my changes, I can commit back to the repository—if it’s mine—or create a new one from the IDE.
CodeSandbox plays nicely with React, Overmind, and Firebase. And with Node Package Manager (NPM), I can grab any library I want with a few keystrokes.
Equally important: if I want to understand how a library works, I can create a SandBox that contains one of the library’s examples. Then I can play with the example it until I’m sure it will do what I want.
When I make a change, CodeSandbox uses Hot Module Reloading (HMR) to only reload what needs to be reloaded. The result is that any change in my code appears in my app more-or-less instantly.
Whatever I commit to Github gets deployed automatically by Netlify.
So my workflow looks like this: checkout, modify, modify, modify, modify, commit, then automatic deploy.
If I want to save an intermediate state, I can fork my SandBox, and if I’m headed in the wrong direction, I can go back to an earlier version.
I can organize SandBoxes in directories, and if I have one that I like, I can turn it into a template.
And CodeSandbox lets me work on the entire app or just one module. Which is kind of awesome.

Building with Overmind

I build an application by creating a data model using Overmind in a SandBox, testing it, then connecting the model to a user interface built with React.
Overmind is my data modeling and state-management tool.
I define a JSON object that represents my application’s state, a set of actions for modifying the state, and a set of effects that interact with the outside world.
Overmind delivers state, actions, and effects anyplace I need it,
I can write scripts invoking actions and effects and verify that the scripted code transforms the state the way I want. I can confirm that by observation (Overmind has a development tool that displays state and a record of actions) or by writing tests that verify.
State contains explicit values and values derived from other parts of the state. Overmind magically updates the derived values when the values on which they depend are updated. Just like a spreadsheet.
Later, when I hook Overmind to React, Overmind will magically tell React to rerender any part of the UI when the state on which the UI depends changes.

UI components

Once the state works the way I want it to, I use a CodeSandbox feature that lets me work on one UI module at a time.
I write a UI module and tell it which state variables to render, and Overmind and React re-render components when values change.
As I’m writing my code and change the code for UI component, it gets rerendered in well under a second.
Then I hook user interactions in the UI to the actions and effects I created. User does something, action or effect fires, the state gets updated, UI gets rerendered, just like that.
As I finish my lower-order components, I combine them into larger components. As far as CodeSandbox is concerned, a component is a component is a component. So as I tweak a higher-level component, everything within it that needs rerendering just does.
If I discover a problem in action, I can change the action and try it again.
Since the state is just a plain old Javascript object, I can save it and restore it any time I want.
When I’m done, I commit, and deploy happens automatically as I go on.

What’s next?

Next, I’m going to make a series of videos to show all this stuff

Sunday, June 9, 2019

Dev environments in the cloud

I’ve been experimenting with cloud development environments.
Here are the ones I’ve been using and what I’ve learned about them.
TL;DR
Cloud development environments are so capable now that it hardly makes sense to install a development environment on my computer. At least for that kind of development.
CodeSandBox.io is going to be my primary environment for a while. It’s got what I need. I may also use Scrimba.

JSFiddle.net

This is the old school JavaScript sandbox. This is the one that things off it all and the first one that I used. Today it seems well behind the times. I have also used some others, like JS Bin, Fiddle Salad, and repl.it

Plunkr

I used it when I was messing around with Angular and facebook. I’ve still got a couple of Plunks in my library.

CodePen.io

I used it for a bunch of client-side experiments. The great thing about it was instant response and excellent editing experience.

Glitch.com

Glitch was the first environment that I used that handled both client side and server side. So It was a complete node development environment, and I did some exportation into Google’s APIs with it. Its user interface is a little funky and weird. I don’t think it compares well to the alternatives below.

Google Cloud Console

Google gives you your own Linux Docker container, freshly provisioned each time you use it. That’s a problem because it takes a lot longer to spin up than some of the other environments. You can also define your own customized VM, so you have a degree of flexibility that you don’t get elsewhere.
Also, there’s an elegant tool for building your own tutorials.
The editor is pretty crappy, and it keeps disconnecting, so not so much.

Gitpod.io

Lets you clone any Github repository, branch or commit into a VM that it provides for you. It even has a browser extension that puts a GitPod button on your Github pages. Click and get a gitpod. But it takes a while to spin up your VM. There’s got to be a better way because everyone the others do it better.
Unlike Google Cloud console’s VMs, these persist. But each Gitpod is independent of the rest.

CodeSandBox.io

CodeSandbox is really fast. You can embed CodeSandbox apps in your web pages (or blog posts) I’ll post at length, later.

StackBlitz.com

StackBlitz is the runner up. Maybe more to come later.

Bit.dev

An excellent environment for finding and tuning up pre-made React components.

Saturday, April 28, 2018

StackBlitz: online playground



Stackblitz is an online development environment--like jsfiddle.net, codepen.io, and codesandbox.io.

The big plus for StackBlitz is the ability to use VS Code as your editor.

Another nice feature (shared by several others) is the ability to embed your project.

Kind of like this. You can edit the code in the embed and the screen will update.

VS Code Editor

Visual Studio Code aka VSCode or just code once you’ve installed it is the best editor around. 
If you like VIM, it’s got a VIM mode. So there. If you like other key bindings, you’ve got them.
It’s got a ton of plugins, more on which later.
And it’s free. That’s the right price.
And you can use it as your online editor for client applications using stackblitz.com More on that later.

About glitch

Glitch is my web playground of choice for building full stack node-served web apps. 

You can use glitch project to run a node server and use it to serve your own content.

Glitch is integrated with GitHub so you can move projects easily between the two.

And you can clone your GitHub repository to your development machine and work locally or in the cloud, depending on what's best.

I'm eldrgeek on GitHub and glitch.

You can find my growing list of Glitch projects here.








OneTab--tab cleaner-upper

The top  tabs in  my OneTab
OneTab is a Chrome plugin that solves a problem that I have: too many open tabs, which leads to both slow performance and distraction.
I get too many open tasks because I tend to leave a trail of open tabs behind me as I research, or task switch. I tell myself that I’ll get around to handling them. But eventually I’ve got a unmanageable clutter. When I get too many tabs, I can use OneTab to close the tabs but not lose track of them.
OneTab keeps a local data structure that it renders as a web page. When I click on the plugin, it adds a new section and in it puts a links to each of the open tabs in my current Chrome window. Then it closes those tabs. If I have a tab that I don’t want closed, I can just drag it out of current window.
My OneTab on this machine has too many files to count. Every other machine that I use has its own OneTab with its own many unhandled tabs.
Now it’s time to clean up some tabs.

Sunday, July 2, 2017

Blueprint: awesome React UI library

Blueprint is a fabulous library, built for React. It has everything that I know that I've wanted for building a UI, and it has lots of stuff that I didn't realize that I wanted--but I do now!

And did I say that it's built for React? Oh, yeah.

Things like Navbars, and Menus and Toasts. Never heard of a Toast? Check this out.

You can play a bit on this here CodeSandbox project. Or click below.