Issue #462 (Deep/Shallow, Media, Git/CLI, React)05/26/22
Build a Predictable Path To Engineering Leadership
The On Deck Engineering Fellowship is a curated community designed to help aspiring engineering leaders and technical managers build managerial confidence, learn from industry leaders and cultivate a personal advisory board. Applications close soon & there are only 80 spots available!
Apply Today
|
|
MDN has a few good articles discussing the difference between a deep copy and a shallow copy, when dealing with objects in JavaScript.
In simple terms, a shallow copy of an object is a copy whose properties share the same references (i.e. the same underlying values) as those of the source object from which the copy was made. A deep copy is a copy of an object whose properties do not share the same references. In many cases, a deep copy is preferred but to illustrate the inherent flaw of a shallow copy, here's some example code:
|
let myObj = ['Chris Murphy', { 'instruments': ['Bass', 'Drums']} ];
let myObjCopy = Array.from(myObj); console.log(JSON.stringify(myObjCopy));
// "['Chris Murphy',{'instruments':['Bass','Drums']}]"
myObjCopy[1].instruments = ['Bass', 'Drums', 'Vocals']; console.log(myObj[1].instruments);
// ["Bass","Drums","Vocals"]
console.log(JSON.stringify(myObj));
// "['Chris Murphy',{'instruments':['Bass','Drums','Vocals']}]"
|
Try it on CodePen
If you work through the logic, you can see what's basically happening here:
- An object with nesting is created
- A copy of part of that object is built using Array.from()
- That portion is modified
- In the end, both the copy and the original reflect the changes
This happens because, as MDN explains, all standard built-in object-copy operations create shallow copies. These include spread syntax, Array.concat(), Array.slice(), Array.from() (used above), Object.assign(), and Object.create().
On the other hand, if you want to make a deep copy, you can use JSON.stringify() along with JSON.parse() to serialize the data. But note that not all JavaScript objects can be serialized (e.g. functions and Symbols) so you can instead use a new feature called structuredClone().
Naturally, there's not enough room for me to discuss all the finer details of the above features (many of which are still new to me!) so I recommend checking out the following articles on MDN:
You might even find a few more rabbit holes to go down from those pages, if these are subjects you want to get deeper into.
Now on to this week's tools!
|
| |
Media Tools (SVG, Video, etc.)
Build a Predictable Path To Engineering Leadership
The On Deck Engineering Fellowship is a curated community designed to help aspiring engineering leaders and technical managers build managerial confidence, learn from industry leaders and cultivate a personal advisory board. Applications close soon & there are only 80 spots available! SPONSORED
OptimizeImages
Online tool to optimize and compress images (PNG, SVG, JPG, GIF), convert to new formats such as WebP or AVIF, and scan a URL to check if images need optimization.
react-medium-image-zoom
A React.js implementation of Medium's image zoom that works regardless of parent elements that have overflow: hidden or parents with transform properties.
Pitivi
A free Linux/Unix video editor with a beautiful and intuitive user interface, a clean codebase, and a supportive community.
resvg-js
A high-performance SVG renderer and toolkit powered by Rust-based resvg (for SVG rendering) and napi-rs (a framework for building compiled Node.js add-ons in Rust).
Skia
An open source 2D graphics library with common APIs that work across a variety of hardware and software platforms and serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, etc.
BlobsIcons
320+ unique, free colorful icons in SVG format, each one available with and without "decorations".
 |
Kumiko Creator
Online tool to generate "kumiko" patterns based on any image you upload. Kumiko is an ancient Japanese woodworking technique.
VectorWiki
Search for and download any brand logo in SVG format. Each logo is copyright its respective owners, so you'll need permission to use these.
react-avatar-editor
Avatar/profile picture cropping component (like on Facebook) for React that allows users to resize, crop, and rotate an uploaded image using a simple and clean user interface.
react-youtube
A simple React component acting as a thin layer over the YouTube iFrame Player API.
On the Release Radar:
|
Git, GitHub, and CLI Tools
Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today! SPONSORED
forgit
A Shell utility tool powered by fzf for using Git interactively.
DevLink
A bio link service, with GitHub sign-in, for developers to share their profile, skills, socials, portfolio, etc.
Hush
A Unix shell scripting language inspired by the Lua programming language.
cool-retro-term
A terminal emulator that mimics the look and feel of old cathode tube screens and is customizable and reasonably lightweight.
cz-git
A more engineered, lightweight, customizable, standard output format adapter for commitizen, a popular Node-based CLI.
beautify-github-profile
A repository with all sorts of links and tips to improve the look of your GitHub README profile.
Conventional Commits
A specification for adding human- and machine-readable meaning to commit messages.
IssueUp
GitHub app written in TypeScript that mirrors GitHub issues to upstream repositories.
diff2html
A diff tool that provides a comprehensive visualization of code changes with syntax highlighting, similarity matching, and optional side-by-side or line-by-line comparison.
Nushell
A Linux, macOS, and Windows shell with a modern feel that works via pipelines use structured data so it's easier to work with.
Nacre
In contrast to the previous tool, this one is an intuitive shell designed for those who prefer to work with objects over text.
|
React Tools
Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today! SPONSORED
React DnD TreeView
A draggable/droppable React-based tree-view component that lets you use render props to create each node freely.
useDisclosure
A React custom hook to perform common open/close behavior on modals, tooltips, etc.
react-dropdown
A dead simple dropdown component for React, inspired by react-select, a popular and more advanced version of the same concept.
FortuneSheet
A drop-in spreadsheet library for React that provides rich features similar to those found in Excel and Google Sheets.
React Runner
Run your React code on the go in different ways (as an inline element, function component, etc).
useAsyncMemo
A React hook for generating asynchronous memoized data.
react-select-datepicker
A simple and reusable drop-down date picker component for React.
React-WinBox
A React controlled component for WinBox.js (the popular window manager), with full React-ful props and state. Includes all configurations of WinBox.js by using React component props.
react-use-clipboard
A React hook that provides copy to clipboard functionality.
react-cancelable
React hooks to allow you to easily cancel requests at any step in a request's lifecycle and thus consume less unnecessary data.
On the Release Radar:
|
Commercial Tools and Classifieds
These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).
Mockend – GitHub App for mocking REST/GraphQL APIs.
CreativeEditor SDK – A fully customizable and easy-to-use design editor.
VSCode.Email – A Newsleter covering VS Code and other IDEs. AD
Magic Eraser – Online tool to remove unwanted objects from images.
Bytes – A JavaScript newsletter that's informative and entertaining. AD
Contentrain – Git-based Headless CMS, free for up to 3 projects.
Pulsetic – Website uptime monitoring service and status pages.
|
A Tweet for Thought
Firefox recently surpassed version 100 and, as Wes Bos points out, some developers never thought this day would come!
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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...
Oldest Search is a search engine that displays the oldest results for a particular keyword or phrase. It takes advantage of a Google feature called Programmable Search Engine.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
