--- title: "Highlight.js 10, Node 14, and modern React in 20 minutes" publication: "JavaScript Weekly" issue: 485 published_at: "2020-04-24" canonical_url: "https://javascriptweekly.com/issues/485" --- Plus more JavaScript links, tutorials, and projects. #485 — April 24, 2020 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*):[Read on the Web](https://javascriptweekly.com/issues/485) JavaScript Weekly ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1587676063/cha0gtwzsz7qoeqhifiz.jpg) [Introducing Crank.js: A New JSX-Driven Framework](https://crank.js.org/blog/introducing-crank) — A new framework for creating JSX-driven components with functions, promises and generators. If you haven’t got time to read the creator’s lengthy (but well worth reading!) rationale for creating another framework, [check out the GitHub repo](https://github.com/bikeshaving/crank) or jump straight into [a CodeSandbox example.](https://codesandbox.io/s/a-loading-crank-component-pci9d) I hope to see a lot more about this in the near future. Brian Kim [The Cost of JavaScript Frameworks](https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/) — Using data from the [HTTP Archive](https://httparchive.org), Tim explores the performance cost of using various popular frameworks as a starting point. Some good analysis here. Tim Kadlec [![\](https://copm.s3.amazonaws.com/17c2bf4c.png)](https://fusionauth.io/?utm_source=newsletter&utm_medium=email&utm_campaign=cooperpress_2020) [You Hacked the Gibson? Yeah, They Built Their Own Login](https://fusionauth.io/?utm_source=newsletter&utm_medium=email&utm_campaign=cooperpress_2020) — Don't let Crash Override pwn your app. FusionAuth adds secure login, registration and user management to your app in minutes not months. Download our community edition for free. FusionAuth sponsor [Node.js 14 Released](https://medium.com/@nodejs/node-js-version-14-available-now-8170d384567e) — v14 now becomes the current ‘release’ line with it becoming a LTS (Long Term Support) release in October. [Diagnostic reports](https://medium.com/the-node-js-collection/easily-identify-problems-in-node-js-applications-with-diagnostic-report-dc82370d8029) are now a stable feature, it now uses [V8 8.1](https://v8.dev/blog/v8-release-81), there's an experimental [Async Local Storage API](https://nodejs.org/api/async_hooks.html#async_hooks_class_asynclocalstorage), and more. Michael Dawson and Bethany Griggs [Vidact: A Compiler to Convert React-like Apps to Vanilla JS](https://mohebifar.github.io/vidact/) — Compiles pure React-compatible JavaScript (JSX) to vanilla JavaScript with no virtual DOM.. think similar to Svelte, but without introducing a new syntax. A curious idea. Mohamad Mohebifar [Highlight.js 10.0: The Web Syntax Highlighter Library](https://highlightjs.org/) — I always laugh when I see a big release of a popular library and saw we last linked it [5 years ago](https://javascriptweekly.com/issues/221) 😄 Nonetheless, this _is_ [a big release](https://github.com/highlightjs/highlight.js/releases/tag/10.0.0) and Highlight.js continues to be a fantastic library for syntax highlighting code. highlight.js 💻 Jobs [Senior Full-stack Developer (Malmö/Sweden)](https://www.ortelius.com/senior-full-stack-developer/) — Every day is different from the next. Join our upbeat Team and work on exciting, major projects using a modern JavaScript stack. Ortelius AB [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-javascriptweekly&utm_term=tech&utm_content=grouped&utm_campaign=ad-77584) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery 📚 Tutorials ▶[React: The Basics in 20 Minutes](https://www.youtube.com/watch?v=FNnhEBDYBr8) — A well presented, up to date (yep, it covers hooks) tutorial that doesn’t hang around, whether you’re new to React or just want a refresher. Devistry [Creating Web Apps via TypeScript and webpack](https://2ality.com/2020/04/webpack-typescript.html) — The example app doesn’t use any front-end framework, just vanilla DOM APIs. Some knowledge of TypeScript, webpack, and npm are required, but this is a neat way to bring together a bunch of tools. Axel Rauschmayer [What Is The `toJSON()` Function?](http://thecodebarbarian.com/what-is-the-tojson-function-in-javascript.html) — If an object has a `toJSON` function, `JSON.stringify()` calls `toJSON()` and serializes the return value from `toJSON()` instead. Valeri Karpov [A Much Faster Way to Debug Code Than with Breakpoints or console.log](https://wallabyjs.com/docs/intro/time-travel-debugger.html?utm_source=cooperpress&utm_campaign=javascript&utm_content=javascript) — Move forward and backwards through your code to understand what led to a specific bug, view runtime values, edit-and-continue, and more. Wallaby.js sponsor [How Does TypeScript Work? A Bird’s Eye View](https://2ality.com/2020/04/typescript-workflows.html) — Dr. Axel goes into depth on the structure of a typical TypeScript project, what gets compiled, and how can an IDE be used to write TypeScript. Aimed at people who haven’t yet picked TypeScript up. Axel Rauschmayer [10 Lesser Known Angular Features You've Probably Never Used](https://blog.w3radar.com/less-known-angular-features-probably-never-used/) W3Radar [You Might Not Need `switch`](https://www.valentinog.com/blog/switch/) — Using an object of outcomes instead of `switch` suits many use cases, though take care over readability. Valentino Gagliardi 🗓 Upcoming Online Events - [Pick JS](https://pickjs.com/) **(May 8)** — Aimed at intermediate to expert JS developers rather than beginners. - [JavaScript Remote Conf 2020](https://devchat.tv/conferences/javascript-remote-2020/) **(May 14-15)** — Speakers lined up already include Douglas Crockford, Aimee Knight and Christian Heilmann. - [ESNEXT CONF 2020](https://www.esnextconf.com/) **(May 18-22)** — From the Pika folks (of [Snowpack](https://github.com/pikapkg/snowpack) fame). 12 speakers over 5 days so it's a gradual pace. - [ForwardJS](https://forwardjs.com/ottawa/) **(May 26-29)** — A real world event (ForwardJS Ottawa) that has now become a virtual event. - [CascadiaJS 2020](https://2020.cascadiajs.com/cfp) **(September 1-2)** — This upcoming online conference is set to take place in September, and the CFP is open now through May 15. 🔧 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/wvp8ku7u9enljcdczcri.jpg)](https://github.com/maxchehab/phelia) [Phelia: A Reactive Slack Application Framework](https://github.com/maxchehab/phelia) — If you think Slack apps were all about text bots, think again.. you can now create apps [complete with in-app UIs.](https://api.slack.com/surfaces) Phelia brings the React approach to the task. Max Chehab [Marked.js 1.0: A Fast Markdown Parser and Compiler](https://marked.js.org/) — Got Markdown to render? Marked.js to the rescue. While the project is years old, [1.0](https://github.com/markedjs/marked/releases/tag/v1.0.0) has dropped just this week. Here’s [a live demo.](https://marked.js.org/demo/) Christopher Jeffrey [Stream Chat API & JavaScript SDK for Custom Chat Apps](https://getstream.io/chat/?utm_campaign=2020_04_13_javascriptweekly&utm_medium=promoted_newsletter&utm_source=javascriptweeklypromoted) — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure. Stream sponsor [Alpine.js: A Minimal Framework for Composing JS Behavior in Your Markup](https://github.com/alpinejs/alpine/) — We only gave Alpine a brief link when it first dropped but with new versions coming out thick and fast, we think it’s well worth a look. Billed as _“like Tailwind for JavaScript”_, Alpine lets you keep the HTML you know and love and just pepper it with JavaScript as and where appropriate. Alpine.js [enroute: A React Router with a Small Footprint for Modern Browsers](https://github.com/tj/react-enroute) TJ Holowaychuk [Rosetta: A General Purpose Internationalization Library in 292 Bytes](https://github.com/lukeed/rosetta) — Less than 300 bytes, but does have a few dependencies. Aims to be very simple and is targeted at basic string use cases. Luke Edwards [NAB 2020 May Be Canceled, But The Full Bitmovin Experience Is Not](https://bitmovin.com/live-nab?utm_source=cooper-java-brief-link&utm_medium=paid-newsletter&utm_campaign=nab-live-2020) Bitmovin Inc. sponsor [Hotkey 1.4: Trigger an Action on an Element When a 'Hotkey' is Pressed](https://github.com/github/hotkey) — Use Hotkey, set the `data-hotkey` attribute on your elements, and you get keyboard shortcuts. GitHub built and uses it (look for the `data-hotkey` attributes on their pages). GitHub [web-worker: Consistent Web Workers for the Browser and Node](https://github.com/developit/web-worker) — In Node it works as a web-compatible Worker implementation atop `worker_threads`. In the browser it’s an alias for `Worker`. Jason Miller 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