Issue #536 (JSON Reviver, CSS/HTML, Testing, JS Utils)10/26/23
A lot of developers have used JavaScript's JSON.parse() method when dealing with JSON objects, but for a long time may not have known about the optional second argument you can pass into it.
The second argument for JSON.parse() is referred to as a reviver function. If it was named today, I'm guessing it would have a different name, maybe filter or something similar. This function allows you to transform the fully parsed JSON values returning them.
For example, let's say we have the following JSON object:
|
{
"species": "Cat",
"breed": "Labrador Retriever",
"age": 6,
"traits": {
"eyeColor": "brown",
"coatColor": "yellow",
"weight": "137lbs"
}
}
|
This JSON comes in as a string, so I use JSON.parse() to convert it to a proper JSON object. In the meantime, I want to make a correction to one of the values. Below is the code (with myNewJSON as a string holding the JSON from above that gets parsed):
|
let myNewJSON = JSON.parse(myJSON, function (key, value) {
if (key === "species") {
value = "Dog";
}
return value;
});
|
That's just a simple example using the reviver function. Most practical examples might be some form of calculation on values or something else more complex than just a value check. You can basically do whatever you want to transform the values.
You can try out the above code example in this CodePen. Feel free to fork it and mess around with some other types of transformations.
The rules that apply when using the reviver are as follows:
- The reviver function takes two arguments, representing the key and value for each key/value pair in the parsed JSON string.
- If during the transformation a key/value pair returns undefined, this key/value pair is deleted from the parsed JSON when it's returned.
- You have to make sure all values are returned, even the ones you don't transform, otherwise they'll be deleted from the returned JSON object.
- Technically you can return anything in the reviver function, and whatever you return will replace what was originally attempted to parse. So it seems in all (or most?) cases you'll be returning the value of each property/value pair after you've done your transformation.
- When there's nested JSON key/value pairs, the values are returned based on depth-first searching. So if you log each "key" before returning, you'll see the order they come back in. You can try this by uncommenting the line inside the if statement in the CodePen.
Was this feature of JSON.parse() new to you? Seems to be a lesser-known feature of manipulating JSON, and maybe you'll find it useful when parsing JSON content in your apps.
Now on to this week's tools!
|
CSS and HTML Tools
TailwindMate
An online tool to convert RGB(A), HSL(A), or Hex format to the closest Tailwind utility class equivalent for that color. You can also convert from Tailwind to those CSS formats.
CSS Size Analyzer
An online tool to analyze CSS size to help you catch bloat from things like embedded images or fonts.
Build a Better Mobile Input
An interactive tool to experiment with and edit various form input attributes that are beneficial for mobile usability, with a live view of an iOS or Android device to see the results.
Webflow, the Only Visual Development Platform Designed for Agencies
Be the one clients can’t stop talking about. Build custom websites visually, manage projects in a shared dashboard and collaborate with your colleagues all with Webflow. SPONSORED
selectors.info
A simple interactive tool, mostly for CSS beginners, to learn all the different CSS selectors visually.
tw2panda
A CLI tool and VS Code extension to easily migrate code from Tailwind to Panda CSS. Also includes an online playground to try it out on a web UI.
table-saw
A small structural-only zero-dependency Web Component for responsive HTML table elements, inspired an old jQuery plugin with a similar name.
vov.css
A CSS library of about 60+ useful CSS animations that you can add to elements by class name and you can try out each one directly on the page.
@unpic/placeholder
A JavaScript utility that generates pure-CSS placeholder images by extracting the dominant color from an image, or by server-side rendering a BlurHash value.
Gradient Designer
An interactive tool to generate CSS gradients using visual color stops and with support for modern color spaces (sRGB, Oklab, etc).
|
Testing and Debugging Tools
Insomnium
A 100% local and privacy-focused open-source API client for testing GraphQL, REST, WebSockets, Server-sent events, and gRPC in development/production.
Quick JavaScript Switcher
Chrome extension. A quick way to disable/enable JavaScript in the browser, with the ability to limit to a subdomain or hostname.
MiniSim
An open-source, lightweight, native Mac menubar app that allows you to quickly launch iOS and Android emulators.
Remix Development Tools
A toolkit for working with Remix applications, to efficiently monitor and manage various aspects of your Remix projects, including page information, URL parameters, server responses, loader data, routes, and more.
The Morning Paper for Tech
Want a byte-sized version of Hacker News that takes just a few minutes to read? Try TLDR's free daily newsletter. It covers the most interesting tech, startup, and programming stories in just 5 minutes. No sports and no politics. SPONSORED
presentable-error
Work in progress. A convention for presenting errors without a stack trace, which can be useful for command line tools.
HyperDX
An open-source observability platform unifying session replays, logs, metrics, traces and errors, a developer-friendly alternative to Datadog and New Relic.
 |
Rivet
A browser extension that enables developers to inspect, debug, modify, and manipulate the state of Ethereum: accounts, blocks, contracts, and the node itself.
Social Share Preview
An online tool to test how your social cards will look when shared on various platforms (X, Facebook, LinkeIn, Pinterest).
RecipeUI
An open-source Postman alternative with type safety built in. Catch your API requests before they fail with TypeScript and autocomplete. Enhance your workflows with auto-generated docs and reusable API templates.
why-is-node-running
A Node.js package or CLI tool that lets you check to see if Node is running and why.
|
JavaScript Utilities
TanStack Store
A framework-agnostic, type-safe state management store with framework specific adapters for major frameworks like React, Solid, Vue, and Svelte.
Crystalize.js
A reducer on steroids, where state management gets a transformative twist, but if reducers had undo/redo and time-travel.
Lucia
An auth library for TypeScript that abstracts away the complexity of handling users and sessions and works alongside your database to provide an API that's easy to use, understand, and extend.
autocomp.js
A super tiny JavaScript autocomplete library with zero dependencies and weighs in at about 800 bytes minified and gzipped.
Sugar High
A super-lightweight JSX syntax highlighter, around 1KB after minified and gzipped.
The Morning Paper for Tech
Want a byte-sized version of Hacker News that takes just a few minutes to read? Try TLDR's free daily newsletter. It covers the most interesting tech, startup, and programming stories in just 5 minutes. No sports and no politics. SPONSORED
@exact-realty/lot
A versatile ECMAScript sandbox that supports multiple runtimes and allows for bidirectional communication, for flexibility and security to run your code in various environments.
blog-cells
Embed interactive code cells to any web page, similar to Jupyter Notebooks. Works with static site generators like Jekyll, Hugo, and more.
@badrap/valita
A TypeScript library for validating and parsing structured objects, heavily influenced by Zod's API, with strong performance on the implementation side.
Calendar.js
A JavaScript drag-and-drop event calendar that's fully responsive and compatible with all modern browsers.
IterTools
Inspired by Python and designed for TypeScript, a package that provides two types of iteration tools: loop iteration and stream iteration.
|
|
Commercial Apps and Classifieds
SearchApi – A Google search API
and real-time SERP API for easy SERP scraping.
|
|
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs. AD
|
Seoship – An SEO toolkit for indie hackers with tools for on-page SEO, backlinks, keywords, and more.
|
|
Bugfender – A log storage service that collects everything that happens in your applications.
|
JavaScript E-Books – 250+ tips, tricks, and little-known facts, with lots of live code demos. AD
|
|
Contza – A developer-first CMS platform that makes it as easy to add a CMS to your website.
|
Record – Automatically capture user sessions or allow your users to record issues along with all data.
|
|
|
An X Post for Thought
Not easy to do, but this is excellent advice that would likely be great for your physical and mental health.
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
How many music genres are there? Well, according to Every Noise at Once, that's not easy to define. This website describes itself as "an ongoing attempt at an algorithmically-generated, readability-adjusted scatter-plot of the musical genre-space, based on data tracked and analyzed for 6,282 genre-shaped distinctions by Spotify." There's quite a bit to experiment with here, besides just clicking on any genre to hear a snippet. This is a great way to find new artists!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
