Issue #257  (Array.from() this, CSS/HTML, React, Mobile)06/21/18

Are You a Superstar Programmer? Take your programming career to the next level with a strong personal brand that befits your work. In 5 different ways, use a .TECH domain to fuel your job trajectory & welcome massive growth opportunities! Get YourName.tech at 90% OFF! Find Out More

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:

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

CSS and HTML Tools

.TECH Domains
Take your programming career to the next level with a strong personal brand that befits your work. Get YourName.tech at 90% OFF!   sponsored via Syndicate 

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.

React Tools

React Expert? Try Vettery
Vettery helps developers find jobs. Top React developers can get 5+ interview requests during their first week on the platform.     sponsored via Paved 

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.

Mobile Tools and React Native

Mobile Expert? Try Vettery
Vettery helps developers find jobs. Top mobile developers can get 5+ interview requests during their first week on the platform.     sponsored via Paved 

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
@LouisLazaris