Issue #345  (Property Descriptors, Frameworks, React, Mobile Tools)02/27/20

$500 Scholarship to Study Machine Learning We partnered with Springboard to offer you a $500 scholarship to become a Machine Learning Engineer. Available for the first 20 students that enroll. Code AISPRINBGOARD. One year of experience using an OOP language required. Learn More

For every JavaScript object, you have the ability to access that object's property descriptors. Descriptors occur for each property in the object and are essentially a record that holds the value, along with information on whether the property is writable, enumerable, or configurable.

Here's a simple example that uses the getOwnPropertyDescriptor() method to access one property's descriptors:

Notice the output is for the kind property only. You can access any single property's descriptors this way, or you can get all of them using getOwnPropertyDescriptors() (notice the "s" at the end this time). This will produced something like what you see in the following image:

Notice in this case the property's descriptors are nested as individual objects inside a primary output object.

Here's a CodePen showing these two methods in action. The console displays the results. That's just a quick introduction to property descriptors, you can read more about them on MDN.
 

Now on to this week's tools!

Front-end Frameworks

$500 Scholarship to Study Machine Learning
We partnered with Springboard to offer you a $500 scholarship to become a Machine Learning Engineer. Available for the first 20 students that enroll. Code AISPRINBGOARD. One year of experience using an OOP language required. sponsored 

Beginning
A small starter kit for your JavaScript/React projects. Includes webpack + webpack-dev-server (live-reload and watcher), TypeScript, React + styled-components, and ESLint/Prettier configuration.

Hacker UI
A design system for the modern developer that's not associated with any brand, so you can easily integrate it with your own project.

Lion Web Components
A set of highly performant, accessible, and flexible web components that provide an unopinionated, white label layer that can be extended to your own layer of components.

Griddle
A CSS framework created with CSS Grid and Flexbox with a simple and intuitive class-based system.

Theme UI Gallery
A library for building consistent, themeable React apps based on constraint-based design principles.

React Admin
A front-end framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React, and Material Design.

VIPFS
An alt-tech framework based on Vue, built with Bootstrap, Video.js, Vuex and VueRouter, for creating permanent apps, blogs and websites on IPFS.

react-typescript-web-extension-starter
A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, ESLint, Prettier, webpack and Bootstrap.

CoreUI
Bootstrap admin template built with responsive, customizable, and reusable components.

One App
A Node.js server that serves up a single page app built using React components and makes use of Holocron to allow for code splitting via independently developed, tested, and deployed Holocron modules.

React Tools

react-ufo
A simple React hook to help you with data fetching.

react-three-fiber
A React reconciler for Three.js on the web and react-native. Helps you build dynamic scene graphs declaratively with re-usable components.

react-input-position
A React component that decorates it's children with mouse/touch position tracking, a status toggle fired by click/gesture events, and more.

Why Did You Render
Monkey patches React to notify you about avoidable re-renders.

React Cool Onclickoutside
React hook to listen for clicks outside of components. Useful logic for UI interaction design like dismissing a drop-down menu, modal, tooltip, etc.

react-disable
A React component for disabling a section of an app.

react-use-fuzzy
A React hook in Typescript for client-side fuzzy search using Fuse.js (the vanilla JavaScript fuzzy search tool).

react-animated-slider
A slider/carousel component for React supporting custom CSS animations.

React Animated Navigator
An extension for react-router that provides animated transitions between routes, with friendly components and hooks for navigation.

react-text-loop
An animated loop of text nodes for your headings. Uses react-motion for the transition so it handles super fast animations and spring params.

Mobile Tools and React Native

Swift Playgrounds
Mac and iOS app that makes learning Swift interactive and fun and requires no prior coding knowledge.

react-use-gesture
A hook that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures.

styled-breakpoints
Simple and powerful tool for creating breakpoints in styled-components and Emotion.

FastImage
Performant React Native image component that solves many of the problems associated with React Native's Image component.

AMP
A web component framework to easily create user-first websites, stories, ads, and emails.

Responsive Viewer
Chrome extension to show multiple screens in one view for responsive design testing.

Universal Update Checker
React component to check if there is a new version of the app, and optionally perform other actions when the current version of the app is out of date.

Polypane
Now at version 2+. Develop, debug, and test sites and apps twice as fast with using a browser for developers and designers.

react-native-indicators
Activity indicator collection for React Native.

A Tweet for Thought

Got a Tool Suggestion?

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

If you like doing online courses but don't know which one to pick, you might like Classpert. It's an online platform to find and compare online courses from multiple platforms.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris