[002] – First Deploy with Basic UI

It’s been a little while since I’ve posted an update. In typical fashion, its been mostly due to being distracted by all the other things, but I did take a brief break from technology over the new year.

Below is a recap of things that I’ve done since the last update.

 

Setting Up Deployments

As I mentioned in my previous post, for now, I’m just using a simple setup using Rsync to deploy files.

It’s still somewhat of a manual process but for now, it works! I will work to make this more automated in the future.

I like having a separate repo for the server and the client.

When I’m ready to deploy something, I ‘build‘ the client and then from the server project I run a script that copies over the production-ready client files into the servers build folder. Those are the files that are then deployed.

FrontEnd Prototyping

While I haven’t made a formal update in quite a while, behind the scenes I’ve been doing quite a bit of prototyping for the frontend.

This allows for me to get a sense of how things are going to look and function. It also gave me time for a refresher on React Router and Redux!

This project is certainly going to be an iterative process. I’m going to do my best to plan things out ahead of time because that is what works best for me when it comes to coding.

Initial FrontEnd Build

Even though I am using create-react-app, there was still a bit of setup I needed to do for the client-side.

I had to install and configure ESLint. This is also the first project I am going to use Prettier on.

I still like compiling Sass files, so there was a bit of configuration I needed to do in order to get that to work with create-react-app.

Finally, I worked on getting a basic page structure in place. This consisted of getting Bulma wired up, setting up page components, and displaying those components using React Router.

It’s nothing great, but you can view the updates here:

https://staging.learningtracks.io/

You can checkout the repo here:

https://github.com/efuller/learningtracks-client

 

About Those Diversions

It goes without saying that when I work on personal projects, it’s easy for me to get side-tracked.

I may come across a concept that I feel like I want to learn more about or there may be another side project that I want to start or work on.

The worst part about getting side-tracked is coming back to a project that I haven’t touched in a while. It usually takes at least a few hours to get back up to speed on what I last did and what I need to work on next.

To help with this, I’m going to try and keep better track by documenting all the things. I’m not sure yet if I’ll use a simple text file or use an app like Trello.

I love the idea of Trello, but I feel like I need to find the right way to use it that works for me.

Documenting Hurdles

Up to this point, I feel like I haven’t been doing these updates justice because I have not been properly describing the hurdles I’ve had to overcome as well as sharing the resources and fixes I’ve had to put in place.

Going forward, I’m going to try and be better at this!

What’s Next

My plan is to get as much of the frontend completed as possible before starting to wire up the backend. So be on the look-out for more UI enhancements!

[001] – Create a WordPress Plugin That Dynamically Loads Content In A Modal

For a quick recap, this tutorial series is about building a WordPress plugin that will dynamically load content into a modal window and then allow you to cycle through the rest of the content on the page.

This plugin isn’t an official plugin. It’s meant for exploring different concepts and techniques that I’d like to learn more about. That’s not to say you couldn’t take it and continue to build it out!

This first part is all about getting the WordPress plugin setup along with our dev environment.

Plugin Functionality Requirements

This is a little bit of an aside, but I wanted to provide a few details for the problems this plugin will solve.

First, we will need the ability to add employee profiles that consist of their name, job title, photo, and a brief bio.

Second, there will need to be a page that lists out all of these employee profiles as cards.

Third, after clicking on an employee, their details will open up in a modal. The user will then be able to navigate through the rest of the content without closing the modal.

Now, on to the plugin setup!

System Requirements

I’m going to assume that if you’re reading this tutorial you have an up-to-date, local WordPress development environment setup.

You are also going to need Node (I’m using v9.3.0) and either NPM or Yarn to install dependencies.

Git should also be setup on your machine, but it’s not required.

Starting Files

To give you a jumpstart, I’ve setup a repo that contains the plugin scaffolding.

The starting files can be found here: https://github.com/efuller/wp-cycle-content-tutorial

The master branch will always be the starting point. I will create new branches as we progress through the series.

Clone the Repo

The first thing you will need to do is create a folder inside your plugins folder. You can name it wp-cycle-content-tutorial.

From your terminal, change into that newly created directory so you can clone or download and unzip the starting files.

If you do not have git installed, do this:

Head over and download the starting files as a .zip file from here: https://github.com/efuller/wp-cycle-content-tutorial/archive/master.zip

After downloading, just unzip those files into the wp-cycle-content-tutorial we created.

If you have git installed, do this:

After changing directories, enter the following command into your command prompt and press enter:

git clone git@github.com:efuller/wp-cycle-content-tutorial.git .

Your newly created directory should now have a bunch of files in it!

Install Dependencies

From your terminal, make sure you are inside the plugin directory and run either npm install or yarn, then go grab a cup of brew while all the things install.

Configure the Plugin

Open wp-cycle-content-tutorial.php in your favorite text editor.

Customize the plugin headers to your liking. Here are what mine will look like:

Activate the Plugin

At this point, you should be able to into the WordPress admin and activate the plugin.

Configure Browsersync

The tooling for our plugin is built out using Webpack. In a WordPress environment, I find it much nicer to use Webpack with Browsersync for live updates while coding.

There is only one line of code we need to adjust in order to get things working.

In the webpack folder of our plugin, locate the file named webpack.dev.js.

Find the line of code that looks like this proxy: 'learnwp.test'. You will want to swap out learnwp.test with whatever your local domain is.

So the Browsersync config should look something like this:

Run it!

With the configuration setup, make sure you are in the root directory of the plugin and from your terminal run yarn dev or npm run dev.

You should be able to visit http://localhost:3000 and your site will load!

To verify things are working properly, go to the src/scss/index.scss file and add the following block of CSS:

Go back to your browser which should be located at http://localhost:3000 and the background of the webpage should be a golden color!

After verifying, you can go ahead and remove that block of CSS.

What’s Next

Now that we have the plugin all setup and ready to go, we will get into writing some code in the next part!

[000] – Create a WordPress Plugin That Dynamically Loads Content In A Modal

Welcome to my very first WordPress tutorial series!

For a good, while now, I’ve wanted to build a custom WordPress plugin that dynamically loads content into a modal and then allows you to cycle through the rest of the content on that page while never closing the modal.

Why?

There are several reasons why I want to build a plugin with this functionality. For brevity, I’ll list a couple reasons below:

  • AJAX in WordPress isn’t the easiest thing to grasp. Building a plugin like this will help me get better at it.
  • It’s all about learning. Don’t expect all the code and practices used in this plugin to be perfect. I’m still learning and always open to constructive criticism!
  • Fetching data dynamically and then using JavaScript to do something cool with that data is really intriguing to me. This concept can be hard to grasp in the context of WordPress.
  • For the past two years, I have been studying JavaScript outside the context of WordPress and it’s time I start sharing some of that knowledge with the WordPress community. I want to share my ideas on how we can use JavaScript in different ways with WordPress.
  • JavaScript is my language of preference, but building a plugin will help me build out my PHP/WordPress skills.

Iterations

As it stands now, I have a working prototype built out for the plugin we will be building. The code isn’t final, but I wanted to at the least hack together a working version before starting the series.

I hope to make a couple of different versions of this plugin. I like to think of it as going from traditional to modern. Quick disclaimer: It will be a huge deal for me personally if I can actually get this first series of tutorials published. The second and third iterations will be bonus content at this point:)

In the first version, I will implement AJAX in a traditional sense using admin-ajax.php. We’ll also explore using the built-in JS templating WordPress provides along with ES6. jQuery is great, but we won’t be using it in this tutorial.

As I stated earlier, there is a possibility of a second and third iteration. One could implement the WP-API and the other could be an implementation built with React. It will all depend on how this first series goes!

What’s Next

In the next part, we’ll get the initial plugin setup and make sure our dev environment is good to go.

 

 

[001] – Server Setup, DNS, and Key Decisions

There is quite a bit to catch up on since my last post so let’s get right into it!

CSS Framework

As a FrontEnd Developer, it’s hard to resign myself to using something like a CSS Framework. Initially, I intended to custom style all the things for this project, but the more I thought about it, the more I realized how much time and energy this would consume.

For this reason, I have decided that I will use a CSS framework. For now, my choice is going to be Bulma.io. I’ve known about Bulma for a while and the thing I really like about it is that it is right in the middle when it comes to CSS frameworks. Not too heavy, not too light.

Tooling

Another major decision I made this past week is that I will be using create-react-app to scaffold the React frontend.

I love Webpack, and for some weird reason, I like configuring it. However, it can be time-consuming to configure and I need really focus on saving time and mental energy especially at the start of this project.

Server Setup

I admit I am a complete noob at DevOps. I know barely enough to be dangerous.

A lot of the server setup and configuration I am using comes from a great course I took over at https://jsfullstacker.com/.  I found this site by watching the awesome videos Rem Zolotykh puts out over on YouTube. Rem is a great teacher and really knows his stuff!

I’ve decided to use Digital Ocean for this project. This is my first experience using it and so far it’s been really great.

Right now, I have a staging and production environment setup. I really have no idea how this workflow will work, but I’d like to try it. Staging will be for active development and once a feature is complete, it will be pushed to prod.

Here is a quick list of things I had to do to get this setup and working:

  • Create a new droplet on Digital Ocean
  • Set the droplet up to use SSH
  • Create a non-root user
  • Install/configure NGINX
  • Create two new A records for my domain. One for @ and one for staging.
  • Setup a virtual host for handling the staging sub-domain
  • Install NodeJS.
  • Install and configure PM2 to manage a super, simple web server instance.

Repos

I set up two repos for this project as I want to keep the server/api and frontend separate.

Server/API: https://github.com/efuller/learningtracks-server

FrontEnd: https://github.com/efuller/learningtracks-client

Deployments

These are something I still need to get setup. I will probably just use a Rsync to push my files to the server. Eventually, I’d like to get something a bit more elaborate setup.

 

[000] – Introducing the LearningTracks.io Web Application Journal

As I stated in my recap post, I have a passion for building web applications. It’s part of what has been driving me to learn as much as I can about the full stack over the last few years.

Well, I think the time has come for me to put what I’ve been learning into practice and attempt to build out an actual web application.

Say hello to learningtracks.io! You will learn more about what this site will be all about as we move forward.

Disclaimer

Before we start this journey, let me first start by listing out a few disclaimers:

  1. I don’t know everything!
  2. This project is a learning exercise.
  3. Some of the time I’ll have no clue what I’m doing and will rely on doing what Google search tells me to do.
  4. Do I really think I’m ready to take on this kind of project? Hell no!

Journaling the Process

Initially, I intended on making this project a huge series of tutorials.

After some thought, I’ve decided that would be way too time-consuming and a huge mental blocker that would continually cause me to freeze and do nothing!

Instead, I am going to take the approach of journaling the process. I’ll include my thought process behind decisions I’ve made, resources I’ve used, and any other tips and tricks I’ve learned along the way. Basically, these journal entries will be filled with lots of golden nuggets!

The main reason I am choosing a journaling approach is that it’s a huge time saver. I can sit down and write out a journal entry in an hour. Whereas a tutorial can take days to write.

These journal entries will be a quicker read as well. No BS, just the good stuff!

Finally, I am still going to write detailed tutorials about different concepts along the way!

In the End

This experiment could end up being a complete failure and I’m OK with that. It’s all about learning.

If by sharing this experience I help even just one person along the way, then it will have been worth it!

 

A Recap, What I’ve Been Learning, and the Future

Over the past two years, I’ve been working tirelessly doing everything I can to figure out my way as a developer all while trying learning what seems to be a never-ending mountain of different technologies.

Although I have not yet achieved all of my goals I feel like I’ve grown and learned enough as a developer that I need to start focusing on building and sharing.

This post will serve a couple of different purposes.

First, just hitting publish will be a huge accomplishment! I’ve been ‘talking’ about starting to write for a very long time.

Second, it will give a recap of the journey I’ve been on for the last 2 – 3 years. I’ll list out the technologies I’ve spent time learning as well as list out things I’ve learned about myself.

Third, I will layout plans I have for the future. I really want to start building things and writing about it. I’ve wanted to write long-form tutorials for a long while and I think it’s time I start.

The Recap

In December of 2014, I took a long shot and applied to WebDevStudios for the position of a Front-End Developer. Crazy enough, I got a callback (see what I did there:) and started in January 2015!

This marked a huge change in my life as it completed a career transition from the IT Industry to becoming a Front-End Developer.

Up to the point of getting hired, I had been learning HTML, Sass/CSS and a bit of JavaScript. I can distinctly remember that during my interview it was mentioned that my learning curve would skyrocket during that first year, and that was completely accurate.

It took all of that first year at WebDevStudios to realize what my true passion was, and that was JavaScript. It was around this time that I made a commitment to myself that I was going to learn everything I could about JavaScript language. This meant more than writing a bit of jQuery to manipulate the DOM. I wanted to learn the how and why behind JavaScript.

Over the next few months, I began to dive in. That’s when I came across JavaScriptIsSexy.com, the website from the great JavaScript’er/Writer Richard Bovell.

JSIS is where I learned about Bov Academy, the online platform Richard was launching to help people learn JavaScript. I took the dive and made the investment to become a member of the first cohort in the full-stack path.

Overall, Bov has been great and very demanding at times. I’ve been taking the approach of working through it at my own pace while balancing it with life and (a lot of) other supplemental learning.

For more perspective, below is a list of other technologies I’ve dedicated time to learn:

  • HTML
  • Sass/CSS
  • JavaScript/jQuery/ES6
  • WordPress
  • PHP
  • Backbone
  • JS Templating
  • Webpack
  • Express
  • React
  • Redux
  • React Router
  • Axios
  • MongoDB
  • PassportJS

I’ve also learned a thing or two about myself over this time as well:

  • I learn slower than others. I’m not someone who can study something like React for a week and proclaim to have ‘learned React’!
  • I do not fall into the WordPress (although it is great!) is the be all, end all. I keep a very open mind because there is a great big world of awesome things out there. I like to take the approach of using new technologies with WordPress. The addition of the API has certainly helped in this regard.
  • I don’t love PHP. It’s not my passion. But it can be enjoyable to work with.
  • At times, I feel like I focus too much on learning and not doing.
  • I have a real passion for building web apps from the ground up, preferably with JavaScript.
  • Two years into learning JS and my passion seems to be even stronger. There is still so much to learn.
  • I’m not a designer.
  • I consider myself a Front-End developer, but I like Back-End things too. I think a 70/30 split is probably the sweet spot for me.

Here are a few projects I’ve built that I’m pretty proud of:

The Future

One of my goals for 2017 was to be able to call myself a Full-Stack JavaScript developer by the end of the year. Have I met my goal? The short answer is no, but I’m close!

I’m in a place where I know enough in terms of being Full-Stack, I just need to put it all together and build something to showcase my skills, so that’s the plan!

The theme for 2018 is going to be all about taking action in all facets of being a developer.

Learning

The learning never ends. Just because 2018 is going to be all about taking action, I will still need to set time aside to learn.

I plan to finish out my studies at Bov Academy and continue to deeply learn all things JavaScript. As of right now, I’m really going to dive deep into the React/Redux/ES6 stack. I want to achieve expert level knowledge.

Portfolio

I’ve never really taken the time to create any type of portfolio so I’m planning to build out a few projects that I can officially add to my portfolio.

Write

As I stated earlier, I’ve been thinking about starting to write for a very long time so this is something I plan to do going forward.

I plan to write long-form, technical tutorials as well as really dig in and dive deep into different JavaScript topics.

On a side note, I’m over giving a care what others will think of the articles or code that I write. This has been a huge blocker for me and it’s time to break that blocker into smithereens.

Projects

I have quite a list of projects I’d like to work on over the next year. The main thing I’d like to focus on is writing about these projects as I build them.

One of the first things I’d like to build a new WordPress theme for this site that is built with React! Things have changed quite a bit since I built out api.ericfuller.net.

I have a couple of WordPress plugin ideas that I’d like to build out. Of course, they will be focused on JavaScript and using modern technologies.

As I stated earlier, I have a huge passion for creating/developing web applications. I have a few ideas that I hope to build out to an MVP level. I recently reserved learningtracks.io and plan to build out an idea I have for it so stay tuned.

I plan to treat this project as if it were a startup and document the process of taking it from idea to a useable MVP.

This project will be built on all things JavaScript.

Conclusion

I hope that this first post is the beginning of an amazing year ahead.

Writing about complex topics and presenting them in a simple way will not only help me solidify my knowledge but will hopefully help others along the way.