Web Tools #530 - DOM Parser, Frameworks, Media Tools, JS Plugins

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #530 • September 14, 2023

Advertisement

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

LangUI

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.

Hal9: Chat with Your Data, Get Insights in Seconds
Chat with your enterprise databases using secure generative AI and empower business users in your team to do their own data analyses in seconds.    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.

SVGmix

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.

Hal9: Chat with Your Data, Get Insights in Seconds
Chat with your enterprise databases using secure generative AI and empower business users in your team to do their own data analyses in seconds.    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.

view-source

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.
 
An X Post for Thought
 

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 everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly

Older messages

Web Tools #529 - CSS Survey, JS Utils, ChatGPT, JSON/DB

Thursday, September 7, 2023

Web Tools Weekly WEB VERSION Issue #529 • September 7, 2023 Advertisement How To Adjust Image Size Without Distortion Resizing pictures is an easy task, but it gets terrifying when you deal with

Web Tools #528 - CSS Tools, Git/CLI, Uncats

Thursday, August 31, 2023

Web Tools Weekly WEB VERSION Issue #528 • August 31, 2023 Advertisement The Marketer's Guide to Composable Content Creating and publishing content shouldn't be that hard. Grab this marketer-

Web Tools #527 - JS Libraries, Testing Tools, Vue.js

Thursday, August 24, 2023

Web Tools Weekly WEB VERSION Issue #527 • August 24, 2023 The following intro is a paid product review for Stashpad, a cross-platform note-taking app with a developer-friendly UI. At some point many of

Web Tools #526 - Faster DOM, React, Build Tools, Uncats

Thursday, August 17, 2023

Web Tools Weekly WEB VERSION Issue #526 • August 17, 2023 Advertisement Onboard: Secure AI Chat On Any Codebase Onboard lets you talk to any GitHub repo. You can locate functionality, understand

Web Tools #525 - JS Utilities, JSON Tools, SVG

Monday, August 14, 2023

Web Tools Weekly WEB VERSION Issue #525 • August 10, 2023 Advertisement Get Smarter In 5 Minutes With Morning Brew (It's Free) There's a reason over 4 million people start their day with

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your