Timeline

Over the last three weeks I shared a few things I read and sort of learned along the way. This week I, again, focused a little more on support but did dive back into learning things again. What was really awesome was a tweet I saw and it felt like I really was meant to see that.

The tweet was by Chris Coyier:

Not into advice with a "you should learn this before you learn this" vibe.

Everybody's learning path is a maze. Many starting points, some dead ends, some successes, and you figure it out as you go.

So someone starts with a different abstraction level than you did. Mega shrug

— Chris Coyier (@chriscoyier) August 1, 2018

For me, that is fairly true. I picked up CSS first, then HTML before wanting to learn JavaScript. Some of the things clicked instantly and some took longer than others. JavaScript being the one I’m still sort of learning. I say that because I’m finally comfortable enough to really break things on purpose to see what happens.

Now, I did mention I was debating on updating my laptop to Ubuntu 18.04 last time and I did. It’s been good. There are a few things I’m still learning about Ubuntu but overall it has been good that I only had to restart it once after an update. If it was my desktop ( running Windows ) I would most likely still be updating random things.It’s been really irking me that I can’t remove some apps without resorting to the command line. This was after a reset.

I guess enough griping really, I’m lucky I have that desktop. I built it a long time ago and it is still running. I just need to find the time and dust it out. It has been quite some time since I last did that anyway.

Okay, back on track.

The cool part is that things really are starting to make sense to me when it comes to working with ReactJS, Redux, and React Router. I had encountered an issue where the page would not render the content properly and would show the error message instead. I was using a try...catchstatement in order to display things. It looked a little like:

try {
  render(
    <Provider store={store}>
      <SitePage/>
    </Provider>,
    elem
  );
} catch(error) {
  elem.innerHTML = "Welp, something went wrong...";
}

I kept only seeing the “Welp” message. This morning I found out it was because I was loading the Provider from the incorrect module. It was only react that I had typed instead of react-redux. I felt a little silly but I laughed at it.

I’ve been trying to laugh more about the little things like that instead of worrying or getting mad.

I’ve tried watching a few videos as well and they have helped some but I think that writing out the code helped more because it has helped with the muscle memory. My biggest issue right now is that I feel very everywhere. I can’t seem to focus on one window at a time. It’s only when I am reading that I can truly sit down and keep that focus going for more than five minutes.

As for the things I read, I did compile a small list of just a few things that did help me a bit more. I tried to start it at the beginning of the week and updated when I actually remembered to do it.

Things I read:

• Redux tutorial
• GraphQL
• Object.assign()
• Array.prototype.shift()
• Understanding Immutability
• The Tao of Redux

This week I focused more on the free support forums. This was in part because I took a small break from reading about Docker Compose and setting up my local environment on Ubuntu. It was cool to see the environment get built with a simple command. I think the biggest hurdle I encountered was I couldn’t find an article that goes into detail how the docker-compose file sort of works.

Many just gave a sample that works, that’s great, but I would like to know what it actually does. For example, what the markup actually means and their subtle differences. The volumes is a good example of that. Now, I don’t know why wordpress:/var/www/html would not work but "wordpress:/var/www/html" would is beyond me.

So it was nice to get away from troubleshooting my own issues. It’s been too long since I last did that.

It felt good. It felt really good.

There is one topic that is still on my mind because it dealt with editing JavaScript code. It was for one of those quote of the day widgets. The difference was where those quotes were stored. It was inside of a text file uploaded to the site. I guess I could see some potential good but personally I would opt for storing those in the database.

What was cool was that it was vanilla JavaScript and not jQuery. I was able to use:

var elems = document.getElementsByClassName('usr-quote');
for (var i=0; i < elems.length; i++) {
  elems[i].appendChild(document.createTextNode(txt[(var2-var1)%txt.length]));
};

Decent. Some of that was already there but I adjusted it a little. The big issue is that inside of that script they add a call when the DOM is loaded. This would be fine but it is the same code with no checks to make sure those functions or variables do not already exist. Essentially using the global scope for it all.

[Enter silent scream here]

As for my developer brain, I have not made much progress. I need to gather up some more links so I can read more. I see some on my Twitter timeline from time to time but I forget to either bookmark them or read them. I need to get better at that.

All I know is that I’m going to be debating on updating my laptop to use Bionic Beaver for the next week or two.

For the last year, I’ve learned some JavaScript and a few more things about PHP. That’s great. The only thing is that I don’t feel like I have expanded that skill set just yet. I think a lot of that is because I never really had a personal project to test things out.

I began building my random theme – I think – last week. Getting things to build was pretty cool and a little frustrating only because I didn’t really think about what I was needing. And by that I mean, I didn’t think about what tools are required.

The simplest was knowing about the command line. Yes, it sounds strange but that is a great thing to know even if it means just basic things like getting the current folder you are in or even knowing what files are in the folder helps a ton.

Things needed

The things I knew that I needed or at least I thought I would need were:

• React
• ReactDOM
• Babel
• Webpack
• NodeJS

Super simple, right?

I thought so. What makes this a little different is that I have three operating systems now. Windows 10, OSX, and Ubuntu. A desktop and two laptops, respectively. On my desktop and OSX I use VVV, but on Ubuntu, I chose to scrap that and use Docker. A bit more to the point Docker Compose.

I began reading about how it works and what is used so I can setup a local environment for developing WordPress things. In my case a theme. What’s cool is that they have a quick guide for WordPress and there are a few others who have their own setup process as well.

Yes, I did spend quite a bit of time looking at many docker-compose files to get a better idea of how it all works. I’ll have to share my experience next week as I experiment a little more and get a better understanding of it. The reason is because I know on Twitter I came across this:

Dear internets, does anyone have a #Docker setup for contributing to #WordPress #Core that includes PHPUnit?

— JayWood 🐌 (@plugish) June 11, 2018

Quite some time ago but this was something I still wanted to look at much closer so that others could benefit as well. In particular those who want to contribute to the project and could already be using Docker.

Tying things together

It does seem like I went on a bit of a tangent but bare with me there is a reason for that. You see, on my Ubuntu laptop, I don’t currently have a local environment setup so that means I can’t exactly work on my theme if I even tried.

Yet.

This is the reason I said, the things I thought I would need because I obviously forgot to include my local environment. I know some of you are saying just do it on a live site! I wish I could but I really don’t want to deal with maintaining things or dealing with configurations and whatnots.

Yet, I sort of am dealing with configuration because Docker Compose is a neat little tool to get up and running. I think my favorite part is just learning why things break.

Minor weekly highlights

With that being said, there are a few things that helped me out this week when it came to reading. A few articles and a few repos that helped shed some light on how things work when using Docker Compose. The last one is actually a repo by Justin Tadlock and it’s a modified version from a tutorial I wrote a long time ago:

• JS Fundamentals before learning React
• NodeJS on Ubuntu installation
• ReactDOM documentation
• nezhar docker-compose file
• Tate’s Docker setup
• Docker’s WordPress available images
• Docker Compose overview
• WordPress with Docker and Ubuntu
• 10up docker-compose file
• Docker Compose file reference
• Hybrid Font package

Hopefully this coming week I learn more and can share this experience along the way.

Okay, I haven’t done weekly updates in quite some time. I was somewhat consistent for a while but then it just kind of stopped for some time. Things happen, right?

This time around, I am thinking of doing my updates on Friday nights. This way I can at least be somewhat consistent and plan ahead for the end of the week.

I think the biggest reason I want to do this is to see my progress but also record it. Having it on this site makes perfect sense because there are a few things I want to do.

• Understand ReactJS better
• Build a ReactJS theme, plugin, and or admin page
• Draw more
• Use Illustrator more
• Read more
• Blog more

Almost sounds like a lot but I know I’m capable of doing those things.

Today I began working on a random theme that will use ReactJS and ran into a few hurdles getting the JavaScript to compile properly. I was lucky to read this article to get a better understanding on how to get things working.

It was cool to see the Component I had created get rendered on the browser, granted it was a super simple thing but still cool nonetheless. I think the one thing I would like to focus on is getting a decent navigation going or even getting archives to show right. I know I saw an issue with both not being able to fully play nice with WordPress.

All I know is that I’m looking forward to breaking my site along the way.

Yes, I’ll be trying to use the theme on this site once it gets more fine-tuned.

How do I start start this off? I’ve been using Git for several years. I actually had to look to see when I opened my GitHub account. I opened the account in 2012 just a few months after I began contributing to the WordPress forums.

When I first began using WordPress I had no prior experience with any version control system. I honestly don’t remember who it was that got me to think about using one. I just remember it was a WordCamp talk I saw about theme development. If I ever recall, I’ll update this to reflect that.

There are still things I’m not familiar with but I did realize the other day that I do know quite a bit. It does amaze me when I do see how much I have learned over the years.

The reason I say this is because for the last several days I’ve been sort of contemplating on making a few slides, My local WordPress meetup is filled with people who are of varying degrees of knowledge when it comes to not only WordPress but also development. I know there are some who would love to learn a bit more and expand their skill set. It’s also because I know that if I do a talk it will force me to read more about how to use Git and other tools as well.

For me, learning Git is an ongoing thing. Every other day I tend to look up new things. The most recent one was how to create a diff file from a stash. Yeah, I know I just lost a few people with that one but it is something that was pretty cool to do, There was a reason for it. Now I can’t fully recall what that reason was.

I am still debating on whether or not I’ll make a few slides and a video to go along with it or just make a random post. Or both.

I guess I’ll just have to wait and see how I really feel about it.