--- title: "Angular 10, data grids, randomness, and checking some boxes" publication: "JavaScript Weekly" issue: 494 published_at: "2020-06-26" canonical_url: "https://javascriptweekly.com/issues/494" --- Plus more JavaScript links, tutorials, and projects. #494 — June 26, 2020 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/494) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1593182467/jhfg06ft4s2xujbimpfi.jpg)](https://lea.verou.me/2020/06/refactoring-optional-chaining-into-a-large-codebase-lessons-learned/) [Lessons Learned Refactoring Optional Chaining Into a Large Codebase](https://lea.verou.me/2020/06/refactoring-optional-chaining-into-a-large-codebase-lessons-learned/) — Lea Verou, creator of [Mavo](https://mavo.io/), decided to refactor Mavo to use [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) (`?.`) and here’s some of what she discovered along the way. (As an aside, Lea was the subject of [a neat 10 minute programming documentary](https://www.youtube.com/watch?v=gJD0aws8jeg) recently – worth a watch!) Lea Verou [A Little Bit of Plain JavaScript Can Do A Lot](https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/) — For anyone more than happy to dive in and write JavaScript without dragging in an entire framework and tooling to manage it, there will be no surprises here, but this is a nice reminder otherwise. Do you always need a 'framework'? No. Julia Evans [![\](https://copm.s3.amazonaws.com/71a0a4ee.png)](https://www.grapecity.com/blogs/create-a-voting-app-with-firestore-and-wijmo?utm_source=CooperPress%20Placement&utm_medium=Dynamic&utm_campaign=JS_Weekly_06/26/2020) [Creating a Voting App with Firestore and Wijmo](https://www.grapecity.com/blogs/create-a-voting-app-with-firestore-and-wijmo?utm_source=CooperPress%20Placement&utm_medium=Dynamic&utm_campaign=JS_Weekly_06/26/2020) — Learn how to build a realtime voting app quickly and easily with the Firestore database and Wijmo components. The app uses OAuth for authentication and allows users to submit and vote for ideas. Wijmo by GrapeCity sponsor [Angular 10 Released](https://blog.angular.io/version-10-of-angular-now-available-78960babd41) — A major release for the popular Google-led framework, though smaller in scope than usual as [Angular 9](https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3) only came out in February ;-) 10 gains a new date range picker, optional stricter settings, and an upgrade to TypeScript 3.9. Stephen Fluin (Google) [What's Coming in TypeScript 4?](https://httptoolkit.tech/blog/whats-coming-in-typescript-4) — The first beta of TypeScript 4 is due any moment with a final release due in August. New bits and pieces include variadic tuple types, labelled tuples, short-cut assignment operators (e.g. `||=`) and more. Tim Perry **⚡️ Quick bytes:** - Chrome 85's DevTools have gained [better support for working with styles](https://developers.google.com/web/updates/2020/06/devtools) created by CSSOM APIs (such as by CSS-in-JS frameworks). There's also syntax autocompletion for optional chaining and highlighting for private fields. - There's nothing to see just yet, but [NativeScript is coming to Ionic.](https://nativescript.org/ionic/) - The creator of AlpineJS has written about [how he's passed $100K/yr in income](https://calebporzio.com/i-just-hit-dollar-100000yr-on-github-sponsors-heres-how-i-did-it) using GitHub Sponsors. - Did you know there's [a Slack theme for VS Code?](https://github.com/slack-theme/visual-studio-code) 😆 - ▶️ The JS Party podcast crew discusses [how their use of JavaScript syntax evolves](https://changelog.com/jsparty/131) (or not) over time. - [engineeringblogs.xyz](https://engineeringblogs.xyz/) is a new aggregator site (by us!) that brings together what 507 (so far) product and software engineering blogs are talking about. Worth a skim. 💻 Jobs [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=js) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere. X-Team [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, Opinions and Stories [ECMAScript Proposal: Private Static Methods and Accessors in Classes](https://2ality.com/2020/06/private-static-methods-accessors-in-classes.html) — Dr. Axel takes a look at another forthcoming language feature (in [this case](https://github.com/tc39/proposal-static-class-features/) being at stage 3 and already supported by Babel and elsewhere). Dr. Axel Rauschmayer [npm v7 Series: Why Keep `package-lock.json`?](https://blog.npmjs.org/post/621733939456933888/npm-v7-series-why-keep-package-lockjson) — If npm v7 is going to support `yarn.lock` files, then why keep `package-lock.json` around as well? Isaac goes into some depth as to how `yarn.lock` works and why it doesn’t quite suit every npm use case. Isaac Z. Schlueter [How to Dynamically Get All CSS Custom Properties on a Page](https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/) — Some fun DOM and stylesheet wrangling on display here. Tyler Gaw [Stream Chat API & JavaScript SDK for Custom Chat Apps](https://getstream.io/chat/?utm_campaign=2020_06_26_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 [Getting Started with Oak for Building HTTP Services in Deno](https://www.robinwieruch.de/deno-oak) — A comprehensive Oak with Deno tutorial for beginners (which, I guess, we all are when it comes to Deno). Oak is essentially the most popular option for building HTTP-based apps in Deno right now. Robin Wieruch [Understanding Generators in JavaScript](https://www.taniarascia.com/understanding-generators-in-javascript/) — Generator functions can be paused and resumed and yield multiple values over time and were introduced in ES6/ES2015. Tania Rascia [Build a CRUD App with Vue.js, Spring Boot, and Kotlin](https://developer.okta.com/blog/2020/06/26/spring-boot-vue-kotlin) — It’s a fact of life that not _everyone_ is building apps with JavaScript at every level of the stack. Sometimes.. people use Java too 🤫 Andrew Hughes ▶[Creating a Basic Implemention of 'Subway Surfers'](https://www.youtube.com/watch?v=Sz7ugHHlvX4) — No modules, webpack or such-like here.. just exploring the joy of throwing a game mechanic together quickly using rough and ready JavaScript. Love it. Shawn Beaton [Rubber Duck Debugging for JavaScript Developers](http://thecodebarbarian.com/rubber-duck-debugging-for-javascript-developers.html) — When you’re stuck with something, why not talk to a rubber duck? Valeri Karpov 🔧 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ydcg8xz9k9w4ewpxcxdw.jpg)](http://tabulator.info/) [Tabulator 4.7: An Interactive Table and Data Grid Library](http://tabulator.info/) — Supports all major browsers and can be used with Angular, Vue, and React if you wish. [4.7](http://tabulator.info/docs/4.7/release) is a substantial release. Among other things is a new layout mode that resizes the table container to fit the data ([example](http://tabulator.info/examples/4.7?#fittodatatable)). Oli Folkerd [Tragopan: A Minimal Dependency-Free Pan/Zoom Library](https://github.com/team-video/tragopan) — [Try it out here](https://team-video.github.io/tragopan/). Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming. team.video [Builds Run Faster on Buildkite 🏃‍♀️](https://buildkite.com/case-studies/intercom?pk_campaign=js_evidence_rk_062620&pk_source=cp&pk_medium=newsletter) — Build times <5 mins at any scale. Self-hosted agents work with all languages, source control tools & platforms. Buildkite sponsor [React Query 2: Hooks for Fetching, Caching and Updating Async Data](https://github.com/tannerlinsley/react-query/releases/tag/v2.0.0) — _React Query_ is well worth checking out and has extensive documentation and even [its own devtools.](https://github.com/tannerlinsley/react-query#react-query-devtools) [Main repo.](https://github.com/tannerlinsley/react-query) Tanner Linsley [Rando.js: A Helper for Making Randomness Easier](https://github.com/nastyox/Rando.js) — The `rando` function lets you get random integers in a range, floats in a range, pick between multiple items, return a random element from an array, and more. There’s also `randosequence` for a more shuffle-like experience. nastyox [jinabox.js: A Customizable Omnibox for AI Powered Searching](https://github.com/jina-ai/jinabox.js/) — Designed to be used with a [Jina](https://github.com/jina-ai/jina) back-end. It’s all open source, but will take some digging around to understand fully. Jina AI [MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.](https://studio3t.com/download/?utm_source=cooper&utm_medium=newsletter&utm_campaign=JSWeeklyJun26) Studio 3T sponsor [IntersectionObserver Visualizer](https://codepen.io/michellebarker/full/xxwLpRG) — If you’re new to using the IntersectionObserver API, this useful interactive demo might help you comprehend it a little better. michelle barker [Polly.js 5.0: Record, Replay, and Stub HTTP Interactions](https://github.com/Netflix/pollyjs) Netflix [Vest: Effortless Validations Inspired by Testing Frameworks](https://github.com/ealush/vest) — If you’re used to unit testing, the syntax used here will be familiar. Evyatar 👻 Scary Item of the Week [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/rzj4kikphybq9poi8f4l.jpg)](https://www.bryanbraun.com/checkboxland/) [Checkboxland: Render 'Anything' as HTML Checkboxes](https://www.bryanbraun.com/checkboxland/) — This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well! Bryan Braun 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