Issue #259 (Array.find() & findIndex(), Text Editors, Angular, Vue)07/05/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
|
|
The indexOf() and lastIndexOf() methods have been available on strings since the first edition of ECMAScript, allowing you to find a string within a string. In ES5, the same methods were added for searching inside arrays.
ES6 now conveniently adds the find() and findIndex() methods, which add similar but more advanced functionality to searching within arrays. Here is some example code that demonstrates both:
|
let myArray = [10, 20, 30, 41, 53];
console.log( myArray.find(function(a) {
return a < 25;
}) ); // => 10
let myArray2 = [3, 44, 19, 89, 2];
console.log( myArray2.findIndex(b => b > 75) ); // => 3
|
Try it on JS Bin
The first example uses Array.find(), which is passed a callback function to execute on each value in the array until it finds the first one that meets the criteria provided by the function. The log outputs "10" because 10 is the first value that meets the criteria of "less than 25". The only required argument to the callback is the current element being processed (I've used "a" as the variable name).
In the second example I'm using ES6's arrow function to simplify the use of the callback. This one uses Array.findIndex(), which will return the location (instead of the value itself) of the first item that meets the given criteria. In this instance, I'm looking for the first item that's greater than the value 75, which is the item at index 3.
That's Array.find() and Array.findIndex() in a nutshell — two array methods that I'm sure you'll find useful.
Now on to this week's tools!
|
Text Editors and Code Playgrounds
.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
TypeScript Playground
A TypeScript playground with lots of built-in examples and options. Allows you to compile TypeScript and see JavaScript output.
code.xyz
Online code editor to build enterprise-quality APIs, the powerful building blocks of software, in a single click — designed for everyone: marketer to staff engineer.
Simple Live Editor
A "dumb CodePen" online HTML, CSS, and JavaScript editor created with very little code. Useful to examine the code and see how this sort of thing can be built.
Spirit
Mac desktop animation tool for the web. Uses a timeline editor real-time feedback.
Hadron
Early access. A unified platform for designers and developers that includes code- and component-based design tools.
Subliminal
An opinionated minimalistic VS Code theme for JavaScript inspired by Sublime Text's Spacegray theme.
CSS Grid Layout Interface Builder
Visual interface builder for CSS Grid to easily create and export your custom layouts (with legacy grid support).
Tern for Vim
Vim plugin that provides Tern-based JavaScript editing support, for intelligent JavaScript editing.
|
|
Recommended Reading for Developers
|
Angular Tools
ngx-drag-to-select
A lightweight, fast, configurable and reactive drag-to-select component for Angular 5 and beyond.
Spectator
Angular tests made easy. Written on top of the Angular Testing Framework and provides a cleaner API for testing, and a set of custom matchers that will help you to test DOM elements.
AngularFire
The official Angular library for Firebase.
NGXS
A state management pattern + library for Angular.
shallow-render
Angular 5 & 6 testing made easy with shallow rendering and easy mocking.
ngx-datatable
A feature-rich yet lightweight data-table crafted for Angular4 and beyond.
ivy-code-size
A repo with a live demo of Ivy Renderer, a new backwards-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility. Details here.
ngrev
Graphical tool for reverse engineering of Angular projects. It allows you to navigate in the structure of your application and observe the relationship between the different modules, providers, and directives.
|
Vue Tools
vue-rx
RxJS integration for Vue.js.
Vuexpresso
VueJS + Express + GraphQL boilerplate.
v-runtime-template
A Vue.js library that makes easy compiling and interpreting a Vue.js template at runtime by using a v-html like API.
Vuido
Create native desktop applications for Windows, OS X and Linux using Vue.js.
VueLink
Lightweight wrapper component for external and vue-router links.
vue-testing-library
Lightweight adapter allowing dom-testing-library to be used to test Vue.js components built on top of @vue/test-utils.
VuePress
Vue-powered Static Site Generator.
vue-size-provider
Declarative element size observer and provider.
vue-step-indicator
Simple step indicator for Vue.js. For example, when indicating steps to be completed in a form or other user input component.
|
A Tweet for Thought
Dan Abramov, in defense of tools, in the midst of a discussion started by Brad Frost on whether or not certain tools are useful, or just trendy.
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...
If you like podcasts, you might want to check out Podyssey, a community of podcast listeners that help you find the best podcasts and episodes.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
