Web Tools #561 - Popover Modals, React Tools, Git/CLI, Uncats
source link: https://mailchi.mp/webtoolsweekly/web-tools-561
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Popover Modals, React Tools, Git/CLI, Uncats
|
Issue #561 • April 18, 2024
Advertisement
|
$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. 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 ] |
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.
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:
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. Now on to this week's tools! |
React ToolsFirebolt — 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. 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 ToolsGitu — A Rust-based terminal user interface for Git, inspired by Magit, a popular text-based user interface for Git. 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. |
Advertisement
|
Must-Read News For Busy Professionals 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. |
The UncategorizablesClassnames — 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. 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
|
An X Post for ThoughtAs 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. Keep tooling, |
Copyright © 2024 Lazarpress, all rights reserved. Curious about this email? Well, at some point you subscribed, likely at webtoolsweekly.com Lazarpress 5576 Yonge Street PO Box 10044 North York, ON M2N 5S0 Canada unsubscribe from this list |
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK