Web Tools #453 - IE11 to Edge, JS Utilities, SVG, React Native

Advertisement

I hate the fact that in 2022 we're still occasionally bringing up the remote possibility that a user might be visiting your web pages — or worse, your web app! — using an old browser like Internet Explorer 11.

If you notice traffic in your browser logs from IE11, there is something you can do that's been set up by Microsoft (you've heard of them, right? They're that 1990s dot-com that caused this whole debacle in the first place).

The Microsoft Edge docs include an article entitled Move users to Microsoft Edge from Internet Explorer. As the article describes:

"When an Internet Explorer user goes to a website that's incompatible with Internet Explorer, Windows can automatically redirect the user to Microsoft Edge. Only websites that are part of the Need Microsoft Edge list are redirected."

In order to get on the "Need Microsoft Edge" list, simply follow the instructions under the heading "Request an update to the Internet Explorer compatibility list". Once approved, your website will appear in this public XML file. Notice that Google has added 21 of their domains and apps to the list.

When that's in place, users on IE11 who open your Microsoft-approved URL will be automatically instructed to upgrade to MS Edge to view the page. This means you don't have to include any old-school IE conditional code to display a special message for those users. And if I understand correctly, if the user already has Edge installed, then the page will automatically be redirected to open in Edge.

For more details on this, see the original article along with this Tweet thread where I first heard about it, and this Stack Overflow question/answer that explains the mechanism behind how this works.
 

Now on to this week's tools!
 

JavaScript Utilities

Choosing the Best WYSIWYG Editor for Styling Tables
Tables are perfect for representing data and information in an organized way, and it’s important to choose a WYSIWYG editor that makes the creation and editing experience with these tables simple for the user. Read for FREE! sponsored  

magic-string
A small, fast utility for manipulating strings and generating sourcemaps.

Beam
An open-source simple Markdown-based message board that allows team members to write posts to share across your organization.

lets-run
Node utility to run a command when a certain file exists, and/or watch files to rerun on changes.

@webtoon/psd
A lightweight dependency-free Photoshop .psd/.psb file parser for the browser and Node, written in TypeScript.

Apollo
A JavaScript library to get real-time economic declarations such as inflation rates, unemployment rates, or interest rates reported by governments or other entities.

Obliterator
A dead simple JavaScript/TypeScript library providing miscellaneous higher-order iterator/iterable functions, such as combining two or more iterators into one.

speed-highlight
A light, fast, easy-to-use, and dependency-free JavaScript syntax highlighter, that has automatic language detection.

Locomotive Scroll
A JavaScript library for detecting elements in the viewport and smooth scrolling with parallax effects.

Leaflet.Control.FullScreen
A plugin that adds a full-screen button to Leaflet embeds, the popular interactive maps library.

modern-async
A modern JavaScript tooling library for asynchronous operations using async/await, promises, and async generators.

Mammoth
An older project. A .docx to HTML converter that also converts Google Docs and LibreOffice, producing clean, semantic HTML.

On the Release Radar:

• TinyMCE - The popular rich text editor is now at version 6+
• NextAuth.js - Authentication for Next.js now at version 4+
• Choices - Configurable select box utility now at version 10+

Media Tools (SVG, Video, etc.)

Add Local Delivery to Your Business with Doordash's API Integration
DoorDash Developer gives your business access to a nationwide network of delivery drivers with just a few lines of code. Scalable to your needs, it’s the best, easiest way to offer delivery from any business. Get started now.   sponsored 

Video to Reels
Automate the process of converting a video file to a format usable on Instagram Reels, powered by FFMpeg, ImageMagick, Tensorflow, and more.

Skill Icons
A set of hosted icons you can reference on your GitHub profile, a resumé, etc., to indicate your skills (e.g. JS, HTML5, React, AWS, PHP, and lots more).

Retoucher
Online tool to remove the background from an uploaded image. You can adjust and edit the result before downloading the final version.

Fluent Icons
An unofficial repository for Microsoft's Fluent UI icon set, where you can search and add to favourites from any of the 4000+ icons in various formats.
 
React Waves Effect
A React component to add a customizable ripple or wave effect on a button, or other page element.

dddraw
Online app to freehand draw SVG graphics that have a hand-drawn feel, with smoothing applied. Pick a color, brush style and brush size before exporting as SVG.

Bulk Compress Images
Online tool to bulk compress images and convert to formats like JPEG, PNG, WEBP, AVIF, and JXL.

SQIP
An image processor available as a node API and CLI to do things like create tiny image previews, convert to abstract art, resize, etc.

Uppbeat
A gallery of music in various categories that you can use for YouTube videos or other projects. Allows up to 10 downloads per month in the free plan.

Color Picker from Image
Upload an image then use a color picker to choose colors from the image to make a color palette.

On the Release Radar:

• Sigma.js - JavaScript graph visualization library now at version 2+
• OpenSeadragon - High-res image zoom utility now at version 3+
• Signature Pad - Canvas-based drawing utility now at version 4+

React Native and Mobile

Add Local Delivery to Your Business with Doordash's API Integration
DoorDash Developer gives your business access to a nationwide network of delivery drivers with just a few lines of code. Scalable to your needs, it’s the best, easiest way to offer delivery from any business. Get started now.   sponsored 

react-native-onboarding-swiper
An easy to setup and highly customizable onboarding flow component for React Native apps.

React Native Loading Spinner Overlay
Add a familiar loading experience with various options for customization.

React Native Skia
Utility that brings the Skia 2D Graphics Library to React Native, a library used in graphics engines like Google Chrome, Android, Flutter, Firefox, and more.

React Modal Sheet
A flexible bottom-sheet navigation component for React, built with Framer Motion to provide smooth UX while keeping accessibility in mind.
 
react-native-reanimated-carousel
A simple React Native carousel component, fully implemented using Reanimated v2 and support for iOS, Android, and web.

react-native-gesture-handler
A React Native library that provides native-driven gesture management APIs for building touch-based experiences in React Native.

lottie-react-native
Wrapper component that brings Lottie animation to React Native apps.

React Native Clean Project
Plugin that cleans your React Native project by purging caches and modules, and reinstalling them again.

react-native-paper-tabs
Smooth and fast cross-platform Tabs UI for React Native Paper, a popular implementation of Material Design for React Native.,

React Native iOS
iOS UI implementation in React Native with gestures and animations.

react-native-customizable-toast
A toast notifications library based on Reanimated 2 layout animations.
 

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Omlet - Zero-config component monitoring and registry platform.

Easyvoice - A no-code platform to create a voice app for Alexa or Google.

Bytes - A JavaScript newsletter that's informative and entertaining. ad 

Notioly - 100+ customizable Notion-style SVG illustrations, updated monthly.

BLK Design System - A premium design system built with Bootstrap 4. ad 

Sleek Pages - A small set of four React landing page templates.

Browserflow - Automate repetitive tasks in the browser or the cloud.
 

A Tweet for Thought

Veronica Cary with a friendly reminder on the importance of security.

 

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

I don't know anything about Dragon Ball Z, which is apparently what this website is inspired by, but the whole drum-machine-like functionality is pretty cool, along with the use of emojis in the URL and file type.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip