|
Issue #556 • March 14, 2024
Video API That Developers Love
Delivering a high-quality video experience shouldn't be a burden for developers. Introducing ImageKit's video API built by developers for developers. With ImageKit, you can Crop, resize, trim & overlay on videos with 50+ URL-based parameters and transform your videos; personalizing videos has never been easier.
Automate format conversion and control video quality effortlessly. Leverage HLS & MPEG-DASH protocols for adaptive bitrate streaming and deliver an uninterrupted visual experience for your users every time. It is time to supercharge your videos. Try our forever-free plan today.
Try ImageKit Today →
|
Since 2022, all modern browsers have had full support of the new structuredClone() method that allows you to create a deep clone of a given object using something called the structured clone algorithm (which is the mechanism working behind the scenes).
A simple example of the method in use looks like this:
|
const obj = {
name: "WTW",
type: "Newsletter"
};
// clone the original
const clone = structuredClone(obj);
|
The method takes one mandatory argument, the object you want to clone, and it's a method in the global scope, so it belongs to the Window object and isn't called on any specific object.
Once the clone is created, you still have access to each of the objects individually and can modify them as needed and each will reflect its own changes. For example:
|
// modify the clone
clone.issue = 556;
// modify the original
delete obj.type;
// clone and original reflect changes
console.log(clone);
/* Result:
{
"name": "WTW",
"type": "Newsletter",
"issue": 556
}
*/
console.log(obj);
/* Result:
{
"name": "WTW"
}
*/
|
You can try out the above code in this CodePen demo.
And one extra feature in structuredClone() is the ability to transfer objects from the original during the cloning process. This means you're technically cloning with exceptions, thus it's not a full clone. The only catch is that you can only transfer objects that are transferable. Examples are ArrayBuffer, MessagePort, AudioData, ImageBitmap, and VideoFrame. You can see a full list of transferable objects in this MDN article.
And as a side point, the structuredClone() article on MDN is an example of an article that benefits from the new "Baseline..." info component that's included in some articles for new features. It looks like this:
 |
This is a neat little feature that gives you a quick summary of current browser support. This seems to be placed at the top of articles for modern features to indicate if these are safe to use (as opposed to older features that are almost always cross-browser and have been for a long time).
Now on to this week's tools!
|
Web Frameworks
Astroplate — A free starter template built with Astro, Tailwind, and TypeScript, with features for blogging like multiple authors, similar posts, tags/categories, and lots more.
Tailframes — A UI components library built with Tailwind that includes about 20 primary components along with variations for each.
VueEmail — A collection of 15+ high-quality, unstyled components for creating beautiful emails using Vue and TypeScript. Has integrations with different ESPs.
Video API That Developers Love — Effortlessly crop, resize, trim, and overlay videos using 50+ URL parameters. Automate format conversion and video quality. Use HLS & MPEG-DASH protocols for a smooth streaming experience. Try our free plan and supercharge your videos. SPONSORED
Beer CSS — A CSS framework and component library based on Material Design 3, to help you build Material Design UIs fast, with access to 30+ components, example templates, theming, light/dark modes, and more.
Naturaily Storyblok — A Jamstack starter template built with Next.js, Turborepo, and Tailwind, with ready-to-use configs for Storyblok, Storybook, ESLint, Prettier, Framer Motion, and more.
Just Ship — A TypeScript-based starter template built with SvelteKit that features Google or magic link login, Turso for database, Vercel for hosting, shdcn-svelte, etc.
Wiki.js — Powerful and extensible open-source Wiki software, based on Node.js, to build documentation with an intuitive interface, installable on almost any platform.
Browser Extension Template — A template for building browser extensions, based on React, shadcn/ui, Storybook, and Lucide for icons.
Design Systems Database — A categorized directory of design systems from popular brands. You can also choose a component type to filter the design systems that include the chosen component.
|
Testing & Debugging Tools
debugbar — I rarely include Ruby on Rails tools, but this is a debugging tool for RoR developers to get a better understanding of your application performance and behavior.
Testcontainers — An open-source framework for providing throwaway, lightweight instances of databases, message brokers, web browsers, or just about anything that can run in a Docker container.
Dep Tree — A Go-based tool to visualize the entropy of a code base with a 3D force-directed graph. For example, the more decoupled and modular a code base is, the more spread-out the graph will look.
UI Options — A Chrome extension that adds a customizable slide-down menu on any page, to help you enhance or improve website usability, flexibility, and accessibility.
Responsive Viewport Units — A JavaScript utility that generates and displays a browser's viewport unit values when a page is loaded and regenerates the unit values each time the browser is resized horizontally or vertically.
Meco: The #1 Newsletter Aggregator — The inbox is full of distractions and too many subscriptions lead to inbox chaos. Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds. SPONSORED
Keploy — An open-source and extensible Go-based backend testing tool for converting user-traffic to test cases and data stubs.
PHPSecure — A vulnerabilities scanner for PHP projects, with support for Laravel, WordPress, Drupal, and Joomla, and is currently free during Beta.
Firecamp — A developer-first open-source tool that's an alternative to tools like Postman or Insomnia, to help you design, develop, test, and document APIs.
Multiple — A developer-centric load-testing platform that can test anything across your stack. Free plan allows up to 200 virtual user hours and 50 virtual users.
|
A Gold IRA Can Diversify Your Portfolio and Safeguard Your Retirement — Safeguarding your retirement with a Gold IRA can help you shield your wealth from market shifts, economic uncertainty, and inflation. And with gold’s value projected to increase in 2024, now is a good time to invest.
Planning for retirement involves more than saving, so fortify your portfolio with gold today and plan for a better tomorrow.
See our list of Best Gold IRA Companies to start planning a better retirement.
See the List →
|
JavaScript Utilities
Observe.js — A lightweight JavaScript library that allows developers to keep track of changes to JavaScript objects and/or DOM elements.
Cookie Consent — A script to add a GDPR-compliant cookie consent notification on a first visit, with options to consent to different categories of cookies and services.
worker-timers — A Web Workers-based replacement for the setInterval() and setTimeout() methods that works in unfocused windows.
Type.js — A library that lets you add custom 'typing' animations to any text, with features like fad out, smart backspace, bulk typing, and more.
Meco: The #1 Newsletter Aggregator — The inbox is full of distractions and too many subscriptions lead to inbox chaos. Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds. SPONSORED
fuzzy-search — A fast, accurate, and multilingual fuzzy search library for searching objects with IDs (entities) by their names and features (terms).
unenv — A framework-agnostic system that allows you to convert JavaScript code to be platform agnostic and work in any environment including browsers, Web Workers, Node.js, or a JavaScript runtime.
strz — A dependency-free, tree-shakable utility that brings the power of strongly typed string functions to TypeScript.
Transformers.js — State-of-the-art Machine Learning for the web that serves as a functionally-equivalent JavaScript version of Hugging Face's Python library with a similar name.
Effection — Structured concurrency and effects for JavaScript, giving you leak-proof control over asynchronous operations.
|
|
Commercial Apps & Classifieds
Nuxt UI – A customizable UI component library for modern web apps based on Nuxt/Vue.
|
|
Techpresso – Get smarter about tech in 5 min with the most important tech news, tools, and insights. AD
|
SEO/GPT – AI solution for crafting meta titles and descriptions, for AI-powered on-page SEO optimization.
|
|
CodeAssist – A configurable SaaS boilerplate with animations, shadcn/ui, Supabase, and more.
|
TLDR – A daily byte-sized version of Hacker News that takes just a few minutes to read. AD
|
|
DoesQA – An all-in-one end-to-end test automation tool for designing, running, and reporting on tests.
|
Warrant – Unify authorization across microservices, frontend apps, cloud, edge runtimes, and more.
|
|
|
An X Post for Thought
Interesting idea from Pieter Levels (who has the background to post something like this) on how to validate a startup. I'm just wondering how many refunds you'd have to administer for the 29 that don't sell as much! 🤔
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...
If you like looking into the history of products, you'll enjoy First Versions, a website that lets you look up information and media on the earliest versions of products and software.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly
|
|
