Web Tools Weekly
What a Tool!

Issue #257  (Array.from() this, CSS, React, Mobile)

Previously I showed you how to include a map function as the second argument when using the Array.from() method. The map function lets you manipulate a collection as you convert it to an array.

One final optional argument you are permitted to include is the value of this when the map function is executed. This is similar to using bind(), call(), and apply().

In this case, if the map function is an object, defining the value of this can come in handy:

let myObj = {
  someValue: 5,

  doSomething(a) {
    return a + this.someValue;
  }
}
 
function doAnotherThing() {
  return Array.from(arguments, myObj.doSomething, myObj);
}

 
let myArray = doAnotherThing(5, 10, 20);
 
console.log(myArray); // [10, 15, 25]

Try on JS Bin

Two things to note above:
  • The doSomething() function is a method of myObj, and it references this.
  • The doAnotherThing() function is where Array.from() is used. In order to ensure myObj.someValue is easily accessible inside the map function, myObj is specified as the value of this.
If I didn't define myObj as the third argument in Array.from(), then the value of this would either be the Window object or undefined, depending on whether the code is in strict mode or not. Otherwise, I'd have to refer to it directly using myObj.someValue, which is fine but maybe not ideal in certain larger code examples.

Now on to this week's tools!

CSS and HTML Tools

WickedCSS Animations
CSS animation library that includes some simple ones plus a number of "wicked" animations that aren't applicable in all situations.

swup
Enables CSS-powered animated page transitions. Define how your page looks in the transition state, and swup takes care of the rest.

Classnames
A simple JavaScript utility for conditionally joining together CSS class names.

Hyphenopoly
A JavaScript polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS hyphenation, including if hyphenation is not supported for a specific language.

Themify
CSS themes made easy. A robust, opinionated solution to manage themes in your web app.

cssgr.id
A playground to build grids and output the needed code using the CSS Grid Layout standard.

Feature Queries Manager
Manage and toggle CSS on a page behind a @supports feature query.

Keyframes.app
Gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor.

CSS Paint Polyfill
A polyfill for the Houdini-based CSS Paint API.

Requests-HTML
A Python 3 library to make parsing HTML (e.g. web scraping) as simple and intuitive as possible.

Turndown
An HTML to Markdown converter written in JavaScript.

Recommended Reading for Developers
Learning React Book   CSS Secrets Book   CSS in Depth Book

React Tools

React Draggable Tags
An easy and flexible tag component with a "drag and drop" feature to reorganize the tags.

React Bolivianite Grid
React grid component for virtualized rendering of large tabular data, similar to an Excel or Google sheet.

react-metismenu
A simple to use, highly customizable, updateable, Ajax supported, animated and material-designed menu component for React.

React Kawaii
A library of cute SVG illustrations (React components). Ideal if you want to give some cuteness and personality to your React application.

react-fetches
A simple and efficient way to make requests into your REST APIs.

Reach Router
Next-generation routing for React.

React Selectrix
A beautiful, materialized and flexible React select replacement.

compose-state
A library that composes multiple state updaters in React.

calidation
A form validation library for React that provides you with powerful and flexible validation.

react-stopwatch
A simple stopwatch component built on React.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Mobile Tools and React Native

Capacitor
In Alpha. Cross-platform runtime that makes it easy to build apps that run natively on iOS, Android, Electron, and the web – using HTML, JavaScript, and CSS.

React Native Copilot
An "app tour" walk-through plugin for React Native.

react-native-reanimated
React Native's Animated library re-implemented. Provides a more comprehensive, low level abstraction for the Animated library API.

ScrollHint
A JavaScript library to suggest via a hand+arrows icon that an element is scrollable horizontally. Try the demo on mobile.

Responsive Table
A mobile-friendly table solution that persists headers for each table cell on mobile devices.

react-native-stretchy
A React Native scrollable stretchy header component fully optimized for lists.

react-native-tabbar
A tabbar component (i.e. a navigation element) for React Native.

Aurelia Framework7
Quickly build cross-platform hybrid apps and PWAs for web and mobile, using the slick animations and UI components of Framework7, and the modular, testable and extensible Aurelia framework.

A Tweet for Thought

A tweet and discussion about the launch of USA Today's "EU only" website, which is simpler and stripped down, due to the new GDPR law.
 

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

Here's a ridiculous Chrome extension that makes GitHub look like Windows XP. Now your life is truly complete.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly