facebook
Brian Fernandes
Director of Customer Engagement - Loves technology and almost everything related to computing. Wants to help you write better software. Follow at @brianfernandes.
Posted on Jun 11th 2019

This release of CodeMix is all about taking your everyday development experience to the next level. Our completely revamped Live Preview feature makes developing frontends super convenient, while editor capabilities like the new breadcrumb and code folding make navigating a large code base more efficient. Also, support for Angular workspaces and libraries, as well as the latest Angular 8 CLI. There’s so much more that we even considered splitting this blog into two, but we couldn’t wait to tell you about all the goodness right now, so do read on for all of it!

Live Preview 2.0 with As-You-Type Previewing

The new Live Preview browser pane will display an immediate preview of the application under development, conveniently placed right next to the code you are editing. When working with simple web projects, or web artifacts often hosted on Java EE servers, CodeMix includes an extra mode for Live Preview that gives as-you-type previewing of changes. This feature is superb when prototyping a new app or working through some tricky CSS changes. As you move around the source, CodeMix can even highlight where a given CSS rule is used on the page.



For more details, please read our Live Preview documentation.

Angular

Our Angular support just keeps getting better!

Libraries and Workspaces

CodeMix now supports the creation of Angular workspaces which can contain Applications and Libraries within. Look for the new options in our Angular project wizard and check out our Angular documentation for more details. We also support the Angular 8 CLI that was recently released.

Key Fixes & Enhancements

  • When starting an Angular application, if the specified port (typically 4200) is in use, we’ll attempt to use another port.
  • If you had an error in your application, the launch would seem to get stuck at 73% for no reason. Please update to the latest version of the angular-ide module to get past this issue: npm i angular-ide@next

Editing

We’ve delivered on a popular request from users, Code Folding support, making it easier to work with more complex pieces of source code. Hover over the (+) icon to see collapsed sections of code. Not only that, indentation guides help you see your indentation levels at a glance.

You can enable or disable code folding at Preferences > CodeMix > Editors > Folding.

The breadcrumb toolbar in DevStyle has always been popular, so we’ve created a new in-editor breadcrumb toolbar that will be displayed in all CodeMix editors. This breadcrumb toolbar goes deeper than the file level, displaying structural elements of your source too.

You can configure the settings for the breadcrumb, indent, etc. at Preferences > CodeMix > Editors > Layout.

If you have multiple formatters configured for a given file type, you can easily choose the formatter or change the default using commands.

Markdown

The Live Preview feature mentioned earlier will show you a preview of your Markdown file too. Another nice change is that the Markdown editor now has word-wrap enabled by default, something you will no doubt find convenient when editing markdown files.

Debugging

When we first released CodeMix, we delivered a debugger that could debug just about anything, though a few debug capabilities were not completely integrated. As we’ve seen interest in the debugger grow, we’ve taken another pass at it, to make it more capable, and easier to use.

  • You can change values in the Variables view
  • Variables can be inspected inline, and moved to the Expressions view
  • Breakpoints can be disabled, and you can skip all breakpoints using the corresponding action
  • When launching an application, the launch correctly displays progress in the Progress view, and can be terminated if desired
  • Compound launches (a single launch that starts more than one process) now work as expected

Preferences

We’ve made changes to the preference and property tree structures, so that the preferences you are interested in are much easier to find. Keyword based filtering of pages now works better too.

A special note that indentation preferences (tabs vs spaces, tab size) will now be loaded from preferences that are shared with Eclipse, on the General > Editors > Text Editors preference page. The same goes for the auto-save enablement and delay settings, which are now loaded from Preferences > General > Editors > Autosave.

We found that there were too many issues that resulted from requiring these preferences to be separately set for CodeMix editors.

Servers View

In addition to Angular applications, the servers view will now detect most applications with an NPM “serve” configuration, and display them under a Web Application node. You can now start and stop multiple apps from here easily.

Note: Angular applications will display here too, there is no longer an Angular CLI node.

Terminal+

You can now set environment variables for your terminal sessions globally and/or on a per-project basis, as well as commands that will be executed at the start of a Terminal+ session.

Want to try this yourself? Try adding the following to your Initial commands list, and observe the output when you next start a Terminal+ session:
echo Q29kZU1peCBpcyBBV0VTT01FIQo= | base64 --decode

There were several rendering bugs that afflicted the Terminal+, like issues with resizing, lines of text being cropped, or the console blanking out entirely – we’re happy to say these have all been addressed. If you’ve been using Ctrl/Shift+Insert to copy and paste text in the terminal, these keybindings have now been restored.

Core Changes

We have now added the advanced Angular tooling that was part of our Angular IDE packages to CodeMix Essentials. So if you’ve installed CodeMix from the marketplace or the CodeMix Essentials group from our update site, you will now have access to additional Angular tooling, like advanced project and element wizards, as well as CodeLive support to help you navigate through components in a running Angular application. For more details on our Angular specific features, please check our learning center.

CodeMix has now been updated to version 1.33.1 of the Code OSS engine, which brings with it more features, fixes, and the ability to install more recent versions of Code extensions. We’ve made fixes to the stability of the engine install and update process, so updating to newer CodeMix versions or simply laying down new installations is now a far more robust experience. This engine also adds support for TypeScript 3.4.

We’ve made fixes to CodeMix to ensure it works just fine with the upcoming Eclipse 2019-06 release, so you can update without worrying about compatibility issues.

If you’ve had a hard time installing CodeMix into MyEclipse, this release has dependency issues sorted, so there are no conflicts when installing into recent versions of MyEclipse. If you want to uninstall it, use Help > CodeMix > Uninstall CodeMix – this restores the MyEclipse versions of the tooling that CodeMix replaces, like the Angular, JavaScript, etc.

Miscellaneous Key Fixes & Enhancements

  • No matter the perspective, the New context menu will display relevant actions, making it much easier to create resources you need for a specific project type. This is much faster than using the File > New wizard.
  • Several users have experienced issues typing Korean characters into our editors. This has been fixed generically, so character sets will work fine as well.
  • If you bound “Delete next” to a key, this binding will now work as expected.
  • In some cases, it was impossible to enable Code Mining, this was caused by a preference storage issue which is now fixed.
  • On Linux, you may have been asked to activate CodeMix excessively, this should no longer be the case.
  • In PHP editors, the outline view and quick outline will now display symbols as expected, instead of an empty structure.

We hope you enjoyed this beefy update to your favourite IDE! If you have a few minutes, check out our new Welcome video. It highlights the most popular CodeMix features, and you’ll get to see some of the recent updates in action. Please let us know what you think via Twitter or through the CodeMix forums.