Issue #324  (JS elseif, CSS/HTML, Testing, Uncats)10/03/19

Never Build a CSV Importer Again Save weeks of engineering time by implementing a world class importer in your product. Flatfile is a turnkey CSV importer that integrates into any web app, providing an intuitive import experience in hours. Supports JS frameworks. Try the Importer

Have you ever used an else if construct in JavaScript? For example:

The above code is perfectly valid. If you run it through a linter like JSLint or JSHint, you won't get any kind of warning or error related to the else if clause. But, in a strictly technical sense, else if does not exist in JavaScript.

What I've written above is the same as the following:

Try it on CodePen

As you might know, the curly braces that make up a block in JavaScript are not always required. So you'll often see developers leave them out for brevity. So technically when you use else if, all you're doing is leaving out the optional opening and closing curly braces that enclose the else block (and which in this case happens to also start with an if statement). If JavaScript really did have an else if, it would be a single word, like in other languages – elseif.

But what's ironic about all of this is that the second example above is really bad style and it would be preferable to use the else if as done in the first example. Or better yet, scrap the ugly if statements entirely and use a switch statement or method lookup (also called a dispatch table) instead.
 

Now on to this week's tools!
 

CSS and HTML Tools

Never Build a CSV Importer Again
Save weeks of engineering time by implementing a world class importer in your product. Flatfile is a turnkey CSV importer that integrates into any web app, providing an intuitive import experience in hours. Supports JS frameworks.    sponsored via Syndicate

c2f
Convert CSS to Flutter styles (Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single code base).

Scout-App
First major update in a long time (details). A native Sass processor app (Widows, Max, Linux) that lets you compile SCSS to CSS without using the command line.

ColorBox
A color tool from Lyft Design to produce color sets.

laptop.css
Kind of a silly project that allows you to present an image wrapped in an ASCII art laptop. Might be good for memes in slides and presentations.

Simple Form
Allows you to add a contact form to your website easily with any kind of data (including file uploads).

Progress Tracker
Now at version 2+. HTML component to illustrate the steps in a multi-step process (e.g. a multi-part form, timeline, quiz, etc).

Prince
Convert HTML to PDF for seamless documents you can print, download and archive.

Static Forms
Simple HTML form for your website. Integrate forms easily without any server side code. Form submissions are sent to a registered email address.

instant.page
Now at version 2+ (details). Makes page navigation instant by preloading pages right before a user clicks; when they hover over a link for 65ms. Mobile waits for touch before preloading.

xstyled
Consistent theme-based CSS for styled-components and emotion (the CSS-in-JS solutions).

Color Designer
Online tool to help with building a color palette and generate tints and shades based on a chosen color.

Testing and Debugging Tools

Learn React Hooks
A video course for developers who want a linear, hands-on approach to learning React Hooks. Take an existing React app and refactor it to use Hooks. promoted 

Button Contrast Checker
Enter a URL and this tool will scan the page to check if buttons and links have WCAG-compliant contrast for accessibility.

Web Server for Chrome
Chrome extension. A web server that serves pages from a local folder over the network, using HTTP and runs offline.

Fiddler
Free web debugging proxy for any browser, system, or platform. Useful for performance, security testing, and lots more.

Security Audit
Online tool to detect your sites' web stack and match it against the last six months of vulnerabilities.

RequestBin.com
Gives you a URL that collects requests you send it so you can inspect them in a human-friendly way. Use it to see what your HTTP client is sending or to inspect and debug webhook requests.

Karma
Now at version 4+. A simple tool that allows you to execute JavaScript code in multiple real browsers, to make your test-driven development easy, fast, and fun.

esprint
Fast ESLint runner. Speeds up ESLint by running the linting engine across multiple threads.

jest-puppeteer
Run your tests using Jest and Puppeteer.

Smashtest
A language for rapidly describing and deploying test cases. Greatly speed up your automated testing by writing tests in a tree-like format.

Spectator
A powerful tool to simplify your Angular tests. Helps you get rid of all the boilerplate grunt work, leaving you with readable, sleek, and streamlined unit tests.

lighthouse-plugin-field-performance
Lighthouse plugin that displays "field" performance of your page using real-world data from by Chrome UX Report.

The Uncategorizables

Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech (view past issues here).  promoted 

BlockSurvey
A completely anonymous and private way to collect surveys or polls.

Dark
A holistic programming language, editor, and infrastructure for building backends without accidental complexity.

Releaseflags
Gives you the ability to add feature flags (i.e. a feature toggle) to your product.

slickbit
The social code snippet manager.

Apse
Windows, Mac, and Linux app. A personal search engine. It captures text from your screen and shows you relevant results based on what was recorded.

FakeClients
Practice logo design using randomly generated client briefs.

wehatecaptchas
A captcha alternative that doesn't require the user to decipher images, letters, numbers, etc.

Appwrite
Self-hosted and open-source back-end server for web and mobile developers.

Ackee
Self-hosted, Node-based analytics tool for those who care about privacy. Runs on your own server, analyses traffic and provides useful statistics in a minimal interface.

fronty
A set of tools designed to orchestrate micro-frontend apps.

Base
Simple API for authentication, email sending, image storage, and more.

A Tweet for Thought

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

For the record, I don't endorse this, but I couldn't help but laugh at this Chrome extension: Netflix Hangouts, which lets you watch Netflix at work by making it look like you’re on a conference call.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris