Issue #548  (URL.canParse(), Frameworks, Git/CLI, Vue)01/18/24

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:

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.
 

Advertisement

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