My Name is José Alfredo Rivera Turcios and I am a Full Stack Web Developer based out of Southern California.

ABOUT ME

BLOG

Name

Subject

CONTACT ME

I am j-Riv

Basic information about José Alfredo Rivera Turcios and his contact details.

Versatile Full-Stack Web Developer with 5+ years of experience designing, developing, and managing complex e-commerce sites and internal applications. Enjoys integrating technologies to solve problems. Passionate about approaching programming challenges from different angles and collaborating with others to create meaningful web applications. Outstanding verbal and written communication skills coupled with strong project management abilities.Hard working and able to multitask efficiently.Fluent in English and Spanish.

j-Riv | Resume

Programming Languages

Adobe Illustrator, Adobe InDesign, Adobe Photoshop

Software

Fluent Languages

SKILLS

NodeJS, Vue, React, SQL, WordPress, Shopify, Git

Web Technologies

This guide is intended to be used as a reference for setting up your dev environment on macOS.

<h3>X code</h3>
Xcode is an integrated development environment for macOS containing a suite of software development tools developed
 by Apple for developing software for macOS, iOS, iPadOS, watchOS and tvOS.
Download and install it from the App Store or from <a href="https://developer.apple.com/xcode/" rel="noreferrer"
 target="_blank">Apple's Website.</a>.
Install Xcode command line tools.
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 xcode-select --install
 </code>
</pre>

<h3>Homebrew</h3>
The missing package manager for macOS.
Installation
Make sure you have the Xcode command line tools installed. Then install Homebrew with the following command.
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
 </code>
</pre>
Path Setup
In order for programs installed via Homebrew to be executable, you'll need to add your Homebrew installation location
 to your $PATH. This should be done automatically. If it's not you can do the following:
Change your path by adding /usr/local/bin to your PATH environment variable. This can be done on a
 per-user basis by adjusting PATH in your ~/.bash_profile or if your using zsh you should also do
 this to ~/.zshrc

<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 echo 'PATH="/usr/local/bin:$PATH"' >> ~/.zshrc
 </code>
</pre>
Then, either restart your terminal session or re source your profile ex:
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 source ~/.zshrc
 </code>
</pre>
Check that everything works:
 <pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew doctor
 </code>
</pre>
If everything is ok you'll see Your system is ready to brew.

<h3>iTerm2</h3>
iTerm2 is an open source replacement for Apple's Terminal. It's highly customizable and comes with a lot of useful
 features.
Installation
Either download and install it from <a href="https://iterm2.com/" rel="noreferrer" target="_blank">iterm2.com</a> or
 with brew
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew install --cask iterm2
 </code>
</pre>

<h3>ZSH</h3>
The Z Shell (zsh) is a Unix shell that is built on top of bash with additional features. I highly recommend
 installing a framework like Oh My Zsh. It makes dealing with configuration, plugins and themes alot easier.

Install with Homebrew (newer macOS already comes with zsh as the default shell):
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew install zsh
 </code>
</pre>

<h3>Oh My Zsh</h3>
<a href="https://github.com/ohmyzsh/ohmyzsh" rel="noreferrer" target="_blank">Oh My Zsh</a> is an open source,
 community-driven framework for managing zsh. It comes with a bunch of features out of the box and improves
 your terminal experience.
Install
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
 </code>
</pre>
If for w/e reason the install script does not set zsh as your default shell you can do it manually with this command:

<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 chsh -s $(which zsh)
 </code>
</pre>
Configuration
To customize edit your profile
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 nano ~/.zshrc
 </code>
</pre>
Make your changes. I like to change the default theme to pygmalion, and add a few plugins like git,
 brew, macos. You can find more <a href="https://github.com/ohmyzsh/ohmyzsh/wiki/themes" rel="noreferrer"
 target="_blank">themes</a> and <a href="https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins" rel="noreferrer"
 target="_blank">plugins</a> on the official wiki.
To apply your new changes either restart your terminal session or
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 source ~/.zshrc
 </code>
</pre>

<h3>Git</h3>
Git is software for tracking changes in any set of files, usually used for coordinating work among programmers
 collaboratively developing source code during software development. Its goals include speed, data integrity, and
 support for distributed, non-linear workflows.
Installation
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew install git
 </code>
</pre>
Git Config Setup
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 git config --global user.name "Your Name Here"
 git config --global user.email "Your Email Here"
 git config --global core.editor "nano"
 </code>
</pre>

<h3>PostgreSQL</h3>
PostgreSQL is an open source relational database management system (RDBMS). It is the default database for macOS
 server.

Installation
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew install postgres
 </code>
</pre>
You can check the installed version with:
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 postgres -V
 </code>
</pre>
To start the server use:
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew services start postgresql
 </code>
</pre>
To stop the server use:
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew services stop postgresql
 </code>
</pre>
To restart the server use:
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 brew services restart postgresql
 </code>
</pre>
To start the console:
<pre class="language-javascript" tabindex="0">
 <code class="language-javascript">
 psql
 </code>
</pre>

<h3>Other</h3>
Other stuff you might want to install includes:
<ul>
 <li><a href="https://github.com/nvm-sh/nvm" rel="noreferrer" target="_blank">Node Version Manager (NVM)</a></li>
 <li><a href="https://code.visualstudio.com/" rel="noreferrer" target="_blank">VS Code</a></li>
</ul>

macbook-pro-2018.jpg

macbook-pro-2018_small.jpg

This guide is intended to be used as a reference for setting up your dev environment on macOS. Xcode is an integrated development environment for macOS containing a suite of software development tools developed by Apple for developing software for macOS, iOS, iPadOS, watchOS and tvOS. Download and install it from the App Store or from Apple's Website.. Install Xcode command line tools...

macOS Development Environment

macos-development-environment

I recently rebuilt my dog's website. I originally built it in 2016 using WordPress and the Instagram API, as a photo
 blog to store some photos and watch how much he grew. This time around I wanted something different. I didn't want to
 use PHP, and since JavaScript frameworks are all the rage I decided to build it using Gatsby. I still wanted to have
 some sort of CMS so I kept WordPress and am now running it headless. It’s blazing fast. I kept the site design pretty
 much the same, It’s still powered by the Instagram API, just swapped the tech stack. The Gatsby Front-End is hosted on
 the <a href="https://www.gatsbyjs.com/" target="_blank" rel="noreferrer">Gatsby Cloud</a> and the WordPress CMS is
 hosted on <a href="https://www.hostgator.com/" target="_blank" rel="noreferrer">Hostgator</a>.

 Posts get created by a cron job and script on the server. The script will retrieve the Instagram Token from the
 database. It will then use this token to generate a new one via the Instagram Graph API. The new token gets saved to
 the database. The script will then hit the Instagram Graph API again this time getting the latest 25 posts. It will
 then format each Instagram post creation date timestamp into a a date / time string, ex:
 12-19-2021_22-10-38-pm. This date / time string will be used as the post's title when saving to WordPress. It
 will also be used to see if the post already exists in WordPress. If the post does not exist a post will be created
 and the Image / Video Cover will be attached to the WordPress post. This post creation then triggers a web hook that
 then triggers a new site build on Gatsby Cloud.


You can view the site at <a href="https://henrythepug.com" target="_blank">henrythepug.com</a>, the WordPress post
 creation script will be posted below.

The Config
<pre class="language-php" tabindex="0">
 <code class="language-php">
 return [
 'DB_NAME' => 'DATABASE NAME',
 'DB_USER' => 'DATABASE USER',
 'DB_PASSWORD' => 'DATABASE PASSWORD',
 'DB_HOST' => 'localhost',
 'DB_TABLE' => 'DATABASE TABLE'
 ];
 </code>
</pre>
The Script
<pre class="language-php" tabindex="0">
 <code class="language-php">
 define('WP_USE_THEMES', false);
 require($_SERVER['DOCUMENT_ROOT']. '/wp-blog-header.php');
 require_once ( ABSPATH. '/wp-admin/includes/post.php' );
 require_once ( ABSPATH. '/wp-admin/includes/image.php' );

 set_time_limit(0); // script will run for an infinite amount of time
 ini_set('default_socket_timeout', 600); // server settings
 session_start(); // starts new or resume existing session

 // MySQL settings - You can get this info from your web host
 $database = include('ig-grabber-config.php');
 define('DB_NAME', $database['DB_NAME']); // WordPress Database Name
 define('DB_USER', $database['DB_USER']); // MySQL Database Username
 define('DB_PASSWORD', $database['DB_PASSWORD']); // MySQL Database Password
 define('DB_HOST', $database{'DB_HOST'}); // MySQL Hostname
 define('DB_TABLE', $database{'DB_TABLE'}); // MySQL Table

 /**
 * Gets the old token data from the database.
 * @returns {string} - The Access Token
 */
 function getOldToken() {
 // Create connection
 $conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
 // Check connection
 if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
 }

 $sql = "SELECT access_token, token_type, expires_in FROM ". DB_TABLE. " WHERE ID = 1";
 $result = $conn->query($sql);

 if ($result->num_rows > 0) {
 $data = $result->fetch_assoc();
 } else {
 echo '0 results';
 }
 $conn->close();

 return $data['access_token'];
 }

 /**
 * Updates the token data in the database.
 * @param {string} $token - The Access Token
 * @param {string} $type - The Token Type
 * @param {string} $expiration - The Token's Expiration
 */
 function updateToken($token, $type, $expiration) {
 // Create connection
 $conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
 // Check connection
 if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
 }

 $sql = "UPDATE ". DB_TABLE. " SET access_token='$token', token_type='$type', expires_in='$expiration' WHERE ID=1";

 if ($conn->query($sql) === TRUE) {
 echo 'New Token Saved Successfully';
 } else {
 echo 'Error: '. $sql. ' '. $conn->error;
 }

 $conn->close();
 }

 /** 
 * Gets a new 'Long-Lived Token' from Instagram. 
 */
 function getNewToken() {
 $old_token = getOldToken();
 $url = 'https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token='. $old_token;

 $ch = curl_init(); //used to transfer data with a url
 curl_setopt_array($ch, array( // sets options for a curl transfer
 CURLOPT_URL => $url, // the url
 CURLOPT_RETURNTRANSFER => true, // return the results if successful
 CURLOPT_SSL_VERIFYPEER => false, // we dont need to verify any certificates
 CURLOPT_SSL_VERIFYHOST => 2 // we wont verify host
 ));

 $result = curl_exec($ch); // executue the transfer
 curl_close($ch); // close the curl session

 $data = json_decode($result);
 if (property_exists($data, "access_token") && !is_null($data->access_token) && !empty($data->access_token)) {
 updateToken($data->access_token, $data->token_type, $data->expires_in);
 return $data->access_token;
 }
 return false;
 }

 /**
 * Gets Instagram media.
 * @param {string} $url - The User Media Edge
 * @returns - {object} - Media Data Object
 */
 function getInstagramMedia($url) {
 $ch = curl_init(); // used to transfer data with a url
 curl_setopt_array($ch, array( // sets options for a curl transfer
 CURLOPT_URL => $url, // the url
 CURLOPT_RETURNTRANSFER => true, // return the results if successful
 CURLOPT_SSL_VERIFYPEER => false, // we dont need to verify any certificates
 CURLOPT_SSL_VERIFYHOST => 2 // we wont verify host
 ));

 $result = curl_exec($ch); // executue the transfer
 curl_close($ch); // close the curl session

 return $result;
 }

 /**
 * Prints media to screen for verification while
 * posts and media are created and saved.
 */
 function printImages($token){
 $url = 'https://graph.instagram.com/me/media?fields=id,media_type,media_url,thumbnail_url,caption,timestamp&access_token='. $token;
 $instagramData = getInstagramMedia($url);
 $result = json_decode($instagramData, true);

 foreach($result['data'] as $item){
 $image_url = $item['media_url'];
 $created_time = $item['timestamp'];
 $caption = $item['caption'];
 $caption = explode('#', $caption, 2);
 $caption = $caption[0];

 $created_time = date('m-d-Y_H-i-s-a', strtotime($created_time));
 echo '<h2>FORMATTED_TIME => '. $created_time .'</h2>';
 if (!post_exists( $created_time )){
 if($item['media_type'] == 'VIDEO'){
 $image_url = $item['thumbnail_url'];
 $video_url = $item['media_url'];
 savePicture($image_url, $created_time, $caption);
 saveVideo($video_url, $created_time, $caption);
 }elseif($item['media_type'] == "IMAGE"){
 $image_url = $item['media_url'];
 savePicture($image_url, $created_time, $caption);
 }
 } else {
 echo ' POST EXISTS SKIPPING ';
 }
 }
 }

 /**
 * Saves images to database and creates blog post.
 */
 function savePicture($image_url, $created_time, $caption){
 // Print to screen
 echo 'IMAGE_URL => '. $image_url. ' ';
 echo 'CREATED_TIME => '. $created_time. ' ';
 $filename = $created_time;
 $filenameWithExt = $filename .'.jpg';
 echo 'FILENAME => '. $filename. ' ';
 echo 'FULL FILENAME => ' . $filenameWithExt. ' ';
 echo 'CAPTION => '. $caption. ' ';

 // Create post object
 $my_post_data = array(
 'post_title' => $created_time,
 'post_content' => $caption,
 'post_status' => 'publish',
 'post_author' => 1,
 'post_category' => array(32) // Default empty.
 );
 if (!post_exists( $created_time )){
 // Insert the post into the database
 $post_id = wp_insert_post( $my_post_data );

 // SELECT * FROM pics WHERE filename=$filename ---- if no matches, continue
 $upload_dir = wp_upload_dir();
 if(wp_mkdir_p($upload_dir['path']))
 $file = $upload_dir['path']. '/'. $filenameWithExt;
 else
 $file = $upload_dir['basedir']. '/'. $filenameWithExt;
 echo ' '. $file;
 file_put_contents($file, file_get_contents($image_url)); // Save Picture to Uploads Folder

 $wp_filetype = wp_check_filetype($filenameWithExt, null );
 $attachment = array(
 'post_mime_type' => $wp_filetype['type'],
 'post_title' => sanitize_file_name($filename),
 'post_content' => '',
 'post_status' => 'inherit'
 );
 // Attach Featured Image to Post
 $attach_id = wp_insert_attachment( $attachment, $file, $post_id );
 $attach_data = wp_generate_attachment_metadata( $attach_id, $file );
 wp_update_attachment_metadata( $attach_id, $attach_data );
 update_post_meta($post_id, '_thumbnail_id', $attach_id);
 update_post_meta($attach_id, '_wp_attachment_image_alt', $caption);
 set_post_thumbnail( $post_id, $attach_id );
 } else {
 echo ' POST EXISTS SKIPPING ';
 }
 }

 /**
 * Saves videos to database. 
 */
 function saveVideo($video_url, $created_time, $caption){
 // Print to screen
 echo 'VIDEO_URL => '. $video_url. ' ';
 echo 'CREATED_TIME => '. $created_time. ' ';
 $filename = $created_time. '.mp4';
 echo 'FILENAME => '. $filename. ' ';
 echo 'CAPTION => '. $caption. ' ';

 //SELECT * FROM pics WHERE filename=$filename ---- if no matches, continue
 $upload_dir = wp_upload_dir();
 if(wp_mkdir_p($upload_dir['path']))
 $file = $upload_dir['path'] . '/' . $filename;
 else
 $file = $upload_dir['basedir'] . '/' . $filename;
 echo ' ' . $file;
 file_put_contents($file, file_get_contents($video_url)); // Save Video to Uploads Folder

 $wp_filetype = wp_check_filetype($filename, null );
 $attachment = array(
 'post_mime_type' => $wp_filetype['type'],
 'post_title' => sanitize_file_name($filename),
 'post_content' => '',
 'post_status' => 'inherit'
 );
 }

 // run
 $code = getNewToken();
 if ($code) {
 printImages($code);
 } else {
 echo 'ERROR, NO ACCESS TOKEN';
 }
 </code>
</pre>

henry-the-pug-com-comp.jpg

I recently rebuilt my dog's website. I originally built it in 2016 using WordPress and the Instagram API, as a photo blog to store some photos and watch how much he grew. This time around I wanted something different. I didn't want to use PHP, and since JavaScript frameworks are all the rage I decided to build it using Gatsby. I still wanted to have some sort of CMS so I kept WordPress and am now running it headless...

henrythepug.com Rebuild

henrythepug-com-rebuild

I've been doing alot of api integrations and custom api stuff at work lately. It's been awhile since I've actually
 got to mess with any JS framework. So I decided to re-do my personal website. This time though I wanted to add a blog.
 Usually for something like this I'd just spin up a WordPress site, add a theme, customize it a bit and call it a day.

That would be easy, we don't like easy. Well let's be honest, sometimes we want easy, but not today. Being the <a
 href="https://vuejs.org/" target="_blank">Vue</a> fan boy that I am, I decided to go with <a
 href="https://nuxtjs.org" target="_blank">Nuxt</a> as my framework of choice. Nuxt offers features like
 SEO with Server Side Rendering (SSR), pre-rendering and code splitting. Since I wanted a blog and I did not want to
 use WordPress. I decided to go with something headless and chose Cockpit to power my blog. You can read more about
 Cockpit <a href="https://getcockpit.com/" target="_blank">here</a>.

Lastly I decided to containerize everything via Docker. So I ended up with a 4 container stack. The Nuxt App
 container, the Cockpit cms container, the <a href="https://www.mongodb.com/" target="_blank">Mongo DB</a>
 container, used by Cockpit and lastly a <a href="https://docs.traefik.io/" target="_blank">Traefik</a> container to
 reverse-proxy and connect everything together. It's deployed to a Digital Ocean droplet.

new-website-powered-by.jpg

new-website-powered-by-small.jpg

I've been doing alot of api integrations and custom api stuff at work lately. It's been awhile since I've actually got to mess with any JS framework. So I decided to re-do my personal website. This time though I wanted to add a blog. Usually for something like this I'd just spin up a wordpress site, add a theme, customize it a bit and call it a day...

Posts Tagged With "Web Development"

macOS Development Environment

henrythepug.com Rebuild

New Website