Tools for Web Developers

Issue #386  (Preflect Review, Frameworks, Build Tools, Media)

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

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
Configuring a Preflect survey

Preflect’s surveys can be customized to match your brand:
 
Customizing a Preflect survey
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
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
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
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
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.

Denali

Next.js Commerce
An all-in-one starter kit for high-performance e-commerce sites. With a few clicks, Next.js you can clone, deploy, and customize your own store.

Psammead
React component library from BBC that contains a mixture of components, containers and utilities.

Brix UI
Minimal UI framework for React built with TypeScript and styled-components.

Tailwind CSS
ICYMI the popular utility-first CSS framework is now at version 2+.

QCObjects
 A JavaScript full-stack framework based on the MVC pattern, to build micro-services and micro-frontends.

Pre-Frame
A small, truly reactive framework inspired by re-frame with Redux-like one-way data flow.

ngx-bootstrap
Fast and reliable Bootstrap widgets in Angular.

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.

Rockpack

Effectful.js
A tool to build JavaScript to JavaScript transpilers (Babel plugins). It extends JavaScript with various computation effects via runtime libraries but without any syntax extension.

nuxtjs/html-validator
Add automatic HTML validation to a Nuxt.js build.

Harold
A CLI tool that compares frontend project bundle sizes.

Stampede
A multi-featured Deno REST framework and eco-system written in TypeScript.

export-size
Analyze the bundle cost for each export of an ESM package.

boxednode
Ship a JS file with Node.js in a box.
 

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.

3d Icons

react-jsx-highcharts
Highcharts (the popular JS charting framework) built with proper React components.

IconFinder
A search engine for that has access to more than 5 million SVG or PNG icons.

Signal
An open source online MIDI editor that lets you open and save MIDI files and includes multi-track editing.

LineIcons
2000+ categorized line-based SVG icons, many free while others are part of a Pro plan.

A Tweet for Thought

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

A Tweet for Thought
 

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

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly