--- title: "How to create your own JSON parser" publication: "JavaScript Weekly" issue: 467 published_at: "2019-12-13" canonical_url: "https://javascriptweekly.com/issues/467" --- Plus a tool to slice and dice JSON, Preact 10.1, and Dr. Axel's new JavaScript book. #467 — December 13, 2019 [Read on the Web](https://javascriptweekly.com/issues/467) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lhdfkw00pph5x95njlip.jpg)](https://github.com/antonmedv/fx) [Fx 16.0: A Command-Line JSON Processing Tool](https://github.com/antonmedv/fx) — If you’ve got some files full of JSON that you want to process, Fx will slice and dice it however you want, including using JavaScript one-liners to add a bit of logic to the process. Anton Medvedev [Preact 10.1: A Fast 3kB React Alternative with the Same API](https://github.com/preactjs/preact/releases) — Preact is an interesting project that often sees use in places where speed and size are of the absolute essence (Uber used it until they built their own in-house framework). New in 10.1 is support for a devtools extension and a `SuspenseList` component. [GitHub repo](https://github.com/preactjs/preact). Preact [![\](https://copm.s3.amazonaws.com/977ac8d4.png)](https://circleci.com/blog/circleci-config-teardown-how-we-write-our-circleci-config-at-circleci/) [CircleCI Config Teardown: How We Write Our Config at CircleCI](https://circleci.com/blog/circleci-config-teardown-how-we-write-our-circleci-config-at-circleci/) — Find out how we use YAML configuration to power CircleCI - and which open source orbs (shareable packages of config) we use to speed up our pipeline. CircleCI sponsor [20 Ways to Become a Better Node Developer in 2020](https://t.co/lkCEh4D24k) — We’re rapidly coming up on the end of the year (indeed, the next issue is our last this year) so is it time to think about New Year’s resolutions already? Yoni Goldberg [Dr Axel's 'Deep JavaScript' Now Available](https://exploringjs.com/deep-js/) — The latest book from JavaScript guru Dr. Axel (of [Exploring ES6](https://exploringjs.com/es6/) fame) is now out. It costs money, but you can read [a whole 50% of it online](https://exploringjs.com/deep-js/toc.html) (or [grab a PDF direct](https://exploringjs.com/deep-js/downloads/deep-js-preview-book.pdf)). Dr. Axel Rauschmayer [Creating a JSON Parser with JavaScript](https://lihautan.com/json-parser-with-javascript/) — Sure, you could just use `JSON.parse` but where’s the challenge in _that_? This is a neat step-by-step guide on implementing a JSON parser of your own. Tan Li Hau **Quick bytes:** - Love SICP? [A JavaScript adaption](https://sicp.comp.nus.edu.sg/announcement.html) has been released. - Electron, the hugely popular GitHub-founded toolkit for building desktop apps on Web technologies, has [joined the OpenJS Foundation.](https://openjsf.org/blog/2019/12/11/electron-joins-the-openjs-foundation/) - Ember user? They're doing a [31 days of Ember addons series](https://blog.emberjs.com/2019/12/01/countdown-to-the-new-year-ember-sortable.html) on their official blog. 💻 Jobs [Software Engineers, Frontend at Fictiv (San Francisco)](https://boards.greenhouse.io/fictiv/jobs/4488503002) — We bring a user friendly experience to manufacturing, making it easy to turn designs into real products. Use the latest tech and JS to iterate quickly, ensuring a rapid feedback loop between us and our customers. Fictiv [Senior Front-End Software Engineer (Vue, Nuxt, Apollo)](https://grnh.se/cf56e5291) — Join our distributed Front-End functional team in our quest to make doctors more effective using Vue, Nuxt, Apollo and Rails. Doximity [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) — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers. Vettery 📘 Articles & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1576246863/rlv89iikozqdnmluyufl.png)](https://alain.xyz/blog/raw-webgl) [Raw WebGL: An Illustrated Guide to Starting with WebGL](https://alain.xyz/blog/raw-webgl) — A well presented tutorial on getting started with WebGL, what key data structures you need, and what each of the main elements (of which there are quite a few when it comes to WebGL!) are and do. Alain Galvan [Relatively Formatting Times with `Intl.RelativeTimeFormat`](https://www.bram.us/2019/12/09/esnext-relatively-format-time-with-intl-relativetimeformat/) — For example: `new Intl.RelativeTimeFormat('en').format(-1, 'day')` returns the string `"1 day ago"`. It’s going to be part of ES2020 but you can use it in Chrome and Firefox already. Bram van Damme [Build a Customizable Angular Data Grid in Minutes](https://www.grapecity.com/blogs/how-to-build-an-angular-data-grid-in-minutes?utm_source=JavaScriptWeekly&utm_medium=Wijmo-12-13-2019-blogplacement&utm_campaign=CooperPress-Fall-2019) — Create an Angular data grid in under 5 minutes. You'll also find resources for building in Vue, React, and plain JavaScript. Wijmo by GrapeCity sponsor [JavaScript Component-Level CPU Costs](https://calendar.perfplanet.com/2019/javascript-component-level-cpu-costs/) — Did you know that in Chrome 78+ on Linux you can actually track how many CPU instructions are used in the rendering of your components? Interesting, though advanced, performance monitoring stuff here. Stoyan Stefanov ▶[Angular Meetup Online: Two Angular Talks](https://www.youtube.com/watch?v=p5Pzyja8wSw) — Ryan Chenkie and Kara Erickson both gave twenty minute talks on the latest in the Angular world. This Dot Media [How to Write Correctly Typed React Components with TypeScript](https://blog.logrocket.com/correctly-typed-react-components-with-typescript/) — React and TypeScript make a powerful pair, but if you’re just starting out, you’ll need to understand how to write correctly typed components. Piero Borrelli [Why _Does_ JavaScript Have `-0`?](https://medium.com/javascript-in-plain-english/why-does-javascript-have-0-9b6e1965a075) — Yes, there’s `-0` and normal `0`. They’re equal but are different objects nonetheless. Thomas Barrasso [Inversion of Control](https://kentcdodds.com/blog/inversion-of-control) — A simple principle that can drastically improve your reusable code. Kent C Dodds [Realtime ≠ Request-Response: So, Why’s Google Polling Like It’s the 90s?](https://www.ably.io/blog/google-polling-like-its-the-90s/?utm_medium=email&utm_source=javascript-weekly&utm_campaign=cooperpress) Ably sponsor [Reasons To Use Aurelia in 2020](https://ilikekillnerds.com/2019/12/reasons-to-use-aurelia-in-2020/) — [Aurelia](https://aurelia.io/) is an interesting framework that deserves a look in a sea of competing options. Dwayne Charrington [The `npm`, Yarn and Bower Timeline](https://javascript.christmas/2019/10) — The `npm` vs `yarn` story is a good demonstration of ‘competing’ tools pushing the other along. Charlie Midtlyng [How Optional Chaining Helps to Avoid _"`undefined` is not a function"_ Exceptions](https://www.stefanjudis.com/today-i-learned/optional-chaining-helps-to-avoid-undefined-is-not-a-function-exceptions/) Stefan Judis 🔧 Code & Tools [OpenLayers: High Performance Frontend Mapping Library](https://openlayers.org/) — A system for putting dynamic maps onto your pages that can render map tiles pulled from various sources, vector data layers, markers, etc. Supports both Canvas and WebGL as appropriate. [Examples.](https://openlayers.org/en/latest/examples/) OpenLayers [Visual Studio Code November 2019 Released](https://code.visualstudio.com/updates/v1_41) — VS Code is perhaps the most popular editor in the JavaScript world and this release has a lot going for it, not least a new experimental WebGL renderer you can use to make the integrated terminal a lot faster. Just to show no favoritism though, [Vim 8.2](https://www.vim.org/vim-8.2-released.php) just came out too ;-) Microsoft [New Time-Travel Debugger for JavaScript and TypeScript](https://wallabyjs.com/docs/intro/time-travel-debugger.html?utm_source=javascript&utm_medium=javascript&utm_campaign=javascript&utm_content=javascript) — Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more. Wallaby.js sponsor [simpleParallax: A Simple Way to Create Parallax Effects](https://simpleparallax.com/) — A straightforward library to add parallax-style animations to any image on your page. [Not _always_ a good idea UX-wise](https://www.webaxe.org/vestibular-issues-parallax-design/), but the examples and code samples here certainly sell it well. Geoffrey Signorato [5 Cloud IDEs for JavaScript Developers](https://blog.bitsrc.io/5-top-cloud-ides-for-javascript-developers-62ee672c6e88) — I’d add [Repl.it](https://repl.it/), [CodeSandbox](https://codesandbox.io/), and [Glitch](https://glitch.com/) to this list too. Shaumik Daityari [npkill: Find and Remove Old or Large `node_modules` Folders](https://github.com/voidcosmos/npkill) Estefanía García Gallardo and Juan Torres Gómez [react-tabs: An Accessible and Easy Tab Component for React](https://github.com/reactjs/react-tabs) React Community ⚡️ Quick Releases - [Highcharts 8.0](https://github.com/highcharts/highcharts) — The charting framework. - [Geolib 3.2](https://github.com/manuelbieh/geolib) — Geospatial functions library. - [npm 6.13.4](https://blog.npmjs.org/post/189613288975/release-6134) — The popular package manager. - [react-beautiful-dnd 12.2](https://github.com/atlassian/react-beautiful-dnd/releases/tag/v12.2.0) — Powerful drag and drop for lists in React. 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. Bewfoupgdpef. [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