Web Tools #375 - Frameworks, Testing Tools, React Tools

Web Tools Weekly
WEB VERSION
What a Tool!

Issue #375 • September 24, 2020

The following intro tutorial was submitted by Erik Kückelheim, a self-taught developer living in Konstanz, Germany. In this write-up, Erik will describe how he built the editor used in his new website JSchallenger, which I featured in a recent issue.

Creating an online code editor can be tricky. I learned that while developing my JavaScript editor on JSchallenger. Here I'll present a step-by-step guide to the very basics of this editor. You can easily customize this setup in order to create your own similar app.

The first thing I need to do is get access to the HTML element that I want to turn into an editor so I can add the contenteditable attribute to allow user input:

const container = document.getElementById("container");

container.setAttribute("contenteditable", "true");

Next I'll initiate a listener for the input event that fires the handleInput function:

let timeout;

const debounce = (func, wait) => {
  clearTimeout(timeout);
  timeout = setTimeout(func, wait);
};

const handleInput = () => {
 
debounce(() => {
    format();
    setCaret();
  }, 200);
};

container.addEventListener("input", handleInput);

The handleInput function is called upon any user input. All it does is invoke the format() and setCaret() functions that are wrapped by a simple implementation of the debounce() function. Debounce() reduces the number of times syntax highlighting is fired – which can be rather expensive, depending on how many highlighting rules you apply.

The format() function reads the user input and applies syntax highlighting rules:

const format = () => {
  let text = container.innerText;
  text = text.replace(/"(.*?)"/g, (match) => {
    return `<span style='no-color:orange'>${match}</span>`;
  });
  container.innerHTML = text;
};

In this simple example, a regular expression detects text surrounded by double quotes. replace() wraps the matched text inside a span element, and some inline CSS colors it orange. innerHTML is used for the HTML syntax to be represented in the DOM.

innerHTML destroys the current selection and sets the caret to the beginning of the editor. This would interrupt the user flow. Therefore, I have to restore the caret to where it was before.

const setCaret = () => {
  let node = container.lastChild;
  if (node) {
    const sel = window.getSelection();
    while(node.nodeType === 1 && node.childNodes.length > 0) {
      node = node.lastChild;
    }
  sel.collapse(node, node.length);
  }
};

setCaret, in the code above, is a simpler version of the actual implementation on JSchallenger. It sets the caret to the end of the editor using Selection.collapse() – which requires the very last text node of the editor. However, once I apply syntax highlighting, the editor might have multiple nodes of different types.

container.lastChild gives me the last child node of the editor – which might be an element node with its own child nodes or a text node. In order to identify the last text node, I apply a while loop, checking if the current node is an element node that has child nodes. If so, I update the current node and repeat the process until I've identified the last text node. Eventually I can apply Selection.collapse() and set the caret to the last character of the last text node.

And that's it! This provides a very basic but functioning code highlighter for a live editor. Here is a rudimentary CodePen demo where you can try it out. But keep in mind that this version is extremely limited for the purpose of this brief tutorial. For the editor to fully work with multiple lines of code, I would have to add some additional features, which I'll leave for another time. You can try the full working version on JSchallenger or contact me on Twitter @kueckelheim and let me know what you think!
 

Now on to this week's tools!

Front-end Frameworks

Spectre.css
A Lightweight, Responsive and Modern CSS Framework that uses flexbox and has lots of components ready for use.

WrapPixel
Angular, React, Vue, and Bootstrap 4 templates and themes, both free and paid.

Arwes
Futuristic sci-fi and cyberpunk-inspired graphical UI framework for web apps. Includes some neat animations and audio.
 
Arwes

Frontendor
A library of reusable HTML blocks and templates to help you build beautiful and professional landing pages quickly and easily by copy-paste.

Brahmos
Supercharged JavaScript library to build user interfaces with React and native templates.

Geist UI
An open source design system for building modern websites and applications. Includes support for React, Vue, and more.

Repluggable
Pluggable micro frontends in React+Redux apps.

Superfine
Now at version 8+. A minimal view layer for building web interfaces. Think Hyperapp without the framework—no state machines, effects, or subscriptions—just the absolute bare minimum.

Electron React Boilerplate
Uses Electron, React, Redux, React Router, webpack, and React Hot Loader for rapid application development.

Toast UI
Now at version 2+. A UI library that includes components, charts, a WYSIWYG editor, and more.

Ionic
The popular cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps hit version 5 early this year.
 
Recommended Reading for Developers:

Testing and Debugging Tools

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted

PWA Inside
A directory of various PWA resources that also includes a manifest generator and a PWA audit.

LT Browser
Mobile view debugging on 25+ device resolutions. Check the mobile view of websites on iOS devices and test both on iPhone and iPad simultaneously.

Uptime360
One-stop monitoring solution. Monitor server, website, blacklist, custom services, and publish status pages. Get notified instantly via Slack, Twitter, Email, SMS, and more.

StackTracey
JavaScript utility to parse call stacks, reads sources with clean and filtered output and sourcemaps.

Spearmint
A simpler way to test your React app. Easily create tests using a UI and refer to the browser, codebase, and docs all in one place. Converts to Jest tests.
 
Spearmint

jscpd
Copy/paste detector for source code that provides the ability to find duplicated blocks implemented on more than 150 programming languages and digital formats of documents.

Check Browser Support
A Chrome or Firefox extension to check browser compatibility for various web platform features by selecting text (e.g. when reading an article or tutorial on a web page).

Instatus
A status page service that's more affordable than other popular alternatives.

Placeholdifier
Chrome extension that turns any website into a live wireframe. Useful for demos, streaming, hiding personal information, visual regression, and more.

Teston
JavaScript test runner similar to tape, but with ES6 module support, simpler sub-test syntax and nice indentation.
 

React Tools

Reactjs-popup
A simple popup component to help you create simple and complex modals, tooltips, and menus for React.

Juliette
Reactive state management powered by RxJS.

react-colorful
A tiny color picker component for modern React apps that's tree-shakable and mobile friendly.
 
react-colorful

react-slick
A React port of the old Slick carousel component.

react-blurify
React component to apply a blur effect to child components.

react-three-flex
Brings the flexbox spec to react-three-fiber, based on Yoga, Facebook's open source layout engine for React Native.

react-async-hook
React hook to handle any async operation in React components.

Draft.js
A Rich text editor framework for React that's customizable and built with Immutable.js

useSound
A React Hook for playing sound effects.

kripod-react-hooks
Essential set of React Hooks for convenient Web API consumption and state management.

Immer
The popular React state management solution is now at version 7+.
 

A Tweet for Thought

Sarah Dayan with some lessons learned from 10 years of software engineering.

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

This repo reveals how Sindre Sorhus added CSS/SVG animation to a README on GitHub. Spoiler: It uses an element called "foreignObject" inside an SVG element.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #374 - CSS Tools, JSON, DBs, Uncats

Thursday, September 17, 2020

Web Tools Weekly WEB VERSION Issue #374 • September 17, 2020 Previously I've discussed a number of different tips around object and array destructuring in ES6, which make code much easier to read

Web Tools #373 - Media Tools, JS Libs, Vue Tools

Thursday, September 10, 2020

Web Tools Weekly WEB VERSION Issue #373 • September 10, 2020 The Google Developers team recently posted a new article in their web.dev resource that's worth checking out: Use advanced typography

Web Tools #371 - Frontend Frameworks, JS Utilities, Build Tools

Thursday, August 27, 2020

Web Tools Weekly WEB VERSION Issue #371 • August 27, 2020 JavaScript's Date object is quite a monster when you take a look at all the methods available on it for manipulating and dealing with dates

Web Tools #370 - Media Tools, Testing/Debugging, Uncats

Thursday, August 20, 2020

Web Tools Weekly WEB VERSION Issue #370 • August 20, 2020 This past week I came across a YouTube video by someone named Aaron Jack called 21 LIFE CHANGING JavaScript tricks that you'll definitely

Web Tools #369 - CSS Tools, VS Code, React Tools

Thursday, August 13, 2020

Web Tools Weekly WEB VERSION Issue #369 • August 13, 2020 Previously I discussed the usefulness of the Array.entries() method, which allows you to get an iterator object that holds the key/value pairs

You Might Also Like

Apple RCS 📱, SBF's 25 year sentence 👮, Linux Foundation's Redis fork 👨‍💻

Friday, March 29, 2024

RCS is coming to the iPhone in the fall of 2024 Sign Up|Advertise|View Online TLDR Together With Veracode TLDR 2024-03-29 Build fast, build secure (Sponsor) Software is drowning in security debt.

Data Science Weekly - Issue 540

Friday, March 29, 2024

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

This Week in Rust #540

Friday, March 29, 2024

Email isn't displaying correctly? Read this e-mail on the Web This Week in Rust issue 540 — 27 MAR 2024 Hello and welcome to another issue of This Week in Rust! Rust is a programming language

The Value Of A Promise 🤞

Friday, March 29, 2024

How much is a promise from a tech company really worth, anyway? Here's a version for your browser. Hunting for the end of the long tail • March 28, 2024 The Value Of A Promise When you hear a

New Elastic Security for SIEM Training Course

Friday, March 29, 2024

Detect and respond to evolving threats ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ elastic | Search. Observe. Protect Detect anomalies and malicious behavior March

SBF gets 25 years 

Thursday, March 28, 2024

Sam Bankman-Fried is sentenced View this email online in your browser By Christine Hall Thursday, March 28, 2024 Welcome back to TechCrunch PM! The editorial team spent a chunk of the day discussing

💎 Issue 410 - Being laid off in 2023-2024 as an early-career developer

Thursday, March 28, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 403 - Microsoft defends .NET 9 features competing with open source ecosystem

Thursday, March 28, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 403 Release Date Mar 28, 2024 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 410 - Node.js TSC Confirms: No Intention to Remove npm from Distribution

Thursday, March 28, 2024

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Node.js news, articles and

💻 Issue 410 - JSDoc as an alternative TypeScript syntax

Thursday, March 28, 2024

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular JavaScript news, articles