Photo by Waldemar Brandt on Unsplash

OpenCV has several nuances and silent fails that makes recording videos from cameras difficult and frustrating. Here’s how to record from a camera:

import cv2

Adapted from: https://stackoverflow.com/questions/29317262/opencv-video-saving-in-python/45868817

If your videos are being saved as ~6kb files, there is likely a size mismatch between the resolution of the camera and the VideoWriter.

Hope this helps.


Photo by Lili Popper on Unsplash

Getting the path of a local file in Electron.js may be easier than you think. Here are the steps:

Step 1 of 2: Add an <input> element to index.html

In your index.html, add an <input> element:

// index.html

Step 2 of 2: Add a change handler for the <input> element in index.js

In your index.js file, add an event handler:

// index.js

And voila! That’s it.


Photo by Ferenc Almasi on Unsplash

In this tutorial, we’re going to use create-next-app, Github, Netlify, and namescheap to deploy a Next.js static website with a custom domain name.

Next.js is a “production ready” library that uses React, with added benefits such as server-side rendering and routing out of the box. For more information, check out nextjs.org.

There are certainly other options for domain name registration and site hosting, but Namescheap provides the least expensive domains I’ve found, is easy to work with, and also comes with whoIs privacy protection for free (so you won’t be spammed with calls and emails when you register a new…


Photo by Hybrid on Unsplash

Sentiment analysis is one of the popular applications of machine learning. We’re going to use the ml5.js library (which is a wrapper around tensorflow.js)along with React to create an online sentiment analysis tool.

First, we’ll import the ml5.js library. Then, we’ll add some UI elements to interact with ml5.js. Then, we’ll push to GitHub. Finally, we’ll host it on Netlify.

Let’s get started!

Step 1 of 5: Create A New React Project Using Create-React-App

In your terminal, type:

npx create-react-app my-sentiment-app
cd my-sentiment-app

Step 2 of 5: Import ml5.js

In the index.html file, import ml5.js:

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

into the <head> section, and remove the extra boilerplate code:

For more information on getting started with ml5.js, …


Photo by Ferenc Almasi on Unsplash

In this tutorial, we’re going to use create-react-app, Github, Netlify, and namescheap to deploy a React website with a custom domain name.

There are certainly other options for domain name registration and site hosting, but Namescheap provides the least expensive domains I’ve found, is easy to work with, and also comes with whoIs privacy protection for free (so you won’t be spammed with calls and emails when you register a new domain). I also love Netlify as it is free and very easy to use.

STEP 1 OF 5: Create your app

To start, create a new React application called ‘my-awesome-app’ using create-react-app: (you can of course…


Photo by Bagus Hernawan on Unsplash

So you have a great idea for an app, but you don’t want to have to go through the App Store or the Google Play Store to get it on your phone. Here’s a quick (and free) way to do it, by hosting the app on github pages and then adding the link to your phone’s home screen.

We’re going to be usingcreate-react-app and gh-pages

npx create-react-app my-awesome-app
cd my-awesome-app

After typing all of this, you should have a folder named my-awesome-app and associated files.

Now, let’s set up the publishing to github pages:

Login to…


Image by Free-Photos from Pixabay

One of the greatest challenges beginners face when working in 3D CAD programs such as SolidWorks is simply how to orient themselves in the 3D environment — panning, zooming, rotating, and changing views. Here are some standard shortcuts to orient yourself:

  • f: to fit the model to the screen. If you find your view far away from your model, f (fit to screen) is your friend.
  • Ctrl+7: Isometric view
  • Ctrl+8: Normal to surface
  • Mouse Wheel Click+Drag (or middle mouse click+drag): Rotate
  • Mouse Wheel Scroll Up: Zoom out. The location of the cursor determines the focal point of the zoom
  • Mouse Wheel Scroll Down: Zoom in
  • Ctrl+Mouse Wheel Click: Pan
  • Right Mouse Click+Drag (on component in assembly): Rotate component, obeying existing constraints

Additionally, Ctrl+1(through 6) can be used to navigate through all the standard views: (1) Front, (2) Back, (3) Left, (4) Right, (5) Top, (6) Bottom


ESLint requires a few additional configurations to be set up optimally for use with Next JS.

To start off with, install eslint, eslint-plugin-react,

npm i --save-dev eslint eslint-plugin-react

Next, create a .eslintrc file using the following:

eslint --init

Use the arrow keys to select: Use a popular style guide -> Standard -> JSON. Install any additional dependencies required.

An eslintrc.json file will be created.

Add the following to your .eslintrc.json file:

{

Note the “react/react-in-jsx-scope”: “off” under rules, and “React” under “globals”. Without these…


Perhaps you are creating a to-do list, shopping cart, or something else that dynamically adds elements to the screen, but also requires the ability to remove them when users change their minds.

This can be done as follows:

Let’s begin with a <button> to press to add content to a <div> in HTML:

<html>

Next, let’s add an on-click function that is called when the button is clicked to our javascript file:

var addedElements = [];
var elementNum = 0;


If your HTML looks like:

<body>
<div id="my-div">

And you add an element dynamically through jQuery:

$('#my-div').append('<button id="my-button">My Button</button>');

To add a click function to the button, do:

$('#my-div').on('click', '#my-button', function () {

alert('Hello World!');

JSFiddle: https://jsfiddle.net/wwgfcg1u/3/

Joel Masters

Creator of Goalsmash.net. Help others achieve their goals. Get paid.

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