|
|
|
|
Issue #109 (Array.splice(), Mobile, JS Libs, Build Tools)08/20/15
| Support this week's primary sponsor: |
 |
One line of code is all it takes! Think you are on top of errors in your applications? Integrate RAYGUN today and you'll be surprised just how many errors exist that you weren't aware of. Get complete peace of mind that you are going to know when problems affect users.  |
If you're not too familiar with JavaScript's Array.prototype.splice() method (notice that's splice, not slice), here are three different operations you can perform with it when manipulating arrays:
Add an array to an item at a given index:
|
var fruits = ['apple', 'orange', 'banana', 'pear'];
fruits.splice(3, 0, 'kiwi');
console.log(fruits);
// ["apple", "orange", "banana", "kiwi", "pear"]
|
By using "0" for the second argument, I'm telling the JavaScript engine to delete zero items from the array, but to add the specified array item into the 3 slot (between "banana" and "pear". The key in this case is the zero.
Remove an item located at a given index:
|
var cars = ['porsche', 'ferrari', 'lambo', 'maserati'];
cars.splice(2, 1);
console.log(cars);
// ["porsche", "ferrari", "maserati"]
|
You'll notice two differences from the previous code. The second argument is greater than zero (which defines how many items to remove) and there's also no third argument. This means I'm removing an item but I'm not adding. So the item at index 2 gets removed and nothing takes its place. The key here is the missing third argument, which is optional.
Replace an item with one or more items at a given index:
|
var planets = ['mars', 'saturn', 'jupiter', 'pluto'];
planets.splice(3, 1, 'uranus', 'mercury');
console.log(planets);
// ["mars", "saturn", "jupiter", "uranus", "mercury"]
|
In this last example, I've somewhat combined the previous two. The second argument defines one item to be removed from index 3, but I'm adding two new items at the same spot.
That's the splice() method in a nutshell. See MDN's docs for more info and here's a JS Bin demo to play around with these examples.
Now on to this week's tools!
RWD and Mobile Tools
mediaQuery Bookmarklet
"Gives a visual representation of the current viewport dimensions and most recently fired media query."
InfiniteList
"A 60fps infinite scrollable list for mobile devices."
itemSlide.js
"A simple and beautiful JavaScript touch carousel."
django-responsive-images
"A Django app for resizing images and generating src and srcset values via template tags."
Burger
"A minimal hamburger menu with fullscreen navigation."
Tabella.js
A neat touch enabled responsive tables solution with fixed table header and the ability to scroll or click to the right to view hidden columns.
Testify
"A test bed for viewing multiple mobile form factors on a single page."
Marfeel
A platform to convert your content to an ad-optimized layout to maximize revenue on mobile.
JavaScript Libraries and Frameworks
Dominus
"Lean DOM Manipulation. This isn't a drop-in replacement for jQuery, but rather a different implementation. Dominus is jQuery minus the cruft."
JAWS
"The Server-less Application Stack – Uses bleeding-edge AWS services to redefine how to build massively scalable (and cheap) apps."
react-packages
"Meteor packages for a great React developer experience."
upndown
"HTML to Markdown library, for NodeJS and the browser."
router5
An HTML5 router built to be framework agnostic, and designed to provide a more flexible and scalable solution for single page app routing.
Stateless.js
"Simple cross-browser context persistence library à la pushState, via changing the hash fragment. Mainly meant for serverless web services which need to store some state in the URL."
LLJS
Low-Level JavaScript is "a typed dialect of JavaScript that offers a C-like type system with manual memory management."
Dynamics.js
"JavaScript library to create physics-based animations."
Deployment, Build Tools, Task Runners, etc.
Fly
"A modern build system for Node based in co-routines, generators and promises."
ClickDeploy
"One click deployments from GitHub. Deploy your sites from GitHub to one or many servers without having to write a deployment script."
sigh
"A declarative functional reactive build system for the web and io.js/node.js."
Kitematic
"A simple application for managing Docker containers on Mac and Windows."
Mg
A Yeoman scaffold for front-end projects by the team at Sparkbox.
generator-smacss
"Perfectionist generator that scaffolds out different types of Frontend apps."
A Tweet for Thought
You know you're having CSS specificity issues when...
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...
This looks interesting, it's called Saent: A big white button that helps you start a focused, distraction-free work session.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
