Web Tools #429 - Frameworks, SVG, React Tools

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #429 • October 7, 2021

Advertisement
Retool - Build Internal Tools 10x Faster
Retool gives you a powerful set of building blocks: tables, lists, charts and more. Integrate with any datasource, REST API, gRPC, or Firebase and customize your app with JS. Save hundreds of hours.

Try Retool for Free
Retool

The return statement in JavaScript is put in generally the same category as similar features like break, continue, yield, and so on. But return is used much more often and most of us probably take its subtleties for granted.

Most experienced developers understand how return works but I thought I'd go over its in the context of JavaScript.

Firstly, the return statement can only be used inside a function body. If it's used outside a function body, the script will throw an error. The following simple example demonstrates how return is commonly used:

function addNumbers(a, b) {
  return a + b;
}

As you can see, a return statement is followed by an expression to evaluate what will be returned at that point in the function body.

However, a return statement doesn't require an expression following it. If there is no expression, the function will simply stop execution at the return and resume where the function call took place, and the function will return undefined.

Any code that appears after a return inside a function body will not execute. In the following example, the last line is never reached:

function addNumbers(a, b) {
  return a + b;
  doSomething(); // this never executes
}

Usefully, if you happen to inadvertently write code like the above, your browser console will throw a warning informing you that there's "unreachable" code in your function body.

It's also important to note that the return statement is subject to JavaScript's automatic semi-colon insertion (ASI) rules. This means you can't put the expression on the line following the return statement. This is why you'll sometimes see code like this:

function addNumbers (a, b) {
  return (
    a + b
  );
}

Notice the expression being returned is placed on its own line – but it's surrounded by parentheses above and below. Also notice there's no semi-colon after the expression. If I included one, it would throw an error because this is considered a single line in the code, even though it's broken up.

In this case, the simple a + b expression didn't warrant the parentheses. But if my expression is lengthy and complex, this technique would allow me to make the expression easier to read by breaking it up into multiple lines and possibly even including code comments in between the lines.

Of course, the return expression is still a single expression and can often be placed on the same line as the return, without the parentheses. But it might be easier to read the code when the expression is broken up a bit using the parentheses.

That's the return statement in a nutshell. There really isn't a whole lot else to know about it, so I hope there was something new in there for you.


Now on to this week's tools!
 

 

Front-end Frameworks

Retool - Build Internal Tools 10x Faster
Retool gives you a powerful set of building blocks: tables, lists, charts and more. Integrate with any datasource, REST API, gRPC, or Firebase and customize your app with JS. Save hundreds of hours. sponsored 

mijin
A library of Tailwind CSS UI components built for Vue and Nuxt.js.

Soft UI Dashboard React
A free dashboard and admin template built with React and Material-UI, with over 70 individual components.

jira-clone-angular
A simplified Jira clone built with Angular, ng-zorro, and Akita.

Dopefolio
A blazing fast, responsive, multi-page portfolio template for developers that has strong Lighthouse audit scores out-of-the-box.

react-windows-ui
A set of accessible, reusable, and composable React components to build full featured Windows Fluent UI apps.

react-windows-ui

W3C Design System
An official design system of page components from the W3C that includes Sass functions/mixins, along with various layout components, and more.

MUI Treasury
A collection of ready-to-use components based on Material-UI (now newly branded as "MUI").

Next.js Subscription Payments Starter
Clone, deploy, and fully customize a SaaS subscription application with Next.js.

Precise UI
An extensive component library built with React 16 with styled-components 2 and can be used with TypeScript.

Ignite
A cutting-edge boilerplate for building React Native apps that includes a CLI, component/model generators, and more.

SnackUI
A style system for React Native and React Native Web, building on ideas from JSXStyle and SwiftUI.

On the Release Radar:

Media Tools (SVG, Video, etc.)

Do You Want to Work on Meaningful Problems?
Use Tech Jobs for Good to find front-end developer jobs at organizations working on pressing issues such as fighting misinformation online, improving access to social services, and reducing carbon emissions.  sponsored 

99 Avatars
API and online tool to generate random and partially customized hand-drawn avatars.

Geometric Shapes
Not for every project but this is a library of 1300 unique and customizable SVG shapes.

WebGL-Memory
A WebGL memory tracker. Add the script to your page before you initialize WebGL and then for a given context you can ask how much WebGL memory you're using.

unplugin-icons
JS utility to access thousands of icons as components on-demand universally from various popular icon sets.

Multi-Functional Image Converter
Online tool to batch convert and batch edit images in just about any available format.
 
Multi-Functional Image Converter

3D Transformer
Online tool to alter an image so it has a transformed 3D look by means of rotating, changing perspective, zooming, etc.

Open Video Downloader
A cross-platform GUI for youtube-dl built with Electron and Node.js.

xicons
SVG Icons from 8 different icon libraries made available as React or Vue components.

Poet.so
Capture and share Twitter posts as beautiful images. Just enter a Tweet URL then customize the look of the image before grabbing the image.

Dimmy.club
Device mockup generator for your app and website screenshots.

Snoweb
A beautiful set of optimized SVG icons built with HTML and CSS, many including animated hover effects.

icons.land
Search engine and API for icons from popular packs.
 

React Tools

Looking For a React Job?
Tech Jobs for Good helps connect developers to job opportunities at organizations working on pressing issues such as improving educational outcomes, eliminating barriers to mental health, and providing pro bono legal services to those in need. Find out how you can use React to make a difference today.  sponsored 

react-device-detect
Detect the user's device then render the view according to the detected device type.

React Spreadsheet
A simple, customizable, and performant spreadsheet component for React.

nuka-carousel
A React component to add a carousel to your project.

next-i18next
Translation utility for Next.js apps that adds translation content management on top of Next.js's built-in internationalization options.

React Recipes
A React Hooks utility library containing popular customized hooks.

flopflip
Flip or flop features in your React application in real-time backed by flag provider of your choice.

React Password Checklist
A React component that updates as a user types, to display the success or failure of password strength rules.

useHooks(🔥).ts
Simple React hooks, ready to use, written in TypeScript.
 
useHooks.ts

use-resize-observer
A React hook that allows you to use a ResizeObserver to measure an element's size.

React Web Editor
A simple WYSIWYG editor for React to add drag-and-drop and content editing functionality to web pages.

React-Auto-FormGenerator
A form generator for React. Just provide an array of fields and this component will generate a form from it.

react-date-range
A React component for choosing dates and date ranges.

On the Release Radar:

Commercial Apps and Classifieds

These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Recut - Video editor for Mac to edit videos in a fraction of the time.

Frontendor UI Library  - Library of 100+ UI Blocks & 6+ Templates. ad 

Vizcom - AI-enabled creative tools for the web.

Link Whisper - WordPress plugin to manage internal link building for SEO ad 

UIHUT - 14,000+ web design graphics, resources, and assets.

Getillustrations - 8000+ creative web and app illustrations, updated weekly.
 

A Tweet for Thought

Apparently Chrome has made a change to the way const variables behave in the console.

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

If you're a programmer who enjoys doing escape rooms, you might like /dev/esc, an online escape room designed for 2-8 developers where your team codes, puzzles, and hacks its way out.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books / Buy Me a Coffee

Older messages

Web Tools #428 - React Auth, CSS Tools, Bundlers, Angular

Thursday, September 30, 2021

Web Tools Weekly WEB VERSION Issue #428 • September 30, 2021 The following intro is a paid product review for Userfront, a developer-friendly service to add user authentication to your React apps. If

Web Tools #427 - JS Utilities, Jamstack/CMS's, VS Code

Thursday, September 23, 2021

Web Tools Weekly WEB VERSION Issue #427 • September 23, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #426 - Learning Tools, Frameworks, Testing, Uncats

Thursday, September 16, 2021

Web Tools Weekly WEB VERSION Issue #426 • September 16, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #425 - CSS Tools, Media/SVG, React

Thursday, September 9, 2021

Web Tools Weekly WEB VERSION Issue #425 • September 9, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #424 - JS Utilities, Git/CLI Tools, Vue.js

Thursday, September 2, 2021

Web Tools Weekly WEB VERSION Issue #424 • September 2, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

You Might Also Like

From Request to Response: How APIs Work – Beginners Guide

Thursday, March 28, 2024

In the vast expanse of the digital ecosystem, APIs (Application Programming Interfaces) act as critical conduits, facilitating seamless conversations between different software platforms. From clicking

Elastic 8.13 is here: Amazon Bedrock in the AI Assistant for Observability

Thursday, March 28, 2024

Learn about Amazon Bedrock support within the Elastic AI Assistant for Observability ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ elastic | Search. Observe. Protect

A Creative Market Reset 🎨

Thursday, March 28, 2024

Adobe needed some real competition. Now it has some. Here's a version for your browser. Hunting for the end of the long tail • March 27, 2024 A Creative Market Reset Canva's purchase of

Fisker lost millions … then it got them back

Wednesday, March 27, 2024

More Fisker woes View this email online in your browser By Christine Hall Wednesday, March 27, 2024 Welcome back to TechCrunch PM! This afternoon, learn about some new Google features, a startup that

▶️ How to Get Better YouTube Video Recommendations — What to Know About Alexa Skills

Wednesday, March 27, 2024

Also: The Best Samsung Phones of 2024, and More! How-To Geek Logo March 27, 2024 📩 Get expert reviews, the hottest deals, how-to's, breaking news, and more delivered directly to your inbox by

JSK Daily for Mar 27, 2024

Wednesday, March 27, 2024

JSK Daily for Mar 27, 2024 View this email in your browser A community curated daily e-mail of JavaScript news Bad Abstractions Could Be Ruining Your Code The code is easy to read and it runs fine -

Ranked | The World's Biggest Oil Producers in 2023 🛢️

Wednesday, March 27, 2024

The word's three biggest oil producers accounted for 40% of production in 2023. View this graphic to learn more. View Online | Subscribe Presented by FEATURED STORY The World's Biggest Oil

Daily Coding Problem: Problem #1394 [Easy]

Wednesday, March 27, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given the head of a singly linked list, reverse it in-place. Upgrade to premium

Free Event: Watch 10 entrepreneurs launch their AI ideas

Wednesday, March 27, 2024

They built this in 2 months 👀 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Digging into Marissa Mayer’s newest app

Wednesday, March 27, 2024

Plus a snake robot on Saturn's moon View this email online in your browser By Alex Wilhelm Wednesday, March 27, 2024 Welcome to TechCrunch AM! Today we have notes on Marissa Mayer's new app,