|
|
|
|
Issue #173 (Array.slice, CSS/HTML, Testing, Uncats)11/10/16
Here's something I just learned (or maybe I just forgot about it) regarding JavaScript's Array.slice() method. Array.slice() is a well-known feature that goes back to ES3 that allows you to "slice" a portion of an array using either one or two arguments.
The first argument represents where to begin slicing in the array and, somewhat confusingly, the second argument represents the slot after the slice's ending position. Some simple examples:
|
var array = ['one', 'two', 'three', 'four', 'five'];
console.log(array.slice(2)); // ["three", "four", "five"]
console.log(array.slice(2, 4)); // ["three", "four"]
console.log(array.slice(1, 3)); // ["two", "three"]
|
As you can see, if you include only one argument, the second argument is assumed to be the length of the array, so it will grab everything from the start point on.
But interestingly, you can also use negative numbers for either of the arguments. So the following does a bit of a bizarre extraction:
|
console.log(array.slice(-4, -1)); // ["two", "three", "four"]
|
In that case I'm extracting the middle three elements in the array using negative values for start/end. But the most useful technique using negative values is when you use a single argument. This allows you to extract the specified number of elements from the back of the array, but still in the order they appear inside the array:
|
console.log(array.slice(-4)); // ["two", "three", "four", "five"]
console.log(array.slice(-2)); // ["four", "five"]
|
Demo with all examples
More info on Array.slice on MDN and, as mentioned, this is safe to use in all browsers.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
CSS and HTML Tools
CSS ICON
A pure CSS icon set with one-click options to view on CodePen and the ability to create a CodePen example animating one icon into another.
Critical Style Snapshot
"Capture critical CSS above the fold with one click. Works for most websites, this extension captures 99% of the of the currently active media query CSS. Selectors like pseudo-elements don't get captured."
Multiple.js
"An experiment in sharing background across multiple elements using CSS."
Tipograf
"A lightweight typography base. It is available in pure CSS or Less. Heavily inspired by Medium, it tries to enforce good vertical rhythm."
HTML Div Table Generator
Tool to generate HTML table code with option to convert to, or generate divs with table styles.
text-spinners
"Pure text, CSS only, font independent, inline loading indicators."
react-animations
"A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite."
Slinky
Based on Foundation for Emails, this uses a CodePen and Zurb's Inky Templating language to help you build HTML email with little hassle.
Open Color
"Open color is an open-source color scheme optimized for UI like font, background, border, etc."
W3Layouts
"Free responsive mobile website templates."
Testing and Debugging Tools
FormLinter
"Increase your form conversions by fixing common usability issues Enter a URL. FormLinter will find a form on the page and let you know if it can be improved."
Jacks
"Highlights areas you can secure your code and shows you how to improve it with expert advice, in-depth courses, and proven code fixes."
Dev Helper
Chrome extension. All-in-one development and profiling with options for rewrite and proxy rules.
Website Grader
"Optimize your website by using our free website grader tool. Improve your SEO score, site speed & performance and rank better."
Web Bloat Score Calculator
"Compare size of a page to a compressed image of the same page."
Bugsnag
"Full stack monitoring tools, integrations, and deployment and security options help you and your team take a proactive approach to code quality."
coverage-ext
"This is an extension to an old version of chrome + a custom istanbul reporter. This combo gives you the power to view what JS gets evaluated on any website."
RandomAPI
"Simplify your testing. Easily generate fake data for populating your mockups and testing your applications."
The Uncategorizables
Puma
"A modern, concurrent web server for Ruby."
Timber
"A faster, easier and more powerful way to build themes. Because WordPress is awesome, but the loop isn’t."
Portier
"An email-based, passwordless authentication service that you can host yourself."
filestack
"Build apps that can upload files from anywhere. The #1 API for file uploads, image transformations, and rapid content delivery."
IncludeWP
"Top open-source frameworks for WordPress plugin & theme developers."
WordPlate
"A modern WordPress stack which tries to simplify the fuzziness around WordPress development. Using the latest standards from PHP. WordPlate utilizes WordPress as its dependency through Composer.."
VMPower
"Stop paying for idle VMs. Automate shutdown and startup of VMs. identify underused instances. Available for AWS, Azure, and GCE."
A Tweet for Thought
Dan Abramov discusses some myths and misunderstandings of DRY code.
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...
How Much to Make is a set of three tools to help you calculate the cost of an app, website, or logo. Not sure how accurate these are, but it might be a guide for those not sure how to price their work.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
