Issue #100  (IIFE with void, JavaScript libraries, SVG, GitHub Tools)06/18/15


(Skip to the tools section below)
This week's primary sponsor comes via Syndicate:
See how your Visitors are really using your Website...
See how your Visitors are really using your Website...
Hotjar is a new and affordable way to improve your site UX and conversion rate by using Heatmaps, Visitor Recordings, Funnel and Form Analysis, Polls and Surveys… all in one central interface. This tool will allow you to improve the user experience (and conversion rate) of your site. Get your FREE Hotjar account now.

There are a lot of sources discussing the void operator in JavaScript and I'm sure we've all seen it. It comes in handy in Bookmarklets, in href URLS (though it's not recommended to do that), and for ensuring that you're returning undefined and not a shadowed version of undefined.

But there's another interesting use pointed out on MDN and in a comment on an article on void (see references below). It looks like this:
 
void function() {
  // function body here...
}();

(JS Bin) MDN explains: "When using an immediately-invoked function expression, void can be used to force the function keyword to be treated as an expression instead of a declaration."

From what I understand, this is basically an alternative to the usual IIFE methods, but with arguably a simpler syntax potentially making it easier to read and understand what's happening at a glance. But interestingly, in JavaScript: The Good Parts, Douglas Crockford says void in JavaScript is confusing and not consistent with how void is used in other languages, so he recommends to avoid it (no pun intended).

Nonetheless, good to know what it does and how it can be used, so check out the resources below for more:
Now on to this week's tools!

 

JavaScript Libraries and Frameworks


KinWin.js
"A minimalist JavaScript DOM manipulation library."

Famous
"High-performance JavaScript library for animations and interfaces."

Ity
"A miniscule, dependency free JavaScript MVC."

RAD.JS
An open source, PhoneGap optimized, multiplatform development toolkit.

LispyScript
JavaScript with Lispy syntax and macros.

Trine
"A utility library geared at tapping the full potential of functional programming in JS, in the vein of lodash, underscore and Ramda."

jsblocks
A better MV-ish framework. From simple user interfaces to complex single-page applications using a faster, server-side rendered and easy to learn framework.

Meteor Toys
A handy Meteor-based dev tools bundle.

Essential React
"A minimal skeleton for building testable React apps using ES6."

101
A modern JavaScript utility library built to work well with vanilla JavaScript methods.


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

SVG and Multimedia Tools


reEmbed
A video player that lets you add your logo and skin it with custom colors. Works with YouTube embeds and has real-time analytics.

svg2d3
Convert SVG code to D3.js. Just paste the code into the field and press "convert".

px2svg
"Converts raster images to SVG, using color-run optimization."

svg.connectable.js
"A JavaScript library for connecting SVG things."

OzPlayer
"The first completely accessible video player. Free for not-for-profit use."

Zoommy
A native Mac OSX app that makes it easy to search tons of free stock photo resources.

watermark.js
"A functional library for watermarking images in the browser. Written with ES6, and made available to current browsers via Babel. Supports urls, file inputs, blobs, and on-page images."

SVG Filters
An online tool for testing many of the filters available on SVG elements.

Daala
"The goal of the project is to provide a free to implement, use and distribute digital media format and reference implementation with technical performance superior to h.265."
 
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)
 

Git, GitHub, and Command Line Tools


git-hub
"Do GitHub operations from the `git` command."

GitTorrent
"A decentralization of GitHub using BitTorrent and Bitcoin."

GitHub Web Notifier
"Get desktop notifications for new comments, stars and issues."

Git Large File Storage
"An open source Git extension for versioning large files."

GitHelp
"A new platform where developers can find solutions to their coding problems, share their experience, and connect with experts."

asciinema
"Forget screen recording apps and blurry video. Enjoy a lightweight, purely text based approach to terminal recording."

GitHub Tagger
Chrome extension. "Add tags and notes to Github projects, issues, files or any other link on Github. Great for organizing your starred projects."

 

A Tweet for Thought

Are there too many sponsored posts nowadays? David Walsh puts in his two cents on sponsored posts and ads.

 

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

A few weeks ago I mentioned Addy Osmani's git commit creativity and some of you pointed out how it can be done using tools. These include: CommitArt and gitcanvas.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp