Issue #12 (Pattern matching, Visual tools, Testing, JS Utils)10/10/13
In addition to the fairly common replace() method, JavaScript has three other methods for doing pattern matching when dealing with strings. First, the match() method:
var myString = "The loon moon arose at noon",
myPattern = /.oon/,
myResult = myString.match(myPattern);
console.log(myResult); // ["loon"]
(Demo) In this example, I'm calling match() on myString and passing in a regular expression as the only argument. (Note: If you don't use a RegExp, the argument will be converted to a RegExp.) The result returned is an array with the successfully matched part of the string.
To match all results, we can add the global flag (g) to the RegExp:
var myString = "The cat sat on the mat.",
myPattern = /.at/g,
myResult = myString.match(myPattern);
console.log(myResult); // ["cat", "sat", "mat"]
(Demo) Now the array returns three objects. This method additionally exposes a few properties:
var myString = "The loon moon arose at noon",
myPattern = /.oon/,
myResult = myString.match(myPattern);
console.log(myResult); // ["loon"]
console.log(myResult.index); // 4
console.log(myResult.input); // "The loon moon arose at noon"
(Demo) The index property gives the position of the start of the match while the input property shows the original, unaffected string. The match() method has similar results as the exec() method, the difference being that exec() is called on the RegExp object, not the string, while the string is passed in:
var myString = "The loon moon arose at noon",
myPattern = /.oon/,
myResult = myPattern.exec(myString);
console.log(myResult); // ["loon"]
console.log(myResult.index); // 4
console.log(myResult.input); // "The loon moon arose at noon"
(Demo) Notice the results are the same. Finally, one of the simplest methods to pattern match is using search() on a string (which works very much like test() on a RegExp):
var myString = "Rumpelstiltskin.",
myPattern = /tilt/,
myResult = myString.search(myPattern);
console.log(myResult); // 7
(Demo) The search() method returns the position of the match, if found, otherwise it returns -1.
This is just a brief overview of these features. Check out the links below from MDN for more details:
Now on to this week's tools!
Text Editors and Visual Tools
sMails
A simple online text editor that will convert your code and CSS to email-friendly code (i.e. 1999-style with inline CSS). I'm not sure how well this works, but might be worth a try.
RulersGuides.js
This is a great idea. A JavaScript library that adds rulers and guides to a web page, just like in Photoshop. Also available as a bookmarklet and can be controlled using keyboard shortcuts.
Clockwork
"A Chrome extension for PHP development, extending Developer Tools with a new panel providing all kinds of information useful for debugging and profiling your PHP scripts."
Google Web Designer
You've probably seen this one already, but if not, it's Google's answer to a visual tool that creates "HTML5" content -- whatever that means nowadays! :)
Video For Everybody Generator
A simple online editor for producing cross-browser HTML5 video code.
selfCSS
A full-featured WYSIWYG CSS editor for both desktop and tablet.
Colorsublime
A directory of themes for the Sublime Text editor. Each theme has a preview option that lets you test how different coding languages look in that theme.
MarkShow
"Markdown for browsers AND humans." This is interesting because the main difference between this and regular Markdown is the fact that it doesn't allow embedded HTML.
SublimeGit
"Full-featured Git integration for Sublime Text 2 and 3."
WakaTime
"Automatic time tracking for your text editor." This looks really useful because all you do is install the plugin and then work as normal. It will automatically keep track of time spent on each project and then you can login online to check the results.
Testing, Automation, Deployment, etc.
BrowserSwarm
"A tool that automates your testing of JavaScript across browsers."
grunt-newer
"Run Grunt tasks with only the source files modified since the last successful run."
csste.st
A collection of CSS testing tools, curated by Simon Madine.
Brunch
"A simple but powerful build process and pipeline. It’s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology."
plato
"JavaScript source code visualization, static analysis, and complexity tool." Has a few viewable examples including a source analysis for jQuery, which evidently has a "maintainability" rating of 79/100.
JSComplexity.org
"Software complexity analysis for JavaScript projects", based on a Node.js-based tool that analyzes syntax trees.
phpFastCache
"A high-performance, distributed object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load."
JavaScript Utilities
FastActive
"A javascript snippet that makes web apps feel more native."
animationFrame
A polyfill for requestAnimationFrame that claims to be "even better" than the native version.
frak
"Transforms collections of strings into regular expressions for matching those strings."
BackgroundCheck
This is interesting: "Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it." Works really well, and has an on-page demo.
Drawingboard.js
"A canvas based drawing app that you can integrate easily on your website." Includes a couple of demos and links to a few sites that integrate it.
sifter.js
"A library for textually searching arrays and hashes of objects by property (or multiple properties). Designed specifically for autocomplete."
Suggest Your Tool via Twitter
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
No ads!
To help Web Tools Weekly stay ad free, you can offer support:
Criticism? Corrections?
Suggestions, corrections, improvements? Feel free to reply to this email.
Before I Go...
If you find you're constantly maintaining lists, tasks, and doodles on real paper, you might want to check out the ideas presented in Bullet Journal. It's a note-taking system developed over many years through trial-and-error by designer Ryder Carroll. There's nothing to buy or download here; it's just a practical system that you can apply to your own note-taking, list-making, and doodling.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
