Web Tools Weekly
What a Tool!

Issue #233  (String.repeat(), CSS/HTML, Frameworks, Vue)01/04/18

Of all the JavaScript and DOM coding tips I've provided in the intro of this newsletter, I guarantee you this one is the greatest of all. It will blow your mind.

Let's say you have a string and for whatever reason you want to repeat that string a specified amount of times. Maybe there's some user input that defines how many times to repeat it. Well, instead of doing some messy string concatenation gymnastics, you can do this:

const myString = "Example text ";
const myNewString = myString.repeat(8);


// Result: "Example text Example text Example text Example text Example text Example text Example text Example text "

JS Bin demo

As shown in the code and the demo, ES6 has added the String.prototype.repeat() method to your string manipulation tool box, so you can easily repeat a string a specified amount by passing in a non-negative integer value as the lone argument.

(Alright, I apologize for the hyperbole in that first paragraph. But in a dev world where we see a post on arrow functions and let and const almost every week, I think it's nice to appreciate the little things in ES6!)

In his book Understanding ES6, Nicholas Zakas offers a nice use case: A code formatting utility that defines indentation level. Here's a hacky example:

// set indent level e.g. 4 spaces
let indent = " ".repeat(4),
    indentLevel = 0,
    codeBlock = document.querySelector('pre code');

codeBlock.innerHTML = "function myFunc () {\n";

codeBlock.innerHTML += indent + "if (something) {\n";

codeBlock.innerHTML += indent.repeat(indentLevel) + "return true;\n";

codeBlock.innerHTML += indent.repeat(indentLevel) + "}\n";

codeBlock.innerHTML += indent.repeat(indentLevel) + "}\n";

View on JS Bin

In that example, which builds a mock JavaScript code block and displays it on the page, you can change the indent level by adjusting the variable on the first line (e.g. tabs, spaces, and the number of time to repeat it). Everything else will just work based on incrementing and decrementing the indentLevel variable.

The only desktop browser that doesn't support String.repeat() is IE11, but MDN has a polyfill if you want to use this today.

Now on to this week's tools!
Did you enjoy this coding tip? I've put many of my older tips into $5 e-books:
70 JavaScript & DOM Tips (Volume 1)
70 JavaScript & DOM Tips (Volume 2)

CSS and HTML Tools

Runway App
Online GUI to build your own style guides, hosted in the cloud. This is an update to a previous version that builds your styleguide automatically via CSS comments.

A tool to transform HTML/XML with JavaScript plugins, which are small plain functions that receive a node tree, transform it, and return a modified tree.

Specificity Visualizer
Get a quick overview of selectors and their specificity across a CSS file in bird’s-eye view.

A simple query syntax for CSS element queries.

MacOS application that takes TTF and OTF files and outputs a web font bundle: WOFF2, WOFF, TTF/OTF.

Now at version 1+. Extracts and inlines critical-path (above-the-fold) CSS from HTML.

A PostCSS plugin to automatically add classes for various font loading strategies.

The next generation of CSS-in-JavaScript. High performance, lightweight CSS-in-JS library that supports both string and object based styles.

Not an accurate title, but this is an online tool to convert future-CSS features (commonly seen in cssnext, the PostCSS plugin) to their well-supported equivalents.

Next level animation for web presentations, powered by GSAP.

Front-end Frameworks

Free themes for Bulma, the flexbox-based CSS framework.

A micro (~3kb) CSS framework. Preprocessor-free, 12-column grid, and extendable with CSS variables.

Build .NET desktop applications using HTML, CSS, and JavaScript. Don't worry this is not from the web dev version of The Onion.

A free and modern Bootstrap 4 UI toolkit.

This is different: A not-so-formal CSS framework. Elements have a hand-drawn comic strip feel.

Native JavaScript for Bootstrap
Bootstrap 3's jQuery plugins redeveloped with native JavaScript, providing the same basic functionality, but lighter and faster.

Very opinionated seed project for getting started with React applications.

A boilerplate for Progressive web applications (PWA) with server side rendering, built with SEO, page speed, and UX optimizations.

React Slingshot
Now at version 7+. A comprehensive starter kit for rapid application development using React.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Vue Tools

Basic inspector for Vue.js designed for testing and debugging on mobile devices.

A tool for testing and debugging Vue.js applications. Extends features of the popular  Vue.js devtools Chrome extension.

Models and Collections for Vue.js
Provide a way to structure and encapsulate data in Vue applications using a single point of entry and consistent API.

Gives you the ability to transform plain data into rich models with built-in and customizable HTTP actions, computed properties, and methods.

Vue in React, React in Vue. Seamless integration of the two. Because one trendy superfluous technology is never enough.

Similar deal as above. Run Vue in React and React Native.

Vue A11Y Calendar
Localized, accessible calendar and datepicker for Vue with no external dependencies.

Simple accordion menu component in Vue 2.

Responsive admin dashboard template built with Vue.js and Bootstrap 4.

A Tweet for Thought

I really hope this doesn't catch on. Maybe I shouldn't have linked to it....

Send Me Your Tools!

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

Startup Stash is a curated directory of resources and tools to help you build your Startup. I feel like I link to a site like this at least once a month.

Thanks to all for subscribing and reading!

Keep tooling,