With Material Design and the Web Audio API

Image for post
Image for post

Sounds and Material Design

Sounds are a cool way to step-up the user experience of a software application. Sounds can brand a specific type of functionality, confirm user actions, and alert users of new information.

Material Design has some audio samples to get started with:

There is an easy-to-implement method of activating sounds on user events.

Check it out below or try the Live Demo. Interact with the UI components. Ensure that your device’s audio output is enabled. Click the buttons, toggle the switch, move the slider.

Referring to the example above, its time to make some sound.

Add the ‘like’ button

1. Install the UI dependencies with:

npm i @material-ui/core @material-ui/icons

2. Import the components:

import Button from “@material-ui/core/Button”;
import Favorite from “@material-ui/icons/Favorite”;

3. Import the sound file.

The Material Design sound library contains three different audio file types (.wav, .ogg, and .caf). Use the .wav

How to fix it with The Open Graph protocol

Image for post
Image for post

Implementing HTML <meta> tags

You have deployed a website or web application and would like to share your work on social media. If you’ve not yet implemented The Open Graph protocol, then you’ve probably noticed that your post contains no image preview, or is previewing a different image to the one you wish to be displayed. There is a simple way to resolve this problem.

Use this resource to learn how to implement the Open Graph protocol in your index.html file: https://ogp.me/.

Start with the Basic Metadata, and make sure to also add an “og:description” <meta> tag

W3chools is also helpful for brushing up on HTML <meta> tags. …

No physics experience required

Image for post
Image for post

The Matter.js Physics Engine can bring great possibilities to JavaScript projects. It is useful for building simulations, creating user interactivity, and adding dynamics to a static site.

There is set of demos to try if you are new to the library. This is a good starting point to gain inspiration for how to incorporate Matter.js into a project.

The documentation is always a reliable resource too.

With the CORS Anywhere Node Module

Image for post
Image for post

It is common to encounter the “No ‘Acces-Control-Allow-Origin’ header is present on the requested resource” error when fetching API data. It looks something like this:

And avoid common pitfalls in the process

Image for post
Image for post

Firebase for Web provides developers with a fast and rewarding application deployment solution.

The process for deploying a production build in a React.js application requires some steps that may seem confusing when attempting to use Firebase for the first time in an existing React.js web app.

This tutorial accounts for some common pitfalls in the process.

The documentation for adding Firebase to your JavaScript project and testing locally then deploying to your site are useful resources that explain this process well.

However, these resources — at least at the time that this article was written — don’t account for some considerations when deploying existing React.js


Matt Eric

Documenting JavaScript discoveries

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store