Issue #92  (Array.indexOf(), CSS Tools, Mobile Tools, Uncats)


(Skip to the tools section below)


If you've done any kind of string manipulation in JavaScript, then you've likely used indexOf(). Since ES5, indexOf() is also available for use on arrays.

Here's an example, with the outputs to the right of each log:
 
var myArray = ['one', 'two', 3, 'four', 'five'];

console.log(myArray.indexOf('two')); // 1
console.log(myArray.indexOf('four')); // 3
console.log(myArray.indexOf('six')); // -1
console.log(myArray.indexOf('3')); // -1
console.log(myArray.indexOf(3)); // 2
console.log(myArray.indexOf('one', 1)); // -1

(View on JS Bin)

As with indexOf() on strings, the return is either the index of the queried object within the array, or else -1 if the object is not found.

Here are some notes on this method:
  • The search and comparison is done using strict equality. You can see this in the two examples that search for "3" and 3. Only one matches because it's a number in the array, not a string.
  • Just like String.indexOf(), you can provide a second optional argument to define where to start searching. The last line in the code above can't find "one" because it starts searching at the second place in the array (1). The default, of course, is to start searching at 0.
  • Remember that this method returns as soon as it finds the items being searched for, so this wouldn't be good to use if you have to find all elements, unless you utilize the second argument to allow a function to keep searching (or something else along those lines).
  • Supported everywhere, including IE9, as are most other ES5 features. MDN has a polyfill.
  • There's also Array.lastIndexOf(), which starts searching at the end of the array, same browser support.
 
Did you like this JS/DOM tip? I've collected 70 previous tips into an E-Book:

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)
 
Now on to this week's tools!
 

CSS and HTML Tools


restyle
A function to produce a CSS output from JavaScript. Not exactly a preprocessor, but kind of the same idea. There's a video that explains it.

Pingendo
A native app for Mac, Windows, or Linux for Bootstrap prototyping.

webfont|test
For testing and analyzing web fonts that you intend to use in your websites or projects. You can compare fonts from different sources (Google Fonts, System Fonts or other downloaded fonts).

Loaders.css
"Delightful and performance-focused pure CSS loading animations."

type.js
"Typography tools for better web type. Type.js allows you to write new CSS properties to take finer typographic control of type styles on the web."

Google Fonts Files
A GitHub repo containing the binary font files served by Google Fonts.

WHITE: One-Page HTML Theme
A really nice, one-page, responsive HTML theme based on Bootstrap 3. Has two versions including one with a video background slider.

Bootply
A multi-featured Bootstrap editor and builder.

CSS Reporter
"It's analytics for your stylesheet. Based on The Specificity Graph by Harry Roberts and Katie Fenn's parker."


 

Mobile Tools


NoSleep.js
"Prevent display sleep and enable wake lock in any Android or iOS web browser."

NativeScript
"Build truly native apps with JavaScript. Develop iOS, Android and Windows Phone apps from a single code base."

Interdimensional
"Spatial scrolling for your web pages."

Material Refresh
"Google Material Design swipe (pull) to refresh."

Onsen UI
"A Custom Elements-based HTML5 UI framework."

AngularJS Cordova generator
"A Yeoman generator which combines the best features and practices to initialise and scaffold an AngularJs based cordova mobile app using a module based approach."

Reactor
"Build a mobile app for your WordPress based business."

Cordova Mocks
A Chrome extension that provides mock data for many Cordova plugins and Cordova APIs.

 
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)
 

The Uncategorizables


devmag.io
"A network for developers and technologists to share and discover great content and geek out about technology."

Hackr.io
"Share and discover the best programming tutorials and courses online."

Pouch
"Finds websites on the internet with script URLs matching a given regex pattern."

Specfox
"Easy website specifications. Upload screens, add notes and generate beautiful PDFs to share with your developers. Creating specs has never been so fast."

Precursor
"Fast prototyping web app, makes collaboration easy."

Sandstorm
"Lets you run your own server and install apps like EtherCalc, GitLab, LibreBoard, Wave, and more as easily as you'd install apps on your phone."

IP2Location™
"A non-intrusive geo IP solution to help you to identify visitor's geographical location."

 

A Tweet for Thought

Ah, the limits of CSS. Very true, Nicholas, very true.

 

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

Check out my sliders, a CodePen collection by Ana Tudor showing what can be accomplished with just one range input.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
Copyright © 2013 Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp