|
|
|
|
Issue #165 (Pure Functions, CSS/HTML, Testing, Media)09/15/16
| Support this week's primary sponsor: |
Back in June of this year, A List Apart published an article by Jack Franklin that I really enjoyed entitled Making your JavaScript Pure. The basic premise was stated in his intro when he said, "A pure function is defined as one that doesn’t depend on or modify variables outside of its scope." Then he gave the following example:
|
function mouseOnLeftSide(mouseX) {
return mouseX < window.innerWidth / 2;
}
|
As Jack explains, the function is not pure "because within the body of the function, it refers to a value that it wasn’t explicitly given" (i.e. window.innerWidth). He goes on to explain that passing a second variable into the function would improve this code, thus making it "pure".
The article further explains the benefits of pure functions, with some more examples. Interestingly, some people in the comments took issue with Jack's terminology. Ultimately, most readers seemed to agree that the practices encouraged in the article are good for everyone to know and use. So check it out if you haven't done so already.
That's it for the intro this week, as I'm recovering from a bit of an eye infection. The rest of the issue is the same as always, with lots of tools to check out. Next week's intro should be back to normal, depending on how I'm healing.
Now on to this week's tools!
CSS and HTML Tools
Interpose
"Apply stylesheet variables to your React components for use in your stylesheets. Interpose reduces the clutter of React components by bridging the gap between JS and CSS."
react-media
"A CSS media query component for React."
Really Simple Responsive HTML Email Template
"Sometimes all you want is a really simple responsive HTML email template. Here it is."
ELQ
"The classy approach to Element Queries for modular and responsive components."
Bootstrap 2 Ionic
"Takes a standard Bootstrap 3 theme and generates an Ionic theme (1.x/2.x) to match. Works on most themes, unless you've really butchered your bootstrap CSS."
ScrollTrigger
"Triggers classes on HTML elements based on the scroll position. Uses requestAnimationFrame so it doesn't jack the users scroll."
Sharingbuttons.io
"Super fast and easy Social Media Sharing Buttons. No JavaScript. No tracking."
WTF, Forms?
"Friendlier HTML form controls with a little CSS magic."
WAIT! Animate
"Provides an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration."
React Native Style Tachyons
"Brings functional styling to react-native. It is inspired by Tachyons and uses it's scales and naming convention."
Toast
"Insane, no-nonsense CSS grid. Twelve columns. Six columns. Nine columns. As many columns as you want, in as many combinations as you want."
Testing and Debugging Tools
Add-on Compatibility Reporter
"Help make Firefox better. The Add-on Compatibility Reporter enables you to report if the Firefox add-ons that you're using are working properly."
Jaco
"Experience Your User Experience. The easiest way to watch and analyze your users’ behavior."
DevTools Timeline Viewer
"Shareable URLs for your Chrome DevTools Timeline traces."
W3C Internationalization Checker
"Performs various tests on a Web Page to determine its level of internationalisation-friendliness. It also summarises key internationalization information about a page, such as character encoding."
Observatory
"Observatory by Mozilla is a project designed to help developers, system administrators, and security professionals configure their sites safely and securely."
sitehero
"Daily backups, malware and blacklist scans, as well as monitoring for all changes in files and availability of your website around the clock."
box.js
"Utility to analyze malicious JavaScript."
aXe
"aXe (The Accessibility Engine) open source library is a lightweight (~100 KB), fast, portable JavaScript library that executes automated accessibility testing inside your testing framework or browser of choice."
IE NetRenderer
"Allows you to check how a website is rendered by Internet Explorer 11, 10, 9, 8, 7, 6 or 5.5, as seen from a high speed internet location."
Opbeat
"Performance monitoring for developers. Backend and frontend."
Multimedia Tools
Plottable.js
"Built on top of D3, Plottable gives you a set of flexible, premade components that you can combine and rearrange to build charts."
Odoo
"SVG odometer effect with motion blur."
Svgsus
For Mac. "The perfect tool to organize, clean and transform svgs into code."
Cesium
"An open-source JavaScript library for world-class 3D globes and maps."
Recharts
"A composable charting library built on React components."
Compressify
"Optimize video files online. Upload any video format file to compress to web-compatible WebM."
Compressor.io
"Compress and optimize your images. Up to 90% file size reduction"
Vidage.js
"Your solution to full-screen background video & image combined."
A Tweet for Thought
What CSS is really like.
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...
If you're into making sheet music, you might enjoy lickcreator, a web based music notation app that lets you create, edit, save, and share your sheet music all right in your browser.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
