|
|
|
|
Issue #163 (Readable IIFEs, Frameworks, Git/CLI/CLI, Sass Tools)09/01/16
| Support this week's primary sponsor: |
Assuming you're still using ES5, here's a quick maintenance tip regarding immediately invoked anonymous functions that have a return value that you assign to a variable. Here's some example code:
|
var myVar = function() {
// function body goes here...
return {
value: "something"
}
}();
|
This is fine but the minor problem that occurs here with regards to maintaining this code is that, at a quick glance, it looks like a typical anonymous function assigned to a variable. But it's not just an anonymous function; it's also an immediately invoked one, as shown by the parentheses at the end.
To improve the readability of the code and make it immediately clear that this function is immediately invoked, you can do the following:
|
var myVar = (function() {
// function body goes here...
return {
value: "something"
}
}());
|
The change is subtle but it's significant for someone scanning the code later and trying to figure out what's going on. You can see I've added an extra set of parentheses around the anonymous function, which serves to visually differentiate this from just a standard anonymous function assigned to a variable. This doesn't change the way the code works, but only adds a few bytes.
I should mention, of course, that with later versions of ECMAScript, you might not need to do this. Usually functions are enclosed in this way to prevent variables from leaking globally, but in ES6+ we can use let and const to ensure variables maintain block scope. Wes Bos discusses that a little bit in this post and you can also read a little bit about IIFEs with arrow functions in this post by Jack Tarantino.
Now on to this week's tools!
Front-end Frameworks
Typography.js
"Provides a vastly simpler way to define and explore typography designs. You provide configuration to the Typography.js JS API and it uses its Typography engine to generate CSS for block and inline elements."
hack.css
A Markdown-inspired CSS framework for hackers with different themes available.
Material Kit
A Bootstrap UI Kit based on Material Design.
BlazeCSS
"Open source modular CSS framework providing great structure for building websites quickly."
Astrum
"A lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way."
starter-framework7
"A starter project structure for framework7 app, using Node and Express for server rendering."
React Toolbox
"A set of React components that implements Google Material Design specification. It's built on top of some the trendiest proposals like CSS Modules (written in Sass), webpack and ES6."
Flight
"A lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications."
Ink
"An interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts."
Git, GitHub and Command Line Tools
OctoLinker
Chrome, Firefox, and Opera extension that links dependencies in GitHub repos, making the source easier to navigate on GitHub.
np
A better `npm publish`."Ensures you are publishing from the master branch. Ensures the working directory is clean and that there are no unpulled changes." And much more...
Taskwarrior
"Manages your TODO list from the command line. It is flexible, fast, and unobtrusive. It does its job then gets out of your way."
cit
"A small issue tracker that can be included in your project's base directory. It can thus be versioned with the rest of your code using tools like git or bzr."
Tower for Windows
The popular Git client is coming to Windows. You can sign up to be notified about the Beta release.
GitMagic
"Make your repository great again. Magically enforce your GitHub contribution guidelines."
git-appraise
"Distributed code review system for Git repos."
ungit
"The easiest way to use git. On any platform. Anywhere."
Sass and Preprocessor Tools
Scout-App
The old Scout App has been updated to version 2. This app "Allows you to process your .sass and .scss files into CSS without needing any knowledge of the command line."
SCSS Parser
"A library to parse/stringify SCSS."
include-media-spread
"This plugin calculates the difference between property values and distributes them through your include-media breakpoints."
inStyle
"A CSS authoring tool to append, insert or replace elements in the current selector (&), giving you an intuitive way to style the current element based on parent variants without repeating complex queries."
Family.scss
"A set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way."
SystemJS Sass plugin
"This plugin allows importing SCSS files from SystemJS and have them dynamically compiled to CSS and loaded into the page from within the browser."
A Tweet for Thought
A reminder from Sass founder Chris Eppstein that Sass isn't always a magic bean for your CSS.
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...
Thomas Zilliox built something called WebTools Crawler, which lets you browse the archives of this newsletter via the command line. Neat!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
