Blogs

JavaScript Regular Expression Cheat Sheet

I have taken the following descriptions of regular expressions from FreeCodeCamp.com. Below is a high-level overview of these expressions.

/expression/ = expression starts and ends with /. Flags are appended
/g = find expression globally
/i = ignore case (a or A)
string.method(expression) = common regex structure
.test() = return a boolean if the expression is true
.match() = returns value from match
.replace() = (regularExp, string)
[abc] = character list (looks for either a,b,or c)
[-] = range of characters (a-z, 0-9)
[^abc] = do not look for these characters
+ = character repeats one after another
* = character repeats 0 or more times
^ = outside set, search from beginning
$ = search end of string
\w = [A-Za-z0-9_] \W = negate
\d = [0-9] \D = negate
\s = \s\t\f\n\v (string, tab, form feed, new line)
{lower, upper} = # of occurences, range or exact match
? = 0 or more optional
Positive lookahead: Make sure element in search pattern is there but won’t match the pattern.
(?=...) = … (expression) required expression but not matched.
Negative lookahead: Make sure element in search patter is not there
(!=...) = …(expression) pattern you don’t want
() = find repeated substrings \# = number of matches

Web API’s You [Probably] Didn’t Know Existed Video Review

I had just graduated from high school in 2008 so I don’t really remember learning about the HTML 5 specification being a thing. When I was in college at Ivy Tech we learned HTML and CSS through the use of DreamWeaver. At that time web development was very bare bones. We would cut a PhotoShop comp using the slice tool into separate images and then place these images in a table based design. Yuck!

It wasn’t until my third year of college at IUPUI that I remember hearing about HTML 5 being released. Then, I saw HTML 5 as being very powerful especially with new support for canvas and video. Also, who couldn’t complain when you no longer had to include a specific doctype?

in 2011, Flash was very popular along with ActionScript. ActionScript was the first object-oriented programming language I had learned. In another class, I learned about different bit rates and how to create video profiles based on a users internet connection. At that time Flash was highly hated because of the lack of support from Apple. So HTML 5 felt like a move away from Flash. After college, I never touched ActionScript again.

Below is a list of features from the video I have never used before but that I find the most interesting:

  • See if a user has access to the internet using online state and show new results to a user when reconnected
  • Check the visibility of a page. Great for games and videos
  • Support for phone vibration which can be used for if a form is invalid
  • Ambient light allows you to change what happens to a page based on the light that enters a laptop camera ( only supported in Firefox). You could detect lighting on your mobile device to make reading easier.
  • Battery status for long forms and remaining time notifications

How To Fix VLC Frame Skipping

Always makes sure that you determine a video’s dimensions before playback. If the video is in 4k or higher than 1980×1080 your computer’s hardware will more than likely not have the acceleration to play the video without frame skipping. You can add the flag -vf scale=1920x1080 when using FFmpeg to fix this.

The 4K video playback with VLC has strict requirements on the computer’s processor and graphics chip. Sometimes, even if your computer meets the requirements, you may find that 4K video plays back choppy. This is due to the immense processing power required to play 4K.

PavTube.com

When converting your file to .ogv make sure that you use the correct video format settings.

If you omit -qscale:v (or the alias -q:v) then ffmpeg will use the default -b:v 200k which will most likely provide a poor quality output, and libtheora may drop/skip frames if the bitrate is too low.

FFMPEG

Visual Studio Code JavaScript IntelliSense with JSDoc

If you are having difficulty adding custom documentation to your JavaScript files in Visual Studio code the best solution is through the use of JSDoc. Unfortunately, there are a couple of changes that need to take place before the IntelliSense will begin to show up. When I first started to write comments in Visual Studio code I was using the existing format used for C# programming. These comments look like:

<summary>Description</summary>
<returns>Return info</returns>

Instead you can use jSDoc which has the following syntax sugar:

/**
* Description of your class, function, etc
* @param {type} param - description
* @param {type} param2 - description 2
* @returns {type} obj - description
*/ 

In my opinion, I like this format better than the use of XML comments because of each @tag is color decorated which stands out and helps with readability. The caveat of using this syntax is that you have to abandon your use of the require keyword but instead need to use import and export keywords such as familiar with Typescript.

Old Syntax: module.exports={} exports.funcName... and const funcName = require ('jsfile');
New Syntax: export class{...} or export {funcName} and import * as funcName from 'jsFile'

import is recognized as an ES6 feature which node will know nothing about. We will need to convert this syntax into the”require” keyword by installing Babel. Below are the following new packages that you should install to your dev dependencies. As a note, anything that is not required in order for the app to run should be in your dev dependencies.

  1. babel-cli
  2. babel-preset-es2015
  3. optional: watch

You will then need to add the es2015 present to a .babelrc file. Then you can set up a new script in package.json that will watch for any changes that happen and then use babel to recompile those modified files.

//.babelrc
{
     "presets": ["babel-preset-es2015"]
}

//package.json
"scripts": {
    "dev": "watch 'npm run build' src", //optional with watch
    "build": "babel src -d build"
}

Sitespeed.io Mac Installation Fix

  1. Make sure that npm is compatible with Node.js. If not uninstall using npm uninstall -g npm and then reinstall using the Node.js website selecting the most recent version.
    1. This is a common issue with installing Node.js with Homebrew
  2. If you are having problems with permission on global node_modules folder check permissions.
    1. See who owns the directory ls -la /usr/local/lib/
    2. return your current username: id -un
    3. Change the owner and group sudo chown -R [owner]:[owner] /usr/local/lib/node_modules
  3. Uninstall and reinstall sitepseed.io using sudo
    1. npm uninstall -g sitespeed.io
    2. sudo npm install -g sitespeed.io
  4. Test with sitespeed.io https://sitespeed.io in a home child directory
    1. Upgrade Chrome if problems with the driver