With Material Design and the Web Audio API
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…
How to fix it with The Open Graph protocol
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…
No physics experience required
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
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:
With React Hooks and the Web Audio API
Try the working live demo of the project.
The source code is in the GitHub repository.
Prerequisites
- An understanding of React’s useRef Hook
- Some familiarity with visualizations with Web Audio API.
And avoid common pitfalls in the process
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…
Matt Eric
Documenting JavaScript discoveries
