Web Tools #398 - Frameworks, Mobile Tools, GraphQL/DB

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #398 • March 4, 2021

Advertisement
Fix Vulnerabilities in Your App with a Pull Request
Is your app affected by the 2,028 new open source vulnerabilities discovered last year? Scan your code, containers, and clusters for vulnerabilities in seconds. Fix quickly with an automated pull request. Get started for free with Snyk.
Fix for Free
Snapt

A useful new feature in the ECMAScript specification that has strong support across all modern browsers is the Optional Chaining operator. This operator allows you to bypass checking the existence of all connected objects before seeing if a particular object or property exists.

A code example is the best way to understand this one (note the last line):

let animals = {
  dog: {
    name: 'Fido',
    color: 'yellow',
    paws: 4
  },
  cat: {
    name: 'Killer',
    color: 'white'
  },
  rhino: {
    name: 'Dexter',
    color: 'grey',
    paws: 0
  }
};

console.log(animals.dog.paws); // 4
console.log(animals.cat.paws); // undefined
console.log(animals.snake?.paws); // undefined

Try it on CodePen

The Optional Chaining operator is used on the final line of the code snippet. Notice that I first create an object with some nested properties. The first log spits out "4" because it's a correct reference to animals.dog.paws, which exists.

The next one returns undefined because cat doesn't have a paws property. There's no error thrown since this is the last step in the object chain, so it's no big deal if this happens.

The final log, however, requires that I use the "?." operator to avoid throwing an error because there is no snake object. This simple bit of syntax prevents me from first checking if animals exists, then checking if snake exists, before attempting to access paws. In my case I only checked for "snake" but I could have also verified "animals" too. I suppose in some instances it might be useful to use it on every part of an object chain (except the last part) just to make sure, though I'm not sure what the best practice would be for this operator.

This isn't something that was overly difficult to do before this operator existed but this small bit of syntactic sugar certainly makes the code more readable and easier to maintain.
 

Now on to this week's tools!

Front-end Frameworks

Fix Vulnerabilities in Your App with a Pull Request
Is your app affected by the 2,028 new open source vulnerabilities discovered last year? Scan your code, containers, and clusters for vulnerabilities in seconds. Fix quickly with an automated pull request. Get started for free with Snyk.  sponsored 

Shopify Theme Lab
A customizable modular development environment for blazing-fast Shopify theme creation. Bundled with Vue and Tailwind, but you can swap them for pretty much anything.

Bootstrap-Themes
A small collection of free bootstrap themes covering a variety of topics and categories.

React Material Admin
A React admin template built with Material-UI. Built with React 16.14.0, React Router v5, MaterialUI v4, React Hooks, and React Context (No Redux).

React-Three-Next
A starter kit for creating apps with react-three-fiber, Next.js, and Tailwind.

Simple Light
A free landing page template built on top of TailwindCSS and coded in React.

Boost UI Kit
Not free. A collection of bright and stylish Figma assets that includes 100+ icons, 180+ elements, and 55+ components.

Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS, compatible with React and Vue.

Headless UI

Vectre
A set of lightweight, simple and responsive Vue components based on Spectre.css.

Ng-Zorro
An enterprise-class Angular UI component library based on Ant Design that includes 60+ high-quality components written in TypeScript.

cra-template-redux
The official Redux+JS template for Create React App.

Release Radar:

Mobile Tools and React Native

Tech Productivity Newsletter
A brief weekly newsletter sent out every Monday that features productivity tools and articles on efficiency, well-being, remote work, and more.   promoted

react-native-dots-pagination
Add simple dot paging to React Native. Kind of like dot navigation in a carousel component combined with breadcrumb nav.

tailwind-rn
Use Tailwind CSS in React Native projects. All styles generated from the Tailwind source and not hard-coded, so it's easy to keep Tailwind changes up to date.

Quick Menu
Add a navigation component that's easy to access and swipe with a thumb on a small device like a phone.

Quick Menu

react-responsive
CSS media queries in React, for responsive design and more.

React-Native-Boilerplate
A React Native boilerplate that can be used to kickstart a mobile application.

React Native Input Spinner
An customizable input number spinner component for React Native to enhance a text input with increase and decrease buttons.

Merlin
Simple web-like forms in React Native.

Scroll Bottom Sheet
Cross platform scrollable bottom sheet with virtualization support and fully native animations, that integrates with all core scrollable components from React Native.

Apptim
Mobile app testing to automatically capture and analyze app performance while preventing critical issues from going live to users.

styled.macro
A utility-first styling library for React Native.

Qt
Not free. The enterprise-level cross-platform development platform is now at version 6+.

JSON, GraphQL, Databases, etc.

Stargate
An open source data gateway that sits between your app and your databases.

Metasraper
A library to easily scrape metadata from web pages using Open Graph metadata, HTML metadata, and a series of fallbacks.

Objection.js
An ORM for Node.js that makes it easy to use the full power of SQL and the underlying database engine while still making the common stuff easy and enjoyable.

SQL Play
iOS or Android app that lets you run SQL queries on a mobile device.

GraphQL Tools
A set of utilities for faster development of GraphQL schemas.
 
GraphQL Tools

sqlite-worker
A simple and persistent SQLite database for Web and Workers.

TextDB
A simple data sharing service as a way to share small amounts of data editable by anyone with the URL.

Database Schema Templates
Collection of real world database schemas from open-source packages and real-world apps that you can use as inspiration when architecting your app.

Supabase
An open source Firebase alternative.

Release Radar:

A Tweet for Thought

I was never a huge chess fan (I did try to get into it years ago) but I found this thread on chess variants made up by Elizabeth Sampat amusing.

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

Templatemaker lets you download and print templates for paper crafts – including packaging, gift boxes, decorations, and more. Pretty neat! Lots of options and it's totally free aside from a few ads.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books

Older messages

Web Tools #397 - CSS Tools, VS Code, Uncats

Thursday, February 25, 2021

Web Tools Weekly WEB VERSION Issue #397 • February 25, 2021 Advertisement Let's Hear It For The Builders Expert builders and architects like you depend on the best tools. Nova is the smartest, most

Web Tools #396 - Frameworks, JS Utils, React

Thursday, February 18, 2021

Web Tools Weekly WEB VERSION Issue #396 • February 18, 2021 In case you missed it, Wes Bos recently launched an update to his super-famous course Fullstack Advanced React & GraphQL. If you've

Web Tools #395 - Frameworks, Tailwind, React, SVG, Icons

Saturday, February 13, 2021

Web Tools Weekly WEB VERSION Issue #395 • February 11, 2021 Advertisement Wynter Research Panels Want to give back to the community while having a low-key side hustle ($90-$180/hr) to fund your habit?

Web Tools #394 - CSS Tools, Icon Sets, Vue Tools

Thursday, February 4, 2021

Web Tools Weekly WEB VERSION Issue #394 • February 4, 2021 The following intro is a paid product review for Snyk, a free platform and toolset for building secure cloud native apps. Large-scale code

Web Tools #393 - JS Utilities, Testing Tools, Jamstack

Thursday, January 28, 2021

Web Tools Weekly WEB VERSION Issue #393 • January 28, 2021 Advertisement The Free Modern Jira Alternative for Teams Tara AI is the simplest free product development tool, designed for teams moving

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your