Web Tools #548 - URL.canParse(), Web Frameworks, Git/CLI Tools, Vue Tools

WEB VERSION

Issue #548 • January 18, 2024

Build with the Power of Code — Without Writing Any
Take control of HTML, CSS, and JavaScript in a visual canvas.

Webflow generates clean, semantic code that’s ready to publish or hand to developers.

In case you didn't know, there's a URL interface that exposes a number of different properties and methods for dealing with URLs in the browser. One relatively new method that now has almost cross-browser support in all modern browsers is the URL.canParse() method.

This method allows you to check if a URL (absolute or relative) is valid and able to be parsed, returning a Boolean to indicate as much. The method takes one required parameter that can be either a string or an object that has a built in stringifier (i.e. a feature that automatically converts the object to a string when a string is expected). It also accepts a second optional parameter that represents a base URL for when the URL you're checking is a relative one.

Here are some examples:

URL.canParse("https://webtoolsweekly.com"); // true

									URL.canParse("/about"); // false

									URL.canParse("/about", "https://webtoolsweekly.com"); // true

									URL.canParse(document.querySelector('a')); // true

Notice the middle two lines are both checking a relative URL. But only the second one returns true because the first one doesn't provide a base. The last line checks an object (in this case a reference to an anchor element on the page). This assumes there is at least one anchor element present, otherwise it would return false.

Of course, in the flow of a real application, you wouldn't be dropping literal values into these parameters but you might be constructing a URL dynamically, thus requiring that you check them for validation before doing anything with the URLs.

Some things to keep in mind when using this method:

If you provide a base with an absolute URL, the base will be ignored
Since there's a little bit of browser support lacking, you can check if the method exists using if ("canParse" in URL) { ... }
The method returns true for the same values valid in a URL() constructor and false for values that would cause the constructor to fail.

You can try out my examples in this CodePen demo, which has al link on the page to ensure the fourth line works as expected.

Now on to this week's tools!

Web Frameworks

nativecn-ui — A set of beautiful and customizable React Native components, inspired by shadcn-ui, currently with about 10 components and variations.

Tailplates — Not free but only $10 USD for 20+ HTML templates built with Tailwind, with the templates categorized under agency, blog, ecommerce, and SaaS.

Open SaaS — An open-source, feature-rich, full-stack React + Node.js template with preconfigured auth, Stripe integration, admin dashboard, type safety, Astro blog, and more.

Build with the Power of Code — Without Writing Any — Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers. SPONSORED

Universal Nativewind v4 Starter — An Expo-managed app starter setup to create universal apps using expo-router and NativeWind v4.

React Native AI — A full-stack framework for building cross-platform mobile AI apps supporting LLM real-time / streaming text and chat UIs.

React Winplaza 98 — A set of retro React components based on 98.css, to create user interfaces in a Windows 98 style.

Tauri Tray — A starter project for building desktop apps with tray status using Tauri and React.

TW Elements React — React version of TW Elements, that includes components, sections, and templates styles with Tailwind.

next-template — A Next.js 13 template for building apps with Radix UI and Tailwind, with dark mode and icons from Lucide.

Git, GitHub, and CLI Tools

zoxide — A smarter cd command, built in Rust, inspired by z and autojump. It remembers which directories you use most frequently, so you can "jump" to them in just a few keystrokes.

Huh? — A simple and powerful library built in Go, for building interactive forms and prompts in the terminal.

snk — A GitHub action that generates a snake game from a GitHub user contributions graph and outputs a screen capture as an animated SVGF or GIF.

Gitloc — A software localization platform for modern web apps that stores all translations and their versions directly in your Git repository.

Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more. SPONSORED

Quine — A platform for developers to build and monetize their reputation by solving GitHub issues. Devs are able to find the right issues to solve and can take part in paid coding challenges ("Quests").

Wave — An open-source terminal emulator for Mac or Linux that enables seamless workflows so you can render anything inline, save sessions and history, powered by open web standards.

Google Maps Scraper — A command line Google Maps scraper built with scrapemate, a web crawling and scraping framework written in Go.

Termshark — A terminal user-interface for tshark, a network protocol analyzer, for when you're debugging on a remote machine with a large pcap (a data file for network traffic analysis).

Atuin — A Rust-based tool to sync, search, and backup your shell history by replacing your existing shell history with a SQLite database.

The Morning Paper for Hacker News Readers
Want a byte-sized version of Hacker News that takes just a few minutes to read?

Try TLDR's free daily newsletter.

TLDR covers the most interesting tech, startup, and programming stories in under 5 minutes.

No sports. No politics. No weather.

TLDR is read by 1,250,000 software engineers, founders, and tech workers.

Subscribe for Free →

Vue Tools

Nuxt Medusa — A module that helps you connect to the Medusa headless commerce platform from your Nuxt application in seconds.

Vueform — A comprehensive framework for developing forms in Vue that standardizes the entire form building process and covers everything from rendering to validation and processing.

Nuxt Scheduler — A server-side task scheduler for Nuxt based on node-cron, to create scheduled jobs with human readable time settings.

Nuxt Auth Utils — a minimalist authentication module for Nuxt, exposing Vue composables and server utils.

Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more. SPONSORED

GOV.UK Vue — Vue implementations of every component in the GOV.UK design system and component library.

Nuxt Page Views — A Nuxt module that provides page view counts using the Google Analytics Data API.

nuxt-emoji — An Emoji picker component for Nuxt 3 projects with props for theme, placement, with recently used emojis saved with cookies, and uses a Vue tooltip library based on Tippy.js.

vue-router-better-scroller — A Vue plugin that provides enhanced scroll behavior for Vue Router, to help preserve scroll state for multiple scrollable elements.

Nuxt Beastcss — A zero-config critical CSS plugin for Nuxt that auto-enables Nuxt CSS extraction and works in both SSR and generate mode.

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.

Magic UI – A curated collection of React + Tailwind CSS + Framer Motion components.

Bytes – A JavaScript newsletter that's informative & entertaining, for all levels of JS devs. AD

ThemeZaa – Modern and feature-rich themes and plugins for WordPress and Magento.

Micleo – A scalable and production-ready template, boilerplate, and starter kit for SaaS & CRMs.

Passionate Income – Gain financial literacy in a bite-sized 3-minute read that has actionable advice. AD

GitHoot – A blogging platform based on GitHub gists, with RSS, comments, version control, etc.

BuyMicroStartups – Buy and sell micro startups in the pre-revenue stage for under $25k.

An X Post for Thought

Cassidy Williams shares a little GitHub hack that was new to me and pretty much everyone in the thread.

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...

Speaking of tiny hacks, although Hacker News is a simple and Craigslist-esque website, there's actually quite a few features that many don't know about. One developer maintains A List of Hacker News's Undocumented Features and Behaviors that attempts to explain them all.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly

Web Tools #548 - URL.canParse(), Web Frameworks, Git/CLI Tools, Vue Tools

Web Frameworks

Git, GitHub, and CLI Tools

Vue Tools

Commercial Apps and Classifieds

An X Post for Thought

Send Me Your Tools!

Before I Go...

Older messages

Web Tools #547 - Rising Stars, JS Utilities, ChatGPT, Testing & Debugging

Web Tools #546 - MediaCapture, CSS/HTML Tools, SVG, Uncats

Web Tools #545 - Top 30 Tools of 2023

Web Tools #544 - The Top Tools of 2023 (Part 1)

Web Tools #543 - JS Grouping, React Tools, Git/CLI, VS Code Tools

You Might Also Like

Detecting Parasites 🪲

Final Chance to Claim Your Bonus Gift 🎁

Top 5 of 2024, Ninja, Deploying on AWS, and More

Daily Coding Problem: Problem #1654 [Hard]

🐶 Robot Pets Are Making a Comeback — Blu-ray Players Will Soon Be Almost Gone

Charted | What Made the News in America in 2024 📊

️🚨 New Windows security bug - what to know

End of Year Sale

Post from Syncfusion Blogs on 12/31/2024

Get Organized for the New Year With This Updated Calendar App