{"id":4493,"date":"2022-03-02T08:12:01","date_gmt":"2022-03-02T16:12:01","guid":{"rendered":"https:\/\/coderpad.io\/?p=4493"},"modified":"2023-05-03T07:16:39","modified_gmt":"2023-05-03T14:16:39","slug":"introducing-coderpad-monaco","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/product-updates\/introducing-coderpad-monaco\/","title":{"rendered":"Introducing CoderPad Monaco, A Better Code Editor Experience"},"content":{"rendered":"<p>Developers are picky about their code editors. Everyone has a certain set of expectations around what they want their IDE to do.<\/p>\n\n<p>At CoderPad, we want to make sure that the interview experience is as smooth as possible, no matter which editor you use. Candidates should be able to perform at their best without distraction from an unfamiliar editor, just as they would when on the job. Interviewers likewise want to provide an excellent developer candidate experience.&nbsp;<\/p>\n\n<p>We\u2019ve always invested heavily in our code editor, and built features engineers expect to find in their IDE like syntax highlighting, autocomplete, auto-closing brackets, shortcuts, and more. But we wanted the CoderPad IDE to behave even more like your own. Introducing: Monaco.&nbsp;<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d7c841d8.png\" alt=\"\"\/><figcaption>Our new editor is powered by Monaco, which provides a much better IDE experience.<\/figcaption><\/figure>\n\n\n<p>Monaco is the code editor that powers Microsoft\u2019s Visual Studio Code (VSCode), which is by far the most popular IDE choice. Now, it powers our editor too. That means new functionality and a better experience for our users.&nbsp;<\/p>\n\n<blockquote class=\"wp-block-quote\"><p>For more info on the implementation details of this challenging project, check out our <a href=\"https:\/\/coderpad.io\/blog\/development\/developer-diaries-how-we-built-coderpad-monaco-ide\/\" target=\"_blank\" rel=\"noreferrer noopener\">behind-the-scenes blog post here.<\/a><\/p><\/blockquote>\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-green      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Ready to start interviewing?<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"\/sales\/\" class=\"button  js-cta--get-a-demo\"  data-ga-category=\"CTA\" data-ga-label=\"Ready to start interviewing?|Get a demo\">Get a demo<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"146\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/illustration-of-two-people-chatting-in-app-windows.png\" class=\"attachment-large size-large\" alt=\"\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n<h2 class=\"wp-block-heading\">CoderPad&#8217;s new and improved code editor experience<\/h2>\n\n<p>We\u2019ve enhanced the following features in our code editor so you can now enjoy the same seamless experience in our IDE that you are used to with VSCode.<\/p>\n\n<h3 class=\"wp-block-heading\">Syntax Highlighting<\/h3>\n\n<p>In our updated syntax highlighting, we do a better job of highlighting library APIs, function parameters, and more, thanks to our new ability to leverage Monaco.<\/p>\n\n<p>That extra bit of time saved reading and analyzing your code is particularly crucial in code interviews, where time is everything.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d7edecb8.png\" alt=\"\"\/><figcaption>Our new syntax highlighting handles classes, methods, and many other items much more clearly now.<\/figcaption><\/figure>\n\n\n<p>For example, notice how <code>ReactDOM<\/code> is recognized as a class, alongside <code>document<\/code> being recognized as a global variable.<\/p>\n\n<h3 class=\"wp-block-heading\">Error Display<\/h3>\n\n<p>While syntax highlighting can help show logic errors at a glance, nothing beats the little red squiggly lines when you\u2019ve made syntax or type errors. After all, if we can implement them in Word for spelling mistakes, why not for syntax mistakes in programming?<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d802224f.png\" alt=\"\"\/><figcaption>In this example, TypeScript is warning us that a class constructor only expects one argument, but two were passed.<\/figcaption><\/figure>\n\n\n\n<p>This one introduced a particularly difficult engineering challenge to implement properly \u2013 <a href=\"https:\/\/coderpad.io\/blog\/development\/developer-diaries-how-we-built-coderpad-monaco-ide\/\" target=\"_blank\" rel=\"noreferrer noopener\">read more about that here.<\/a><\/p>\n\n\n<h3 class=\"wp-block-heading\">Code Collapsing<\/h3>\n\n<p>When working with large codebases, it can be challenging to know where a block of code starts and ends. Our editor now supports \u201ccode collapsing\u201d.<\/p>\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/collapse_code.mp4\"><\/video><\/figure>\n\n\n<p>This not only allows you to find the start and end of a bit of code, but it can also help you focus on one particular aspect of code that isn\u2019t collapsed.<\/p>\n\n<h3 class=\"wp-block-heading\">Enhanced Search &amp; Replace<\/h3>\n\n<p>Likewise, when working with larger codebases, the ability to quickly search through code is important for navigating.<br><\/p>\n\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621f9751e6137.png\" width=\"399\" height=\"209\"><\/p>\n\n<p>Not only should a good search support basic text searching, but it should handle things like regex as well.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d829b458.png\" alt=\"\"\/><figcaption>We support all of the search and replace suggestions as VSCode, including \u201creplace all\u201d.<\/figcaption><\/figure>\n\n\n<p>You can even combine this with replacing. If your regex includes a capture group, you can then reference it in your replace to make quick work of specific refactors.<\/p>\n\n<h3 class=\"wp-block-heading\">Refactoring Symbols<\/h3>\n\n\n<p>While search and replace <strong>can<\/strong> be a useful tool to do refactors, when using it to rename a symbol, it will often not realize the difference between a variable called \u201chello\u201d and one called \u201chelloThere\u201d.<\/p>\n\n\n<p>To solve this, an IDE should be able to quickly rename a symbol and do other smaller refactors on your behalf. Like this:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d83261b7.png\" alt=\"\"\/><figcaption>You can \u201cRename Symbol\u201d using F2.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d83dd1c7.png\" alt=\"\"\/><figcaption>This brings up an input to rename the symbol.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\">Command Palette<\/h3>\n\n<p>All of these features are clearly useful for development, but how do you discover them all?<br><br>This is where the \u201cCommand Palette\u201d comes into play. Press &lt;kbd&gt;F1&lt;\/kbd&gt; and it will bring up a list of actions you\u2019re able to take in our IDE.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d846d813.png\" alt=\"\"\/><figcaption>The command palette comes with lots of new functionality, like keyboard cursor management.<\/figcaption><\/figure>\n\n\n<h2 class=\"wp-block-heading\">The best in-browser IDE for interviewing<\/h2>\n\n<p>Monaco enables a whole host of new features that help drive the developer experience within a pad. While we touched on some new features today, it\u2019s worth mentioning that we still continue to support awesome features like VIM &amp; Emacs modes, keyboard shortcuts, and more. We\u2019ve also improved the micro-experience of the editor \u2013 the responsiveness of typing, to start.<\/p>\n\n<p>We hope you and your candidates will love coding in the new CoderPad Monaco editor!<\/p>","protected":false},"excerpt":{"rendered":"<p>We updated our code editor with the engine that powers Microsoft&#8217;s VSCode&#8211;Monaco&#8211;to bring you a better developer experience.<\/p>\n","protected":false},"author":1,"featured_media":4509,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[13,7],"tags":[],"persona":[27,29],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-4493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","category-announcements"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/4493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=4493"}],"version-history":[{"count":15,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/4493\/revisions"}],"predecessor-version":[{"id":8069,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/4493\/revisions\/8069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/4509"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=4493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=4493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=4493"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=4493"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=4493"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=4493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}