CodeSwing

go.raybo.org/2OXU

In addition to working with CodeSpaces, this course uses CodeSwing to help run and preview your code.

CodeSwing

CodeSwing is an interactive editor that you can run inside Visual Studio Code. It's similar to something like CodePen.

Most of the time, if you're following along with the slides, you'll be able to simply click on one of these try it buttons, which will launch a code preview with the proper code.

If you're curious as to how that works, then let's take a deeper dive.

The Repo

  • Branch Dropdown
  • Code Button
  • Create CodeSpace

I'm going to go to the repo for this course and then from the branch dropdown. I'll choose the branch for the this video which is in chapter one and the first video.

Then I'm going to go to the green code button. I'll make sure I'm in the codespaces tab and choose create codespace on the branch.

CodeSwing

  • Script Pane
  • Preview Pane
  • Terminal

You should see a pane with the javascript we'll be using for the lesson

A preview pane will show you the output of an HTML file that you can target.

You should also see a terminal pane at the bottom of the screen.

The Magic

  • Explorer
  • script.js
  • canvas.html
  • pico.css
  • div#output

If you open the explorer from the activity bar, you can see the files that are making this work.

The script.js file has the javascript you're looking at.

The canvas.html has the HTML for the page on the right.

You may notice that I'm preloading a library called pico.css to make things look decent without any styles.

There's a special DIV with an ID of output that I can use to add somethign to the page with JavaScript if I want to.

Otherwise it's a pretty boring page.

More Info

  • Control views
  • Closing Files
  • Rebooting Swing

You can customize the view by moving things around codespaces just like you would with Visual Studio Code so you can move panes around.

If you close accidentally close the script file, you can just double click on the explorer to open it.

You can restart the swing by using the command palette (hamburger/view/commandpalette) and selecting CodeSwing:Open Swing... Choose the current folder and hit enter. It will redraw the swing.

Swing Options

  • Swing Icons
  • Play Code
  • Console
  • Add libraries

You may notice a few extra icons on the preview tab

You can play the code if you need to force execute something...although it should auto-update as you type.

You can also see icons for opening the console (although the setup already does that for you)

There's some shortcuts for the commands like some controls for changing the layout.

Finally, there's an icon for the adding a library so you can add some other css or script libraries like React.

You can also find all the commands using the command palette.

Advanced

  • codeswing.json
  • Manifest info
  • Rebooting Swing

There's a configuration file you can use to control the swing called codeswing.json.

You can use that to adjust the swing. For us, it's making sure that the terminal is open when you open one of these.

If you want to see how this code would work in your regular browser, we also have the livepreview extensions loaded, so you can just right click on the canvas.html file in the manifest and choose Open in Browser.