Web Tools Weekly
What a Tool!

Issue #317  (JotForm Review, CSS Tools, Testing/Debugging, Vue)

The following intro is a paid product review for Jotform Mobile Forms.

You may have heard of JotForm, the popular online form builder that allows you to build customizable forms and easily collect data when submissions are made. JotForm has released a mobile app, available for both iOS and Android. The new mobile app makes it super simple to create and edit forms on the go, with the added ability to collect data offline then sync up the next time you have an internet connection.

 
JotForm


Two of the primary features that caught my eye will be huge benefits to those doing customer and client interactions on the go: Offline Data Collection and Kiosk Mode.

The ability to work offline ensures you can view forms and analyze response data wherever you are. Forms can also be submitted and data received while on your mobile device offline (more on that in a moment). When you're back online, any new offline data collected on your device will automatically sync with what's on the JotForm server.

 
Options for customizing a form on JotForm Mobile Forms
Options for customizing a form on JotForm Mobile Forms


The feature that works nicely along with offline mode is the ability to allow forms to be filled out in Kiosk mode. As the screenshot above shows, you can select Kiosk Mode for any form. Kiosk Mode is great for events and conferences where the Wi-Fi might be pretty spotty. You can have potential customers, clients, and others fill out forms on your device offline using an attractive interface.
 

JotForm Mobile Forms in Kiosk Mode
Jotform Mobile Forms in Kiosk Mode


Finally, the last feature I'll mention here is the collection of Widgets available that allows you to add advanced form fields to your forms. This isn't a mobile-specific feature, but the ease with which you can build a form with these advanced fields even on a mobile device is great.

 
Advanced Form Fields on JotForm Mobile Forms
Advanced Form Fields in JotForm Mobile Forms


The advanced form fields include:
 

  • Photo upload
  • Geolocation (i.e. the user can add their location)
  • Voice Recorder (i.e. the user can add a voice message)
  • E-Signature
  • Barcode Scanner


Again, all these advanced fields are available when building a form on the regular web app, but they're also easy to add to your forms in the mobile app, making this a nice interoperable experience.

In conclusion, if you're looking for a solid form building service that offers offline capabilities and a nice mobile user experience, check out JotForm Mobile Forms.

Now on to this week's tools!
 

CSS and HTML Tools

image-color
Upload an image or link to one via a URL and then use the image as a color palette to display colors in HEX, RGB, and HSL.

Eva Design System
A deep learning color generator. Select a primary brand color and this app will display various "semantic" colors based on the primary.

Gradient Magic
A gallery of unique CSS gradients that you can alter in various ways and sort by popular or new.

CSS Variables for IE11
Custom Properties (CSS variables) polyfill for IE11. I'm not a big fan of polyfilling an already slow browser, but this is an option if you need it.

CSSJanus
Online tool to convert CSS stylesheets between left-to-right and right-to-left.

a11y-css-reset
A small set of global rules to make things accessible and reset default styling.

CSSWAND
A small library of CSS effects including some loading animations.

SimpleShare.IO
A helper site to build buttons for sharing links on the various social sites, but without loading JavaScript or invading the privacy of your visitors.

Remark
A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS.

PilotMail
Build awesome HTML emails and test them easily on real email clients before sending.

Testing and Debugging Tools

Website Speed Test
Site speed test tool for WordPress sites that displays a summary of performance, suggestions for improvement, then a larger breakdown with more load time details.

reCAPTCHA demo
Try out the various forms of reCAPTCHA.

debugment
Embed debug code inside a // @debug comment that can be toggled from the command line.

performance-budgets
Docker tool to give you a simple way to check and stay on top of performance by setting performance budgets.

voiceover-helper
Safari Bookmarklet to hide the content of a page and show a quick guide to using Safari VoiceOver.

Uptime Robot
Free website uptime monitoring. 50 monitors, checked every 5 minutes.

Contrast Swatch
Image microservice for color contrast information. Contrast swatch images can be used in any place an image is rendered. The URL accepts a foreground and background color (e.g. contrast.now.sh/cff/40f).

Algorithm Visualizer
An interactive online platform that visualizes algorithms from code (supports JavaScript, C++, and Java).

Response
A real-time incident response and reporting tool.

Twitter Card Validator
Tool to check if a given URL will appear in the 'card' format when used in a Tweet.

Lighthouse Bot
Run Lighthouse in continuous integration, as a web service, using Docker. Pass/Fail GitHub pull requests.

Vue Tools

Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech.  promoted

vue-reactive-refs
Make $refs reactive so they can be used in computed properties and watchers.

vue-willtable
An editable Excel-like table component for Vue.

vue-to-react
Turn a Vue component into a React component.

OverVue
A prototyping tool that allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview.

Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.

vue-devtools
Now at version 5+ (details). A browser developer tools extension for debugging Vue applications.

simple-keyboard
The beautiful virtual keyboard as a Vue component.

lit-vue
Use all Vue SFC (Single File Component) features in JavaScript and TypeScript files.

Vue Smart Route
Allows you to create a query system based on your routes. You can simply create a command input that creates smart actions, both static routes and the async ones.

A Tweet for Thought

Apparently you can misspell the word "Disallow" in your robots.txt file and Google will probably still parse it correctly.
 

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

And this year's award for strangest GitHub repo goes to...

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly