--- title: "JS debugging now built in to VS Code" publication: "JavaScript Weekly" issue: 548 published_at: "2021-07-23" canonical_url: "https://javascriptweekly.com/issues/548" --- Plus stealing colors, working with money, and keeping monorepos simple. | #​548 — July 23, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/548) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/zs8h0einaoeekgohd1im.jpg)](https://www.jetbrains.com/lp/devecosystem-2021/javascript/) [JetBrains' 2021 Developer Ecosystem Survey Results](https://www.jetbrains.com/lp/devecosystem-2021/) — Over 30,000 developers took the [_State of Developer Ecosystem 2021_](https://www.jetbrains.com/lp/devecosystem-2021/) survey, with 70% being JavaScript users. You can find the [JavaScript-specific results here.](https://www.jetbrains.com/lp/devecosystem-2021/javascript/) Some interesting stats came of this: - React is regularly used by 49% of respondents, with Vue.js at 43%. - Go, TypeScript, and Python are the most common other languages JavaScript developers [plan to learn soon](https://www.jetbrains.com/lp/devecosystem-2021/#Do-you-plan-to-adopt--migrate-to-other-languages-in-the-next--months-If-so-to-which-ones). - 42% claim to not to write unit tests regularly. - Home working is, unsurprisingly, suddenly popular with 83% of developers WFH compared to 31% pre-pandemic. JetBrains 💡 If you like this sort of thing, last year's [State of JS results](https://2020.stateofjs.com/en-US/) may also be of interest. [Easier Browser Debugging with Developer Tools Integration in VS Code](https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/) — If you’re a VS Code user, you no longer _have_ to use the Chrome Debugger or Edge Debugging extension as JavaScript debugging is now _built in_ to the popular editor. Christian Heilmann has [more on this here](https://christianheilmann.com/2021/07/22/debugging-javascript-dom-css-and-logging-console-without-leaving-visual-studio-code/). Microsoft Edge Blog [![\](https://copm.s3.amazonaws.com/3c9d68db.png)](https://www.datadoghq.com/dg/real-user-monitoring/ts/frontend-performance-ts/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-JavaScriptWeeklyPTshirt) [Locate and Resolve JavaScript Errors Instantly with Datadog](https://www.datadoghq.com/dg/real-user-monitoring/ts/frontend-performance-ts/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-JavaScriptWeeklyPTshirt) — Troubleshoot user-facing incidents and resolve frontend JavaScript errors in context with the ability to correlate error logs with individual user sessions with one click. Try it yourself with a free Datadog trial. Datadog sponsor [Plate 1.0: A Plugin Framework for Building Rich Text Editors with Slate](https://plate.udecode.io/) — [Slate](https://github.com/ianstormtaylor/slate) is a framework for building rich text editor controls, and Plate abstracts things one level higher offering a plugin system for adding your own functionality. Look at the big demo on the homepage to see the benefits. [GitHub repo](https://github.com/udecode/plate). Taylor, Beyens and Murray [Node-RED 2.0 Released](https://nodered.org/blog/2021/07/20/version-2-0-released) — [Node-RED](https://nodered.org/) is a now very mature ‘low-code’ Node.js-based programming environment, particularly aimed at connecting together services or IoT devices. The 2.0 release focuses on upgrading dependencies, dropping old Node version support, and an (optional) improved text editor. OpenJS Foundation **QUICK BITS:** - It's not of much use, but technically [a URL can be valid JavaScript.](https://george.mand.is/2021/06/idle-javascript-observations/) - After years in beta, Fastly has launched its [_Compute@Edge_ serverless edge compute platform](https://www.fastly.com/press/press-releases/fastly-launches-new-era-of-highly-secure-serverless-javascript-with-zero). - A beautiful [example of photorealistic glass](https://domenicobrz.github.io/webgl/projects/SSRefractionDepthPeeling/) in the browser using Three.js. **RELEASES:** [Hyper 3.1](https://hyper.is/) – JS-powered terminal app. [RxDB 10.0](https://github.com/pubkey/rxdb/blob/master/orga/releases/10.0.0.md) – Realtime database for JavaScript apps. [AdminJS 5.1](https://github.com/SoftwareBrothers/adminjs) – Automatic admin interface for Node apps. [GoldenLayout 2.3](https://golden-layout.com/) – Multi-screen layout manager for webapps. [flv.js 1.6](https://github.com/bilibili/flv.js) – HTML5 FLV Player. 💻 Jobs [Love Writing Code? Now Build Products as a Product Manager](https://apply.workable.com/signalwire/j/C21C9B7A98/) — We are hiring expert devs who want to become product managers. Help build products that are executed millions of times a day. SignalWire [Senior Full-Stack Software Engineer (USA)](https://grnh.se/f21614502us) — Ready to do your best work in a team that truly supports you? Join a culture that values autonomy, freedom, and collaboration. REAKTOR [Find a Job Through Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 📖 Articles, Opinions & Tutorials [Simple Monorepos via npm Workspaces and TypeScript Project References](https://2ality.com/2021/07/simple-monorepos.html) — How to set up a simple monorepo for two npm packages using just what comes with `npm` and TypeScript. Dr. Axel Rauschmayer ▶[Code _Zelda_ in JavaScript with Kaboom.js](https://www.youtube.com/watch?v=XX93O4ZVUZI) — Ania is back with another fun walkthrough. For your hour this time you get to build the bare bones of a NES-era Zelda game. Ania Kubów [5 Reasons Not to Write Your JavaScript Data Grid from Scratch](https://www.telerik.com/blogs/5-reasons-not-to-write-your-javascript-data-grid-from-scratch?utm_medium=cpm&utm_source=jsweekly&utm_campaign=kendo-ui-angular-blog-never-write-a-grid&utm_content=sponsored-link) — Data grids are essential for every business app. Before you decide to roll your own, learn about these common pitfalls. Progress Kendo UI for Angular sponsor [Trackball Rotation using Quaternions](https://www.xarg.org/2021/07/trackball-rotation-using-quaternions/) — How can you implement a 3D ‘trackball’ that you can control with a 2D interface like a typical trackpad? With [Trackball.js](https://github.com/infusion/Trackball.js) is how.. but you can attempt to understand the math in this article if you wish. Robert Eisele [`then(f,f)` vs `then(f).catch(f)`](https://dmitripavlutin.com/javascript-promises-then-vs-then-catch/) — A quick look at the difference between two approaches with promises. Dmitri Pavlutin [Building a 'Typewriter Animation' That Handles Anything You Throw at It](https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/) — A thorough dig into what’s involved in creating an interesting frontend effect with JavaScript. The [end result](https://codepen.io/seekertruth/pen/PopVBOm) looks neat. Murtuzaali Surti [[Free Workshop\] Building an IoT application with InfluxDB](https://www.influxdata.com/resources/build-an-iot-app-with-influxdb-2/?utm_source=vendor&utm_medium=referral&utm_campaign=2021-07-23_spnsr-nl_iot-center-workshop_global&utm_content=jsweekly) — Learn how to develop a JavaScript-enabled time-series-based application using Kafka queues, RabbitMQ and InfluxDB Cloud. InfluxData sponsor [Creating a Typography Motion Trail Effect with Three.js](https://tympanus.net/codrops/2021/07/21/creating-a-typography-motion-trail-effect-with-three-js/) George Nikolov [Three Insights I Gained While Researching Vue.js Accessibility](https://www.smashingmagazine.com/2021/07/three-insights-vuejs-accessibility/) Marcus Herrmann [Building a ‘Table Of Contents’ with Active Indicator using Intersection Observers](https://benfrain.com/building-a-table-of-contents-with-active-indicator-using-javascript-intersection-observers/) Ben Frain 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/l0b04qnkrwm69rycwpdo.jpg)](https://v2.dinerojs.com/docs) [Dinero.js: A Library for Working with Monetary Values](https://v2.dinerojs.com/docs) — Express monetary values and perform mutations, conversions, comparisons, handle formatting, and generally make money manipulation easier. [GitHub repo](https://github.com/dinerojs/dinero.js). Sarah Dayan [Abracadabra: JS and TS Refactoring Tool for VS Code](https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra#abracadabra) — While VS Code supports some refactoring techniques out of the box, Abracadabra magics up [many more](https://github.com/nicoespeon/abracadabra/blob/master/REFACTORINGS.md) including numerous conditional logic changes, inlining, and syntax conversions. It can also suggest ‘quick fixes’ - refactorings that make sense in the current context. Visual Studio Marketplace [Color: A Color Conversion and Manipulation Library](https://github.com/Qix-/color) — Immutable color conversion and manipulation with support for CSS color strings. Qix [Clubhouse.io - We Put the Agile in Agile and the 'Can' in Kanban](https://clubhouse.io/?utm_source=cooperJSWeekly&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=brief) Clubhouse.io sponsor [Tangram: An Automated Machine Learning Framework](https://www.tangram.xyz/) — It’s not solely for Ruby – indeed, it’s written in Rust – but you can train a model from a CSV file and then make ‘predictions’ from JavaScript (or Ruby, or Python) code. [GitHub repo](https://github.com/tangramxyz/tangram). Tangram [Bulletproof React: An Architecture for React Apps](https://github.com/alan2207/bulletproof-react) — Using a group chat app as the case study, the author touches on every significant aspect of building and deploying a React application which will make it “bulletproof” and therefore production ready. Note, however: _"This is not supposed to be a template or a framework. It is an opinionated guide that shows how to do some things in a certain way."_ Alan Alickovic [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ymqyuzklwgbyly3yy6dz.jpg)](https://lokeshdhakar.com/projects/color-thief/) [Color Thief: Grab Color Palettes from Images](https://lokeshdhakar.com/projects/color-thief/) — Given an image, this uses `canvas` to return a list of the dominant colors. Lokesh Dhakar [FZF for JavaScript: Fuzzy Finding for the Browser](https://github.com/ajitid/fzf-for-js) — [fzf](https://github.com/junegunn/fzf) is a tool written in Go for ‘fuzzy finding’ files but here the idea has been adapted to JavaScript and the Web so it can be used for similar fuzzy finding in webapps. ajit [veux-persistedstate: Persist and Rehydrate Your Vuex State Between Page Reloads](https://github.com/robinvdvleuten/vuex-persistedstate) Robin van der Vleuten Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom