|
|
|
|
Issue #159 (Queueing Arrays, CSS/HTML, Performance, Content)08/04/16
| This week's primary sponsor: |
If you're relatively new to JavaScript and have started working with arrays, or even if you've been working with them for a while, you might find this little reminder useful. There's a really simple way to quickly move the first item in an array to the back of the array, and vice-versa. Here's the code:
|
let myArray = ['one', 'two', 'three', 'four'];
console.log(myArray); // ["one", "two", "three", "four"]
myArray.push(myArray.shift());
console.log(myArray); // ["two", "three", "four", "one"]
myArray.unshift(myArray.pop());
console.log(myArray); // ["one", "two", "three", "four"]
|
Demo
The array methods used here are fairly common features of the language: push(), shift(), pop(), and unshift(). But the key is relying on the return values of the methods.
After creating the array and logging its contents, I'm using push() to add an item to the end. But the item I'm adding is the returned item via shift(). The shift() method not only removes the first item, but it returns that item, thus providing an easy way to move the first item from beginning to end.
The counterparts to those two methods, unshift() and pop(), are doing something similar except it's the reverse. The unshift() method adds an item to the beginning and the item added is the one returned when we "pop" one off the end.
Now on to this week's tools!
CSS and HTML Tools
Knyle Style Sheets
"KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. [It] is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or specificity guideline."
StickyState
"A high performant module making native position:sticky statefull and polyfilling the missing sticky browser feature."
forceFeed.js
"Designed to help you test your design's tolerance for variable, dynamic content. A tiny script that 'force feeds' HTML elements with random text content within specified parameters."
griddy.css
"Responsive 12 column based grid in 311 Bytes when gzipped."
React CSS components
"Define React presentational components with CSS (or even Sass or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules."
CSS Grid Inspector
"A Firefox extension for seeing the grid lines created by CSS Grid." (That is, grids built using the new Grid Layout Module by W3C.)
html-extend
Extend HTML files using an ES6-like module system and annotations.
Tootik
"A pure CSS Tooltip library. Looks great on all modern browsers, easy peasy to use."
Distro
"Automatically transform article HTML for third-party platforms such as: Instant Articles, Apple News, and Google AMP."
Type Nugget
"Typeset and generate beautiful, bulletproof CSS in browser."
Checkbox.css
"Tiny set of CSS3 animations for your checkboxes."
Performance Tools and Task Runners
Cygnus
"Fast, graceful JS-based page loading for static sites without going full SPA."
Perf Widget
"Helping prioritise performance, accessibility and security aspects of FT products by exposing these usually 'invisible' properties in the UI of the websites."
fast-memoize
"An attempt to make the fastest possible memoization library in JavaScript that supports N arguments."
Grunt
The popular JavaScript task runner is now at version 1.0.0.
gulp-standard-tasks
"An opinionated set of tasks that can be registered with gulp to quickly enable building of static assets."
Retire.js
Helps you detect the use of dependencies with vulnerabilities. Available as a Grunt plugin, CLI scanner, or Chrome/Firefox extension.
grunt-prettify
"Grunt plugin for beautifying HTML. Lots of options so that you can format/beautify the generated HTML the way you want it."
time-grunt
"Display the elapsed execution time of grunt tasks."
Content, Databases, etc.
spectacle-code-slide
A unique way to embed code examples in slide presentations, using Spectacle, a React-based presentation library.
klipse
Lets you embed code examples on web pages so that the code is live evaluated. It's worth checking out the demo to see how it works.
gDoc.js
"Use Google Spreadsheets as your CMS."
Jason
"Lets you instantly turn any data, website, or API into your own custom app."
Docbase
"Turn markdown files into a beautiful documentation hub."
Detergent
A comprehensive tool to clean and convert text from a client brief (PSD, Sketch, Illustrator, Word, Excel, etc), so you can paste it straight into HTML code.
MLDB
"An open-source database designed for machine learning."
Dgraph
"Scalable, distributed, low latency, high throughput graph database."
ReGrid
"A method of storing large files inside a RethinkDB database."
Docco
"A quick-and-dirty documentation generator, written in Literate CoffeeScript. It produces an HTML document that displays your comments intermingled with your code."
A Tweet for Thought
Una Kravets with a thought on what's wrong with our industry.
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 Startup Incorporation Checklist that some of you might find handy.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
