Issue #561 (Popover Modals, React, Git/CLI, Uncats)04/18/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 →
|
Last week I briefly introduced the main features of the relatively new Popover API, which allows you to create 'popover' content natively with a few lines of code.
One thing I glossed over, partly due to the brevity of this intro and partly because it's new to me, is the fact that the Popover API is not just for creating 'modal windows', although that is one of the primary use cases. Popovers allows you to create all sorts of overlaid content such as:
- Interactive menus
- Tooltips showing things like how to use a UI element (e.g. a form hint)
- Toast notifications
- Instructional content (e.g. a "tour" of an app)
All of these and similar use cases are possible and encouraged. So the API isn't just for content that generally annoys users! :)
It should also be noted that popover content created using the Popover API is always 'non-modal'. So technically referring to these popovers as "modal windows" isn't accurate. Non-modal content means that the rest of the page can be interacted with while the popover is present.
If you want to create content that's 'modal' using the Popover API, you would have to use a few extra features. For example, the following CSS would make a popover appear more like a proper modal window:
|
::backdrop {
background-color: lightblue;
opacity: 0.7;
}
|
The ::backdrop pseudo-element in CSS defines a box the size of the viewport behind the "top layer" of an element in CSS. This is similar to the way we used to hack an absolutely positioned element behind such windows. This makes it easy to create such an element. When a popover is present, the ::backdrop element is added automatically when it's included in your CSS.
The ::backdrop element is present not just with popovers, but also with elements in fullscreen mode using the Fullscreen API and also <dialog> elements used as modals.
For a demo that uses the Popover API to create such a more traditional 'modal' window, you can try out this CodePen demo. If you want the modal to be able to close using the ESC key or by clicking outside the modal, simply change the popover attribute to "auto" instead of "manual".
Now on to this week's tools!
|
React Tools
Firebolt — A React framework to help you quickly build high performance, efficient, full-stack apps on the web, with features like a 10 KB runtime, unified routing, CSS-in-JS, and more.
use-travel — A React hook for state time travel with undo, redo, reset and archive functionalities.
@gsap/react — A React hook for the popular GSAP animation library, to solve a few React-specific friction points when using GSAP in your React projects.
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
Next.js Image Transformation — A drop-in replacement for Vercel's Next.js image optimization service, for resizing images with Next.js used in the <Image> component.
next-export-i18n — A simple, reactive client-side solution for project internationalization in Next.js apps.
Chai Builder — A simple React component that can be integrated into any React based framework as a low code React + Tailwind landing page builder.
 |
UVCanvas — An open-source React component library that provides a rich set of dynamic canvases that are useful as web backgrounds, wallpapers, and design materials.
Underhive — A React tool to add visual editing to React projects, similar to working inside Figma or other design tools.
Marquee — A React component to add a customizable marquee effect to web page sections, similar to a carousel but a continuous animated scroll that can include images or text.
|
Git, GitHub, and CLI Tools
Gitu — A Rust-based terminal user interface for Git, inspired by Magit, a popular text-based user interface for Git.
GitHub Profile Readme Generator — A simple UI to generate a GitHub README where you can share your profile, skills, social links, and more, in Markdown format.
csvlens — A command-line CSV file viewer, written in Rust, that lets you use a CSV file name or pipe CSV data directly.
Missed out on Ring and Nest? Don’t Let RYSE Slip Away! — RYSE has just launched in 100+ Best Buy stores, and you can still invest at $1.50/share. They’ve patented the only mass market shade automation device and their exclusive Best Buy deal resembles that which led to other past billion-dollar buyouts like Ring and Nest. SPONSORED
Gitroom — A set of tools to help you grow your open-source repository, gain more visibility, stars, contributions, etc., as an alternative to services like Buffer.
Auto Wiki — View high-quality, automatically-generated documentation for any repository.
Repo Lockdown — A GitHub Action that immediately closes and locks issues and pull requests on a repo, useful when you don't want to archive a repo but want to limit outside requests.
deploy-pages — A GitHub Action to publish "artifacts" to GitHub Pages for deployments. See the reference link in the description for a discussion of artifacts.
Difftastic — A CLI diff tool that compares files based on their syntax, not line-by-line, to produce accurate diffs that are easier for humans to read.
hypershell — An npm package to spawn shells anywhere that are fully peer-to-peer, authenticated, and end-to-end encrypted.
|
Must-Read News For Busy Professionals
Morning Brew covers the latest developments across business, tech, finance, and more in its quick-to-read daily newsletter that’s perfect for busy professionals.
With Morning Brew’s free daily newsletter, it’s quick and easy to keep up with business news.
Morning Brew's witty yet informative tone sets it apart from other business-focused newsletters, making it the go-to news source for 4M+ readers.
Join Morning Brew's community of 4M+ readers and experience the benefits of staying informed, entertained, and ahead of the game. Subscribe now and never miss out on the business news that matters most.
Subscribe for Free →
|
The Uncategorizables
Classnames — A resource that contains thematically grouped lists of words to help you find inspiration for naming things in programming like HTML classes, CSS properties, or JavaScript functions.
HeyForm — An open-source form builder that allows anyone to create engaging conversational forms for surveys, questionnaires, quizzes, and polls, with no coding skills required.
Creo — A simple starter framework, based on React, that enables rapid development of internal tools.
Counterscale — Free and open-source, privacy-focused web analytics, that can be deployed as a single Cloudflare Worker.
Stract — An open-source search engine, made for hackers and tinkerers, where the user has the ability to see exactly what is going on and customize almost everything about their search results.
Missed out on Ring and Nest? Don’t Let RYSE Slip Away! — RYSE has just launched in 100+ Best Buy stores, and you can still invest at $1.50/share. They’ve patented the only mass market shade automation device and their exclusive Best Buy deal resembles that which led to other past billion-dollar buyouts like Ring and Nest. SPONSORED
RunJS — A simple JavaScript playground that instantly displays results on the right as you type, potentially useful for demos and live presentations.
Nitro — A next-generation server toolkit to create web servers with everything you need and deploy them wherever you prefer.
Automatisch — An open-source Zapier alternative that helps you to automate your business processes without coding.
QuickWP — An online tool that allows you to create an AI-generated WordPress theme with styles, content, and images, based on your input.
|
|
Commercial Apps & Classifieds
AnimStats – Transform your boring statistics into captivating animated GIFs/Videos within minutes.
|
|
TLDR – A byte-sized version of Hacker News that takes just a few minutes to read. AD
|
AI/ML API – A single API that provides access to 100+ AI models that are accessible 24/7.
|
|
btunnel – A command line tool that exposes localhost for use anywhere for testing, development, etc.
|
BookBub – Subscribe to get personalized alerts for free and discounted top-selling e-books. AD
|
|
Docdriven – An all-in-one API design tool for cross-team collaboration.
|
Ogre.run – A platform to automate installation of software dependencies with AI.
|
|
|
An X Post for Thought
As someone who literally sees thousands of GitHub repositories every year, this is good advice.
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 travel often, you'll want to check out Airline List, a searchable and filterable online resource for comparing airlines, airplanes, and airports.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
