Issue #560 (Popover API, Frameworks, AI Tools, JS Utils)04/11/24
$47 Million in Artwork Sales Equals Profits for These Everyday Investors — Masterworks is taking on the billionaires at their own game, buying up paintings by world-class artists like Banksy and Picasso, and securitizing them for its investors.
When Masterworks sells a painting – like the 16 it's already sold – investors reap their portion of the net proceeds. Its investors have already received proceeds from more than $47 million in sales, realizing annualized net returns of 17.8%, 21.5%, 35% and more.
Now, Masterworks wants to do the same thing for you. By qualifying every offering with the SEC, Masterworks makes it easy for everyday people to invest in multi-million dollar paintings. Offerings can sell out in just minutes, but as a trusted partner, Web Tools Weekly readers can skip the waitlist to join here. [ Note: Past performance is not indicative of future returns, investing involves risk. See disclosures masterworks.com/cd ]
Skip the Waitlist →
|
By now you may have heard of the Popover API that allows you to create modal windows using a few HTML attributes and optionally controlling the functionality using some events and methods in JavaScript.
The simplest Popover API example can be implemented with nothing but HTML using something like the following:
|
<button popovertarget="mypopover">Toggle Popover</button>
<div id="mypopover" popover>A Popover Example</div>
|
No JavaScript needed, the popover just works. The only requirements for this code are:
- A popovertarget attribute on the element that will serve as the button (in this case an actual button element).
- An id attribute on the popover element itself with a value that's equal to the value of the popovertarget attribute.
- A popover attribute on the popover element.
That's basically a popover in its simplest state. Of course, without any CSS, the popover element would be nothing but a plain element with some text. By default, Chrome adds a simple dark 2px border to the element, but this can be changed as needed.
The easiest way to style a popover element is using the :popover-open pseudo-class, like this:
|
:popover-open {
border-radius: 20px;
transition: linear 1s;
padding: 50px;
border: none;
background: #ccc;
}
|
This styles all popovers in their open state. You can see this simple popover example in this CodePen demo.
Some other options available to customize the popover, include the following:
- The popover attribute on the popover element has a default value of "auto" but you can also choose a value of "manual". The value "auto" means it can be dismissed by clicking outside the popover or by hitting the ESC key on the keyboard. A value of "manual" requires that it be closed using either the toggle button or another button designated as the close button.
- As indicated in the previous point, you can use multiple buttons for opening and closing the popover. You can define these by adding an attribute called popovertargetaction to each button and specifying a value of "show" or "hide". These override the default value "toggle" that is assumed if you don't include them.
Here's another CodePen that uses different buttons for opening and closing and also includes the "manual" value so the popover can't be closed without using the buttons.
Now on to this week's tools!
|
Web Frameworks
MBRV — A hassle-free full-stack TypeScript, Bun, and React boilerplate with hot reload and SSR support.
next-starter — A super-opinionated Next.js starter template that includes features like TypeScript, Tailwind, next-auth, ESlint, shadcn-ui, Prisma, Jest, React Testing Library, and lots more.
Anytime Mailbox — Business starters, are you in need of a business address separate from your home? Anytime Mailbox provides a seamless solution, securing a private, professional address with added benefits like mail forwarding and scanning for ultimate convenience. SPONSORED
Svelte UX — A suite of 200+ components, actions, stores, and utilities to build highly interactive applications with Svelte.
Bulma — A popular open-source CSS framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Tiny Stack — A simple and tiny stack for building web applications using Astro, SQLite, and Litestream (the popular SQLite tool).
Wedges — A modest set of UI components for React, built with the Wedges Design System, Radix UI, and Tailwind.
 |
WXT — A TypeScript-based framework for building web extensions and plugins for Chromium-based browsers, featuring build manifest v2/v3, fast dev mode, Nuxt-like auto-imports, and more.
Shadow Panda — An accessible and customizable library of 40+ components built with Panda CSS, Radix, and shadcn/ui.
drab — A headless component library of 14+ components that are all based on HTML Custom Elements, each providing a useful wrapper around a specific web API.
|
ChatGPT and AI Tools
OpenModerator — An open-source, modern AI content moderation tool that provides image and text moderation to help communities avoid or remove questionable user-generated content.
Lummi — AI-generated, free stock photos that are royalty free. Most of these look pretty look realistic and not so "cartoon-like" as some of these AI-based ones seem to be.
Codel — A secure, fully autonomous AI agent that can perform complicated tasks and projects using terminal, browser, and editor.
Simplicity Builder — A web component that lets you add simplified drag and drop building capability to your project. Turn any HTML into drag and drop building blocks. Works with vanilla JavaScript, Angular, React, and Vue. Use for page builders, no-code tools. SPONSORED
AI Gateway — A core infrastructure stack for building production-ready AI applications with features like AI Router, load balancing, seamless integration with Universal API, and more.
openai-cloudflare — An OpenAI API proxy running with Cloudflare worker that has support all APIs provided by OpenAI, among a number of other features.
Cursor — An AI-first code editor with features like command palette, a native Copilot++, AI chat, codebase answers, and more.
 |
CodeMate — An AI-powered search engine for developers that lets you select the programming language and whether to display results in "smart mode" or "fast mode".
Braintrust AI Proxy — A unified way to access the world's leading AI models through a single API, including models from OpenAI, Anthropic, LLaMa 2, Mistral, and more.
Cosine — An AI code companion to help with code reviews, scaffolding, seamless README updates, comprehensive impact assessments, rapid bug detection, and more.
|
JavaScript Utilities
Minditor — A block-level rich text editor with features like image uploading, markdown commands, inline insertions, simplified plugin development, and lots more.
gaxios — An HTTP request client that provides an Axios-like interface over top of node-fetch.
Bentocache — A robust multi-tier caching solution for Node.js applications and supports drivers for Redis, Upstash, Postgres, SQLite, etc.
Simplicity Builder — A web component that lets you add simplified drag and drop building capability to your project. Turn any HTML into drag and drop building blocks. Works with vanilla JavaScript, Angular, React, and Vue. Use for page builders, no-code tools. SPONSORED
mdbox — A set of simple Markdown utilities to programmatically work with Markdown syntax without dealing with complex and strict AST objects.
emojisplosion — A utility to blast emoji-based "fireworks" on a web page, with plugins for Astro and TypeDoc, and lots of ways to customize including timing, types of emojis, position, size, and more.
 |
Journey.js — A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours for websites and apps.
gsplat.js — An easy-to-use, general-purpose, open-source 3D Gaussian Splatting library, providing functionality similar to Three.js but for Gaussian Splatting.
export-to-csv — A small, simple, and single-purpose CSV export library with zero dependencies, functionally inspired, and fairly well-typed.
Siero — A serialization library that can handle functions, promises, and symbols, and can be used with an accompanying worker utility.
|
|
Commercial Apps & Classifieds
Studio – An easy and quick no-code design tool to turn any idea into a website.
|
|
Morning Brew – A daily newsletter that delivers world news with a business spin straight to your inbox, free. AD
|
Scade – Access 1,500+ AI models with a drag-and-drop flow builder to create and optimize workflows.
|
|
Tigris – A low-latency, globally distributed S3-compatible object storage service.
|
BookBub – Subscribe to get personalized alerts for free and discounted top-selling e-books AD
|
|
BaseHub – A headless CMS that’s built for speed and collaborative workflows.
|
GPTBots – A powerful no-code platform for creating AI-driven business applications.
|
|
|
An X Post for Thought
I don't know a lot about LLMs but this sounds pretty powerful to me, if true.
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...
The folks at Google created a game called Most Searched Playground, which is a sort of Where's Waldo-like interactive experience that lets you find the most searched people, places, and things, according to Google data.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
