Before You Code

There are some things you should know before diving into the code.

Language: TypeScript

We use TypeScript as our language of choice for creating the dynamic tools. TypeScript is a typed version of JavaScript and is a well established and documented language for building web applications. Here are some examples you can learn from:

Don't forget to check any open documentation available in JS, including the try-it-yourself one.

Our tutorials require a very basic level of programming and we try to use simple and understandable functions for beginners. Even if you never programmed before or you forgot the programming lectures you attended years ago, don't worry, you will not have any problem. Otherwise, we'll be happy to help you to find suitable resources for you!

Code Completion

Code completion, or IntelliSense, is a coding aid that help you learn more about the code that you're using. Use the ctrl + space keys in the editor to bring up a small popup with function references. It will also show when you type on objects. So whenever you write a dot after an object, for example layout. (when having const layout = new SKYSKETCH.Layout()), you should see a list that helps you find relevant functions or properties regarding layouts.

Debugging

Something is failing and you have no clue what? Use the debugger to help you. These are the 4 steps you should keep in mind for debugging:

  • Press F12 while on page to open the browser console.
  • Type debugger in the DynaMaker editor in the line you want to stop at.
  • Update (or refresh F5). When it stops at that line, you can hover over all the elements to get values.
  • If you want to go on with debugging:
    • F10 allows you to go to the next line.
    • F11 allows you to go into the function.
    • F8 allows you to go until the next debugger or finish the debugging mode if there is no one.

Remember that you can only read the values of all the variables that are above the line you are stopped at. You can learn more about debugging with Chrome DevTools or jump into the tutorial Presets, Test & Debug to learn from an example in DynaMaker.

Keyboard Shortcuts

Do you want to program faster? Take a look at the most common keyboard shortcuts. Depending on in which section your cursor is, keyboard shortcuts and mouse buttons behave differently.

Preview Section (Left)

It follows the classic and simplified CAD camera buttons. Considering the camera target the center position of the screen (on the ground at (0,0,0) by default):

  • Left click: interacts with UI (if any).
  • Right click: rotates camera around the target.
  • Scroll down/up: zooms in/out.
  • Wheel button: pans camera.

There are no default keyboard shortcuts. However you can create your own with the behavior you want. We call this hotkeys and they are covered in one of the tutorials.

Remember also that F12 opens the browser console for debugging.

Code Section (Right)

It follows the common keyboard shortcuts for a programming language editor.

Copy & Paste

  • Ctrl+C: to copy the selected area or the entire row if nothing is selected
  • Ctrl+V: to paste what has been copied
  • Ctrl+X: to cut (copy & remove) the selected area or the entire row if nothing is selected
  • Shift+Alt+⬇️/⬆️: to copy the rows selected and paste them into the row below/above

Redo, Undo And Save & Autoformatting

  • Ctrl+S: to save and update the changes (same as Save & Update)
  • Ctrl+Z: to undo
  • Ctrl+Shift+Z: to redo (same as Ctrl+Y)
  • Shift+Alt+F: to autoformat

Find And Replace

  • Ctrl+G: to go to the number of row typed
  • Ctrl+F: to find a word
  • Ctrl+H: to find and replace a word
  • Alt+C: to enable matching case
  • Alt+W: to enable matching whole word

Comments

  • Ctrl+': to comment (out) the entire row
  • Shift+Alt+A: to comment (out) the area selected
← IntroductionIntroduction →