Issue #325 (Node Snapshot, JS Utils, Mobile Tools, Media)10/10/19
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.
Try the Importer
|
|
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!
|
JavaScript Utilities and Modules
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
Object Tracking JavaScript SDK
Real-time object tracking via TensorFlow. See demo to test what this does.
history
Manage session history with JavaScript. Abstracts away the differences in various environments and provides a minimal API that lets you manage the history stack, navigate, and persist state between sessions.
queue-microtask
Fast, tiny `queueMicrotask` shim for modern engines.
peermq
A peer to peer message queue.
Emoji Button
A nice emoji picker you can add to a form or application.
gameController.js
A JavaScript library that lets you handle, configure, and use gamepads and controllers on a browser, using the Gamepad API.
abcjs
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).
throttles
A tiny (139B to 204B) utility to regulate the execution rate of your functions.
gmail-tester
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
react-native-apple-scroll-wheel
The iconic scroll wheel that debuted with the original iPod, now for React Native.
React Swipeable
React swipe event handler component and hook.
RFS
Now at version 9+ (details). A unit resizing engine (Responsive Font Sizes). Capable of rescaling every value for any CSS property with units.
Redux Offline
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.
Svelte Native
A new approach to building mobile applications using NativeScript that shifts client rendering into a compile step that happens when you build your app.
react-native-tscodegen
Generate react-native turbo modules using TypeScript.
React Navigation
Now at version 4+ (details). Routing and navigation for your React Native apps.
react-native-clipboard
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.
Music Maker
High-quality digital resources for your games, vlogs, movies, etc.
imgregex
Extract or grep any text from an image. Capture any machine readable text from images or scans like email addresses from business cards.
VideoMop
Upload an MP4 or MP3 file and add censor sounds over a predefined (or custom) list of curse words.
Devices
Images and Sketch files of popular devices, for use in mockups and prototypes.
Doka.Photo
Online photo editor. Upload an image to crop, filter, mark, resize, etc.
Generated Photos
100,000 faces generated by AI, free to download. These kinds of projects are always a little creepy.
SVGOMG
Recently updated. A GUI for SVGO (the SVG optimization tool for Node).
VEED
Online video editor. Add subtitles to videos, trim, filter, crop, speed up, and lots more.
datamaps.world
Recently updated. Create beautiful thematic maps. Visualize geospatial data with a simple, yet powerful platform.
|
|
