Web Tools Weekly
What a Tool!

Issue #192  (Params vs. Args, CSS/HTML, React, Productivity)03/23/17


Advertisement
Design, prototype, share – all in one app
Go from idea to prototype faster with Adobe XD (free Beta), the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps.
Check it out now
Adobe XD

Not being a computer science major, I've always used the terms "parameter" and "argument" pretty much interchangeably. Probably many of you have too. I've always known there is a difference between the two, but I haven't really taken the time to understand it.

In the spirit of technical accuracy, let's briefly look at the difference between arguments and parameters, with help from a Stack Overflow thread.

Here's the basic difference:

  • Parameters are the variables in a function or method definition.
  • Arguments are the values passed into a function or method call.
That means when you see a function defined, the variables inside the parentheses are the parameters:
 
function addNumbers (a, b) {
  return a + b;
}

And when you call the function in another part of the code, you're passing in arguments:
 
addNumbers(21, 8);

That's the gist of it. If you can remember that, then great. But maybe you're like me and it helps you to understand the reasons for the difference. So here are a few notes and tips from the aforementioned thread:
  • A suggested mnemonic is "arguments are actual" (both start with "a") while "parameters" are referred to as "placeholders" (both start with "p").
  • Some language docs use only one of the two terms but differentiate using something like "formal arguments" vs. "actual arguments".
  • One answer in the thread points out that the difference is based on the meaning of the English language words (that is, arguments are made, parameters set conditions to receive arguments).
  • Ultimately, it makes little difference in most cases. Nobody on your team is going to be confused if you use them interchangeably, so don't sweat it. However...
  • Tutorial writers, book authors, technical manual maintainers, etc., should always use the correct terms.
That's parameters vs. arguments in a nutshell. As mentioned, it probably doesn't make a whole lot of difference which term you use in everyday communication, but if you want to be technically accurate, the difference is useful to know.

Now on to this week's tools!

CSS and HTML Tools

Easiest Form2Mail
A free, easy to use, form processor you can use anywhere you need to send yourself an e-mail from your website (contact form, order form, shopping cart checkout, suggestion box, support page, etc).

sass-test.sh
A script for testing Sass libraries by comparing compiled output. It supports both Ruby sass and Libsass implementations according to what is installed.

WAIT! Animate
Provides an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration.

ScrollDir
A zero dependency micro JavaScript plugin to easily leverage vertical scroll direction in CSS via a data attribute.

WebGradients
A free collection of 180 linear gradients in CSS, or download as PNG.

CSS Optimizer
A CSS minifier. It performs three sorts of transformations: cleaning (removing redundant), compression (replacement for shorter form) and restructuring (merge of declarations, rulesets and so on).

Safe get-function() for Sass
A utility that allows you to write code using get-function in older versions of Sass before it's available in Sass 3.5.

Animatelo
A port of Animate.css to the new Web Animations API.

keyframes-tool
A Node CLI tool to convert CSS animations to a keyframes object suitable for the Web Animations API, to move your animations from CSS to JavaScript.

React Tools

buffer-redux-hover
Keeps React component hover states in Redux.

React Router
Currently at version 3.x with 4.x in Beta. A collection of navigational components that compose declaratively with your application.

react-svg-inline
A react component to clean and display raw SVGs.

redux-idle-monitor
A React component and Redux connector to add functionality to invoke events at various stages of idleness during a users session.

Storybook
A UI development environment for your React components. With it, you can visualize different states of your UI components and develop them interactively.

react-perimeter
Create an invisible perimeter around an element and respond when its breached.

Sketch
This probably needs a new name. Prototype and deploy React Native code faster than ever.

react-sourcerer
Allows you to express code patterns in the form of React components. Still in early development.

Productivity Tools

nomouse
Mac only. Discourages mouse usage by dimming screen by 10% of maximum brightness whenever you left click.

moro
Single command CLI tool for tracking work hours.

NoFile.io
A simple, fast, secure, cross-platform file hosting service.

FSMonitor
A macOS app that monitors all changes in the file system, including file creation, deletion, change of content, renames, and change of attributes.

DarkLight
View any web page in "night mode".

Geekmarks
Open-source, API-driven, geeky bookmarking service.

Battery Indicator
Mac App that shows the remaining battery time and percentage in the menu bar.

PDF Converter Ultimate
iOS app. Convert your documents to PDF, and PDF documents to Word, Excel, JPG, and much more, right on your iPhone or iPad.

A Tweet for Thought

Love this Japanese tweet that went viral that ingeniously demonstrates the difference between 0 and null.
 

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

This could be a game-changer: Perspective. It's an API that improves online conversations. There's a demo on the home page that lets you mock-test it. Looks promising.
 


Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris