Web Tools Weekly Issue #530 (DOM Parser, Frameworks, Media, JS Lib Plugins)

Issue #530 (DOM Parser, Frameworks, Media, JS Lib Plugins)09/14/23

They Call it the “Tesla of Productivity Apps"

Achieve maximum productivity with:

Daily planning: Add or create a daily plan from emails and other integrations, and see progress from previous days.
Unifying your work: Integrate your calendars, emails and your favorite tools like GitHub and Jira in a single calm and focused view.

Weekly objectives: It’s important to have daily tasks, but it’s also important to have some big objectives (main goals).
Focus bar: Set a timer and stay committed to working on a single task even if you are outside of Sunsama.

Try Sunsama and become the most productive version of yourself

A bit of an obscure API is the DOM Parser API in JavaScript, which provides a way to parse and manipulate XML or HTML strings. One of the key methods in this API is parseFromString(), which allows you to convert a string representation of XML or HTML into a DOM document. Let's take a brief look at this method with some examples.

First of all, the basic syntax looks like this:

const parser = new DOMParser();

      const xmlDoc = parser.parseFromString(string, mimeType);

Here's a breakdown of the different parts of the code:

parser: A DOMParser object that provides the parseFromString() method.
string: The first argument passed into the method, the XML or HTML string to parse.
mimeType: The other argument, the type of the string being parsed, usually "text/xml" for XML or "text/html" for HTML.

So for example, if I have an XML string to parse, like this one:

const xmlString = "<bookstore><book><title>JavaScript for Dummies</title><author>Jane Doe</author></book></bookstore>";

I can then use the parseFromString() method in the following manner:

const parser = new DOMParser();

      const xmlDoc = parser.parseFromString(xmlString, 'text/xml');

Once I've parsed the XML string, I can access elements in the parsed DOM document just like I would with any HTML document, using methods like getElementById(), getElementsByTagName(), or querySelector().

const titleElement = xmlDoc.querySelector('title');

      const authorElement = xmlDoc.querySelector('author');

      console.log(titleElement.textContent);

      // Output: JavaScript for Dummies

      console.log(authorElement.textContent);

      // Output: Jane Doe

I can basically do whatever I want with the different parts of the page, whether it's XML or HTML, using any DOM methods I would normally use on an HTML page.

Finally, I can also serialize the document back to a string using the XMLSerializer API. This might be useful if you need to send the updated XML data back to a server.

const serializer = new XMLSerializer();

      const newXmlString = serializer.serializeToString(xmlDoc);

You can try out the full code example from the snippets above in this CodePen.

As you can see, the parseFromString() method can be a valuable feature for parsing XML or HTML strings and working with the resulting DOM document with JavaScript. The ability to manipulate the data, extract information, and serialize it back into a string format can be particularly useful for tasks like handling XML data from web services or manipulating HTML content dynamically.

Now on to this week's tools!

Front-end Frameworks

Frolic React
An open-source React library to build UI for analytics dashboards much faster, built on top of React, Tailwind and Recharts.

SaaS Boilerplate
A complete SaaS starter kit that lets you build SaaS products faster in React, Django, and AWS.

Master CSS
A virtual CSS language, similar to utility class libraries like Tailwind, to build UIs and design systems with only HTML.

They Call it the “Tesla of Productivity Apps”
Achieve maximum productivity with: Daily planning – add or create a daily plan from emails and other integrations. Focus bar – set a timer and stay committed to working on a single task even if you are outside of Sunsama. SPONSORED

Stripe Stack
A Stripe-focused Remix stack that integrates user subscriptions, authentication, and testing, powered by Prisma ORM and deploys to Fly.io.

Trance Stack
A production-ready Remix stack built for AWS Lambda, authentication, security, internationalization, feature flags, analytics, tests, Storybook, production CI/CD, and more.

Radix Vue
A Vue port of Radix UI that provides unstyled, accessible components for building high‑quality design systems and web apps in Vue.

LangUI
An open source Tailwind library with free to use responsive, components tailored for AI and GPT projects, with dark and light modes built in.

ikun-ui
A UI library built with Svelte.js and UnoCSS that includes a healthy set of components, icons from Iconify, and UnoCSS's preset package.

Vite React Boilerplate
A very opinionated, production-ready, scalable starter template for building apps with Vite, React, pnpm, ESLint, Tailwind, Storybook, and lots more.

Portfolio Template
An open-source user-friendly, responsive and accessible portfolio template for developers.

Media Tools (SVG, Video, etc.)

BlendIcons
A free resource of 142,000+ icons in various image and code formats and each available in different styles.

Video Thumbnail API
An open-source tool to get thumbnail images from any public video URL, accessible via API or the browser, with no login required.

SvelteKit Embed
A collection of media/social embed components for SvelteKit projects with support for YouTube, Vimeo, Spotify, CodePen, Gist, SoundCloud, and lots more.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading. SPONSORED

Tabler Icons
A set of 4600+ open-source icons, searchable via category, stroke, size, keyword, and available for Figma, React, Svelte, Vue, and lots more.

ytgif
A Shell-based CLI tool to create a GIF from a YouTube video, with subtitles enabled, powered by YT-DLP and FFmpeg.

ConvertFiles.ai
Easily convert image files between PNG, JPEG, and WebP, with no quality loss, and available either as a web or mobile app.

Crop Video
A simple online tool from Adobe Express to allow you to crop video files up to 1GB, choosing either landscape, portrait, or just a freeform crop.

SVGmix
A searchable resource of thousands of icons in 190+ collections, available in SVG and PNG formats.

Bubble Chart Maker
Enter some data in a table view, or upload data via Excel or Google Sheets, then generate a 'bubble chart' representing the data, which you can download as PNG, WebP, or JPEG.

SnippetBuilder
A drag-and-drop visual tool to build and customize beautiful images of code snippets that you can share on social media and elsewhere.

JS Library Plugins and Tools

Angular Event Plugins
A tiny library for Angular for optimizing change detection cycles for performance sensitive events (such as touchmove, scroll, drag etc.) and declarative preventDefault() and stopPropagation().

Necord
A module, based on Discord.js, for creating Discord bots using NestJS, the Node.js framework.

svelte-autoresize-textarea
Built-in auto-resize functionality for a textarea element in Svelte that uses the scroll height of a singleton proxy textarea element attached to the document body, and won't break with borders, padding, or amount of text.

Solid Code Input
A small component for SolidJS that allows you to create a lightweight text area component which will automatically syntax highlight the code you type in it.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading. SPONSORED

view-source
An Express.js add-on to render source code, if you need to show source code of a project over the web.

svelte-use-persist
A Svelte action that saves forms and inputs client side to local storage and restores them on page load.

ngx-loadable
Older project that offers simple lazy loading for non-routable Angular modules.

Svelte Progress
A set of zero-config Svelte-specific loading elements for navigating pages that are TypeScript-first and customizable via props.

Nestia
A set of helper libraries for NestJS to make NestJS faster and easier to use.

Commercial Apps and Classifieds

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

Submagic – Captions, emojis, and highlighted keywords added to videos via AI.

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

IconAI – Create custom high-quality icons for any project using AI that match your brand and style.

freesvgillustration – Thousands of free and premium, customizable SVG/PNG illustrations.

Brilliant – Learn math and CS using interactive problem solving that's effective and fun. AD

Filmage Screen – An all-in-one video toolbox for Mac for screen recording, editing, mirroring, etc.

Codesphere – A comprehensive development hub to seamlessly preview, deploy, & scale web apps.

An X Post for Thought

This hilarious interaction from 2014 is maybe the first Tweet I ever saved when I started saving stuff for use in this newsletter.

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

I'm sure most of you have heard of or remember Clippy, MIcrosoft's famous early AI-based document assistant. Well, you can check out most (if not all?) of Microsoft's throwback characters via Office Assistants. Click any of the characters to see the different animations (multiple for each). I honestly had never even heard of most of these characters.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris