Issue #323  (SEO for Apps, JSON/DB, Frameworks, Build Tools)09/26/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

There have been quite a few myths and misconceptions surrounding JavaScript web apps (e.g. PWAs and SPAs) and how they affect SEO for the pages being served. Fortunately, we're not left in the dark as to how dynamic pages are treated in search, so it's nice to have a review of the facts and misunderstandings.

The Google Developers documentation provides a 4-part guide called Make sure Google can index JavaScript that all web app developers should review from time to time. Here are some points worth noting from the first part of the guide, "Understand the JavaScript SEO basics", but be sure to read the full guide:

• Googlebot executes JavaScript when indexing pages. So don't believe any myths that rendering content via scripting will make the pages non-indexable.
• Although Googlebot does execute scripts, Google still recommends that you render your pages on the server for better performance and because not all bots execute scripts.
• You can change a page's meta description or title via JavaScript without any drawbacks to indexing.
• Googlebot might not be able to execute a piece of JavaScript that uses a brand new feature or API that it doesn't support.
• If you're querying data to render a page using an API that throws an error with Googlebot, there is a way to dynamically render a noindex meta tag on the fly, preventing the page from being indexed, rather than indexing an error-ridden page. There's a code example for how to do this, but it should be done carefully, if at all.

Now on to this week's tools!
 

JSON Tools, Databases, etc.

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

jsonbox.io
Free HTTP based JSON storage. Lets you store, read, and modify JSON data over HTTP APIs for free. Copy a URL and start sending HTTP requests to play around with your data store.

json-now
Launch an API Server to serve data from a JSON, JavaScript file, or faker data with HTTPS support. Based on json-server.

8base
Production-ready GraphQL backend for web and mobile application development.

svelte-debugger
A JSON `Debugger` component for Svelte apps.

json-complete
A JSON alternative that retains references, handles circular dependencies, and encodes almost every data type available to standard JavaScript.

store
A better way to use localStorage and sessionStorage, recently updated to version 2.9.

jtx
Tiny JSON to XML conversion utility.

json.pizza
Online JSON formatter and prettifier that will also warn of errors in your data.

BaseDash
A collaborative database tool built for teams. Lets your whole team view and edit up‑to‑date data directly from your databases.

Studio 3T
A professional GUI and IDE for MongoDB available for Windows, Mac, and Linux.

barrel-js
Provides a simple and minimal npm package to build semantic templates for JSON objects and strings.

Front-end Frameworks

Use Clubhouse: It's Free and Awesome
"Clubhouse is like a fast and delightful version of Jira, a more purposeful version of Trello." – Current User   sponsored via ThoughtLeaders

Project Clarion
Now at version 3+ (details). A CSS and design system framework for building your applications.

next-with-apollo-auth
A demonstration and starting point for applications using Next.js + Apollo GraphQL (hooks) + Prisma / GraphQL Yoga + JWT for authentication, and deploying to now.sh.

NodeGui
An open source library for building cross-platform native desktop applications with JavaScript and CSS-like styling. Also includes a React renderer.

Quasar
Now at version 1+ (details). Open-source Vue-based framework that allows you to quickly create responsive SPAs, PWAs, SSRs, mobile apps, native desktop apps, etc.

NuxtPress
A microframework that leverages the Nuxt module system.

aws-amplify-auth-starters
Starter projects for React, React Native, and Vue, for developers looking to build web and mobile applications that have authentication and protected routing.

Sefirot
A Vue components library from the team at Global Brain.

Vuestic Admin
Now at  version 2+ (details). Free and beautiful Vue admin dashboard  template with 44+ custom UI components.

Avant UI
A development toolkit based on Bootstrap that maintains the Bootstrap simplicity, provides a new look, and adds new features and components.

React Bolt
A simple and robust boilerplate for your React projects. Just clone, install, and you're ready to start.

Bundlers, Build Tools, Deployment, etc.

Use Clubhouse: It's Free and Awesome
"Clubhouse is like a fast and delightful version of Jira, a more purposeful version of Trello." – Current User   sponsored via ThoughtLeaders

Webpack ESNext Boilerplate
Webpack configuration and build scripts to deploy ES2015+ code to production (via `script type=module`) with legacy browser fallback support via `script nomodule`.

Tasklemon
Painless automation in JavaScript. Write scripts that manipulate files, make network requests, get user input, all with a delightfully clear API and exceptional documentation.

JavaScript Standard Style
Now at version 14+ (details). JavaScript style guide, linter, and formatter.

Ionic CLI
Now at version 5+ (details). CLI tool for developing apps with Ionic (the cross-platform mobile development framework).

pnpm
A fast, multi-featured disk space efficient package manager.

npkill
Easily find and remove old and heavy node_modules folders.

Rollup
The popular Next-generation ES module bundler has been at version 1+ since late last year (details).

pwa-asset-generator
Based on Puppeteer. Automatically generates icons and splash screens guided by Web App Manifest specs and Apple Human Interface guidelines. Updates manifest.json and index.html files with the generated images.

Linc
A fully-configured delivery platform (CI/CD) designed to solve your biggest problem: getting feedback. Seamlessly collaborate with designers, developers, testers.

MEVN CLI
Light speed setup for apps built with the MEVN stack (Mongo, Express, Vue, Node).

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

This is pretty useful: Can I email..., similar to Can I use, but instead shows support for web platform features in email clients.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris