Issue #325 (Node Snapshot, JS Utils, Mobile Tools, Media)
When debugging something in the elements panel in your developer tools, both Chrome and Firefox's tools allow you to fairly easily take a screenshot of just the selected node. This might come in handy for development, but it's also just a neat way to grab a photo of something on the page with specific boundaries.
In Firefox, you select the node in the Inspector panel, then right-click and choose "Screenshot Node".
Screenshot Node in Firefox Developer Tools
In Chrome it's not as easy to do, but you can find it by selecting the node in the Elements panel, then hitting CTRL-SHIFT-P (or CMD-SHIFT-P on Mac) to open the Command Menu. From there, type "Screenshot" and the menu will display the different screenshot commands available, including the ability to screenshot the selected node.
Screenshot Node in Chrome's DevTools
In the example above, I'm capturing the UL node in the HTML, which will give me a screenshot of the entire unordered list, with its styles on display. This is a simple but effective way to grab a screenshot of a specific part of the page, without the need to manually resize the screenshot to match the size of an element.
Now on to this week's tools!
Never Build a CSV Importer Again
Save weeks of engineering time by implementing a world class importer in your product. Flatfile is a turnkey CSV importer that integrates into any web app, providing an intuitive import experience in hours. Supports JS frameworks. sponsored via Syndicate
Real-time object tracking via TensorFlow. See demo to test what this does.
Fast, tiny `queueMicrotask` shim for modern engines.
A peer to peer message queue.
A nice emoji picker you can add to a form or application.
Library to display standard music notation on a web page. It can also be used for generating MIDI on a website.
ES Module Shims
A shim for features in ES modules that aren't yet available in all browsers (e.g. importing JSON, import(), import.meta, etc).
A tiny (139B to 204B) utility to regulate the execution rate of your functions.
A simple Node.js Gmail client that checks the inbox for message existence.
Mobile Tools and React Native
Learn React Hooks
A video course for developers who want a linear, hands-on approach to learning React Hooks. Take an existing React app and refactor it to use Hooks. promoted
The iconic scroll wheel that debuted with the original iPod, now for React Native.
React swipe event handler component and hook.
Now at version 9+ (details). A unit resizing engine (Responsive Font Sizes). Capable of rescaling every value for any CSS property with units.
Build offline-first apps for web and React Native.
Open Data Kit
Free and open-source software for collecting, managing, and using data in resource-constrained environments.
A new approach to building mobile applications using NativeScript that shifts client rendering into a compile step that happens when you build your app.
Generate react-native turbo modules using TypeScript.
Now at version 4+ (details). Routing and navigation for your React Native apps.
A React Native clipboard API for both iOS and Android.
Media Tools (SVG, Audio, Video, etc)
Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech (view past issues here). promoted
Emoji to image
Choose an emoji and then download it as an image.
High-quality digital resources for your games, vlogs, movies, etc.
Extract or grep any text from an image. Capture any machine readable text from images or scans like email addresses from business cards.
Upload an MP4 or MP3 file and add censor sounds over a predefined (or custom) list of curse words.
Images and Sketch files of popular devices, for use in mockups and prototypes.
Online photo editor. Upload an image to crop, filter, mark, resize, etc.
100,000 faces generated by AI, free to download. These kinds of projects are always a little creepy.
Recently updated. A GUI for SVGO (the SVG optimization tool for Node).
Online video editor. Add subtitles to videos, trim, filter, crop, speed up, and lots more.
Recently updated. Create beautiful thematic maps. Visualize geospatial data with a simple, yet powerful platform.