Issue #398 (Optional Chaining, Frameworks, Mobile, JSON/DB)03/04/21
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.
 |
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.
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.
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.
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
