--- title: "Revisiting 'funny' and tricky JavaScript examples" publication: "JavaScript Weekly" issue: 513 published_at: "2020-11-06" canonical_url: "https://javascriptweekly.com/issues/513" --- Plus what's going on Svelte, Socket.io 3.0, and making JSON greppable. #513 — November 6, 2020 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/513) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/rdhgwdgz5zwn8tnugdza.jpg)](https://svelte.dev/blog/whats-the-deal-with-sveltekit) [What's the Deal with Svelte and SvelteKit?](https://svelte.dev/blog/whats-the-deal-with-sveltekit) — Two weeks ago we linked to [a video](https://www.youtube.com/watch?v=qSfdtmcZ4d0) where Svelte’s creator pondered the future of Web development. Now here’s a more definitive writeup of what you need to know about how Svelte is progressing. Rich Harris (Svelte) BTW, if [Svelte](https://svelte.dev/) is your thing, [Svelte Radio](https://www.svelteradio.com/episodes) is a frequent podcast covering developments in the space. There's also an official [Svelte November 2020 update.](https://svelte.dev/blog/whats-new-in-svelte-november-2020) [WTFJS: A List of Funny and Tricky JavaScript Examples](https://github.com/denysdovhan/wtfjs#readme) — This has been around for a few years but continues to get tweaks and adjustments and if you’ve not seen it, it’s worth a look to get a deeper look into some of the more “uh, what?” corners of JavaScript. Denys Dovhan [![\](https://copm.s3.amazonaws.com/ea72763d.png)](https://frontendmasters.com/courses/vue-3/?utm_source=newsletter&utm_medium=email&utm_campaign=javascriptweekly&utm_content=vue-3) [Vue 3 Is Out! Jump into Vue 3 Quickly in This New Course by Sarah Drasner](https://frontendmasters.com/courses/vue-3/?utm_source=newsletter&utm_medium=email&utm_campaign=javascriptweekly&utm_content=vue-3) — Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3. Frontend Masters sponsor [New, Core 'Redux Fundamentals' Tutorial](https://redux.js.org/tutorials/fundamentals/part-1-overview) — A complete rewrite of the official Redux introductory tutorial that covers both how Redux works and how to use it. Say goodbye to outdated terminology and hello to modern practices and code sandbox demos. Easy to skim even if Redux isn’t your cup of tea. Redux Core Team [Node v15.1.0 (Current) Released](https://nodejs.org/en/blog/release/v15.1.0/) — More bits and pieces to play around with compared to the typical minor Node release including diagnostics channels (a new experimental module for creating named channels to pass diaganostics messages around with), a new `spawn` event for child processes, and more. Michaël Zasso **⚡️ Quick bytes:** - Hackaday has [profiled a neat TTL logic simulator](https://hackaday.com/2020/11/02/ttl-simulator-in-javascript/) built in JavaScript. - The [latest VS Code release](https://code.visualstudio.com/updates/v1_51) has a new empty brace formatting option for JavaScript code (to set whether or not `{ }` should contain a space). - [SpiderBasic](https://www.spiderbasic.com/) is a modern (and _commercial_) [BASIC](https://en.wikipedia.org/wiki/BASIC) implementation that compiles to JavaScript in an attempt to take BASIC to the Web. - There's a **lot** of neat stuff in the _Code & Tools_ section this week, so be sure to head down there! :-) 📚 Tutorials, Opinions and Stories [An Introduction to Data Visualization with ApexCharts](https://www.smashingmagazine.com/2020/11/data-visualization-apexcharts/) — [ApexCharts](https://github.com/apexcharts/apexcharts.js) is an MIT-licensed interactive JavaScript charting library. Nefe Emadamerho-Atori [Clickjacking Attacks and How to Prevent Them](https://auth0.com/blog/preventing-clickjacking-attacks/) — A look at both client-side and server-side approaches to mitigating clickjacking attacks including some approaches for Express.js-based apps. Andrea Chiarelli [ES Modules in Depth](https://ui.dev/esmodules/) — An exploration of the different ways you can export and import values using ES Modules (now broadly supported in most places, even if you’re not using extra tools). R. Alex Anderson [Stream Chat API & JavaScript SDK for Custom Chat Apps](https://getstream.io/chat/?utm_campaign=2020_11_06_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 [An Introduction to FFmpeg.wasm, a WebAssembly / JS Port of FFmpeg](https://jeromewu.github.io/ffmpeg-wasm-a-pure-webassembly-javascript-port-of-ffmpeg/) — I think WebAssembly is going to have a huge impact over the next few years and this project, despite being in the early stages, shows off a few reasons why. [Project homepage](https://ffmpegwasm.github.io/). Jerome Wu [The JavaScript Self-Profiling API](https://addyosmani.com/blog/js-self-profiling/) — The [JS Self-Profiling API](https://wicg.github.io/js-self-profiling/) is a proposed API (supported only in Canary builds of Chrome for now) for letting developers control a sampling profiler for measuring client JavaScript execution times. Addy Osmani [Build a 'Remaining Character Count' Component with Alpine.js](https://ryangjchandler.co.uk/articles/build-a-remaining-character-count-component-with-alpinejs) — [Alpine.js](https://github.com/alpinejs/alpine) bills itself as ‘like Tailwind for JavaScript.’ Ryan Chandler [How to Organize a Large React Application and Make It Scale](https://www.sitepoint.com/organize-large-react-application/) Jack Franklin [Building a Type-Checked URL Router From Scratch with TypeScript 4.1+](https://ja.nsommer.dk/articles/type-checked-url-router.html) Jan Sommer [How to Localize a Vue App with vue-i18n and Localazy](https://vaclavhodek.com/how-to-localize-vuejs-app-with-vue-i18n-and-localazy) Václav Hodek ▶[Fancy TypeScript Features for the Everyday Developer](https://www.youtube.com/watch?v=hDvfHdFVbpQ) George Kosmidis [Top Problems I Encountered Switching from Vue 2 to Vue 3](https://ghalex.com/2020/11/03/top-problems-i-got-switching-from-vue-2-to-3/) Ghiura Alexandru 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/s1eciav1uplv499tlbpj.jpg)](https://github.com/spencermountain/spacetime) [SpaceTime: A Lightweight Timezone Library](https://github.com/spencermountain/spacetime) — Use this to calculate times in other timezones. Has a Moment-esque API but is immutable. No dependencies. We last linked this years ago but it’s still under active development. It has [a neat interactive demo](https://observablehq.com/@spencermountain/spacetime) too. Spencer Kelly [Socket.io 3.0 Released: A Realtime Framework for Node and Browser](https://github.com/socketio/socket.io) — We’re awaiting a full blog post on this release, but Socket·io has been around many years and was once the ‘go to’ system for bidirectional browser/server communications that worked in almost every browser. Socket·IO Project [Square Terminal API](https://squareup.com/t/f_online/d_newsletter/p_javascriptweekly/l_us/dt_alldevice/pr_ecommerce_api/?route=docs/terminal-api/overview&site=developer.squareup.com) — Connect your app to the all-in-one payments device merchants love with a simple REST API. [Learn more](https://squareup.com/t/f_online/d_newsletter/p_javascriptweekly/l_us/dt_alldevice/pr_ecommerce_api/?route=docs/terminal-api/overview&site=developer.squareup.com). Square sponsor [Dojo3D: A Library for Simple 3D Interactive Story Telling](https://github.com/webprofusion/dojo3d) — Aimed at ‘all ages of coder’, Dojo3D tries to make creating interactive 3D stories a smooth process. There’s [an online sandbox example](https://repl.it/@webprofusionchr/dojo3d-halloween) you can play with. Webprofusion [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ldidpp69wjjkwtlhlmye.jpg)](https://github.com/tomnomnom/gron) [gron: Make JSON Greppable](https://github.com/tomnomnom/gron) — A tool written in Go that transforms JSON into more easily `grep`pable assignments, so you can use `grep` and see the context/path of the result. Useful. Tom Hudson [Graphery SVG: A Library for SVG Creation and Management](https://www.graphery.org/svg/) — This [well-documented](https://www.graphery.org/svg/guide/) library is good for creating and manipulating SVG in JavaScript. Offers a simple API, that’s said to be very close to the native structure of SVG. Graphery [SpanTree: Adds Tree-Based File Navigation to GitLab](https://github.com/tavyandy97/span-tree) — A browser extension you may find useful if you browse GitLab-hosted repositories often. Taveesh Anand [Measure What Matters to Users, Browsers Don't Have Feelings](https://blog.newrelic.com/product-news/monitor-frontend-performance-with-user-centric-performance-metrics/?utm_campaign=FY21-Q3-DEV-OBSV-AMER-JSW-NL-None-B_MFEP&utm_medium=NL&utm_source=JSW&utm_content=B_MFEP&fiscal_year=FY21&quarter=Q3>m=DEV&program=OBSV&ad_type=None&geo=AMER) New Relic sponsor [Marked: A Fast Markdown Parser and Compiler](https://github.com/markedjs/marked) — Works in the browser or server-side. [Demo here](https://marked.js.org/demo/). Christopher Jeffrey [μPlot 1.3: Fast, Tiny, Canvas-Based Time Series Chart Library](https://github.com/leeoniya/uPlot) Leon Sorokin [Fetch 3.5: A `window.fetch` Polyfill](https://github.com/github/fetch/releases/tag/v3.5.0) GitHub 💻 Jobs [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) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 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