Simple Javascript Youtube API using Security Authentication Tokens

I created a sample Javascript page to show how the Youtube API can be integrated to bring in video names, links and any other information contained within the searchable database. This could be used for either loading clips or links for a specific audience or branding.


The key part here is that we use a specific API token we received from our admin panel in our developer account. Once we have a specific key that is tied to our account we have in essence a special gateway to access the server that only we (and our website's users) can access. As you can see here our URL is constructed using our special API token and the user's search term.

A simple Javascript search page using the Youtube API

This can obviously be customized with additional CSS or HTML but here the purpose is to show the backend API at work. The 'Next' and 'Previous' buttons also use tokens that do additional requests to the server. I found this to be a simple introduction to get up and running with API's and learning how access tokens work with Javascript.

Add a Facebook tracking pixel to your site in less than 5 minutes

I recently integrated Facebook tracking pixels with my website for two reasons. One, I wanted to know how to use this new but yet quite ubiquitous tool and I wanted to see if I could perhaps gain some insights into who is visiting my website and what catches their eye (or mouse, rather).

Facebook has made this process fairly easy to integrate with any website outside of Facebook. All you need to do is to create a Business account on Facebook and within your account there is a management option for creating Pixels. Once you have your pixel source code we can go about the implementation.

It's a standard integration as you might imagine connecting any other javascript app to your site. The source code from Facebook has a specific account number tied to your business account and serves as a beacon of sorts to call out to your dashboard when anyone visits your site or clicks on a specific URL or button. Once the pixel code is added to your page headers you can launch a test instance with Facebook and finish selecting triggers and correlating actions.

Facebook has made the integration particularly user friendly.

Next, we test our triggers and actions and wait to see if everything appears to be loading and connecting correctly.

Testing events in real time

Excellent! We are now seeing all the test events in real time. Everything is working correctly and we can move on to see our analytics.

Facebook tracking pixel dashboard data

This is exciting. Now we have a dashboard that is getting real time data from our Facebook tracking pixel. We can know when visitors are checking out our page as well as know what is of the most interest in regards to section titles or blog articles. In a business setting we can track sales, shopping cart quantities and basically any other standard and relevant marketing metric.

Anonymous, but detailed

And finally one additional point of interest is that the IP addresses are collected by Facebook but are anonymized and not returned to each individual business account administrator for this type of campaign tracking. This is great because we can gather the relevant data we need to help us cater to our clients and visitors while helping maintain user anonymity.

Encrypting and Decrypting text files with OpenSSL

In the real world encryption has become very important to keep information safe from malicious actors. However, it can be an intimidating subject so here we will start with encrypting a simple text file with openSSL.

First, open up nano from the terminal and write up a little secret message, "Don't delete this hidden message!":

Here we have a text file named secret.txt that we are about to encrypt

For this file name to do encryption is as follows:

~ % openssl aes-128-cbc -in secret.txt -out secret.txt.enc

Here is our encrypted text with an 8-byte signature: the ASCII characters "Salted__".

Now to decrypt the file and create a readable version the command is almost identical you are now just defining -d before -in for:

~ % openssl aes-128-cbc -d in secret.txt.enc -out secret3.txt

Here is the decrypted message now in English again.

iOS App Development - Xcode, Swift, Objective-C

I have made a lot of little iOS apps over the past year to teach myself to code better in Objective-C. I also find augmented reality particularly fascinating. I have worked with nearly everything that ARKit has to offer. I also have delved deep into Metal to understand and create Core Image filtering at a custom level. Above is a screenshot of a simple AR app that lets you drop in objects into the space around you and resize them as well as rotate them however you want. In business this type of application can help you have users truly envision products in their homes or living spaces.

For practice I have nearly finished a little app that gives you laser eyes with sounds all at the touch of a button. For testing I also learned how to use Apple's TestFlight and how to work with the submission process through App Store Connect. For this app, individuals will have 5 color options for the eyes and 5 sound options to toggle through and then you can add a surprise laser effect to create a custom video clip for uploading to social media. This was just chosen at arbitrarily, but you can add features or elements to the nose, mouth, hair, etc. Here below is an example of a Core Image black and white filter I made as well as a custom overlay photo editor and a little video clip of the laser eyes with sounds for the eyes as well as a separate loop for the background.

DIY React.js Tetris recreation using the Hooks API

This was a fun little coding challenge. I recreated the classic Tetris game using React.js and hosted it on my Google Cloud in a container. 

This was a great project to work on because it used a variety of skills: Javascript, HTML5, CSS3, React.js and a few other things to get everything up and running online.

Tetris is a classic game known around the world so there isn't too much we did here. The tetrominos were coded from scratch even the shading was applying using a matrix for each type of tetromino.

DIY React.js Tetris 

As an additional challenge we had to be able to flip the tetrominos left and right as well as drop them instantly. I had to code around this so that the tetrominos did not overlap each other or the edges of the viewing pane. And finally we had to add in game logic where the game ends when the tetrominos go above the top, we clear rows when they are full of blocks, and if you've gotten this far you've probably played Tetris so I don't have to say more. 

An end game shot of our DIY React.js Tetris