---
title: "React in 33 lines, understanding JS module types, and some GitHub protips"
publication: "JavaScript Weekly"
issue: 483
published_at: "2020-04-10"
canonical_url: "https://javascriptweekly.com/issues/483"
---

Plus more JavaScript links, tutorials, and projects.       

#483 — April 10, 2020 

[Unsubscribe](https://javascriptweekly.com/leave/*|UID|*):[Read on the Web](https://javascriptweekly.com/issues/483)   

🥚 Hi folks! This is a shorter than usual issue as we're taking a half day due to it being Easter Friday here – back to full service next week. If you celebrate Easter, happy Easter. If not, happy Friday and we hope you have a great weekend 😄  

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ktpflayphnevubrzmm3q.jpg)](https://github.blog/2020-04-09-github-protips-tips-tricks-hacks-and-secrets-from-lee-reilly/)  

[Some GitHub Pro-Tips Direct from GitHub](https://github.blog/2020-04-09-github-protips-tips-tricks-hacks-and-secrets-from-lee-reilly/) — Lee Reilly is a developer and marketer at GitHub and has a whole bunch of genuinely useful GitHub power user tips here. Or if you prefer something more JavaScript-flavored, GitHub also just wrote about [how they restructured GitHub's JavaScript SDK](https://github.blog/2020-04-09-from-48k-lines-of-code-to-10-the-story-of-githubs-javascript-sdk/). 

Lee Reilly (GitHub)   

[Some of What's Coming in Vue 3](https://alligator.io/vuejs/whats-coming-in-vue-3/) — A summary of features in the next major release of Vue, still upcoming. There’s also [this video](https://www.youtube.com/watch?v=eQpVcZa8dVQ) from Vue.js Amsterdam 2020 on the same topic. 

Parthiv Mohan   [![\](https://copm.s3.amazonaws.com/5f713930.png)](https://www.datadoghq.com/dg/apm/synthetics/ts-synthetic-monitoring/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-JavascriptWeeklyP) 

[Locate Front-End Issues Like JavaScript or Network Errors Instantly](https://www.datadoghq.com/dg/apm/synthetics/ts-synthetic-monitoring/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-JavascriptWeeklyP) — Get proactively alerted on any client-side issues such as JavaScript and network errors, optimize the load time of your front-end resources, and detect any UI issues that affect critical user journeys. Try it free with Datadog Synthetics. 

Datadog sponsor   

[Svelte: The Framework That 'Puts Web Pages on a Diet'](https://www.wired.com/story/javascript-framework-puts-web-pages-diet/) — It’s worth noting this is a high-level WIRED article, but it’s always nice to see some JavaScript tech getting positive mainstream attention. 

Klint Finley (WIRED)   

[Making a 33 Line React-a-Like](https://leontrolski.github.io/33-line-react.html) — React does some useful things, but you can do the same things with very little code, so.. why not? A fun experiment. Also of interest is that Hacker News [had its say](https://news.ycombinator.com/item?id=22776753) and the [author responded.](https://leontrolski.github.io/33-line-react-thoughts.html) 

Oliver Russell   

[Porting to TypeScript Solved Our API Woes](https://www.executeprogram.com/blog/porting-to-typescript-solved-our-api-woes) — From the guy behind the (in)famous [Wat](https://www.destroyallsoftware.com/talks/wat) video comes a tale of porting a backend from Ruby to TypeScript. 

Gary Bernhardt   

[Understanding JavaScript's Various Module Formats and Tools](https://weblogs.asp.net/dixin/understanding-all-javascript-module-formats-and-tools) — Straightforward examples of things from the IIFE pattern to CommonJS modules, the now uncommon AMD modules, ES modules, Babel modules, and more. 

Dixin     

⚡️ Quick Releases 

- [Anime.js 3.2](https://animejs.com/) — Mature Web animation library.
- [Styled Components 5.1](https://github.com/styled-components/styled-components/releases/tag/v5.1.0) — JS-based CSS styling for components.
- [Video.js 7.8](https://github.com/videojs/video.js) — Web video player.
- [Node-RED 1.0.5](https://nodered.org/) — Low-code programming for event-driven apps.
- [redux-logic 3.0](https://github.com/jeffbski/redux-logic) — Redux middleware for organizing business logic.   

🔧 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ddaytlhwr5qwovgwmg8f.jpg)](http://chocolat.insipi.de/)   

[Chocolat: A Responsive Image Lightbox Control](http://chocolat.insipi.de/) — Seems pretty slick overall, and definitely one of the more polished project homepages I’ve seen. _Note: GPL v3 licensed._ 

Nicolas Turlais   

[Winddown: A VS Code Extension That Encourages You to Take a Break](https://github.com/schneefux/vscode-winddown) — After 25 minutes of use, this extension slowly fades out your syntax highlight colors, making things _just_ annoying enough to encourage you to take a quick break. 

schneefux   

[Preact 10.4.0: The Fast 3KB React Alternative (With The Same API)](https://github.com/preactjs/preact/releases/tag/10.4.0) — _“This release contains some very amazing improvements to hydration and to performance when memoized vnodes are used. We recommend everyone to upgrade.”_ 

Preact   

[Track JavaScript Console Logs and Errors from All Your Users](https://www.datadoghq.com/ts/logs/log-management/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-JavaScriptWeeklyS) — Ensure frontend issues don’t impair user experience or revenue-generating initiatives by centralizing JavaScript console logs in Datadog. 

Datadog sponsor   

[Franc: Natural Language Detection for Text](https://github.com/wooorm/franc) — Given some text, Franc can detect what natural language it’s written in from a set of 82, 187, or 406 languages (depending on how heavy you want the build to be). [Live browser-based demo here.](https://wooorm.com/franc/) 

Titus   

[emoji-regex: A Regular Expression to Match All Emoji-Only Symbols](https://github.com/mathiasbynens/emoji-regex) 

Mathias Bynens   

[markmap-lib: Convert Markdown into Mindmaps](https://markmap.js.org/) — Certainly an interesting use-case for Markdown but it makes sense. 

gera2ld   

[prerender.js: Prerender Web Pages on Hover in Any Browser](https://github.com/genderev/prerender.js) — This has echoes of other projects (e.g. [instant.page](https://instant.page/)) but this prerenders rather than prefetches by using a hidden IFRAME. 

genderev   

[Valtan: A Common Lisp to JavaScript Compiler](https://github.com/cxxxr/valtan) 

cxxxr  

👾 One for Fun  

[QuakeJS: A Port of ioquake3 to JavaScript (via Emscripten)](http://www.quakejs.com/) — A particularly cool ‘you can run a full AAA title in a browser?’ demo that has resurfaced recently. OK, the AAA title in question is 21 years old, but still.. [GitHub repo.](https://github.com/inolen/quakejs) 

Anthony Pesch         

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