Issue #230 (for...of, React Tools, Testing, Static Sites)12/14/17
Download 120+ Unique, Premium Typefaces
This Autumn Font Sale is overloaded with more than 120 gorgeous typefaces, culled from 31 different font families. You'll be privy to a wide variety of styles ranging from vintage to cartoony, not to mention a slew of extras like alternates. No matter your latest project, you're bound to find the perfect font in this collection. See the fonts here
|
|
JavaScript has had a for...in loop since the earliest version of the spec. ES6 however, adds a for...of loop, which has good support across all modern browsers (but no IE11 support, only Edge).
Due to the syntax being so similar, the difference between the two can be tough to remember, but they are quite different. Simply put, the difference is:
- for...in iterates over the enumerable properties of an object
- for...of iterates over the property values of objects
You can see how this works by using each type of loop to iterate over the same string:
|
let myString = "test";
// logs 0, 1, 2, 3
for (let i in myString) {
console.log(i);
}
// logs t, e, s, t
for (let i of myString) {
console.log(i);
}
|
View on JS Bin
In this case, for...in iterates over the properties (not the values), thus logging the indexes because the object is a string, while for...of logs each character in the string (i.e. the values).
In other words, in the case of for...in, the variable (i) is assigned a different property name on each iteration, whereas with for...of, the variable is assigned a different property value.
Some notes and tips to keep in mind for both these types of loops:
- for...in should not be used if the index order of the items is important because there is no guarantee they will be given in the intended order
- If you only want to iterate over an object's own properties, use getOwnPropertyNames() or something similar, instead of for...in.
- You can use const as the variable for either loop, as long as you're not trying to change the value of the variable (thus obeying the rules of const)
- You can use statements like break or return to terminate either of these loops before they complete
More info on MDN:
Now on to this week's tools!
|
React Tools
react-accessible-modal
An accessible modal dialog component for React. Test the demo via keyboard for full effect.
React Responsive Tables
Responsive tables for React. For smaller screens, this converts a standard HTML table into a two-column table, with the header as the first column and the corresponding data in the second column.
React Metro
A tiny configurable wrapper for animating DOM elements as they mount or unmount.
React Network
Notifies your app when the network connection goes online or offline.
react-offline-hoc
A React higher-order component factory to enhance your existing components with an isOnline prop that indicates the app's online/offline status.
react-toggled
Component to build simple, flexible, and accessible toggle components.
React-PDF
Easily display PDF files in your React application.
react-snap
A zero-configuration static pre-renderer for Single Page Applications.
|
Testing and Debugging Tools
Site-wide WAVE Products
Accessibility tools from WAVE that allow you to test more than one page at a time (Stand-alone API, subscription API, DinoLytics Accessibility, and WAVE Runner).
jsMarka
A JavaScript code performance benchmarking app, providing an easy way to create and share test cases.
GSDevTools
A visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more.
RegViz
Visual debugging tool for JavaScript Regular Expressions.
React Sight
A live view of the component hierarchy tree of your React application with support for React Router and Redux.
API Tester
The easiest way to test APIs. Make HTTP requests, extract values from the responses, assert the values are correct, reuse variables across steps, or inject custom logic using JavaScript.
accessibilityjs
Client side accessibility error scanner.
Beta Family
A crowdtesting community for beta testing iOS and Android applications. You can test your app on real people and get an honest opinion on the user experience.
|
Static Sites, CMS's, Site Builders, etc.
Gutenberg
Your one-stop static site engine. Forget dependencies. Everything you need in one binary.
ORY Sites
Next-generation static site generator. No markdown, no databases, no PHP, 100% open source.
React Static
A progressive static-site generator for React. A minimalistic framework for server-rendered React applications carefully designed to meet standards of SEO, site performance, and user/developer experience.
schnack.js
A simple node app for Disqus-like drop-in commenting on static websites.
Fly
An Application Delivery Network (ADN). It's a global load balancer, a smart reverse proxy, a library of Middleware, a CDN that developers control.
HardyPress
Use WordPress as a static site generator.
Scotty.js
Deploy static websites or folders to AWS S3 with a single command.
Component IO
Add live editing to any website so non-developers can make edits too. Component IO is the modern, magical way to manage content.
Ghost
Now at version 1+. A fully open source, hackable platform for building and running a modern online publication.
|
A Tweet for Thought
Can we all agree that maybe job titles have gone too far?
Suggestions / Corrections
Made something? Send links via 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...
Speakerdex is a place for speakers to share talks and for event organizers to find them. Seems useful especially now that Lanyrd seems to be dead.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
