Web Tools #386 - Frontend Frameworks, SVG, Build Tools

The following intro is a paid product review for Preflect, a microsurvey and navigation tool that helps visitors stay engaged on your website.

For anyone running a website or app, it’s a challenge to ensure visitors aren’t lost when looking for something specific. It’s true, some users are merely browsing and don’t necessarily have a plan in mind. But in either case, Preflect’s easy-to-use service will help guide your site’s visitors to actionable content.
 
Preflect lets you add a widget to any page that can be embedded in one of four ways:

• Bottom-corner overlay
• Modal window
• Inline with the content
• Infinite scroll

I was skeptical at first because my first thought was ‘Who needs another nagging UI widget’? But Preflect’s widget isn’t asking for subscriptions like most do, but is helping your users navigate so they can find what they want and you can increase conversions.

For example, the bottom-corner overlay can display a navigation survey that asks visitors where they want to go, with each option clickable to lead them to the right page. To create a survey, install the script on your site, then configure it:
 

Configuring a Preflect survey

Preflect’s surveys can be customized to match your brand:
 

Customizing a Preflect survey

Once you’ve defined the question, options, and links for a survey, it looks something like this:
 

A bottom-corner overlay survey

If you select the modal option for the survey, it can display on exit, load, or with a 15s delay:
 

Configuring a modal survey

It’s important to emphasize that this is a navigation tool. So while you can collect info on what option is clicked, the user also benefits by specifying what they want and they’re taken directly to the option chosen (you define optional URLs for each survey choice).

Of course, the modal window should be used with care, as many users find it obtrusive. So you might opt for the bottom-corner overlay shown in the earlier image. If neither option works for you, you can choose the inline version of the survey.

Preflect’s control widget (where you create and customize surveys) lets you specify where in your content you want to inject the inline survey.
 

Setting up an inline survey

With custom branding, it works seamlessly, flowing with the content in any page you place it. Preflect’s widget allows you to hover over and click to select the spot on the page where you want the inline survey to appear. This is a great option if you feel the overlay and modal don’t fit with your site’s layout.

Once your survey is in place, you can start collecting data on survey views, number of responses, and response data. While writing this review, I added a Preflect survey on the Web Tools Weekly archives, asking users to select which term best describes their job (front-end, back-end, full-stack, or other). Click any individual issue to see the survey overlay in the bottom-right corner. This can give me insight on users browsing older issues.

Here are some use cases for Preflect:

• Embed it on E-commerce websites to guide shoppers and direct them to pages where they can purchase what they want
• Include surveys as navigation helpers that reduce bounce rates and abandonment
• Gather survey data to learn about shoppers’ habits or blog readers’ content preferences

In addition to the surveys, Preflect gives you the option to add their infinite scroll navigation to any page. Like the survey widget, this too is a navigation tool.
 

Setting up Infinite Scroll

To try out Preflect on any website (including Squarespace, WordPress, WooCommerce, and more), you can register for free (no credit card required). The free plan gives you unlimited survey responses and stats with 3 concurrent surveys, or you can upgrade to Premium for $29/month to get unlimited surveys.

So if you’re looking for an easy way to improve your site’s navigation and give users clear, actionable choices when browsing your content, Preflect might be exactly what you’re looking for.
 

Now on to this week's tools!

Front-end Frameworks

Wave UI
A responsive, accessible, touch-friendly Vue framework with 40+ components, and extras for form validation.

Tailwind Starter Kit
Open Source add-on for Tailwind that features multiple HTML elements and comes with dynamic components for React, Vue, and Angular.

tinyhttp
A modern, lightweight, and modular Express-like web framework for Node.

Landy
A free React landing page template designed for developers and startups, to create a quick and professional landing page for any project.

Denali
A themeable design system that offers ease of building with a framework without sacrificing your unique visual style.

Build Tools, Bundlers, Deployment, etc.

vite-plugin-pwa
A zero-config progressive web app for Vite (the build tool that serves your code via native ES Module imports).

Rollpkg
Create packages with Rollup and TypeScript using convention over configuration.

WMR
A tiny all-in-one development tool for modern web apps, in a single 2mb file with no dependencies.

EZMM
An easy ES Module Manager to use modern JavaScript.

Rockpack
A solution for creating React apps with server-side rendering, bundling, linting, testing, logging, and localization.

Media Tools (SVG, Audio, etc.)

Decent Patterns
Really simple SVG Patterns using single Unicode characters. You can customize the foreground and background colors for each before you grab the code.

Graphery SVG
An SVG wrapper library with an API very close to SVG structure, 1.5kb gzip'd.

Plaiceholder
Upload images to transform them to blurred placeholders in SVG, CSS, data URI, and more.

Multiavatar
Generate random funky, diverse avatars in PNG format with potentially billions of combinations. Just type any characters in the field and the avatars change accordingly (though I'm not sure what is the basis for the changes).

quiver
A modern, graphical editor for commutative and "pasting diagrams", capable of rendering high-quality diagrams for screen viewing, and exporting to LaTeX.

Social Image Generator
Generate an embeddable attractive card to showcase a Node, Yarn, or PHP package for social sharing. Download as PNG or JPG.

3d Icons
A huge collection of 1200+ icons with a neat 3D design style, 4000x4000px dimensions downloadable as transparent PNG files. First 50 free for personal use; pay after that.

A Tweet for Thought

Randall Kanna shares her dev interview prep threads and job hunting resources in one set of Tweets.

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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've got some time over the holidays and you want to brush up on front-end skills, you might want to check out 50 Projects in 50 Days, a GitHub repo for a Udemy course of the same name. Even if you don't buy the course, the repository alone can serve as inspiration for trying to build the things listed.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me    /    Patreon    /    GitHub Sponsors