PHP – Simple GitHub Login (OAuth)

If your codebase is in PHP and you would like user’s to be able to login to your site using GitHub (single sign-on) you can use the following as a good starting point:

Next you will need to setup an OAuth application within GitHub by doing the following:

  1. Login to GitHub.com.
  2. Go to your settings by clicking on your avatar image in the top-right corner of any GitHub page and then clicking on Settings in the drop-down menu.
  3. Scroll down to the Developer settings menu on the left and click OAuth Applications.
  4. Click the Register a new application button.
  5. Enter all of the necessary information to register your new OAuth application and then click Register application when you’re done.
  6. Take the Client ID and the Client Secret and place them in the constants defined in your PHP code from the beginning of this post.

That should be it. Now when you run this code you should be prompted to authorize your application to read your public information and private email addresses. You can remove the scope if you don’t need to be able to read any private information such as email addresses or you can change the scope after reviewing this page. If you want more information about OAuth apps for GitHub you can check out this page.

Happy coding! 😎

JavaScript Snippet – Get Video Frame As An Image

Lately I have dedicated a little more time to developing an electron app which saves a frame of every video it encounters as PNG images:

JW Videos with images captured via a video element and a canvas element.
JW Videos with images captured via a video element and a canvas element.

Believe it or not the code to turn a frame of a video into an image element is not terribly complicated. Below is a simple function that can be used to get the an image element corresponding to a specific frame in a video:

This getVideoImage() function takes three arguments:

  1. path {string}:
    The path to the video. In the case that you are using this code in a web page this must be a video within the same domain.
  2. secs {number | function(duration): number}:
    If this is a non-negative number this will indicate the time of the frame to capture in seconds. If this is a negative number this will indicate the time of the frame from the end of the video to capture in seconds. If this is a function it will be passed the duration as a number and the return value should be a number (positive or negative) which indicates the time of the frame that should be captured.
  3. callback {function(img, currentTime, event)}:
    The function which is called either after loading the frame’s image successfully or after getting an error. The first argument passed will be the Image object that is created (if no error occurred). The second argument passed will be the actual time in seconds used to pull the frame’s image (if no error occurred).
    The third argument will either be a seeked event or an error event.

This function can be used as is or can be modified. It is important to note that unless the video is in the exact same domain as the web page this code will NOT work due to the canvas being tainted. You can paste the following code into the code editor on this W3Schools sandbox page to see an example of getting multiple frames:

Let me know if you have any questions or suggestions and as usual, enjoy the free code! 😎

JavaScript Snippet – Convert HTML Table To 2D Array

A few days ago I was working on manipulating data that I found in Wikipedia. The data was in a table where the colspans and rowspans were making it difficult to simply programmatically pull data. Then I started looking into code to turn HTML table to JSON but for some reason the rowspans were still causing issues. Finally, I decided to just write a quick and dirty function to get the job done:

The cool thing about this function is that in the case of cells that span multiple columns and/or rows the value in that cell will be written to each corresponding sub-array value.