Web Tools Weekly Issue #168 (String.fromCharCode(), CSS/HTML, Text Editors, Productivity)

Issue #168 (String.fromCharCode(), CSS/HTML, Text Editors, Productivity)10/06/16

The String object in JavaScript has two methods that allow you to produce a string from a sequence of Unicode values. The first method is String.fromCharCode(), and has full browser support. Here's how it looks in action:

console.log(

			  String.fromCharCode(175,92,95,40,12484,41,95,47,175)

			);

			// Output: ¯\_(ツ)_/¯

This will output the famous shrugging ASCII character as shown in this JS Bin.

The String.fromCharCode() method will return a string and you have to use it as a method of the global String object rather than on a string you've created yourself. So if your app receives Unicode values as input, this method can be used to produce output based on the values received.

As explained on MDN, in order to deal with all legal Unicode values up to 21 bits, this method won't be enough (though it's probably more than sufficient for most cases). ES6 has therefore introduced String.fromCodePoint() to fill this gap. In this JS Bin you can see the different output when using a character from a high code point with each of the two methods. MDN's article on the topic also includes a polyfill to get support in IE and Safari, the only browsers that don't support the new method.

Now on to this week's tools!

Support one of this week's sponsors:

Painless Job Searching Starts Here
The top tech companies in SF, NYC, & LA use Underdog.io to meet the best talent. Apply in 60 seconds. Once approved, you'll hear from top companies starting next Monday with no commitment. Join Underdog.io today!

CSS and HTML Tools

Wenk
"A Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS."

Choreographer-js
"A simple library to take care of complex CSS animations."

gulp-css-tailor
"Gulp plugin that automatically generates CSS from your HTML classes."

Element Finder
"A command line app for recursively searching through a directory and finding HTML files which contain elements matching a given CSS selector."

Badgerly
A CSS library for rendering graphic badges/medals.

wysiwyg.css
"Style your TinyMCE or Markdown generated content with a single CSS class."

Blend
"Create and customize beautiful CSS3 gradients."

UnCSS Online!
Copy and paste your HTML and CSS into this online tool and it will remove unused styles.

Pepper
"A friendly contact widget for your website."

384 Pages of CSS for $7 (PDF E-Book)

Text Editors and IDEs

Materia
Windows or Mac app. "A modern development environment to build advanced mobile and web applications."

Vim
The popular multi-platform text editor is now at version 8.x.

vim-react-proptypes-snippets
"A set of snippets for Vim to work with Facebook's React PropTypes."

Carbide
Still in Alpha. "A new kind of programming environment which requires no installation or setup, sSupports JavaScript/ES2015, imports modules automatically from NPM or GitHub."

vim-es6
"List of JavaScript ES6 snippets and syntax highlighting for vim."

Glacier Theme for VSCode
A nice looking dark but colorful theme for Visual Studio Code.

Tailor
WordPress plugin. "A free frontend page builder for WordPress that features a simple and intuitive drag and drop interface."

SnipMate.vim
"Aims to be a concise vim script that implements some of TextMate's snippets features in Vim."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Productivity Tools

Surfingkeys
"Chrome extension that provides keyboard-based navigation and control of the web in the spirit of the Vim editor."

Crowdcast
"Connect with your audience over live video. Simple & powerful Q&As, webinars, live courses & online summits with your audience."

Shaarli
"The personal, minimalist, super-fast, database free, bookmarking service."

Homebrew
Now at version 1.x. "The missing package manager for MacOS."

CRX Viewer
"Chromium/Firefox extension to view the source code of other Chrome / Firefox / Opera 15 extensions."

Trello Tasks
Chrome extension. "Turns Trello into a tasklist. Adds a checkbox next to each card so a task can quickly and easily be marked as done."

Tiny for Mac
A Mac screenshot tool that will give your screenshot file names more meaningful names.

Track your productivity
"A simple tool to measure your day's productivity. At the end of the day, you’ll be able to see total productive time and your completed tasks."

384 Pages of CSS for $7 (PDF E-Book)

A Tweet for Thought

Dave Cheney with a thought on companies that reject remote workers.

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

Made with React is a showcase of projects that use React or React Native.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly