|
|
|
|
Issue #153 (Array.filter(), Text Editors, Mobile, Frameworks)06/23/16
| This week's primary sponsor: |
The other day I looked for the quickest and most efficient way to remove all empty items from an array. Doing a quick search, as usual, brings up a few Stack Overflow threads with multiple solutions. One that I liked uses the Array.prototype.filter() method, introduced in ES5 and supported by all browsers including IE9+.
The Array.filter() method, according to MDN, takes a callback function as its one mandatory argument, and "creates a new array with all elements that pass the test implemented by the provided function." In other words, it filters out the stuff you don't want. Here's an example:
|
let myArray = [47, 534, 8, 389, 144, 99],
myNewArray;
function getLargeNumbers (a) {
return a >= 100;
}
myNewArray = myArray.filter(getLargeNumbers);
console.log(myNewArray); // => [534, 389, 144]
|
View on JS Bin
As you can see, the function simply returns the values in the array that are larger than 100. But what about my original problem where I wanted to remove empty items?
Well, this works like a charm:
|
let myArray = ['apple', 'orange', '', 'kiwi', 'pumpkin', 'grape', ''],
myNewArray;
myNewArray = myArray.filter(Boolean);
console.log(myNewArray);
// => ["apple", "orange", "kiwi", "pumpkin", "grape"]
|
View on JS Bin
Notice that the two empty items are now removed. In this instance, I'm using Boolean as the callback function. MDN explains that the Boolean object is "an object wrapper for a boolean value." So in a nutshell it will automatically filter out falsy values when used in this way. But beware of this, because it will filter out zero values, false, null, and undefined, in addition to empty slots. If for some reason you want any of those to remain in the array, then you'll have to use a different callback function.
Now on to this week's tools!
Text Editors, Site Builders, etc.
ManifeStation
"Enter a domain to have a W3C Web App Manifest automagically generated from its existing HTML."
Bookmark
"Bookmark’s powerful yet simple drag and drop website builder gives you full control to create your stunning website with just a few clicks."
HyperDev
"A developer playground that lets you code a real web-app without the slow setup and deployment steps."
Carrd
"Simple, free, fully responsive one-page sites for pretty much anything."
animachine
Chrome extension, proof of concept. "A timeline based animation tool in a browser extension for animating your web content in its original context."
Deco
All-in-one IDE for building React Native applications.
Komodo IDE
"The professional IDE for major web languages, including Python, PHP, Ruby, Perl, HTML, CSS and JavaScript."
vim-dracula
The popular Dracula color scheme ported to Vim.
Electron
Now at version 1.x. "A framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application."
Cloud9
"Your development environment, in the cloud. Cloud9 combines a powerful online code editor with a full Ubuntu workspace in the cloud."
RWD and Mobile Tools
MJML App
"Originally created by a team of developers at Mailjet, MJML's objective is to simplify the way people design responsive emails."
Responsive Test
A quick way to test different viewport sizes for responsive designs.
Hover on Touch
"JavaScript plugin for an alternative hover function on mobile devices. It shows secondary information on Taphold & goes to a link on Tap."
Onsen UI
"HTML5 hybrid mobile app framework and UI components for PhoneGap & Cordova."
Resizer
Google's entry in the RWD testing sites.
App Indexing Validator
"Enter your domain/webpage and Android App Package Name or Apple App Store ID below to test if your website is properly configured for App Indexing."
Hamburgers
A library of CSS-animated hamburger menus.
Mobile Webshots
Beta service. "Get screenshots of a given URL, taken on several mobile browsers and devices located on our test platform."
JavaScript Breakpoints
"Small library that syncs CSS media queries to breakpoint events in JavaScript. Helpful to change JavaScript logic for different screen sizes, resolutions or other media query features."
Front-end Frameworks
reactstrap
"Easy to use React Bootstrap 4 components."
Atomic Docs
"A front end style guide generator and SCSS/Less/Stylus partial manager."
Frend
"A collection of accessible, modern front-end components." Accessible and dependency-free.
React.js Boilerplate
"Quick setup for new performance orientated, offline–first React.js applications."
Angular 2 ESNext Starter
"Angular 2 development in JavaScript with ES6/ES7 syntax powered by Babel."
Kickoff
Now at version 7.x. "A lightweight front-end framework for creating scalable, performant and responsive sites."
A Tweet for Thought
Scott Jehl with a few thoughts on Progressive Enhancement, which seems to be the topic du jour.
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...
You might want to check out Microsoft's new CaptionBot, which uses AI to attempt to describe any image you give it. Results are somewhat hit and miss, but not too bad.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
