|
|
|
|
Issue #116 (String property access, CSS/HTML, JS Utils, Testing)10/08/15
Here's a ridiculously simple tip using strings that was introduced in ES5. You likely know that you can access individual items of an array using square brackets. For example:
|
var myArray = ['item0', 'item1', 'item2', 'item3'];
console.log(myArray[2]); // "item2"
|
That's simple enough. But what about treating a string like an array-like object, where the string's characters are different "items"? You could use the charAt() method:
|
var myString = "example string";
console.log(myString.charAt(3)); // "m"
|
But you can also accomplish the same thing using square brackets directly on a string:
|
console.log("my example string"[7]); // "p"
|
Just like in an array, the square brackets indicate the position of the character you want.
But there's limited use for this. MDN says: "For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable." This technique is supported in IE8+, so it's safe to use if you think it's useful.
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
HTML Server Components Compiler
"A new concept for building HTML documents that are full of different components (fancy galleries, social share buttons, 3rd party comment boxes and so on)."
Light Bootstrap Dashboard
"An admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 3 and it is fully responsive."
Jets.js
A list filter plugin that utilizes native CSS rules.
cssnano
"A modular minifier, composed of single-responsibility PostCSS plugins."
CSSfmt
"A tool that automatically formats CSS source code, inspired by Gofmt, and built on top of the PostCSS ecosystem."
CSS Modules
"A CSS file in which all class names and animation names are scoped locally by default."
Mantra
"A professional web animation tool for everyone."
Gravitons
"An extremely lightweight suite of CSS layout utilities based on modular scales and inspired by the Unix Philosophy."
BloomingMenu
"A configurable and animated radial menu. BloomingMenu is a port of AwesomeMenu for the web."
cssnext
"A CSS transpiler that allows you to use the latest CSS syntax today. It transforms new CSS specs into more compatible CSS so you don't need to wait for browser support."
html5tooltips.js
"Light and clean tooltips with smooth 3D animation. No framework required."
wallop
A flexible, mobile-first, CSS animation-based, 4kb slider/carousel.
JavaScript Utilities and Mini Libraries
Angular UI Grid
"A data grid for AngularJS; part of the AngularUI suite."
substituteteacher.js
"Will rotate through a series of sentences, transitioning between each one."
Tinderesque
"A simple Tinder-like card animation and voting system."
matter-react
A React-based set of UI components, based on the Matter UI kit.
SweetAlert
A beautiful replacement for JavaScript's "alert".
Simple Notifications
"A very lightweight notifications utility. The minified code comes in at about 1KB, there are zero external dependencies, and everything is completely customisable."
LazyLoad
"Flexible script for loading images only when they’re about to enter the viewport of a scrollable area, which supports the srcset attribute."
clipboard.js
"A modern approach to copy text to clipboard. No Flash. No dependencies. Just 2kb."
Droparea
"Drag and Drop library for React."
bling.js
"Because you want the $ of jQuery without the jQuery."
Testing and Debugging Tools
Browserling
"Live interactive cross-browser testing."
React A11y
"Warns about potential accessibility issues with your React elements."
toxy
"Hackable HTTP proxy to simulate server failure scenarios and network conditions."
IE Virtual Machines
"Test Microsoft Edge and versions of IE6 through IE11 using free virtual machines you download and manage locally."
InsiteFeedback
"A tool to easily gather feedback, bugs and change requests for your web project, enriched with one-click screenshots and deep technical info, complete history and real-time comments."
yourbrowser.is
"Check your browser details or create your own customized checker for your clients."
A Tweet for Thought
Anil Dash put together a sort of Twitter essay on ad blocking. Interesting read and subsequent discussions.
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...
Here's a neat demo: RubiCSS cube.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
