Web Tools Weekly Issue #315 (Array Method returns, Frameworks, JS Utils, Uncats)

Issue #315 (Array Method returns, Frameworks, JS Utils, Uncats)08/01/19

The most well-known Array methods available in JavaScript are probably push(), pop(), shift(), and unshift(). These methods allow you to add and remove items from an Array.

But one of the things you might forget about these methods is that the return values might not be exactly what you expect. So here's a review of what each of those methods returns when used:

Array.push() adds an item to the end of the array so the return value is not the added item but instead is the new length of the array.
Array.unshift(), which adds an item to the beginning of the array, does the same thing: It returns the new array length.
Array.pop() removes an item from the end of the array, but instead of returning the new array length, it returns the removed item.
Array.shift() removes an item from the beginning of the array and, you guessed it, returns the removed item.

Here's some code with comments (assume commented lines are logged):

let myArray = ['blue', 'green', 'orange', 'brown', 'pink'];

      myArray.length; // 5

      myArray.push('purple'); // 6

      myArray.unshift('black'); // 7

      myArray.pop(); // "purple"

      myArray.shift(); // "black"

      myArray.length; // 5

View it on CodePen

I guess at first glance it might be a bit confusing to remember which methods return the length and which return the item. But I suppose you can think of it this way: If the item is disappearing from the array, the code is allowing you to hold on to it for another use. Otherwise, the length is what's returned.

Just something to keep in mind if you're using those array methods (which are normally paired as push/pop and shift/unshift, thus somewhat adding to the confusion on what's returned).

Now on to this week's tools!

Front-end Frameworks

Running Serverless
50% discount for Web Tools Weekly subscribers. New book by Gojko Adzic, for software developers and architects interested in modern cloud deployment architectures with AWS Lambda and the Serverless Application Model. Offer valid until September 1, 2019. sponsored

Hucssley
A full-featured, consistent atomic, utility class library for rapidly building user interfaces.

UiFort
Professional UI Kits and admin dashboard templates to quickly develop good looking modern applications.

Material Bread
React Native components that work on multiple platforms.

Stripe Elements
Now at version 3+ (details). Rich, pre-built UI components that help you create your own pixel-perfect checkout flows across desktop and mobile.

React Boilerplate
Now at version 4+ (details). Quick setup for new performance oriented, offline–first React applications.

JavaScript Library Boilerplate Basic
Minimal library starter kit for your JavaScript projects. Webpack 4, Babel 7, UMD, Unit Testing.

CodyHouse Framework
A lightweight, mobile-first, front-end framework for building accessible, bespoke interfaces.

Material-UI
Now at version 4+ (details). React components for faster and easier web development. Build your own design system, or start with Material Design.

browser-extension-template
A Barebones browser extension boilerplate with webpack, options handler, and auto-publishing.

JavaScript Utilities

fullPage
A simple and easy-to-use library to create full-screen scrolling websites (also known as single page websites or one-page sites).

comntr
Widget that easily adds commenting to any web page.

subject-extractor
Node package that uses natural-language processing to extract the main topic/subject or topics in a string or sentence.

Effector
Lets you write simple, fast and type safe code and manage reactive state with ease.

sublet
Tiny library to subscribe functions to the data they care about. It's reactive, so changes made to the binding will trigger the subscribed function automatically.

Fullscreen Lightbox
Modern plugin for displaying images and videos in a clean overlaying box.

darkmodejs
Utility for managing Dark Mode on the web. This uses matchMedia to tap into the OS's light or dark theme preference.

Lunr
Similar to Apache Solr, the search platform, allows you to add document search and text processing to a web page.

FancyGrid
JavaScript grid library with chart integration and server communication.

URL Parser
A URL parser with some nice features to handle parameters.

Scrollama
A modern and lightweight JavaScript library for "scrollytelling" using IntersectionObserver in favor of scroll events.

The Uncategorizables

Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech. promoted

Revive
Service to analyze your Google Analytics data, then provide a list of posts that should be refreshed.

Really Simple Store
Online store for almost any website that can be set up in minutes.

Sup
Create an external status page for your startup, for use during down time.

robots.txt as a service
Alpha. Check robots.txt rules through an API.

Stream Chat
Build real-time chat in less time. Rapidly ship in-app messaging with a highly reliable chat infrastructure.

Expertrec
Ad-free, fully customizable site search.

ImportDoc
Embed a Google Doc in any web page. Updates instantly. Setup takes a minute.

API Spreadsheets
Convert your spreadsheets and CSV files to an API link.

Changefeed
A beautiful changelog for your product in seconds. Keep your users up to date and engaged with every update your team ships.

A Tweet for Thought

This is so weird: A tweet that references its own URL. Apparently this was possible in 2018, but not as easy (or impossible) to do now. Similarly, here's a YouTube video that references its own URL. Brief explanation here.

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

Mozilla created Track This, designed to allow you to confuse websites that track you and show you similar ads across domains. I'm on the fence about its usefulness (relevant ads are good, no?), but I suppose it has its validity in these privacy-conscious times.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris