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);
console.log(myNewString);
// 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";
++indentLevel;
codeBlock.innerHTML += indent + "if (something) {\n";
++indentLevel;
codeBlock.innerHTML += indent.repeat(indentLevel) + "return true;\n";
--indentLevel;
codeBlock.innerHTML += indent.repeat(indentLevel) + "}\n";
--indentLevel;
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!
|
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.
PostHTML
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.
QSS
A simple query syntax for CSS element queries.
fontplop
MacOS application that takes TTF and OTF files and outputs a web font bundle: WOFF2, WOFF, TTF/OTF.
critical
Now at version 1+. Extracts and inlines critical-path (above-the-fold) CSS from HTML.
postcss-foft-classes
A PostCSS plugin to automatically add classes for various font loading strategies.
emotion
The next generation of CSS-in-JavaScript. High performance, lightweight CSS-in-JS library that supports both string and object based styles.
css4-to-css3
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.
TweenDeck
Next level animation for web presentations, powered by GSAP.
|
Front-end Frameworks
Bulmaswatch
Free themes for Bulma, the flexbox-based CSS framework.
chota
A micro (~3kb) CSS framework. Preprocessor-free, 12-column grid, and extendable with CSS variables.
Neutronium
Build .NET desktop applications using HTML, CSS, and JavaScript. Don't worry this is not from the web dev version of The Onion.
Shards
A free and modern Bootstrap 4 UI toolkit.
PaperCSS
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.
react-seed
Very opinionated seed project for getting started with React applications.
ReactPWA
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.
|
Vue Tools
vue-inspector
Basic inspector for Vue.js designed for testing and debugging on mobile devices.
vuetron
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.
Vue-model
Gives you the ability to transform plain data into rich models with built-in and customizable HTTP actions, computed properties, and methods.
vuera
Vue in React, React in Vue. Seamless integration of the two. Because one trendy superfluous technology is never enough.
react-vue
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.
vue-accordion-menu
Simple accordion menu component in Vue 2.
Vuestic
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
